@antify/ui 2.4.5 → 2.4.11

package/dist/components/buttons/AntButton.vue

@@ -128,7 +128,7 @@ const classes = computed(() => {
   };
 
   return {
-    'transition-all inline-flex items-center justify-center relative font-medium': true,
+    'transition-all inline-flex items-center justify-center relative font-medium cursor-pointer select-none': true,
     'active:shadow-[inset_0_4px_4px_rgba(0,0,0,0.25)]': !hasInputState.value,
     'p-1 text-xs gap-1': props.size === Size.xs2,
     'p-1.5 text-xs gap-1.5': props.size === Size.xs,

package/dist/components/inputs/AntColorInput/AntColorInput.stories.js

@@ -33,6 +33,7 @@ const meta = {
 };
 module.exports = meta;
 const defaultOptions = ["primary-500", "red-500", "green-500", "blue-500", "yellow-500", "purple-500", "pink-500", "orange-500"];
+const lightColorOptions = ["primary-300", "red-300", "green-300", "blue-300", "yellow-300", "purple-300", "pink-300", "orange-300"];
 const Docs = exports.Docs = {
   render: args => ({
     components: {
@@ -79,9 +80,12 @@ const Summary = exports.Summary = {
         set: val => args.modelValue = val
       });
       const skeleton = (0, _vue.ref)(true);
+      const lightModelValue = (0, _vue.ref)("primary-300");
       return {
         args,
         modelValue,
+        lightModelValue,
+        lightColorOptions,
         InputState: _enums.InputState,
         skeleton,
         Size: _enums.Size
@@ -92,71 +96,73 @@ const Summary = exports.Summary = {
         <AntFormGroupLabel>States</AntFormGroupLabel>
         <AntFormGroup direction="row">
           <AntColorInput v-bind="args" v-model="modelValue" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :state="InputState.base"/>
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                         :state="InputState.base"/>
           <AntColorInput v-bind="args" v-model="modelValue" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :state="InputState.info"/>
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                         :state="InputState.info"/>
           <AntColorInput v-bind="args" v-model="modelValue" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :state="InputState.success"/>
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                         :state="InputState.success"/>
           <AntColorInput v-bind="args" v-model="modelValue" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :state="InputState.warning"/>
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                         :state="InputState.warning"/>
           <AntColorInput v-bind="args" v-model="modelValue" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :state="InputState.danger"/>
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                         :state="InputState.danger"/>
         </AntFormGroup>
         <AntFormGroupLabel>Sizes</AntFormGroupLabel>
         <AntFormGroup direction="row">
           <AntColorInput v-bind="args" v-model="modelValue" label="Label" :size="Size.lg"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
           />
           <AntColorInput v-bind="args" v-model="modelValue" label="Label" :size="Size.md"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
           />
           <AntColorInput v-bind="args" v-model="modelValue" label="Label" :size="Size.sm"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
           />
           <AntColorInput v-bind="args" v-model="modelValue" label="Label" :size="Size.xs"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
           />
           <AntColorInput v-bind="args" v-model="modelValue" label="Label" :size="Size.xs2"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
           />
         </AntFormGroup>
         <AntFormGroup direction="row">
           <AntFormGroup>
             <AntFormGroupLabel>Disabled</AntFormGroupLabel>
             <AntColorInput v-bind="args" v-model="modelValue" :disabled="true" label="Label"
-                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                           description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
             />
           </AntFormGroup>
           <AntFormGroup>
             <AntFormGroupLabel>Readonly</AntFormGroupLabel>
             <AntColorInput v-bind="args" v-model="modelValue" :readonly="true" label="Label"
-                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                           description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
             />
           </AntFormGroup>
           <AntFormGroup>
             <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
             <AntColorInput v-bind="args" v-model="modelValue" :skeleton="true" label="Label"
-                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                           description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
             />
           </AntFormGroup>
         </AntFormGroup>
         <AntFormGroupLabel>Plain</AntFormGroupLabel>
         <AntColorInput v-bind="args" v-model="modelValue"/>
+        <AntFormGroupLabel>Light Color Options</AntFormGroupLabel>
+        <AntColorInput v-model="lightModelValue" :options="lightColorOptions" />
         <AntFormGroupLabel>Nullable</AntFormGroupLabel>
         <AntColorInput v-bind="args" v-model="modelValue" nullable/>
         <AntFormGroupLabel>With label</AntFormGroupLabel>
         <AntColorInput v-bind="args" v-model="modelValue" label="Label"/>
         <AntFormGroupLabel>With description</AntFormGroupLabel>
         <AntColorInput v-bind="args" v-model="modelValue"
-                     description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"/>
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"/>
         <AntFormGroupLabel>With label + description</AntFormGroupLabel>
         <AntColorInput v-bind="args" v-model="modelValue" label="Label"
-                     description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"/>
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"/>
       </AntFormGroup>
     `
   }),

package/dist/components/inputs/AntColorInput/AntColorInput.stories.mjs

@@ -43,6 +43,16 @@ const defaultOptions = [
   "pink-500",
   "orange-500"
 ];
+const lightColorOptions = [
+  "primary-300",
+  "red-300",
+  "green-300",
+  "blue-300",
+  "yellow-300",
+  "purple-300",
+  "pink-300",
+  "orange-300"
+];
 export const Docs = {
   render: (args) => ({
     components: {
@@ -89,9 +99,12 @@ export const Summary = {
         set: (val) => args.modelValue = val
       });
       const skeleton = ref(true);
+      const lightModelValue = ref("primary-300");
       return {
         args,
         modelValue,
+        lightModelValue,
+        lightColorOptions,
         InputState,
         skeleton,
         Size
@@ -102,71 +115,73 @@ export const Summary = {
         <AntFormGroupLabel>States</AntFormGroupLabel>
         <AntFormGroup direction="row">
           <AntColorInput v-bind="args" v-model="modelValue" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :state="InputState.base"/>
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                         :state="InputState.base"/>
           <AntColorInput v-bind="args" v-model="modelValue" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :state="InputState.info"/>
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                         :state="InputState.info"/>
           <AntColorInput v-bind="args" v-model="modelValue" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :state="InputState.success"/>
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                         :state="InputState.success"/>
           <AntColorInput v-bind="args" v-model="modelValue" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :state="InputState.warning"/>
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                         :state="InputState.warning"/>
           <AntColorInput v-bind="args" v-model="modelValue" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :state="InputState.danger"/>
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                         :state="InputState.danger"/>
         </AntFormGroup>
         <AntFormGroupLabel>Sizes</AntFormGroupLabel>
         <AntFormGroup direction="row">
           <AntColorInput v-bind="args" v-model="modelValue" label="Label" :size="Size.lg"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
           />
           <AntColorInput v-bind="args" v-model="modelValue" label="Label" :size="Size.md"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
           />
           <AntColorInput v-bind="args" v-model="modelValue" label="Label" :size="Size.sm"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
           />
           <AntColorInput v-bind="args" v-model="modelValue" label="Label" :size="Size.xs"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
           />
           <AntColorInput v-bind="args" v-model="modelValue" label="Label" :size="Size.xs2"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
           />
         </AntFormGroup>
         <AntFormGroup direction="row">
           <AntFormGroup>
             <AntFormGroupLabel>Disabled</AntFormGroupLabel>
             <AntColorInput v-bind="args" v-model="modelValue" :disabled="true" label="Label"
-                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                           description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
             />
           </AntFormGroup>
           <AntFormGroup>
             <AntFormGroupLabel>Readonly</AntFormGroupLabel>
             <AntColorInput v-bind="args" v-model="modelValue" :readonly="true" label="Label"
-                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                           description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
             />
           </AntFormGroup>
           <AntFormGroup>
             <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
             <AntColorInput v-bind="args" v-model="modelValue" :skeleton="true" label="Label"
-                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+                           description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
             />
           </AntFormGroup>
         </AntFormGroup>
         <AntFormGroupLabel>Plain</AntFormGroupLabel>
         <AntColorInput v-bind="args" v-model="modelValue"/>
+        <AntFormGroupLabel>Light Color Options</AntFormGroupLabel>
+        <AntColorInput v-model="lightModelValue" :options="lightColorOptions" />
         <AntFormGroupLabel>Nullable</AntFormGroupLabel>
         <AntColorInput v-bind="args" v-model="modelValue" nullable/>
         <AntFormGroupLabel>With label</AntFormGroupLabel>
         <AntColorInput v-bind="args" v-model="modelValue" label="Label"/>
         <AntFormGroupLabel>With description</AntFormGroupLabel>
         <AntColorInput v-bind="args" v-model="modelValue"
-                     description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"/>
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"/>
         <AntFormGroupLabel>With label + description</AntFormGroupLabel>
         <AntColorInput v-bind="args" v-model="modelValue" label="Label"
-                     description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"/>
+                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"/>
       </AntFormGroup>
     `
   }),

package/dist/components/inputs/AntColorInput/AntColorInput.vue

@@ -6,16 +6,10 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import AntSkeleton from '../../AntSkeleton.vue';
 import {
-  Size,
-  State,
-  Grouped,
-  InputState,
+  Grouped, InputState, Size, State,
 } from '../../../enums';
 import {
-  ref,
-  watch,
-  computed,
-  onMounted, nextTick,
+  computed, nextTick, onMounted, ref, watch,
 } from 'vue';
 import Color from './Color.vue';
 import AntDropdown from '../../AntDropdown.vue';
@@ -67,15 +61,13 @@ const containerClasses = computed(() => {
     [key: string]: boolean;
   } = {
     'flex relative w-fit ring-primary/25 rounded-md outline-hidden': true,
-    'focus-within:ring-2': (props.size === Size.xs2 || props.size === Size.xs || props.size === Size.sm) && !hasInputState.value,
-    'focus-within:ring-4': (props.size === Size.md || props.size === Size.lg) && !hasInputState.value,
   };
   const colorVariant = {
-    [InputState.base]: 'focus-within:ring-primary-200',
-    [InputState.danger]: 'focus-within:ring-danger-200',
-    [InputState.info]: 'focus-within:ring-info-200',
-    [InputState.success]: 'focus-within:ring-success-200',
-    [InputState.warning]: 'focus-within:ring-warning-200',
+    [InputState.base]: 'focus:ring-primary-200',
+    [InputState.danger]: 'focus:ring-danger-200',
+    [InputState.info]: 'focus:ring-info-200',
+    [InputState.success]: 'focus:ring-success-200',
+    [InputState.warning]: 'focus:ring-warning-200',
   };
 
   classes[colorVariant[props.state]] = true;
@@ -94,6 +86,8 @@ const itemClasses = computed(() => {
     [key: string]: boolean;
   } = {
     'relative outline outline-1 -outline-offset-1 rounded-l-md cursor-pointer': true,
+    'focus:ring-2': (props.size === Size.xs2 || props.size === Size.xs || props.size === Size.sm) && !hasInputState.value,
+    'focus:ring-4': (props.size === Size.md || props.size === Size.lg) && !hasInputState.value,
     'rounded-r-md': !hasRemoveButton.value,
     'p-1': props.size === Size.xs2,
     'p-1.5': props.size === Size.xs || props.size === Size.sm,
@@ -104,11 +98,11 @@ const itemClasses = computed(() => {
   };
 
   const colorVariant = {
-    [InputState.danger]: 'outline-danger-500 bg-danger-100',
-    [InputState.base]: 'outline-base-300 bg-white',
-    [InputState.info]: 'outline-info-500 bg-info-100',
-    [InputState.success]: 'outline-success-500 bg-success-100',
-    [InputState.warning]: 'outline-warning-500 bg-warning-100',
+    [InputState.base]: 'outline-base-300 bg-white focus:ring-primary-200',
+    [InputState.success]: 'outline-success-500 bg-success-100 focus:ring-success-200',
+    [InputState.info]: 'outline-info-500 bg-info-100 focus:ring-info-200',
+    [InputState.warning]: 'outline-warning-500 bg-warning-100 focus:ring-warning-200',
+    [InputState.danger]: 'outline-danger-500  bg-danger-100 focus:ring-danger-200',
   };
 
   classes[colorVariant[props.state]] = true;
@@ -116,6 +110,7 @@ const itemClasses = computed(() => {
   return classes;
 });
 const showDropdown = ref<boolean>(false);
+const itemRef = ref<HTMLDivElement | null>(null);
 
 /**
  * Validate default value if given after delayed data fetching.
@@ -136,6 +131,30 @@ function onBlur(e: FocusEvent) {
   emit('blur', e);
 }
 
+function onColorSelect(val: string | null) {
+  emit('update:modelValue', val);
+  nextTick(() => showDropdown.value = false);
+  itemRef.value?.focus();
+}
+
+function onClick() {
+  if (props.readonly || props.disabled) {
+    return;
+  }
+
+  showDropdown.value = true;
+}
+
+function onKeyDown(e: KeyboardEvent) {
+  if (props.readonly || props.disabled) {
+    return;
+  }
+
+  if (e.key === 'Enter') {
+    showDropdown.value = true;
+  }
+}
+
 onMounted(() => {
   if (!props.skeleton && props.modelValue !== null) {
     emit('validate', props.modelValue);
@@ -159,15 +178,22 @@ onMounted(() => {
     >
       <div
         :class="containerClasses"
-        tabindex="0"
-        @blur="onBlur"
       >
-        <div class="relative">
-          <div :class="itemClasses">
+        <div
+          class="relative"
+        >
+          <div
+            ref="itemRef"
+            :class="itemClasses"
+            :tabindex="disabled || readonly ? -1 : 0"
+            @click="onClick"
+            @keydown="onKeyDown"
+            @blur="onBlur"
+          >
             <Color
               :value="modelValue"
               :size="size as unknown as ColorInputSize"
-              @click="showDropdown = true"
+              readonly
             />
           </div>
 
@@ -183,7 +209,6 @@ onMounted(() => {
           v-if="hasRemoveButton"
           :icon-left="faMultiply"
           :grouped="Grouped.right"
-          :no-focus="true"
           :state="state as unknown as State"
           :size="size"
           :skeleton="skeleton"
@@ -198,10 +223,7 @@ onMounted(() => {
         <ColorSelection
           :value="modelValue"
           :colors="props.options"
-          @select="(val) => {
-            $emit('update:modelValue', val);
-            nextTick(() => showDropdown = false);
-          }"
+          @select="onColorSelect"
         />
       </template>
     </AntDropdown>

package/dist/components/inputs/AntColorInput/Color.vue

@@ -6,12 +6,15 @@ import AntIcon from '../../AntIcon.vue';
 import {
   ColorInputSize,
 } from './AntColorInput.types';
+import {
+  computed, ref,
+} from 'vue';
 
 defineEmits([
   'select',
 ]);
 
-withDefaults(defineProps<{
+const props = withDefaults(defineProps<{
   /**
    * Value needs to be a variable name which exists in
    * document computed style as CSS variable like --color-{value}
@@ -19,31 +22,60 @@ withDefaults(defineProps<{
   value: string | null;
   selected?: boolean;
   size?: ColorInputSize;
+  readonly?: boolean;
 }>(), {
   selected: false,
   size: ColorInputSize.xl,
+  readonly: false,
+});
+
+const buttonRef = ref<HTMLButtonElement | null>(null);
+
+defineExpose({
+  buttonRef: buttonRef,
+});
+
+const buttonClasses = computed(() => ({
+  'rounded-sm cursor-pointer flex items-center justify-center': true,
+  'h-4 w-4': [
+    ColorInputSize.xs,
+    ColorInputSize.xs2,
+  ].includes(props.size),
+  'h-5 w-5': [
+    ColorInputSize.lg,
+    ColorInputSize.md,
+    ColorInputSize.sm,
+  ].includes(props.size),
+  'h-8 w-8': ColorInputSize.xl === props.size,
+  'h-10 w-10': ColorInputSize.xl2 === props.size,
+}));
+
+const iconClasses = computed(() => {
+  const colorIntensity = Number(props.value?.split('-')[1]);
+
+  if(!colorIntensity) {
+    return 'text-white!';
+  }
+
+  return colorIntensity < 500 ? 'text-black!' : 'text-white!';
 });
 </script>
 
 <template>
-  <div
-    class="rounded-sm cursor-pointer flex items-center justify-center"
-    :class="{
-      'h-4 w-4': [ColorInputSize.xs, ColorInputSize.xs2].includes(size),
-      'h-5 w-5': [ColorInputSize.lg, ColorInputSize.md, ColorInputSize.sm].includes(size),
-      'h-8 w-8': ColorInputSize.xl === size,
-      'h-10 w-10': ColorInputSize.xl2 === size,
-    }"
+  <button
+    ref="buttonRef"
+    :class="buttonClasses"
     :style="{
       backgroundColor: `var(--color-${value})`,
       outlineColor: `var(--color-${value})`,
     }"
-    @click="$emit('select', value)"
+    :tabindex="readonly ? -1 : 0"
+    @click.prevent="$emit('select', value)"
   >
     <AntIcon
       v-if="selected"
       :icon="faCheck"
-      class="text-white"
+      :class="iconClasses"
     />
-  </div>
+  </button>
 </template>

package/dist/components/inputs/AntColorInput/ColorSelection.vue

@@ -6,6 +6,9 @@ import Color from './Color.vue';
 import {
   ColorInputSize,
 } from './AntColorInput.types';
+import {
+  onMounted, ref,
+} from 'vue';
 
 defineEmits([
   'select',
@@ -19,6 +22,19 @@ withDefaults(defineProps<{
 }>(), {
   size: Size.md,
 });
+
+type ColorComponentInstance = Element & {
+  buttonRef: HTMLButtonElement | null;
+};
+
+const colorButtonRefs = ref<(ColorComponentInstance | null)[]>([]);
+
+onMounted(() => {
+  // Set focus to the first item in the colors list
+  setTimeout(() => {
+    colorButtonRefs.value[0]?.buttonRef?.focus();
+  }, 50);
+});
 </script>
 
 <template>
@@ -32,8 +48,9 @@ withDefaults(defineProps<{
     }"
   >
     <Color
-      v-for="color in colors"
+      v-for="(color, index) in colors"
       :key="color"
+      :ref="(val) => colorButtonRefs[index] = val as ColorComponentInstance"
       :value="color"
       :selected="color === value"
       :size="ColorInputSize.xl2"