mirror/ezbookkeeping
1
0
Fork 0
mirror of https://github.com/mayswind/ezbookkeeping.git synced 2026-05-18 16:54: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/desktop/ItemIcon.vue
+27 -139
View File
@@ -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>