mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-18 08:44:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

migrate item icon to composition API and typescript

Browse Source
This commit is contained in:
MaysWind
2025-01-04 17:49:38 +08:00
parent 0119eadc14
commit 229d9c76c3
3 changed files with 185 additions and 261 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/mobile/ItemIcon.vue
+24 -122
View File
@@ -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>