@antify/ui 2.2.1 → 2.2.3

package/dist/components/inputs/AntRadio.vue

@@ -1,46 +1,63 @@
 <script lang="ts" setup>
-import {AntField} from './Elements';
-import {InputState, Size} from '../../enums';
+import {
+  AntField,
+} from './Elements';
+import {
+  InputState, Size,
+} from '../../enums';
 import AntSkeleton from '../AntSkeleton.vue';
-import {computed, onMounted, watch} from 'vue';
-import {type AntRadioTypes} from './__types/AntRadio.types';
-import {handleEnumValidation} from '../../handler';
-
-defineOptions({inheritAttrs: false});
-
-const emit = defineEmits(['update:modelValue', 'update:skeleton', 'validate', 'blur']);
-const props = withDefaults(
-  defineProps<{
-    modelValue: string | null;
-    value: AntRadioTypes;
-    description?: string;
-    skeleton?: boolean;
-    state?: InputState;
-    size?: Size;
-    readonly?: boolean;
-    disabled?: boolean;
-    messages?: string[];
-  }>(), {
-    state: InputState.base,
-    size: Size.md,
-    readonly: false,
-    disabled: false,
-    messages: () => []
-  }
-);
+import {
+  computed, onMounted, watch,
+} from 'vue';
+import {
+  type AntRadioTypes,
+} from './__types/AntRadio.types';
+import {
+  handleEnumValidation,
+} from '../../handler';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const emit = defineEmits([
+  'update:modelValue',
+  'update:skeleton',
+  'validate',
+  'blur',
+]);
+const props = withDefaults(defineProps<{
+  modelValue: string | null;
+  value: AntRadioTypes;
+  description?: string;
+  skeleton?: boolean;
+  state?: InputState;
+  size?: Size;
+  readonly?: boolean;
+  disabled?: boolean;
+  messages?: string[];
+}>(), {
+  state: InputState.base,
+  size: Size.md,
+  readonly: false,
+  disabled: false,
+  messages: () => [],
+});
 const _modelValue = computed({
   get(): string | null | AntRadioTypes {
     return props.modelValue;
   },
   set(val: string | null | AntRadioTypes) {
     emit('update:modelValue', val ? typeof val === 'string' ? val : val.value : null);
-  }
+  },
 });
 const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
 const isActive = computed(() => _modelValue.value === props.value.value);
 const inputClasses = computed(() => {
-  const classes: { [key: string]: boolean } = {
-    'relative inline-flex flex-shrink-0': true,
+  const classes: {
+    [key: string]: boolean;
+  } = {
+    'relative inline-flex shrink-0': true,
     'focus:ring-offset-0 outline outline-offset-[-1px] outline-1 focus:outline-offset-[-1px] focus:outline-1 rounded-full': true,
     'flex items-center justify-center rounded-full appearance-none': true,
     'cursor-pointer': !hasInputState.value,
@@ -114,10 +131,16 @@ const innerRadioClass = computed(() => (
  * Validate default value if given after delayed data fetching.
  */
 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);
@@ -175,7 +198,7 @@ onMounted(() => {
           :aria-checked="isActive"
           :disabled="disabled || readonly"
           @blur="onBlur"
-        />
+        >
 
         <AntSkeleton
           v-if="skeleton"

package/dist/components/inputs/AntRadioGroup.vue

@@ -1,38 +1,53 @@
 <script lang="ts" setup>
 import AntRadio from './AntRadio.vue';
-import {useVModel} from '@vueuse/core';
-import {AntField} from './Elements';
-import {type AntRadioTypes} from './__types/AntRadio.types';
-import {InputState, Size} from '../../enums';
-import {computed, onMounted, ref, watch} from 'vue';
-import {Direction} from '../../enums/Direction.enum';
-import {handleEnumValidation} from '../../handler';
+import {
+  useVModel,
+} from '@vueuse/core';
+import {
+  AntField,
+} from './Elements';
+import {
+  type AntRadioTypes,
+} from './__types/AntRadio.types';
+import {
+  InputState, Size,
+} from '../../enums';
+import {
+  computed, onMounted, ref, watch,
+} from 'vue';
+import {
+  Direction,
+} from '../../enums/Direction.enum';
+import {
+  handleEnumValidation,
+} from '../../handler';
 
-defineOptions({inheritAttrs: false});
-
-const emit = defineEmits(['update:modelValue', 'update:skeleton', 'validate']);
-const props = withDefaults(
-  defineProps<{
-    modelValue: string | null;
-    radioButtons: AntRadioTypes[];
-    label?: string;
-    description?: string;
-    direction?: Direction;
-    state?: InputState;
-    size?: Size;
-    skeleton?: boolean;
-    disabled?: boolean;
-    readonly?: boolean;
-    messages?: string[];
-  }>(), {
-    direction: Direction.column,
-    state: InputState.base,
-    size: Size.md,
-    skeleton: false,
-    disabled: false,
-    readonly: false,
-    messages: () => []
-  });
+const emit = defineEmits([
+  'update:modelValue',
+  'update:skeleton',
+  'validate',
+]);
+const props = withDefaults(defineProps<{
+  modelValue: string | null;
+  radioButtons: AntRadioTypes[];
+  label?: string;
+  description?: string;
+  direction?: Direction;
+  state?: InputState;
+  size?: Size;
+  skeleton?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  messages?: string[];
+}>(), {
+  direction: Direction.column,
+  state: InputState.base,
+  size: Size.md,
+  skeleton: false,
+  disabled: false,
+  readonly: false,
+  messages: () => [],
+});
 const _modelValue = useVModel(props, 'modelValue', emit);
 const containerClasses = computed(() => ({
   'flex justify-start': true,
@@ -60,12 +75,22 @@ const fieldSize = computed(() => {
 });
 
 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(_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);
   }
 });

package/dist/components/inputs/AntRangeSlider.vue

@@ -1,19 +1,34 @@
 <script setup lang="ts">
 import AntField from '../forms/AntField.vue';
-import {useVModel} from '@vueuse/core';
-import {computed, onMounted, watch} from 'vue';
-import {InputState, Size} from '../../enums';
-import {handleEnumValidation} from '../../handler';
+import {
+  useVModel,
+} from '@vueuse/core';
+import {
+  computed, onMounted, watch,
+} from 'vue';
+import {
+  InputState, Size,
+} from '../../enums';
+import {
+  handleEnumValidation,
+} from '../../handler';
 
-defineOptions({inheritAttrs: false});
+defineOptions({
+  inheritAttrs: false,
+});
 
-const emit = defineEmits(['update:modelValue', 'update:skeleton', 'validate', 'blur']);
+const emit = defineEmits([
+  'update:modelValue',
+  'update:skeleton',
+  'validate',
+  'blur',
+]);
 const props = withDefaults(defineProps<{
   modelValue: number | number[] | null;
   label?: string;
   description?: string;
   state?: InputState;
-  size?: Size,
+  size?: Size;
   disabled?: boolean;
   skeleton?: boolean;
   min?: number;
@@ -25,7 +40,7 @@ const props = withDefaults(defineProps<{
   disabled: false,
   skeleton: false,
   limiter: false,
-  messages: () => []
+  messages: () => [],
 });
 const _modelValue = useVModel(props, 'modelValue', emit);
 const inputClasses = computed(() => {
@@ -38,10 +53,10 @@ const inputClasses = computed(() => {
   };
 
   return {
-    'ant-range-slider transition-colors relative border-none w-full h-2 bg-base-300 rounded-md outline-none': true,
+    'ant-range-slider transition-colors relative border-none w-full h-2 bg-base-300 rounded-md outline-hidden': true,
     'disabled:opacity-50 disabled:cursor-not-allowed': props.disabled,
-    'invisible': props.skeleton,
-    [variants[props.state]]: true
+    invisible: props.skeleton,
+    [variants[props.state]]: true,
   };
 });
 
@@ -54,7 +69,11 @@ 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);
   }
 });

package/dist/components/inputs/AntSearch.vue

@@ -1,13 +1,25 @@
 <script lang="ts" setup>
-import {computed, onMounted, ref} from 'vue';
+import {
+  computed, onMounted, ref,
+} from 'vue';
 import AntBaseInput from './Elements/AntBaseInput.vue';
-import {Size} from '../../enums/Size.enum';
-import {handleEnumValidation} from '../../handler';
-import {faSearch} from '@fortawesome/free-solid-svg-icons';
-import {BaseInputType} from './Elements/__types';
+import {
+  Size,
+} from '../../enums/Size.enum';
+import {
+  handleEnumValidation,
+} from '../../handler';
+import {
+  faSearch,
+} from '@fortawesome/free-solid-svg-icons';
+import {
+  BaseInputType,
+} from './Elements/__types';
 import AntField from '../forms/AntField.vue';
 
-const emits = defineEmits(['update:modelValue']);
+const emits = defineEmits([
+  'update:modelValue',
+]);
 const props = withDefaults(defineProps<{
   modelValue: string | null;
   label?: string;
@@ -25,7 +37,7 @@ const props = withDefaults(defineProps<{
   readonly: false,
   size: Size.md,
   inputTimeout: 300,
-  placeholder: 'Search'
+  placeholder: 'Search',
 });
 
 const timeout = ref<ReturnType<typeof setTimeout> | null>(null);

package/dist/components/inputs/AntSelect.vue

@@ -13,53 +13,75 @@
  * TODO:: if the dropdown is open and the user types something, the element with a matching value should be focused.
  */
 import AntField from '../forms/AntField.vue';
-import {type SelectOption} from './__types/AntSelect.types';
-import {computed, onMounted, ref, watch} from 'vue';
-import {Size} from '../../enums/Size.enum';
-import {handleEnumValidation} from '../../handler';
-import {Grouped} from '../../enums/Grouped.enum';
+import {
+  type SelectOption,
+} from './__types/AntSelect.types';
+import {
+  computed, onMounted, ref, watch,
+} from 'vue';
+import {
+  Size,
+} from '../../enums/Size.enum';
+import {
+  handleEnumValidation,
+} from '../../handler';
+import {
+  Grouped,
+} from '../../enums/Grouped.enum';
 import AntIcon from '../AntIcon.vue';
-import {faChevronDown, faChevronUp, faMultiply} from '@fortawesome/free-solid-svg-icons';
+import {
+  faChevronDown, faChevronUp, faMultiply,
+} from '@fortawesome/free-solid-svg-icons';
 import AntSkeleton from '../AntSkeleton.vue';
-import {vOnClickOutside} from '@vueuse/components';
+import {
+  vOnClickOutside,
+} from '@vueuse/components';
 import AntButton from '../buttons/AntButton.vue';
-import {State, InputState} from '../../enums';
-import {IconSize} from '../__types';
+import {
+  State, InputState,
+} from '../../enums';
+import {
+  IconSize,
+} from '../__types';
 import AntSelectMenu from './Elements/AntSelectMenu.vue';
 
-defineOptions({inheritAttrs: false});
+defineOptions({
+  inheritAttrs: false,
+});
 
-const props = withDefaults(
-  defineProps<{
-    modelValue: string | number | null;
-    options: SelectOption[];
-    label?: string;
-    description?: string;
-    placeholder?: string;
-    size?: Size;
-    state?: InputState;
-    disabled?: boolean;
-    readonly?: boolean;
-    skeleton?: boolean;
-    nullable?: boolean;
-    grouped?: Grouped;
-    name?: string;
-    wrapperClass?: string | Record<string, boolean>;
-    expanded?: boolean;
-    messages?: string[]
-  }>(), {
-    state: InputState.base,
-    grouped: Grouped.none,
-    size: Size.md,
-    disabled: false,
-    readonly: false,
-    skeleton: false,
-    nullable: false,
-    expanded: true,
-    messages: () => []
-  }
-);
-const emit = defineEmits(['update:modelValue', 'blur', 'validate']);
+const props = withDefaults(defineProps<{
+  modelValue: string | number | null;
+  options: SelectOption[];
+  label?: string;
+  description?: string;
+  placeholder?: string;
+  size?: Size;
+  state?: InputState;
+  disabled?: boolean;
+  readonly?: boolean;
+  skeleton?: boolean;
+  nullable?: boolean;
+  grouped?: Grouped;
+  name?: string;
+  wrapperClass?: string | Record<string, boolean>;
+  expanded?: boolean;
+  messages?: string[];
+}>(), {
+  state: InputState.base,
+  grouped: Grouped.none,
+  size: Size.md,
+  disabled: false,
+  readonly: false,
+  skeleton: false,
+  nullable: false,
+  expanded: true,
+  messages: () => [],
+});
+const emit = defineEmits([
+  'update:modelValue',
+  'blur',
+  'validate',
+]);
 const isOpen = ref(false);
 const _modelValue = computed({
   get: () => props.modelValue,
@@ -83,7 +105,7 @@ const inputClasses = computed(() => {
     'outline-offset-[-1px] outline-1 focus:outline-offset-[-1px] focus:outline-1': true,
     [variants[props.state]]: true,
     // Skeleton
-    'invisible': props.skeleton,
+    invisible: props.skeleton,
     // Disabled
     'disabled:opacity-50 disabled:cursor-not-allowed': true,
     // Size
@@ -127,7 +149,9 @@ const arrowClasses = computed(() => {
     [InputState.danger]: 'text-danger-100-font',
   };
 
-  return {[variants[props.state]]: true};
+  return {
+    [variants[props.state]]: true,
+  };
 });
 const skeletonGrouped = computed(() => {
   if (!props.nullable || (props.nullable && _modelValue.value === null)) {
@@ -146,7 +170,7 @@ const iconSize = computed(() => {
   }
 
   return IconSize.xs;
-})
+});
 const inputRef = ref<HTMLElement | null>(null);
 const dropDownRef = ref<HTMLElement | null>(null);
 const focusedDropDownItem = ref<string | number | null>(null);
@@ -260,51 +284,51 @@ function onClickRemoveButton() {
           :close-on-enter="true"
           @select-element="(e) => _modelValue = e"
         >
-        <!-- Input -->
-        <div
-          :class="inputClasses"
-          ref="inputRef"
-          :tabindex="disabled || readonly ? -1 : 0"
-          v-bind="$attrs"
-          @mousedown="onClickSelectInput"
-          @click="() => inputRef?.focus()"
-          @blur="onBlur"
-        >
+          <!-- Input -->
           <div
-            v-if="_modelValue === null && placeholder !== undefined"
-            :class="placeholderClasses"
+            ref="inputRef"
+            :class="inputClasses"
+            :tabindex="disabled || readonly ? -1 : 0"
+            v-bind="$attrs"
+            @mousedown="onClickSelectInput"
+            @click="() => inputRef?.focus()"
+            @blur="onBlur"
           >
-            {{ placeholder }}
-          </div>
+            <div
+              v-if="_modelValue === null && placeholder !== undefined"
+              :class="placeholderClasses"
+            >
+              {{ placeholder }}
+            </div>
 
-          <div
-            v-else-if="_modelValue === null && label !== undefined"
-            :class="placeholderClasses"
-          >
-            {{ label }}
-          </div>
+            <div
+              v-else-if="_modelValue === null && label !== undefined"
+              :class="placeholderClasses"
+            >
+              {{ label }}
+            </div>
 
-          <div
-            v-else
-            class="select-none text-ellipsis overflow-hidden whitespace-nowrap w-full text-black"
-          >
-            {{ valueLabel }}
-          </div>
+            <div
+              v-else
+              class="select-none text-ellipsis overflow-hidden whitespace-nowrap w-full text-black"
+            >
+              {{ valueLabel }}
+            </div>
 
-          <AntIcon
-            v-if="isOpen"
-            :icon="faChevronUp"
-            :size="iconSize"
-            :class="arrowClasses"
-          />
+            <AntIcon
+              v-if="isOpen"
+              :icon="faChevronUp"
+              :size="iconSize"
+              :class="arrowClasses"
+            />
 
-          <AntIcon
-            v-else
-            :icon="faChevronDown"
-            :size="iconSize"
-            :class="arrowClasses"
-          />
-        </div>
+            <AntIcon
+              v-else
+              :icon="faChevronDown"
+              :size="iconSize"
+              :class="arrowClasses"
+            />
+          </div>
         </AntSelectMenu>
       </div>