@antify/ui-module 1.6.0 → 1.7.2

package/dist/runtime/components/inputs/Elements/__stories/AntBaseInput.stories.mjs

@@ -0,0 +1,234 @@
+import { Size } from "../../../../enums/Size.enum.mjs";
+import { BaseInputType } from "../__types/AntBaseInput.types.mjs";
+import AntBaseInput from "../AntBaseInput.vue";
+import AntButton from "../../../buttons/AntButton.vue";
+import AntIcon from "../../../AntIcon.vue";
+import { Grouped as _Grouped } from "../../../../enums/Grouped.enum.mjs";
+import { isRequiredRule, notBlankRule, useFieldValidator } from "@antify/validate";
+import { reactive } from "vue";
+import { faSearch, faEye } from "@fortawesome/free-solid-svg-icons";
+import { InputState } from "../../../../enums/index.mjs";
+import AntFormGroup from "../../../forms/AntFormGroup.vue";
+import AntFormGroupLabel from "../../../forms/AntFormGroupLabel.vue";
+import { Direction } from "../../../../enums/Direction.enum.mjs";
+const meta = {
+  computed: {
+    Direction() {
+      return Direction;
+    }
+  },
+  components: { AntFormGroup },
+  title: "Inputs/Elements/Base Input",
+  component: AntBaseInput,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    modelValue: {
+      control: { type: "text" },
+      table: { type: { summary: "string|number|null" } }
+    },
+    type: {
+      control: { type: "select" },
+      options: Object.values(BaseInputType),
+      table: { defaultValue: { summary: BaseInputType.text } }
+    },
+    state: {
+      control: { type: "select" },
+      options: Object.values(InputState)
+    },
+    size: {
+      control: { type: "select" },
+      options: Object.values(Size),
+      table: { defaultValue: { summary: Size.md } }
+    },
+    placeholder: {
+      control: "text",
+      table: { defaultValue: { summary: "this.label" } }
+    },
+    grouped: {
+      control: { type: "select" },
+      options: Object.values(_Grouped),
+      description: "Where is this fields position in a group",
+      table: { defaultValue: { summary: _Grouped.none } }
+    },
+    wrapperClass: {
+      control: "text",
+      description: 'Class for the first element because the attribute "class" would affect the input element.',
+      table: { type: { summary: "string|object" } }
+    },
+    showIcon: {
+      control: "boolean",
+      description: "Some InputStates can have an icon. Control with this property if it gets shown or not."
+    },
+    iconLeft: {
+      control: { type: "none" },
+      description: "Will be displayed left to the input text.<br>Use Font-awesome Icons."
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntBaseInput },
+    setup: () => {
+      return { args };
+    },
+    template: `
+      <AntBaseInput
+        v-model="args.modelValue"
+        v-bind="args"
+      />`
+  }),
+  args: {
+    modelValue: null,
+    placeholder: "Placeholder"
+  }
+};
+export const withValidator = {
+  render: (args) => ({
+    components: { AntBaseInput },
+    setup: () => {
+      const validator = reactive(useFieldValidator([isRequiredRule, notBlankRule]));
+      return { args, validator, InputState };
+    },
+    template: `
+      <AntBaseInput
+        v-model="args.modelValue"
+        v-bind="args"
+        :state="args.state ? args.state : (validator.hasErrors() ? InputState.danger : undefined)"
+        @validate="(val) => validator.validate(val)"
+      />`
+  }),
+  args: {
+    ...Docs.args,
+    modelValue: ""
+  }
+};
+export const Nullable = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    nullable: true
+  }
+};
+export const IconLeft = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconLeft: faSearch
+  }
+};
+export const IconRight = {
+  render: (args) => ({
+    components: { AntBaseInput, AntIcon },
+    setup: () => {
+      return { args, faEye };
+    },
+    template: `
+      <AntBaseInput
+        v-model="args.modelValue"
+        v-bind="args"
+      >
+        <template #icon-right>
+          <AntIcon :icon="faEye"/>
+        </template>
+      </AntBaseInput>`
+  }),
+  args: {
+    ...Docs.args
+  }
+};
+export const Summary = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
+  render: (args) => ({
+    components: { AntBaseInput, AntButton, AntFormGroup, AntFormGroupLabel },
+    setup: () => {
+      return { args, faSearch, Direction, Size };
+    },
+    template: `
+      <AntFormGroup>
+        <AntFormGroupLabel>State</AntFormGroupLabel>
+        <AntFormGroup :direction="Direction.row">
+          <AntBaseInput v-bind="args" v-model="modelValue" state="base"/>
+          <AntBaseInput v-bind="args" v-model="modelValue" state="info"/>
+          <AntBaseInput v-bind="args" v-model="modelValue" state="success"/>
+          <AntBaseInput v-bind="args" v-model="modelValue" state="warning"/>
+          <AntBaseInput v-bind="args" v-model="modelValue" state="danger"/>
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Size</AntFormGroupLabel>
+        <AntFormGroup :direction="Direction.row">
+          <AntBaseInput v-bind="args" v-model="modelValue" state="base" :size="Size.lg"/>
+          <AntBaseInput v-bind="args" v-model="modelValue" state="info" :size="Size.md"/>
+          <AntBaseInput v-bind="args" v-model="modelValue" state="success" :size="Size.sm"/>
+          <AntBaseInput v-bind="args" v-model="modelValue" state="warning" :size="Size.xs"/>
+          <AntBaseInput v-bind="args" v-model="modelValue" state="danger" :size="Size.xs2"/>
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Value</AntFormGroupLabel>
+        <AntFormGroup :direction="Direction.row">
+          <AntBaseInput v-bind="args" value="A value" state="base"/>
+          <AntBaseInput v-bind="args" value="A value" state="info"/>
+          <AntBaseInput v-bind="args" value="A value" state="success"/>
+          <AntBaseInput v-bind="args" value="A value" state="warning"/>
+          <AntBaseInput v-bind="args" value="A value" state="danger"/>
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Disabled</AntFormGroupLabel>
+        <AntFormGroup :direction="Direction.row">
+          <AntBaseInput v-bind="args" value="A value" disabled state="base"/>
+          <AntBaseInput v-bind="args" value="A value" disabled state="info"/>
+          <AntBaseInput v-bind="args" value="A value" disabled state="success"/>
+          <AntBaseInput v-bind="args" value="A value" disabled state="warning"/>
+          <AntBaseInput v-bind="args" value="A value" disabled state="danger"/>
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Value & Nullable</AntFormGroupLabel>
+        <AntFormGroup :direction="Direction.row">
+          <AntBaseInput v-bind="args" value="A value" nullable state="base"/>
+          <AntBaseInput v-bind="args" value="A value" nullable state="info"/>
+          <AntBaseInput v-bind="args" value="A value" nullable state="success"/>
+          <AntBaseInput v-bind="args" value="A value" nullable state="warning"/>
+          <AntBaseInput v-bind="args" value="A value" nullable state="danger"/>
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Value & Nullable & Disabled</AntFormGroupLabel>
+        <AntFormGroup :direction="Direction.row">
+          <AntBaseInput v-bind="args" value="A value" nullable disabled state="base"/>
+          <AntBaseInput v-bind="args" value="A value" nullable disabled state="info"/>
+          <AntBaseInput v-bind="args" value="A value" nullable disabled state="success"/>
+          <AntBaseInput v-bind="args" value="A value" nullable disabled state="warning"/>
+          <AntBaseInput v-bind="args" value="A value" nullable disabled state="danger"/>
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Placeholder</AntFormGroupLabel>
+        <AntFormGroup :direction="Direction.row">
+          <AntBaseInput v-bind="args" v-model="modelValue" :show-icon="false" state="base"/>
+          <AntBaseInput v-bind="args" v-model="modelValue" :show-icon="false" state="info"/>
+          <AntBaseInput v-bind="args" v-model="modelValue" :show-icon="false" state="success"/>
+          <AntBaseInput v-bind="args" v-model="modelValue" :show-icon="false" state="warning"/>
+          <AntBaseInput v-bind="args" v-model="modelValue" :show-icon="false" state="danger"/>
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Icon left</AntFormGroupLabel>
+        <AntFormGroup :direction="Direction.row">
+          <AntBaseInput v-bind="args" v-model="modelValue" :icon-left="faSearch" state="base"/>
+          <AntBaseInput v-bind="args" v-model="modelValue" :icon-left="faSearch" state="info"/>
+          <AntBaseInput v-bind="args" v-model="modelValue" :icon-left="faSearch" state="success"/>
+          <AntBaseInput v-bind="args" v-model="modelValue" :icon-left="faSearch" state="warning"/>
+          <AntBaseInput v-bind="args" v-model="modelValue" :icon-left="faSearch" state="danger"/>
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Grouped</AntFormGroupLabel>
+        <div class="flex gap-[-2px]">
+          <AntBaseInput v-bind="args" v-model="modelValue" grouped="left"/>
+          <AntBaseInput v-bind="args" v-model="modelValue" grouped="center" state="danger"/>
+          <AntBaseInput v-bind="args" v-model="modelValue" grouped="right" state="info"/>
+        </div>
+      </AntFormGroup>`
+  }),
+  args: {
+    placeholder: "Placeholder"
+  }
+};

package/dist/runtime/components/{form → inputs}/Elements/__stories/AntInputDescription.stories.mjs

@@ -1,13 +1,13 @@
 import AntInputDescription from "../AntInputDescription.vue";
 import { Size } from "../../../../enums/Size.enum.mjs";
-import { InputColorType } from "../../../../enums/index.mjs";
+import { InputState } from "../../../../enums/index.mjs";
 const meta = {
-  title: "Components/Forms/Elements/Ant Input Description",
+  title: "Inputs/Elements/Ant Input Description",
   component: AntInputDescription,
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
     size: {
-      control: { type: "radio" },
+      control: { type: "select" },
       options: Object.values(Size),
       table: { defaultValue: { summary: Size.md } }
     },
@@ -15,9 +15,9 @@ const meta = {
       control: "boolean",
       table: { defaultValue: { summary: false } }
     },
-    colorType: {
+    state: {
       control: { type: "select" },
-      options: Object.values(InputColorType)
+      options: Object.values(InputState)
     }
   }
 };

package/dist/runtime/components/{form → inputs}/Elements/__stories/AntInputLabel.stories.mjs

@@ -2,7 +2,7 @@ import AntInputLabel from "../AntInputLabel.vue";
 import { Size } from "../../../../enums/Size.enum.mjs";
 import AntBaseInput from "../AntBaseInput.vue";
 const meta = {
-  title: "Components/Forms/Elements/Ant Input Label",
+  title: "Inputs/Elements/Ant Input Label",
   component: AntInputLabel,
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
@@ -10,7 +10,7 @@ const meta = {
       control: "text"
     },
     size: {
-      control: { type: "radio" },
+      control: { type: "select" },
       options: Object.values(Size),
       table: { defaultValue: { summary: Size.md } }
     },
@@ -37,7 +37,7 @@ export const WithContent = {
     setup() {
       return { args };
     },
-    template: '<div class="p-4"><AntInputLabel v-bind="args"><AntBaseInput value="Example"></AntBaseInput></AntInputLabel></div>'
+    template: '<div class="p-4"><AntInputLabel v-bind="args"><AntBaseInput value="Example" :size="args.size"></AntBaseInput></AntInputLabel></div>'
   }),
   args: {
     ...Docs.args,

package/dist/runtime/components/{form → inputs}/Elements/__stories/AntInputLimiter.stories.mjs

@@ -1,13 +1,13 @@
 import AntInputLimiter from "../AntInputLimiter.vue";
 import { Size } from "../../../../enums/Size.enum.mjs";
-import { InputColorType } from "../../../../enums/index.mjs";
+import { InputState } from "../../../../enums/index.mjs";
 const meta = {
-  title: "Components/Forms/Elements/Ant Input Limiter",
+  title: "Inputs/Elements/Ant Input Limiter",
   component: AntInputLimiter,
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
     size: {
-      control: { type: "radio" },
+      control: { type: "select" },
       options: Object.values(Size),
       table: { defaultValue: { summary: Size.md } }
     },
@@ -15,9 +15,9 @@ const meta = {
       control: "boolean",
       table: { defaultValue: { summary: false } }
     },
-    colorType: {
+    state: {
       control: { type: "select" },
-      options: Object.values(InputColorType)
+      options: Object.values(InputState)
     }
   }
 };

package/dist/runtime/components/inputs/Elements/__types/index.d.ts

@@ -0,0 +1 @@
+export * from './AntBaseInput.types';

package/dist/runtime/components/inputs/Elements/__types/index.mjs

@@ -0,0 +1 @@
+export * from "./AntBaseInput.types.mjs";

package/dist/runtime/components/{form → inputs}/Elements/index.d.ts

@@ -1,5 +1,5 @@
 import AntBaseInput from './AntBaseInput.vue';
-import AntField from './AntField.vue';
+import AntField from '../../forms/AntField.vue';
 import AntInputDescription from './AntInputDescription.vue';
 import AntInputLabel from './AntInputLabel.vue';
 import AntInputLimiter from './AntInputLimiter.vue';

package/dist/runtime/components/{form → inputs}/Elements/index.mjs

@@ -1,5 +1,5 @@
 import AntBaseInput from "./AntBaseInput.vue";
-import AntField from "./AntField.vue";
+import AntField from "../../forms/AntField.vue";
 import AntInputDescription from "./AntInputDescription.vue";
 import AntInputLabel from "./AntInputLabel.vue";
 import AntInputLimiter from "./AntInputLimiter.vue";

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

@@ -0,0 +1,341 @@
+import AntCheckbox from "../AntCheckbox.vue";
+import { computed, ref } from "vue";
+import { InputState } from "../../../enums/index.mjs";
+import { useFieldValidator } from "@antify/validate";
+import { AntCheckboxSize } from "../__types/AntCheckbox.types.mjs";
+import AntFormGroup from "../../forms/AntFormGroup.vue";
+import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
+const meta = {
+  title: "Inputs/Checkbox",
+  component: AntCheckbox,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    state: {
+      control: { type: "select" },
+      options: Object.values(InputState)
+    },
+    size: {
+      control: { type: "select" },
+      options: Object.values(AntCheckboxSize)
+    }
+  }
+};
+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 modelValue = computed({
+        get() {
+          return args.modelValue;
+        },
+        set(val) {
+          args.modelValue = val;
+        }
+      });
+      const validator = ref(useFieldValidator((val) => !val ? "Check this box!" : true));
+      return { args, modelValue, validator, InputState };
+    },
+    template: `
+      <div class="m-2">
+        <AntCheckbox
+          v-bind="args"
+          v-model="modelValue"
+          :state="args.state ? args.state : (validator.hasErrors() ? InputState.danger : undefined)"
+          :messages="Array.isArray(args.messages) ? args.messages : validator.getErrors()"
+          @validate="(val) => validator.validate(val)"
+        >
+          Accept some kind of document before continuing
+        </AntCheckbox>
+        <span class="text-sm text-gray-500">Reactive value: {{ modelValue }}</span>
+      </div>
+    `
+  }),
+  args: {
+    modelValue: false
+  }
+};
+export const Summary = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
+  render: (args) => ({
+    components: { AntCheckbox, AntFormGroup, AntFormGroupLabel },
+    setup() {
+      const offValue = ref(false);
+      const onValue = ref(true);
+      return {
+        args,
+        offValue,
+        onValue,
+        InputState,
+        AntCheckboxSize
+      };
+    },
+    template: `
+      <AntFormGroup>
+        <AntFormGroupLabel>State & false</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :state="InputState.base"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :state="InputState.info"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :state="InputState.success"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :state="InputState.warning"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :state="InputState.danger"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+        </AntFormGroup>
+
+        <AntFormGroupLabel>State & true</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :state="InputState.base"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :state="InputState.info"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :state="InputState.success"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :state="InputState.warning"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :state="InputState.danger"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+            :messages="['Message']"
+          />
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Size</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :size="AntCheckboxSize.md"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :size="AntCheckboxSize.md"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            :size="AntCheckboxSize.sm"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            :size="AntCheckboxSize.sm"
+            label="Label"
+            description="Lorem ipsum dolor sit amet"
+          />
+        </AntFormGroup>
+        <AntFormGroup direction="row">
+          <AntFormGroup>
+            <AntFormGroupLabel>Disabled</AntFormGroupLabel>
+            <AntFormGroup direction="row">
+              <AntCheckbox
+                v-model="offValue"
+                class="w-28"
+                label="Label"
+                description="Lorem ipsum dolor sit amet."
+                :state="InputState.base"
+                disabled>
+                Value
+              </AntCheckbox>
+              <AntCheckbox
+                v-model="onValue"
+                class="w-28"
+                label="Label"
+                description="Lorem ipsum dolor sit amet."
+                :state="InputState.base"
+                disabled>
+                Value
+              </AntCheckbox>
+            </AntFormGroup>
+          </AntFormGroup>
+          <AntFormGroup>
+            <AntFormGroupLabel>Readonly</AntFormGroupLabel>
+            <AntFormGroup direction="row">
+              <AntCheckbox
+                v-model="offValue"
+                :readonly="true"
+                class="w-28"
+                label="Label"
+                description="Lorem ipsum dolor sit amet."
+                :state="InputState.base">
+                Value
+              </AntCheckbox>
+              <AntCheckbox
+                v-model="onValue"
+                :readonly="true"
+                class="w-28"
+                label="Label"
+                description="Lorem ipsum dolor sit amet."
+                :state="InputState.base">
+                Value
+              </AntCheckbox>
+            </AntFormGroup>
+          </AntFormGroup>
+          <AntFormGroup>
+            <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
+            <AntCheckbox
+              v-model="offValue"
+              class="w-28"
+              label="Label"
+              description="Lorem ipsum dolor sit amet."
+              :state="InputState.base"
+              skeleton>
+              Value
+            </AntCheckbox>
+          </AntFormGroup>
+        </AntFormGroup>
+        <AntFormGroupLabel>Plain</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckbox v-model="offValue"/>
+          <AntCheckbox v-model="onValue"/>
+        </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">
+            Value
+          </AntCheckbox>
+          <AntCheckbox v-model="onValue" 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">
+            Value
+          </AntCheckbox>
+          <AntCheckbox v-model="onValue" 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">
+            Value
+          </AntCheckbox>
+          <AntCheckbox v-model="onValue" 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"/>
+        </AntFormGroup>
+        <AntFormGroupLabel>Label & Description & Content</AntFormGroupLabel>
+        <AntFormGroup direction="row">
+          <AntCheckbox
+            v-model="offValue"
+            class="w-28"
+            description="Lorem ipsum dolor sit amet"
+            label="Label"
+          >
+            Value
+          </AntCheckbox>
+          <AntCheckbox
+            v-model="onValue"
+            class="w-28"
+            description="Lorem ipsum dolor sit amet"
+            label="Label"
+          >
+            Value
+          </AntCheckbox>
+        </AntFormGroup>
+      </AntFormGroup>
+    `
+  })
+};