@antify/ui-module 1.7.1 → 1.7.2

package/dist/runtime/components/inputs/Elements/__stories/AntInputLabel.stories.mjs

@@ -37,7 +37,7 @@ export const WithContent = {
     setup() {
       return { args };
     },
-    template: '<div class="p-4"><AntInputLabel v-bind="args"><AntBaseInput value="Example"></AntBaseInput></AntInputLabel></div>'
+    template: '<div class="p-4"><AntInputLabel v-bind="args"><AntBaseInput value="Example" :size="args.size"></AntBaseInput></AntInputLabel></div>'
   }),
   args: {
     ...Docs.args,

package/dist/runtime/components/inputs/__stories/AntSwitch.stories.mjs

@@ -2,7 +2,7 @@ import AntSwitch from "../AntSwitch.vue";
 import { computed, reactive, ref } from "vue";
 import { InputState } from "../../../enums/index.mjs";
 import { useFieldValidator } from "@antify/validate";
-import { AntSwitchSize } from "../__types/AntSwitch.types.mjs";
+import { Size } from "../../../enums/Size.enum.mjs";
 import AntFormGroup from "../../forms/AntFormGroup.vue";
 import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
 const meta = {
@@ -15,7 +15,7 @@ const meta = {
     },
     size: {
       control: { type: "select" },
-      options: Object.values(AntSwitchSize)
+      options: Object.values(Size)
     }
   }
 };
@@ -78,7 +78,7 @@ export const Summary = {
     setup() {
       const value = ref(true);
       const notValue = ref(false);
-      return { args, value, notValue, InputState, AntSwitchSize };
+      return { args, value, notValue, InputState, Size };
     },
     template: `
       <AntFormGroup>
@@ -163,7 +163,7 @@ export const Summary = {
           <AntSwitch
             v-model="notValue"
             class="w-28"
-            :size="AntSwitchSize.md"
+            :size="Size.lg"
             label="Label"
             description="Lorem ipsum dolor sit amet"
           >Content
@@ -171,7 +171,7 @@ export const Summary = {
           <AntSwitch
             v-model="value"
             class="w-28"
-            :size="AntSwitchSize.md"
+            :size="Size.lg"
             label="Label"
             description="Lorem ipsum dolor sit amet"
           >Content
@@ -179,7 +179,7 @@ export const Summary = {
           <AntSwitch
             v-model="notValue"
             class="w-28"
-            :size="AntSwitchSize.sm"
+            :size="Size.md"
             label="Label"
             description="Lorem ipsum dolor sit amet"
           >Content
@@ -187,7 +187,55 @@ export const Summary = {
           <AntSwitch
             v-model="value"
             class="w-28"
-            :size="AntSwitchSize.sm"
+            :size="Size.md"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          >Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="notValue"
+            class="w-28"
+            :size="Size.sm"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          >Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="value"
+            class="w-28"
+            :size="Size.sm"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          >Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="notValue"
+            class="w-28"
+            :size="Size.xs"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          >Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="value"
+            class="w-28"
+            :size="Size.xs"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          >Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="notValue"
+            class="w-28"
+            :size="Size.xs2"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          >Content
+          </AntSwitch>
+          <AntSwitch
+            v-model="value"
+            class="w-28"
+            :size="Size.xs2"
             label="Label"
             description="Lorem ipsum dolor sit amet"
           >Content

package/dist/runtime/components/inputs/__types/index.d.ts

@@ -2,7 +2,6 @@ export * from './AntCheckbox.types';
 export * from './AntDateInput.types';
 export * from './AntRadio.types';
 export * from './AntSelect.types';
-export * from './AntSwitch.types';
 export * from './AntSwitcher.types';
 export * from './AntTagInput.types';
 export * from './AntTextInput.types';

package/dist/runtime/components/inputs/__types/index.mjs

@@ -2,7 +2,6 @@ export * from "./AntCheckbox.types.mjs";
 export * from "./AntDateInput.types.mjs";
 export * from "./AntRadio.types.mjs";
 export * from "./AntSelect.types.mjs";
-export * from "./AntSwitch.types.mjs";
 export * from "./AntSwitcher.types.mjs";
 export * from "./AntTagInput.types.mjs";
 export * from "./AntTextInput.types.mjs";

package/dist/types.d.mts

@@ -5,4 +5,4 @@ import type {  } from './module.js'
 
 
 
-export type { AntCheckboxSize, AntCheckboxType, AntDateInputTypes, AntKeycapSize, AntRadioSize, AntRadioTypes, AntSpinnerSize, AntSwitchSize, 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 { 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'

package/dist/types.d.ts

@@ -5,4 +5,4 @@ import type {  } from './module'
 
 
 
-export type { AntCheckboxSize, AntCheckboxType, AntDateInputTypes, AntKeycapSize, AntRadioSize, AntRadioTypes, AntSpinnerSize, AntSwitchSize, 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 { 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'

package/package.json

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

package/src/runtime/components/AntTooltip.vue

@@ -6,104 +6,110 @@ import {classesToObjectSyntax} from '../utils';
 import {hasSlotContent} from '../utils';
 
 const props = withDefaults(defineProps<{
-	position?: Position
-	tooltipClasses?: string | Record<string, boolean>
-	state?: InputState
-	expanded?: boolean
-	delay?: number
+  position?: Position
+  tooltipClasses?: string | Record<string, boolean>
+  state?: InputState
+  expanded?: boolean
+  delay?: number
 }>(), {
-	position: Position.left,
-	tooltipClasses: '',
-	state: InputState.base,
-	expanded: false,
-	delay: 800
+  position: Position.left,
+  tooltipClasses: '',
+  state: InputState.base,
+  expanded: false,
+  delay: 800
 });
 const visible = ref(false);
 const _tooltipClasses = computed(() => ({
-	'absolute w-max inline-flex': true,
-	// Position
-	'bottom-full pb-3.5': props.position === Position.top,
-	'top-full pt-3.5': props.position === Position.bottom,
-	'right-full pr-3.5': props.position === Position.left,
-	'left-full pl-3.5': props.position === Position.right,
-	...classesToObjectSyntax(props.tooltipClasses)
+  'absolute w-max inline-flex': true,
+  // Position
+  'bottom-full pb-3.5': props.position === Position.top,
+  'top-full pt-3.5': props.position === Position.bottom,
+  'right-full pr-3.5': props.position === Position.left,
+  'left-full pl-3.5': props.position === Position.right,
+  ...classesToObjectSyntax(props.tooltipClasses)
 }));
 const classes = computed(() => ({
-	'z-10 absolute flex': true,
-	'top-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.bottom,
-	'bottom-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.top,
-	'top-0 left-0 bottom-0 -ml-[2.2px] items-center': props.position === Position.right,
-	'top-0 right-0 bottom-0 -mr-[2.2px] items-center': props.position === Position.left,
+  'z-10 absolute flex': true,
+  'top-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.bottom,
+  'bottom-0 left-0 right-0 -m-[2px] justify-center': props.position === Position.top,
+  'top-0 left-0 bottom-0 -ml-[2.2px] items-center': props.position === Position.right,
+  'top-0 right-0 bottom-0 -mr-[2.2px] items-center': props.position === Position.left,
 }));
 const itemContainerClasses = computed(() => ({
-	'relative flex items-center': true,
-	'justify-center': props.position === Position.bottom,
-	'justify-center rotate-180': props.position === Position.top,
-	'justify-center -rotate-90': props.position === Position.right,
-	'justify-center rotate-90': props.position === Position.left,
+  'relative flex items-center': true,
+  'justify-center': props.position === Position.bottom,
+  'justify-center rotate-180': props.position === Position.top,
+  'justify-center -rotate-90': props.position === Position.right,
+  'justify-center rotate-90': props.position === Position.left,
 }));
 const contentClasses = computed(() => {
-	const variants: Record<InputState, string> = {
-		[InputState.base]: 'text-for-white-bg-font bg-white border-neutral-300',
-		[InputState.danger]: 'text-danger-500-font bg-danger-500 border-danger-500',
-		[InputState.info]: 'text-info-500-font bg-info-500 border-info-500',
-		[InputState.success]: 'text-success-500-font bg-success-500 border-success-500',
-		[InputState.warning]: 'text-warning-500-font bg-warning-500 border-warning-500',
-	};
-
-	return {[variants[props.state]]: true};
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'text-for-white-bg-font bg-white border-neutral-300',
+    [InputState.danger]: 'text-danger-500-font bg-danger-500 border-danger-500',
+    [InputState.info]: 'text-info-500-font bg-info-500 border-info-500',
+    [InputState.success]: 'text-success-500-font bg-success-500 border-success-500',
+    [InputState.warning]: 'text-warning-500-font bg-warning-500 border-warning-500',
+  };
+
+  return {[variants[props.state]]: true};
 });
 const svgPathClasses = computed(() => {
-	const variants: Record<InputState, string> = {
-		[InputState.base]: 'fill-white stroke-white',
-		[InputState.danger]: 'fill-danger-500 stroke-danger-500',
-		[InputState.info]: 'fill-info-500 stroke-info-500',
-		[InputState.success]: 'fill-success-500 stroke-success-500',
-		[InputState.warning]: 'fill-warning-500 stroke-warning-500',
-	};
-
-	return {[variants[props.state]]: true};
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'fill-white stroke-white',
+    [InputState.danger]: 'fill-danger-500 stroke-danger-500',
+    [InputState.info]: 'fill-info-500 stroke-info-500',
+    [InputState.success]: 'fill-success-500 stroke-success-500',
+    [InputState.warning]: 'fill-warning-500 stroke-warning-500',
+  };
+
+  return {[variants[props.state]]: true};
 });
 const arrowSvgPathClasses = computed(() => {
-	const variants: Record<InputState, string> = {
-		[InputState.base]: 'stroke-neutral-300',
-		[InputState.danger]: 'stroke-danger-500',
-		[InputState.info]: 'stroke-info-500',
-		[InputState.success]: 'stroke-success-500',
-		[InputState.warning]: 'stroke-warning-500',
-	};
-
-	return {[variants[props.state]]: true};
+  const variants: Record<InputState, string> = {
+    [InputState.base]: 'stroke-neutral-300',
+    [InputState.danger]: 'stroke-danger-500',
+    [InputState.info]: 'stroke-info-500',
+    [InputState.success]: 'stroke-success-500',
+    [InputState.warning]: 'stroke-warning-500',
+  };
+
+  return {[variants[props.state]]: true};
 });
 const timeout = ref<number | undefined>();
 const clickLock = ref(false);
 const uuid = ref(getCurrentInstance()?.uid);
 
 onMounted(() => {
-	handleEnumValidation(props.position, Position, 'Position');
-	handleEnumValidation(props.state, InputState, 'state');
+  handleEnumValidation(props.position, Position, 'position');
+  handleEnumValidation(props.state, InputState, 'state');
 });
 
 function onMouseOver() {
-	if (visible.value || clickLock.value) {
-		return;
-	}
+  if (visible.value || clickLock.value) {
+    return;
+  }
 
-	timeout.value = setTimeout(() => visible.value = true, props.delay) as unknown as number;
+  /**
+   * To prevent buggy behavior when hovering over multiple tooltips in quick succession,
+   * we clear the timeout before setting a new one.
+   */
+  clearTimeout(timeout.value);
+
+  timeout.value = setTimeout(() => visible.value = true, props.delay) as unknown as number;
 }
 
 function onMouseLeave() {
-	clearTimeout(timeout.value);
+  clearTimeout(timeout.value);
 
-	visible.value = false;
-	clickLock.value = false;
+  visible.value = false;
+  clickLock.value = false;
 }
 
 function onClick() {
-	clearTimeout(timeout.value);
+  clearTimeout(timeout.value);
 
-	visible.value = false;
-	clickLock.value = true;
+  visible.value = false;
+  clickLock.value = true;
 }
 </script>
 

package/src/runtime/components/buttons/AntActionButton.vue

@@ -11,25 +11,27 @@ import {hasSlotContent} from '../../utils';
 
 defineEmits(['click', 'blur']);
 const props = withDefaults(
-	defineProps<{
-		iconLeft?: IconDefinition;
-		iconRight?: IconDefinition;
-		size?: Size;
-		disabled?: boolean;
-		grouped?: Grouped;
-		state?: State;
-		skeleton?: boolean;
-		expanded?: boolean;
-		filled?: boolean;
-		hasPermission?: boolean;
-		tooltipPosition?: Position;
-		tooltipState?: InputState;
-		tooltipDelay?: number;
-	}>(), {
-		state: State.primary,
-		hasPermission: true,
-		filled: true
-	}
+  defineProps<{
+    iconLeft?: IconDefinition;
+    iconRight?: IconDefinition;
+    size?: Size;
+    disabled?: boolean;
+    grouped?: Grouped;
+    state?: State;
+    skeleton?: boolean;
+    expanded?: boolean;
+    filled?: boolean;
+    hasPermission?: boolean;
+    tooltipPosition?: Position;
+    tooltipState?: InputState;
+    tooltipDelay?: number;
+    submit?: boolean;
+  }>(), {
+    state: State.primary,
+    hasPermission: true,
+    filled: true,
+    submit: false
+  }
 );
 const slots = useSlots();
 const hasTooltip = computed(() => !props.skeleton && !props.disabled && props.hasPermission && hasSlotContent(slots['tooltipContent']));
@@ -50,6 +52,7 @@ const hasPermissionTooltip = computed(() => !props.skeleton && !props.disabled &
     :tooltip-position="tooltipPosition"
     :tooltip-state="hasPermissionTooltip ? InputState.info : tooltipState"
     :tooltip-delay="hasPermissionTooltip ? 300 : tooltipDelay"
+    :submit="submit"
     data-e2e="action-button"
     @click="$emit('click')"
     @blur="$emit('blur')"

package/src/runtime/components/buttons/AntSaveAndNewButton.vue

@@ -5,23 +5,23 @@ import {faFloppyDisk, faPlus} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
 withDefaults(defineProps<{
-	iconVariant?: boolean;
-	size?: Size;
-	disabled?: boolean;
-	grouped?: Grouped;
-	skeleton?: boolean;
-	expanded?: boolean;
-	canSave?: boolean;
-	tooltipPosition?: Position;
+  iconVariant?: boolean;
+  size?: Size;
+  disabled?: boolean;
+  grouped?: Grouped;
+  skeleton?: boolean;
+  expanded?: boolean;
+  canSave?: boolean;
+  tooltipPosition?: Position;
 }>(), {
-	iconVariant: false,
-	canSave: true
+  iconVariant: false,
+  canSave: true
 });
 </script>
 
 <template>
   <AntActionButton
-    :filled="false"
+    :filled="true"
     :state="State.primary"
     :size="size"
     :disabled="disabled"
@@ -30,6 +30,7 @@ withDefaults(defineProps<{
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
+    :submit="true"
     :has-permission="canSave"
     :tooltip-position="tooltipPosition"
     data-e2e="save-and-new-button"

package/src/runtime/components/buttons/AntSaveButton.vue

@@ -5,17 +5,17 @@ import {faFloppyDisk} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
 withDefaults(defineProps<{
-	iconVariant?: boolean;
-	size?: Size;
-	disabled?: boolean;
-	grouped?: Grouped;
-	skeleton?: boolean;
-	expanded?: boolean;
-	canSave?: boolean;
-	tooltipPosition?: Position;
+  iconVariant?: boolean;
+  size?: Size;
+  disabled?: boolean;
+  grouped?: Grouped;
+  skeleton?: boolean;
+  expanded?: boolean;
+  canSave?: boolean;
+  tooltipPosition?: Position;
 }>(), {
-	iconVariant: false,
-	canSave: true
+  iconVariant: false,
+  canSave: true
 });
 </script>
 
@@ -29,6 +29,7 @@ withDefaults(defineProps<{
     :grouped="grouped"
     :skeleton="skeleton"
     :expanded="expanded"
+    :submit="true"
     :has-permission="canSave"
     :tooltip-position="tooltipPosition"
     data-e2e="save-button"

package/src/runtime/components/crud/AntCrudDetailActions.vue

@@ -25,7 +25,7 @@ withDefaults(defineProps<{
       <slot name="buttons-left">
         <AntButton
           :outlined="false"
-          :filled="true"
+          :filled="false"
           :icon-left="faAngleLeft"
           :disabled="disabled"
           @click="$emit('back')"

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

@@ -13,9 +13,14 @@ withDefaults(defineProps<{
 	deleteButtonDisabled?: boolean
 	getEntityName: () => string
 	canDelete?: boolean
+  showDeleteButton?: boolean
+  skeleton?: boolean
 }>(), {
+  tabItems: () => [],
 	deleteButtonDisabled: false,
-	canDelete: true
+	canDelete: true,
+  showDeleteButton: true,
+  skeleton: false
 });
 
 const dialogOpen = ref(false);
@@ -37,7 +42,9 @@ const dialogOpen = ref(false);
         <slot name="before-delete-button" />
 
         <AntDeleteButton
+          v-if="showDeleteButton"
           :disabled="deleteButtonDisabled || !canDelete"
+          :skeleton="skeleton"
           filled
           :can-delete="canDelete"
           :invalid-permission-tooltip-position="Position.left"

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

@@ -41,12 +41,25 @@ const fontSize = computed(() => {
 
   return Size.sm;
 });
+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': 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': props.size === Size.xs2,
+}));
 </script>
 
 <template>
   <div
-    class="flex flex-col items-start gap-1.5"
-    :class="{'w-full': expanded}"
+    class="flex flex-col items-start"
+    :class="fieldClasses"
   >
     <AntInputLabel
       :label="label"
@@ -63,6 +76,7 @@ const fontSize = computed(() => {
     <div
       v-if="description || messages.length > 0 || (limiterMaxValue !== undefined && limiterValue !== undefined)"
       class="flex justify-between w-full"
+      :class="descriptionClasses"
     >
       <AntInputDescription
         v-if="description || messages.length > 0"

package/src/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;
+
 });
 
 /**
@@ -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 />