@antify/ui 1.1.0 → 1.3.0

package/dist/components/inputs/AntTagInput.vue

@@ -8,7 +8,7 @@ import {computed, onMounted, type Ref, ref, watch} from 'vue';
 import AntTag from '../AntTag.vue';
 import AntIcon from '../AntIcon.vue';
 import {AntTagSize, IconSize} from '../__types';
-import AntDropDown from './Elements/AntDropDown.vue';
+import AntSelectMenu from './Elements/AntSelectMenu.vue';
 import AntSkeleton from '../AntSkeleton.vue';
 import {vOnClickOutside} from '@vueuse/components';
 import {AntTagInputSize} from './__types/AntTagInput.types';
@@ -61,7 +61,6 @@ const dropDownOpen = ref(false);
 const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
 const focusedDropDownItem: Ref<string | number | null> = ref(null);
 const tagInput = ref('');
-const filteredOptions = ref(props.options);
 const inputRef: Ref<HTMLElement | null> = ref(null);
 const inputContainerClasses = computed(() => {
   const variants: Record<InputState, string> = {
@@ -89,7 +88,6 @@ const inputContainerClasses = 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,
-    'rounded-bl-none rounded-br-none': dropDownOpen.value && (!props.options || props.options.length > 0) && !props.readonly,
     'invisible': props.skeleton,
   };
 });
@@ -119,13 +117,23 @@ const skeletonGrouped = computed(() => {
     return Grouped.left;
   }
 });
+const filteredOptions = computed(() => {
+  return props.options.filter(option => {
+    // Remove all elements that are in modelValue from the filtered options
+    if (_modelValue.value && !props.allowDuplicates) {
+      return !_modelValue.value?.includes(option.value);
+    }
+
+    return option.label.toLowerCase().includes(tagInput.value.toLowerCase())
+  });
+})
 
 function onClickOutside() {
   if (!dropDownOpen.value) {
     return;
   }
-
-  dropDownOpen.value = false;
+  console.log("click outside");
+  // dropDownOpen.value = false;
 }
 
 async function checkCreateTag(item: string): Promise<void> {
@@ -153,14 +161,13 @@ function addTagFromOptions(item: string | number) {
     addTag(item);
 
     if (props.autoCloseAfterSelection) {
+      console.log("HIER");
       dropDownOpen.value = false;
     }
   }
 }
 
 function addTag(tagValue: string | number): void {
-  _modelValue.value = _modelValue.value || [];
-
   if (!props.allowDuplicates && _modelValue.value?.includes(tagValue) || !tagValue) {
     return;
   }
@@ -172,53 +179,22 @@ function addTag(tagValue: string | number): void {
   }
 
   tagInput.value = '';
-
-  filterDropDown();
 }
 
 function removeLastTag() {
   if (tagInput.value === '' && Array.isArray(_modelValue.value) && _modelValue.value.length > 0) {
     _modelValue.value.splice(-1, 1);
-
-    filterDropDown();
   }
 }
 
 function removeTag(tag: string | number) {
   if (_modelValue.value && !props.disabled && !props.skeleton && !props.readonly) {
     _modelValue.value.splice(_modelValue.value.findIndex((_value) => _value === tag), 1);
-
-    filterDropDown();
   }
 }
 
 function changeFocus() {
-  if (props.openOnFocus) {
-    dropDownOpen.value = true;
-  }
-}
-
-function filterDropDown() {
-  if (!props.options) {
-    return;
-  }
-
-  if (props.allowCreate) {
-    focusedDropDownItem.value = null;
-  }
-
   dropDownOpen.value = true;
-
-  filteredOptions.value = props.options.filter(option => option.label.toLowerCase().includes(tagInput.value.toLowerCase()));
-
-  // Remove all elements that are in modelValue from the filtered options
-  if (_modelValue.value && !props.allowDuplicates) {
-    filteredOptions.value = filteredOptions.value.filter(option => !_modelValue.value?.includes(option.value));
-  }
-
-  if (!props.allowCreate && filteredOptions.value.length > 0) {
-    focusedDropDownItem.value = filteredOptions.value[0]?.value;
-  }
 }
 
 function onBlur(e: FocusEvent) {
@@ -251,89 +227,90 @@ onMounted(() => {
 </script>
 
 <template>
-  <AntField
-    :label="label"
-    :size="size as unknown as Size"
-    :skeleton="_skeleton"
-    :description="description"
-    :state="state"
-    :expanded="expanded"
-    :messages="messages"
-  >
-    <div
-      v-on-click-outside="onClickOutside"
-      class="relative w-full"
+  <div>
+    <AntField
+      :label="label"
+      :size="size as unknown as Size"
+      :skeleton="_skeleton"
+      :description="description"
+      :state="state"
+      :expanded="expanded"
+      :messages="messages"
     >
-      <AntSkeleton
-        v-if="skeleton"
-        absolute
-        rounded
-        :grouped="skeletonGrouped"
-      />
-
       <div
-        :class="inputContainerClasses"
-        class="w-full flex items-center"
+        class="relative w-full"
       >
+        <AntSkeleton
+          v-if="skeleton"
+          absolute
+          rounded
+          :grouped="skeletonGrouped"
+        />
+
         <div
-          class="flex gap-2.5 items-center"
+          :class="inputContainerClasses"
+          class="w-full flex items-center"
+          v-on-click-outside="onClickOutside"
         >
-          <AntTag
-            v-for="(tag, index) in _modelValue"
-            :key="`tag-input-tag-${index}`"
-            :size="AntTagSize.xs3"
-            :state="state as unknown as TagState"
-            :dismiss="!readonly"
-            @close="removeTag(tag)"
+          <div
+            class="flex gap-2.5 items-center"
           >
-            {{ options.find((option: SelectOption) => option.value === tag)?.label }}
-          </AntTag>
+            <AntTag
+              v-for="(tag, index) in _modelValue"
+              :key="`tag-input-tag-${index}`"
+              :size="AntTagSize.xs3"
+              :state="state as unknown as TagState"
+              :dismiss="!readonly"
+              @close="removeTag(tag)"
+            >
+              {{ options.find((option: SelectOption) => option.value === tag)?.label }}
+            </AntTag>
+          </div>
+
+          <!-- Input -->
+          <div class="flex items-center w-32 shrink grow">
+            <AntIcon
+              :icon="icon"
+              :size="size === AntTagInputSize.sm ? IconSize.xs : IconSize.sm"
+            />
+
+            <input
+              ref="inputRef"
+              v-model="tagInput"
+              type="text"
+              :placeholder="placeholder"
+              :class="inputClasses"
+              :disabled="disabled"
+              :readonly="readonly"
+              @focus="changeFocus"
+              @keydown.delete="removeLastTag"
+              @keydown.enter.prevent="checkCreateTag(tagInput)"
+              @blur="onBlur"
+            />
+          </div>
         </div>
 
-        <!-- Input -->
-        <div class="flex items-center w-32 shrink grow">
-          <AntIcon
-            :icon="icon"
-            :size="size === AntTagInputSize.sm ? IconSize.xs : IconSize.sm"
-          />
-
-          <input
-            ref="inputRef"
-            v-model="tagInput"
-            type="text"
-            :placeholder="placeholder"
-            :class="inputClasses"
-            :disabled="disabled"
-            :readonly="readonly"
-            @focus="changeFocus"
-            @input="filterDropDown"
-            @keydown.delete="removeLastTag"
-            @keydown.enter.prevent="checkCreateTag(tagInput)"
-            @blur="onBlur"
-          />
-        </div>
+        <AntSelectMenu
+          v-if="!disabled && !readonly"
+          v-model:focused="focusedDropDownItem"
+          v-model:open="dropDownOpen"
+          :model-value="null"
+          :auto-select-first-on-open="!allowCreate"
+          :options="filteredOptions"
+          :input-ref="inputRef"
+          :size="size as unknown as Size"
+          :state="state"
+          :focus-on-open="false"
+          :close-on-select-item="false"
+          @select-element="addTagFromOptions"
+        >
+          <template #empty>
+            <span v-if="allowCreate">
+              No tag found, create now
+            </span>
+          </template>
+        </AntSelectMenu>
       </div>
-
-      <AntDropDown
-        v-if="filteredOptions && !disabled && !readonly"
-        ref="dropDownRef"
-        v-model:focused="focusedDropDownItem"
-        v-model:open="dropDownOpen"
-        :model-value="null"
-        :auto-select-first-on-open="!allowCreate"
-        :options="filteredOptions"
-        :input-ref="inputRef"
-        :size="size as unknown as Size"
-        :state="state"
-        :focus-on-open="false"
-        @select-element="addTagFromOptions"
-      >
-        <template #empty>
-          <span v-if="allowCreate">
-            No tag found, create now
-          </span>
-        </template>
-      </AntDropDown>
-    </div>
-  </AntField>
+    </AntField>
+  </div>
 </template>

package/dist/components/inputs/AntTextarea.vue

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import {computed, onMounted, watch} from 'vue';
+import {computed, onMounted, ref, watch} from 'vue';
 import {Size} from '../../enums/Size.enum';
 import AntSkeleton from '../AntSkeleton.vue';
 import AntIcon from '../AntIcon.vue';
@@ -36,6 +36,7 @@ const props = withDefaults(defineProps<{
   limiter?: boolean;
   max?: number;
   messages?: string[];
+  resize?: boolean;
 }>(), {
   state: InputState.base,
   disabled: false,
@@ -45,8 +46,10 @@ const props = withDefaults(defineProps<{
   grouped: Grouped.none,
   showIcon: true,
   limiter: false,
+  resize: true,
   messages: () => []
 });
+
 const _modelValue = useVModel(props, 'modelValue', emit);
 const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
 const icons = {
@@ -67,7 +70,7 @@ const inputClasses = computed(() => {
   };
 
   return {
-    'block transition-colors relative border-none outline w-full focus:z-10': true,
+    'block transition-colors relative border-none outline w-full focus:z-10 h-full text-black': true,
     'outline-offset-[-1px] outline-1 focus:outline-offset-[-1px] focus:outline-1': true,
     'disabled:opacity-50 disabled:cursor-not-allowed': props.disabled,
     [variants[props.state]]: true,
@@ -90,7 +93,8 @@ 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,
+    'resize-none': !props.resize
   };
 });
 const iconColor = computed(() => {
@@ -108,6 +112,7 @@ const iconColor = computed(() => {
 });
 const _wrapperClass = computed(() => classesToObjectSyntax(props.wrapperClass));
 const icon = computed(() => icons[props.state]);
+const textAreaRef = ref();
 const getIconSize = computed(() => {
   if (props.size === Size.xs || props.size === Size.xs2) {
     return IconSize.xs;
@@ -141,6 +146,11 @@ function onBlur(e: FocusEvent) {
   emit('validate', props.modelValue);
   emit('blur', e);
 }
+
+defineExpose({
+  getTextAreaRef: () => textAreaRef.value
+});
+
 </script>
 
 <template>
@@ -153,9 +163,10 @@ function onBlur(e: FocusEvent) {
     :limiter-max-value="limiter && max !== undefined ? max : undefined"
     :limiter-value="limiter ? _modelValue?.length : undefined"
     :messages="messages"
+    :expanded-height="!resize"
   >
     <div
-      class="block relative w-full"
+      class="block relative w-full h-full"
       :class="{...{'-mr-px': grouped !== Grouped.none}, ..._wrapperClass}"
     >
       <textarea
@@ -164,6 +175,7 @@ function onBlur(e: FocusEvent) {
         :placeholder="placeholder !== undefined ? placeholder : label"
         :disabled="disabled || skeleton"
         :readonly="readonly"
+        ref="textAreaRef"
         v-bind="$attrs"
         @blur="onBlur"
       />

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

@@ -68,7 +68,7 @@ const inputClasses = computed(() => {
   };
 
   return {
-    'block transition-colors relative border-none outline w-full focus:z-10 text-black': true,
+    'block transition-colors relative border-none outline w-full focus:z-10 text-black font-regular': true,
     'outline-offset-[-1px] outline-1 focus:outline-offset-[-1px] focus:outline-1': true,
     'disabled:opacity-50 disabled:cursor-not-allowed': props.disabled,
     'text-right': props.type === BaseInputType.number,
@@ -235,7 +235,7 @@ function onClickClearIcon() {
     <div
       v-if="(nullable && _modelValue !== null && _modelValue !== '') || (showIcon && icon) || hasSlotContent(slot['icon-right'])"
       class="absolute h-full flex items-center justify-center right-0 top-0 transition-all z-20"
-      :class="{'w-6': size === Size.xs2, 'w-7': size === Size.xs2, 'w-8': size === Size.sm, 'w-9': size === Size.md, 'w-10': size === Size.lg}"
+      :class="{'w-6': size === Size.xs2, 'w-7': size === Size.xs, 'w-8': size === Size.sm, 'w-9': size === Size.md, 'w-10': size === Size.lg}"
     >
       <slot name="icon-right">
         <AntIcon

package/dist/components/inputs/Elements/{AntDropDown.vue → AntSelectMenu.vue}

@@ -6,12 +6,13 @@
  * 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 {useVModel} from '@vueuse/core';
+import {useElementSize, useVModel, onClickOutside} from '@vueuse/core';
 import type {Validator} from '@antify/validate';
+import {autoUpdate, flip, offset, useFloating} from "@floating-ui/vue";
+import {vOnClickOutside} from '@vueuse/components';
 
 const emit = defineEmits(['update:open', 'update:modelValue', 'update:focused', 'selectElement']);
 const props = withDefaults(defineProps<{
@@ -25,17 +26,39 @@ const props = withDefaults(defineProps<{
   inputRef?: HTMLElement | null;
   closeOnEnter?: boolean;
   autoSelectFirstOnOpen?: boolean;
+  closeOnSelectItem?: boolean;
 }>(), {
   state: InputState.base,
   focusOnOpen: true,
   closeOnEnter: false,
-  autoSelectFirstOnOpen: true
+  autoSelectFirstOnOpen: true,
+  closeOnSelectItem: true,
+});
+const reference = ref<HTMLElement | null | undefined>(props.inputRef)
+const width = useElementSize(reference);
+const floating = ref<HTMLElement | null>(null)
+const {floatingStyles, middlewareData, placement} = useFloating(reference, floating, {
+  placement: 'bottom',
+  whileElementsMounted: autoUpdate,
+  middleware: [
+    offset(8),
+    flip({
+      fallbackPlacements: ['top'],
+    }),
+  ]
+});
+
+onClickOutside(floating, () => {
+  if (!props.open) {
+    return;
+  }
+
+  emit('update:open', false);
 });
 
 const _modelValue = useVModel(props, 'modelValue', emit);
 const isOpen = useVModel(props, 'open', emit);
 const focusedDropDownItem = useVModel(props, 'focused', emit);
-
 const dropdownClasses = computed(() => {
   const variants: Record<InputState, string> = {
     [InputState.base]: 'bg-neutral-300 border-neutral-300',
@@ -46,11 +69,9 @@ const dropdownClasses = computed(() => {
   };
 
   return {
-    'absolute w-full border flex flex-col gap-px outline-none -mt-px overflow-hidden shadow-md z-40': true,
-    'rounded-bl-md rounded-br-md': true,
+    'w-full border flex flex-col gap-px outline-none -mt-px overflow-hidden shadow-md z-[90]': true,
+    'rounded-md': true,
     [variants[props.state]]: true,
-    // Size
-    'text-sm': props.size === Size.sm || props.size === Size.md
   };
 });
 const dropDownItemClasses = computed(() => {
@@ -66,8 +87,11 @@ const dropDownItemClasses = computed(() => {
     'select-none text-ellipsis overflow-hidden whitespace-nowrap': true,
     [variants[props.state]]: true,
     // Size
-    'p-1.5': props.size === Size.sm,
-    'p-2': props.size === Size.md,
+    'p-1 text-xs': props.size === Size.xs2,
+    'p-1.5 text-xs': props.size === Size.xs,
+    'p-1.5 text-sm': props.size === Size.sm,
+    'p-2 text-sm': props.size === Size.md,
+    'p-2.5 text-sm': props.size === Size.lg,
   };
 });
 
@@ -86,12 +110,12 @@ watch(isOpen, () => {
 
 onMounted(() => {
   nextTick(() => {
-    props.inputRef?.addEventListener('keydown', onKeyDownDropDown);
+    reference.value?.addEventListener('keydown', onKeyDownDropDown);
   });
 });
 
 onUnmounted(() => {
-  props.inputRef?.removeEventListener('keydown', onKeyDownDropDown);
+  reference.value?.removeEventListener('keydown', onKeyDownDropDown);
 });
 
 function onKeyDownDropDown(e: KeyboardEvent) {
@@ -100,6 +124,10 @@ function onKeyDownDropDown(e: KeyboardEvent) {
       isOpen.value = false;
     }
 
+    if (!isOpen.value) {
+      isOpen.value = true
+    }
+
     emit('selectElement', focusedDropDownItem.value);
   }
 
@@ -108,6 +136,7 @@ function onKeyDownDropDown(e: KeyboardEvent) {
   }
 
   if (e.key === 'ArrowDown' || e.key === 'ArrowRight') {
+    e.preventDefault()
     isOpen.value = true;
 
     const index = props.options.findIndex(option => option.value === focusedDropDownItem.value);
@@ -121,6 +150,7 @@ function onKeyDownDropDown(e: KeyboardEvent) {
   }
 
   if (e.key === 'ArrowUp' || e.key === 'ArrowLeft') {
+    e.preventDefault()
     isOpen.value = true;
 
     const index = props.options.findIndex(option => option.value === focusedDropDownItem.value);
@@ -138,21 +168,24 @@ function onKeyDownDropDown(e: KeyboardEvent) {
 
 function getActiveDropDownItemClasses(option: SelectOption) {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'bg-neutral-50/25',
-    [InputState.success]: 'bg-success-100/25',
-    [InputState.info]: 'bg-info-100/25',
-    [InputState.warning]: 'bg-warning-100/25',
-    [InputState.danger]: 'bg-danger-100/25',
+    [InputState.base]: '!bg-neutral-100',
+    [InputState.success]: 'bg-success-200',
+    [InputState.info]: 'bg-info-200',
+    [InputState.warning]: 'bg-warning-200',
+    [InputState.danger]: 'bg-danger-200',
   };
 
-  return option.value === focusedDropDownItem.value ? {[variants[props.state]]: true} : {};
+  return option.value === focusedDropDownItem.value ? {'bg-white': false, [variants[props.state]]: true} : {};
 }
 
 function onClickDropDownItem(e: MouseEvent, value: string | number | null) {
   e.preventDefault();
-  props.inputRef?.focus();
+  reference.value?.focus();
+
+  if (props.closeOnSelectItem) {
+    isOpen.value = false;
+  }
 
-  isOpen.value = false;
   emit('selectElement', value);
   _modelValue.value = value;
 }
@@ -164,26 +197,37 @@ watch(_modelValue, (val) => {
 
 <template>
   <div
-    v-if="isOpen"
-    :class="dropdownClasses"
+    ref="reference"
+    class="relative"
   >
-    <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/>
+
+    <teleport to="body">
+      <div
+        v-if="isOpen"
+        :class="dropdownClasses"
+        ref="floating"
+        :style="{width: `${width.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="options.length === 0"
+          :class="{...dropDownItemClasses}"
+        >
+          <slot name="empty">
+            No options available
+          </slot>
+        </div>
+      </div>
+    </teleport>
   </div>
 </template>

package/dist/components/inputs/Elements/__stories/AntBaseInput.stories.d.ts

@@ -4,7 +4,6 @@ declare const meta: Meta<typeof AntBaseInput>;
 export default meta;
 type Story = StoryObj<typeof AntBaseInput>;
 export declare const Docs: Story;
-export declare const withValidator: Story;
 export declare const Nullable: Story;
 export declare const IconLeft: Story;
 export declare const IconRight: Story;

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

@@ -3,15 +3,13 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withValidator = exports.default = exports.Summary = exports.Nullable = exports.IconRight = exports.IconLeft = exports.Docs = void 0;
+module.exports = exports.Summary = exports.Nullable = exports.IconRight = exports.IconLeft = exports.Docs = void 0;
 var _Size = require("../../../../enums/Size.enum");
 var _AntBaseInput = require("../__types/AntBaseInput.types");
 var _AntBaseInput2 = _interopRequireDefault(require("../AntBaseInput.vue"));
 var _AntButton = _interopRequireDefault(require("../../../buttons/AntButton.vue"));
 var _AntIcon = _interopRequireDefault(require("../../../AntIcon.vue"));
 var _Grouped2 = require("../../../../enums/Grouped.enum");
-var _validate = require("@antify/validate");
-var _vue = require("vue");
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _enums = require("../../../../enums");
 var _AntFormGroup = _interopRequireDefault(require("../../../forms/AntFormGroup.vue"));
@@ -136,32 +134,6 @@ const Docs = exports.Docs = {
     placeholder: "Placeholder"
   }
 };
-const withValidator = exports.withValidator = {
-  render: args => ({
-    components: {
-      AntBaseInput: _AntBaseInput2.default
-    },
-    setup: () => {
-      const validator = (0, _vue.reactive)((0, _validate.useFieldValidator)([_validate.isRequiredRule, _validate.notBlankRule]));
-      return {
-        args,
-        validator,
-        InputState: _enums.InputState
-      };
-    },
-    template: `
-      <AntBaseInput
-        v-model="args.modelValue"
-        v-bind="args"
-        :state="args.state ? args.state : (validator.hasErrors() ? InputState.danger : undefined)"
-        @validate="(val) => validator.validate(val)"
-      />`
-  }),
-  args: {
-    ...Docs.args,
-    modelValue: ""
-  }
-};
 const Nullable = exports.Nullable = {
   render: Docs.render,
   args: {