@antify/ui-module 1.1.3

package/dist/runtime/components/form/AntCheckboxWidget/__stories/AntCheckbox.stories.mjs

@@ -0,0 +1,286 @@
+import AntCheckbox from "../AntCheckbox.vue";
+import { computed, ref } from "vue";
+import { InputColorType, Size } from "../../../../enums/index.mjs";
+import { useFieldValidator } from "@antify/validate";
+const meta = {
+  title: "Components/Forms/Checkbox/Checkbox",
+  component: AntCheckbox,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    colorType: {
+      control: { type: "select" },
+      options: Object.values(InputColorType)
+    },
+    size: {
+      control: { type: "select" },
+      options: Object.values(Size)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntCheckbox },
+    setup() {
+      const value = computed({
+        get() {
+          return args.modelValue;
+        },
+        set(val) {
+          args.modelValue = val;
+        }
+      });
+      return { args, value };
+    },
+    template: `
+      <div class="m-2">
+        <AntCheckbox v-bind="args" v-model="value"/>
+        <span class="text-sm text-gray-500">Reactive value: {{ value }}</span>
+      </div>
+    `
+  })
+};
+export const WithValidator = {
+  render: (args) => ({
+    components: { AntCheckbox },
+    setup() {
+      const value = computed({
+        get() {
+          return args.modelValue;
+        },
+        set(val) {
+          args.modelValue = val;
+        }
+      });
+      const validator = ref(useFieldValidator((val) => val || "Check this box!"));
+      validator.value.validate(value.value);
+      return { args, value, validator };
+    },
+    template: `
+      <div class="m-2">
+        <AntCheckbox v-bind="args" v-model="value" :validator="validator" value-label="Accept some kind of document before continuing"/>
+        <span class="text-sm text-gray-500">Reactive value: {{ value }}</span>
+      </div>
+    `
+  })
+};
+export const Summary = {
+  render: (args) => ({
+    components: { AntCheckbox },
+    setup() {
+      const offValue = ref(false);
+      const onValue = ref(true);
+      return {
+        args,
+        offValue,
+        onValue,
+        InputColorType,
+        Size
+      };
+    },
+    template: `
+      <h3>Medium Size</h3>
+      <div class="flex flex-col gap-5">
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="offValue" :color-type="InputColorType.base" />
+          <AntCheckbox v-model="offValue" :color-type="InputColorType.info" />
+          <AntCheckbox v-model="offValue" :color-type="InputColorType.success" />
+          <AntCheckbox v-model="offValue" :color-type="InputColorType.warning" />
+          <AntCheckbox v-model="offValue" :color-type="InputColorType.danger" />
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="onValue" :color-type="InputColorType.base" />
+          <AntCheckbox v-model="onValue" :color-type="InputColorType.info" />
+          <AntCheckbox v-model="onValue" :color-type="InputColorType.success" />
+          <AntCheckbox v-model="onValue" :color-type="InputColorType.warning" />
+          <AntCheckbox v-model="onValue" :color-type="InputColorType.danger" />
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="offValue" label="Label" :color-type="InputColorType.base" />
+          <AntCheckbox v-model="offValue" label="Label" :color-type="InputColorType.info" />
+          <AntCheckbox v-model="offValue" label="Label" :color-type="InputColorType.success" />
+          <AntCheckbox v-model="offValue" label="Label" :color-type="InputColorType.warning" />
+          <AntCheckbox v-model="offValue" label="Label" :color-type="InputColorType.danger" />
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="onValue" label="Label" :color-type="InputColorType.base" />
+          <AntCheckbox v-model="onValue" label="Label" :color-type="InputColorType.info" />
+          <AntCheckbox v-model="onValue" label="Label" :color-type="InputColorType.success" />
+          <AntCheckbox v-model="onValue" label="Label" :color-type="InputColorType.warning" />
+          <AntCheckbox v-model="onValue" label="Label" :color-type="InputColorType.danger" />
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="offValue" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" />
+          <AntCheckbox v-model="offValue" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" />
+          <AntCheckbox v-model="offValue" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" />
+          <AntCheckbox v-model="offValue" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" />
+          <AntCheckbox v-model="offValue" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" />
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="onValue" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" />
+          <AntCheckbox v-model="onValue" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" />
+          <AntCheckbox v-model="onValue" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" />
+          <AntCheckbox v-model="onValue" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" />
+          <AntCheckbox v-model="onValue" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" />
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" />
+          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" />
+          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" />
+          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" />
+          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" />
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" />
+          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" />
+          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" />
+          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" />
+          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" />
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" readonly/>
+          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" readonly/>
+          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" readonly/>
+          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" readonly/>
+          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" readonly/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" readonly/>
+          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" readonly/>
+          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" readonly/>
+          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" readonly/>
+          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" readonly/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" disabled/>
+          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" disabled/>
+          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" disabled/>
+          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" disabled/>
+          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" disabled/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" disabled/>
+          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" disabled/>
+          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" disabled/>
+          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" disabled/>
+          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" disabled/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" skeleton/>
+          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" skeleton/>
+          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" skeleton/>
+          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" skeleton/>
+          <AntCheckbox v-model="offValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" skeleton/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" skeleton/>
+          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" skeleton/>
+          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" skeleton/>
+          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" skeleton/>
+          <AntCheckbox v-model="onValue" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" skeleton/>
+        </div>
+      </div>
+      <h3>Small Size</h3>
+      <div class="flex flex-col gap-5">
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="offValue" :size="Size.sm" :color-type="InputColorType.base" />
+          <AntCheckbox v-model="offValue" :size="Size.sm" :color-type="InputColorType.info" />
+          <AntCheckbox v-model="offValue" :size="Size.sm" :color-type="InputColorType.success" />
+          <AntCheckbox v-model="offValue" :size="Size.sm" :color-type="InputColorType.warning" />
+          <AntCheckbox v-model="offValue" :size="Size.sm" :color-type="InputColorType.danger" />
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="onValue" :size="Size.sm" :color-type="InputColorType.base" />
+          <AntCheckbox v-model="onValue" :size="Size.sm" :color-type="InputColorType.info" />
+          <AntCheckbox v-model="onValue" :size="Size.sm" :color-type="InputColorType.success" />
+          <AntCheckbox v-model="onValue" :size="Size.sm" :color-type="InputColorType.warning" />
+          <AntCheckbox v-model="onValue" :size="Size.sm" :color-type="InputColorType.danger" />
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" :color-type="InputColorType.base" />
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" :color-type="InputColorType.info" />
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" :color-type="InputColorType.success" />
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" :color-type="InputColorType.warning" />
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" :color-type="InputColorType.danger" />
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" :color-type="InputColorType.base" />
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" :color-type="InputColorType.info" />
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" :color-type="InputColorType.success" />
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" :color-type="InputColorType.warning" />
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" :color-type="InputColorType.danger" />
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" />
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" />
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" />
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" />
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" />
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" />
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" />
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" />
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" />
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" />
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" />
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" />
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" />
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" />
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" />
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" />
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" />
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" />
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" />
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" />
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" readonly/>
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" readonly/>
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" readonly/>
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" readonly/>
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" readonly/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" readonly/>
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" readonly/>
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" readonly/>
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" readonly/>
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" readonly/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" disabled/>
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" disabled/>
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" disabled/>
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" disabled/>
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" disabled/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" disabled/>
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" disabled/>
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" disabled/>
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" disabled/>
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" disabled/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" skeleton/>
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" skeleton/>
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" skeleton/>
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" skeleton/>
+          <AntCheckbox v-model="offValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" skeleton/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.base" skeleton/>
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.info" skeleton/>
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.success" skeleton/>
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.warning" skeleton/>
+          <AntCheckbox v-model="onValue" :size="Size.sm" label="Label" value-label="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr." :color-type="InputColorType.danger" skeleton/>
+        </div>
+      </div>
+    `
+  })
+};

package/dist/runtime/components/form/AntCheckboxWidget/__stories/AntCheckboxGroup.stories.d.ts

@@ -0,0 +1,7 @@
+import { type Meta, type StoryObj } from '@storybook/vue3';
+import AntCheckboxGroup from '../AntCheckboxGroup.vue';
+declare const meta: Meta<typeof AntCheckboxGroup>;
+export default meta;
+type Story = StoryObj<typeof AntCheckboxGroup>;
+export declare const Docs: Story;
+export declare const WithValidator: Story;

package/dist/runtime/components/form/AntCheckboxWidget/__stories/AntCheckboxGroup.stories.mjs

@@ -0,0 +1,96 @@
+import AntCheckboxGroup from "../AntCheckboxGroup.vue";
+import { computed, ref } from "vue";
+import { InputColorType, Size } from "../../../../enums/index.mjs";
+import { Direction } from "../../../../enums/Direction.enum.mjs";
+import { useFieldValidator } from "@antify/validate";
+const meta = {
+  title: "Components/Forms/Checkbox/Checkbox Group",
+  component: AntCheckboxGroup,
+  argTypes: {
+    modelValue: {
+      description: "Contains the list of selected checkboxes (the value prop of the checkboxes)"
+    },
+    checkboxes: {
+      description: "List of checkboxes to be displayed"
+    },
+    colorType: {
+      control: { type: "select" },
+      options: Object.values(InputColorType)
+    },
+    size: {
+      control: { type: "select" },
+      options: Object.values(Size)
+    },
+    direction: {
+      control: { type: "select" },
+      options: Object.values(Direction)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntCheckboxGroup },
+    setup() {
+      const value = computed({
+        get() {
+          return args.modelValue;
+        },
+        set(val) {
+          args.modelValue = val;
+        }
+      });
+      return {
+        args,
+        value
+      };
+    },
+    template: `
+      <AntCheckboxGroup v-bind="args" v-model="value" />
+    `
+  }),
+  args: {
+    modelValue: [],
+    checkboxes: [{
+      label: "Checkbox 1",
+      value: "checkbox-1"
+    }, {
+      label: "Checkbox 2",
+      value: "checkbox-2"
+    }, {
+      label: "Checkbox 3",
+      value: "checkbox-3"
+    }, {
+      label: "Checkbox 4",
+      value: "checkbox-4"
+    }]
+  }
+};
+export const WithValidator = {
+  render: (args) => ({
+    components: { AntCheckboxGroup },
+    setup() {
+      const value = computed({
+        get() {
+          return args.modelValue;
+        },
+        set(val) {
+          args.modelValue = val;
+        }
+      });
+      const validator = ref(useFieldValidator((val) => val.length >= 2 || "Select at least 2"));
+      validator.value.validate(value.value);
+      return {
+        args,
+        value,
+        validator
+      };
+    },
+    template: `
+      <AntCheckboxGroup v-bind="args" v-model="value" :validator="validator"/>
+    `
+  }),
+  args: {
+    ...Docs.args
+  }
+};

package/dist/runtime/components/form/AntCheckboxWidget/__types/AntCheckbox.d.ts

@@ -0,0 +1,6 @@
+export type AntCheckboxType = {
+    label: string;
+    value: string;
+    disabled?: boolean;
+    readonly?: boolean;
+};

package/dist/runtime/components/form/AntFormGroup.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import {Direction} from '../../enums/Direction.enum';
+import {computed} from 'vue';
+
+const props = withDefaults(defineProps<{
+  direction?: Direction;
+}>(), {
+  direction: Direction.column,
+});
+
+const classes = computed(() => ({
+  'flex-col space-y-2.5': props.direction === Direction.column,
+  'flex-row space-x-2.5': props.direction === Direction.row,
+}));
+</script>
+
+<template>
+  <section class="flex" :class="classes">
+    <slot/>
+  </section>
+</template>

package/dist/runtime/components/form/AntFormGroupLabel.vue

@@ -0,0 +1,5 @@
+<template>
+  <div class="text-primary-500 text-xl font-semibold">
+    <slot/>
+  </div>
+</template>

package/dist/runtime/components/form/AntNumberInput.vue

@@ -0,0 +1,170 @@
+<script lang="ts" setup>
+import {computed, onMounted, watch} from 'vue';
+import AntButton from '../buttons/AntButton.vue'
+import AntField from './Elements/AntField.vue'
+import AntBaseInput from './Elements/AntBaseInput.vue'
+import {Size} from '../../enums/Size.enum'
+import {faPlus, faMinus} from '@fortawesome/free-solid-svg-icons';
+import {ColorType, InputColorType} from '../../enums/ColorType.enum';
+import {handleEnumValidation} from '../../handler';
+import {useVModel} from '@vueuse/core';
+import {Grouped} from '../../enums/Grouped.enum';
+import {BaseInputType} from './Elements/__types';
+
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(defineProps<{
+  modelValue: number | null;
+  label?: string;
+  placeholder?: string;
+  description?: string;
+  size?: Size;
+  colorType?: InputColorType;
+  disabled?: boolean;
+  skeleton?: boolean;
+  steps?: number;
+  min?: number;
+  max?: number;
+  limiter?: boolean;
+  errors?: string[];
+}>(), {
+  colorType: InputColorType.base,
+  disabled: false,
+  skeleton: false,
+  size: Size.md,
+  steps: 1,
+  limiter: false,
+  errors: []
+});
+const emit = defineEmits(['update:modelValue', 'validate']);
+const _modelValue = useVModel(props, 'modelValue', emit);
+const isPrevButtonDisabled = computed(() => {
+  if (props.disabled) {
+    return true;
+  }
+
+  if (props.min !== undefined && props.min !== null) {
+    return _modelValue.value <= props.min;
+  }
+
+  return false;
+});
+const isNextButtonDisabled = computed(() => {
+  if (props.disabled) {
+    return true;
+  }
+
+  if (props.max !== undefined && props.max !== null) {
+    return _modelValue.value >= props.max;
+  }
+
+  return false;
+});
+const hasErrors = computed(() => props.errors.length > 0);
+const buttonColorType = computed(() => {
+  if (hasErrors.value) {
+    return ColorType.danger;
+  }
+
+  return props.colorType;
+});
+
+onMounted(() => {
+  handleEnumValidation(props.size, Size, 'size');
+  handleEnumValidation(props.colorType, InputColorType, 'colorType');
+});
+
+watch(_modelValue, (val) => {
+  if (hasErrors.value) {
+    emit('validate', val)
+  }
+});
+
+function subtract() {
+  if (_modelValue.value === null) {
+    _modelValue.value = props.max || 0;
+  } else if (props.max !== undefined && _modelValue.value - props.steps > props.max) {
+    _modelValue.value = props.max;
+  } else {
+    _modelValue.value -= props.steps;
+  }
+
+  if (hasErrors.value) {
+    emit('validate', _modelValue.value)
+  }
+}
+
+function add() {
+  if (_modelValue.value === null) {
+    return _modelValue.value = props.min || 0;
+  } else if (props.min !== undefined && _modelValue.value + props.steps < props.min) {
+    return _modelValue.value = props.min;
+  } else {
+    _modelValue.value += props.steps;
+  }
+
+  if (hasErrors.value) {
+    emit('validate', _modelValue.value)
+  }
+}
+function onButtonBlur() {
+  emit('validate', _modelValue.value)
+}
+</script>
+
+<template>
+  <AntField
+    :label="label"
+    :size="size"
+    :skeleton="skeleton"
+    :description="description"
+    :color-type="colorType"
+    :limiter-max-value="limiter && max !== undefined ? max : undefined"
+    :limiter-value="limiter && _modelValue !== undefined && _modelValue !== null ? _modelValue : undefined"
+    :errors="errors"
+  >
+    <div
+      class="flex relative"
+    >
+      <AntButton
+        :icon-left="faMinus"
+        :grouped="Grouped.left"
+        :color-type="buttonColorType"
+        :size="size"
+        :skeleton="skeleton"
+        :disabled="isPrevButtonDisabled"
+        @click="subtract"
+        @blur="onButtonBlur"
+      />
+
+      <AntBaseInput
+        v-model:value.number="_modelValue"
+        :type="BaseInputType.number"
+        :grouped="Grouped.center"
+        wrapper-class="flex-grow"
+        :color-type="colorType"
+        :size="size"
+        :skeleton="skeleton"
+        :min="min"
+        :max="max"
+        :disabled="disabled"
+        :placeholder="placeholder || label"
+        :show-icon="false"
+        :has-errors="hasErrors"
+        v-bind="$attrs"
+        @validate="val => $emit('validate', val)"
+      />
+
+      <AntButton
+        :icon-left="faPlus"
+        :grouped="Grouped.right"
+        :color-type="buttonColorType"
+        :size="size"
+        :skeleton="skeleton"
+        :disabled="isNextButtonDisabled"
+        @click="add"
+        @blur="onButtonBlur"
+      />
+    </div>
+  </AntField>
+</template>