@antify/ui-module 1.3.0 → 1.5.0

package/src/runtime/components/AntModal.vue

@@ -39,21 +39,22 @@ function closeModal() {
 </script>
 
 <template>
-  <transition name="fade">
+  <Transition name="fade">
     <div
       v-if="openBackground"
       class="absolute inset-0 flex items-center justify-center z-50 cursor-pointer overflow-hidden"
       :class="{'bg-black/50 backdrop-blur-sm': !fullscreen}"
       @click.self="closeModal"
     >
-      <transition :name="!fullscreen ? 'bounce' : 'bounce-slow'">
+      <Transition :name="!fullscreen ? 'bounce' : 'bounce-slow'">
         <div
           v-if="openModal"
           class="flex flex-col gap-px bg-neutral-300 overflow-hidden cursor-auto"
           :class="{'w-full h-full': fullscreen, 'border border-neutral-300 rounded-md shadow-md': !fullscreen}"
         >
           <div
-            class="bg-neutral-50 p-2.5 flex items-center justify-between text-neutral-50-font text-lg font-medium">
+            class="bg-white p-2.5 flex items-center justify-between text-for-white-bg-font text-lg font-medium"
+          >
             <slot name="title">
               {{ title }}
             </slot>
@@ -66,20 +67,20 @@ function closeModal() {
             />
           </div>
 
-          <div class="bg-neutral-50 p-2.5 grow overflow-y-auto">
-            <slot/>
+          <div class="bg-white p-2.5 grow overflow-y-auto">
+            <slot />
           </div>
 
           <div
             v-if="useSlots()['footer'] || false"
-            class="bg-neutral-50 p-2.5 text-neutral-50-font"
+            class="bg-white p-2.5 text-for-white-bg-font"
           >
-            <slot name="footer"/>
+            <slot name="footer" />
           </div>
         </div>
-      </transition>
+      </Transition>
     </div>
-  </transition>
+  </Transition>
 </template>
 
 <style scoped>

package/src/runtime/components/AntPopover.vue

@@ -44,9 +44,9 @@ onMounted(() => {
 
 <template>
   <div class="relative inline-flex justify-center items-end">
-    <slot/>
+    <slot />
 
-    <transition name="bounce">
+    <Transition name="bounce">
       <template v-if="showPopover">
         <div :class="_popoverClasses">
           <div class="shadow-lg border-neutral-300 rounded-md text-sm relative inline-flex flex-col relative">
@@ -66,12 +66,12 @@ onMounted(() => {
                 >
                   <path
                     d="M20.3284 1.82843L23.1569 4.65685C24.6571 6.15715 26.692 7 28.8137 7L6.18629 7C8.30802 7 10.3429 6.15715 11.8431 4.65686L14.6716 1.82843C16.2337 0.266331 18.7663 0.266328 20.3284 1.82843Z"
-                    :class="{'fill-neutral-100': position === Position.bottom, 'fill-neutral-50': position === Position.top || position === Position.right || position === Position.left}"
+                    :class="{'fill-neutral-100': position === Position.bottom, 'fill-white': position === Position.top || position === Position.right || position === Position.left}"
                   />
 
                   <path
                     d="M34.5 7L28.8137 7C26.692 7 24.6571 6.15715 23.1569 4.65685L20.3284 1.82843C18.7663 0.266328 16.2337 0.266331 14.6716 1.82843L11.8431 4.65686C10.3429 6.15715 8.30802 7 6.18629 7L0.5 7L34.5 7Z"
-                    :class="{'stroke-neutral-100': position === Position.bottom, 'stroke-neutral-50': position === Position.top || position === Position.right || position === Position.left}"
+                    :class="{'stroke-neutral-100': position === Position.bottom, 'stroke-white': position === Position.top || position === Position.right || position === Position.left}"
                   />
                 </svg>
 
@@ -92,18 +92,20 @@ onMounted(() => {
             </div>
 
             <div
-              class="border-neutral-300 border-b p-2.5 bg-neutral-100 rounded-t-md border-t border-l border-r text-neutral-100-font font-semibold">
+              class="border-neutral-300 border-b p-2.5 bg-neutral-100 rounded-t-md border-t border-l border-r text-neutral-100-font font-semibold"
+            >
               {{ title }}
             </div>
 
             <div
-              class="p-2.5 rounded-b-md text-neutral-50-font border-neutral-300 border-l border-b border-r bg-neutral-50">
-              <slot name="content"/>
+              class="p-2.5 rounded-b-md text-for-white-bg-font border-neutral-300 border-l border-b border-r bg-white"
+            >
+              <slot name="content" />
             </div>
           </div>
         </div>
       </template>
-    </transition>
+    </Transition>
   </div>
 </template>
 

package/src/runtime/components/AntTooltip.vue

@@ -3,78 +3,80 @@ import {computed, onMounted, ref} from 'vue';
 import {handleEnumValidation} from '../handler';
 import {InputColorType, Position} from '../enums';
 import {classesToObjectSyntax} from '../utils';
+import {hasSlotContent} from '../utils';
 
 const props = withDefaults(defineProps<{
-  content?: string,
-  position?: Position,
-  tooltipClasses?: string | Record<string, boolean>,
-  colorType?: InputColorType
+	position?: Position
+	tooltipClasses?: string | Record<string, boolean>
+	colorType?: InputColorType
+	expanded?: boolean
 }>(), {
-  position: Position.left,
-  tooltipClasses: '',
-  colorType: InputColorType.base
+	position: Position.left,
+	tooltipClasses: '',
+	colorType: InputColorType.base,
+	expanded: false
 });
 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<InputColorType, string> = {
-    [InputColorType.base]: 'text-neutral-50-font bg-neutral-50 border-neutral-300',
-    [InputColorType.danger]: 'text-danger-500-font bg-danger-500 border-danger-500',
-    [InputColorType.info]: 'text-info-500-font bg-info-500 border-info-500',
-    [InputColorType.success]: 'text-success-500-font bg-success-500 border-success-500',
-    [InputColorType.warning]: 'text-warning-500-font bg-warning-500 border-warning-500',
-  };
+	const variants: Record<InputColorType, string> = {
+		[InputColorType.base]: 'text-for-white-bg-font bg-white border-neutral-300',
+		[InputColorType.danger]: 'text-danger-500-font bg-danger-500 border-danger-500',
+		[InputColorType.info]: 'text-info-500-font bg-info-500 border-info-500',
+		[InputColorType.success]: 'text-success-500-font bg-success-500 border-success-500',
+		[InputColorType.warning]: 'text-warning-500-font bg-warning-500 border-warning-500',
+	};
 
-  return {[variants[props.colorType]]: true};
+	return {[variants[props.colorType]]: true};
 });
 const svgPathClasses = computed(() => {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'fill-neutral-50 stroke-neutral-50',
-    [InputColorType.danger]: 'fill-danger-500 stroke-danger-500',
-    [InputColorType.info]: 'fill-info-500 stroke-info-500',
-    [InputColorType.success]: 'fill-success-500 stroke-success-500',
-    [InputColorType.warning]: 'fill-warning-500 stroke-warning-500',
-  };
+	const variants: Record<InputColorType, string> = {
+		[InputColorType.base]: 'fill-white stroke-white',
+		[InputColorType.danger]: 'fill-danger-500 stroke-danger-500',
+		[InputColorType.info]: 'fill-info-500 stroke-info-500',
+		[InputColorType.success]: 'fill-success-500 stroke-success-500',
+		[InputColorType.warning]: 'fill-warning-500 stroke-warning-500',
+	};
 
-  return {[variants[props.colorType]]: true};
+	return {[variants[props.colorType]]: true};
 });
 const arrowSvgPathClasses = computed(() => {
-  const variants: Record<InputColorType, string> = {
-    [InputColorType.base]: 'stroke-neutral-300',
-    [InputColorType.danger]: 'stroke-danger-500',
-    [InputColorType.info]: 'stroke-info-500',
-    [InputColorType.success]: 'stroke-success-500',
-    [InputColorType.warning]: 'stroke-warning-500',
-  };
+	const variants: Record<InputColorType, string> = {
+		[InputColorType.base]: 'stroke-neutral-300',
+		[InputColorType.danger]: 'stroke-danger-500',
+		[InputColorType.info]: 'stroke-info-500',
+		[InputColorType.success]: 'stroke-success-500',
+		[InputColorType.warning]: 'stroke-warning-500',
+	};
 
-  return {[variants[props.colorType]]: true};
+	return {[variants[props.colorType]]: true};
 });
 
 onMounted(() => {
-  handleEnumValidation(props.position, Position, 'Position')
-  handleEnumValidation(props.colorType, InputColorType, 'colorType')
+	handleEnumValidation(props.position, Position, 'Position')
+	handleEnumValidation(props.colorType, InputColorType, 'colorType')
 });
 
 /**
@@ -84,33 +86,37 @@ onMounted(() => {
 const delayVisible = ref(visible.value);
 
 function onMouseOver() {
-  delayVisible.value = true;
+	delayVisible.value = true;
 
-  setTimeout(() => {
-    if (delayVisible.value) {
-      visible.value = true
-    }
-  }, 300)
+	setTimeout(() => {
+		if (delayVisible.value) {
+			visible.value = true
+		}
+	}, 300)
 }
 
 function onMouseLeave() {
-  delayVisible.value = false
-  visible.value = false
+	delayVisible.value = false
+	visible.value = false
 }
 </script>
 
 <template>
   <div
-    class="relative inline-flex justify-center items-center"
+    class="relative justify-center items-center"
+    :class="{'flex w-full': props.expanded, 'inline-flex': !props.expanded}"
     data-e2e="tooltip"
     @mouseover="onMouseOver"
     @mouseleave="onMouseLeave"
   >
-    <slot/>
+    <slot />
 
-    <div v-if="visible" :class="_tooltipClasses">
+    <div
+      v-if="visible && hasSlotContent($slots.content)"
+      :class="_tooltipClasses"
+    >
       <div
-        class="shadow-lg text-sm relative inline-flex flex-col relative"
+        class="shadow-lg text-sm relative"
       >
         <div
           :class="classes"
@@ -157,7 +163,7 @@ function onMouseLeave() {
           class="p-2.5 rounded-md border"
           :class="contentClasses"
         >
-          <slot name="content"/>
+          <slot name="content" />
         </div>
       </div>
     </div>

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

@@ -5,37 +5,64 @@
  */
 import {Grouped} from '../../enums/Grouped.enum';
 import {Size} from '../../enums/Size.enum';
-import {ColorType} from '../../enums/ColorType.enum';
+import {ColorType, InputColorType} from '../../enums/ColorType.enum';
+import {Position} from '../../enums/Position.enum';
 import AntButton from './AntButton.vue';
+import AntTooltip from '../AntTooltip.vue';
+import type {IconDefinition} from '@fortawesome/free-solid-svg-icons';
 
 defineEmits(['click', 'blur']);
 withDefaults(
 	defineProps<{
+		iconLeft?: IconDefinition;
+		iconRight?: IconDefinition;
 		size?: Size;
 		disabled?: boolean;
 		grouped?: Grouped;
 		colorType?: ColorType;
 		skeleton?: boolean;
 		expanded?: boolean;
+		filled?: boolean;
+		hasPermission?: boolean;
+		invalidPermissionTooltipPosition?: Position;
 	}>(), {
 		colorType: ColorType.primary,
+		hasPermission: true,
+		filled: true
 	}
 )
 </script>
 
 <template>
-  <AntButton
-    :size="size"
-    :disabled="disabled"
-    :grouped="grouped"
-    :skeleton="skeleton"
+  <AntTooltip
     :expanded="expanded"
-    :color-type="colorType"
-    filled
-    data-e2e="action-button"
-    @click="$emit('click')"
-    @blur="$emit('blur')"
+    :position="invalidPermissionTooltipPosition"
+    :color-type="InputColorType.info"
   >
-    <slot />
-  </AntButton>
+    <slot name="button">
+      <AntButton
+        :icon-left="iconLeft"
+        :icon-right="iconRight"
+        :size="size"
+        :disabled="disabled || !hasPermission"
+        :grouped="grouped"
+        :skeleton="skeleton"
+        :expanded="expanded"
+        :color-type="colorType"
+        :filled="filled"
+        data-e2e="action-button"
+        @click="$emit('click')"
+        @blur="$emit('blur')"
+      >
+        <slot />
+      </AntButton>
+    </slot>
+
+    <template
+      v-if="!hasPermission && !skeleton"
+      #content
+    >
+      <slot name="invalidPermissionTooltipContent" />
+    </template>
+  </AntTooltip>
 </template>

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

@@ -15,152 +15,152 @@ import {IconSize} from '../__types/AntIcon.types';
 defineEmits(['click', 'blur']);
 
 const props = withDefaults(defineProps<{
-  filled?: boolean;
-  size?: Size;
-  colorType?: ColorType;
-  iconLeft?: IconDefinition;
-  iconRight?: IconDefinition;
-  to?: RouteLocationRaw;
-  disabled?: boolean;
-  grouped?: Grouped;
-  skeleton?: boolean;
-  spinner?: boolean;
-  readonly?: boolean;
-  expanded?: boolean;
-  submit?: boolean;
-  outlined?: boolean;
-  noFocus?: boolean;
+	filled?: boolean;
+	size?: Size;
+	colorType?: ColorType;
+	iconLeft?: IconDefinition;
+	iconRight?: IconDefinition;
+	to?: RouteLocationRaw;
+	disabled?: boolean;
+	grouped?: Grouped;
+	skeleton?: boolean;
+	spinner?: boolean;
+	readonly?: boolean;
+	expanded?: boolean;
+	submit?: boolean;
+	outlined?: boolean;
+	noFocus?: boolean;
 }>(), {
-  colorType: ColorType.base,
-  disabled: false,
-  filled: false,
-  skeleton: false,
-  spinner: false,
-  size: Size.md,
-  grouped: Grouped.none,
-  readonly: false,
-  expanded: false,
-  submit: false,
-  outlined: true,
-  noFocus: false,
+	colorType: ColorType.base,
+	disabled: false,
+	filled: false,
+	skeleton: false,
+	spinner: false,
+	size: Size.md,
+	grouped: Grouped.none,
+	readonly: false,
+	expanded: false,
+	submit: false,
+	outlined: true,
+	noFocus: false,
 });
 
 const hasAction = computed(() => (props.skeleton || props.readonly || props.disabled))
 const groupedClassList = computed(() => ({
-  'rounded-tl-md rounded-bl-md rounded-tr-none rounded-br-none -mr-px': props.grouped === Grouped.left,
-  'rounded-none -mx-px': props.grouped === Grouped.center,
-  'rounded-tl-none rounded-bl-none rounded-tr-md rounded-br-md -ml-px': props.grouped === Grouped.right,
-  'rounded-md': props.grouped === Grouped.none,
+	'rounded-tl-md rounded-bl-md rounded-tr-none rounded-br-none -mr-px': props.grouped === Grouped.left,
+	'rounded-none -mx-px': props.grouped === Grouped.center,
+	'rounded-tl-none rounded-bl-none rounded-tr-md rounded-br-md -ml-px': props.grouped === Grouped.right,
+	'rounded-md': props.grouped === Grouped.none,
 }));
 const classes = computed(() => {
-  const variants = {
-    [ColorType.base]: 'ring-primary-200 outline-neutral-300',
-    [ColorType.danger]: 'ring-danger-200 outline-danger-500',
-    [ColorType.info]: 'ring-info-200 outline-info-500',
-    [ColorType.primary]: 'ring-primary-200 outline-primary-500',
-    [ColorType.secondary]: 'ring-secondary-200 outline-secondary-500',
-    [ColorType.success]: 'ring-success-200 outline-success-500',
-    [ColorType.warning]: 'ring-warning-200 outline-warning-500',
-  };
-  const notFilledVariants = {
-    [ColorType.base]: 'bg-white text-neutral-50-font',
-    [ColorType.danger]: 'bg-white text-danger-500',
-    [ColorType.info]: 'bg-white text-info-500',
-    [ColorType.primary]: 'bg-white text-primary-500',
-    [ColorType.secondary]: 'bg-white text-secondary-500',
-    [ColorType.success]: 'bg-white text-success-500',
-    [ColorType.warning]: 'bg-white text-warning-500',
-  };
-  const notFilledHoverVariants = {
-    [ColorType.base]: 'hover:bg-neutral-100',
-    [ColorType.danger]: 'hover:bg-danger-100',
-    [ColorType.info]: 'hover:bg-info-100',
-    [ColorType.primary]: 'hover:bg-primary-100',
-    [ColorType.secondary]: 'hover:bg-secondary-100',
-    [ColorType.success]: 'hover:bg-success-100',
-    [ColorType.warning]: 'hover:bg-warning-100',
-  };
-  const filledVariants = {
-    [ColorType.base]: 'bg-neutral-50 text-neutral-50-font',
-    [ColorType.danger]: 'bg-danger-500 text-danger-500-font',
-    [ColorType.info]: 'bg-info-500 text-info-500-font',
-    [ColorType.primary]: 'bg-primary-500 text-primary-500-font',
-    [ColorType.secondary]: 'bg-secondary-500 text-secondary-500-font',
-    [ColorType.success]: 'bg-success-500 text-success-500-font',
-    [ColorType.warning]: 'bg-warning-500 text-warning-500-font',
-  };
-  const filledHoverVariants = {
-    [ColorType.base]: 'hover:bg-neutral-200',
-    [ColorType.danger]: 'hover:bg-danger-600',
-    [ColorType.info]: 'hover:bg-info-600',
-    [ColorType.primary]: 'hover:bg-primary-600',
-    [ColorType.secondary]: 'hover:bg-secondary-600',
-    [ColorType.success]: 'hover:bg-success-600',
-    [ColorType.warning]: 'hover:bg-warning-600',
-  };
+	const variants = {
+		[ColorType.base]: 'ring-primary-200 outline-neutral-300',
+		[ColorType.danger]: 'ring-danger-200 outline-danger-500',
+		[ColorType.info]: 'ring-info-200 outline-info-500',
+		[ColorType.primary]: 'ring-primary-200 outline-primary-500',
+		[ColorType.secondary]: 'ring-secondary-200 outline-secondary-500',
+		[ColorType.success]: 'ring-success-200 outline-success-500',
+		[ColorType.warning]: 'ring-warning-200 outline-warning-500',
+	};
+	const notFilledVariants = {
+		[ColorType.base]: 'bg-white text-for-white-bg-font',
+		[ColorType.danger]: 'bg-white text-danger-500',
+		[ColorType.info]: 'bg-white text-info-500',
+		[ColorType.primary]: 'bg-white text-primary-500',
+		[ColorType.secondary]: 'bg-white text-secondary-500',
+		[ColorType.success]: 'bg-white text-success-500',
+		[ColorType.warning]: 'bg-white text-warning-500',
+	};
+	const notFilledHoverVariants = {
+		[ColorType.base]: 'hover:bg-neutral-100',
+		[ColorType.danger]: 'hover:bg-danger-100',
+		[ColorType.info]: 'hover:bg-info-100',
+		[ColorType.primary]: 'hover:bg-primary-100',
+		[ColorType.secondary]: 'hover:bg-secondary-100',
+		[ColorType.success]: 'hover:bg-success-100',
+		[ColorType.warning]: 'hover:bg-warning-100',
+	};
+	const filledVariants = {
+		[ColorType.base]: 'bg-neutral-50 text-neutral-50-font',
+		[ColorType.danger]: 'bg-danger-500 text-danger-500-font',
+		[ColorType.info]: 'bg-info-500 text-info-500-font',
+		[ColorType.primary]: 'bg-primary-500 text-primary-500-font',
+		[ColorType.secondary]: 'bg-secondary-500 text-secondary-500-font',
+		[ColorType.success]: 'bg-success-500 text-success-500-font',
+		[ColorType.warning]: 'bg-warning-500 text-warning-500-font',
+	};
+	const filledHoverVariants = {
+		[ColorType.base]: 'hover:bg-neutral-200',
+		[ColorType.danger]: 'hover:bg-danger-600',
+		[ColorType.info]: 'hover:bg-info-600',
+		[ColorType.primary]: 'hover:bg-primary-600',
+		[ColorType.secondary]: 'hover:bg-secondary-600',
+		[ColorType.success]: 'hover:bg-success-600',
+		[ColorType.warning]: 'hover:bg-warning-600',
+	};
 
-  return {
-    'transition-all inline-flex items-center justify-center relative font-medium': true,
-    'focus:z-10': true,
-    'active:shadow-[inset_0_4px_4px_rgba(0,0,0,0.25)]': !props.readonly,
-    'py-1.5 px-2.5 text-xs gap-1': props.size === Size.sm,
-    'py-2.5 px-3.5 text-sm gap-2.5': props.size === Size.md,
-    'disabled:opacity-50 disabled:cursor-not-allowed': true,
-    'cursor-default': props.readonly,
-    'focus:ring-2': !props.readonly && props.size === Size.sm,
-    'focus:ring-4': !props.readonly && props.size === Size.md,
-    'w-full': props.expanded,
-    'invisible': props.skeleton,
-    'outline outline-1 outline-offset-[-1px]': props.outlined,
-    ...groupedClassList.value,
-    [variants[props.colorType]]: true,
-    [notFilledVariants[props.colorType]]: !props.filled,
-    [notFilledHoverVariants[props.colorType]]: !props.filled && !props.readonly,
-    [filledVariants[props.colorType]]: props.filled,
-    [filledHoverVariants[props.colorType]]: props.filled && !props.readonly,
-  };
+	return {
+		'transition-all inline-flex items-center justify-center relative font-medium': true,
+		'focus:z-10': true,
+		'active:shadow-[inset_0_4px_4px_rgba(0,0,0,0.25)]': !hasAction.value,
+		'py-1.5 px-2.5 text-xs gap-1': props.size === Size.sm,
+		'py-2.5 px-3.5 text-sm gap-2.5': props.size === Size.md,
+		'disabled:opacity-50 disabled:cursor-not-allowed': true,
+		'cursor-default': props.readonly,
+		'focus:ring-2': !props.readonly && props.size === Size.sm,
+		'focus:ring-4': !props.readonly && props.size === Size.md,
+		'w-full': props.expanded,
+		'invisible': props.skeleton,
+		'outline outline-1 outline-offset-[-1px]': props.outlined,
+		...groupedClassList.value,
+		[variants[props.colorType]]: true,
+		[notFilledVariants[props.colorType]]: !props.filled,
+		[notFilledHoverVariants[props.colorType]]: !props.filled && !hasAction.value,
+		[filledVariants[props.colorType]]: props.filled,
+		[filledHoverVariants[props.colorType]]: props.filled && !hasAction.value,
+	};
 });
 const iconColor = computed(() => {
-  const notFilledVariants = {
-    [ColorType.base]: 'text-neutral-50-font',
-    [ColorType.danger]: 'text-danger-500',
-    [ColorType.info]: 'text-info-500',
-    [ColorType.primary]: 'text-primary-500',
-    [ColorType.secondary]: 'text-secondary-500',
-    [ColorType.success]: 'text-success-500',
-    [ColorType.warning]: 'text-warning-500',
-  };
-  const filledVariants = {
-    [ColorType.base]: 'text-neutral-50-font',
-    [ColorType.danger]: 'text-danger-500-font',
-    [ColorType.info]: 'text-info-500-font',
-    [ColorType.primary]: 'text-primary-500-font',
-    [ColorType.secondary]: 'text-secondary-500-font',
-    [ColorType.success]: 'text-success-500-font',
-    [ColorType.warning]: 'text-warning-500-font',
-  };
+	const notFilledVariants = {
+		[ColorType.base]: 'text-for-white-bg-font',
+		[ColorType.danger]: 'text-danger-500',
+		[ColorType.info]: 'text-info-500',
+		[ColorType.primary]: 'text-primary-500',
+		[ColorType.secondary]: 'text-secondary-500',
+		[ColorType.success]: 'text-success-500',
+		[ColorType.warning]: 'text-warning-500',
+	};
+	const filledVariants = {
+		[ColorType.base]: 'text-for-white-bg-font',
+		[ColorType.danger]: 'text-danger-500-font',
+		[ColorType.info]: 'text-info-500-font',
+		[ColorType.primary]: 'text-primary-500-font',
+		[ColorType.secondary]: 'text-secondary-500-font',
+		[ColorType.success]: 'text-success-500-font',
+		[ColorType.warning]: 'text-warning-500-font',
+	};
 
-  return props.filled ? filledVariants[props.colorType] : notFilledVariants[props.colorType];
+	return props.filled ? filledVariants[props.colorType] : notFilledVariants[props.colorType];
 });
 const type = computed(() => {
-  if (props.to !== undefined) {
-    return undefined;
-  }
+	if (props.to !== undefined) {
+		return undefined;
+	}
 
-  return props.submit ? ButtonType.submit : ButtonType.button;
+	return props.submit ? ButtonType.submit : ButtonType.button;
 });
 const is = computed(() => {
-  if (props.readonly) {
-    return 'div';
-  }
+	if (props.readonly) {
+		return 'div';
+	}
 
-  return props.to !== undefined ? 'router-link' : 'button'
+	return props.to !== undefined ? 'router-link' : 'button'
 })
 
 onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.colorType, ColorType, 'colorType');
-  handleEnumValidation(props.grouped, Grouped, 'grouped');
+	handleEnumValidation(props.size, Size, 'size');
+	handleEnumValidation(props.colorType, ColorType, 'colorType');
+	handleEnumValidation(props.grouped, Grouped, 'grouped');
 });
 </script>