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,
.list_picker {
@apply ml-4;
// @apply ml-4;
}
}

43
components/calc/values.vue
View File

@ -3,7 +3,7 @@ import { getColorHexFromRal, getColorNameFromRal } from '@/components/ral'
import type { ralTypes } from '@/components/ral'
import { predefLamelleColors, predefPillarColors } from '~/composables/useCalc';
import type { patternTypes } from '../pattern';
import { getFilename, type patternTypes } from '../pattern';
import { Vector3 } from 'three';
const lamelle_height = use_lamelle_height()
@ -231,24 +231,28 @@ const calc_table = computed(() => {
<div class="form-row">
<div class="form-item form-item_color">
<label for="lamelle_color">Цвет ламелей</label>
<input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)" :style="{
backgroundColor: getColorHexFromRal(lamelle_color) ?? 'transparent',
color: lamelle_text
}" disabled />
<DropdownColorPicker :cb="setLamelleColor">123</DropdownColorPicker>
<DropdownColorPicker :cb="setLamelleColor">
<input id="lamelle_color" type="text" :value="getColorNameFromRal(lamelle_color)" :style="{
backgroundColor: getColorHexFromRal(lamelle_color) ?? 'transparent',
color: lamelle_text
}" />
</DropdownColorPicker>
</div>
<div class="form-item form-item_color">
<label for="pillar_color">Цвет столба</label>
<input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" :style="{
backgroundColor: getColorHexFromRal(pillar_color) ?? 'transparent',
color: pillar_text
}" disabled />
<DropdownColorPicker :cb="setPillarColor" />
<DropdownColorPicker :cb="setPillarColor">
<input id="pillar_color" type="text" :value="getColorNameFromRal(pillar_color)" :style="{
backgroundColor: getColorHexFromRal(pillar_color) ?? 'transparent',
color: pillar_text
}" />
</DropdownColorPicker>
</div>
<div class="form-item form-item_color">
<label for="pattern">Узор</label>
<input id="pattern" type="text" :value="pillar_pattern" />
<DropdownList :cb="setPillarPattern" />
<label for="pillar_pattern">Узор столба</label>
<DropdownList :cb="setPillarPattern">
<input id="pillar_pattern" type="text" :value="pillar_pattern" :style="{
backgroundImage: `url(${getFilename(pillar_pattern)})`}" />
</DropdownList>
</div>
</div>
</div>
@ -265,4 +269,13 @@ const calc_table = computed(() => {
</div>
</template>
</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>
<div class="color_picker" ref="picker">
<template v-if="$slots.default">
<slot @click="toggleOpen(true)"></slot>
<div @click="open ? toggleOpen(!isOpenPicker) : onClick(props.color)">
<slot></slot>
</div>
</template>
<template v-else>
<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>
<template>
<div class="list_picker" ref="picker">
<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 v-if="$slots.default">
<div @click="open ? toggleOpen(!is_open) : onClick(props.color)">
<slot></slot>
</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-list">
<template v-for="item in patterns">