@antify/ui 2.4.5 → 2.4.10

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"

package/dist/components/inputs/AntImageInput.vue

@@ -1,8 +1,6 @@
 <script lang="ts" setup>
 import {
-  computed,
-  onMounted,
-  ref,
+  computed, onBeforeUnmount, onMounted, ref,
 } from 'vue';
 import AntField from '../forms/AntField.vue';
 import {
@@ -11,9 +9,6 @@ import {
 import {
   InputState, State,
 } from '../../enums';
-import {
-  useVModel,
-} from '@vueuse/core';
 import {
   handleEnumValidation,
 } from '../../handler';
@@ -73,6 +68,44 @@ const openFileDialog = () => {
   fileInput.value?.click();
 };
 
+const isDragging = ref<boolean>(false);
+const isDraggingOverDropZone = ref<boolean>(false);
+
+const dropZoneClasses = computed(() => {
+  return {
+    'h-full w-full border-2 border-transparent rounded overflow-y-auto p-2 -top-2 -left-2': true,
+    'border-primary-500!': isDraggingOverDropZone.value,
+    'border-dashed border-base-300!': isDragging.value,
+  };
+});
+
+const handleDragOver = () => {
+  isDraggingOverDropZone.value = true;
+};
+
+const handleDragEnter = () => {
+  isDraggingOverDropZone.value = true;
+};
+
+const handleDragLeave = () => {
+  isDraggingOverDropZone.value = false;
+};
+
+const handleDrop = (event: DragEvent) => {
+  isDraggingOverDropZone.value = false;
+  isDragging.value = false;
+
+  if(!event.dataTransfer) {
+    return;
+  }
+
+  const file = event.dataTransfer.files?.[0];
+
+  if(file) {
+    emit('upload', file as File);
+  }
+};
+
 const handleFileChange = (event: Event) => {
   const target = event.target as HTMLInputElement;
   const file = target.files?.[0];
@@ -82,9 +115,34 @@ const handleFileChange = (event: Event) => {
   }
 };
 
+const handleDragOverBody = (e: DragEvent) => {
+  e.preventDefault();
+  isDragging.value = true;
+};
+
+const handleDragLeaveBody = (e: DragEvent) => {
+  e.preventDefault();
+  isDragging.value = false;
+};
+
+const handleDropBody = (e: DragEvent) => {
+  e.preventDefault();
+  isDragging.value = false;
+};
+
 onMounted(() => {
   handleEnumValidation(props.state, InputState, 'state');
   handleEnumValidation(props.size, Size, 'size');
+
+  document.body.addEventListener('dragover', handleDragOverBody);
+  document.body.addEventListener('dragleave', handleDragLeaveBody);
+  document.body.addEventListener('drop', handleDropBody);
+});
+
+onBeforeUnmount(() => {
+  document.body.removeEventListener('dragover', handleDragOverBody);
+  document.body.removeEventListener('dragleave', handleDragLeaveBody);
+  document.body.removeEventListener('drop', handleDropBody);
 });
 </script>
 
@@ -135,25 +193,36 @@ onMounted(() => {
       </div>
 
       <div class="flex flex-col gap-2.5 w-full">
-        <div class="flex items-center relative w-full justify-between">
-          <input
-            v-if="!disabled && !skeleton"
-            ref="fileInput"
-            type="file"
-            accept="image/*"
-            class="hidden"
-            @change="handleFileChange"
-          >
+        <div class="flex items-center relative w-full justify-between gap-2">
+          <div class="relative w-full h-full flex items-center">
+            <input
+              v-if="!disabled && !skeleton"
+              ref="fileInput"
+              type="file"
+              accept="image/*"
+              class="hidden"
+              @change="handleFileChange"
+            >
+
+            <span class="text-sm text-for-white-bg-font relative">
+              Upload Image
 
-          <span class="text-sm text-for-white-bg-font relative">
-            Upload Image
+              <AntSkeleton
+                v-if="skeleton"
+                absolute
+                rounded
+              />
+            </span>
 
-            <AntSkeleton
-              v-if="skeleton"
-              absolute
-              rounded
+            <div
+              class="absolute top-0 left-0 w-full h-full border bg-transparent"
+              :class="dropZoneClasses"
+              @drop.prevent="handleDrop"
+              @dragenter.prevent="handleDragEnter"
+              @dragover.prevent="handleDragOver"
+              @dragleave.prevent="handleDragLeave"
             />
-          </span>
+          </div>
 
           <AntButton
             v-if="src"

package/dist/components/inputs/AntSelect.vue

@@ -283,7 +283,6 @@ function onClickRemoveButton() {
           :size="size"
           :state="state"
           :close-on-enter="true"
-          @select-element="(e) => _modelValue = e"
         >
           <template #contentLeft="props">
             <slot
@@ -324,7 +323,7 @@ function onClickRemoveButton() {
 
             <div
               v-else
-              class="flex items-center select-none text-ellipsis overflow-hidden whitespace-nowrap w-full text-black"
+              class="flex items-center select-none overflow-hidden w-full"
               :class="{
                 'gap-1': size === Size.xs2,
                 'gap1.5': size === Size.xs,
@@ -338,7 +337,9 @@ function onClickRemoveButton() {
                 name="contentLeft"
                 v-bind="selectedOption"
               />
-              {{ valueLabel }}
+              <div class="text-ellipsis overflow-hidden whitespace-nowrap w-full text-black">
+                {{ valueLabel }}
+              </div>
               <slot
                 v-if="selectedOption !== null"
                 name="contentRight"

package/dist/components/inputs/AntTagInput.vue

@@ -154,7 +154,6 @@ function onClickOutside() {
   if (!dropDownOpen.value) {
     return;
   }
-  console.log('click outside');
   // dropDownOpen.value = false;
 }
 
@@ -183,7 +182,6 @@ function addTagFromOptions(item: string | number) {
     addTag(item);
 
     if (props.autoCloseAfterSelection) {
-      console.log('HIER');
       dropDownOpen.value = false;
     }
   }
@@ -221,6 +219,10 @@ function changeFocus() {
   dropDownOpen.value = true;
 }
 
+function closeDropdown() {
+  dropDownOpen.value = false;
+}
+
 function onBlur(e: FocusEvent) {
   emit('validate', props.modelValue);
   emit('blur', e);
@@ -312,9 +314,11 @@ onMounted(() => {
               :class="inputClasses"
               :disabled="disabled"
               :readonly="readonly"
+              @click="changeFocus"
               @focus="changeFocus"
               @keydown.delete="removeLastTag"
               @keydown.enter.prevent="checkCreateTag(tagInput)"
+              @keydown.esc.prevent="closeDropdown"
               @blur="onBlur"
             >
           </div>

package/dist/components/inputs/Elements/AntSelectMenu.vue

@@ -16,13 +16,13 @@ import type {
   SelectOption,
 } from '../__types';
 import {
-  useElementSize, useVModel, onClickOutside,
+  onClickOutside, useElementSize, useVModel,
 } from '@vueuse/core';
 import type {
   Validator,
 } from '@antify/validate';
 import {
-  autoUpdate, flip, offset, useFloating,
+  autoPlacement, autoUpdate, flip, offset, useFloating,
 } from '@floating-ui/vue';
 
 const emit = defineEmits([
@@ -56,13 +56,21 @@ const floating = ref<HTMLElement | null>(null);
 const {
   floatingStyles,
 } = useFloating(reference, floating, {
-  placement: 'bottom',
+  placement: 'bottom-start',
   whileElementsMounted: autoUpdate,
   middleware: [
     offset(8),
+    autoPlacement({
+      allowedPlacements: [
+        'top-start',
+        'top-end',
+        'bottom-start',
+        'bottom-end',
+      ],
+    }),
     flip({
       fallbackPlacements: [
-        'top',
+        'top-start',
       ],
     }),
   ],
@@ -89,7 +97,7 @@ const dropdownClasses = computed(() => {
   };
 
   return {
-    'w-full border flex flex-col gap-px outline-none -mt-px overflow-y-auto shadow-md z-[90] max-h-[250px]': true,
+    'w-fit border flex flex-col gap-px outline-none -mt-px overflow-y-auto shadow-md z-[90] max-h-[250px]': true,
     'rounded-md': true,
     [variants[props.state]]: true,
   };
@@ -121,7 +129,7 @@ watch(isOpen, () => {
       focusedDropDownItem.value =
         typeof _modelValue.value === 'string' || typeof _modelValue.value === 'number' ? _modelValue.value :
           Array.isArray(_modelValue.value) ? _modelValue.value[0] :
-            (props.options[0].value || null);
+            (props.options[0]?.value || null);
     } else {
       focusedDropDownItem.value = null;
     }
@@ -288,7 +296,7 @@ watch(_modelValue, (val) => {
         ref="floating"
         :class="dropdownClasses"
         data-e2e="select-menu"
-        :style="{width: `${elementSize.width.value}px!important`, ...floatingStyles}"
+        :style="{minWidth: `${elementSize.width.value}px!important`, ...floatingStyles}"
       >
         <div
           v-for="(option, index) in options"

package/dist/components/inputs/__stories/AntSelect.stories.d.ts

@@ -6,6 +6,7 @@ type Story = StoryObj<typeof AntSelect>;
 export declare const Docs: Story;
 export declare const WithSlots: Story;
 export declare const manyOptions: Story;
+export declare const longOptions: Story;
 export declare const nullable: Story;
 export declare const skeleton: Story;
 export declare const disabled: Story;

package/dist/components/inputs/__stories/AntSelect.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withPlaceholder = exports.summary = exports.skeleton = exports.nullable = exports.manyOptions = exports.grouped = exports.ellipsisText = exports.disabled = exports.default = exports.WithSlots = exports.Docs = void 0;
+exports.withPlaceholder = exports.summary = exports.skeleton = exports.nullable = exports.manyOptions = exports.longOptions = exports.grouped = exports.ellipsisText = exports.disabled = exports.default = exports.WithSlots = exports.Docs = void 0;
 var _Size = require("../../../enums/Size.enum");
 var _AntSelect = _interopRequireDefault(require("../AntSelect.vue"));
 var _AntIcon = _interopRequireDefault(require("../../AntIcon.vue"));
@@ -11,6 +11,8 @@ var _AntSelectMenu = _interopRequireDefault(require("../Elements/AntSelectMenu.v
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _vue = require("vue");
 var _enums = require("../../../enums");
+var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
+var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   title: "Inputs/Select",
@@ -81,6 +83,10 @@ const manySelectOptions = [...Array(24).keys()].map(key => ({
   label: `Option ${Number(key) + 1}`,
   value: Number(key) + 1
 }));
+const longSelectOptions = [...Array(4).keys()].map(key => ({
+  label: `Very Long Select Option Possibly Larger Than Container ${Number(key) + 1}`,
+  value: Number(key) + 1
+}));
 const Docs = exports.Docs = {
   render: args => ({
     components: {
@@ -193,6 +199,25 @@ const manyOptions = exports.manyOptions = {
     options: manySelectOptions
   }
 };
+const longOptions = exports.longOptions = {
+  render: (args, ctx) => ({
+    // @ts-ignore
+    components: Docs.render(args, ctx).components,
+    // @ts-ignore
+    setup: Docs.render(args, ctx).setup,
+    template: `
+      <div class="flex justify-center overflow-y-auto h-[100vh] p-2.5 dashed">
+        <div class="flex flex-col gap-4 justify-center h-[250vh] max-w-[150px]">
+          <AntSelect v-bind="args" v-model="modelValue"/>
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    ...Docs.args,
+    options: longSelectOptions
+  }
+};
 const nullable = exports.nullable = {
   render: Docs.render,
   args: {
@@ -312,9 +337,18 @@ const summary = exports.summary = {
   },
   render: (args, ctx) => ({
     // @ts-ignore
-    components: Docs.render(args, ctx).components,
+    components: {
+      AntSelect: _AntSelect.default,
+      AntFormGroup: _AntFormGroup.default,
+      AntFormGroupLabel: _AntFormGroupLabel.default
+    },
     // @ts-ignore
-    setup: Docs.render(args, ctx).setup,
+    setup() {
+      return {
+        ...Docs.render(args, ctx).setup(),
+        longSelectOptions
+      };
+    },
     template: `
       <div class="p-4 flex flex-col gap-2.5">
         <div class="flex w-2/5 gap-2.5">
@@ -385,6 +419,16 @@ const summary = exports.summary = {
           <AntSelect v-bind="args" v-model="modelValue" size="sm" nullable state="warning"/>
           <AntSelect v-bind="args" v-model="modelValue" size="sm" nullable state="danger"/>
         </div>
+        <AntFormGroup>
+          <AntFormGroupLabel>Long Select Options</AntFormGroupLabel>
+        <div class="grid grid-cols-5 gap-2.5">
+          <AntSelect v-bind="args" v-model="modelValue" :options="longSelectOptions"/>
+           <AntSelect v-bind="args" v-model="modelValue" :options="longSelectOptions"/>
+           <AntSelect v-bind="args" v-model="modelValue" :options="longSelectOptions"/>
+           <AntSelect v-bind="args" v-model="modelValue" :options="longSelectOptions"/>
+           <AntSelect v-bind="args" v-model="modelValue" :options="longSelectOptions"/>
+        </div>
+        </AntFormGroup>
       </div>
     `
   }),

package/dist/components/inputs/__stories/AntSelect.stories.mjs

@@ -15,6 +15,8 @@ import {
 import {
   InputState
 } from "../../../enums/index.mjs";
+import AntFormGroup from "../../forms/AntFormGroup.vue";
+import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
 const meta = {
   title: "Inputs/Select",
   component: AntSelect,
@@ -91,6 +93,12 @@ const manySelectOptions = [
   label: `Option ${Number(key) + 1}`,
   value: Number(key) + 1
 }));
+const longSelectOptions = [
+  ...Array(4).keys()
+].map((key) => ({
+  label: `Very Long Select Option Possibly Larger Than Container ${Number(key) + 1}`,
+  value: Number(key) + 1
+}));
 export const Docs = {
   render: (args) => ({
     components: {
@@ -208,6 +216,25 @@ export const manyOptions = {
     options: manySelectOptions
   }
 };
+export const longOptions = {
+  render: (args, ctx) => ({
+    // @ts-ignore
+    components: Docs.render(args, ctx).components,
+    // @ts-ignore
+    setup: Docs.render(args, ctx).setup,
+    template: `
+      <div class="flex justify-center overflow-y-auto h-[100vh] p-2.5 dashed">
+        <div class="flex flex-col gap-4 justify-center h-[250vh] max-w-[150px]">
+          <AntSelect v-bind="args" v-model="modelValue"/>
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    ...Docs.args,
+    options: longSelectOptions
+  }
+};
 export const nullable = {
   render: Docs.render,
   args: {
@@ -334,9 +361,18 @@ export const summary = {
   },
   render: (args, ctx) => ({
     // @ts-ignore
-    components: Docs.render(args, ctx).components,
+    components: {
+      AntSelect,
+      AntFormGroup,
+      AntFormGroupLabel
+    },
     // @ts-ignore
-    setup: Docs.render(args, ctx).setup,
+    setup() {
+      return {
+        ...Docs.render(args, ctx).setup(),
+        longSelectOptions
+      };
+    },
     template: `
       <div class="p-4 flex flex-col gap-2.5">
         <div class="flex w-2/5 gap-2.5">
@@ -407,6 +443,16 @@ export const summary = {
           <AntSelect v-bind="args" v-model="modelValue" size="sm" nullable state="warning"/>
           <AntSelect v-bind="args" v-model="modelValue" size="sm" nullable state="danger"/>
         </div>
+        <AntFormGroup>
+          <AntFormGroupLabel>Long Select Options</AntFormGroupLabel>
+        <div class="grid grid-cols-5 gap-2.5">
+          <AntSelect v-bind="args" v-model="modelValue" :options="longSelectOptions"/>
+           <AntSelect v-bind="args" v-model="modelValue" :options="longSelectOptions"/>
+           <AntSelect v-bind="args" v-model="modelValue" :options="longSelectOptions"/>
+           <AntSelect v-bind="args" v-model="modelValue" :options="longSelectOptions"/>
+           <AntSelect v-bind="args" v-model="modelValue" :options="longSelectOptions"/>
+        </div>
+        </AntFormGroup>
       </div>
     `
   }),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antify/ui",
-  "version": "2.4.5",
+  "version": "2.4.10",
   "private": false,
   "type": "module",
   "exports": {