migrate item icon to composition API and typescript
This commit is contained in:
MaysWind
@@ -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
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user