@antify/ui 2.5.7 → 3.1.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/AntButton.vue

@@ -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/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

@@ -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

@@ -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>

package/dist/components/AntSkeleton.vue

@@ -3,8 +3,11 @@ import {
   Grouped,
 } from '../enums/Grouped.enum';
 import {
-  computed, ref, watch,
+  computed,
 } from 'vue';
+import {
+  useFlickerProtection,
+} from '../composables/useFlickerProtection';
 
 defineOptions({
   inheritAttrs: false,
@@ -38,30 +41,7 @@ const classList = computed(() => ({
   'rounded-full': props.roundedFull && props.grouped === Grouped.none,
   ...groupedClassList.value,
 }));
-
-/**
- * To prevent flickering, make sure the skeleton is a minimum time visible
- * before hide it.
- */
-const _visible = ref(props.visible);
-
-watch(
-  () => props.visible,
-  (newValue) => {
-    if (newValue) {
-      _visible.value = true;
-    } else if (props.minShowTime && props.minShowTime > 0) {
-      setTimeout(() => {
-        _visible.value = false;
-      }, props.minShowTime);
-    } else {
-      _visible.value = false;
-    }
-  },
-  {
-    immediate: true,
-  },
-);
+const _visible = useFlickerProtection(computed(() => props.visible));
 </script>
 
 <template>

package/dist/components/AntToast.vue

@@ -43,15 +43,15 @@ const icons = {
 const _icon = computed(() => icons[props.state]);
 const classes = computed(() => {
   const variants: Record<InputState, string> = {
-    [InputState.base]: 'bg-base-100 border-base-500 text-base-500',
-    [InputState.danger]: 'bg-danger-100 border-danger-500 text-danger-500',
-    [InputState.info]: 'bg-info-100 border-info-500 text-info-500',
-    [InputState.success]: 'bg-success-100 border-success-500 text-success-500',
-    [InputState.warning]: 'bg-warning-100 border-warning-500 text-warning-500',
+    [InputState.base]: 'border-base-500 text-base-500',
+    [InputState.danger]: 'border-danger-500 text-danger-500',
+    [InputState.info]: 'border-info-500 text-info-500',
+    [InputState.success]: 'border-success-500 text-success-500',
+    [InputState.warning]: 'border-warning-500 text-warning-500',
   };
 
   return {
-    'inline-flex flex-col gap-2 rounded-md p-2 border transition-colors shadow-md': true,
+    'bg-white inline-flex flex-col gap-2 rounded-md p-2 border transition-colors shadow-md': true,
     [variants[props.state]]: true,
   };
 });