@antify/ui 2.2.0 → 2.2.3

package/dist/components/AntModal.vue

@@ -1,20 +1,27 @@
 <script lang="ts" setup>
-import {ref, useSlots, watch} from 'vue';
-import {faXmark} from '@fortawesome/free-solid-svg-icons';
+import {
+  ref, useSlots, watch,
+} from 'vue';
+import {
+  faXmark,
+} from '@fortawesome/free-solid-svg-icons';
 import AntButton from './buttons/AntButton.vue';
-import AntSkeleton from "./AntSkeleton.vue";
+import AntSkeleton from './AntSkeleton.vue';
 
-const emit = defineEmits(['update:open', 'close']);
+const emit = defineEmits([
+  'update:open',
+  'close',
+]);
 const props = withDefaults(defineProps<{
-  title: string,
-  open: boolean,
-  fullscreen?: boolean,
-  padding?: boolean
-  skeleton?: boolean
+  title: string;
+  open: boolean;
+  fullscreen?: boolean;
+  padding?: boolean;
+  skeleton?: boolean;
 }>(), {
   fullscreen: false,
   padding: false,
-  skeleton: false
+  skeleton: false,
 });
 const openModal = ref(props.open);
 const openBackground = ref(props.open);
@@ -22,7 +29,7 @@ const openBackground = ref(props.open);
 watch(() => props.open, (val) => {
   function onKeydown(e: KeyboardEvent) {
     if (e.key === 'Escape') {
-      emit('update:open', false);
+      closeModal();
     }
   }
 
@@ -48,7 +55,7 @@ function closeModal() {
     <div
       v-if="openBackground"
       class="absolute inset-0 flex items-center justify-center z-[80] cursor-pointer overflow-hidden"
-      :class="{'bg-black/50 backdrop-blur-sm': !fullscreen}"
+      :class="{'bg-black/50 backdrop-blur-xs': !fullscreen}"
       @click.self="closeModal"
     >
       <Transition :name="!fullscreen ? 'bounce' : 'bounce-slow'">
@@ -63,7 +70,11 @@ function closeModal() {
             <slot name="title">
               <div class="relative text-for-white-bg-font text-lg font-medium">
                 {{ title }}
-                <AntSkeleton v-if="skeleton" absolute rounded/>
+                <AntSkeleton
+                  v-if="skeleton"
+                  absolute
+                  rounded
+                />
               </div>
             </slot>
 
@@ -78,14 +89,14 @@ function closeModal() {
             class="bg-white text-for-white-bg-font grow overflow-y-auto"
             :class="{'p-2': padding}"
           >
-            <slot/>
+            <slot />
           </div>
 
           <div
             v-if="useSlots()['footer'] || false"
             class="bg-white p-2 text-for-white-bg-font"
           >
-            <slot name="footer"/>
+            <slot name="footer" />
           </div>
         </div>
       </Transition>

package/dist/components/AntPagination.vue

@@ -4,31 +4,42 @@
  * TODO:: test me in storybook through vue router
  * TODO:: Fix ts errors
  */
-import {useRouter, useRoute} from 'vue-router';
-import {computed} from 'vue';
+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 {
+  faChevronRight, faChevronLeft,
+} from '@fortawesome/free-solid-svg-icons';
 import AntSkeleton from './AntSkeleton.vue';
-import {State, Grouped} from '../enums';
-
-const emit = defineEmits(['update:skeleton', 'input']);
+import {
+  State, Grouped,
+} from '../enums';
+
+const emit = defineEmits([
+  'update:skeleton',
+  'input',
+]);
 const props = withDefaults(
   defineProps<{
-    pages: number,
-    pageQuery?: string,
-    skeleton?: boolean,
+    pages: number;
+    pageQuery?: string;
+    skeleton?: boolean;
 
     /**
      * Light version does not show the very previous and next page button.
      * This makes the pagination smaller in space.
      */
-    lightVersion?: boolean
+    lightVersion?: boolean;
   }>(),
   {
     pageQuery: 'p',
     skeleton: false,
-    lightVersion: false
-  }
+    lightVersion: false,
+  },
 );
 const router = useRouter();
 const route = useRoute();
@@ -43,18 +54,20 @@ const page = computed({
     return _page;
   },
   set(val) {
-    const query = {...route.query};
+    const query = {
+      ...route.query,
+    };
     query[props.pageQuery] = val;
 
     (async () => {
       await router.push({
         ...route,
-        query
+        query,
       });
 
       emit('input', val);
     })();
-  }
+  },
 });
 
 /**

package/dist/components/AntPopover.vue

@@ -1,30 +1,46 @@
 <script lang="ts" setup>
-import {computed, ref} from 'vue';
-import {Position} from '../enums/Position.enum';
-import {classesToObjectSyntax} from '../utils';
-import {arrow, autoUpdate, flip, offset, useFloating, shift, limitShift} from "@floating-ui/vue";
-import {vOnClickOutside} from '@vueuse/components';
-import {onKeyStroke} from "@vueuse/core";
+import {
+  computed, ref,
+} from 'vue';
+import {
+  Position,
+} from '../enums/Position.enum';
+import {
+  classesToObjectSyntax,
+} from '../utils';
+import {
+  arrow, autoUpdate, flip, offset, useFloating, shift, limitShift,
+} from '@floating-ui/vue';
+import {
+  vOnClickOutside,
+} from '@vueuse/components';
+import {
+  onKeyStroke,
+} from '@vueuse/core';
 
 const props = withDefaults(defineProps<{
-  showPopover: boolean,
-  title?: string,
-  isClickable?: boolean,
-  popoverClasses?: string | Record<string, boolean>
+  showPopover: boolean;
+  title?: string;
+  isClickable?: boolean;
+  popoverClasses?: string | Record<string, boolean>;
 }>(), {
   isClickable: true,
   showPopover: false,
   preferredPosition: Position.top,
-  popoverClasses: ''
+  popoverClasses: '',
 });
 
-const emit = defineEmits(['update:showPopover']);
+const emit = defineEmits([
+  'update:showPopover',
+]);
 
-const reference = ref<HTMLElement | null>(null)
-const floating = ref<HTMLElement | null>(null)
+const reference = ref<HTMLElement | null>(null);
+const floating = ref<HTMLElement | null>(null);
 const floatingArrow = ref<HTMLElement | null>(null);
 
-const {floatingStyles, middlewareData, placement} = useFloating(reference, floating, {
+const {
+  floatingStyles, middlewareData, placement,
+} = useFloating(reference, floating, {
   transform: false,
   placement: 'right',
   whileElementsMounted: autoUpdate,
@@ -34,40 +50,46 @@ const {floatingStyles, middlewareData, placement} = useFloating(reference, float
       limiter: limitShift({
         offset: {
           mainAxis: 62,
-        }
+        },
       }),
     }),
     flip({
-      fallbackPlacements: ['top', 'bottom', 'left'],
+      fallbackPlacements: [
+        'top',
+        'bottom',
+        'left',
+      ],
     }),
-    arrow({element: floatingArrow})
-  ]
+    arrow({
+      element: floatingArrow,
+    }),
+  ],
 });
 
 const side = computed(() => placement.value.split('-')[0]);
 const staticSide = computed(() => {
   return {
-    top: "bottom",
-    right: "left",
-    bottom: "top",
-    left: "right"
-  }[side.value] as string
-})
+    top: 'bottom',
+    right: 'left',
+    bottom: 'top',
+    left: 'right',
+  }[side.value] as string;
+});
 const arrowTransform = computed(() => {
   if (placement.value === 'bottom') {
-    return 'rotate(0deg)'
+    return 'rotate(0deg)';
   } else if (placement.value === 'top') {
-    return 'rotate(180deg)'
+    return 'rotate(180deg)';
   } else if (placement.value === 'left') {
-    return 'rotate(90deg)'
+    return 'rotate(90deg)';
   } else {
-    return 'rotate(270deg)'
+    return 'rotate(270deg)';
   }
 });
 
 const _popoverClasses = computed(() => ({
   'z-[90] min-w-[10rem]': true,
-  ...classesToObjectSyntax(props.popoverClasses)
+  ...classesToObjectSyntax(props.popoverClasses),
 }));
 const itemContainerClasses = computed(() => ({
   'relative flex items-center justify-center': true,
@@ -85,30 +107,31 @@ const onClickOutside = [
     emit('update:showPopover', false);
   },
   {
-    ignore: [floating]
-  }
-]
+    ignore: [
+      floating,
+    ],
+  },
+];
 </script>
 
 <template>
   <div class="relative inline-flex justify-center items-end">
     <div
-      v-on-click-outside="onClickOutside"
       ref="reference"
+      v-on-click-outside="onClickOutside"
     >
-      <slot/>
+      <slot />
     </div>
 
     <Transition name="bounce">
       <template v-if="showPopover">
         <teleport to="body">
           <div
-            :class="_popoverClasses"
             ref="floating"
+            :class="_popoverClasses"
             :style="floatingStyles"
           >
             <div class="shadow-lg border-base-300 rounded-md text-sm relative inline-flex flex-col">
-
               <div
                 class="border-base-300 border-b p-2 bg-base-100 rounded-t-md border-t border-l border-r text-base-100-font font-semibold"
               >
@@ -120,26 +143,26 @@ const onClickOutside = [
               <div
                 class="p-2 rounded-b-md text-for-white-bg-font border-base-300 border-l border-b border-r bg-white"
               >
-                <slot name="content"/>
+                <slot name="content" />
               </div>
             </div>
 
             <div
-              class="flex items-center justify-center"
               ref="floatingArrow"
+              class="flex items-center justify-center"
               :style="{
-            position: 'absolute',
-            left:
-              middlewareData.arrow?.x != null
-                ? `${middlewareData.arrow.x}px`
-                : '',
-            top:
-              middlewareData.arrow?.y != null
-                ? `${middlewareData.arrow.y}px`
-                : '',
-            [staticSide]: '-2.5px',
-            transform: arrowTransform
-            }"
+                position: 'absolute',
+                left:
+                  middlewareData.arrow?.x != null
+                    ? `${middlewareData.arrow.x}px`
+                    : '',
+                top:
+                  middlewareData.arrow?.y != null
+                    ? `${middlewareData.arrow.y}px`
+                    : '',
+                [staticSide]: '-2.5px',
+                transform: arrowTransform
+              }"
             >
               <div
                 :class="itemContainerClasses"

package/dist/components/AntSkeleton.vue

@@ -1,6 +1,10 @@
 <script lang="ts" setup>
-import {Grouped} from '../enums/Grouped.enum';
-import {computed} from 'vue';
+import {
+  Grouped,
+} from '../enums/Grouped.enum';
+import {
+  computed,
+} from 'vue';
 
 const props = withDefaults(defineProps<{
   grouped?: Grouped;
@@ -13,7 +17,7 @@ const props = withDefaults(defineProps<{
   rounded: false,
   roundedFull: false,
   absolute: false,
-  minShowTime: 5000
+  minShowTime: 5000,
 });
 
 const groupedClassList = computed(() => ({
@@ -26,7 +30,7 @@ const classList = computed(() => ({
   'absolute inset-0 w-full h-full z-40': props.absolute,
   'rounded-md': props.rounded && props.grouped === Grouped.none,
   'rounded-full': props.roundedFull && props.grouped === Grouped.none,
-  ...groupedClassList.value
+  ...groupedClassList.value,
 }));
 </script>
 

package/dist/components/AntSpinner.vue

@@ -1,17 +1,25 @@
 <script lang="ts" setup>
-import {computed, onMounted} from 'vue';
-import {AntSpinnerSize} from './__types/AntSpinner.types';
-import {handleEnumValidation} from '../handler';
-import {State} from '../enums/State.enum';
+import {
+  computed, onMounted,
+} from 'vue';
+import {
+  AntSpinnerSize,
+} from './__types/AntSpinner.types';
+import {
+  handleEnumValidation,
+} from '../handler';
+import {
+  State,
+} from '../enums/State.enum';
 
 const props = withDefaults(defineProps<{
-  state?: State,
+  state?: State;
   size?: AntSpinnerSize;
   inverted?: boolean;
 }>(), {
   size: AntSpinnerSize.md,
   state: State.base,
-  inverted: false
+  inverted: false,
 });
 
 const classes = computed(() => ({

package/dist/components/AntTag.vue

@@ -1,21 +1,33 @@
 <script lang="ts" setup>
-import {computed, onMounted} from 'vue';
-import {handleEnumValidation} from '../handler';
-import {faCircleXmark, type IconDefinition} from '@fortawesome/free-solid-svg-icons';
-import {AntTagSize, TagState} from './__types/AntTag.types';
+import {
+  computed, onMounted,
+} from 'vue';
+import {
+  handleEnumValidation,
+} from '../handler';
+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';
+import {
+  IconSize,
+} from './__types/AntIcon.types';
 
-defineEmits(['close']);
+defineEmits([
+  'close',
+]);
 const props = withDefaults(defineProps<{
-  state?: TagState,
+  state?: TagState;
   size?: AntTagSize;
   iconLeft?: IconDefinition;
-  dismiss?: boolean
+  dismiss?: boolean;
 }>(), {
   size: AntTagSize.md,
   state: TagState.base,
-  dismiss: false
+  dismiss: false,
 });
 
 const classes = computed(() => {
@@ -28,6 +40,7 @@ const classes = computed(() => {
     [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 py-0.5 text-xs gap-0.5': props.size === AntTagSize.xs3,
@@ -67,7 +80,7 @@ const iconState = computed(() => {
 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
+    'w-5 h-5': props.size === AntTagSize.sm || props.size === AntTagSize.md || props.size === AntTagSize.lg,
   };
 });
 
@@ -91,11 +104,10 @@ onMounted(() => {
         :icon="iconLeft"
         :size="getIconSize"
         :color="iconState"
-      >
-      </anticon>
+      />
     </span>
 
-    <slot/>
+    <slot />
 
     <span
       v-if="dismiss"

package/dist/components/AntToast.vue

@@ -1,27 +1,35 @@
 <script lang="ts" setup>
-import {computed, onMounted, useSlots} from 'vue';
-import {handleEnumValidation} from '../handler';
+import {
+  computed, onMounted, useSlots,
+} from 'vue';
+import {
+  handleEnumValidation,
+} from '../handler';
 import {
   faCheckCircle,
   faExclamationCircle,
   faExclamationTriangle,
   faInfoCircle,
-  faXmark
+  faXmark,
 } from '@fortawesome/free-solid-svg-icons';
 import AntIcon from './AntIcon.vue';
 import AntButton from './buttons/AntButton.vue';
-import {State, InputState, Size} from '../enums';
-import {IconSize} from './__types/AntIcon.types';
+import {
+  State, InputState, Size,
+} from '../enums';
+import {
+  IconSize,
+} from './__types/AntIcon.types';
 
 const props = withDefaults(defineProps<{
-  title?: string,
-  state?: InputState,
-  showUndo?: boolean,
-  icon?: boolean
+  title?: string;
+  state?: InputState;
+  showUndo?: boolean;
+  icon?: boolean;
 }>(), {
   state: InputState.base,
   showUndo: false,
-  icon: true
+  icon: true,
 });
 
 const icons = {
@@ -99,7 +107,7 @@ onMounted(() => {
     </div>
 
     <div v-if="hasDefaultSlot">
-      <slot/>
+      <slot />
     </div>
 
     <div

package/dist/components/AntToaster.vue

@@ -1,16 +1,24 @@
 <script lang="ts" setup>
-import {computed} from 'vue';
+import {
+  computed,
+} from 'vue';
 import AntToast from './AntToast.vue';
-import {CornerPosition} from '../enums/Position.enum';
-import type {Toast} from "../components/__types";
+import {
+  CornerPosition,
+} from '../enums/Position.enum';
+import type {
+  Toast,
+} from '../components/__types';
 
-defineEmits(['close']);
+defineEmits([
+  'close',
+]);
 
 const props = withDefaults(defineProps<{
   position?: CornerPosition;
   toasts: Toast[];
 }>(), {
-  position: CornerPosition.bottomLeft
+  position: CornerPosition.bottomLeft,
 });
 
 const classes = computed(() => ({