@antify/ui-module 1.7.1 → 1.7.2

package/dist/module.d.mts

@@ -160,11 +160,6 @@ type SelectOption = {
     value: string | number;
 };
 
-declare enum AntSwitchSize {
-    md = "md",
-    sm = "sm"
-}
-
 type SwitcherOption = {
     label: string;
     value: string | number;
@@ -266,4 +261,4 @@ declare enum TabItemState {
 type ModuleOptions = {};
 declare const module: NuxtModule<ModuleOptions>;
 
-export { AntCheckboxSize, type AntCheckboxType, AntDateInputTypes, AntKeycapSize, AntRadioSize, type AntRadioTypes, AntSpinnerSize, AntSwitchSize, 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 { 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 };

package/dist/module.d.ts

@@ -160,11 +160,6 @@ type SelectOption = {
     value: string | number;
 };
 
-declare enum AntSwitchSize {
-    md = "md",
-    sm = "sm"
-}
-
 type SwitcherOption = {
     label: string;
     value: string | number;
@@ -266,4 +261,4 @@ declare enum TabItemState {
 type ModuleOptions = {};
 declare const module: NuxtModule<ModuleOptions>;
 
-export { AntCheckboxSize, type AntCheckboxType, AntDateInputTypes, AntKeycapSize, AntRadioSize, type AntRadioTypes, AntSpinnerSize, AntSwitchSize, 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 { 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 };

package/dist/module.json

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

package/dist/module.mjs

@@ -354,12 +354,6 @@ var AntRadioSize = /* @__PURE__ */ ((AntRadioSize2) => {
   return AntRadioSize2;
 })(AntRadioSize || {});
 
-var AntSwitchSize = /* @__PURE__ */ ((AntSwitchSize2) => {
-  AntSwitchSize2["md"] = "md";
-  AntSwitchSize2["sm"] = "sm";
-  return AntSwitchSize2;
-})(AntSwitchSize || {});
-
 var AntTagInputSize = /* @__PURE__ */ ((AntTagInputSize2) => {
   AntTagInputSize2["lg"] = "lg";
   AntTagInputSize2["md"] = "md";
@@ -453,4 +447,4 @@ const module = defineNuxtModule({
   }
 });
 
-export { AntCheckboxSize, AntDateInputTypes, AntKeycapSize, AntRadioSize, AntSpinnerSize, AntSwitchSize, 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 { 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 };

package/dist/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/dist/runtime/components/__stories/AntTooltip.stories.d.ts

@@ -8,4 +8,9 @@ export declare const Docs: Story;
  * Make sure, no tooltip get shown if no content is provided.
  */
 export declare const WithoutContent: Story;
+/**
+ * Test multiple tooltips in one page to make sure that
+ * each tooltips delay does not bug with others.
+ */
+export declare const Multiple: Story;
 export declare const Summary: Story;

package/dist/runtime/components/__stories/AntTooltip.stories.mjs

@@ -100,6 +100,30 @@ export const WithoutContent = {
   },
   args: {}
 };
+export const Multiple = {
+  render: (args) => ({
+    components: { AntTooltip },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="p-12 flex flex-col justify-center items-center gap-1">
+        <div class="flex gap-1">
+          <div
+            v-for="row in 5"
+            class="flex flex-col gap-1"
+          >
+            <AntTooltip v-for="item of 5">
+              <div class="box">Hover me</div>
+
+              <template #content>Lorem</template>
+            </AntTooltip>
+          </div>
+        </div>
+      </div>
+		`
+  })
+};
 export const Summary = {
   render: (args) => ({
     components: {

package/dist/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/dist/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/dist/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/dist/runtime/components/buttons/__stories/AntActionButton.stories.mjs

@@ -25,6 +25,9 @@ const meta = {
     tooltipState: {
       control: { type: "select" },
       options: Object.values(InputState)
+    },
+    submit: {
+      description: 'Change the button type to type="submit"'
     }
   }
 };
@@ -35,11 +38,12 @@ export const Docs = {
     setup() {
       return { args };
     },
-    template: `<AntActionButton v-bind="args">
-			<template #default>Action Button</template>
-			<template #tooltipContent>This is an action button</template>
-			<template #invalidPermissionTooltipContent>You have no permission <br>to click this button</template>
-		</AntActionButton>`
+    template: `
+      <AntActionButton v-bind="args">
+        <template #default>Action Button</template>
+        <template #tooltipContent>This is an action button</template>
+        <template #invalidPermissionTooltipContent>You have no permission <br>to click this button</template>
+      </AntActionButton>`
   }),
   args: {
     tooltipPosition: Position.right

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

package/dist/runtime/components/inputs/Elements/AntInputLabel.vue

@@ -15,7 +15,7 @@ const props = withDefaults(defineProps<{
   size: Size.md,
 });
 
-const classes = computed(() => ({
+const fontClasses = computed(() => ({
   'relative font-medium w-fit text-for-white-bg-font': true,
   'text-2xs': props.size === Size.xs2,
   'text-xs': props.size === Size.xs,
@@ -23,6 +23,12 @@ const classes = computed(() => ({
   'text-md': props.size === Size.md,
   'text-lg': props.size === Size.lg
 }));
+const gapSize = 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,
+}));
 
 onMounted(() => {
   handleEnumValidation(props.size, Size, 'size');
@@ -31,11 +37,12 @@ onMounted(() => {
 
 <template>
   <label
-    class="flex flex-col gap-1.5 w-full"
+    class="flex flex-col w-full"
+    :class="gapSize"
   >
     <span
       v-if="label"
-      :class="classes"
+      :class="fontClasses"
     >
       <span
         :class="{'invisible': skeleton}"