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,92 +31,94 @@
     </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
+
-        }
+const props = defineProps<{
-    },
+    modelValue: unknown;
-    computed: {
+    valueType: string; // item or index
-        heightClass() {
+    keyField?: string; // for value type == item
-            if (this.items.length > 10) {
+    valueField?: string; // for value type == item
+    titleField: string;
+    titleI18n?: boolean;
+    iconField?: string;
+    iconType?: string;
+    colorField?: string;
+    hiddenField?: string;
+    items: unknown[];
+    show: boolean;
+}>();
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: unknown): void;
+    (e: 'update:show', value: boolean): void;
+}>();
+
+const { tt, ti } = useI18n();
+
+const currentValue = ref<unknown>(props.modelValue);
+
+const heightClass = computed<string>(() => {
+    if (props.items.length > 10) {
         return 'list-item-selection-huge-sheet';
-            } else if (this.items.length > 6) {
+    } 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;
         }
-    },
+    }
-    methods: {
+}
-        getItemValue(item, index, fieldName, valueType) {
+
+function getItemValue(item: unknown, index: number, fieldName: string | undefined, valueType: string): unknown {
     if (valueType === 'index') {
         return index;
     } else if (fieldName) {
-                return item[fieldName];
+        return (item as Record<string, unknown>)[fieldName];
     } else {
         return item;
     }
-        },
+}
-        onItemClicked(item, index) {
+
-            if (this.valueType === 'index') {
+function close() {
-                this.currentValue = index;
+    emit('update:show', false);
+}
+
+function onItemClicked(item: unknown, index: number): void {
+    if (props.valueType === 'index') {
+        currentValue.value = index;
     } else {
-                if (this.valueField) {
+        if (props.valueField) {
-                    this.currentValue = item[this.valueField];
+            currentValue.value = (item as Record<string, unknown>)[props.valueField];
         } else {
-                    this.currentValue = item;
+            currentValue.value = item;
         }
     }
 
-            this.$emit('update:modelValue', this.currentValue);
+    emit('update:modelValue', currentValue.value);
-            this.close();
+    close();
-        },
+}
-        onSheetOpen(event) {
+
-            this.currentValue = this.modelValue;
+function onSheetOpen(event: { $el: Framework7Dom }): void {
+    currentValue.value = props.modelValue;
     scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected');
-        },
+}
-        onSheetClosed() {
+
-            this.close();
+function onSheetClosed(): void {
-        },
+    close();
-        isSelected(item, index) {
-            if (this.valueType === 'index') {
-                return this.currentValue === index;
-            } else {
-                if (this.valueField) {
-                    return this.currentValue === item[this.valueField];
-                } else {
-                    return this.currentValue === item;
-                }
-            }
-        },
-        close() {
-            this.$emit('update:show', false);
-        }
-    }
 }
 </script>