color picker

assets/main.scss

@@ -117,7 +117,7 @@ a[href^="#"] {
 }
 
 label {
-    @apply inline-block mb-2 text-sm font-medium text-gray-900 dark:text-white;
+    @apply inline-block text-sm font-medium text-gray-900 dark:text-white;
 }
 
 input {
@@ -137,4 +137,17 @@ button {
     &-row {
         @apply flex flex-row gap-4;
     }
+    &-item {
+        @apply flex flex-row gap-4 items-center justify-center;
+    }
+}
+
+.color_picker {
+    @apply leading-none;
+    &-selected {
+        @apply size-10 rounded border-gray-300 inline-block leading-none;
+    }
+    &-changer {
+        @apply absolute w-80 z-10 bg-white flex gap-0;
+    }
 }

components/calcValues.vue

@@ -2,8 +2,8 @@
 import converter from 'ral-hex-converter'
 const lamelles_count = useState('lamelles_count', () => 8)
 const fence_section = useState<number>('fence_section', () => 2000 * 0.001)
-const pillar_color = useState('pillar_color', () => 'gray')
+const pillar_color = useState('pillar_color', () => '#828282')
-const lamelle_color = useState('lamelle_color', () => 'violet')
+const lamelle_color = useState('lamelle_color', () => '#C2B078')
 
 const parametric = {
     length: {
@@ -66,26 +66,14 @@ watch(form_state, changeParametres, { deep: true })
                 <div class="form-item">
                     <label for="lamelle_color">Цвет ламелей</label>
                     <input id="lamelle_color" type="text" v-model="lamelle_color" disabled />
-                </div>
+                    <ColorPicker :color="lamelle_color" :cb="setLamelleColor" />
-                <div class="colors flex flex-wrap">
-                    <template v-for="color in converter.hex">
-                        <div class="color size-5" :class="[{ 'outline outline-primary': color == lamelle_color }]"
-                            :style="[{ backgroundColor: color }]" @click="setLamelleColor(color)">
-                        </div>
-                    </template>
                 </div>
             </div>
             <div class="form-row">
                 <div class="form-item">
                     <label for="pillar_color">Цвет столба</label>
                     <input id="pillar_color" type="text" v-model="pillar_color" disabled />
-                </div>
+                    <ColorPicker :color="pillar_color" :cb="setPillarColor" />
-                <div class="colors flex flex-wrap">
-                    <template v-for="color in converter.hex">
-                        <div class="color size-5" :class="[{ 'outline outline-primary': color == pillar_color }]"
-                            :style="[{ backgroundColor: color }]" @click="setPillarColor(color)">
-                        </div>
-                    </template>
                 </div>
             </div>
         </form>

components/colorPicker.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import converter from 'ral-hex-converter'
+
+const props = defineProps(['color', 'cb'])
+
+const onClick = (color: string) => {
+    if (props.cb) {
+        props.cb(color)
+    }
+    toggleOpen()
+}
+const isOpenPicker = ref<boolean>(false)
+const toggleOpen = (value: boolean = !isOpenPicker) => {
+    isOpenPicker.value = value !== undefined ? value : !isOpenPicker.value
+}
+</script>
+<template>
+    <div>
+        <div class="color_picker">
+            <div class="color_picker-selected" :style="[{ backgroundColor: props.color }]" @click="toggleOpen"></div>
+            <div class="color_picker-changer flex flex-wrap" v-if="isOpenPicker" @focusout="toggleOpen(false)">
+                <template v-for="col in converter.hex">
+                    <div class="color size-5" :class="[{ 'outline outline-primary': props.color == col }]"
+                        :style="[{ backgroundColor: col }]" @click="onClick(col)">
+                    </div>
+                </template>
+            </div>
+        </div>
+    </div>
+</template>

components/model/parametric.vue

@@ -11,7 +11,7 @@ const lSize = 0.115
 const bSize = 0.0235
 const pillar_size = 80 * 0.001
 
-const {renderer} = useTresContext()
+const { renderer } = useTresContext()
 renderer.value.toneMapping = NeutralToneMapping
 </script>
 <template>