diff --git a/src/components/BSMap/BSCell.vue b/src/components/BSMap/BSCell.vue index 2f1a373..1a25b71 100644 --- a/src/components/BSMap/BSCell.vue +++ b/src/components/BSMap/BSCell.vue @@ -1,6 +1,6 @@ diff --git a/src/components/BSMap/BSIcon.vue b/src/components/BSMap/BSIcon.vue index 71a3fd3..c0c48d3 100644 --- a/src/components/BSMap/BSIcon.vue +++ b/src/components/BSMap/BSIcon.vue @@ -1,7 +1,6 @@ @@ -13,15 +12,15 @@ import { defineEmits, defineProps, onMounted, - toRef, watch, } from 'vue'; -import { parse } from 'qs'; import { useIconStore } from '@/stores/icon'; +import styleFromParams from '@/utils/styleFromParams'; const props = defineProps<{ content: string; + stacked: boolean; }>(); const emit = defineEmits<{ @@ -30,40 +29,38 @@ const emit = defineEmits<{ const iconStore = useIconStore(); -const content = toRef(props, 'content'); +const content = computed(() => { + return props.content.split(props.stacked ? '__' : '!_')[0]; +}); + +const params = computed(() => { + return props.content.split(props.stacked ? '__' : '!_')[1]; +}); -const label = computed(() => { - if (content.value && content.value.match(/^(.*)\*([^_]+)(__(.+)$)?/)) { - const ratio = selectTextWidth(RegExp.$1) as number; - const text = RegExp.$2; - const params = parseTextParams(RegExp.$4 || ''); - return { text, ratio, params }; +const text = computed(() => { + let match: RegExpMatchArray | null = null; + if (content.value && (match = content.value.match(/^(.*)\*([^_]+)$/))) { + const ratio = selectTextWidth(match[1]) as number; + const data = match[2]; + return { data, ratio }; } else { return undefined; } }); -const icon = computed(() => label.value ? undefined : iconStore.icons[content.value]); +const icon = computed(() => text.value ? undefined : iconStore.icons[content.value]); watch(content, (content) => { - if (content && !label.value) { + if (content && !text.value) { iconStore.resolve(content); } }, { immediate: true }); -const ratio = computed(() => { - if (!content.value) return 1; - if (label.value) { - return label.value.ratio || 1; - } else { - return icon.value?.ratio || 1; - } -}); - -watch(ratio, (ratio) => emit('ratio', ratio)); -onMounted(() => emit('ratio', ratio.value)); +const ratio = computed(() => (text.value ?? icon.value)?.ratio ?? 1); +watch(ratio, (ratio) => emit('ratio', ratio), { immediate: true }); const style = computed(() => ({ + ...styleFromParams(params.value), '--bs-map-icon-ratio': (ratio.value == 1 ? undefined : ratio.value), }) as CSSProperties); @@ -83,17 +80,11 @@ function selectTextWidth(flag: string): number | undefined { return 8; } } - -function parseTextParams(str: string): Record { - return parse(str, { - delimiter: ',' - }) as Record; -} diff --git a/src/components/BSMap/BSRow.vue b/src/components/BSMap/BSRow.vue index 8eacbc5..f700a59 100644 --- a/src/components/BSMap/BSRow.vue +++ b/src/components/BSMap/BSRow.vue @@ -1,6 +1,6 @@