@antify/ui-module 1.7.2 → 1.7.3

package/dist/runtime/components/table/AntTable.vue

@@ -27,7 +27,7 @@ const props = withDefaults(
     loading?: boolean;
     selectableRows?: boolean;
     showLightVersion?: boolean;
-    size: AntTableSize
+    size?: AntTableSize
   }>(), {
     rowKey: 'id',
     loading: false,
@@ -96,7 +96,7 @@ function rowClick(elem: Record<string, unknown>): void {
         class="min-w-full max-h-full relative"
         :class="{'h-full': data.length === 0 && !_loading}"
       >
-        <thead class="bg-neutral-100 sticky top-0 z-10">
+        <thead class="bg-neutral-200 sticky top-0 z-10">
           <tr>
             <slot name="headerFirstCell" />
 
@@ -129,7 +129,7 @@ function rowClick(elem: Record<string, unknown>): void {
             :key="`table-row-${elem[rowKey]}-${index}`"
             class="transition-all"
             :class="{
-              'bg-primary-300 text-primary-300-font': elem === selected,
+              'bg-primary-200 text-primary-200-font': elem === selected,
               'bg-white text-for-white-bg-font': elem !== selected && index % 2 === 0,
               'bg-neutral-100 text-neutral-100-font': elem !== selected && index % 2 !== 0,
               'cursor-pointer': selectableRows

package/dist/runtime/components/table/AntTableSortButton.vue

@@ -10,7 +10,7 @@ defineEmits(['sortClick']);
 const props = withDefaults(
   defineProps<{
     sortDirection?: AntTableSortDirection
-    size: AntTableSize
+    size?: AntTableSize
   }>(), {
     sortDirection: AntTableSortDirection.neutral,
     size: AntTableSize.md

package/dist/runtime/components/table/AntTd.vue

@@ -10,7 +10,7 @@ const props =
       element: Record<string, unknown>;
       header: TableHeader;
       align?: AntTableAlign
-      size: AntTableSize
+      size?: AntTableSize
     }>(), {
       align: AntTableAlign.left,
       size: AntTableSize.md

package/dist/runtime/components/table/AntTh.vue

@@ -5,14 +5,18 @@ import {computed, ref, type Ref} from 'vue';
 import AntTableSortButton from './AntTableSortButton.vue';
 
 defineEmits([ 'sort' ]);
-const props = defineProps<{
-  header: TableHeader
-	size: AntTableSize
-}>();
+const props = withDefaults(
+  defineProps<{
+    header: TableHeader
+    size?: AntTableSize
+  }>(), {
+    size: AntTableSize.md
+  }
+);
 
 const headerClasses = computed(() => ({
     [props.header.headerClassList || '']: true,
-    'text-sm text-neutral-100-font uppercase font-semi-bold': true,
+    'text-sm text-neutral-200-font uppercase font-semi-bold': true,
     'text-left': !props.header.align || props.header.align === AntTableAlign.left,
     'text-center': props.header.align === AntTableAlign.center,
     'text-right': props.header.align === AntTableAlign.right,

package/dist/types.d.mts

@@ -5,4 +5,4 @@ import type {  } from './module.js'
 
 
 
-export type { AntCheckboxSize, AntCheckboxType, AntDateInputTypes, AntKeycapSize, AntRadioSize, AntRadioTypes, AntSpinnerSize, AntTableAlign, AntTableRowTypes, AntTableSize, AntTableSortDirection, AntTagInputSize, AntTagSize, BaseInputType, ButtonType, CollapseStrategy, CornerPosition, Direction, Grouped, IconSize, InputState, ListGroupItemState, NavbarItemTypes, Position, SelectOption, Size, State, SwitcherOption, TabItem, TabItemState, TableHeader, TagState, TextInputType, Toast, default } from './module.js'
+export type { AntCheckboxType, AntDateInputTypes, AntKeycapSize, AntRadioTypes, AntSpinnerSize, AntTableAlign, AntTableRowTypes, AntTableSize, AntTableSortDirection, AntTagInputSize, AntTagSize, BaseInputType, ButtonType, CollapseStrategy, CornerPosition, Direction, Grouped, IconSize, InputState, ListGroupItemState, NavbarItemTypes, Position, SelectOption, Size, State, SwitcherOption, TabItem, TabItemState, TableHeader, TagState, TextInputType, Toast, default } from './module.js'

package/dist/types.d.ts

@@ -5,4 +5,4 @@ import type {  } from './module'
 
 
 
-export type { AntCheckboxSize, AntCheckboxType, AntDateInputTypes, AntKeycapSize, AntRadioSize, AntRadioTypes, AntSpinnerSize, AntTableAlign, AntTableRowTypes, AntTableSize, AntTableSortDirection, AntTagInputSize, AntTagSize, BaseInputType, ButtonType, CollapseStrategy, CornerPosition, Direction, Grouped, IconSize, InputState, ListGroupItemState, NavbarItemTypes, Position, SelectOption, Size, State, SwitcherOption, TabItem, TabItemState, TableHeader, TagState, TextInputType, Toast, default } from './module'
+export type { AntCheckboxType, AntDateInputTypes, AntKeycapSize, AntRadioTypes, AntSpinnerSize, AntTableAlign, AntTableRowTypes, AntTableSize, AntTableSortDirection, AntTagInputSize, AntTagSize, BaseInputType, ButtonType, CollapseStrategy, CornerPosition, Direction, Grouped, IconSize, InputState, ListGroupItemState, NavbarItemTypes, Position, SelectOption, Size, State, SwitcherOption, TabItem, TabItemState, TableHeader, TagState, TextInputType, Toast, default } from './module'

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@antify/ui-module",
   "private": false,
-  "version": "1.7.2",
+  "version": "1.7.3",
   "license": "MIT",
   "type": "module",
   "exports": {

package/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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/src/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"