assets/main.scss

@@ -362,11 +362,16 @@ button {
     &-input {
         @apply flex items-center justify-between;
 
+        >div {
+            @apply h-10 overflow-hidden rounded border-gray-300 shadow inline-block leading-none grow;
+
             span {
-            @apply select-none w-full h-full;
+                @apply flex select-none w-full h-full justify-center items-center;
             }
         }
 
+    }
+
     &-button {
         @apply min-w-10 shrink-0 h-full;
     }

components/dropdown/color.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
 import { ralClassicPallette } from '@/components/ral'
 
-const props = defineProps(['color', 'cb'])
+const props = defineProps([ 'cb'])
 
 </script>
 <template>
     <template v-for="col in ralClassicPallette">
-        <div class="picker-item" :class="[{ 'outline outline-primary': props.color == col.hex }]"
+        <div class="picker-item" 
             :style="[{ backgroundColor: col.hex }]" @click="props.cb(col.code)">
         </div>
     </template>

components/dropdown/list.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { getFilename, patterns } from '../pattern';
 
-const props = defineProps(['color', 'cb']);
+const props = defineProps([ 'cb']);
 </script>
 <template>
     <template v-for="item in patterns">

components/dropdown/picker.vue

@@ -1,7 +1,5 @@
 <script setup lang="ts">
-import { getColorHexFromRal } from '@/components/ral'
+const props = defineProps(['cb', 'name', 'type', 'disabled', 'goto_cam', 'goto_target'])
-
-const props = defineProps(['color', 'cb', 'name', 'type', 'disabled', 'goto_cam', 'goto_target'])
 
 const goto_cam = use_goto_camera()
 const goto_target = use_goto_target()
@@ -39,20 +37,19 @@ watch(open_calc, () => {
         'picker_disabled': props.disabled,
     }]" ref="picker">
         <div class="picker-input">
-            <template>
+            <div @click="toggleOpen(!is_open)">
-                <slot class="picker-selected" @click="toggleOpen(!is_open)"
+                <slot></slot>
-                    :style="[props.color && { backgroundColor: props.color ?? '' }]"></slot>
+            </div>
-            </template>
             <Icon class="picker-button" :name="is_open ? 'mdi:chevron-down' : 'mdi:chevron-up'"
                 @click="toggleOpen(!is_open)" />
         </div>
 
         <div class="picker-changer flex flex-wrap" v-if="is_open">
             <template v-if="props.type == 'color'">
-                <DropdownColor :color="props.color" :cb="onClick" />
+                <DropdownColor :cb="onClick" />
             </template>
             <template v-else-if="props.type == 'pattern'">
-                <DropdownList :color="props.color" :cb="onClick" />
+                <DropdownList :cb="onClick" />
             </template>
         </div>
     </div>