@antify/ui 2.5.7 → 3.1.0

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>
 

package/dist/components/inputs/__stories/AntCheckbox.stories.js

@@ -90,6 +90,7 @@ const Summary = exports.Summary = {
         <AntFormGroup direction="row">
           <AntCheckbox
             v-model="offValue"
+            v-bind="args"
             class="w-28"
             :state="InputState.base"
             label="Label"
@@ -98,6 +99,7 @@ const Summary = exports.Summary = {
           />
           <AntCheckbox
             v-model="offValue"
+            v-bind="args"
             class="w-28"
             :state="InputState.info"
             label="Label"
@@ -106,6 +108,7 @@ const Summary = exports.Summary = {
           />
           <AntCheckbox
             v-model="offValue"
+            v-bind="args"
             class="w-28"
             :state="InputState.success"
             label="Label"
@@ -114,6 +117,7 @@ const Summary = exports.Summary = {
           />
           <AntCheckbox
             v-model="offValue"
+            v-bind="args"
             class="w-28"
             :state="InputState.warning"
             label="Label"
@@ -122,6 +126,7 @@ const Summary = exports.Summary = {
           />
           <AntCheckbox
             v-model="offValue"
+            v-bind="args"
             class="w-28"
             :state="InputState.danger"
             label="Label"
@@ -134,6 +139,7 @@ const Summary = exports.Summary = {
         <AntFormGroup direction="row">
           <AntCheckbox
             v-model="onValue"
+            v-bind="args"
             class="w-28"
             :state="InputState.base"
             label="Label"
@@ -142,6 +148,7 @@ const Summary = exports.Summary = {
           />
           <AntCheckbox
             v-model="onValue"
+            v-bind="args"
             class="w-28"
             :state="InputState.info"
             label="Label"
@@ -150,6 +157,7 @@ const Summary = exports.Summary = {
           />
           <AntCheckbox
             v-model="onValue"
+            v-bind="args"
             class="w-28"
             :state="InputState.success"
             label="Label"
@@ -158,6 +166,7 @@ const Summary = exports.Summary = {
           />
           <AntCheckbox
             v-model="onValue"
+            v-bind="args"
             class="w-28"
             :state="InputState.warning"
             label="Label"
@@ -166,6 +175,7 @@ const Summary = exports.Summary = {
           />
           <AntCheckbox
             v-model="onValue"
+            v-bind="args"
             class="w-28"
             :state="InputState.danger"
             label="Label"
@@ -178,6 +188,7 @@ const Summary = exports.Summary = {
         <AntFormGroup direction="row">
           <AntCheckbox
             v-model="offValue"
+            v-bind="args"
             class="w-28"
             :size="Size.lg"
             label="Label"
@@ -185,6 +196,7 @@ const Summary = exports.Summary = {
           />
           <AntCheckbox
             v-model="onValue"
+            v-bind="args"
             class="w-28"
             :size="Size.lg"
             label="Label"
@@ -192,6 +204,7 @@ const Summary = exports.Summary = {
           />
           <AntCheckbox
             v-model="offValue"
+            v-bind="args"
             class="w-28"
             :size="Size.md"
             label="Label"
@@ -199,6 +212,7 @@ const Summary = exports.Summary = {
           />
           <AntCheckbox
             v-model="onValue"
+            v-bind="args"
             class="w-28"
             :size="Size.md"
             label="Label"
@@ -206,6 +220,7 @@ const Summary = exports.Summary = {
           />
           <AntCheckbox
             v-model="offValue"
+            v-bind="args"
             class="w-28"
             :size="Size.sm"
             label="Label"
@@ -213,6 +228,7 @@ const Summary = exports.Summary = {
           />
           <AntCheckbox
             v-model="onValue"
+            v-bind="args"
             class="w-28"
             :size="Size.sm"
             label="Label"
@@ -220,6 +236,7 @@ const Summary = exports.Summary = {
           />
           <AntCheckbox
             v-model="offValue"
+            v-bind="args"
             class="w-28"
             :size="Size.xs"
             label="Label"
@@ -227,6 +244,7 @@ const Summary = exports.Summary = {
           />
           <AntCheckbox
             v-model="onValue"
+            v-bind="args"
             class="w-28"
             :size="Size.xs"
             label="Label"
@@ -234,6 +252,7 @@ const Summary = exports.Summary = {
           />
           <AntCheckbox
             v-model="offValue"
+            v-bind="args"
             class="w-28"
             :size="Size.xs2"
             label="Label"
@@ -241,6 +260,7 @@ const Summary = exports.Summary = {
           />
           <AntCheckbox
             v-model="onValue"
+            v-bind="args"
             class="w-28"
             :size="Size.xs"
             label="Label"
@@ -253,6 +273,7 @@ const Summary = exports.Summary = {
             <AntFormGroup direction="row">
               <AntCheckbox
                 v-model="offValue"
+                v-bind="args"
                 class="w-28"
                 label="Label"
                 description="Lorem ipsum dolor sit amet."
@@ -262,6 +283,7 @@ const Summary = exports.Summary = {
               </AntCheckbox>
               <AntCheckbox
                 v-model="onValue"
+                v-bind="args"
                 class="w-28"
                 label="Label"
                 description="Lorem ipsum dolor sit amet."
@@ -276,6 +298,7 @@ const Summary = exports.Summary = {
             <AntFormGroup direction="row">
               <AntCheckbox
                 v-model="offValue"
+                v-bind="args"
                 :readonly="true"
                 class="w-28"
                 label="Label"
@@ -285,6 +308,7 @@ const Summary = exports.Summary = {
               </AntCheckbox>
               <AntCheckbox
                 v-model="onValue"
+                v-bind="args"
                 :readonly="true"
                 class="w-28"
                 label="Label"
@@ -298,6 +322,7 @@ const Summary = exports.Summary = {
             <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
             <AntCheckbox
               v-model="offValue"
+              v-bind="args"
               class="w-28"
               label="Label"
               description="Lorem ipsum dolor sit amet."
@@ -309,49 +334,50 @@ const Summary = exports.Summary = {
         </AntFormGroup>
         <AntFormGroupLabel>Plain</AntFormGroupLabel>
         <AntFormGroup direction="row">
-          <AntCheckbox v-model="offValue"/>
-          <AntCheckbox v-model="onValue"/>
+          <AntCheckbox v-model="offValue" v-bind="args" />
+          <AntCheckbox v-model="onValue"  v-bind="args" />
         </AntFormGroup>
         <AntFormGroupLabel>Label & label + value</AntFormGroupLabel>
         <AntFormGroup direction="row">
-          <AntCheckbox v-model="offValue" label="Label"/>
-          <AntCheckbox v-model="onValue" label="Label"/>
-          <AntCheckbox v-model="offValue" label="Label">
+          <AntCheckbox v-model="offValue" v-bind="args" label="Label"/>
+          <AntCheckbox v-model="onValue" v-bind="args" label="Label"/>
+          <AntCheckbox v-model="offValue" v-bind="args" label="Label">
             Value
           </AntCheckbox>
-          <AntCheckbox v-model="onValue" label="Label">
+          <AntCheckbox v-model="onValue" v-bind="args" label="Label">
             Value
           </AntCheckbox>
         </AntFormGroup>
         <AntFormGroupLabel>Description & description + value</AntFormGroupLabel>
         <AntFormGroup direction="row">
-          <AntCheckbox v-model="offValue" class="w-28" description="Lorem ipsum dolor sit amet"/>
-          <AntCheckbox v-model="onValue" class="w-28" description="Lorem ipsum dolor sit amet"/>
-          <AntCheckbox v-model="offValue" class="w-28" description="Lorem ipsum dolor sit amet">
+          <AntCheckbox v-model="offValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet"/>
+          <AntCheckbox v-model="onValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet"/>
+          <AntCheckbox v-model="offValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet">
             Value
           </AntCheckbox>
-          <AntCheckbox v-model="onValue" class="w-28" description="Lorem ipsum dolor sit amet">
+          <AntCheckbox v-model="onValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet">
             Value
           </AntCheckbox>
         </AntFormGroup>
         <AntFormGroupLabel>Content</AntFormGroupLabel>
         <AntFormGroup direction="row">
-          <AntCheckbox v-model="offValue" class="w-28">
+          <AntCheckbox v-model="offValue" v-bind="args" class="w-28">
             Value
           </AntCheckbox>
-          <AntCheckbox v-model="onValue" class="w-28">
+          <AntCheckbox v-model="onValue" v-bind="args" class="w-28">
             Value
           </AntCheckbox>
         </AntFormGroup>
         <AntFormGroupLabel>Label & Description</AntFormGroupLabel>
         <AntFormGroup direction="row">
-          <AntCheckbox v-model="offValue" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
-          <AntCheckbox v-model="onValue" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
+          <AntCheckbox v-model="offValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
+          <AntCheckbox v-model="onValue" v-bind="args" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
         </AntFormGroup>
         <AntFormGroupLabel>Label & Description & Content</AntFormGroupLabel>
         <AntFormGroup direction="row">
           <AntCheckbox
             v-model="offValue"
+            v-bind="args"
             class="w-28"
             description="Lorem ipsum dolor sit amet"
             label="Label"
@@ -360,6 +386,7 @@ const Summary = exports.Summary = {
           </AntCheckbox>
           <AntCheckbox
             v-model="onValue"
+            v-bind="args"
             class="w-28"
             description="Lorem ipsum dolor sit amet"
             label="Label"