From 229d9c76c33091b21549df5888986481a18ba4df Mon Sep 17 00:00:00 2001
From: MaysWind <i@mayswind.net>
Date: Sat, 4 Jan 2025 17:49:38 +0800
Subject: [PATCH] migrate item icon to composition API and typescript

---
 src/components/base/itemIcon.ts     | 134 ++++++++++++++++++++++
 src/components/desktop/ItemIcon.vue | 166 +++++-----------------------
 src/components/mobile/ItemIcon.vue  | 146 ++++--------------------
 3 files changed, 185 insertions(+), 261 deletions(-)
 create mode 100644 src/components/base/itemIcon.ts

diff --git a/src/components/base/itemIcon.ts b/src/components/base/itemIcon.ts
new file mode 100644
index 00000000..d17437c5
--- /dev/null
+++ b/src/components/base/itemIcon.ts
@@ -0,0 +1,134 @@
+import { computed } from 'vue';
+
+import type { ColorValue } from '@/core/color.ts';
+import { ALL_ACCOUNT_ICONS, DEFAULT_ACCOUNT_ICON, ALL_CATEGORY_ICONS, DEFAULT_CATEGORY_ICON } from '@/consts/icon.ts';
+import { DEFAULT_ICON_COLOR, DEFAULT_ACCOUNT_COLOR, DEFAULT_CATEGORY_COLOR } from '@/consts/color.ts';
+import { isNumber } from '@/lib/common.ts';
+
+type IconItemStyleName = string;
+type IconItemStyleValue = ColorValue | string | number | undefined;
+type CommonIconItemType = 'account' | 'category' | 'fixed';
+type MobileIconItemType = 'fixed-f7';
+
+export interface CommonIconProps {
+    iconType: CommonIconItemType | MobileIconItemType;
+    iconId: string | number;
+    color?: ColorValue;
+    defaultColor?: ColorValue;
+    additionalColorAttr?: string;
+    size?: string | number;
+}
+
+export function useItemIcon(props: CommonIconProps) {
+    const style = computed<Record<IconItemStyleName, IconItemStyleValue>>(() => {
+        let defaultColor = 'var(--default-icon-color)';
+
+        if (props.defaultColor) {
+            defaultColor = props.defaultColor;
+        }
+
+        if (props.iconType === 'account') {
+            return getAccountIconStyle(props.color, defaultColor, props.additionalColorAttr);
+        } else if (props.iconType === 'category') {
+            return getCategoryIconStyle(props.color, defaultColor, props.additionalColorAttr);
+        } else {
+            return getDefaultIconStyle(props.color, defaultColor, props.additionalColorAttr);
+        }
+    });
+
+    function getAccountIcon(iconId: string | number): string {
+        if (isNumber(iconId)) {
+            iconId = iconId.toString();
+        }
+
+        if (!ALL_ACCOUNT_ICONS[iconId as string]) {
+            return DEFAULT_ACCOUNT_ICON.icon;
+        }
+
+        return ALL_ACCOUNT_ICONS[iconId as string].icon;
+    }
+
+    function getCategoryIcon(iconId: string | number): string {
+        if (isNumber(iconId)) {
+            iconId = iconId.toString();
+        }
+
+        if (!ALL_CATEGORY_ICONS[iconId as string]) {
+            return DEFAULT_CATEGORY_ICON.icon;
+        }
+
+        return ALL_CATEGORY_ICONS[iconId as string].icon;
+    }
+
+    function getAccountIconStyle(color?: ColorValue | string, defaultColor?: ColorValue | string, additionalColorAttr?: string): Record<IconItemStyleName, IconItemStyleValue> {
+        if (color && color !== DEFAULT_ACCOUNT_COLOR) {
+            color = '#' + color;
+        } else {
+            color = defaultColor;
+        }
+
+        const ret: Record<IconItemStyleName, IconItemStyleValue> = {
+            color: color
+        };
+
+        if (additionalColorAttr) {
+            ret[additionalColorAttr] = color;
+        }
+
+        if (props.size) {
+            ret['font-size'] = props.size;
+        }
+
+        return ret;
+    }
+
+    function getCategoryIconStyle(color?: ColorValue | string, defaultColor?: ColorValue | string, additionalColorAttr?: string): Record<IconItemStyleName, IconItemStyleValue> {
+        if (color && color !== DEFAULT_CATEGORY_COLOR) {
+            color = '#' + color;
+        } else {
+            color = defaultColor;
+        }
+
+        const ret: Record<IconItemStyleName, IconItemStyleValue> = {
+            color: color
+        };
+
+        if (additionalColorAttr) {
+            ret[additionalColorAttr] = color;
+        }
+
+        if (props.size) {
+            ret['font-size'] = props.size;
+        }
+
+        return ret;
+    }
+
+    function getDefaultIconStyle(color?: ColorValue | string, defaultColor?: ColorValue | string, additionalColorAttr?: string): Record<IconItemStyleName, IconItemStyleValue> {
+        if (color && color !== DEFAULT_ICON_COLOR) {
+            color = '#' + color;
+        } else {
+            color = defaultColor;
+        }
+
+        const ret: Record<IconItemStyleName, IconItemStyleValue> = {
+            color: color
+        };
+
+        if (additionalColorAttr) {
+            ret[additionalColorAttr] = color;
+        }
+
+        if (props.size) {
+            ret['font-size'] = props.size;
+        }
+
+        return ret;
+    }
+
+    return {
+        style,
+        getAccountIcon,
+        getCategoryIcon
+    }
+}
diff --git a/src/components/desktop/ItemIcon.vue b/src/components/desktop/ItemIcon.vue
index 958636da..ca2ad355 100644
--- a/src/components/desktop/ItemIcon.vue
+++ b/src/components/desktop/ItemIcon.vue
@@ -11,151 +11,39 @@
     </v-badge>
 </template>
 
-<script>
-import { ALL_ACCOUNT_ICONS, DEFAULT_ACCOUNT_ICON, ALL_CATEGORY_ICONS, DEFAULT_CATEGORY_ICON } from '@/consts/icon.ts';
-import { DEFAULT_ICON_COLOR, DEFAULT_ACCOUNT_COLOR, DEFAULT_CATEGORY_COLOR } from '@/consts/color.ts';
-import { isNumber } from '@/lib/common.ts';
+<script setup lang="ts">
+import { computed } from 'vue';
+import { type CommonIconProps, useItemIcon } from '@/components/base/itemIcon.ts';
 
 import {
     mdiEyeOffOutline
 } from '@mdi/js';
 
-export default {
-    props: [
-        'class',
-        'iconType',
-        'iconId',
-        'color',
-        'defaultColor',
-        'additionalColorAttr',
-        'size',
-        'hiddenStatus'
-    ],
-    data() {
-        return {
-            icons: {
-                hide: mdiEyeOffOutline
-            }
-        }
-    },
-    computed: {
-        classes() {
-            let allClasses = this.class ? (this.class + ' ') : '';
-
-            if (this.iconType === 'account') {
-                allClasses += this.getAccountIcon(this.iconId);
-            } else if (this.iconType === 'category') {
-                allClasses += this.getCategoryIcon(this.iconId);
-            } else if (this.iconType === 'fixed') {
-                allClasses += this.iconId;
-            }
-
-            return allClasses;
-        },
-        style() {
-            let defaultColor = 'var(--default-icon-color)';
-
-            if (this.defaultColor) {
-                defaultColor = this.defaultColor;
-            }
-
-            if (this.iconType === 'account') {
-                return this.getAccountIconStyle(this.color, defaultColor, this.additionalColorAttr);
-            } else if (this.iconType === 'category') {
-                return this.getCategoryIconStyle(this.color, defaultColor, this.additionalColorAttr);
-            } else {
-                return this.getDefaultIconStyle(this.color, defaultColor, this.additionalColorAttr);
-            }
-        }
-    },
-    methods: {
-        getAccountIcon(iconId) {
-            if (isNumber(iconId)) {
-                iconId = iconId.toString();
-            }
-
-            if (!ALL_ACCOUNT_ICONS[iconId]) {
-                return DEFAULT_ACCOUNT_ICON.icon;
-            }
-
-            return ALL_ACCOUNT_ICONS[iconId].icon;
-        },
-        getCategoryIcon(iconId) {
-            if (isNumber(iconId)) {
-                iconId = iconId.toString();
-            }
-
-            if (!ALL_CATEGORY_ICONS[iconId]) {
-                return DEFAULT_CATEGORY_ICON.icon;
-            }
-
-            return ALL_CATEGORY_ICONS[iconId].icon;
-        },
-        getAccountIconStyle(color, defaultColor, additionalColorAttr) {
-            if (color && color !== DEFAULT_ACCOUNT_COLOR) {
-                color = '#' + color;
-            } else {
-                color = defaultColor;
-            }
-
-            const ret = {
-                color: color
-            };
-
-            if (additionalColorAttr) {
-                ret[additionalColorAttr] = color;
-            }
-
-            if (this.size) {
-                ret['font-size'] = this.size;
-            }
-
-            return ret;
-        },
-        getCategoryIconStyle(color, defaultColor, additionalColorAttr) {
-            if (color && color !== DEFAULT_CATEGORY_COLOR) {
-                color = '#' + color;
-            } else {
-                color = defaultColor;
-            }
-
-            const ret = {
-                color: color
-            };
-
-            if (additionalColorAttr) {
-                ret[additionalColorAttr] = color;
-            }
-
-            if (this.size) {
-                ret['font-size'] = this.size;
-            }
-
-            return ret;
-        },
-        getDefaultIconStyle(color, defaultColor, additionalColorAttr) {
-            if (color && color !== DEFAULT_ICON_COLOR) {
-                color = '#' + color;
-            } else {
-                color = defaultColor;
-            }
-
-            const ret = {
-                color: color
-            };
-
-            if (additionalColorAttr) {
-                ret[additionalColorAttr] = color;
-            }
-
-            if (this.size) {
-                ret['font-size'] = this.size;
-            }
-
-            return ret;
-        }
-    }
+interface DesktopItemIconProps extends CommonIconProps {
+    class?: string;
+    hiddenStatus?: boolean;
 }
+
+const props = defineProps<DesktopItemIconProps>();
+const { style, getAccountIcon, getCategoryIcon } = useItemIcon(props);
+
+const icons = {
+    hide: mdiEyeOffOutline
+};
+
+const classes = computed<string>(() => {
+    let allClasses = props.class ? (props.class + ' ') : '';
+
+    if (props.iconType === 'account') {
+        allClasses += getAccountIcon(props.iconId);
+    } else if (props.iconType === 'category') {
+        allClasses += getCategoryIcon(props.iconId);
+    } else if (props.iconType === 'fixed') {
+        allClasses += props.iconId;
+    }
+
+    return allClasses;
+});
 </script>
 
 <style>
diff --git a/src/components/mobile/ItemIcon.vue b/src/components/mobile/ItemIcon.vue
index 1a232cde..a8335ac2 100644
--- a/src/components/mobile/ItemIcon.vue
+++ b/src/components/mobile/ItemIcon.vue
@@ -1,131 +1,33 @@
 <template>
-    <f7-icon :f7="f7Icon" :icon="icon" :style="style">
+    <f7-icon :f7="f7IconValue" :icon="icon" :style="style">
         <slot></slot>
     </f7-icon>
 </template>
 
-<script>
-import { ALL_ACCOUNT_ICONS, DEFAULT_ACCOUNT_ICON, ALL_CATEGORY_ICONS, DEFAULT_CATEGORY_ICON } from '@/consts/icon.ts';
-import { DEFAULT_ICON_COLOR, DEFAULT_ACCOUNT_COLOR, DEFAULT_CATEGORY_COLOR } from '@/consts/color.ts';
-import { isNumber } from '@/lib/common.ts';
+<script setup lang="ts">
+import { computed } from 'vue';
+import { type CommonIconProps, useItemIcon } from '@/components/base/itemIcon.ts';
 
-export default {
-    props: [
-        'iconType',
-        'iconId',
-        'color',
-        'defaultColor',
-        'additionalColorAttr'
-    ],
-    computed: {
-        f7Icon() {
-            if (this.iconType === 'fixed-f7') {
-                return this.iconId;
-            } else {
-                return '';
-            }
-        },
-        icon() {
-            if (this.iconType === 'account') {
-                return this.getAccountIcon(this.iconId);
-            } else if (this.iconType === 'category') {
-                return this.getCategoryIcon(this.iconId);
-            } else if (this.iconType === 'fixed') {
-                return this.iconId;
-            } else {
-                return '';
-            }
-        },
-        style() {
-            let defaultColor = 'var(--default-icon-color)';
+const props = defineProps<CommonIconProps>();
+const { style, getAccountIcon, getCategoryIcon } = useItemIcon(props);
 
-            if (this.defaultColor) {
-                defaultColor = this.defaultColor;
-            }
-
-            if (this.iconType === 'account') {
-                return this.getAccountIconStyle(this.color, defaultColor, this.additionalColorAttr);
-            } else if (this.iconType === 'category') {
-                return this.getCategoryIconStyle(this.color, defaultColor, this.additionalColorAttr);
-            } else {
-                return this.getDefaultIconStyle(this.color, defaultColor, this.additionalColorAttr);
-            }
-        }
-    },
-    methods: {
-        getAccountIcon(iconId) {
-            if (isNumber(iconId)) {
-                iconId = iconId.toString();
-            }
-
-            if (!ALL_ACCOUNT_ICONS[iconId]) {
-                return DEFAULT_ACCOUNT_ICON.icon;
-            }
-
-            return ALL_ACCOUNT_ICONS[iconId].icon;
-        },
-        getCategoryIcon(iconId) {
-            if (isNumber(iconId)) {
-                iconId = iconId.toString();
-            }
-
-            if (!ALL_CATEGORY_ICONS[iconId]) {
-                return DEFAULT_CATEGORY_ICON.icon;
-            }
-
-            return ALL_CATEGORY_ICONS[iconId].icon;
-        },
-        getAccountIconStyle(color, defaultColor, additionalColorAttr) {
-            if (color && color !== DEFAULT_ACCOUNT_COLOR) {
-                color = '#' + color;
-            } else {
-                color = defaultColor;
-            }
-
-            const ret = {
-                color: color
-            };
-
-            if (additionalColorAttr) {
-                ret[additionalColorAttr] = color;
-            }
-
-            return ret;
-        },
-        getCategoryIconStyle(color, defaultColor, additionalColorAttr) {
-            if (color && color !== DEFAULT_CATEGORY_COLOR) {
-                color = '#' + color;
-            } else {
-                color = defaultColor;
-            }
-
-            const ret = {
-                color: color
-            };
-
-            if (additionalColorAttr) {
-                ret[additionalColorAttr] = color;
-            }
-
-            return ret;
-        },
-        getDefaultIconStyle(color, defaultColor, additionalColorAttr) {
-            if (color && color !== DEFAULT_ICON_COLOR) {
-                color = '#' + color;
-            } else {
-                color = defaultColor;
-            }
-
-            const ret = {
-                color: color
-            };
-
-            if (additionalColorAttr) {
-                ret[additionalColorAttr] = color;
-            }
-
-            return ret;
-        }
+const f7IconValue = computed<string>(() => {
+    if (props.iconType === 'fixed-f7') {
+        return props.iconId;
+    } else {
+        return '';
     }
-}
+});
+
+const icon = computed<string>(() => {
+    if (props.iconType === 'account') {
+        return getAccountIcon(props.iconId);
+    } else if (props.iconType === 'category') {
+        return getCategoryIcon(props.iconId);
+    } else if (props.iconType === 'fixed') {
+        return props.iconId;
+    } else {
+        return '';
+    }
+});
 </script>