@antify/ui 2.5.7 → 3.1.0

package/dist/components/AntToaster.vue

@@ -21,6 +21,24 @@ const props = withDefaults(defineProps<{
   position: CornerPosition.bottomLeft,
 });
 
+const _toasts = computed(() => {
+  if(props.position === CornerPosition.topLeft || props.position === CornerPosition.topRight) {
+    return props.toasts;
+  }
+
+  return [
+    ...props.toasts,
+  ].reverse();
+});
+
+const transitionName = computed(() => {
+  if(props.position === CornerPosition.topLeft || props.position === CornerPosition.topRight) {
+    return 'list-top';
+  }
+
+  return 'list-bottom';
+});
+
 const classes = computed(() => ({
   'left-0 top-0 items-start': props.position === CornerPosition.topLeft,
   'right-0 top-0 items-end': props.position === CornerPosition.topRight,
@@ -35,9 +53,9 @@ const classes = computed(() => ({
     :class="classes"
     data-e2e="toaster"
   >
-    <TransitionGroup name="list">
+    <TransitionGroup :name="transitionName">
       <AntToast
-        v-for="toast of toasts"
+        v-for="toast of _toasts"
         :key="`ant-toast-${toast.id}`"
         :title="toast.title"
         :state="toast.type"
@@ -56,24 +74,33 @@ const classes = computed(() => ({
 </template>
 
 <style>
-.list-move {
-  transition: all 0.5s ease;
+.list-top-move, .list-bottom-move {
+  transition: transform 0.3s ease, opacity 0.3s ease;
+}
+.list-top-enter-active,
+.list-top-leave-active,
+.list-bottom-enter-active,
+.list-bottom-leave-active {
+  transition: opacity 0.3s, transform 0.3s;
 }
 
-.list-enter-active {
-  animation: fade-in .6s;
+.list-top-enter-from,
+.list-top-leave-to {
+  opacity: 0;
+  transform: scale(0.8) translateY(-20px);
 }
 
-.list-leave-active {
-  animation: fade-in .4s reverse;
+.list-bottom-enter-from,
+.list-bottom-leave-to {
+  opacity: 0;
+  transform: scale(0.8) translateY(20px);
 }
 
-@keyframes fade-in {
-  0% {
-    opacity: 0;
-  }
-  100% {
-    opacity: 1;
-  }
+.list-top-enter-to,
+.list-top-leave-from,
+.list-bottom-enter-to,
+.list-bottom-leave-from {
+  opacity: 1;
+  transform: scale(1) translateY(0);
 }
 </style>

package/dist/components/__stories/AntListGroup.stories.js

@@ -35,15 +35,12 @@ const Docs = exports.Docs = {
       };
     },
     template: `
-          <div class="p-4 bg-base-100">
-            <AntListGroup v-bind="args">
-              <AntListGroupItem to="/example" :icon-left="faUser">Profile</AntListGroupItem>
-              <AntListGroupItem to="/example" :icon-left="faDownload">Downloads</AntListGroupItem>
-              <AntListGroupItem to="/example" :icon-left="faMessage">Messages</AntListGroupItem>
-              <AntListGroupItem to="/example" :icon-left="faCog">Settings</AntListGroupItem>
-            </AntListGroup>
-          </div>
-        `
+      <AntListGroup v-bind="args">
+        <AntListGroupItem to="/example" :icon-left="faUser">Profile</AntListGroupItem>
+        <AntListGroupItem to="/example" :icon-left="faDownload">Downloads</AntListGroupItem>
+        <AntListGroupItem to="/example" :icon-left="faMessage">Messages</AntListGroupItem>
+        <AntListGroupItem to="/example" :icon-left="faCog">Settings</AntListGroupItem>
+      </AntListGroup>`
   }),
   args: {}
 };

package/dist/components/__stories/AntListGroup.stories.mjs

@@ -33,15 +33,12 @@ export const Docs = {
       };
     },
     template: `
-          <div class="p-4 bg-base-100">
-            <AntListGroup v-bind="args">
-              <AntListGroupItem to="/example" :icon-left="faUser">Profile</AntListGroupItem>
-              <AntListGroupItem to="/example" :icon-left="faDownload">Downloads</AntListGroupItem>
-              <AntListGroupItem to="/example" :icon-left="faMessage">Messages</AntListGroupItem>
-              <AntListGroupItem to="/example" :icon-left="faCog">Settings</AntListGroupItem>
-            </AntListGroup>
-          </div>
-        `
+      <AntListGroup v-bind="args">
+        <AntListGroupItem to="/example" :icon-left="faUser">Profile</AntListGroupItem>
+        <AntListGroupItem to="/example" :icon-left="faDownload">Downloads</AntListGroupItem>
+        <AntListGroupItem to="/example" :icon-left="faMessage">Messages</AntListGroupItem>
+        <AntListGroupItem to="/example" :icon-left="faCog">Settings</AntListGroupItem>
+      </AntListGroup>`
   }),
   args: {}
 };

package/dist/components/__stories/AntListGroupItem.stories.js

@@ -48,7 +48,7 @@ const Docs = exports.Docs = {
         args
       };
     },
-    template: '<div class="p-4 bg-base-100"><AntListGroupItem v-bind="args">Item</AntListGroupItem></div>'
+    template: '<div class="dashed"><AntListGroupItem v-bind="args">Item</AntListGroupItem></div>'
   }),
   args: {}
 };

package/dist/components/__stories/AntListGroupItem.stories.mjs

@@ -46,7 +46,7 @@ export const Docs = {
         args
       };
     },
-    template: '<div class="p-4 bg-base-100"><AntListGroupItem v-bind="args">Item</AntListGroupItem></div>'
+    template: '<div class="dashed"><AntListGroupItem v-bind="args">Item</AntListGroupItem></div>'
   }),
   args: {}
 };

package/dist/components/__stories/AntToaster.stories.js

@@ -60,7 +60,7 @@ const Docs = exports.Docs = {
     },
     template: `
       <div class="dashed h-60 relative">
-        <AntToaster v-bind="args"/>
+        <AntToaster v-bind="args" />
       </div>
     `
   }),
@@ -122,7 +122,7 @@ const UseToaster = exports.UseToaster = {
         </AntButton>
       </AntFormGroup>
 
-      <AntToaster v-bind="args" :toasts="toaster.getToasts()"/>
+      <AntToaster v-bind="args" :toasts="toaster.getToasts()" />
     `
   })
 };

package/dist/components/__stories/AntToaster.stories.mjs

@@ -60,7 +60,7 @@ export const Docs = {
     },
     template: `
       <div class="dashed h-60 relative">
-        <AntToaster v-bind="args"/>
+        <AntToaster v-bind="args" />
       </div>
     `
   }),
@@ -130,7 +130,7 @@ export const UseToaster = {
         </AntButton>
       </AntFormGroup>
 
-      <AntToaster v-bind="args" :toasts="toaster.getToasts()"/>
+      <AntToaster v-bind="args" :toasts="toaster.getToasts()" />
     `
   })
 };

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>