migrate item icon to composition API and typescript

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
+    }
+}

src/components/desktop/ItemIcon.vue

@@ -11,151 +11,39 @@
     </v-badge>
 </template>
 
-<script>
+<script setup lang="ts">
-import { ALL_ACCOUNT_ICONS, DEFAULT_ACCOUNT_ICON, ALL_CATEGORY_ICONS, DEFAULT_CATEGORY_ICON } from '@/consts/icon.ts';
+import { computed } from 'vue';
-import { DEFAULT_ICON_COLOR, DEFAULT_ACCOUNT_COLOR, DEFAULT_CATEGORY_COLOR } from '@/consts/color.ts';
+import { type CommonIconProps, useItemIcon } from '@/components/base/itemIcon.ts';
-import { isNumber } from '@/lib/common.ts';
 
 import {
     mdiEyeOffOutline
 } from '@mdi/js';
 
-export default {
+interface DesktopItemIconProps extends CommonIconProps {
-    props: [
+    class?: string;
-        'class',
+    hiddenStatus?: boolean;
-        'iconType',
+}
-        'iconId',
-        'color',
-        'defaultColor',
-        'additionalColorAttr',
-        'size',
-        'hiddenStatus'
-    ],
-    data() {
-        return {
-            icons: {
-                hide: mdiEyeOffOutline
-            }
-        }
-    },
-    computed: {
-        classes() {
-            let allClasses = this.class ? (this.class + ' ') : '';
 
-            if (this.iconType === 'account') {
+const props = defineProps<DesktopItemIconProps>();
-                allClasses += this.getAccountIcon(this.iconId);
+const { style, getAccountIcon, getCategoryIcon } = useItemIcon(props);
-            } else if (this.iconType === 'category') {
+
-                allClasses += this.getCategoryIcon(this.iconId);
+const icons = {
-            } else if (this.iconType === 'fixed') {
+    hide: mdiEyeOffOutline
-                allClasses += this.iconId;
+};
+
+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;
-        },
+});
-        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;
-        }
-    }
-}
 </script>
 
 <style>

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>
+<script setup lang="ts">
-import { ALL_ACCOUNT_ICONS, DEFAULT_ACCOUNT_ICON, ALL_CATEGORY_ICONS, DEFAULT_CATEGORY_ICON } from '@/consts/icon.ts';
+import { computed } from 'vue';
-import { DEFAULT_ICON_COLOR, DEFAULT_ACCOUNT_COLOR, DEFAULT_CATEGORY_COLOR } from '@/consts/color.ts';
+import { type CommonIconProps, useItemIcon } from '@/components/base/itemIcon.ts';
-import { isNumber } from '@/lib/common.ts';
 
-export default {
+const props = defineProps<CommonIconProps>();
-    props: [
+const { style, getAccountIcon, getCategoryIcon } = useItemIcon(props);
-        'iconType',
+
-        'iconId',
+const f7IconValue = computed<string>(() => {
-        'color',
+    if (props.iconType === 'fixed-f7') {
-        'defaultColor',
+        return props.iconId;
-        'additionalColorAttr'
-    ],
-    computed: {
-        f7Icon() {
-            if (this.iconType === 'fixed-f7') {
-                return this.iconId;
     } else {
         return '';
     }
-        },
+});
-        icon() {
+
-            if (this.iconType === 'account') {
+const icon = computed<string>(() => {
-                return this.getAccountIcon(this.iconId);
+    if (props.iconType === 'account') {
-            } else if (this.iconType === 'category') {
+        return getAccountIcon(props.iconId);
-                return this.getCategoryIcon(this.iconId);
+    } else if (props.iconType === 'category') {
-            } else if (this.iconType === 'fixed') {
+        return getCategoryIcon(props.iconId);
-                return this.iconId;
+    } else if (props.iconType === 'fixed') {
+        return props.iconId;
     } else {
         return '';
     }
-        },
+});
-        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;
-            }
-
-            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;
-        }
-    }
-}
 </script>