From 75a96e871a6edf3c655ac82b08dcf855a7e283c4 Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sun, 12 Jan 2025 00:03:01 +0800
Subject: [PATCH] migrate overview list item selection sheet to composition API
 and typescript

---
 .../mobile/ListItemSelectionSheet.vue         | 172 +++++++++---------
 1 file changed, 87 insertions(+), 85 deletions(-)

diff --git a/src/components/mobile/ListItemSelectionSheet.vue b/src/components/mobile/ListItemSelectionSheet.vue
index 071aa796..0701667f 100644
--- a/src/components/mobile/ListItemSelectionSheet.vue
+++ b/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>
-import { scrollToSelectedItem } from '@/lib/ui/mobile.ts';
+<script setup lang="ts">
+import { ref, computed } from 'vue';
 
-export default {
-    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;
+import { useI18n } from '@/locales/helpers.ts';
 
-        return {
-            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;
-                }
-            }
+import { type Framework7Dom, scrollToSelectedItem } from '@/lib/ui/mobile.ts';
 
-            this.$emit('update:modelValue', this.currentValue);
-            this.close();
-        },
-        onSheetOpen(event) {
-            this.currentValue = this.modelValue;
-            scrollToSelectedItem(event.$el, '.page-content', 'li.list-item-selected');
-        },
-        onSheetClosed() {
-            this.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);
+const props = defineProps<{
+    modelValue: unknown;
+    valueType: string; // item or index
+    keyField?: string; // for value type == item
+    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 (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>