@antify/ui-module 1.7.1 → 1.7.3

package/dist/runtime/components/inputs/AntCheckbox.vue

@@ -8,7 +8,6 @@ import {handleEnumValidation} from '../../handler';
 import {faCheck} from '@fortawesome/free-solid-svg-icons';
 import AntIcon from '../AntIcon.vue';
 import {IconSize} from '../__types';
-import {AntCheckboxSize} from './__types/AntCheckbox.types';
 
 const emit = defineEmits(['update:modelValue', 'update:skeleton', 'validate', 'blur']);
 const props =
@@ -18,14 +17,14 @@ const props =
       label?: string;
       description?: string;
       state?: InputState;
-      size?: AntCheckboxSize,
+      size?: Size,
       skeleton?: boolean;
       disabled?: boolean;
       readonly?: boolean;
       messages?: string[];
     }>(), {
       state: InputState.base,
-      size: AntCheckboxSize.md,
+      size: Size.md,
       skeleton: false,
       disabled: false,
       readonly: false,
@@ -63,12 +62,12 @@ const inputClasses = computed(() => {
     'focus:ring-offset-0': true,
     'invisible': props.skeleton,
     'cursor-pointer': !hasInputState.value,
-    'focus:ring-2': props.size === AntCheckboxSize.sm && !hasInputState.value,
-    'focus:ring-4': props.size === AntCheckboxSize.md && !hasInputState.value,
-    'h-5 w-5': props.size === AntCheckboxSize.md,
-    'h-4 w-4': props.size === AntCheckboxSize.sm,
+    'focus:ring-2': !hasInputState.value && (props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2),
+    'focus:ring-4': !hasInputState.value && (props.size === Size.lg || props.size === Size.md),
+    'h-5 w-5': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
+    'h-4 w-4': props.size === Size.xs || props.size === Size.xs2,
     'cursor-not-allowed opacity-50': props.disabled,
-    [focusColorVariant[props.state]]: hasInputState.value,
+    [focusColorVariant[props.state]]: !hasInputState.value,
     [activeColorVariant[props.state]]: delayedValue.value,
     [inactiveColorVariant[props.state]]: !_modelValue.value,
   };
@@ -77,15 +76,15 @@ const contentClasses = computed(() => ({
   'text-for-white-bg-font': true,
   'cursor-pointer': !hasInputState.value,
   'cursor-not-allowed opacity-50': props.disabled,
-  'text-sm': props.size === AntCheckboxSize.md,
-  'text-xs': props.size === AntCheckboxSize.sm
+  'text-sm': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
+  'text-xs': props.size === Size.xs || props.size === Size.xs2,
 }));
-const fieldSize = computed(() => {
-  if (props.size === AntCheckboxSize.md) {
-    return Size.sm;
+const itemSize = computed(() => {
+  if (props.size === Size.xs ||props.size === Size.xs2) {
+    return IconSize.xs;
+  } else {
+    return IconSize.sm;
   }
-
-  return Size.xs;
 });
 
 /**
@@ -116,7 +115,7 @@ function onBlur(e: FocusEvent) {
 }
 
 onMounted(() => {
-  handleEnumValidation(props.size, AntCheckboxSize, 'size');
+  handleEnumValidation(props.size, Size, 'size');
   handleEnumValidation(props.state, InputState, 'state');
 
   if (!props.skeleton && props.modelValue !== null) {
@@ -131,7 +130,7 @@ onMounted(() => {
     :description="description"
     :skeleton="skeleton"
     :state="state"
-    :size="fieldSize"
+    :size="size"
     :expanded="false"
     :messages="messages"
   >
@@ -150,7 +149,7 @@ onMounted(() => {
           v-if="_modelValue"
           :icon="faCheck"
           class="absolute !text-white pointer-events-none"
-          :size="size === AntCheckboxSize.md ? IconSize.sm : IconSize.xs"
+          :size="itemSize"
         />
 
         <AntSkeleton
@@ -162,7 +161,7 @@ onMounted(() => {
 
       <div
         class="relative flex items-center"
-        :class="props.size === AntCheckboxSize.md ? 'h-5' : 'h-4'"
+        :class="props.size === Size.md ? 'h-5' : 'h-4'"
       >
         <span :class="contentClasses">
           <slot />

package/dist/runtime/components/inputs/AntCheckboxGroup.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {type AntCheckboxType, AntCheckboxSize} from './__types/AntCheckbox.types';
+import {type AntCheckboxType} from './__types/AntCheckbox.types';
 import {AntField} from './Elements';
 import {useVModel} from '@vueuse/core';
 import AntCheckbox from './AntCheckbox.vue';
@@ -16,7 +16,7 @@ const props = withDefaults(
     description?: string;
     direction?: Direction;
     state?: InputState;
-    size?: AntCheckboxSize,
+    size?: Size,
     skeleton?: boolean;
     readonly?: boolean;
     disabled?: boolean;
@@ -25,7 +25,7 @@ const props = withDefaults(
   {
     direction: Direction.column,
     state: InputState.base,
-    size: AntCheckboxSize.md,
+    size: Size.md,
     skeleton: false,
     readonly: false,
     disabled: false,
@@ -90,7 +90,7 @@ onMounted(() => {
     :description="description"
     :skeleton="skeleton"
     :state="state"
-    :size="size as unknown as Size"
+    :size="size"
     :messages="messages"
     label-for="noop"
   >

package/dist/runtime/components/inputs/AntDateInput.vue

@@ -22,12 +22,14 @@ const props = withDefaults(defineProps<{
   type?: AntDateInputTypes;
   state?: InputState;
   disabled?: boolean;
+  readonly?: boolean;
   skeleton?: boolean;
   messages?: string[];
 }>(), {
   state: InputState.base,
   type: AntDateInputTypes.date,
   disabled: false,
+  readonly: false,
   skeleton: false,
   size: Size.md,
   messages: () => []
@@ -58,7 +60,11 @@ onMounted(() => {
 });
 
 function onClickCalendar() {
-  inputRef.value?.showPicker();
+  if (!props.disabled && !props.readonly) {
+    inputRef.value?.showPicker();
+  } else {
+    return;
+  }
 }
 </script>
 
@@ -79,6 +85,7 @@ function onClickCalendar() {
       :size="size"
       :skeleton="skeleton"
       :disabled="disabled"
+      :readonly="readonly"
       :show-icon="false"
       v-bind="$attrs"
       @validate="val => $emit('validate', val)"

package/dist/runtime/components/inputs/AntNumberInput.vue

@@ -21,6 +21,7 @@ const props = withDefaults(defineProps<{
   size?: Size;
   state?: InputState;
   disabled?: boolean;
+  readonly?: boolean;
   skeleton?: boolean;
   steps?: number;
   min?: number;
@@ -31,6 +32,7 @@ const props = withDefaults(defineProps<{
 }>(), {
   state: InputState.base,
   disabled: false,
+  readonly: false,
   skeleton: false,
   size: Size.md,
   steps: 1,
@@ -115,6 +117,7 @@ function onButtonBlur() {
         :size="size"
         :skeleton="skeleton"
         :disabled="isPrevButtonDisabled"
+        :readonly="readonly"
         @click="subtract"
         @blur="onButtonBlur"
       />
@@ -130,6 +133,7 @@ function onButtonBlur() {
         :min="min"
         :max="max"
         :disabled="disabled"
+        :readonly="readonly"
         :placeholder="placeholder || label"
         :show-icon="false"
         v-bind="$attrs"
@@ -144,6 +148,7 @@ function onButtonBlur() {
         :size="size"
         :skeleton="skeleton"
         :disabled="isNextButtonDisabled"
+        :readonly="readonly"
         @click="add"
         @blur="onButtonBlur"
       />

package/dist/runtime/components/inputs/AntRadio.vue

@@ -3,7 +3,7 @@ import {AntField} from './Elements';
 import {InputState, Size} from '../../enums';
 import AntSkeleton from '../AntSkeleton.vue';
 import {computed, onMounted, watch} from 'vue';
-import {AntRadioSize, type AntRadioTypes} from './__types/AntRadio.types';
+import {type AntRadioTypes} from './__types/AntRadio.types';
 import {handleEnumValidation} from '../../handler';
 
 defineOptions({inheritAttrs: false});
@@ -16,13 +16,13 @@ const props = withDefaults(
     description?: string;
     skeleton?: boolean;
     state?: InputState;
-    size?: AntRadioSize
+    size?: Size;
     readonly?: boolean;
     disabled?: boolean;
     messages?: string[];
   }>(), {
     state: InputState.base,
-    size: AntRadioSize.md,
+    size: Size.md,
     readonly: false,
     disabled: false,
     messages: () => []
@@ -45,16 +45,16 @@ const inputClasses = computed(() => {
     'flex items-center justify-center rounded-full appearance-none': true,
     'cursor-pointer': !hasInputState.value,
     'rounded-full transition-colors ease-in-out duration-200 disabled:opacity-50': true,
-    'focus:ring-2': props.size === AntRadioSize.sm && !hasInputState.value,
-    'focus:ring-4': props.size === AntRadioSize.md && !hasInputState.value,
+    'focus:ring-2': !hasInputState.value && (props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2),
+    'focus:ring-4': !hasInputState.value && (props.size === Size.lg || props.size === Size.md),
     'outline-neutral-300': props.state === InputState.base,
     'outline-primary-500': props.state === InputState.base && isActive.value,
     'outline-info-500': props.state === InputState.info,
     'outline-success-500': props.state === InputState.success,
     'outline-warning-500': props.state === InputState.warning,
     'outline-danger-500': props.state === InputState.danger,
-    'h-4 w-4 small': props.size === AntRadioSize.sm,
-    'h-5 w-5': props.size === AntRadioSize.md,
+    'h-4 w-4 small': props.size === Size.xs || props.size === Size.xs2,
+    'h-5 w-5': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
   };
 
   const focusColorVariant = {
@@ -73,30 +73,41 @@ const valueClass = computed(() => ({
   'relative w-fit full-height text-for-white-bg-font': true,
   'cursor-pointer': !hasInputState.value,
   'cursor-not-allowed opacity-50': props.disabled,
-  'text-sm': props.size === AntRadioSize.md,
-  'text-xs': props.size === AntRadioSize.sm
+  'text-sm': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
+  'text-xs': props.size === Size.xs || props.size === Size.xs2,
 }));
-const fieldSize = computed(() => {
-  if (props.size === AntRadioSize.md) {
-    return Size.sm;
-  } else {
-    return Size.xs;
+const gapSize = computed(() => {
+  switch (props.size) {
+    case Size.lg:
+      return 'gap-2.5';
+    case Size.md:
+      return 'gap-2';
+    case Size.sm:
+      return 'gap-1.5';
+    case Size.xs:
+      return 'gap-1.5';
+    default:
+      return 'gap-1';
   }
 });
-const innerRadioColor = computed(() => {
-  switch (props.state) {
-    case InputState.info:
-      return 'bg-info-500';
-    case InputState.success:
-      return 'bg-success-500';
-    case InputState.warning:
-      return 'bg-warning-500';
-    case InputState.danger:
-      return 'bg-danger-500';
-    default:
-      return 'bg-primary-500';
+const valueSize = computed(() => {
+  if (props.size === Size.xs || props.size === Size.xs2) {
+    return 'h-4';
+  } else {
+    return 'h-5';
   }
 });
+const innerRadioClass = computed(() => (
+  {
+    'bg-primary-500': props.state === InputState.base,
+    'bg-info-500': props.state === InputState.info,
+    'bg-success-500': props.state === InputState.success,
+    'bg-warning-500': props.state === InputState.warning,
+    'bg-danger-500': props.state === InputState.danger,
+    'h-3 w-3': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
+    'h-2 w-2': props.size === Size.xs || props.size === Size.xs2,
+  }
+));
 
 /**
  * Validate default value if given after delayed data fetching.
@@ -136,18 +147,21 @@ onMounted(() => {
     :state="state"
     class="cursor-pointer"
     :skeleton="skeleton"
-    :size="fieldSize"
+    :size="size"
     :expanded="false"
     :messages="messages"
   >
-    <div class="flex items-center gap-1.5">
+    <div
+      class="flex items-center"
+      :class="gapSize"
+    >
       <div class="relative full-height flex items-center">
         <div class="absolute flex items-center justify-center w-full h-full">
           <Transition name="fade-radio">
             <div
               v-if="isActive"
-              class="w-3 h-3 rounded-full transition-all"
-              :class="innerRadioColor"
+              class="rounded-full transition-all"
+              :class="innerRadioClass"
             />
           </Transition>
         </div>
@@ -171,7 +185,7 @@ onMounted(() => {
 
       <div
         class="relative flex items-center"
-        :class="props.size === AntRadioSize.md ? 'h-5' : 'h-4'"
+        :class="valueSize"
       >
         <span :class="valueClass">
           {{ value.label }}

package/dist/runtime/components/inputs/AntRadioGroup.vue

@@ -2,7 +2,7 @@
 import AntRadio from './AntRadio.vue';
 import {useVModel} from '@vueuse/core';
 import {AntField} from './Elements';
-import {type AntRadioTypes, AntRadioSize} from './__types/AntRadio.types';
+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';
@@ -19,7 +19,7 @@ const props = withDefaults(
     description?: string;
     direction?: Direction;
     state?: InputState;
-    size?: AntRadioSize;
+    size?: Size;
     skeleton?: boolean;
     disabled?: boolean;
     readonly?: boolean;
@@ -27,7 +27,7 @@ const props = withDefaults(
   }>(), {
     direction: Direction.column,
     state: InputState.base,
-    size: AntRadioSize.md,
+    size: Size.md,
     skeleton: false,
     disabled: false,
     readonly: false,
@@ -35,17 +35,28 @@ const props = withDefaults(
   });
 const _modelValue = useVModel(props, 'modelValue', emit);
 const containerClasses = computed(() => ({
-  'flex gap-2.5 justify-start': true,
+  'flex justify-start': true,
   'flex-row': props.direction === Direction.row,
   'flex-col': props.direction === Direction.column,
+  'gap-2.5': props.size === Size.lg,
+  'gap-2': props.size === Size.md,
+  'gap-1.5': props.size === Size.sm || props.size === Size.xs,
+  'gap-1': props.size === Size.xs2,
 }));
 const containerRef = ref<null | HTMLElement>(null);
 const fieldSize = computed(() => {
-  if (props.size === AntRadioSize.md) {
-    return Size.sm;
+  switch (props.size) {
+    case Size.lg:
+      return Size.lg;
+    case Size.md:
+      return Size.md;
+    case Size.sm:
+      return Size.sm;
+    case Size.xs:
+      return Size.xs;
+    default:
+      return Size.xs2;
   }
-
-  return Size.xs;
 });
 
 watch(_modelValue, (val) => {

package/dist/runtime/components/inputs/AntSearch.vue

@@ -15,12 +15,14 @@ const props = withDefaults(defineProps<{
   description?: string;
   size?: Size;
   disabled?: boolean;
+  readonly?: boolean;
   skeleton?: boolean;
   inputTimeout?: number;
   query?: string;
 }>(), {
   disabled: false,
   skeleton: false,
+  readonly: false,
   size: Size.md,
   inputTimeout: 300,
   placeholder: 'Search'
@@ -63,6 +65,7 @@ onMounted(() => handleEnumValidation(props.size, Size, 'size'));
       :size="size"
       :skeleton="skeleton"
       :disabled="disabled"
+      :readonly="readonly"
       :placeholder="placeholder"
       :icon-left="faSearch"
       nullable

package/dist/runtime/components/inputs/AntSelect.vue

@@ -39,6 +39,7 @@ const props = withDefaults(
       size?: Size;
       state?: InputState;
       disabled?: boolean;
+      readonly?: boolean;
       skeleton?: boolean;
       nullable?: boolean;
       grouped?: Grouped;
@@ -51,6 +52,7 @@ const props = withDefaults(
       grouped: Grouped.none,
       size: Size.md,
       disabled: false,
+      readonly: false,
       skeleton: false,
       nullable: false,
       expanded: true,
@@ -65,6 +67,7 @@ const _modelValue = computed({
     emit('update:modelValue', val);
   },
 });
+const hasInputState = computed(() => props.skeleton || props.readonly || props.disabled);
 const valueLabel = computed(() => props.options.find(option => option.value === _modelValue.value)?.label || null);
 const inputClasses = computed(() => {
   const variants: Record<InputState, string> = {
@@ -84,8 +87,13 @@ const inputClasses = computed(() => {
     // Disabled
     'disabled:opacity-50 disabled:cursor-not-allowed': true,
     // Size
-    'focus:ring-2 p-1.5 gap-1.5 text-sm': props.size === Size.sm,
-    'focus:ring-4 p-2 gap-2 text-sm': 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,
+    'focus:ring-2': !hasInputState.value && (props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2),
+    'focus:ring-4': !hasInputState.value && (props.size === Size.lg || props.size === Size.md),
     // Grouped
     'rounded-tl-md rounded-bl-md rounded-tr-none rounded-br-none': props.grouped === Grouped.left,
     'rounded-tl-none rounded-bl-none rounded-tr-md rounded-br-md': props.grouped === Grouped.right,
@@ -184,7 +192,7 @@ function onClickOutside() {
 function onClickSelectInput(e: MouseEvent) {
   e.preventDefault();
 
-  if (props.disabled) {
+  if (props.disabled || props.readonly) {
     return;
   }
 
@@ -221,7 +229,7 @@ function onClickRemoveButton() {
       <div
         v-on-click-outside="onClickOutside"
         class="relative w-full"
-        :class="{'cursor-pointer': !skeleton}"
+        :class="{'cursor-pointer': !skeleton && !readonly}"
       >
         <AntSkeleton
           v-if="skeleton"
@@ -240,7 +248,7 @@ function onClickRemoveButton() {
         <div
           ref="inputRef"
           :class="inputClasses"
-          :tabindex="disabled ? undefined : 0"
+          :tabindex="disabled || readonly ? -1 : 0"
           v-bind="$attrs"
           @mousedown="onClickSelectInput"
           @click="inputRef?.focus()"

package/dist/runtime/components/inputs/AntSwitch.vue

@@ -3,7 +3,6 @@ import AntField from '../forms/AntField.vue';
 import {computed, onMounted, watch} from 'vue';
 import AntSkeleton from '../AntSkeleton.vue';
 import {InputState, Size} from '../../enums';
-import {AntSwitchSize} from './__types/AntSwitch.types';
 import {hasSlotContent} from '../../utils';
 
 const emit = defineEmits(['update:modelValue', 'input', 'blur', 'validate']);
@@ -14,11 +13,11 @@ const props = withDefaults(defineProps<{
   skeleton?: boolean;
   readonly?: boolean;
   disabled?: boolean;
-  size?: AntSwitchSize;
+  size?: Size;
   state?: InputState
   messages?: string[]
 }>(), {
-  size: AntSwitchSize.md,
+  size: Size.md,
   state: InputState.base,
   messages: () => []
 });
@@ -35,10 +34,10 @@ const buttonClasses = computed(() => {
     'relative inline-flex flex-shrink-0': true,
     'focus:outline-none': true,
     'rounded-full ease-in-out duration-200': true,
-    'focus-within:ring-2': !hasInputState.value && props.size === AntSwitchSize.sm,
-    'focus-within:ring-4': !hasInputState.value && props.size === AntSwitchSize.md,
-    'h-4 w-[30px]': props.size === AntSwitchSize.sm,
-    'h-5 w-9': props.size === AntSwitchSize.md,
+    '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-neutral-300': !_value.value,
     'invisible': props.skeleton,
     // Disabled
@@ -67,27 +66,40 @@ const buttonClasses = computed(() => {
 });
 const ballClasses = computed(() => ({
   'pointer-events-none inline-block rounded-full bg-neutral-100 shadow transform ring-0 transition ease-in-out duration-200': true,
-  'h-4 w-4 translate-y-0.5': props.size === AntSwitchSize.md,
-  'h-3.5 w-3.5  translate-y-[1px]': props.size === AntSwitchSize.sm,
-  'translate-x-[1.125rem]': _value.value && props.size === AntSwitchSize.md,
-  'translate-x-0.5': !_value.value && props.size === AntSwitchSize.md,
-  'translate-x-[.925rem]': _value.value && props.size === AntSwitchSize.sm,
-  'translate-x-[1px]': !_value.value && props.size === AntSwitchSize.sm,
+  '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
 }));
 const valueClasses = computed(() => ({
   'text-for-white-bg-font': true,
-  'text-xs': props.size === AntSwitchSize.sm,
-  'text-sm': props.size === AntSwitchSize.md,
+  'text-sm': props.size === Size.lg || props.size === Size.md || props.size === Size.sm,
+  'text-xs': props.size === Size.xs || props.size === Size.xs2,
   'opacity-50 cursor-not-allowed': props.disabled,
   'cursor-pointer': !hasInputState.value,
 }));
 const fieldSize = computed(() => {
-  if (props.size === AntSwitchSize.md) {
+  if (props.size === Size.lg) {
+    return Size.lg;
+  }
+
+  if (props.size === Size.md) {
+    return Size.md;
+  }
+
+  if (props.size === Size.sm) {
     return Size.sm;
-  } else {
+  }
+
+  if (props.size === Size.xs) {
     return Size.xs;
   }
+
+  return Size.xs2;
+
 });
 
 /**
@@ -124,7 +136,7 @@ function onBlur(e: FocusEvent) {
 <template>
   <AntField
     :label="label"
-    :size="fieldSize"
+    :size="size"
     :description="description"
     :skeleton="skeleton"
     :state="state"
@@ -162,7 +174,7 @@ function onBlur(e: FocusEvent) {
       <div
         v-if="hasSlotContent($slots['default'])"
         class="relative flex items-center"
-        :class="props.size === AntSwitchSize.md ? 'h-5' : 'h-4'"
+        :class="props.size === Size.lg || props.size === Size.md ||props.size === Size.sm ? 'h-5' : 'h-4'"
       >
         <span :class="valueClasses">
           <slot />