@antify/ui 2.4.5 → 2.4.11

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/AntPasswordInput.vue

@@ -36,6 +36,7 @@ const props = withDefaults(defineProps<{
   label?: string;
   placeholder?: string;
   description?: string;
+  inputRef?: null | HTMLInputElement;
   size?: Size;
   state?: InputState;
   disabled?: boolean;
@@ -43,6 +44,7 @@ const props = withDefaults(defineProps<{
   messages?: string[];
 }>(), {
   state: InputState.base,
+  inputRef: null,
   disabled: false,
   skeleton: false,
   size: Size.md,
@@ -50,9 +52,11 @@ const props = withDefaults(defineProps<{
 });
 const emit = defineEmits([
   'update:modelValue',
+  'update:inputRef',
   'validate',
 ]);
 const _modelValue = useVModel(props, 'modelValue', emit);
+const _inputRef = useVModel(props, 'inputRef', emit);
 const isVisible = ref(false);
 const iconSize = computed(() => {
   if (props.size === Size.xs2 || props.size === Size.xs) {
@@ -94,6 +98,7 @@ onMounted(() => {
     <div class="flex relative">
       <AntBaseInput
         v-model="_modelValue"
+        v-model:input-ref="_inputRef"
         :type="isVisible ? BaseInputType.text : BaseInputType.password"
         :state="state"
         :size="size"

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/AntTextInput.vue

@@ -30,6 +30,7 @@ defineOptions({
 const emit = defineEmits([
   'update:modelValue',
   'update:skeleton',
+  'update:inputRef',
   'validate',
 ]);
 const props = withDefaults(defineProps<{
@@ -43,11 +44,13 @@ const props = withDefaults(defineProps<{
   readonly?: boolean;
   skeleton?: boolean;
   type?: TextInputType;
+  inputRef?: null | HTMLInputElement;
   limiter?: boolean;
   max?: number;
   messages?: string[];
 }>(), {
   state: InputState.base,
+  inputRef: null,
   disabled: false,
   readonly: false,
   skeleton: false,
@@ -58,6 +61,7 @@ const props = withDefaults(defineProps<{
 });
 
 const _value = useVModel(props, 'modelValue', emit);
+const _inputRef = useVModel(props, 'inputRef', emit);
 
 onMounted(() => {
   handleEnumValidation(props.size, Size, 'size');
@@ -79,6 +83,7 @@ onMounted(() => {
   >
     <AntBaseInput
       v-model="_value"
+      v-model:input-ref="_inputRef"
       :type="type as unknown as BaseInputType"
       wrapper-class="grow"
       :state="state"

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/Elements/__stories/AntBaseInput.stories.d.ts

@@ -7,4 +7,5 @@ export declare const Docs: Story;
 export declare const Nullable: Story;
 export declare const IconLeft: Story;
 export declare const IconRight: Story;
+export declare const Autofocus: Story;
 export declare const Summary: Story;

package/dist/components/inputs/Elements/__stories/AntBaseInput.stories.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.Summary = exports.Nullable = exports.IconRight = exports.IconLeft = exports.Docs = void 0;
+module.exports = exports.Summary = exports.Nullable = exports.IconRight = exports.IconLeft = exports.Docs = exports.Autofocus = void 0;
 var _Size = require("../../../../enums/Size.enum");
 var _AntBaseInput = require("../__types/AntBaseInput.types");
 var _AntBaseInput2 = _interopRequireDefault(require("../AntBaseInput.vue"));
@@ -15,6 +15,7 @@ var _enums = require("../../../../enums");
 var _AntFormGroup = _interopRequireDefault(require("../../../forms/AntFormGroup.vue"));
 var _AntFormGroupLabel = _interopRequireDefault(require("../../../forms/AntFormGroupLabel.vue"));
 var _Direction = require("../../../../enums/Direction.enum");
+var _vue = require("vue");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   computed: {
@@ -174,6 +175,39 @@ const IconRight = exports.IconRight = {
     ...Docs.args
   }
 };
+const Autofocus = exports.Autofocus = {
+  render: args => ({
+    components: {
+      AntBaseInput: _AntBaseInput2.default,
+      AntFormGroup: _AntFormGroup.default,
+      AntButton: _AntButton.default
+    },
+    setup: () => {
+      const inputRef = (0, _vue.ref)(null);
+      return {
+        inputRef,
+        clickAutofocus: () => {
+          inputRef.value?.focus();
+        },
+        args
+      };
+    },
+    template: `
+      <AntFormGroup>
+        <AntButton @click="clickAutofocus">Focus element</AntButton>
+
+        <AntBaseInput
+          v-model="args.modelValue"
+          v-bind="args"
+          v-model:input-ref="inputRef"
+        />
+      </AntFormGroup>
+    `
+  }),
+  args: {
+    ...Docs.args
+  }
+};
 const Summary = exports.Summary = {
   parameters: {
     chromatic: {

package/dist/components/inputs/Elements/__stories/AntBaseInput.stories.mjs

@@ -22,6 +22,9 @@ import AntFormGroupLabel from "../../../forms/AntFormGroupLabel.vue";
 import {
   Direction
 } from "../../../../enums/Direction.enum.mjs";
+import {
+  ref
+} from "vue";
 const meta = {
   computed: {
     Direction() {
@@ -180,6 +183,39 @@ export const IconRight = {
     ...Docs.args
   }
 };
+export const Autofocus = {
+  render: (args) => ({
+    components: {
+      AntBaseInput,
+      AntFormGroup,
+      AntButton
+    },
+    setup: () => {
+      const inputRef = ref(null);
+      return {
+        inputRef,
+        clickAutofocus: () => {
+          inputRef.value?.focus();
+        },
+        args
+      };
+    },
+    template: `
+      <AntFormGroup>
+        <AntButton @click="clickAutofocus">Focus element</AntButton>
+
+        <AntBaseInput
+          v-model="args.modelValue"
+          v-bind="args"
+          v-model:input-ref="inputRef"
+        />
+      </AntFormGroup>
+    `
+  }),
+  args: {
+    ...Docs.args
+  }
+};
 export const Summary = {
   parameters: {
     chromatic: {

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

@@ -1,7 +1,8 @@
-import { type Meta, type StoryObj } from '@storybook/vue3';
+import type { Meta, StoryObj } from '@storybook/vue3';
 import AntPasswordInput from '../AntPasswordInput.vue';
 declare const meta: Meta<typeof AntPasswordInput>;
 export default meta;
 type Story = StoryObj<typeof AntPasswordInput>;
 export declare const Docs: Story;
+export declare const Autofocus: Story;
 export declare const Summary: Story;

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

@@ -3,12 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.Summary = exports.Docs = void 0;
+module.exports = exports.Summary = exports.Docs = exports.Autofocus = void 0;
 var _Size = require("../../../enums/Size.enum");
 var _enums = require("../../../enums");
 var _AntPasswordInput = _interopRequireDefault(require("../AntPasswordInput.vue"));
 var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
 var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
+var _AntButton = _interopRequireDefault(require("../../buttons/AntButton.vue"));
+var _vue = require("vue");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   title: "Inputs/Password Input",
@@ -76,6 +78,39 @@ const Docs = exports.Docs = {
     description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
   }
 };
+const Autofocus = exports.Autofocus = {
+  render: args => ({
+    components: {
+      AntPasswordInput: _AntPasswordInput.default,
+      AntFormGroup: _AntFormGroup.default,
+      AntButton: _AntButton.default
+    },
+    setup: () => {
+      const inputRef = (0, _vue.ref)(null);
+      return {
+        inputRef,
+        clickAutofocus: () => {
+          inputRef.value?.focus();
+        },
+        args
+      };
+    },
+    template: `
+      <AntFormGroup>
+        <AntButton @click="clickAutofocus">Focus element</AntButton>
+
+        <AntPasswordInput
+          v-model="args.modelValue"
+          v-bind="args"
+          v-model:input-ref="inputRef"
+        />
+      </AntFormGroup>
+    `
+  }),
+  args: {
+    ...Docs.args
+  }
+};
 const Summary = exports.Summary = {
   parameters: {
     chromatic: {

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

@@ -7,6 +7,10 @@ import {
 import AntPasswordInput from "../AntPasswordInput.vue";
 import AntFormGroup from "../../forms/AntFormGroup.vue";
 import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
+import AntButton from "../../buttons/AntButton.vue";
+import {
+  ref
+} from "vue";
 const meta = {
   title: "Inputs/Password Input",
   component: AntPasswordInput,
@@ -73,6 +77,39 @@ export const Docs = {
     description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
   }
 };
+export const Autofocus = {
+  render: (args) => ({
+    components: {
+      AntPasswordInput,
+      AntFormGroup,
+      AntButton
+    },
+    setup: () => {
+      const inputRef = ref(null);
+      return {
+        inputRef,
+        clickAutofocus: () => {
+          inputRef.value?.focus();
+        },
+        args
+      };
+    },
+    template: `
+      <AntFormGroup>
+        <AntButton @click="clickAutofocus">Focus element</AntButton>
+
+        <AntPasswordInput
+          v-model="args.modelValue"
+          v-bind="args"
+          v-model:input-ref="inputRef"
+        />
+      </AntFormGroup>
+    `
+  }),
+  args: {
+    ...Docs.args
+  }
+};
 export const Summary = {
   parameters: {
     chromatic: {

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>
     `
   }),