From e458ba9f16e86cdb4219f6ebd19257e14b64261f Mon Sep 17 00:00:00 2001
From: aarizona <ar.ariz.arizona@gmail.com>
Date: Tue, 24 Sep 2024 18:52:28 +0300
Subject: [PATCH] pattern

---
 assets/main.scss                    |  2 +-
 components/calc/values.vue          | 43 +++++++++++++++++++----------
 components/dropdown/colorPicker.vue |  4 ++-
 components/dropdown/list.vue        | 15 +++++++---
 4 files changed, 43 insertions(+), 21 deletions(-)

diff --git a/assets/main.scss b/assets/main.scss
index 8e73e53..4c78cfb 100644
--- a/assets/main.scss
+++ b/assets/main.scss
@@ -351,7 +351,7 @@ button {
 
             .color_picker,
             .list_picker {
-                @apply ml-4;
+                // @apply ml-4;
             }
         }
 
diff --git a/components/calc/values.vue b/components/calc/values.vue
index fda68c2..475bab2 100644
--- a/components/calc/values.vue
+++ b/components/calc/values.vue
@@ -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>
\ No newline at end of file
+</template>
+<style lang="scss" scoped>
+#pillar_pattern {
+    background-clip: content-box;
+    background-size: contain;
+    &:not([style*='url("undefined")']) {
+        color: transparent;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/components/dropdown/colorPicker.vue b/components/dropdown/colorPicker.vue
index c7af0ba..9366498 100644
--- a/components/dropdown/colorPicker.vue
+++ b/components/dropdown/colorPicker.vue
@@ -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)"
diff --git a/components/dropdown/list.vue b/components/dropdown/list.vue
index 5a06f48..45ccd12 100644
--- a/components/dropdown/list.vue
+++ b/components/dropdown/list.vue
@@ -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">