43 lines
1.2 KiB
Vue
43 lines
1.2 KiB
Vue
<script setup lang="ts">
|
|
import { getFilename as getPattern, patterns } from '../pattern';
|
|
import { getFilename as getTopper, baseToppers, aristoToppers } from '../topper';
|
|
|
|
const globalFenceType = useGlobalFenceType()
|
|
const props = defineProps(['cb', 'patterns']);
|
|
type pType = {
|
|
list: typeof patterns | typeof baseToppers,
|
|
func: any
|
|
type: string | null
|
|
}
|
|
const p = reactive({
|
|
list: [],
|
|
type: null,
|
|
func: () => { }
|
|
} as pType)
|
|
|
|
if (props.patterns == 'pattern') {
|
|
p.list = patterns;
|
|
p.func = getPattern
|
|
} else if (props.patterns == 'topper') {
|
|
p.list = baseToppers
|
|
p.func = getTopper
|
|
}
|
|
watch(globalFenceType, () => {
|
|
if (props.patterns == 'topper') {
|
|
if (globalFenceType.value?.type == 'standart') {
|
|
p.list = baseToppers
|
|
p.type = 'toppers'
|
|
}
|
|
if (globalFenceType.value?.type == 'aristo') {
|
|
p.list = aristoToppers
|
|
p.type = 'aristoToppers'
|
|
}
|
|
}
|
|
})
|
|
</script>
|
|
<template>
|
|
<template v-for="item in p.list">
|
|
<NuxtImg :src="p.func(item.id)" class="picker-item" @click="props.cb(item.id)" v-if="item.filename" />
|
|
<span class="picker-item picker-item--empty" @click="props.cb(item.id)" v-else />
|
|
</template>
|
|
</template> |