@antify/ui 2.2.0 → 2.2.3

package/dist/components/inputs/AntUnitInput.vue

@@ -1,17 +1,35 @@
 <script lang="ts" setup>
-import {onMounted} from 'vue';
+import {
+  onMounted,
+} from 'vue';
 import AntButton from '../buttons/AntButton.vue';
 import AntField from '../forms/AntField.vue';
 import AntBaseInput from './Elements/AntBaseInput.vue';
-import {Size} from '../../enums/Size.enum';
-import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
-import {useVModel} from '@vueuse/core';
-import {State, InputState} from '../../enums';
-import {Grouped} from '../../enums/Grouped.enum';
-import {BaseInputType} from './Elements/__types';
-import {handleEnumValidation} from '../../handler';
+import {
+  Size,
+} from '../../enums/Size.enum';
+import {
+  type IconDefinition,
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  useVModel,
+} from '@vueuse/core';
+import {
+  State, InputState,
+} from '../../enums';
+import {
+  Grouped,
+} from '../../enums/Grouped.enum';
+import {
+  BaseInputType,
+} from './Elements/__types';
+import {
+  handleEnumValidation,
+} from '../../handler';
 
-defineOptions({inheritAttrs: false});
+defineOptions({
+  inheritAttrs: false,
+});
 
 const props = withDefaults(defineProps<{
   modelValue: number | null;
@@ -36,9 +54,12 @@ const props = withDefaults(defineProps<{
   skeleton: false,
   size: Size.md,
   limiter: false,
-  messages: () => []
+  messages: () => [],
 });
-const emit = defineEmits(['update:modelValue', 'validate']);
+const emit = defineEmits([
+  'update:modelValue',
+  'validate',
+]);
 const _modelValue = useVModel(props, 'modelValue', emit);
 
 onMounted(() => {
@@ -65,7 +86,7 @@ onMounted(() => {
         v-model="_modelValue"
         :type="BaseInputType.number"
         :grouped="Grouped.left"
-        wrapper-class="flex-grow"
+        wrapper-class="grow"
         :state="state"
         :size="size"
         :min="min"

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

@@ -1,26 +1,49 @@
 <script lang="ts" setup>
-import {computed, onMounted, watch, useSlots} from 'vue';
-import {Size} from '../../../enums/Size.enum';
+import {
+  computed, onMounted, watch, useSlots,
+} from 'vue';
+import {
+  Size,
+} from '../../../enums/Size.enum';
 import AntSkeleton from '../../AntSkeleton.vue';
 import AntIcon from '../../AntIcon.vue';
-import {BaseInputType} from './__types/AntBaseInput.types';
-import {Grouped} from '../../../enums/Grouped.enum';
+import {
+  BaseInputType,
+} from './__types/AntBaseInput.types';
+import {
+  Grouped,
+} from '../../../enums/Grouped.enum';
 import {
   faCircleCheck,
   faCircleInfo,
   faExclamationCircle,
   faExclamationTriangle,
   faXmark,
-  type IconDefinition
+  type IconDefinition,
 } from '@fortawesome/free-solid-svg-icons';
-import {handleEnumValidation} from '../../../handler';
-import {classesToObjectSyntax, hasSlotContent} from '../../../utils';
-import {InputState} from '../../../enums';
-import {IconSize} from '../../__types';
+import {
+  handleEnumValidation,
+} from '../../../handler';
+import {
+  classesToObjectSyntax, hasSlotContent,
+} from '../../../utils';
+import {
+  InputState,
+} from '../../../enums';
+import {
+  IconSize,
+} from '../../__types';
 
-defineOptions({inheritAttrs: false});
+defineOptions({
+  inheritAttrs: false,
+});
 
-const emit = defineEmits(['update:modelValue', 'blur', 'validate', 'update:inputRef']);
+const emit = defineEmits([
+  'update:modelValue',
+  'blur',
+  'validate',
+  'update:inputRef',
+]);
 const props = withDefaults(defineProps<{
   modelValue: string | number | null;
   size?: Size;
@@ -47,7 +70,7 @@ const props = withDefaults(defineProps<{
   showIcon: true,
   default: false,
   nullable: false,
-  inputRef: null
+  inputRef: null,
 });
 const slot = useSlots();
 const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
@@ -108,12 +131,12 @@ const inputClasses = computed(() => {
     'rounded-none': props.grouped === Grouped.center,
     'rounded-tl-none rounded-bl-none rounded-tr-md rounded-br-md': props.grouped === Grouped.right,
     'rounded-md': props.grouped === Grouped.none,
-    'invisible': props.skeleton,
+    invisible: props.skeleton,
   };
 });
 const iconClasses = computed(() => ({
   'transition-[height]': true,
-  'opacity-50': props.disabled
+  'opacity-50': props.disabled,
 }));
 const iconColorClass = computed(() => {
   const variants: Record<InputState, string> = {
@@ -129,7 +152,7 @@ const iconColorClass = computed(() => {
 const _wrapperClass = computed(() => ({
   '-mr-px': props.grouped !== Grouped.none,
   'cursor-not-allowed': props.disabled,
-  ...classesToObjectSyntax(props.wrapperClass)
+  ...classesToObjectSyntax(props.wrapperClass),
 }));
 const icon = computed(() => icons[props.state]);
 const _modelValue = computed<string | number | null>({
@@ -155,14 +178,20 @@ const _inputRef = computed({
   },
   set(val) {
     emit('update:inputRef', val);
-  }
+  },
 });
 
 watch(_modelValue, (val) => {
-  if ([InputState.danger, InputState.warning, InputState.info].includes(props.state)) {
+  if ([
+    InputState.danger,
+    InputState.warning,
+    InputState.info,
+  ].includes(props.state)) {
     emit('validate', val);
   }
-}, {deep: true});
+}, {
+  deep: true,
+});
 watch(() => props.skeleton, (val) => {
   if (!val && props.modelValue !== null) {
     emit('validate', props.modelValue);

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

@@ -1,18 +1,26 @@
 <script lang="ts" setup>
-import {computed, onMounted} from 'vue';
-import {Size} from '../../../enums/Size.enum';
+import {
+  computed, onMounted,
+} from 'vue';
+import {
+  Size,
+} from '../../../enums/Size.enum';
 import AntSkeleton from '../../AntSkeleton.vue';
-import {handleEnumValidation} from '../../../handler';
-import {InputState} from '../../../enums';
+import {
+  handleEnumValidation,
+} from '../../../handler';
+import {
+  InputState,
+} from '../../../enums';
 
 const props = withDefaults(defineProps<{
-  state?: InputState,
+  state?: InputState;
   size?: Size;
   skeleton?: boolean;
 }>(), {
   skeleton: false,
   size: Size.md,
-  state: InputState.base
+  state: InputState.base,
 });
 
 const classes = computed(() => {
@@ -31,7 +39,7 @@ const classes = computed(() => {
     'text-sm': props.size === Size.sm,
     'text-md': props.size === Size.md,
     'text-lg': props.size === Size.lg,
-    [variants[props.state]]: true
+    [variants[props.state]]: true,
   };
 });
 
@@ -46,7 +54,7 @@ onMounted(() => {
     :class="classes"
   >
     <span :class="{'invisible': skeleton}">
-      <slot/>
+      <slot />
     </span>
 
     <AntSkeleton

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

@@ -1,10 +1,18 @@
 <script lang="ts" setup>
-import {computed, onMounted} from 'vue';
-import {Size} from '../../../enums/Size.enum';
+import {
+  computed, onMounted,
+} from 'vue';
+import {
+  Size,
+} from '../../../enums/Size.enum';
 import AntSkeleton from '../../AntSkeleton.vue';
-import {handleEnumValidation} from '../../../handler';
+import {
+  handleEnumValidation,
+} from '../../../handler';
 
-defineEmits(['clickContent']);
+defineEmits([
+  'clickContent',
+]);
 
 const props = withDefaults(defineProps<{
   label?: string;
@@ -57,6 +65,6 @@ onMounted(() => {
       />
     </span>
 
-    <slot/>
+    <slot />
   </label>
 </template>

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

@@ -1,9 +1,17 @@
 <script lang="ts" setup>
-import {computed, onMounted} from 'vue';
-import {Size} from '../../../enums/Size.enum';
+import {
+  computed, onMounted,
+} from 'vue';
+import {
+  Size,
+} from '../../../enums/Size.enum';
 import AntSkeleton from '../../AntSkeleton.vue';
-import {handleEnumValidation} from '../../../handler';
-import {InputState} from '../../../enums';
+import {
+  handleEnumValidation,
+} from '../../../handler';
+import {
+  InputState,
+} from '../../../enums';
 
 const props = withDefaults(defineProps<{
   value: number;
@@ -14,7 +22,7 @@ const props = withDefaults(defineProps<{
 }>(), {
   skeleton: false,
   size: Size.md,
-  state: InputState.base
+  state: InputState.base,
 });
 
 const classes = computed(() => {

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

@@ -6,14 +6,31 @@
  * Fix overflow bug (See Ellipsis Text story)
  * TODO:: if the dropdown is open and the user types something, the element with a matching value should be focused.
  */
-import {computed, nextTick, onMounted, onUnmounted, ref, watch} from 'vue';
-import {InputState, Size} from '../../../enums';
-import type {SelectOption} from '../__types';
-import {useElementSize, useVModel, onClickOutside} from '@vueuse/core';
-import type {Validator} from '@antify/validate';
-import {autoUpdate, flip, offset, useFloating} from "@floating-ui/vue";
-
-const emit = defineEmits(['update:open', 'update:modelValue', 'update:focused', 'selectElement']);
+import {
+  computed, nextTick, onMounted, onUnmounted, ref, watch,
+} from 'vue';
+import {
+  InputState, Size,
+} from '../../../enums';
+import type {
+  SelectOption,
+} from '../__types';
+import {
+  useElementSize, useVModel, onClickOutside,
+} from '@vueuse/core';
+import type {
+  Validator,
+} from '@antify/validate';
+import {
+  autoUpdate, flip, offset, useFloating,
+} from '@floating-ui/vue';
+
+const emit = defineEmits([
+  'update:open',
+  'update:modelValue',
+  'update:focused',
+  'selectElement',
+]);
 const props = withDefaults(defineProps<{
   modelValue: string | string[] | number | number[] | null;
   focused: string | number | null;
@@ -33,18 +50,22 @@ const props = withDefaults(defineProps<{
   autoSelectFirstOnOpen: true,
   closeOnSelectItem: true,
 });
-const reference = ref<HTMLElement | null | undefined>(props.inputRef)
+const reference = ref<HTMLElement | null | undefined>(props.inputRef);
 const elementSize = useElementSize(reference);
-const floating = ref<HTMLElement | null>(null)
-const {floatingStyles, middlewareData, placement} = useFloating(reference, floating, {
+const floating = ref<HTMLElement | null>(null);
+const {
+  floatingStyles, middlewareData, placement,
+} = useFloating(reference, floating, {
   placement: 'bottom',
   whileElementsMounted: autoUpdate,
   middleware: [
     offset(8),
     flip({
-      fallbackPlacements: ['top'],
+      fallbackPlacements: [
+        'top',
+      ],
     }),
-  ]
+  ],
 });
 
 onClickOutside(floating, () => {
@@ -68,7 +89,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-full border flex flex-col gap-px outline-hidden -mt-px overflow-y-auto shadow-md z-[90] max-h-[250px]': true,
     'rounded-md': true,
     [variants[props.state]]: true,
   };
@@ -124,7 +145,7 @@ function onKeyDownDropDown(e: KeyboardEvent) {
     }
 
     if (!isOpen.value) {
-      isOpen.value = true
+      isOpen.value = true;
     }
 
     emit('selectElement', focusedDropDownItem.value);
@@ -135,7 +156,7 @@ function onKeyDownDropDown(e: KeyboardEvent) {
   }
 
   if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
-    e.preventDefault()
+    e.preventDefault();
     isOpen.value = true;
 
     const index = props.options.findIndex(option => option.value === focusedDropDownItem.value);
@@ -149,7 +170,7 @@ function onKeyDownDropDown(e: KeyboardEvent) {
   }
 
   if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
-    e.preventDefault()
+    e.preventDefault();
     isOpen.value = true;
 
     const index = props.options.findIndex(option => option.value === focusedDropDownItem.value);
@@ -174,7 +195,10 @@ function getActiveDropDownItemClasses(option: SelectOption) {
     [InputState.danger]: 'bg-danger-200',
   };
 
-  return option.value === focusedDropDownItem.value ? {'bg-white': false, [variants[props.state]]: true} : {};
+  return option.value === focusedDropDownItem.value ? {
+    'bg-white': false,
+    [variants[props.state]]: true,
+  } : {};
 }
 
 function onClickDropDownItem(e: MouseEvent, value: string | number | null) {
@@ -199,34 +223,34 @@ watch(_modelValue, (val) => {
     ref="reference"
     class="relative"
   >
-    <slot/>
+    <slot />
 
     <teleport to="body">
+      <div
+        v-if="isOpen"
+        ref="floating"
+        :class="dropdownClasses"
+        :style="{width: `${elementSize.width.value}px!important`, ...floatingStyles}"
+      >
+        <div
+          v-for="(option, index) in options"
+          :key="`option-${index}`"
+          :class="{...dropDownItemClasses, ...getActiveDropDownItemClasses(option)}"
+          @mousedown="(e) => onClickDropDownItem(e, option.value)"
+          @mouseover="() => focusedDropDownItem = option.value"
+        >
+          {{ option.label }}
+        </div>
+
         <div
-          v-if="isOpen"
-          :class="dropdownClasses"
-          ref="floating"
-          :style="{width: `${elementSize.width.value}px!important`, ...floatingStyles}"
+          v-if="options.length === 0"
+          :class="{...dropDownItemClasses}"
         >
-          <div
-            v-for="(option, index) in options"
-            :key="`option-${index}`"
-            :class="{...dropDownItemClasses, ...getActiveDropDownItemClasses(option)}"
-            @mousedown="(e) => onClickDropDownItem(e, option.value)"
-            @mouseover="() => focusedDropDownItem = option.value"
-          >
-            {{ option.label }}
-          </div>
-
-          <div
-            v-if="options.length === 0"
-            :class="{...dropDownItemClasses}"
-          >
-            <slot name="empty">
-              No options available
-            </slot>
-          </div>
+          <slot name="empty">
+            No options available
+          </slot>
         </div>
+      </div>
     </teleport>
   </div>
 </template>

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

@@ -1,64 +1,119 @@
-import { Size } from "../../../../enums/Size.enum.mjs";
-import { BaseInputType } from "../__types/AntBaseInput.types.mjs";
+import {
+  Size
+} from "../../../../enums/Size.enum.mjs";
+import {
+  BaseInputType
+} from "../__types/AntBaseInput.types.mjs";
 import AntBaseInput from "../AntBaseInput.vue";
 import AntButton from "../../../buttons/AntButton.vue";
 import AntIcon from "../../../AntIcon.vue";
-import { Grouped as _Grouped } from "../../../../enums/Grouped.enum.mjs";
-import { faSearch, faEye } from "@fortawesome/free-solid-svg-icons";
-import { InputState } from "../../../../enums/index.mjs";
+import {
+  Grouped as _Grouped
+} from "../../../../enums/Grouped.enum.mjs";
+import {
+  faSearch,
+  faEye
+} from "@fortawesome/free-solid-svg-icons";
+import {
+  InputState
+} from "../../../../enums/index.mjs";
 import AntFormGroup from "../../../forms/AntFormGroup.vue";
 import AntFormGroupLabel from "../../../forms/AntFormGroupLabel.vue";
-import { Direction } from "../../../../enums/Direction.enum.mjs";
+import {
+  Direction
+} from "../../../../enums/Direction.enum.mjs";
 const meta = {
   computed: {
     Direction() {
       return Direction;
     }
   },
-  components: { AntFormGroup },
+  components: {
+    AntFormGroup
+  },
   title: "Inputs/Elements/Base Input",
   component: AntBaseInput,
-  parameters: { controls: { sort: "requiredFirst" } },
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
   argTypes: {
     modelValue: {
-      control: { type: "text" },
-      table: { type: { summary: "string|number|null" } }
+      control: {
+        type: "text"
+      },
+      table: {
+        type: {
+          summary: "string|number|null"
+        }
+      }
     },
     type: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(BaseInputType),
-      table: { defaultValue: { summary: BaseInputType.text } }
+      table: {
+        defaultValue: {
+          summary: BaseInputType.text
+        }
+      }
     },
     state: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(InputState)
     },
     size: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(Size),
-      table: { defaultValue: { summary: Size.md } }
+      table: {
+        defaultValue: {
+          summary: Size.md
+        }
+      }
     },
     placeholder: {
       control: "text",
-      table: { defaultValue: { summary: "this.label" } }
+      table: {
+        defaultValue: {
+          summary: "this.label"
+        }
+      }
     },
     grouped: {
-      control: { type: "select" },
+      control: {
+        type: "select"
+      },
       options: Object.values(_Grouped),
       description: "Where is this fields position in a group",
-      table: { defaultValue: { summary: _Grouped.none } }
+      table: {
+        defaultValue: {
+          summary: _Grouped.none
+        }
+      }
     },
     wrapperClass: {
       control: "text",
       description: 'Class for the first element because the attribute "class" would affect the input element.',
-      table: { type: { summary: "string|object" } }
+      table: {
+        type: {
+          summary: "string|object"
+        }
+      }
     },
     showIcon: {
       control: "boolean",
       description: "Some InputStates can have an icon. Control with this property if it gets shown or not."
     },
     iconLeft: {
-      control: { type: "none" },
+      control: {
+        type: "none"
+      },
       description: "Will be displayed left to the input text.<br>Use Font-awesome Icons."
     }
   }
@@ -66,9 +121,13 @@ const meta = {
 export default meta;
 export const Docs = {
   render: (args) => ({
-    components: { AntBaseInput },
+    components: {
+      AntBaseInput
+    },
     setup: () => {
-      return { args };
+      return {
+        args
+      };
     },
     template: `
       <AntBaseInput
@@ -97,9 +156,15 @@ export const IconLeft = {
 };
 export const IconRight = {
   render: (args) => ({
-    components: { AntBaseInput, AntIcon },
+    components: {
+      AntBaseInput,
+      AntIcon
+    },
     setup: () => {
-      return { args, faEye };
+      return {
+        args,
+        faEye
+      };
     },
     template: `
       <AntBaseInput
@@ -117,12 +182,24 @@ export const IconRight = {
 };
 export const Summary = {
   parameters: {
-    chromatic: { disableSnapshot: false }
+    chromatic: {
+      disableSnapshot: false
+    }
   },
   render: (args) => ({
-    components: { AntBaseInput, AntButton, AntFormGroup, AntFormGroupLabel },
+    components: {
+      AntBaseInput,
+      AntButton,
+      AntFormGroup,
+      AntFormGroupLabel
+    },
     setup: () => {
-      return { args, faSearch, Direction, Size };
+      return {
+        args,
+        faSearch,
+        Direction,
+        Size
+      };
     },
     template: `
       <AntFormGroup>