@antify/ui-module 1.6.0 → 1.7.2

package/dist/runtime/components/AntListGroupItem.vue

@@ -1,60 +1,56 @@
 <script lang="ts" setup>
 import {computed, onMounted} from 'vue';
 import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
-import {ListGroupItemColorType} from '../types/AntListGroupItem.type';
+import {ListGroupItemState} from './__types/AntListGroupItem.types';
 import {handleEnumValidation} from '../handler';
 import {type RouteLocationRaw} from 'vue-router';
 import AntIcon from './AntIcon.vue';
 
 const props = withDefaults(defineProps<{
   to?: RouteLocationRaw | string;
-  colorType?: ListGroupItemColorType;
+  state?: ListGroupItemState;
   iconLeft?: IconDefinition;
   iconRight?: IconDefinition;
 }>(), {
-  colorType: ListGroupItemColorType.neutral50,
+  state: ListGroupItemState.base,
 });
 
 const classes = computed(() => {
-  const variants: Record<ListGroupItemColorType, string> = {
-    [ListGroupItemColorType.danger]: 'bg-danger-500 text-danger-500-font',
-    [ListGroupItemColorType.info]: 'bg-info-500 text-info-500-font',
-    [ListGroupItemColorType.neutral700]: 'bg-neutral-700 text-neutral-700-font',
-    [ListGroupItemColorType.neutral300]: 'bg-neutral-300 text-neutral-300-font',
-    [ListGroupItemColorType.neutral50]: 'bg-white text-for-white-bg-font',
-    [ListGroupItemColorType.primary]: 'bg-primary-500 text-primary-500-font',
-    [ListGroupItemColorType.secondary]: 'bg-secondary-500 text-secondary-500-font',
-    [ListGroupItemColorType.success]: 'bg-success-500 text-success-500-font',
-    [ListGroupItemColorType.warning]: 'bg-warning-500 text-warning-500-font',
+  const variants: Record<ListGroupItemState, string> = {
+    [ListGroupItemState.danger]: 'bg-danger-500 text-danger-500-font hover:bg-danger-700',
+    [ListGroupItemState.info]: 'bg-info-500 text-info-500-font hover:bg-info-700',
+    [ListGroupItemState.base]: 'bg-white text-for-white-bg-font hover:bg-neutral-200',
+    [ListGroupItemState.primary]: 'bg-primary-500 text-primary-500-font hover:bg-primary-700',
+    [ListGroupItemState.secondary]: 'bg-secondary-500 text-secondary-500-font hover:bg-secondary-700',
+    [ListGroupItemState.success]: 'bg-success-500 text-success-500-font hover:bg-success-700',
+    [ListGroupItemState.warning]: 'bg-warning-500 text-warning-500-font hover:bg-warning-700',
   };
 
   return {
     'text-sm transition-colors inline-block w-full': true,
-    [variants[props.colorType]]: true,
+    [variants[props.state]]: true,
   };
 });
 const contentWrapperClasses = computed(() => {
-  const variants: Record<ListGroupItemColorType, string> = {
-   [ListGroupItemColorType.danger]: 'text-danger-500-font',
-   [ListGroupItemColorType.info]: 'text-info-500-font',
-   [ListGroupItemColorType.neutral700]: 'text-neutral-700-font',
-   [ListGroupItemColorType.neutral300]: 'text-neutral-300-font',
-   [ListGroupItemColorType.neutral50]: 'text-for-white-bg-font',
-   [ListGroupItemColorType.primary]: 'text-primary-500-font',
-   [ListGroupItemColorType.secondary]: 'text-secondary-500-font',
-   [ListGroupItemColorType.success]: 'text-success-500-font',
-   [ListGroupItemColorType.warning]: 'text-warning-500-font',
+  const variants: Record<ListGroupItemState, string> = {
+   [ListGroupItemState.danger]: 'text-danger-500-font',
+   [ListGroupItemState.info]: 'text-info-500-font',
+   [ListGroupItemState.base]: 'text-for-white-bg-font',
+   [ListGroupItemState.primary]: 'text-primary-500-font',
+   [ListGroupItemState.secondary]: 'text-secondary-500-font',
+   [ListGroupItemState.success]: 'text-success-500-font',
+   [ListGroupItemState.warning]: 'text-warning-500-font',
   };
 
   return {
-    'w-full p-2.5 flex gap-2.5 items-center justify-between': true,
-    'hover:bg-neutral-950/25 cursor-pointer transition-colors': props.to !== undefined,
-    [variants[props.colorType]]: props.to !== undefined
+    'w-full p-2 flex gap-2 items-center justify-between': true,
+    'cursor-pointer transition-colors': props.to !== undefined,
+    [variants[props.state]]: props.to !== undefined
   };
 });
 
 onMounted(() => {
-  handleEnumValidation(props.colorType, ListGroupItemColorType, 'colorType');
+  handleEnumValidation(props.state, ListGroupItemState, 'state');
 });
 </script>
 

package/dist/runtime/components/AntModal.vue

@@ -23,11 +23,11 @@ watch(() => props.open, (val) => {
 
   if (val) {
     openBackground.value = true;
-    setTimeout(() => openModal.value = true, props.fullscreen ? 0 : 100)
+    setTimeout(() => openModal.value = true, props.fullscreen ? 0 : 100);
     document.addEventListener('keydown', onKeydown);
   } else {
     openModal.value = false;
-    setTimeout(() => openBackground.value = false, props.fullscreen ? 0 : 100)
+    setTimeout(() => openBackground.value = false, props.fullscreen ? 0 : 100);
     document.removeEventListener('keydown', onKeydown);
   }
 });
@@ -53,7 +53,7 @@ function closeModal() {
           :class="{'w-full h-full': fullscreen, 'border border-neutral-300 rounded-md shadow-md': !fullscreen}"
         >
           <div
-            class="bg-white p-2.5 flex items-center justify-between text-for-white-bg-font text-lg font-medium"
+            class="bg-white p-2 flex items-center justify-between text-for-white-bg-font text-lg font-medium"
           >
             <slot name="title">
               {{ title }}
@@ -67,13 +67,13 @@ function closeModal() {
             />
           </div>
 
-          <div class="bg-white p-2.5 grow overflow-y-auto">
+          <div class="bg-white p-2 text-for-white-bg-font grow overflow-y-auto">
             <slot />
           </div>
 
           <div
             v-if="useSlots()['footer'] || false"
-            class="bg-white p-2.5 text-for-white-bg-font"
+            class="bg-white p-2 text-for-white-bg-font"
           >
             <slot name="footer" />
           </div>

package/dist/runtime/components/AntPagination.vue

@@ -4,15 +4,15 @@
  * TODO:: test me in storybook through vue router
  * TODO:: Fix ts errors
  */
-import {useRouter, useRoute} from 'vue-router'
+import {useRouter, useRoute} from 'vue-router';
 import {computed} from 'vue';
 import AntButton from './buttons/AntButton.vue';
 import {faChevronRight, faChevronLeft} from '@fortawesome/free-solid-svg-icons';
 import {Grouped} from '../enums/Grouped.enum';
 import AntSkeleton from './AntSkeleton.vue';
-import {ColorType} from '../enums';
+import {State} from '../enums';
 
-const emit = defineEmits(['update:skeleton', 'input'])
+const emit = defineEmits(['update:skeleton', 'input']);
 const props = withDefaults(
   defineProps<{
     pages: number,
@@ -30,33 +30,33 @@ const props = withDefaults(
     skeleton: false,
     lightVersion: false
   }
-)
-const router = useRouter()
-const route = useRoute()
+);
+const router = useRouter();
+const route = useRoute();
 const page = computed({
   get() {
-    const _page = route.query[props.pageQuery] >= 1 ? Number.parseInt(route.query[props.pageQuery]) : 1
+    const _page = route.query[props.pageQuery] >= 1 ? Number.parseInt(route.query[props.pageQuery]) : 1;
 
     if (_page <= 0 || _page > props.pages) {
-      return 1
+      return 1;
     }
 
-    return _page
+    return _page;
   },
   set(val) {
-    const query = {...route.query}
+    const query = {...route.query};
     query[props.pageQuery] = val;
 
     (async () => {
       await router.push({
         ...route,
         query
-      })
+      });
 
-      emit('input', val)
-    })()
+      emit('input', val);
+    })();
   }
-})
+});
 
 /**
  * Build following constellations:
@@ -70,49 +70,49 @@ const page = computed({
  * 1 ... 8 9 [10]
  */
 const defaultPagination = computed(() => {
-  const pagination = []
+  const pagination = [];
 
   if (page.value > 2 && props.pages > 3) {
-    pagination.push(1)
+    pagination.push(1);
 
     if (page.value > 3) {
-      pagination.push('...')
+      pagination.push('...');
     }
   }
 
   if (page.value === 1) {
-    pagination.push(1)
+    pagination.push(1);
 
     if (props.pages >= 2) {
-      pagination.push(2)
+      pagination.push(2);
     }
 
     if (props.pages >= 3) {
-      pagination.push(3)
+      pagination.push(3);
     }
   } else if (page.value === props.pages) {
     if (props.pages - 2 >= 1) {
-      pagination.push(props.pages - 2)
+      pagination.push(props.pages - 2);
     }
     if (props.pages - 1 >= 1) {
-      pagination.push(props.pages - 1)
+      pagination.push(props.pages - 1);
     }
-    pagination.push(props.pages)
+    pagination.push(props.pages);
   } else {
-    pagination.push(page.value - 1)
-    pagination.push(page.value)
-    pagination.push(page.value + 1)
+    pagination.push(page.value - 1);
+    pagination.push(page.value);
+    pagination.push(page.value + 1);
   }
 
   if (page.value < props.pages - 1 && props.pages > 3) {
     if (page.value < props.pages - 2) {
-      pagination.push('...')
+      pagination.push('...');
     }
-    pagination.push(props.pages)
+    pagination.push(props.pages);
   }
 
-  return pagination
-})
+  return pagination;
+});
 
 /**
  * Build following constellations:
@@ -125,36 +125,36 @@ const defaultPagination = computed(() => {
  * 1 ... [10]
  */
 const lightPagination = computed(() => {
-  const pagination = []
+  const pagination = [];
 
-  pagination.push(1)
+  pagination.push(1);
 
   if (page.value > 2) {
-    pagination.push('...')
+    pagination.push('...');
   }
 
   if (page.value > 1) {
-    pagination.push(page.value)
+    pagination.push(page.value);
   }
 
   if (page.value < props.pages - 1) {
-    pagination.push('...')
+    pagination.push('...');
   }
 
   if (page.value < props.pages) {
-    pagination.push(props.pages)
+    pagination.push(props.pages);
   }
 
-  return pagination
-})
+  return pagination;
+});
 
 const pagination = computed(() => {
   if (props.lightVersion) {
-    return lightPagination.value
+    return lightPagination.value;
   }
 
-  return defaultPagination.value
-})
+  return defaultPagination.value;
+});
 </script>
 
 <template>
@@ -176,18 +176,18 @@ const pagination = computed(() => {
         :disabled="page === 1"
         :icon-left="faChevronLeft"
         :grouped="Grouped.left"
-        filled
+        :filled="false"
         @click="() => page = page - 1"
       />
 
       <AntButton
         v-for="(pageObj) in pagination"
         :key="`pagination-button-${pageObj}`"
-        :color-type="pageObj === page ? ColorType.primary : ColorType.base"
+        :state="pageObj === page ? State.primary : State.base"
         :class="{'text-primary-500 z-10': pageObj === page}"
         :disabled="pageObj === '...'"
         :grouped="Grouped.center"
-        :filled="pageObj !== page"
+        :filled="false"
         :readonly="pageObj === page"
         @click="() => page = pageObj"
       >
@@ -198,7 +198,7 @@ const pagination = computed(() => {
         :icon-left="faChevronRight"
         :grouped="Grouped.right"
         :disabled="page === pages"
-        filled
+        :filled="false"
         @click="() => page = page + 1"
       />
     </div>

package/dist/runtime/components/AntPopover.vue

@@ -38,7 +38,7 @@ const itemContainerClasses = computed(() => ({
 }));
 
 onMounted(() => {
-  handleEnumValidation(props.position, Position, 'Position')
+  handleEnumValidation(props.position, Position, 'Position');
 });
 </script>
 
@@ -92,13 +92,13 @@ 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 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-for-white-bg-font border-neutral-300 border-l border-b border-r bg-white"
+              class="p-2 rounded-b-md text-for-white-bg-font border-neutral-300 border-l border-b border-r bg-white"
             >
               <slot name="content" />
             </div>

package/dist/runtime/components/AntSpinner.vue

@@ -1,76 +1,82 @@
 <script lang="ts" setup>
 import {computed, onMounted} from 'vue';
-import {Size} from '../enums/Size.enum'
+import {AntSpinnerSize} from './__types/AntSpinner.types';
 import {handleEnumValidation} from '../handler';
-import {ColorType} from '../enums/ColorType.enum';
+import {State} from '../enums/State.enum';
 
 const props = withDefaults(defineProps<{
-  colorType?: ColorType,
-  size?: Size;
+  state?: State,
+  size?: AntSpinnerSize;
   inverted?: boolean;
 }>(), {
-  size: Size.md,
-  colorType: ColorType.base,
+  size: AntSpinnerSize.md,
+  state: State.base,
   inverted: false
 });
 
 const classes = computed(() => ({
   'animate-spin': true,
-  'w-4 h-4': props.size === Size.sm,
-  'w-5 h-5': props.size === Size.md,
+  'w-3 h-3': props.size === AntSpinnerSize.xs2,
+  'w-4 h-4': props.size === AntSpinnerSize.xs,
+  'w-5 h-5': props.size === AntSpinnerSize.sm,
+  'w-6 h-6': props.size === AntSpinnerSize.md,
+  'w-7 h-7': props.size === AntSpinnerSize.lg,
+  'w-8 h-8': props.size === AntSpinnerSize.xl2,
+  'w-9 h-9': props.size === AntSpinnerSize.xl3,
+  'w-10 h-10': props.size === AntSpinnerSize.xl4,
 }));
 onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.colorType, ColorType, 'colorType');
+  handleEnumValidation(props.size, AntSpinnerSize, 'size');
+  handleEnumValidation(props.state, State, 'state');
 });
 const circleClass = computed(() => {
-  const invertedVariants: Record<ColorType, string> = {
-    [ColorType.base]: 'fill-neutral-500',
-    [ColorType.primary]: 'fill-primary-700',
-    [ColorType.secondary]: 'fill-secondary-700',
-    [ColorType.danger]: 'fill-danger-700',
-    [ColorType.info]: 'fill-info-700',
-    [ColorType.success]: 'fill-success-700',
-    [ColorType.warning]: 'fill-warning-700',
+  const invertedVariants: Record<State, string> = {
+    [State.base]: 'fill-neutral-500',
+    [State.primary]: 'fill-primary-700',
+    [State.secondary]: 'fill-secondary-700',
+    [State.danger]: 'fill-danger-700',
+    [State.info]: 'fill-info-700',
+    [State.success]: 'fill-success-700',
+    [State.warning]: 'fill-warning-700',
   };
-  const notInvertedVariants: Record<ColorType, string> = {
-    [ColorType.base]: 'fill-neutral-100',
-    [ColorType.primary]: 'fill-primary-100',
-    [ColorType.secondary]: 'fill-secondary-100',
-    [ColorType.danger]: 'fill-danger-100',
-    [ColorType.info]: 'fill-info-100',
-    [ColorType.success]: 'fill-success-100',
-    [ColorType.warning]: 'fill-warning-100',
+  const notInvertedVariants: Record<State, string> = {
+    [State.base]: 'fill-neutral-100',
+    [State.primary]: 'fill-primary-100',
+    [State.secondary]: 'fill-secondary-100',
+    [State.danger]: 'fill-danger-100',
+    [State.info]: 'fill-info-100',
+    [State.success]: 'fill-success-100',
+    [State.warning]: 'fill-warning-100',
   };
 
   return {
-    [invertedVariants[props.colorType]]: props.inverted,
-    [notInvertedVariants[props.colorType]]: !props.inverted,
+    [invertedVariants[props.state]]: props.inverted,
+    [notInvertedVariants[props.state]]: !props.inverted,
   };
 });
 const spinningElementClass = computed(() => {
-  const invertedVariants: Record<ColorType, string> = {
-    [ColorType.base]: 'fill-neutral-100',
-    [ColorType.primary]: 'fill-primary-100',
-    [ColorType.secondary]: 'fill-secondary-100',
-    [ColorType.danger]: 'fill-danger-100',
-    [ColorType.info]: 'fill-info-100',
-    [ColorType.success]: 'fill-success-100',
-    [ColorType.warning]: 'fill-warning-100',
+  const invertedVariants: Record<State, string> = {
+    [State.base]: 'fill-neutral-100',
+    [State.primary]: 'fill-primary-100',
+    [State.secondary]: 'fill-secondary-100',
+    [State.danger]: 'fill-danger-100',
+    [State.info]: 'fill-info-100',
+    [State.success]: 'fill-success-100',
+    [State.warning]: 'fill-warning-100',
   };
-  const notInvertedVariants: Record<ColorType, string> = {
-    [ColorType.base]: 'fill-neutral-500',
-    [ColorType.primary]: 'fill-primary-500',
-    [ColorType.secondary]: 'fill-secondary-500',
-    [ColorType.danger]: 'fill-danger-500',
-    [ColorType.info]: 'fill-info-500',
-    [ColorType.success]: 'fill-success-500',
-    [ColorType.warning]: 'fill-warning-500',
+  const notInvertedVariants: Record<State, string> = {
+    [State.base]: 'fill-neutral-500',
+    [State.primary]: 'fill-primary-500',
+    [State.secondary]: 'fill-secondary-500',
+    [State.danger]: 'fill-danger-500',
+    [State.info]: 'fill-info-500',
+    [State.success]: 'fill-success-500',
+    [State.warning]: 'fill-warning-500',
   };
 
   return {
-    [invertedVariants[props.colorType]]: props.inverted,
-    [notInvertedVariants[props.colorType]]: !props.inverted,
+    [invertedVariants[props.state]]: props.inverted,
+    [notInvertedVariants[props.state]]: !props.inverted,
   };
 });
 </script>
@@ -84,12 +90,12 @@ const spinningElementClass = computed(() => {
     data-e2e="spinner"
   >
     <path
-        :class="circleClass"
-        d="M8 16C12.4183 16 16 12.4183 16 8H14C14 11.5346 11.5346 14 8 14C4.46538 14 2 11.5346 2 8C2 4.46538 4.46538 2 8 2V0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
+      :class="circleClass"
+      d="M8 16C12.4183 16 16 12.4183 16 8H14C14 11.5346 11.5346 14 8 14C4.46538 14 2 11.5346 2 8C2 4.46538 4.46538 2 8 2V0C3.58172 0 0 3.58172 0 8C0 12.4183 3.58172 16 8 16Z"
     />
     <path
-        :class="spinningElementClass"
-        d="M16 8C16 6.94942 15.7931 5.90914 15.391 4.93853C14.989 3.96793 14.3997 3.08601 13.6569 2.34315C12.914 1.60028 12.0321 1.011 11.0615 0.608963C10.0909 0.206926 9.05057 -1.7116e-07 8 0L8 2C8.78793 2 9.56815 2.15519 10.2961 2.45672C11.0241 2.75825 11.6855 3.20021 12.2426 3.75736C12.7998 4.31451 13.2417 4.97595 13.5433 5.7039C13.8448 6.43185 14 7.21207 14 8H16Z"
+      :class="spinningElementClass"
+      d="M16 8C16 6.94942 15.7931 5.90914 15.391 4.93853C14.989 3.96793 14.3997 3.08601 13.6569 2.34315C12.914 1.60028 12.0321 1.011 11.0615 0.608963C10.0909 0.206926 9.05057 -1.7116e-07 8 0L8 2C8.78793 2 9.56815 2.15519 10.2961 2.45672C11.0241 2.75825 11.6855 3.20021 12.2426 3.75736C12.7998 4.31451 13.2417 4.97595 13.5433 5.7039C13.8448 6.43185 14 7.21207 14 8H16Z"
     />
   </svg>
 </template>

package/dist/runtime/components/AntTag.vue

@@ -1,47 +1,79 @@
 <script lang="ts" setup>
 import {computed, onMounted} from 'vue';
-import {Size} from '../enums/Size.enum'
-import {TagColorType} from '../types/AntTag.type';
 import {handleEnumValidation} from '../handler';
-import {type IconDefinition} from '@fortawesome/free-solid-svg-icons';
-import {faCircleXmark} from '@fortawesome/free-solid-svg-icons';
+import {faCircleXmark, type IconDefinition} from '@fortawesome/free-solid-svg-icons';
+import {AntTagSize, TagState} from './__types/AntTag.types';
+import AntIcon from './AntIcon.vue';
+import {IconSize} from './__types/AntIcon.types';
 
 defineEmits(['close']);
 const props = withDefaults(defineProps<{
-  colorType?: TagColorType,
-  size?: Size;
+  state?: TagState,
+  size?: AntTagSize;
   iconLeft?: IconDefinition;
   dismiss?: boolean
 }>(), {
-  size: Size.md,
-  colorType: TagColorType.base,
+  size: AntTagSize.md,
+  state: TagState.base,
   dismiss: false
 });
 
 const classes = computed(() => {
-  const variants: Record<TagColorType, string> = {
-    [TagColorType.danger]: 'bg-danger-500 text-danger-500-font',
-    [TagColorType.info]: 'bg-info-500 text-info-500-font',
-    [TagColorType.base]: 'bg-neutral-300 text-neutral-300-font',
-    [TagColorType.success]: 'bg-success-500 text-success-500-font',
-    [TagColorType.warning]: 'bg-warning-500 text-warning-500-font',
+  const variants: Record<TagState, string> = {
+    [TagState.danger]: 'bg-danger-500 text-danger-500-font',
+    [TagState.info]: 'bg-info-500 text-info-500-font',
+    [TagState.primary]: 'bg-primary-500 text-primary-500-font',
+    [TagState.secondary]: 'bg-secondary-500 text-secondary-500-font',
+    [TagState.base]: 'bg-neutral-300 text-neutral-300-font',
+    [TagState.success]: 'bg-success-500 text-success-500-font',
+    [TagState.warning]: 'bg-warning-500 text-warning-500-font',
   };
-
   return {
     'rounded-md inline-flex items-center': true,
-    'px-1.5 py-1 text-sm gap-1.5': props.size === Size.md,
-    'px-1 py-0.5 text-xs  gap-1': props.size === Size.sm,
-    [variants[props.colorType]]: true,
+    'px-1 py-0.5 text-xs gap-0.5': props.size === AntTagSize.xs3,
+    'px-1.5 py-1 text-xs gap-1': props.size === AntTagSize.xs2,
+    'px-2 py-1.5 text-xs gap-1.5': props.size === AntTagSize.xs,
+    'px-2 py-1.5 text-sm gap-1.5': props.size === AntTagSize.sm,
+    'px-2.5 py-2 text-sm gap-2': props.size === AntTagSize.md,
+    'px-3 py-2.5 text-sm gap-2.5': props.size === AntTagSize.lg,
+    [variants[props.state]]: true,
+  };
+});
+const getIconSize = computed(() => {
+  if (props.size === AntTagSize.xs || props.size === AntTagSize.xs2 || props.size === AntTagSize.xs3) {
+    return IconSize.xs;
+  } else {
+    return IconSize.sm;
+  }
+});
+const iconState = computed(() => {
+  switch (props.state) {
+    case TagState.info:
+      return 'text-info-500-font';
+    case TagState.success:
+      return 'text-success-500-font';
+    case TagState.warning:
+      return 'text-warning-500-font';
+    case TagState.danger:
+      return 'text-danger-500-font';
+    case TagState.primary:
+      return 'text-primary-500-font';
+    case TagState.secondary:
+      return 'text-secondary-500-font';
+    default:
+      return 'text-neutral-300-font';
+  }
+});
+const iconWrapperClass = computed(() => {
+  return {
+    'w-4 h-4': props.size === AntTagSize.xs2 || props.size === AntTagSize.xs,
+    'w-5 h-5': props.size === AntTagSize.sm || props.size === AntTagSize.md || props.size === AntTagSize.lg
   };
 });
-const iconClasses = computed(() => ({
-  'h-3': props.size === Size.sm,
-  'h-4': props.size === Size.md,
-}));
 
 onMounted(() => {
-  handleEnumValidation(props.size, Size, 'size');
-  handleEnumValidation(props.colorType, TagColorType, 'colorType');
+  handleEnumValidation(props.size, AntTagSize, 'size');
+  handleEnumValidation(props.state, TagState, 'state');
 });
 </script>
 
@@ -51,28 +83,31 @@ onMounted(() => {
     data-e2e="tag"
   >
     <span
-        v-if="iconLeft"
-        class="inline-flex items-center justify-center"
-        :class="{'w-4 h-4': props.size === Size.sm, 'w-5 h-5': props.size === Size.md}"
+      v-if="iconLeft"
+      class="inline-flex items-center justify-center"
+      :class="iconWrapperClass"
     >
-      <fa-icon
-          :icon="iconLeft"
-          :class="iconClasses"
-      />
+      <AntIcon
+        :icon="iconLeft"
+        :size="getIconSize"
+        :color="iconState"
+      >
+      </anticon>
     </span>
 
-    <slot/>
+    <slot />
 
     <span
-        v-if="dismiss"
-        class="inline-flex items-center justify-center"
-        :class="{'w-4 h-4': props.size === Size.sm, 'w-5 h-5': props.size === Size.md}"
+      v-if="dismiss"
+      class="inline-flex items-center justify-center"
+      :class="iconWrapperClass"
     >
-      <fa-icon
-          :icon="faCircleXmark"
-          :class="iconClasses"
-          class="cursor-pointer"
-          @click="() => $emit('close')"
+      <AntIcon
+        :icon="faCircleXmark"
+        :size="getIconSize"
+        :color="iconState"
+        class="cursor-pointer"
+        @click="() => $emit('close')"
       />
     </span>
   </span>