@antify/ui 2.4.4 → 2.4.10

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

@@ -0,0 +1,231 @@
+<script setup lang="ts">
+import AntField from '../../forms/AntField.vue';
+import AntButton from '../../buttons/AntButton.vue';
+import {
+  faMultiply,
+} from '@fortawesome/free-solid-svg-icons';
+import AntSkeleton from '../../AntSkeleton.vue';
+import {
+  Grouped, InputState, Size, State,
+} from '../../../enums';
+import {
+  computed, nextTick, onMounted, ref, watch,
+} from 'vue';
+import Color from './Color.vue';
+import AntDropdown from '../../AntDropdown.vue';
+import ColorSelection from './ColorSelection.vue';
+import type {
+  ColorInputSize,
+} from './AntColorInput.types';
+
+const emit = defineEmits([
+  'update:modelValue',
+  'validate',
+  'blur',
+]);
+const props = withDefaults(defineProps<{
+  modelValue: string | null;
+  options: string[];
+  label?: string;
+  description?: string;
+  skeleton?: boolean;
+  readonly?: boolean;
+  disabled?: boolean;
+  state?: InputState;
+  size?: Size;
+  messages?: string[];
+  nullable?: boolean;
+}>(), {
+  state: InputState.base,
+  size: Size.md,
+  messages: () => [],
+  nullable: false,
+});
+const _value = computed({
+  get() {
+    const found = props.options.find((option: string | ColorOption) => typeof option === 'string' ? option === props.modelValue : option.value === props.modelValue);
+
+    if (!found) {
+      return props.options[0];
+    }
+
+    return found;
+  },
+  set(val: string | ColorOption) {
+    emit('update:modelValue', typeof val === 'string' ? val : val.value);
+  },
+});
+const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
+const containerClasses = computed(() => {
+  const classes: {
+    [key: string]: boolean;
+  } = {
+    'flex relative w-fit ring-primary/25 rounded-md outline-hidden': true,
+  };
+  const colorVariant = {
+    [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;
+
+  return classes;
+});
+const hasRemoveButton = computed<boolean>(() => {
+  if (props.nullable) {
+    return props.modelValue !== null;
+  }
+
+  return false;
+});
+const itemClasses = computed(() => {
+  const classes: {
+    [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,
+    'p-2': props.size === Size.md,
+    'p-2.5': props.size === Size.lg,
+    invisible: props.skeleton,
+    'opacity-50 cursor-not-allowed': props.disabled,
+  };
+
+  const colorVariant = {
+    [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;
+
+  return classes;
+});
+const showDropdown = ref<boolean>(false);
+const itemRef = ref<HTMLDivElement | null>(null);
+
+/**
+ * Validate default value if given after delayed data fetching.
+ */
+watch(() => props.skeleton, (val) => {
+  if (!val && props.modelValue !== null) {
+    emit('validate', props.modelValue);
+  }
+});
+watch(_value, () => {
+  if (props.messages.length > 0) {
+    emit('validate', props.modelValue);
+  }
+});
+
+function onBlur(e: FocusEvent) {
+  emit('validate', props.modelValue);
+  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);
+  }
+});
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :size="size"
+    :skeleton="skeleton"
+    :description="description"
+    :state="state"
+    :messages="messages"
+    label-for="noop"
+  >
+    <AntDropdown
+      v-model:show-dropdown="showDropdown"
+      :content-padding="false"
+    >
+      <div
+        :class="containerClasses"
+      >
+        <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"
+              readonly
+            />
+          </div>
+
+          <AntSkeleton
+            v-if="skeleton"
+            absolute
+            :grouped="hasRemoveButton ? Grouped.left : Grouped.none"
+            rounded
+          />
+        </div>
+
+        <AntButton
+          v-if="hasRemoveButton"
+          :icon-left="faMultiply"
+          :grouped="Grouped.right"
+          :state="state as unknown as State"
+          :size="size"
+          :skeleton="skeleton"
+          :readonly="readonly"
+          :disabled="disabled"
+          @click="() => emit('update:modelValue', null)"
+          @blur="onBlur"
+        />
+      </div>
+
+      <template #content>
+        <ColorSelection
+          :value="modelValue"
+          :colors="props.options"
+          @select="onColorSelect"
+        />
+      </template>
+    </AntDropdown>
+  </AntField>
+</template>

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

@@ -0,0 +1,81 @@
+<script lang="ts" setup>
+import {
+  faCheck,
+} from '@fortawesome/free-solid-svg-icons';
+import AntIcon from '../../AntIcon.vue';
+import {
+  ColorInputSize,
+} from './AntColorInput.types';
+import {
+  computed, ref,
+} from 'vue';
+
+defineEmits([
+  'select',
+]);
+
+const props = withDefaults(defineProps<{
+  /**
+   * Value needs to be a variable name which exists in
+   * document computed style as CSS variable like --color-{value}
+   */
+  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>
+  <button
+    ref="buttonRef"
+    :class="buttonClasses"
+    :style="{
+      backgroundColor: `var(--color-${value})`,
+      outlineColor: `var(--color-${value})`,
+    }"
+    :tabindex="readonly ? -1 : 0"
+    @click.prevent="$emit('select', value)"
+  >
+    <AntIcon
+      v-if="selected"
+      :icon="faCheck"
+      :class="iconClasses"
+    />
+  </button>
+</template>

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

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import {
+  Size,
+} from '../../../enums';
+import Color from './Color.vue';
+import {
+  ColorInputSize,
+} from './AntColorInput.types';
+import {
+  onMounted, ref,
+} from 'vue';
+
+defineEmits([
+  'select',
+]);
+
+withDefaults(defineProps<{
+  // The selected color value
+  value: string | null;
+  colors: string[];
+  size?: Size;
+}>(), {
+  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>
+  <div
+    class="grid grid-cols-4 gap-1.5"
+    :class="{
+      'p-1': size === Size.xs2,
+      'p-1.5': size === Size.xs || size === Size.sm,
+      'p-2': size === Size.md,
+      'p-2.5': size === Size.lg,
+    }"
+  >
+    <Color
+      v-for="(color, index) in colors"
+      :key="color"
+      :ref="(val) => colorButtonRefs[index] = val as ColorComponentInstance"
+      :value="color"
+      :selected="color === value"
+      :size="ColorInputSize.xl2"
+      @select="(val) => $emit('select', val)"
+    />
+  </div>
+</template>

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;