migrate color/icon selection sheet to composition API and typescript

src/components/mobile/ColorSelectionSheet.vue

@@ -28,50 +28,48 @@
     </f7-sheet>
 </template>
 
-<script>
+<script setup lang="ts">
+import { type Ref, ref, computed } from 'vue';
+
+import type { ColorValue, ColorInfo } from '@/core/color.ts';
 import { arrayContainsFieldValue } from '@/lib/common.ts';
 import { getColorsInRows } from '@/lib/color.ts';
 import { scrollToSelectedItem } from '@/lib/ui/mobile.js';
 
-export default {
+const props = defineProps<{
-    props: [
+    modelValue: ColorValue;
-        'modelValue',
+    show: boolean;
-        'columnCount',
+    columnCount?: number;
-        'show',
+    allColorInfos: ColorValue[];
-        'allColorInfos'
+}>();
-    ],
-    emits: [
-        'update:modelValue',
-        'update:show'
-    ],
-    data() {
-        const self = this;
 
-        return {
+const emit = defineEmits<{
-            currentValue: self.modelValue,
+    (e: 'update:modelValue', value: ColorValue): void
-            itemPerRow: self.columnCount || 7
+    (e: 'update:show', value: boolean): void
-        }
+}>();
-    },
+
-    computed: {
+const currentValue: Ref<ColorValue> = ref(props.modelValue);
-        allColorRows() {
+const itemPerRow: Ref<number> = ref(props.columnCount || 7);
-            return getColorsInRows(this.allColorInfos, this.itemPerRow);
+
-        }
+const allColorRows = computed<ColorInfo[][]>(() => {
-    },
+    return getColorsInRows(props.allColorInfos, itemPerRow.value);
-    methods: {
+});
-        onColorClicked(colorInfo) {
+
-            this.currentValue = colorInfo.color;
+function onColorClicked(colorInfo: ColorInfo) {
-            this.$emit('update:modelValue', this.currentValue);
+    currentValue.value = colorInfo.color;
-        },
+    emit('update:modelValue', currentValue.value);
-        onSheetOpen(event) {
+}
-            this.currentValue = this.modelValue;
+
+function hasSelectedIcon(row: ColorInfo[]) {
+    return arrayContainsFieldValue(row, 'id', currentValue.value);
+}
+
+function onSheetOpen(event: { $el: HTMLElement }) {
+    currentValue.value = props.modelValue;
     scrollToSelectedItem(event.$el, '.page-content', '.row-has-selected-item');
-        },
+}
-        onSheetClosed() {
+
-            this.$emit('update:show', false);
+function onSheetClosed() {
-        },
+    emit('update:show', false);
-        hasSelectedIcon(row) {
-            return arrayContainsFieldValue(row, 'id', this.currentValue);
-        }
-    }
 }
 </script>

src/components/mobile/IconSelectionSheet.vue

@@ -28,61 +28,59 @@
     </f7-sheet>
 </template>
 
-<script>
+<script setup lang="ts">
+import { type Ref, ref, computed } from 'vue';
+
+import type { IconInfo, IconInfoWithId } from '@/core/icon.ts';
 import { arrayContainsFieldValue } from '@/lib/common.ts';
 import { getIconsInRows } from '@/lib/icon.ts';
 import { scrollToSelectedItem } from '@/lib/ui/mobile.js';
 
-export default {
+const props = defineProps<{
-    props: [
+    modelValue: string;
-        'modelValue',
+    show: boolean;
-        'color',
+    columnCount?: number;
-        'columnCount',
+    color: string;
-        'show',
+    allIconInfos: Record<string, IconInfo>;
-        'allIconInfos'
+}>();
-    ],
-    emits: [
-        'update:modelValue',
-        'update:show'
-    ],
-    data() {
-        const self = this;
 
-        return {
+const emit = defineEmits<{
-            currentValue: self.modelValue,
+    (e: 'update:modelValue', value: string): void
-            itemPerRow: self.columnCount || 7
+    (e: 'update:show', value: boolean): void
-        }
+}>();
-    },
+
-    computed: {
+const currentValue: Ref<string> = ref(props.modelValue);
-        allIconRows() {
+const itemPerRow: Ref<number> = ref(props.columnCount || 7);
-            return getIconsInRows(this.allIconInfos, this.itemPerRow);
+
-        },
+const allIconRows = computed<IconInfoWithId[][]>(() => {
-        heightClass() {
+    return getIconsInRows(props.allIconInfos, itemPerRow.value);
-            if (this.allIconRows.length > 10) {
+});
+
+const heightClass = computed<string>(() => {
+    if (allIconRows.value.length > 10) {
         return 'icon-selection-huge-sheet';
-            } else if (this.allIconRows.length > 6) {
+    } else if (allIconRows.value.length > 6) {
         return 'icon-selection-large-sheet';
     } else {
         return '';
     }
-        }
+});
-    },
+
-    methods: {
+function onIconClicked(iconInfo: IconInfoWithId) {
-        onIconClicked(iconInfo) {
+    currentValue.value = iconInfo.id;
-            this.currentValue = iconInfo.id;
+    emit('update:modelValue', currentValue.value);
-            this.$emit('update:modelValue', this.currentValue);
+}
-        },
+
-        onSheetOpen(event) {
+function hasSelectedIcon(row: IconInfoWithId[]) {
-            this.currentValue = this.modelValue;
+    return arrayContainsFieldValue(row, 'id', currentValue.value);
+}
+
+function onSheetOpen(event: { $el: HTMLElement }) {
     scrollToSelectedItem(event.$el, '.page-content', '.row-has-selected-item');
-        },
+}
-        onSheetClosed() {
+
-            this.$emit('update:show', false);
+function onSheetClosed() {
-        },
+    emit('update:show', false);
-        hasSelectedIcon(row) {
-            return arrayContainsFieldValue(row, 'id', this.currentValue);
-        }
-    }
 }
 </script>