assets/main.scss

@@ -364,10 +364,10 @@ button {
         @apply flex items-center justify-between;
 
         >div {
-            @apply h-10 overflow-hidden rounded border-gray-300 shadow inline-block leading-none grow;
+            @apply h-10 overflow-hidden rounded border-gray-300 shadow flex leading-none grow justify-center items-center px-4;
 
             span {
-                @apply flex select-none w-full h-full justify-center items-center;
+                @apply grow text-center;
             }
         }
 

components/calc/values.vue

@@ -59,9 +59,6 @@ const form_refs = {
     total_length: ref(),
 }
 
-const lamelle_text = ref(contrastColor(lamelle_color.value))
-const pillar_text = ref(contrastColor(pillar_color.value))
-
 const changeParametres = () => {
     // console.log('form', form_state.total_length * 1000, 'copy', copy_form_state.total_length * 1000)
 
@@ -138,11 +135,9 @@ const changeParametres = () => {
 
 const setLamelleColor = (color: ralTypes) => {
     lamelle_color.value = color;
-    lamelle_text.value = contrastColor(color) ?? '#000'
 }
 const setPillarColor = (color: ralTypes) => {
     pillar_color.value = color
-    pillar_text.value = contrastColor(color) ?? '#000'
 }
 const setPillarPattern = (pattern: patternTypes) => {
     pillar_pattern.value = pattern
@@ -187,44 +182,26 @@ const calc_table = computed(() => {
             <div class="form-row">
                 <div class="form-item form-item_color">
                     <label for="lamelle_color">Цвет ламелей</label>
-                    <DropdownPicker type="color" :cb="setLamelleColor" name="lamelle_color"
+                    <DropdownPicker type="color" :cb="setLamelleColor" name="lamelle_color" :color="lamelle_color"
                         :goto_target="new Vector3(0, lamelles_count * lamelle_height * 0.75, 0)"
-                        :goto_cam="new Vector3(0.75, 0.75, 0.75)">
+                        :goto_cam="new Vector3(0.75, 0.75, 0.75)" />
-                        <span
-                            :style="[{ color: lamelle_text, backgroundColor: getColorHexFromRal(lamelle_color) ?? 'transparent' }]">
-                            {{ getColorNameFromRal(lamelle_color) }}
-                        </span>
-                    </DropdownPicker>
                 </div>
             </div>
             <div class="form-row">
                 <div class="form-item form-item_color">
                     <label for="pillar_color">Цвет столба</label>
-                    <DropdownPicker type="color" :cb="setPillarColor" name="pillar_color"
+                    <DropdownPicker type="color" :cb="setPillarColor" name="pillar_color" :color="pillar_color"
                         :goto_target="new Vector3(-fence_section * 0.5, lamelles_count * lamelle_height, 0)"
-                        :goto_cam="new Vector3(-1, -1, 1)">
+                        :goto_cam="new Vector3(-1, -1, 1)" />
-                        <span
-                            :style="[{ color: pillar_text, backgroundColor: getColorHexFromRal(pillar_color) ?? 'transparent' }]">
-                            {{ getColorNameFromRal(pillar_color) }}
-                        </span>
-                    </DropdownPicker>
                 </div>
             </div>
             <div class="form-row">
                 <div class="form-item form-item_color">
                     <label for="pillar_pattern">Узор столба</label>
-                    <DropdownPicker type="pattern" :cb="setPillarPattern" name="pillar_pattern"
+                    <DropdownPicker type="pattern" :cb="setPillarPattern" name="pillar_pattern" :pattern="pillar_pattern"
                         :disabled="remove_pillar"
                         :goto_target="new Vector3(fence_section * 0.5, lamelles_count * lamelle_height, 0)"
-                        :goto_cam="new Vector3(1, 2, -1)">
+                        :goto_cam="new Vector3(1, 2, -1)"/>
-                        <span :style="getFilename(pillar_pattern) ? [{
-                            backgroundImage: `url(${getFilename(pillar_pattern)})`,
-                            backgroundSize: 'contain',
-                            color: 'transparent'
-                        }] : []">
-                            {{ pillar_pattern }}
-                        </span>
-                    </DropdownPicker>
                 </div>
             </div>
         </div>

components/dropdown/picker.vue

@@ -1,5 +1,8 @@
 <script setup lang="ts">
-const props = defineProps(['cb', 'name', 'type', 'disabled', 'goto_cam', 'goto_target'])
+import { getFilename } from '../pattern';
+import { getColorHexFromRal, getColorNameFromRal } from '../ral';
+
+const props = defineProps(['cb', 'name', 'color', 'pattern', 'type', 'disabled', 'goto_cam', 'goto_target'])
 
 const goto_cam = use_goto_camera()
 const goto_target = use_goto_target()
@@ -37,11 +40,27 @@ watch(open_calc, () => {
         'picker_disabled': props.disabled,
     }]" ref="picker">
         <div class="picker-input">
-            <div @click="toggleOpen(!is_open)">
+            <template v-if="props.type == 'color'">
-                <slot></slot>
+                <div @click="toggleOpen(!is_open)"
-            </div>
+                    :style="[{ color: contrastColor(props.color), backgroundColor: getColorHexFromRal(props.color) ?? 'transparent' }]">
-            <Icon class="picker-button" :name="is_open ? 'mdi:chevron-down' : 'mdi:chevron-up'"
+                    <span>
-                @click="toggleOpen(!is_open)" />
+                        {{ getColorNameFromRal(props.color) }}
+                    </span>
+                    <Icon class="picker-button" :name="is_open ? 'mdi:chevron-down' : 'mdi:chevron-up'" />
+                </div>
+            </template>
+            <template v-if="props.type == 'pattern'">
+                <div @click="toggleOpen(!is_open)" :style="getFilename(props.pattern) ? [{
+                    backgroundImage: `url(${getFilename(props.pattern)})`,
+                    backgroundSize: 'contain',
+                    color: 'transparent'
+                }] : []">
+                    <span>
+                        {{ props.pattern }}
+                    </span>
+                    <Icon class="picker-button" :name="is_open ? 'mdi:chevron-down' : 'mdi:chevron-up'" />
+                </div>
+            </template>
         </div>
 
         <div class="picker-changer flex flex-wrap" v-if="is_open">