@antify/ui-module 1.7.2 → 1.7.3

package/dist/module.d.mts

@@ -129,10 +129,6 @@ type AntCheckboxType = {
     disabled?: boolean;
     readonly?: boolean;
 };
-declare enum AntCheckboxSize {
-    md = "md",
-    sm = "sm"
-}
 
 declare enum AntDateInputTypes {
     date = "date",
@@ -142,10 +138,6 @@ declare enum AntDateInputTypes {
     week = "week"
 }
 
-declare enum AntRadioSize {
-    md = "md",
-    sm = "sm"
-}
 type AntRadioTypes = {
     value: string;
     label?: string;
@@ -261,4 +253,4 @@ declare enum TabItemState {
 type ModuleOptions = {};
 declare const module: NuxtModule<ModuleOptions>;
 
-export { AntCheckboxSize, type AntCheckboxType, AntDateInputTypes, AntKeycapSize, AntRadioSize, type AntRadioTypes, AntSpinnerSize, AntTableAlign, AntTableRowTypes, AntTableSize, AntTableSortDirection, AntTagInputSize, AntTagSize, BaseInputType, ButtonType, CollapseStrategy, CornerPosition, Direction, Grouped, IconSize, InputState, ListGroupItemState, type NavbarItemTypes, Position, type SelectOption, Size, State, type SwitcherOption, type TabItem, TabItemState, type TableHeader, TagState, TextInputType, type Toast, module as default };
+export { type AntCheckboxType, AntDateInputTypes, AntKeycapSize, type AntRadioTypes, AntSpinnerSize, AntTableAlign, AntTableRowTypes, AntTableSize, AntTableSortDirection, AntTagInputSize, AntTagSize, BaseInputType, ButtonType, CollapseStrategy, CornerPosition, Direction, Grouped, IconSize, InputState, ListGroupItemState, type NavbarItemTypes, Position, type SelectOption, Size, State, type SwitcherOption, type TabItem, TabItemState, type TableHeader, TagState, TextInputType, type Toast, module as default };

package/dist/module.d.ts

@@ -129,10 +129,6 @@ type AntCheckboxType = {
     disabled?: boolean;
     readonly?: boolean;
 };
-declare enum AntCheckboxSize {
-    md = "md",
-    sm = "sm"
-}
 
 declare enum AntDateInputTypes {
     date = "date",
@@ -142,10 +138,6 @@ declare enum AntDateInputTypes {
     week = "week"
 }
 
-declare enum AntRadioSize {
-    md = "md",
-    sm = "sm"
-}
 type AntRadioTypes = {
     value: string;
     label?: string;
@@ -261,4 +253,4 @@ declare enum TabItemState {
 type ModuleOptions = {};
 declare const module: NuxtModule<ModuleOptions>;
 
-export { AntCheckboxSize, type AntCheckboxType, AntDateInputTypes, AntKeycapSize, AntRadioSize, type AntRadioTypes, AntSpinnerSize, AntTableAlign, AntTableRowTypes, AntTableSize, AntTableSortDirection, AntTagInputSize, AntTagSize, BaseInputType, ButtonType, CollapseStrategy, CornerPosition, Direction, Grouped, IconSize, InputState, ListGroupItemState, type NavbarItemTypes, Position, type SelectOption, Size, State, type SwitcherOption, type TabItem, TabItemState, type TableHeader, TagState, TextInputType, type Toast, module as default };
+export { type AntCheckboxType, AntDateInputTypes, AntKeycapSize, type AntRadioTypes, AntSpinnerSize, AntTableAlign, AntTableRowTypes, AntTableSize, AntTableSortDirection, AntTagInputSize, AntTagSize, BaseInputType, ButtonType, CollapseStrategy, CornerPosition, Direction, Grouped, IconSize, InputState, ListGroupItemState, type NavbarItemTypes, Position, type SelectOption, Size, State, type SwitcherOption, type TabItem, TabItemState, type TableHeader, TagState, TextInputType, type Toast, module as default };

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "ui-module",
   "configKey": "uiModule",
-  "version": "1.7.2"
+  "version": "1.7.3"
 }

package/dist/module.mjs

@@ -333,12 +333,6 @@ var ButtonType = /* @__PURE__ */ ((ButtonType2) => {
   return ButtonType2;
 })(ButtonType || {});
 
-var AntCheckboxSize = /* @__PURE__ */ ((AntCheckboxSize2) => {
-  AntCheckboxSize2["md"] = "md";
-  AntCheckboxSize2["sm"] = "sm";
-  return AntCheckboxSize2;
-})(AntCheckboxSize || {});
-
 var AntDateInputTypes = /* @__PURE__ */ ((AntDateInputTypes2) => {
   AntDateInputTypes2["date"] = "date";
   AntDateInputTypes2["datetimeLocal"] = "datetime-local";
@@ -348,12 +342,6 @@ var AntDateInputTypes = /* @__PURE__ */ ((AntDateInputTypes2) => {
   return AntDateInputTypes2;
 })(AntDateInputTypes || {});
 
-var AntRadioSize = /* @__PURE__ */ ((AntRadioSize2) => {
-  AntRadioSize2["md"] = "md";
-  AntRadioSize2["sm"] = "sm";
-  return AntRadioSize2;
-})(AntRadioSize || {});
-
 var AntTagInputSize = /* @__PURE__ */ ((AntTagInputSize2) => {
   AntTagInputSize2["lg"] = "lg";
   AntTagInputSize2["md"] = "md";
@@ -447,4 +435,4 @@ const module = defineNuxtModule({
   }
 });
 
-export { AntCheckboxSize, AntDateInputTypes, AntKeycapSize, AntRadioSize, AntSpinnerSize, AntTableAlign, AntTableRowTypes, AntTableSize, AntTableSortDirection, AntTagInputSize, AntTagSize, BaseInputType, ButtonType, CollapseStrategy, CornerPosition, Direction, Grouped, IconSize, InputState, ListGroupItemState, Position, Size, State, TabItemState, TagState, TextInputType, module as default };
+export { AntDateInputTypes, AntKeycapSize, AntSpinnerSize, AntTableAlign, AntTableRowTypes, AntTableSize, AntTableSortDirection, AntTagInputSize, AntTagSize, BaseInputType, ButtonType, CollapseStrategy, CornerPosition, Direction, Grouped, IconSize, InputState, ListGroupItemState, Position, Size, State, TabItemState, TagState, TextInputType, module as default };

package/dist/runtime/components/crud/AntCrudDetailNav.vue

@@ -28,7 +28,7 @@ const dialogOpen = ref(false);
 
 <template>
   <div
-    class="flex justify-between items-stretch gap-2 bg-white"
+    class="flex justify-between items-stretch gap-2 bg-white h-[52px]"
     data-e2e="crud-detail-nav"
   >
     <slot name="tabs">

package/dist/runtime/components/dialogs/AntDialog.vue

@@ -101,7 +101,7 @@ function confirmDialog() {
             </slot>
           </div>
 
-          <div class="bg-white p-2 grow flex items-center gap-2 text-sm text-for-white-bg-font">
+          <div class="bg-white p-2 grow flex items-start gap-2 text-sm text-for-white-bg-font">
             <slot name="icon">
               <AntIcon
                 v-if="icons[state]"

package/dist/runtime/components/forms/AntField.vue

@@ -45,13 +45,13 @@ const fieldClasses = computed(() => ({
   'w-full': props.expanded,
   '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.5': (props.size === Size.sm || props.size === Size.xs),
   'gap-1': props.size === Size.xs2,
 }));
 const descriptionClasses = computed(() => ({
   '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.5': (props.size === Size.sm || props.size === Size.xs),
   'gap-1': props.size === Size.xs2,
 }));
 </script>
@@ -63,7 +63,7 @@ const descriptionClasses = computed(() => ({
   >
     <AntInputLabel
       :label="label"
-      :size="fontSize"
+      :size="size"
       :skeleton="skeleton"
       :for="labelFor"
       @click-content="$emit('clickLabel')"

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

@@ -136,7 +136,7 @@ function onBlur(e: FocusEvent) {
 <template>
   <AntField
     :label="label"
-    :size="fieldSize"
+    :size="size"
     :description="description"
     :skeleton="skeleton"
     :state="state"