migrate overview list item selection sheet to composition API and typescript

src/components/mobile/ListItemSelectionSheet.vue

@@ -6,24 +6,24 @@
             <div class="swipe-handler"></div>
             <div class="left"></div>
             <div class="right">
-                <f7-link sheet-close :text="$t('Done')"></f7-link>
+                <f7-link sheet-close :text="tt('Done')"></f7-link>
             </div>
         </f7-toolbar>
         <f7-page-content>
             <f7-list dividers class="no-margin-vertical">
                 <f7-list-item link="#" no-chevron
-                              :title="$tIf((titleField ? item[titleField] : item), titleI18n)"
+                              :title="ti((titleField ? (item as Record<string, unknown>)[titleField] : item) as string, !!titleI18n)"
                               :value="getItemValue(item, index, valueField, valueType)"
                               :class="{ 'list-item-selected': isSelected(item, index) }"
                               :key="getItemValue(item, index, keyField, valueType)"
                               v-for="(item, index) in items"
-                              v-show="item && (!hiddenField || !item[hiddenField])"
+                              v-show="item && (!hiddenField || !(item as Record<string, unknown>)[hiddenField])"
                               @click="onItemClicked(item, index)">
                     <template #content-start>
                         <f7-icon class="list-item-checked-icon" f7="checkmark_alt" :style="{ 'color': isSelected(item, index) ? '' : 'transparent' }"></f7-icon>
                     </template>
                     <template #media v-if="iconField">
-                        <ItemIcon :icon-type="iconType" :icon-id="item[iconField]" :color="item[colorField]"></ItemIcon>
+                        <ItemIcon :icon-type="iconType" :icon-id="(item as Record<string, unknown>)[iconField]" :color="colorField ? (item as Record<string, unknown>)[colorField] : undefined"></ItemIcon>
                     </template>
                 </f7-list-item>
             </f7-list>
@@ -31,93 +31,95 @@
     </f7-sheet>
 </template>
 
-<script>
+<script setup lang="ts">
-import { scrollToSelectedItem } from '@/lib/ui/mobile.ts';
+import { ref, computed } from 'vue';
 
-export default {
+import { useI18n } from '@/locales/helpers.ts';
-    props: [
-        'modelValue',
-        'valueType', // item or index
-        'keyField', // for value type == item
-        'valueField', // for value type == item
-        'titleField',
-        'titleI18n',
-        'iconField',
-        'iconType',
-        'colorField',
-        'hiddenField',
-        'items',
-        'show'
-    ],
-    emits: [
-        'update:modelValue',
-        'update:show'
-    ],
-    data() {
-        const self = this;
 
-        return {
+import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
-            currentValue: self.modelValue
-        }
-    },
-    computed: {
-        heightClass() {
-            if (this.items.length > 10) {
-                return 'list-item-selection-huge-sheet';
-            } else if (this.items.length > 6) {
-                return 'list-item-selection-large-sheet';
-            } else {
-                return '';
-            }
-        }
-    },
-    methods: {
-        getItemValue(item, index, fieldName, valueType) {
-            if (valueType === 'index') {
-                return index;
-            } else if (fieldName) {
-                return item[fieldName];
-            } else {
-                return item;
-            }
-        },
-        onItemClicked(item, index) {
-            if (this.valueType === 'index') {
-                this.currentValue = index;
-            } else {
-                if (this.valueField) {
-                    this.currentValue = item[this.valueField];
-                } else {
-                    this.currentValue = item;
-                }
-            }
 
-            this.$emit('update:modelValue', this.currentValue);
+const props = defineProps<{
-            this.close();
+    modelValue: unknown;
-        },
+    valueType: string; // item or index
-        onSheetOpen(event) {
+    keyField?: string; // for value type == item
-            this.currentValue = this.modelValue;
+    valueField?: string; // for value type == item
-            scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected');
+    titleField: string;
-        },
+    titleI18n?: boolean;
-        onSheetClosed() {
+    iconField?: string;
-            this.close();
+    iconType?: string;
-        },
+    colorField?: string;
-        isSelected(item, index) {
+    hiddenField?: string;
-            if (this.valueType === 'index') {
+    items: unknown[];
-                return this.currentValue === index;
+    show: boolean;
-            } else {
+}>();
-                if (this.valueField) {
+const emit = defineEmits<{
-                    return this.currentValue === item[this.valueField];
+    (e: 'update:modelValue', value: unknown): void;
-                } else {
+    (e: 'update:show', value: boolean): void;
-                    return this.currentValue === item;
+}>();
-                }
+
-            }
+const { tt, ti } = useI18n();
-        },
+
-        close() {
+const currentValue = ref<unknown>(props.modelValue);
-            this.$emit('update:show', false);
+
+const heightClass = computed<string>(() => {
+    if (props.items.length > 10) {
+        return 'list-item-selection-huge-sheet';
+    } else if (props.items.length > 6) {
+        return 'list-item-selection-large-sheet';
+    } else {
+        return '';
+    }
+});
+
+function isSelected(item: unknown, index: number): boolean {
+    if (props.valueType === 'index') {
+        return currentValue.value === index;
+    } else {
+        if (props.valueField) {
+            return currentValue.value === (item as Record<string, unknown>)[props.valueField];
+        } else {
+            return currentValue.value === item;
         }
     }
 }
+
+function getItemValue(item: unknown, index: number, fieldName: string | undefined, valueType: string): unknown {
+    if (valueType === 'index') {
+        return index;
+    } else if (fieldName) {
+        return (item as Record<string, unknown>)[fieldName];
+    } else {
+        return item;
+    }
+}
+
+function close() {
+    emit('update:show', false);
+}
+
+function onItemClicked(item: unknown, index: number): void {
+    if (props.valueType === 'index') {
+        currentValue.value = index;
+    } else {
+        if (props.valueField) {
+            currentValue.value = (item as Record<string, unknown>)[props.valueField];
+        } else {
+            currentValue.value = item;
+        }
+    }
+
+    emit('update:modelValue', currentValue.value);
+    close();
+}
+
+function onSheetOpen(event: { $el: Framework7Dom }): void {
+    currentValue.value = props.modelValue;
+    scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected');
+}
+
+function onSheetClosed(): void {
+    close();
+}
 </script>
 
 <style>