close jn click outside

assets/main.scss

@@ -149,7 +149,7 @@ button {
 .color_picker {
     @apply leading-none;
     &-selected {
-        @apply size-10 rounded border-gray-300 inline-block leading-none;
+        @apply size-10 rounded border-gray-300 shadow inline-block leading-none;
     }
     &-changer {
         @apply absolute w-80 z-10 bg-white flex gap-0;

components/calcValues.vue

@@ -81,7 +81,7 @@ 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 />
+                    <input id="lamelle_color" type="text" v-model="lamelle_color" disabled :style="[{backgroundColor: lamelle_color}]" />
                     <ColorPicker :color="lamelle_color" :cb="setLamelleColor" />
                 </div>
                 <div class="form-item">

components/colorPicker.vue

@@ -13,12 +13,25 @@ const isOpenPicker = ref<boolean>(false)
 const toggleOpen = (value: boolean = !isOpenPicker) => {
     isOpenPicker.value = value !== undefined ? value : !isOpenPicker.value
 }
+const picker = ref()
+const clickOutside = (e: Event) => {
+    if (!picker.value.contains(e.target)) {
+        toggleOpen(false)
+    }
+}
+onMounted(() => {
+    document.addEventListener('click', clickOutside)
+})
+onUnmounted(() => {
+    document.removeEventListener('click', clickOutside)
+})
 </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)">
+        <div class="color_picker" ref="picker">
+            <div class="color_picker-selected" :style="[{ backgroundColor: props.color }]"
+                @click="toggleOpen(!isOpenPicker)" @focusout="toggleOpen(false)"></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 }]"
                         :style="[{ backgroundColor: col }]" @click="onClick(col)">