@antify/ui 2.5.7 → 3.0.0

package/dist/components/inputs/AntCheckbox.vue

@@ -197,25 +197,24 @@ onMounted(() => {
         </div>
 
         <AntSkeleton
-          v-if="skeleton"
+          :visible="skeleton"
           absolute
           rounded
         />
       </div>
 
       <div
-        class="relative flex items-center"
+        class="flex items-center"
         :class="props.size === Size.md ? 'h-5' : 'h-4'"
       >
-        <span :class="contentClasses">
-          <slot />
-        </span>
-
         <AntSkeleton
-          v-if="skeleton"
-          absolute
+          :visible="skeleton"
           rounded
-        />
+        >
+          <span :class="contentClasses">
+            <slot />
+          </span>
+        </AntSkeleton>
       </div>
     </div>
   </AntField>

package/dist/components/inputs/AntColorInput/AntColorInput.vue

@@ -181,8 +181,10 @@ onMounted(() => {
       <div
         :class="containerClasses"
       >
-        <div
-          class="relative"
+        <AntSkeleton
+          :visible="skeleton"
+          :grouped="hasRemoveButton ? Grouped.left : Grouped.none"
+          rounded
         >
           <div
             ref="itemRef"
@@ -198,14 +200,7 @@ onMounted(() => {
               readonly
             />
           </div>
-
-          <AntSkeleton
-            v-if="skeleton"
-            absolute
-            :grouped="hasRemoveButton ? Grouped.left : Grouped.none"
-            rounded
-          />
-        </div>
+        </AntSkeleton>
 
         <AntButton
           v-if="hasRemoveButton"

package/dist/components/inputs/AntImageInput.vue

@@ -160,36 +160,35 @@ onBeforeUnmount(() => {
       :class="{'cursor-pointer': !disabled && !skeleton}"
     >
       <div>
-        <div class="h-[70px] w-[70px] bg-gray-100 rounded-full overflow-hidden flex items-center justify-center relative">
-          <img
-            v-if="src && !skeleton"
-            :src="src"
-            alt="Image"
-            class="h-full w-full object-cover"
-          >
-
-          <AntIcon
-            v-else
-            class="text-base-300"
-            :size="IconSize.xl3"
-            :icon="faImage"
-          />
+        <AntSkeleton
+          :visible="skeleton"
+          rounded-full
+        >
+          <div class="h-[70px] w-[70px] bg-gray-100 rounded-full overflow-hidden flex items-center justify-center">
+            <img
+              v-if="src"
+              :src="src"
+              alt="Image"
+              class="h-full w-full object-cover"
+            >
 
-          <div
-            v-if="loading"
-            class="absolute flex items-center justify-center inset-0 bg-base-600/50 rounded-full"
-          >
-            <AntSpinner
-              :state="State.primary"
+            <AntIcon
+              v-else
+              class="text-base-300"
+              :size="IconSize.xl3"
+              :icon="faImage"
             />
-          </div>
 
-          <AntSkeleton
-            v-if="skeleton"
-            absolute
-            rounded-full
-          />
-        </div>
+            <div
+              v-if="loading"
+              class="absolute flex items-center justify-center inset-0 bg-base-600/50 rounded-full"
+            >
+              <AntSpinner
+                :state="State.primary"
+              />
+            </div>
+          </div>
+        </AntSkeleton>
       </div>
 
       <div class="flex flex-col gap-2.5 w-full">
@@ -204,15 +203,14 @@ onBeforeUnmount(() => {
               @change="handleFileChange"
             >
 
-            <span class="text-sm text-for-white-bg-font relative">
-              Upload Image
-
-              <AntSkeleton
-                v-if="skeleton"
-                absolute
-                rounded
-              />
-            </span>
+            <AntSkeleton
+              :visible="skeleton"
+              rounded
+            >
+              <span class="text-sm text-for-white-bg-font">
+                Upload Image
+              </span>
+            </AntSkeleton>
 
             <div
               class="absolute top-0 left-0 w-full h-full border bg-transparent"

package/dist/components/inputs/AntRadio.vue

@@ -201,25 +201,24 @@ onMounted(() => {
         >
 
         <AntSkeleton
-          v-if="skeleton"
+          :visible="skeleton"
           absolute
           rounded-full
         />
       </div>
 
       <div
-        class="relative flex items-center"
+        class="flex items-center"
         :class="valueSize"
       >
-        <span :class="valueClass">
-          {{ value.label }}
-        </span>
-
         <AntSkeleton
-          v-if="skeleton"
-          absolute
+          :visible="skeleton"
           rounded
-        />
+        >
+          <span :class="valueClass">
+            {{ value.label }}
+          </span>
+        </AntSkeleton>
       </div>
     </div>
   </AntField>

package/dist/components/inputs/AntSelect.vue

@@ -260,13 +260,6 @@ function onClickRemoveButton() {
         class="relative w-full"
         :class="{'cursor-pointer': !skeleton && !readonly}"
       >
-        <AntSkeleton
-          v-if="skeleton"
-          absolute
-          rounded
-          :grouped="skeletonGrouped"
-        />
-
         <input
           v-model="_modelValue"
           type="hidden"
@@ -297,70 +290,78 @@ function onClickRemoveButton() {
               v-bind="{...props}"
             />
           </template>
-          <!-- Input -->
-          <div
-            ref="inputRef"
-            :class="inputClasses"
-            :tabindex="disabled || readonly ? -1 : 0"
-            v-bind="$attrs"
-            @mousedown="onClickSelectInput"
-            @click="() => inputRef?.focus()"
-            @blur="onBlur"
+
+          <AntSkeleton
+            :visible="skeleton"
+            rounded
+            :grouped="skeletonGrouped"
+            class="w-full"
           >
+            <!-- Input -->
             <div
-              v-if="_modelValue === null && placeholder !== undefined"
-              :class="placeholderClasses"
+              ref="inputRef"
+              :class="inputClasses"
+              :tabindex="disabled || readonly ? -1 : 0"
+              v-bind="$attrs"
+              @mousedown="onClickSelectInput"
+              @click="() => inputRef?.focus()"
+              @blur="onBlur"
             >
-              {{ placeholder }}
-            </div>
+              <div
+                v-if="_modelValue === null && placeholder !== undefined"
+                :class="placeholderClasses"
+              >
+                {{ placeholder }}
+              </div>
 
-            <div
-              v-else-if="_modelValue === null && label !== undefined"
-              :class="placeholderClasses"
-            >
-              {{ label }}
-            </div>
+              <div
+                v-else-if="_modelValue === null && label !== undefined"
+                :class="placeholderClasses"
+              >
+                {{ label }}
+              </div>
 
-            <div
-              v-else
-              class="flex items-center select-none overflow-hidden w-full"
-              :class="{
-                'gap-1': size === Size.xs2,
-                'gap1.5': size === Size.xs,
-                'gap-1.5': size === Size.sm,
-                'gap-2': size === Size.md,
-                'gap-2.5': size === Size.lg,
-              }"
-            >
-              <slot
-                v-if="selectedOption !== null"
-                name="contentLeft"
-                v-bind="selectedOption"
-              />
-              <div class="text-ellipsis overflow-hidden whitespace-nowrap w-full text-black">
-                {{ valueLabel }}
+              <div
+                v-else
+                class="flex items-center select-none overflow-hidden w-full"
+                :class="{
+                  'gap-1': size === Size.xs2,
+                  'gap1.5': size === Size.xs,
+                  'gap-1.5': size === Size.sm,
+                  'gap-2': size === Size.md,
+                  'gap-2.5': size === Size.lg,
+                }"
+              >
+                <slot
+                  v-if="selectedOption !== null"
+                  name="contentLeft"
+                  v-bind="selectedOption"
+                />
+                <div class="text-ellipsis overflow-hidden whitespace-nowrap w-full text-black">
+                  {{ valueLabel }}
+                </div>
+                <slot
+                  v-if="selectedOption !== null"
+                  name="contentRight"
+                  v-bind="selectedOption"
+                />
               </div>
-              <slot
-                v-if="selectedOption !== null"
-                name="contentRight"
-                v-bind="selectedOption"
-              />
-            </div>
 
-            <AntIcon
-              v-if="isOpen"
-              :icon="faChevronUp"
-              :size="iconSize"
-              :class="arrowClasses"
-            />
+              <AntIcon
+                v-if="isOpen"
+                :icon="faChevronUp"
+                :size="iconSize"
+                :class="arrowClasses"
+              />
 
-            <AntIcon
-              v-else
-              :icon="faChevronDown"
-              :size="iconSize"
-              :class="arrowClasses"
-            />
-          </div>
+              <AntIcon
+                v-else
+                :icon="faChevronDown"
+                :size="iconSize"
+                :class="arrowClasses"
+              />
+            </div>
+          </AntSkeleton>
         </AntSelectMenu>
       </div>
 

package/dist/components/inputs/AntSwitch.vue

@@ -157,33 +157,32 @@ function onBlur(e: FocusEvent) {
     :messages="messages"
     :expanded="false"
   >
-    <div class="relative w-fit flex items-center gap-1.5">
-      <div class="relative w-fit flex items-center">
-        <button
-          v-bind="$attrs"
-          type="button"
-          :class="buttonClasses"
-          role="switch"
-          :aria-checked="!!_value"
-          :disabled="disabled"
-          :tabindex="hasInputState ? -1 : 0"
-          @click="changeValue"
-          @blur="onBlur"
-        >
-          <span
-            aria-hidden="true"
-            :class="ballClasses"
+    <div class="w-fit flex items-center gap-1.5">
+      <AntSkeleton
+        :visible="skeleton"
+        rounded-full
+      >
+        <div class="relative w-fit flex items-center">
+          <button
+            v-bind="$attrs"
+            type="button"
+            :class="buttonClasses"
+            role="switch"
+            :aria-checked="!!_value"
+            :disabled="disabled"
+            :tabindex="hasInputState ? -1 : 0"
+            @click="changeValue"
+            @blur="onBlur"
           >
-            <slot name="icon" />
-          </span>
-        </button>
-
-        <AntSkeleton
-          v-if="skeleton"
-          absolute
-          rounded-full
-        />
-      </div>
+            <span
+              aria-hidden="true"
+              :class="ballClasses"
+            >
+              <slot name="icon" />
+            </span>
+          </button>
+        </div>
+      </AntSkeleton>
 
       <div
         v-if="hasSlotContent($slots['default'])"
@@ -195,7 +194,7 @@ function onBlur(e: FocusEvent) {
         </span>
 
         <AntSkeleton
-          v-if="skeleton"
+          :visible="skeleton"
           absolute
           rounded
           class="l-1.5"

package/dist/components/inputs/AntSwitcher.vue

@@ -181,18 +181,19 @@ onMounted(() => {
         @click="prevOption"
         @blur="onBlur"
       />
-      <div class="grow relative">
-        <div :class="itemClasses">
-          {{ typeof _value === 'string' ? _value : _value.label }}
-        </div>
 
-        <AntSkeleton
-          v-if="skeleton"
-          absolute
-          :grouped="Grouped.center"
-          rounded
-        />
-      </div>
+      <AntSkeleton
+        :visible="skeleton"
+        :grouped="Grouped.center"
+        rounded
+        class="grow"
+      >
+        <div class="grow">
+          <div :class="itemClasses">
+            {{ typeof _value === 'string' ? _value : _value.label }}
+          </div>
+        </div>
+      </AntSkeleton>
 
       <AntButton
         :icon-left="faChevronRight"

package/dist/components/inputs/AntTagInput.vue

@@ -272,16 +272,12 @@ onMounted(() => {
       :expanded="expanded"
       :messages="messages"
     >
-      <div
-        class="relative w-full"
+      <AntSkeleton
+        :visible="skeleton"
+        rounded
+        :grouped="skeletonGrouped"
+        class="w-full"
       >
-        <AntSkeleton
-          v-if="skeleton"
-          absolute
-          rounded
-          :grouped="skeletonGrouped"
-        />
-
         <div
           v-on-click-outside="onClickOutside"
           :class="inputContainerClasses"
@@ -347,7 +343,7 @@ onMounted(() => {
             </span>
           </template>
         </AntSelectMenu>
-      </div>
+      </AntSkeleton>
     </AntField>
   </div>
 </template>

package/dist/components/inputs/AntTextarea.vue

@@ -193,7 +193,10 @@ defineExpose({
     :messages="messages"
     :expanded-height="!resize"
   >
-    <div
+    <AntSkeleton
+      :visible="skeleton"
+      :grouped="grouped"
+      rounded
       class="block relative w-full h-full"
       :class="{...{'-mr-px': grouped !== Grouped.none}, ..._wrapperClass}"
     >
@@ -219,13 +222,6 @@ defineExpose({
           :color="iconColor"
         />
       </div>
-
-      <AntSkeleton
-        v-if="skeleton"
-        absolute
-        :grouped="grouped"
-        rounded
-      />
-    </div>
+    </AntSkeleton>
   </AntField>
 </template>

package/dist/components/inputs/Elements/AntBaseInput.vue

@@ -231,72 +231,72 @@ function onClickClearIcon() {
     class="block relative w-full h-fit"
     :class="_wrapperClass"
   >
-    <div
-      v-if="iconLeft"
-      class="absolute h-full flex items-center justify-center z-20"
-      :class="{
-        'w-6': size === Size.xs2,
-        'w-7': size === Size.sm,
-        'w-8': size === Size.xs,
-        'w-9': size === Size.md,
-        'w-10': size === Size.lg,
-        'opacity-50': disabled,
-      }"
-    >
-      <AntIcon
-        :icon="iconLeft"
-        :size="inputIconSize"
-        color="text-for-white-bg-font"
-      />
-    </div>
-
-    <input
-      ref="_inputRef"
-      v-model="_modelValue"
-      :class="inputClasses"
-      :type="type"
-      :placeholder="placeholder"
-      :disabled="disabled || skeleton"
-      :readonly="readonly"
-      :tabindex="hasInputState ? -1 : 0"
-      :min="min"
-      :max="max"
-      title=""
-      v-bind="$attrs"
-      @blur="onBlur"
-    >
-
-    <div
-      v-if="(nullable && _modelValue !== null && _modelValue !== '') || (showIcon && icon) || hasSlotContent(slot['icon-right'])"
-      class="absolute h-full flex items-center justify-center right-0 top-0 transition-all z-20"
-      :class="{'w-6': size === Size.xs2, 'w-7': size === Size.xs, 'w-8': size === Size.sm, 'w-9': size === Size.md, 'w-10': size === Size.lg}"
+    <AntSkeleton
+      :visible="skeleton"
+      :grouped="grouped"
+      rounded
+      class="w-full"
     >
-      <slot name="icon-right">
+      <div
+        v-if="iconLeft"
+        class="absolute h-full flex items-center justify-center z-20"
+        :class="{
+          'w-6': size === Size.xs2,
+          'w-7': size === Size.sm,
+          'w-8': size === Size.xs,
+          'w-9': size === Size.md,
+          'w-10': size === Size.lg,
+          'opacity-50': disabled,
+        }"
+      >
         <AntIcon
-          v-if="nullable && _modelValue !== null && _modelValue !== ''"
-          :icon="faXmark"
-          :class="{'cursor-pointer': !disabled, ...iconClasses}"
-          :color="iconColorClass"
+          :icon="iconLeft"
           :size="inputIconSize"
-          @click="() => onClickClearIcon()"
+          color="text-for-white-bg-font"
         />
+      </div>
 
-        <AntIcon
-          v-else-if="showIcon && icon"
-          :icon="icon"
-          :color="iconColorClass"
-          :class="iconClasses"
-          :size="inputIconSize"
-        />
-      </slot>
-    </div>
+      <input
+        ref="_inputRef"
+        v-model="_modelValue"
+        :class="inputClasses"
+        :type="type"
+        :placeholder="placeholder"
+        :disabled="disabled || skeleton"
+        :readonly="readonly"
+        :tabindex="hasInputState ? -1 : 0"
+        :min="min"
+        :max="max"
+        title=""
+        v-bind="$attrs"
+        @blur="onBlur"
+      >
 
-    <AntSkeleton
-      v-if="skeleton"
-      absolute
-      :grouped="grouped"
-      rounded
-    />
+      <div
+        v-if="(nullable && _modelValue !== null && _modelValue !== '') || (showIcon && icon) || hasSlotContent(slot['icon-right'])"
+        class="absolute h-full flex items-center justify-center right-0 top-0 transition-all z-20"
+        :class="{'w-6': size === Size.xs2, 'w-7': size === Size.xs, 'w-8': size === Size.sm, 'w-9': size === Size.md, 'w-10': size === Size.lg}"
+      >
+        <slot name="icon-right">
+          <AntIcon
+            v-if="nullable && _modelValue !== null && _modelValue !== ''"
+            :icon="faXmark"
+            :class="{'cursor-pointer': !disabled, ...iconClasses}"
+            :color="iconColorClass"
+            :size="inputIconSize"
+            @click="() => onClickClearIcon()"
+          />
+
+          <AntIcon
+            v-else-if="showIcon && icon"
+            :icon="icon"
+            :color="iconColorClass"
+            :class="iconClasses"
+            :size="inputIconSize"
+          />
+        </slot>
+      </div>
+    </AntSkeleton>
   </div>
 </template>