@antify/ui-module 1.7.1 → 1.7.3

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/AntCheckbox.types.d.ts

@@ -4,7 +4,3 @@ export type AntCheckboxType = {
     disabled?: boolean;
     readonly?: boolean;
 };
-export declare enum AntCheckboxSize {
-    md = "md",
-    sm = "sm"
-}

package/dist/runtime/components/inputs/__types/AntCheckbox.types.mjs

@@ -1,5 +0,0 @@
-export var AntCheckboxSize = /* @__PURE__ */ ((AntCheckboxSize2) => {
-  AntCheckboxSize2["md"] = "md";
-  AntCheckboxSize2["sm"] = "sm";
-  return AntCheckboxSize2;
-})(AntCheckboxSize || {});

package/dist/runtime/components/inputs/__types/AntRadio.types.d.ts

@@ -1,8 +1,4 @@
 import { InputState } from '../../../enums';
-export declare enum AntRadioSize {
-    md = "md",
-    sm = "sm"
-}
 export type AntRadioTypes = {
     value: string;
     label?: string;

package/dist/runtime/components/inputs/__types/AntRadio.types.mjs

@@ -1,5 +0,0 @@
-export var AntRadioSize = /* @__PURE__ */ ((AntRadioSize2) => {
-  AntRadioSize2["md"] = "md";
-  AntRadioSize2["sm"] = "sm";
-  return AntRadioSize2;
-})(AntRadioSize || {});

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/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, 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 { 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, 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 { 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.1",
+  "version": "1.7.3",
   "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);
@@ -23,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">
@@ -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/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]"