mns/mns-mini-zabor
mns
/
mns-mini-zabor
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pattern

This commit is contained in:
aarizona 2024-09-24 18:52:28 +03:00
parent 195332d963
commit e458ba9f16
4 changed files with 43 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
assets/main.scss
View File

@ -351,7 +351,7 @@ button {
.color_picker, .color_picker,
.list_picker { .list_picker {
@apply ml-4; // @apply ml-4;
} }
} }

41
components/calc/values.vue
View File

@ -3,7 +3,7 @@ import { getColorHexFromRal, getColorNameFromRal } from '@/components/ral'
import type { ralTypes } from '@/components/ral' import type { ralTypes } from '@/components/ral'
import { predefLamelleColors, predefPillarColors } from '~/composables/useCalc'; import { predefLamelleColors, predefPillarColors } from '~/composables/useCalc';
import type { patternTypes } from '../pattern'; import { getFilename, type patternTypes } from '../pattern';
import { Vector3 } from 'three'; import { Vector3 } from 'three';
const lamelle_height = use_lamelle_height() const lamelle_height = use_lamelle_height()
@ -231,24 +231,28 @@ const calc_table = computed(() => {
<div class="form-row"> <div class="form-row">
<div class="form-item form-item_color"> <div class="form-item form-item_color">
<label for="lamelle_color">Цвет ламелей</label> <label for="lamelle_color">Цвет ламелей</label>
<input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)" :style="{ <DropdownColorPicker :cb="setLamelleColor">
backgroundColor: getColorHexFromRal(lamelle_color) ?? 'transparent', <input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)" :style="{
color: lamelle_text backgroundColor: getColorHexFromRal(lamelle_color) ?? 'transparent',
}" disabled /> color: lamelle_text
<DropdownColorPicker :cb="setLamelleColor">123</DropdownColorPicker> }" />
</DropdownColorPicker>
</div> </div>
<div class="form-item form-item_color"> <div class="form-item form-item_color">
<label for="pillar_color">Цвет столба</label> <label for="pillar_color">Цвет столба</label>
<input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" :style="{ <DropdownColorPicker :cb="setPillarColor">
backgroundColor: getColorHexFromRal(pillar_color) ?? 'transparent', <input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" :style="{
color: pillar_text backgroundColor: getColorHexFromRal(pillar_color) ?? 'transparent',
}" disabled /> color: pillar_text
<DropdownColorPicker :cb="setPillarColor" /> }" />
</DropdownColorPicker>
</div> </div>
<div class="form-item form-item_color"> <div class="form-item form-item_color">
<label for="pattern">Узор</label> <label for="pillar_pattern">Узор столба</label>
<input id="pattern" type="text" :value="pillar_pattern" /> <DropdownList :cb="setPillarPattern">
<DropdownList :cb="setPillarPattern" /> <input id="pillar_pattern" type="text" :value="pillar_pattern" :style="{
backgroundImage: `url(${getFilename(pillar_pattern)})`}" />
</DropdownList>
</div> </div>
</div> </div>
</div> </div>
@ -266,3 +270,12 @@ const calc_table = computed(() => {
</template> </template>
</div> </div>
</template> </template>
<style lang="scss" scoped>
#pillar_pattern {
background-clip: content-box;
background-size: contain;
&:not([style*='url("undefined")']) {
color: transparent;
}
}
</style>

4
components/dropdown/colorPicker.vue
View File

@ -35,7 +35,9 @@ onUnmounted(() => {
<template> <template>
<div class="color_picker" ref="picker"> <div class="color_picker" ref="picker">
<template v-if="$slots.default"> <template v-if="$slots.default">
<slot @click="toggleOpen(true)"></slot> <div @click="open ? toggleOpen(!isOpenPicker) : onClick(props.color)">
<slot></slot>
</div>
</template> </template>
<template v-else> <template v-else>
<div class="color_picker-selected" @click="open ? toggleOpen(!isOpenPicker) : onClick(props.color)" <div class="color_picker-selected" @click="open ? toggleOpen(!isOpenPicker) : onClick(props.color)"

15
components/dropdown/list.vue
View File

@ -32,10 +32,17 @@ onUnmounted(() => {
</script> </script>
<template> <template>
<div class="list_picker" ref="picker"> <div class="list_picker" ref="picker">
<div class="list_picker-selected" @click="open ? toggleOpen(!is_open) : onClick(props.color)" <template v-if="$slots.default">
:class="[{ 'list_picker-selected__active': active }]"> <div @click="open ? toggleOpen(!is_open) : onClick(props.color)">
<NuxtImg :src="getFilename(patterns[1].name)" /> <slot></slot>
</div> </div>
</template>
<template v-else>
<div class="list_picker-selected" @click="open ? toggleOpen(!is_open) : onClick(props.color)"
:class="[{ 'list_picker-selected__active': active }]">
<NuxtImg :src="getFilename(patterns[1].name)" />
</div>
</template>
<div class="list_picker-changer" v-if="is_open"> <div class="list_picker-changer" v-if="is_open">
<div class="list_picker-list"> <div class="list_picker-list">
<template v-for="item in patterns"> <template v-for="item in patterns">