@antify/ui 4.1.36 → 4.1.37

package/dist/components/inputs/AntCheckbox.vue

@@ -188,49 +188,49 @@ onMounted(() => {
     :expanded="false"
     :messages="messages"
   >
-    <div class="flex items-center gap-1.5">
-      <div class="relative full-height flex items-center">
-        <input
-          v-model="_modelValue"
-          :class="inputClasses"
-          type="checkbox"
-          :aria-checked="_modelValue"
-          :disabled="disabled || readonly"
-          @blur="onBlur"
-        >
-
-        <div
-          class="absolute flex items-center justify-center !text-white pointer-events-none"
-          :class="size === Size.lg || size === Size.md || size === Size.sm ? 'h-5 w-5' : 'h-4 w-4'"
-        >
-          <AntIcon
-            v-if="_modelValue"
-            :icon="faCheck"
-            :size="itemSize"
-            :color="iconColor"
-          />
-        </div>
-
+    <div class="flex gap-1.5">
+      <div
+        class="relative flex"
+        :class="{
+          'h-5 w-5': size === Size.lg || size === Size.md || size === Size.sm,
+          'h-4 w-4': size === Size.xs || size === Size.xs2,
+        }"
+      >
         <AntSkeleton
           :visible="skeleton"
-          absolute
           rounded
-        />
-      </div>
+        >
+          <input
+            v-model="_modelValue"
+            :class="inputClasses"
+            type="checkbox"
+            :aria-checked="_modelValue"
+            :disabled="disabled || readonly"
+            @blur="onBlur"
+          >
 
-      <div
-        class="flex items-center"
-        :class="props.size === Size.md ? 'h-5' : 'h-4'"
-      >
-        <span :class="contentClasses">
-          <AntSkeleton
-            :visible="skeleton"
-            rounded
+          <div
+            class="absolute flex items-center justify-center !text-white pointer-events-none"
+            :class="size === Size.lg || size === Size.md || size === Size.sm ? 'h-5 w-5' : 'h-4 w-4'"
           >
-            <slot />
-          </AntSkeleton>
-        </span>
+            <AntIcon
+              v-if="_modelValue"
+              :icon="faCheck"
+              :size="itemSize"
+              :color="iconColor"
+            />
+          </div>
+        </AntSkeleton>
       </div>
+
+      <span :class="contentClasses">
+        <AntSkeleton
+          :visible="skeleton"
+          rounded
+        >
+          <slot />
+        </AntSkeleton>
+      </span>
     </div>
   </AntField>
 </template>

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

@@ -55,7 +55,7 @@ const Docs = exports.Docs = {
     },
     template: `
       <div class="m-2">
-        <AntCheckbox v-bind="args" v-model="value"/>
+          <AntCheckbox v-bind="args" v-model="value">Value</AntCheckbox>
         <span class="text-sm text-gray-500">Reactive value: {{ value }}</span>
       </div>
     `

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

@@ -54,7 +54,7 @@ export const Docs = {
     },
     template: `
       <div class="m-2">
-        <AntCheckbox v-bind="args" v-model="value"/>
+          <AntCheckbox v-bind="args" v-model="value">Value</AntCheckbox>
         <span class="text-sm text-gray-500">Reactive value: {{ value }}</span>
       </div>
     `

package/dist/components/inputs/__stories/AntCheckboxGroup.stories.d.ts

@@ -4,3 +4,4 @@ declare const meta: Meta<typeof AntCheckboxGroup>;
 export default meta;
 type Story = StoryObj<typeof AntCheckboxGroup>;
 export declare const Docs: Story;
+export declare const WithLongContent: Story;

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

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.Docs = void 0;
+module.exports = exports.WithLongContent = exports.Docs = void 0;
 var _AntCheckboxGroup = _interopRequireDefault(require("../AntCheckboxGroup.vue"));
 var _enums = require("../../../enums");
 var _Direction = require("../../../enums/Direction.enum");
@@ -55,7 +55,7 @@ const Docs = exports.Docs = {
       };
     },
     template: `
-      <AntCheckboxGroup v-bind="args" v-model="args.modelValue"/>
+        <AntCheckboxGroup v-bind="args" v-model="args.modelValue"/>
     `
   }),
   args: {
@@ -74,4 +74,37 @@ const Docs = exports.Docs = {
       value: "checkbox-4"
     }]
   }
+};
+const WithLongContent = exports.WithLongContent = {
+  render: args => ({
+    components: {
+      AntCheckboxGroup: _AntCheckboxGroup.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+        <div class="w-[150px]">
+          <AntCheckboxGroup v-bind="args" v-model="args.modelValue"/>
+        </div>
+    `
+  }),
+  args: {
+    modelValue: [],
+    checkboxes: [{
+      label: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam",
+      value: "checkbox-1"
+    }, {
+      label: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam",
+      value: "checkbox-2"
+    }, {
+      label: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam",
+      value: "checkbox-3"
+    }, {
+      label: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam",
+      value: "checkbox-4"
+    }]
+  }
 };

package/dist/components/inputs/__stories/AntCheckboxGroup.stories.mjs

@@ -53,7 +53,7 @@ export const Docs = {
       };
     },
     template: `
-      <AntCheckboxGroup v-bind="args" v-model="args.modelValue"/>
+        <AntCheckboxGroup v-bind="args" v-model="args.modelValue"/>
     `
   }),
   args: {
@@ -78,3 +78,41 @@ export const Docs = {
     ]
   }
 };
+export const WithLongContent = {
+  render: (args) => ({
+    components: {
+      AntCheckboxGroup
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+        <div class="w-[150px]">
+          <AntCheckboxGroup v-bind="args" v-model="args.modelValue"/>
+        </div>
+    `
+  }),
+  args: {
+    modelValue: [],
+    checkboxes: [
+      {
+        label: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam",
+        value: "checkbox-1"
+      },
+      {
+        label: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam",
+        value: "checkbox-2"
+      },
+      {
+        label: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam",
+        value: "checkbox-3"
+      },
+      {
+        label: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam",
+        value: "checkbox-4"
+      }
+    ]
+  }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antify/ui",
-  "version": "4.1.36",
+  "version": "4.1.37",
   "private": false,
   "type": "module",
   "exports": {