add pre def colors

assets/main.scss

@@ -150,6 +150,9 @@ button {
     @apply leading-none;
     &-selected {
         @apply size-10 rounded border-gray-300 shadow inline-block leading-none;
+        &__active {
+            @apply outline outline-2 outline-offset-2 outline-primary;
+        }
     }
     &-changer {
         @apply absolute w-80 z-10 bg-white flex gap-0;

components/calcValues.vue

@@ -59,6 +59,10 @@ const increment = (field: keyof typeof form_state, value: number) => {
         form_state[field] = v
     }
 }
+
+const predefLamelleColors = ['#474B4E', '#705335', '#FDF4E3', '#2F4538']
+const predefPillarColors = ['#474B4E', '#6A5D4D', '#F4F4F4', '#2F4538']
+
 watch(form_state, changeParametres, { deep: true })
 </script>
 <template>
@@ -81,13 +85,20 @@ watch(form_state, changeParametres, { deep: true })
             <div class="form-row">
                 <div class="form-item">
                     <label for="lamelle_color">Цвет ламелей</label>
-                    <input id="lamelle_color" type="text" v-model="lamelle_color" disabled :style="[{backgroundColor: lamelle_color}]" />
+                    <input id="lamelle_color" type="text" v-model="lamelle_color" disabled />
-                    <ColorPicker :color="lamelle_color" :cb="setLamelleColor" />
+                    <template v-for="item in predefLamelleColors">
+                        <ColorPicker :color="item" :cb="setLamelleColor" :open="false"
+                            :active="lamelle_color == item" />
+                    </template>
+                    <ColorPicker :cb="setLamelleColor" />
                 </div>
                 <div class="form-item">
                     <label for="pillar_color">Цвет столба</label>
                     <input id="pillar_color" type="text" v-model="pillar_color" disabled />
-                    <ColorPicker :color="pillar_color" :cb="setPillarColor" />
+                    <template v-for="item in predefPillarColors">
+                        <ColorPicker :color="item" :cb="setPillarColor" :open="false" :active="pillar_color == item" />
+                    </template>
+                    <ColorPicker :cb="setPillarColor" />
                 </div>
             </div>
         </form>

components/colorPicker.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import converter from 'ral-hex-converter'
 
-const props = defineProps(['color', 'cb'])
+const props = defineProps(['color', 'cb', 'open', 'active'])
+const open = props.open ?? true
 
 const onClick = (color: string) => {
     if (props.cb) {
@@ -30,7 +31,8 @@ onUnmounted(() => {
     <div>
         <div class="color_picker" ref="picker">
             <div class="color_picker-selected" :style="[{ backgroundColor: props.color }]"
-                @click="toggleOpen(!isOpenPicker)" @focusout="toggleOpen(false)"></div>
+                @click="open ? toggleOpen(!isOpenPicker) : onClick(props.color)"
+                :class="[{ 'color_picker-selected__active': active }]"></div>
             <div class="color_picker-changer flex flex-wrap" v-if="isOpenPicker">
                 <template v-for="col in converter.hex">
                     <div class="color size-5" :class="[{ 'outline outline-primary': props.color == col }]"
@@ -41,3 +43,8 @@ onUnmounted(() => {
         </div>
     </div>
 </template>
+<style scoped>
+.color_picker-selected:not([style*=color]) {
+    background-image: conic-gradient(from 50deg, orange, yellow, green, cyan, blue, violet)
+}
+</style>