@antify/ui 2.5.6 → 3.0.0

package/dist/components/AntAccordion.vue

@@ -82,18 +82,17 @@ function onClose(index: number) {
           />
         </template>
 
-        <div class="relative">
+        <div>
           <slot
             name="item-content"
             v-bind="{item, index}"
           >
-            <div v-html="item.content" />
-
             <AntSkeleton
-              v-if="skeleton"
-              absolute
+              :visible="skeleton"
               rounded
-            />
+            >
+              <div v-html="item.content" />
+            </AntSkeleton>
           </slot>
         </div>
       </AntAccordionItem>

package/dist/components/AntAccordionItem.vue

@@ -85,16 +85,14 @@ const labelClasses = computed(() => ({
             />
           </slot>
 
-          <div class="relative">
+          <AntSkeleton
+            :visible="skeleton"
+            rounded
+          >
             <div class="text-sm font-semibold">
               {{ label }}
             </div>
-            <AntSkeleton
-              v-if="skeleton"
-              absolute
-              rounded
-            />
-          </div>
+          </AntSkeleton>
         </div>
 
         <AntIcon

package/dist/components/AntAlert.vue

@@ -64,7 +64,7 @@ const classes = computed(() => {
   };
 
   return {
-    'inline-flex flex-col gap-2 rounded-md p-2 transition-colors text-sm relative': true,
+    'inline-flex flex-col gap-2 rounded-md p-2 transition-colors text-sm': true,
     'w-full': props.expanded,
     [variants[props.state]]: true,
   };
@@ -89,68 +89,67 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    :class="classes"
-    data-e2e="alert"
+  <AntSkeleton
+    :visible="skeleton"
+    rounded
   >
-    <AntSkeleton
-      v-if="skeleton"
-      absolute
-      rounded
-    />
-
     <div
-      v-if="icon || hasQuestionMark || dismissBtn || title"
-      class="inline-flex items-center justify-between w-content gap-2"
-      :class="{'invisible': skeleton}"
+      :class="classes"
+      data-e2e="alert"
     >
-      <div class="inline-flex items-center gap-2">
-        <AntIcon
-          v-if="icon"
-          :icon="_icon"
-          :color="iconColor"
-          :size="IconSize.sm"
-        />
+      <div
+        v-if="icon || hasQuestionMark || dismissBtn || title"
+        class="inline-flex items-center justify-between w-content gap-2"
+        :class="{'invisible': skeleton}"
+      >
+        <div class="inline-flex items-center gap-2">
+          <AntIcon
+            v-if="icon"
+            :icon="_icon"
+            :color="iconColor"
+            :size="IconSize.sm"
+          />
 
-        <div
-          :class="{'font-semibold': hasDefaultSlot}"
-        >
-          <slot name="title">
-            {{ title }}
-          </slot>
+          <div
+            :class="{'font-semibold': hasDefaultSlot}"
+          >
+            <slot name="title">
+              {{ title }}
+            </slot>
+          </div>
         </div>
-      </div>
 
-      <div class="flex gap-2">
-        <div v-if="hasQuestionMark">
-          <slot name="questionMarkText">
-            <AntTooltip>
-              <AntIcon
-                :icon="faCircleQuestion"
-                :color="iconColor"
-                :size="IconSize.sm"
-              />
+        <div class="flex gap-2">
+          <div v-if="hasQuestionMark">
+            <slot name="questionMarkText">
+              <AntTooltip>
+                <AntIcon
+                  :icon="faCircleQuestion"
+                  :color="iconColor"
+                  :size="IconSize.sm"
+                />
 
-              <template #content>
-                {{ questionMarkText }}
-              </template>
-            </AntTooltip>
-          </slot>
-        </div>
+                <template #content>
+                  {{ questionMarkText }}
+                </template>
+              </AntTooltip>
+            </slot>
+          </div>
 
-        <AntIcon
-          v-if="dismissBtn"
-          :icon="faXmark"
-          class="cursor-pointer"
-          :color="iconColor"
-          :size="IconSize.sm"
-          @click="() => $emit('close')"
-        />
+          <AntIcon
+            v-if="dismissBtn"
+            :icon="faXmark"
+            class="cursor-pointer"
+            :color="iconColor"
+            :size="IconSize.sm"
+            @click="() => $emit('close')"
+          />
+        </div>
       </div>
-    </div>
 
-    <div v-if="hasDefaultSlot">
-      <slot />
+      <div v-if="hasDefaultSlot">
+        <slot />
+      </div>
     </div>
-  </div>
+  </AntSkeleton>
 </template>

package/dist/components/{buttons/AntButton.vue → AntButton.vue}

@@ -8,28 +8,28 @@ import {
 import {
   type RouteLocationRaw,
 } from 'vue-router';
-import AntSkeleton from '../AntSkeleton.vue';
-import AntSpinner from '../AntSpinner.vue';
+import AntSkeleton from './AntSkeleton.vue';
+import AntSpinner from './AntSpinner.vue';
 import {
   Grouped,
-} from '../../enums/Grouped.enum';
+} from '../enums/Grouped.enum';
 import {
   Size,
-} from '../../enums/Size.enum';
+} from '../enums/Size.enum';
 import {
   handleEnumValidation,
-} from '../../handler';
+} from '../handler';
 import {
   State, InputState, Position,
-} from '../../enums';
+} from '../enums';
 import {
   ButtonType,
 } from './__types';
-import AntIcon from '../AntIcon.vue';
-import AntTooltip from '../AntTooltip.vue';
+import AntIcon from './AntIcon.vue';
+import AntTooltip from './AntTooltip.vue';
 import {
   IconSize,
-} from '../__types/AntIcon.types';
+} from './__types/AntIcon.types';
 
 defineEmits([
   'click',
@@ -128,7 +128,7 @@ const classes = computed(() => {
   };
 
   return {
-    'transition-all inline-flex items-center justify-center relative font-medium cursor-pointer select-none': true,
+    'transition-all inline-flex items-center justify-center font-medium cursor-pointer select-none': true,
     'active:shadow-[inset_0_4px_4px_rgba(0,0,0,0.25)]': !hasInputState.value,
     'p-1 text-xs gap-1': props.size === Size.xs2,
     'p-1.5 text-xs gap-1.5': props.size === Size.xs,
@@ -140,7 +140,6 @@ const classes = computed(() => {
     'focus:ring-2': !props.readonly && props.size === Size.sm || props.size === Size.xs || props.size === Size.xs2,
     'focus:ring-4': !props.readonly && props.size === Size.md || props.size === Size.lg,
     'w-full': props.expanded,
-    invisible: props.skeleton,
     'outline outline-1 outline-offset-[-1px]': props.outlined,
     ...groupedClassList.value,
     [variants[props.state]]: true,
@@ -202,73 +201,72 @@ onMounted(() => {
 </script>
 
 <template>
-  <div
-    class="relative inline-flex h-fit"
-    :class="{'w-full': props.expanded}"
-    data-e2e="button"
-    :data-e2e-state="props.state"
+  <AntSkeleton
+    :visible="skeleton"
+    :grouped="grouped"
+    rounded
   >
-    <AntSkeleton
-      v-if="skeleton"
-      :grouped="grouped"
-      rounded
-      absolute
-    />
-
-    <AntTooltip
-      class="w-full"
-      :state="tooltipState"
-      :delay="tooltipDelay"
+    <div
+      class="inline-flex h-fit"
+      :class="{'w-full': props.expanded}"
+      data-e2e="button"
+      :data-e2e-state="props.state"
     >
-      <component
-        :is="is"
-        :class="classes"
-        :type="type"
-        :to="to"
-        :disabled="disabled || undefined"
-        :tabindex="noFocus || hasInputState ? '-1' : '0'"
-        @click="(e: MouseEvent) => !props.readonly ? $emit('click', e) : null"
-        @blur="(e: FocusEvent) => !props.readonly ? $emit('blur', e) : null"
+      <AntTooltip
+        class="w-full"
+        :state="tooltipState"
+        :delay="tooltipDelay"
       >
-        <AntSpinner
-          v-if="spinner"
-          :size="size"
-          :state="state"
-          :inverted="!filled"
-        />
-
-        <slot
-          v-if="!spinner"
-          name="icon-left"
+        <component
+          :is="is"
+          :class="classes"
+          :type="type"
+          :to="to"
+          :disabled="disabled || undefined"
+          :tabindex="noFocus || hasInputState ? '-1' : '0'"
+          @click="(e: MouseEvent) => !props.readonly ? $emit('click', e) : null"
+          @blur="(e: FocusEvent) => !props.readonly ? $emit('blur', e) : null"
         >
-          <AntIcon
-            v-if="iconLeft"
-            :icon="iconLeft"
-            :size="getIconSize"
-            :color="iconColor"
+          <AntSpinner
+            v-if="spinner"
+            :size="size"
+            :state="state"
+            :inverted="!filled"
           />
-        </slot>
 
-        <slot
-          v-if="!spinner"
-        />
+          <slot
+            v-if="!spinner"
+            name="icon-left"
+          >
+            <AntIcon
+              v-if="iconLeft"
+              :icon="iconLeft"
+              :size="getIconSize"
+              :color="iconColor"
+            />
+          </slot>
 
-        <slot
-          v-if="!spinner"
-          name="icon-right"
-        >
-          <AntIcon
-            v-if="iconRight"
-            :icon="iconRight"
-            :size="getIconSize"
-            :color="iconColor"
+          <slot
+            v-if="!spinner"
           />
-        </slot>
-      </component>
 
-      <template #content>
-        <slot name="tooltip-content" />
-      </template>
-    </AntTooltip>
-  </div>
+          <slot
+            v-if="!spinner"
+            name="icon-right"
+          >
+            <AntIcon
+              v-if="iconRight"
+              :icon="iconRight"
+              :size="getIconSize"
+              :color="iconColor"
+            />
+          </slot>
+        </component>
+
+        <template #content>
+          <slot name="tooltip-content" />
+        </template>
+      </AntTooltip>
+    </div>
+  </AntSkeleton>
 </template>

package/dist/components/AntCard.vue

@@ -31,16 +31,15 @@ const cardClass = computed(() => ({
 </script>
 
 <template>
-  <div
-    :class="cardClass"
-    class="bg-white outline outline-offset-[-1px] outline-base-300 rounded-md relative"
+  <AntSkeleton
+    :visible="skeleton"
+    rounded
   >
-    <slot />
-
-    <AntSkeleton
-      v-if="skeleton"
-      absolute
-      rounded
-    />
-  </div>
+    <div
+      :class="cardClass"
+      class="bg-white outline outline-offset-[-1px] outline-base-300 rounded-md"
+    >
+      <slot />
+    </div>
+  </AntSkeleton>
 </template>

package/dist/components/{dialogs/AntDialog.vue → AntDialog.vue}

@@ -4,8 +4,8 @@
 import {
   computed, ref, watch,
 } from 'vue';
-import AntButton from '../buttons/AntButton.vue';
-import AntIcon from '../AntIcon.vue';
+import AntButton from './AntButton.vue';
+import AntIcon from './AntIcon.vue';
 import {
   faCheckCircle,
   faExclamationCircle,
@@ -15,10 +15,10 @@ import {
 } from '@fortawesome/free-solid-svg-icons';
 import {
   State, InputState,
-} from '../../enums';
+} from '../enums';
 import {
   IconSize,
-} from '../__types';
+} from './__types';
 
 const emit = defineEmits([
   'update:open',

package/dist/components/AntIcon.vue

@@ -56,15 +56,15 @@ onMounted(() => {
 
 <template>
   <span :class="containerClasses">
-    <FaIcon
-      v-if="icon"
-      :icon="icon"
-      :class="iconClasses"
-    />
     <AntSkeleton
-      v-if="skeleton"
-      absolute
+      :visible="skeleton"
       rounded
-    />
+    >
+      <FaIcon
+        v-if="icon"
+        :icon="icon"
+        :class="iconClasses"
+      />
+    </AntSkeleton>
   </span>
 </template>

package/dist/components/AntKeycap.vue

@@ -45,21 +45,21 @@ const iconClasses = computed(() => {
 </script>
 
 <template>
-  <div
-    class="inline-flex relative justify-center items-center bg-base-300 rounded-md text-center text-base-300-font font-medium"
-    :class="classes"
+  <AntSkeleton
+    :visible="skeleton"
+    rounded
   >
-    <AntIcon
-      v-if="icon"
-      :icon="icon"
-      :size="iconClasses"
-    />
+    <div
+      class="inline-flex justify-center items-center bg-base-300 rounded-md text-center text-base-300-font font-medium"
+      :class="classes"
+    >
+      <AntIcon
+        v-if="icon"
+        :icon="icon"
+        :size="iconClasses"
+      />
 
-    <slot v-else />
-    <AntSkeleton
-      v-if="skeleton"
-      absolute
-      rounded
-    />
-  </div>
+      <slot v-else />
+    </div>
+  </AntSkeleton>
 </template>

package/dist/components/AntListGroup.vue

@@ -11,18 +11,18 @@ withDefaults(defineProps<{
 </script>
 
 <template>
-  <div class="relative">
+  <div>
     <AntSkeleton
-      v-if="skeleton"
-      absolute
+      :visible="skeleton"
       rounded
-    />
-
-    <div
-      class="flex flex-col rounded-md bg-base-300 gap-px relative border border-base-300 overflow-hidden"
-      :class="{'invisible': skeleton, 'shadow-md': shadow}"
+      class="w-full"
     >
-      <slot />
-    </div>
+      <div
+        class="flex flex-col rounded-md bg-base-300 gap-px relative border border-base-300 overflow-hidden"
+        :class="{'invisible': skeleton, 'shadow-md': shadow}"
+      >
+        <slot />
+      </div>
+    </AntSkeleton>
   </div>
 </template>

package/dist/components/AntModal.vue

@@ -5,7 +5,7 @@ import {
 import {
   faXmark,
 } from '@fortawesome/free-solid-svg-icons';
-import AntButton from './buttons/AntButton.vue';
+import AntButton from './AntButton.vue';
 import AntSkeleton from './AntSkeleton.vue';
 
 const emit = defineEmits([
@@ -68,13 +68,13 @@ function closeModal() {
             class="bg-white p-2 flex items-center justify-between gap-2"
           >
             <slot name="title">
-              <div class="relative text-for-white-bg-font text-lg font-medium">
-                {{ title }}
+              <div class="text-for-white-bg-font text-lg font-medium">
                 <AntSkeleton
-                  v-if="skeleton"
-                  absolute
+                  :visible="skeleton"
                   rounded
-                />
+                >
+                  {{ title }}
+                </AntSkeleton>
               </div>
             </slot>
 

package/dist/components/AntPagination.vue

@@ -10,7 +10,7 @@ import {
 import {
   computed,
 } from 'vue';
-import AntButton from './buttons/AntButton.vue';
+import AntButton from './AntButton.vue';
 import {
   faChevronRight, faChevronLeft,
 } from '@fortawesome/free-solid-svg-icons';
@@ -170,49 +170,47 @@ const pagination = computed(() => {
 </script>
 
 <template>
-  <div
-    class="inline-flex relative"
-    data-e2e="pagination"
+  <AntSkeleton
+    :visible="skeleton"
+    rounded
   >
-    <AntSkeleton
-      v-if="skeleton"
-      rounded
-      absolute
-    />
-
     <div
-      class="inline-flex gap-px"
-      :class="{'invisible': skeleton}"
+      class="inline-flex"
+      data-e2e="pagination"
     >
-      <AntButton
-        :disabled="page === 1"
-        :icon-left="faChevronLeft"
-        :grouped="Grouped.left"
-        :filled="false"
-        @click="() => page = page - 1"
-      />
-
-      <AntButton
-        v-for="(pageObj) in pagination"
-        :key="`pagination-button-${pageObj}`"
-        :state="pageObj === page ? State.primary : State.base"
-        :class="{'text-primary-500 z-10': pageObj === page}"
-        :disabled="pageObj === '...'"
-        :grouped="Grouped.center"
-        :filled="false"
-        :readonly="pageObj === page"
-        @click="() => page = pageObj"
+      <div
+        class="inline-flex gap-px"
       >
-        {{ pageObj }}
-      </AntButton>
-
-      <AntButton
-        :icon-left="faChevronRight"
-        :grouped="Grouped.right"
-        :disabled="page === pages"
-        :filled="false"
-        @click="() => page = page + 1"
-      />
+        <AntButton
+          :disabled="page === 1"
+          :icon-left="faChevronLeft"
+          :grouped="Grouped.left"
+          :filled="false"
+          @click="() => page = page - 1"
+        />
+
+        <AntButton
+          v-for="(pageObj) in pagination"
+          :key="`pagination-button-${pageObj}`"
+          :state="pageObj === page ? State.primary : State.base"
+          :class="{'text-primary-500 z-10': pageObj === page}"
+          :disabled="pageObj === '...'"
+          :grouped="Grouped.center"
+          :filled="false"
+          :readonly="pageObj === page"
+          @click="() => page = pageObj"
+        >
+          {{ pageObj }}
+        </AntButton>
+
+        <AntButton
+          :icon-left="faChevronRight"
+          :grouped="Grouped.right"
+          :disabled="page === pages"
+          :filled="false"
+          @click="() => page = page + 1"
+        />
+      </div>
     </div>
-  </div>
+  </AntSkeleton>
 </template>