@antify/ui 2.2.0 → 2.2.3

package/dist/components/inputs/AntSwitch.vue

@@ -1,11 +1,22 @@
 <script setup lang="ts">
 import AntField from '../forms/AntField.vue';
-import {computed, watch} from 'vue';
+import {
+  computed, watch,
+} from 'vue';
 import AntSkeleton from '../AntSkeleton.vue';
-import {InputState, Size} from '../../enums';
-import {hasSlotContent} from '../../utils';
+import {
+  InputState, Size,
+} from '../../enums';
+import {
+  hasSlotContent,
+} from '../../utils';
 
-const emit = defineEmits(['update:modelValue', 'input', 'blur', 'validate']);
+const emit = defineEmits([
+  'update:modelValue',
+  'input',
+  'blur',
+  'validate',
+]);
 const props = withDefaults(defineProps<{
   modelValue: boolean | null;
   label?: string;
@@ -14,35 +25,37 @@ const props = withDefaults(defineProps<{
   readonly?: boolean;
   disabled?: boolean;
   size?: Size;
-  state?: InputState
-  messages?: string[]
+  state?: InputState;
+  messages?: string[];
 }>(), {
   size: Size.md,
   state: InputState.base,
-  messages: () => []
+  messages: () => [],
 });
 const _value = computed({
   get: () => props.modelValue,
   set: (val: boolean | null) => {
     emit('update:modelValue', val);
     emit('input', val);
-  }
+  },
 });
 const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
 const buttonClasses = computed(() => {
-  const classes: { [key: string]: boolean } = {
-    'relative inline-flex flex-shrink-0': true,
-    'focus:outline-none': true,
+  const classes: {
+    [key: string]: boolean;
+  } = {
+    'relative inline-flex shrink-0': true,
+    'focus:outline-hidden': true,
     'rounded-full ease-in-out duration-200': true,
     'focus-within:ring-4': !hasInputState.value && (props.size === Size.lg || props.size === Size.md),
     'focus-within:ring-2': !hasInputState.value && (props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2),
     'h-5 w-9': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
     'h-4 w-[30px]': props.size === Size.xs || props.size === Size.xs2,
     'bg-base-300': !_value.value,
-    'invisible': props.skeleton,
+    invisible: props.skeleton,
     // Disabled
     'opacity-50 cursor-not-allowed': props.disabled,
-    'cursor-default': props.readonly
+    'cursor-default': props.readonly,
   };
   const colorVariant = {
     [InputState.base]: 'focus-within:ring-primary-200',
@@ -65,14 +78,14 @@ const buttonClasses = computed(() => {
   return classes;
 });
 const ballClasses = computed(() => ({
-  'pointer-events-none inline-block rounded-full bg-base-100 shadow transform ring-0 transition ease-in-out duration-200': true,
+  'pointer-events-none inline-block rounded-full bg-base-100 shadow-sm transform ring-0 transition ease-in-out duration-200': true,
   'h-4 w-4 translate-y-0.5': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
   'translate-x-[1.125rem]': _value.value && (props.size === Size.lg || props.size === Size.md || props.size === Size.sm),
   'translate-x-0.5': !_value.value && (props.size === Size.lg || props.size === Size.md || props.size === Size.sm),
   'h-3.5 w-3.5  translate-y-[1px]': props.size === Size.xs || props.size === Size.xs2,
   'translate-x-[.925rem]': _value.value && (props.size === Size.xs || props.size === Size.xs2),
   'translate-x-[1px]': !_value.value && (props.size === Size.xs || props.size === Size.xs2),
-  'invisible': props.skeleton
+  invisible: props.skeleton,
 }));
 const valueClasses = computed(() => ({
   'text-for-white-bg-font': true,
@@ -111,7 +124,11 @@ watch(() => props.skeleton, (val) => {
   }
 });
 watch(_value, () => {
-  if ([InputState.danger, InputState.info, InputState.warning].includes(props.state)) {
+  if ([
+    InputState.danger,
+    InputState.info,
+    InputState.warning,
+  ].includes(props.state)) {
     emit('validate', props.modelValue);
   }
 });
@@ -130,6 +147,7 @@ function onBlur(e: FocusEvent) {
 
 <template>
   <AntField
+    data-e2e="switch"
     :label="label"
     :size="size"
     :description="description"
@@ -155,7 +173,7 @@ function onBlur(e: FocusEvent) {
             aria-hidden="true"
             :class="ballClasses"
           >
-            <slot name="icon"/>
+            <slot name="icon" />
           </span>
         </button>
 
@@ -172,7 +190,7 @@ function onBlur(e: FocusEvent) {
         :class="props.size === Size.lg || props.size === Size.md ||props.size === Size.sm ? 'h-5' : 'h-4'"
       >
         <span :class="valueClasses">
-          <slot/>
+          <slot />
         </span>
 
         <AntSkeleton

package/dist/components/inputs/AntSwitcher.vue

@@ -1,13 +1,25 @@
 <script setup lang="ts">
 import AntField from '../forms/AntField.vue';
 import AntButton from '../buttons/AntButton.vue';
-import {faChevronLeft, faChevronRight} from '@fortawesome/free-solid-svg-icons';
+import {
+  faChevronLeft, faChevronRight,
+} from '@fortawesome/free-solid-svg-icons';
 import AntSkeleton from '../AntSkeleton.vue';
-import {type SwitcherOption} from './__types/AntSwitcher.types';
-import {State, Grouped, InputState, Size} from '../../enums';
-import {computed, onMounted, watch} from 'vue';
-
-const emit = defineEmits(['update:modelValue', 'validate', 'blur']);
+import {
+  type SwitcherOption,
+} from './__types/AntSwitcher.types';
+import {
+  State, Grouped, InputState, Size,
+} from '../../enums';
+import {
+  computed, onMounted, watch,
+} from 'vue';
+
+const emit = defineEmits([
+  'update:modelValue',
+  'validate',
+  'blur',
+]);
 const props = withDefaults(defineProps<{
   modelValue: string | null;
   options: string[] | SwitcherOption[];
@@ -17,17 +29,16 @@ const props = withDefaults(defineProps<{
   readonly?: boolean;
   disabled?: boolean;
   state?: InputState;
-  size?: Size,
+  size?: Size;
   messages?: string[];
 }>(), {
   state: InputState.base,
   size: Size.md,
-  messages: () => []
+  messages: () => [],
 });
 const _value = computed({
   get() {
-    const found = props.options.find((option: string | SwitcherOption) =>
-      typeof option === 'string' ? option === props.modelValue : option.value === props.modelValue);
+    const found = props.options.find((option: string | SwitcherOption) => typeof option === 'string' ? option === props.modelValue : option.value === props.modelValue);
 
     if (!found) {
       return props.options[0];
@@ -37,12 +48,14 @@ const _value = computed({
   },
   set(val: string | SwitcherOption) {
     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 ring-primary/25 rounded-md outline-none': true,
+  const classes: {
+    [key: string]: boolean;
+  } = {
+    'flex relative 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,
   };
@@ -59,14 +72,16 @@ const containerClasses = computed(() => {
   return classes;
 });
 const itemClasses = computed(() => {
-  const classes: { [key: string]: boolean } = {
+  const classes: {
+    [key: string]: boolean;
+  } = {
     'grow text-center text-black relative outline outline-1 -outline-offset-1': true,
     '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,
-    'invisible': props.skeleton,
+    invisible: props.skeleton,
     'opacity-50 cursor-not-allowed': props.disabled,
   };
 

package/dist/components/inputs/AntTagInput.vue

@@ -1,59 +1,81 @@
 <script setup lang="ts">
-import {AntField} from './Elements';
-import type {SelectOption} from './__types';
-import {Grouped, InputState, Size} from '../../enums';
-import {useVModel} from '@vueuse/core';
-import {faChevronRight, type IconDefinition} from '@fortawesome/free-solid-svg-icons';
-import {computed, onMounted, type Ref, ref, watch} from 'vue';
+import {
+  AntField,
+} from './Elements';
+import type {
+  SelectOption,
+} from './__types';
+import {
+  Grouped, InputState, Size,
+} from '../../enums';
+import {
+  useVModel,
+} from '@vueuse/core';
+import {
+  faChevronRight, type IconDefinition,
+} from '@fortawesome/free-solid-svg-icons';
+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 {
+  AntTagSize, IconSize,
+} from '../__types';
 import AntSelectMenu from './Elements/AntSelectMenu.vue';
 import AntSkeleton from '../AntSkeleton.vue';
-import {vOnClickOutside} from '@vueuse/components';
-import {AntTagInputSize} from './__types/AntTagInput.types';
-import type {TagState} from '../__types/AntTag.types';
+import {
+  vOnClickOutside,
+} from '@vueuse/components';
+import {
+  AntTagInputSize,
+} from './__types/AntTagInput.types';
+import type {
+  TagState,
+} from '../__types/AntTag.types';
 
-const emit = defineEmits(['update:modelValue', 'blur', 'validate']);
-const props = withDefaults(
-  defineProps<{
-    modelValue: (string | number)[] | null;
-    options: SelectOption[];
-    label?: string;
-    description?: string;
-    placeholder?: string;
-    size?: AntTagInputSize;
-    state?: InputState;
-    disabled?: boolean;
-    readonly?: boolean;
-    skeleton?: boolean;
-    name?: string;
-    expanded?: boolean;
-    icon?: IconDefinition;
-    grouped?: Grouped;
-    nullable?: boolean;
-    messages?: string[];
-    allowCreate?: boolean;
-    allowDuplicates?: boolean;
-    openOnFocus?: boolean;
-    autoCloseAfterSelection?: boolean;
-    createCallback?: (item: string) => Promise<SelectOption>;
-  }>(), {
-    size: AntTagInputSize.md,
-    state: InputState.base,
-    icon: () => faChevronRight,
-    messages: () => [],
-    grouped: Grouped.none,
-    allowCreate: false,
-    allowDuplicates: false,
-    openOnFocus: true,
-    readonly: false,
-    disabled: false,
-    skeleton: false,
-    autoCloseAfterSelection: false,
-    placeholder: 'Add new tag'
-  }
-);
+const emit = defineEmits([
+  'update:modelValue',
+  'blur',
+  'validate',
+]);
+const props = withDefaults(defineProps<{
+  modelValue: (string | number)[] | null;
+  options: SelectOption[];
+  label?: string;
+  description?: string;
+  placeholder?: string;
+  size?: AntTagInputSize;
+  state?: InputState;
+  disabled?: boolean;
+  readonly?: boolean;
+  skeleton?: boolean;
+  name?: string;
+  expanded?: boolean;
+  icon?: IconDefinition;
+  grouped?: Grouped;
+  nullable?: boolean;
+  messages?: string[];
+  allowCreate?: boolean;
+  allowDuplicates?: boolean;
+  openOnFocus?: boolean;
+  autoCloseAfterSelection?: boolean;
+  createCallback?: (item: string) => Promise<SelectOption>;
+}>(), {
+  size: AntTagInputSize.md,
+  state: InputState.base,
+  icon: () => faChevronRight,
+  messages: () => [],
+  grouped: Grouped.none,
+  allowCreate: false,
+  allowDuplicates: false,
+  openOnFocus: true,
+  readonly: false,
+  disabled: false,
+  skeleton: false,
+  autoCloseAfterSelection: false,
+  placeholder: 'Add new tag',
+});
 
 const _modelValue: Ref<(string | number)[] | null> = useVModel(props, 'modelValue', emit);
 const _skeleton = useVModel(props, 'skeleton', emit);
@@ -88,7 +110,7 @@ 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,
-    'invisible': props.skeleton,
+    invisible: props.skeleton,
   };
 });
 const inputClasses = computed(() => {
@@ -101,7 +123,7 @@ const inputClasses = computed(() => {
   };
 
   return {
-    'outline-0 border:none ring:none bg-transparent w-full': true,
+    'outline-0 bg-transparent w-full': true,
     'opacity-50 cursor-not-allowed': props.disabled,
     [variants[props.state]]: true,
   };
@@ -124,15 +146,15 @@ const filteredOptions = computed(() => {
       return !_modelValue.value?.includes(option.value);
     }
 
-    return option.label.toLowerCase().includes(tagInput.value.toLowerCase())
+    return option.label.toLowerCase().includes(tagInput.value.toLowerCase());
   });
-})
+});
 
 function onClickOutside() {
   if (!dropDownOpen.value) {
     return;
   }
-  console.log("click outside");
+  console.log('click outside');
   // dropDownOpen.value = false;
 }
 
@@ -161,7 +183,7 @@ function addTagFromOptions(item: string | number) {
     addTag(item);
 
     if (props.autoCloseAfterSelection) {
-      console.log("HIER");
+      console.log('HIER');
       dropDownOpen.value = false;
     }
   }
@@ -175,7 +197,9 @@ function addTag(tagValue: string | number): void {
   if (Array.isArray(_modelValue.value)) {
     _modelValue.value.push(tagValue);
   } else {
-    _modelValue.value = [tagValue];
+    _modelValue.value = [
+      tagValue,
+    ];
   }
 
   tagInput.value = '';
@@ -211,10 +235,16 @@ watch(() => props.skeleton, (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,
+});
 
 onMounted(() => {
   /**
@@ -248,9 +278,9 @@ onMounted(() => {
         />
 
         <div
+          v-on-click-outside="onClickOutside"
           :class="inputContainerClasses"
           class="w-full flex items-center"
-          v-on-click-outside="onClickOutside"
         >
           <div
             class="flex gap-2.5 items-center"
@@ -286,7 +316,7 @@ onMounted(() => {
               @keydown.delete="removeLastTag"
               @keydown.enter.prevent="checkCreateTag(tagInput)"
               @blur="onBlur"
-            />
+            >
           </div>
         </div>
 

package/dist/components/inputs/AntTextInput.vue

@@ -1,17 +1,37 @@
 <script lang="ts" setup>
-import {onMounted} from 'vue';
+import {
+  onMounted,
+} from 'vue';
 import AntField from '../forms/AntField.vue';
 import AntBaseInput from './Elements/AntBaseInput.vue';
-import {Size} from '../../enums/Size.enum';
-import {TextInputType} from './__types/AntTextInput.types';
-import {handleEnumValidation} from '../../handler';
-import {useVModel} from '@vueuse/core';
-import {InputState} from '../../enums';
-import {BaseInputType} from './Elements/__types';
+import {
+  Size,
+} from '../../enums/Size.enum';
+import {
+  TextInputType,
+} from './__types/AntTextInput.types';
+import {
+  handleEnumValidation,
+} from '../../handler';
+import {
+  useVModel,
+} from '@vueuse/core';
+import {
+  InputState,
+} from '../../enums';
+import {
+  BaseInputType,
+} from './Elements/__types';
 
-defineOptions({inheritAttrs: false});
+defineOptions({
+  inheritAttrs: false,
+});
 
-const emit = defineEmits(['update:modelValue', 'update:skeleton', 'validate']);
+const emit = defineEmits([
+  'update:modelValue',
+  'update:skeleton',
+  'validate',
+]);
 const props = withDefaults(defineProps<{
   modelValue: string | null;
   label?: string;
@@ -34,7 +54,7 @@ const props = withDefaults(defineProps<{
   size: Size.md,
   type: TextInputType.text,
   limiter: false,
-  messages: () => []
+  messages: () => [],
 });
 
 const _value = useVModel(props, 'modelValue', emit);
@@ -60,7 +80,7 @@ onMounted(() => {
     <AntBaseInput
       v-model="_value"
       :type="type as unknown as BaseInputType"
-      wrapper-class="flex-grow"
+      wrapper-class="grow"
       :state="state"
       :size="size"
       :skeleton="skeleton"

package/dist/components/inputs/AntTextarea.vue

@@ -1,25 +1,47 @@
 <script lang="ts" setup>
-import {computed, onMounted, ref, watch} from 'vue';
-import {Size} from '../../enums/Size.enum';
+import {
+  computed, onMounted, ref, watch,
+} from 'vue';
+import {
+  Size,
+} from '../../enums/Size.enum';
 import AntSkeleton from '../AntSkeleton.vue';
 import AntIcon from '../AntIcon.vue';
-import {Grouped} from '../../enums/Grouped.enum';
+import {
+  Grouped,
+} from '../../enums/Grouped.enum';
 import {
   faExclamationTriangle,
   faExclamationCircle,
   faCircleCheck,
-  faCircleInfo
+  faCircleInfo,
 } from '@fortawesome/free-solid-svg-icons';
-import {handleEnumValidation} from '../../handler';
-import {classesToObjectSyntax} from '../../utils';
+import {
+  handleEnumValidation,
+} from '../../handler';
+import {
+  classesToObjectSyntax,
+} from '../../utils';
 import AntField from '../forms/AntField.vue';
-import {useVModel} from '@vueuse/core';
-import {InputState} from '../../enums';
-import {IconSize} from '../__types';
+import {
+  useVModel,
+} from '@vueuse/core';
+import {
+  InputState,
+} from '../../enums';
+import {
+  IconSize,
+} from '../__types';
 
-defineOptions({inheritAttrs: false});
+defineOptions({
+  inheritAttrs: false,
+});
 
-const emit = defineEmits(['update:modelValue', 'validate', 'blur']);
+const emit = defineEmits([
+  'update:modelValue',
+  'validate',
+  'blur',
+]);
 const props = withDefaults(defineProps<{
   modelValue: string | null;
   size?: Size;
@@ -47,7 +69,7 @@ const props = withDefaults(defineProps<{
   showIcon: true,
   limiter: false,
   resize: true,
-  messages: () => []
+  messages: () => [],
 });
 
 const _modelValue = useVModel(props, 'modelValue', emit);
@@ -93,19 +115,19 @@ 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,
-    'resize-none': !props.resize
+    invisible: props.skeleton,
+    'resize-none': !props.resize,
   };
 });
 const iconColor = computed(() => {
   const variants = {
-    'base': undefined,
-    'danger': 'text-danger-500',
-    'info': 'text-info-500',
-    'primary': 'text-primary-500',
-    'secondary': 'text-secondary-500',
-    'success': 'text-success-500',
-    'warning': 'text-warning-500',
+    base: undefined,
+    danger: 'text-danger-500',
+    info: 'text-info-500',
+    primary: 'text-primary-500',
+    secondary: 'text-secondary-500',
+    success: 'text-success-500',
+    warning: 'text-warning-500',
   };
 
   return variants[props.state];
@@ -132,10 +154,16 @@ onMounted(() => {
 });
 
 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);
@@ -148,7 +176,7 @@ function onBlur(e: FocusEvent) {
 }
 
 defineExpose({
-  getTextAreaRef: () => textAreaRef.value
+  getTextAreaRef: () => textAreaRef.value,
 });
 
 </script>
@@ -170,12 +198,12 @@ defineExpose({
       :class="{...{'-mr-px': grouped !== Grouped.none}, ..._wrapperClass}"
     >
       <textarea
+        ref="textAreaRef"
         v-model="_modelValue"
         :class="inputClasses"
         :placeholder="placeholder !== undefined ? placeholder : label"
         :disabled="disabled || skeleton"
         :readonly="readonly"
-        ref="textAreaRef"
         v-bind="$attrs"
         @blur="onBlur"
       />