migrate color / icon select to typescript

src/components/desktop/ColorSelect.vue

@@ -38,7 +38,10 @@
     </v-select>
 </template>
 
-<script>
+<script setup lang="ts">
+import { type Ref, ref, computed, useTemplateRef, nextTick } from 'vue';
+
+import type { ColorValue, ColorInfo } from '@/core/color.ts';
 import { DEFAULT_ICON_COLOR } from '@/consts/color.ts';
 import { arrayContainsFieldValue } from '@/lib/common.ts';
 import { getColorsInRows } from '@/lib/color.ts';
@@ -49,63 +52,54 @@ import {
     mdiCheck
 } from '@mdi/js';
 
-export default {
-    props: [
-        'modelValue',
-        'disabled',
-        'label',
-        'columnCount',
-        'allColorInfos'
-    ],
-    emits: [
-        'update:modelValue',
-    ],
-    data() {
-        const self = this;
+const props = defineProps<{
+    modelValue: ColorValue;
+    disabled?: boolean;
+    label?: string;
+    columnCount?: number;
+    allColorInfos: ColorValue[];
+}>();
 
-        return {
-            itemPerRow: self.columnCount || 7,
-            icons: {
-                square: mdiSquareRounded,
-                checked: mdiCheck
-            }
-        }
-    },
-    computed: {
-        allColorRows() {
-            return getColorsInRows(this.allColorInfos, this.itemPerRow);
-        },
-        color: {
-            get: function () {
-                return this.modelValue;
-            },
-            set: function (value) {
-                this.$emit('update:modelValue', value);
-            }
-        }
-    },
-    methods: {
-        hasSelectedIcon(row) {
-            return arrayContainsFieldValue(row, 'id', this.modelValue);
-        },
-        getFinalColor(color) {
-            if (color && color !== DEFAULT_ICON_COLOR) {
-                return '#' + color;
-            } else {
-                return 'var(--default-icon-color)';
-            }
-        },
-        onMenuStateChanged(state) {
-            const self = this;
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: ColorValue): void
+}>();
 
-            if (state) {
-                self.$nextTick(() => {
-                    if (self.$refs.dropdownMenu && self.$refs.dropdownMenu.parentElement) {
-                        scrollToSelectedItem(self.$refs.dropdownMenu.parentElement, null, '.row-has-selected-item');
-                    }
-                });
+const icons = {
+    square: mdiSquareRounded,
+    checked: mdiCheck
+};
+
+const dropdownMenu: Ref<HTMLElement | null> = useTemplateRef('dropdownMenu');
+const itemPerRow: Ref<number> = ref(props.columnCount || 7);
+
+const allColorRows = computed<ColorInfo[][]>(() => {
+    return getColorsInRows(props.allColorInfos, itemPerRow.value);
+});
+
+const color = computed<ColorValue>({
+    get: () => props.modelValue,
+    set: (value: ColorValue) => emit('update:modelValue', value)
+});
+
+function hasSelectedIcon(row: ColorInfo[]): boolean {
+    return arrayContainsFieldValue(row, 'id', props.modelValue);
+}
+
+function getFinalColor(color: ColorValue): string {
+    if (color && color !== DEFAULT_ICON_COLOR) {
+        return '#' + color;
+    } else {
+        return 'var(--default-icon-color)';
+    }
+}
+
+function onMenuStateChanged(state: boolean): void {
+    if (state) {
+        nextTick(() => {
+            if (dropdownMenu.value && dropdownMenu.value.parentElement) {
+                scrollToSelectedItem(dropdownMenu.value.parentElement, null, '.row-has-selected-item');
             }
-        }
+        });
     }
 }
 </script>

src/components/desktop/IconSelect.vue

@@ -36,7 +36,11 @@
     </v-select>
 </template>
 
-<script>
+<script setup lang="ts">
+import { type Ref, ref, computed, useTemplateRef, nextTick } from 'vue';
+
+import type { ColorValue } from '@/core/color.ts';
+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/desktop.ts';
@@ -45,57 +49,47 @@ import {
     mdiCheck
 } from '@mdi/js';
 
-export default {
-    props: [
-        'modelValue',
-        'disabled',
-        'label',
-        'iconType',
-        'color',
-        'columnCount',
-        'allIconInfos'
-    ],
-    emits: [
-        'update:modelValue',
-    ],
-    data() {
-        const self = this;
+const props = defineProps<{
+    modelValue: string;
+    disabled?: boolean;
+    label?: string;
+    iconType: string;
+    color: ColorValue;
+    columnCount?: number;
+    allIconInfos: Record<string, IconInfo>;
+}>();
 
-        return {
-            itemPerRow: self.columnCount || 7,
-            icons: {
-                checked: mdiCheck
-            }
-        }
-    },
-    computed: {
-        allIconRows() {
-            return getIconsInRows(this.allIconInfos, this.itemPerRow);
-        },
-        icon: {
-            get: function () {
-                return this.modelValue;
-            },
-            set: function (value) {
-                this.$emit('update:modelValue', value);
-            }
-        }
-    },
-    methods: {
-        hasSelectedIcon(row) {
-            return arrayContainsFieldValue(row, 'id', this.modelValue);
-        },
-        onMenuStateChanged(state) {
-            const self = this;
+const emit = defineEmits<{
+    (e: 'update:modelValue', value: string): void
+}>();
 
-            if (state) {
-                self.$nextTick(() => {
-                    if (self.$refs.dropdownMenu && self.$refs.dropdownMenu.parentElement) {
-                        scrollToSelectedItem(self.$refs.dropdownMenu.parentElement, null, '.row-has-selected-item');
-                    }
-                });
+const icons = {
+    checked: mdiCheck
+};
+
+const dropdownMenu: Ref<HTMLElement | null> = useTemplateRef('dropdownMenu');
+const itemPerRow: Ref<number> = ref(props.columnCount || 7);
+
+const allIconRows = computed<IconInfoWithId[][]>(() => {
+    return getIconsInRows(props.allIconInfos, itemPerRow.value);
+});
+
+const icon = computed({
+    get: () => props.modelValue,
+    set: (value: string) => emit('update:modelValue', value)
+});
+
+function hasSelectedIcon(row: IconInfoWithId[]): boolean {
+    return arrayContainsFieldValue(row, 'id', props.modelValue);
+}
+
+function onMenuStateChanged(state: boolean): void {
+    if (state) {
+        nextTick(() => {
+            if (dropdownMenu.value && dropdownMenu.value.parentElement) {
+                scrollToSelectedItem(dropdownMenu.value.parentElement, null, '.row-has-selected-item');
             }
-        }
+        });
     }
 }
 </script>

src/core/color.ts

@@ -2,7 +2,7 @@ import type { TypeAndName } from './base.ts';
 
 export type ColorValue = string;
 
-export interface ColorInfo {
+export interface ColorInfo extends Record<string, unknown> {
     readonly color: ColorValue;
 }
 

src/core/icon.ts

@@ -1,10 +1,10 @@
 export type LineAwesomeIconClassName = string;
 
-export interface IconInfo {
+export interface IconInfo extends Record<string, unknown> {
     readonly icon: LineAwesomeIconClassName;
 }
 
-export interface IconInfoWithId {
+export interface IconInfoWithId extends IconInfo {
     readonly id: string;
     readonly icon: LineAwesomeIconClassName;
 }

src/lib/icon.ts

@@ -1,6 +1,6 @@
 import type { IconInfo, IconInfoWithId } from '@/core/icon.ts';
 
-export function getIconsInRows(allIconInfos: IconInfo[], itemPerRow: number): IconInfoWithId[][] {
+export function getIconsInRows(allIconInfos: Record<string, IconInfo>, itemPerRow: number): IconInfoWithId[][] {
     const ret: IconInfoWithId[][] = [];
     let rowCount = 0;
 

src/lib/ui/desktop.ts

@@ -45,7 +45,7 @@ export function getCssValue(element: HTMLElement | null, name: string): string {
     return computedStyle.getPropertyValue(name);
 }
 
-export function scrollToSelectedItem(parentEl: HTMLElement | null, containerSelector: string, selectedItemSelector: string): void {
+export function scrollToSelectedItem(parentEl: HTMLElement | null, containerSelector: string | null, selectedItemSelector: string): void {
     if (!parentEl) {
         return;
     }