@antify/ui-module 1.1.3

package/dist/runtime/components/form/__stories/AntSearch.stories.d.ts

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

package/dist/runtime/components/form/__stories/AntSearch.stories.mjs

@@ -0,0 +1,43 @@
+import { Size } from "../../../enums/Size.enum.mjs";
+import AntSearch from "../AntSearch.vue";
+const meta = {
+  title: "Components/Forms/Search",
+  component: AntSearch,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    modelValue: {
+      control: "text",
+      table: { type: { summary: "string|null" } }
+    },
+    size: {
+      control: { type: "radio" },
+      options: Object.values(Size)
+    },
+    inputTimeout: {
+      description: "How long is the timeout between inputs to update the value in milliseconds"
+    },
+    query: {
+      description: "Read and write the value into url as urldecoded string. Using the given string as query name."
+    },
+    placeholder: {
+      table: { defaultValue: { summary: "Search" } }
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntSearch },
+    setup() {
+      return { args };
+    },
+    template: `
+      <AntSearch v-bind="args" v-model="args.modelValue"/>
+      <div class="text-xs mt-4">Reactive value: {{ args.modelValue }}</div>
+    `
+  }),
+  args: {
+    modelValue: "",
+    placeholder: "Search"
+  }
+};

package/dist/runtime/components/form/__stories/AntSelect.stories.d.ts

@@ -0,0 +1,13 @@
+import { type Meta, type StoryObj } from '@storybook/vue3';
+import AntSelect from '../AntSelect.vue';
+declare const meta: Meta<typeof AntSelect>;
+export default meta;
+type Story = StoryObj<typeof AntSelect>;
+export declare const Docs: Story;
+export declare const withValidator: Story;
+export declare const nullable: Story;
+export declare const skeleton: Story;
+export declare const disabled: Story;
+export declare const withPlaceholder: Story;
+export declare const ellipsisText: Story;
+export declare const summary: Story;

package/dist/runtime/components/form/__stories/AntSelect.stories.mjs

@@ -0,0 +1,220 @@
+import { Size } from "../../../enums/Size.enum.mjs";
+import AntSelect from "../AntSelect.vue";
+import { computed } from "vue";
+import { useFieldValidator } from "@antify/validate";
+import { InputColorType } from "../../../enums/index.mjs";
+const meta = {
+  title: "Components/Forms/Select",
+  component: AntSelect,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    modelValue: {
+      table: { type: { summary: "string|null" } }
+    },
+    options: {
+      description: "List of SelectOptions",
+      table: {
+        type: {
+          summary: "SelectOption[]",
+          detail: "type SelectOption = {label: string; value: string | number;}"
+        }
+      }
+    },
+    colorType: {
+      control: { type: "select" },
+      options: Object.values(InputColorType)
+    },
+    size: {
+      control: { type: "radio" },
+      options: Object.values(Size),
+      table: { defaultValue: { summary: Size.md } }
+    },
+    placeholder: {
+      table: { defaultValue: { summary: "this.label" } }
+    }
+  }
+};
+export default meta;
+const options = [
+  {
+    label: "Option 1",
+    value: "1"
+  },
+  {
+    label: "Option 2",
+    value: "2"
+  },
+  {
+    label: "Option 3",
+    value: "3"
+  },
+  {
+    label: "Option 4",
+    value: "4"
+  }
+];
+export const Docs = {
+  render: (args) => ({
+    components: { AntSelect },
+    setup() {
+      const modelValue = computed({
+        // @ts-ignore
+        get: () => args.modelValue,
+        // @ts-ignore
+        set: (val) => args.modelValue = val
+      });
+      return { args, modelValue };
+    },
+    template: `
+      <AntSelect v-bind="args" v-model="modelValue"/>`
+  }),
+  args: {
+    modelValue: null,
+    label: "Label",
+    options,
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+  }
+};
+export const withValidator = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    nullable: true,
+    validator: useFieldValidator([
+      (val) => val !== null || "This field should not be empty"
+    ])
+  }
+};
+export const nullable = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    modelValue: "1",
+    nullable: true
+  }
+};
+export const skeleton = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    nullable: true,
+    skeleton: true
+  }
+};
+export const disabled = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    disabled: true
+  }
+};
+export const withPlaceholder = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    placeholder: "Lorem ipsum dolor sit amet"
+  }
+};
+export const ellipsisText = {
+  render: (args, ctx) => ({
+    // @ts-ignore
+    components: Docs.render(args, ctx).components,
+    // @ts-ignore
+    setup: Docs.render(args, ctx).setup,
+    template: `
+      <div class="px-4 pt-4 pb-72 flex gap-2.5">
+        <div class="w-1/6 flex flex-col gap-2.5 border border-info-500 border-dashed">
+          <AntSelect v-bind="args" v-model="modelValue"/>
+          <AntSelect v-bind="args" value="5"/>
+        </div>
+        <div class="w-2/6 flex flex-row gap-2.5 border border-info-500 border-dashed">
+          <AntSelect v-bind="args" v-model="modelValue"/>
+          <AntSelect v-bind="args" value="5"/>
+        </div>
+        <div class="flex flex-row gap-2.5 border border-info-500 border-dashed">
+          <AntSelect v-bind="args" wrapper-class="w-1/6" v-model="modelValue"/>
+          <AntSelect v-bind="args" wrapper-class="w-1/6" value="5"/>
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    ...Docs.args,
+    nullable: true
+  }
+};
+export const summary = {
+  render: (args) => ({
+    components: { AntSelect },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="p-4 flex flex-col gap-2.5">
+        <div class="flex w-2/5 gap-2.5">
+          <AntSelect v-bind="args" :value="null"
+                     placeholder="Lorem ipsum dolor sit amet, consetetur sadipscing elitr"/>
+          <AntSelect v-bind="args" value="5"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSelect v-bind="args" :value="null" size="md" color-type="base"/>
+          <AntSelect v-bind="args" :value="null" size="md" color-type="info"/>
+          <AntSelect v-bind="args" :value="null" size="md" color-type="success"/>
+          <AntSelect v-bind="args" :value="null" size="md" color-type="warning"/>
+          <AntSelect v-bind="args" :value="null" size="md" color-type="danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSelect v-bind="args" :value="null" size="sm" color-type="base"/>
+          <AntSelect v-bind="args" :value="null" size="sm" color-type="info"/>
+          <AntSelect v-bind="args" :value="null" size="sm" color-type="success"/>
+          <AntSelect v-bind="args" :value="null" size="sm" color-type="warning"/>
+          <AntSelect v-bind="args" :value="null" size="sm" color-type="danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSelect v-bind="args" value="1" size="md" color-type="base"/>
+          <AntSelect v-bind="args" value="1" size="md" color-type="info"/>
+          <AntSelect v-bind="args" value="1" size="md" color-type="success"/>
+          <AntSelect v-bind="args" value="1" size="md" color-type="warning"/>
+          <AntSelect v-bind="args" value="1" size="md" color-type="danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSelect v-bind="args" value="1" size="sm" color-type="base"/>
+          <AntSelect v-bind="args" value="1" size="sm" color-type="info"/>
+          <AntSelect v-bind="args" value="1" size="sm" color-type="success"/>
+          <AntSelect v-bind="args" value="1" size="sm" color-type="warning"/>
+          <AntSelect v-bind="args" value="1" size="sm" color-type="danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSelect v-bind="args" value="1" size="sm" color-type="base" disabled/>
+          <AntSelect v-bind="args" value="1" size="sm" color-type="info" disabled/>
+          <AntSelect v-bind="args" value="1" size="sm" color-type="success" disabled/>
+          <AntSelect v-bind="args" value="1" size="sm" color-type="warning" disabled/>
+          <AntSelect v-bind="args" value="1" size="sm" color-type="danger" disabled/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSelect v-bind="args" :value="null" grouped="none"/>
+          <AntSelect v-bind="args" :value="null" grouped="right"/>
+          <AntSelect v-bind="args" :value="null" grouped="center"/>
+          <AntSelect v-bind="args" :value="null" grouped="left"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSelect v-bind="args" value="1" size="md" nullable color-type="base"/>
+          <AntSelect v-bind="args" value="1" size="md" nullable color-type="info"/>
+          <AntSelect v-bind="args" value="1" size="md" nullable color-type="success"/>
+          <AntSelect v-bind="args" value="1" size="md" nullable color-type="warning"/>
+          <AntSelect v-bind="args" value="1" size="md" nullable color-type="danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSelect v-bind="args" value="1" size="sm" nullable color-type="base"/>
+          <AntSelect v-bind="args" value="1" size="sm" nullable color-type="info"/>
+          <AntSelect v-bind="args" value="1" size="sm" nullable color-type="success"/>
+          <AntSelect v-bind="args" value="1" size="sm" nullable color-type="warning"/>
+          <AntSelect v-bind="args" value="1" size="sm" nullable color-type="danger"/>
+        </div>
+      </div>
+    `
+  }),
+  args: {
+    ...Docs.args
+  }
+};

package/dist/runtime/components/form/__stories/AntSwitch.stories.d.ts

@@ -0,0 +1,8 @@
+import { type Meta, type StoryObj } from '@storybook/vue3';
+import { AntSwitch } from '../index';
+declare const meta: Meta<typeof AntSwitch>;
+export default meta;
+type Story = StoryObj<typeof AntSwitch>;
+export declare const Docs: Story;
+export declare const withValidator: Story;
+export declare const Summary: Story;

package/dist/runtime/components/form/__stories/AntSwitch.stories.mjs

@@ -0,0 +1,215 @@
+import { AntSwitch } from "../index.mjs";
+import { computed, ref } from "vue";
+import { InputColorType, Size } from "../../../enums/index.mjs";
+import { useFieldValidator } from "@antify/validate";
+const meta = {
+  title: "Components/Forms/Switch",
+  component: AntSwitch,
+  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: { AntSwitch },
+    setup() {
+      const value = computed({
+        // @ts-ignore
+        get: () => args.modelValue,
+        // @ts-ignore
+        set: (val) => args.modelValue = val
+      });
+      return { args, value };
+    },
+    template: `
+      <AntSwitch v-bind="args" v-model="value"/>
+    `
+  })
+};
+export const withValidator = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    validator: useFieldValidator([
+      (val) => {
+        return !val || "Must be false";
+      }
+    ])
+  }
+};
+export const Summary = {
+  render: (args) => ({
+    components: { AntSwitch },
+    setup() {
+      const value = ref(true);
+      const notValue = ref(false);
+      return { args, value, notValue, InputColorType, Size };
+    },
+    template: `
+      <div class="flex flex-col gap-5 ">
+        <div class="flex gap-2.5">
+          <AntSwitch v-bind="args" v-model="value" :color-type="InputColorType.base"/>
+          <AntSwitch v-bind="args" v-model="value" :color-type="InputColorType.info"/>
+          <AntSwitch v-bind="args" v-model="value" :color-type="InputColorType.success"/>
+          <AntSwitch v-bind="args" v-model="value" :color-type="InputColorType.warning"/>
+          <AntSwitch v-bind="args" v-model="value" :color-type="InputColorType.danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSwitch v-bind="args" v-model="notValue" :color-type="InputColorType.base"/>
+          <AntSwitch v-bind="args" v-model="notValue" :color-type="InputColorType.info"/>
+          <AntSwitch v-bind="args" v-model="notValue" :color-type="InputColorType.success"/>
+          <AntSwitch v-bind="args" v-model="notValue" :color-type="InputColorType.warning"/>
+          <AntSwitch v-bind="args" v-model="notValue" :color-type="InputColorType.danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSwitch v-bind="args" v-model="value" label="Test" :color-type="InputColorType.base"/>
+          <AntSwitch v-bind="args" v-model="value" label="Test" :color-type="InputColorType.info"/>
+          <AntSwitch v-bind="args" v-model="value" label="Test" :color-type="InputColorType.success"/>
+          <AntSwitch v-bind="args" v-model="value" label="Test" :color-type="InputColorType.warning"/>
+          <AntSwitch v-bind="args" v-model="value" label="Test" :color-type="InputColorType.danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSwitch v-bind="args" v-model="notValue" label="Test" :color-type="InputColorType.base"/>
+          <AntSwitch v-bind="args" v-model="notValue" label="Test" :color-type="InputColorType.info"/>
+          <AntSwitch v-bind="args" v-model="notValue" label="Test" :color-type="InputColorType.success"/>
+          <AntSwitch v-bind="args" v-model="notValue" label="Test" :color-type="InputColorType.warning"/>
+          <AntSwitch v-bind="args" v-model="notValue" label="Test" :color-type="InputColorType.danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSwitch v-bind="args" v-model="value" label="Test" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.base"/>
+          <AntSwitch v-bind="args" v-model="value" label="Test" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.info"/>
+          <AntSwitch v-bind="args" v-model="value" label="Test" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.success"/>
+          <AntSwitch v-bind="args" v-model="value" label="Test" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.warning"/>
+          <AntSwitch v-bind="args" v-model="value" label="Test" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSwitch v-bind="args" v-model="notValue" label="Test" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.base"/>
+          <AntSwitch v-bind="args" v-model="notValue" label="Test" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.info"/>
+          <AntSwitch v-bind="args" v-model="notValue" label="Test" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.success"/>
+          <AntSwitch v-bind="args" v-model="notValue" label="Test" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.warning"/>
+          <AntSwitch v-bind="args" v-model="notValue" label="Test" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSwitch v-bind="args" v-model="value" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.base"/>
+          <AntSwitch v-bind="args" v-model="value" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.info"/>
+          <AntSwitch v-bind="args" v-model="value" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.success"/>
+          <AntSwitch v-bind="args" v-model="value" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.warning"/>
+          <AntSwitch v-bind="args" v-model="value" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSwitch v-bind="args" v-model="notValue" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.base"/>
+          <AntSwitch v-bind="args" v-model="notValue" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.info"/>
+          <AntSwitch v-bind="args" v-model="notValue" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.success"/>
+          <AntSwitch v-bind="args" v-model="notValue" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.warning"/>
+          <AntSwitch v-bind="args" v-model="notValue" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSwitch v-bind="args" v-model="notValue" readonly label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.base"/>
+          <AntSwitch v-bind="args" v-model="notValue" readonly label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.info"/>
+          <AntSwitch v-bind="args" v-model="notValue" readonly label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.success"/>
+          <AntSwitch v-bind="args" v-model="notValue" readonly label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.warning"/>
+          <AntSwitch v-bind="args" v-model="notValue" readonly label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSwitch v-bind="args" v-model="notValue" disabled label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.base"/>
+          <AntSwitch v-bind="args" v-model="notValue" disabled label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.info"/>
+          <AntSwitch v-bind="args" v-model="notValue" disabled label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.success"/>
+          <AntSwitch v-bind="args" v-model="notValue" disabled label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.warning"/>
+          <AntSwitch v-bind="args" v-model="notValue" disabled label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSwitch v-bind="args" v-model="notValue" skeleton label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.base"/>
+          <AntSwitch v-bind="args" v-model="notValue" skeleton label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.info"/>
+          <AntSwitch v-bind="args" v-model="notValue" skeleton label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.success"/>
+          <AntSwitch v-bind="args" v-model="notValue" skeleton label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.warning"/>
+          <AntSwitch v-bind="args" v-model="notValue" skeleton label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSwitch v-bind="args" v-model="value" :size="Size.sm" :color-type="InputColorType.base"/>
+          <AntSwitch v-bind="args" v-model="value" :size="Size.sm" :color-type="InputColorType.info"/>
+          <AntSwitch v-bind="args" v-model="value" :size="Size.sm" :color-type="InputColorType.success"/>
+          <AntSwitch v-bind="args" v-model="value" :size="Size.sm" :color-type="InputColorType.warning"/>
+          <AntSwitch v-bind="args" v-model="value" :size="Size.sm" :color-type="InputColorType.danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSwitch v-bind="args" v-model="notValue" :size="Size.sm" :color-type="InputColorType.base"/>
+          <AntSwitch v-bind="args" v-model="notValue" :size="Size.sm" :color-type="InputColorType.info"/>
+          <AntSwitch v-bind="args" v-model="notValue" :size="Size.sm" :color-type="InputColorType.success"/>
+          <AntSwitch v-bind="args" v-model="notValue" :size="Size.sm" :color-type="InputColorType.warning"/>
+          <AntSwitch v-bind="args" v-model="notValue" :size="Size.sm" :color-type="InputColorType.danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSwitch v-bind="args" v-model="value" :size="Size.sm" label="Test" :color-type="InputColorType.base"/>
+          <AntSwitch v-bind="args" v-model="value" :size="Size.sm" label="Test" :color-type="InputColorType.info"/>
+          <AntSwitch v-bind="args" v-model="value" :size="Size.sm" label="Test" :color-type="InputColorType.success"/>
+          <AntSwitch v-bind="args" v-model="value" :size="Size.sm" label="Test" :color-type="InputColorType.warning"/>
+          <AntSwitch v-bind="args" v-model="value" :size="Size.sm" label="Test" :color-type="InputColorType.danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSwitch v-bind="args" v-model="notValue" :size="Size.sm" label="Test" :color-type="InputColorType.base"/>
+          <AntSwitch v-bind="args" v-model="notValue" :size="Size.sm" label="Test" :color-type="InputColorType.info"/>
+          <AntSwitch v-bind="args" v-model="notValue" :size="Size.sm" label="Test" :color-type="InputColorType.success"/>
+          <AntSwitch v-bind="args" v-model="notValue" :size="Size.sm" label="Test" :color-type="InputColorType.warning"/>
+          <AntSwitch v-bind="args" v-model="notValue" :size="Size.sm" label="Test" :color-type="InputColorType.danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSwitch v-bind="args" v-model="value" :size="Size.sm" label="Test" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.base"/>
+          <AntSwitch v-bind="args" v-model="value" :size="Size.sm" label="Test" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.info"/>
+          <AntSwitch v-bind="args" v-model="value" :size="Size.sm" label="Test" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.success"/>
+          <AntSwitch v-bind="args" v-model="value" :size="Size.sm" label="Test" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.warning"/>
+          <AntSwitch v-bind="args" v-model="value" :size="Size.sm" label="Test" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSwitch v-bind="args" v-model="notValue" :size="Size.sm" label="Test" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.base"/>
+          <AntSwitch v-bind="args" v-model="notValue" :size="Size.sm" label="Test" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.info"/>
+          <AntSwitch v-bind="args" v-model="notValue" :size="Size.sm" label="Test" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.success"/>
+          <AntSwitch v-bind="args" v-model="notValue" :size="Size.sm" label="Test" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.warning"/>
+          <AntSwitch v-bind="args" v-model="notValue" :size="Size.sm" label="Test" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSwitch v-bind="args" v-model="value" :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.base"/>
+          <AntSwitch v-bind="args" v-model="value" :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.info"/>
+          <AntSwitch v-bind="args" v-model="value" :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.success"/>
+          <AntSwitch v-bind="args" v-model="value" :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.warning"/>
+          <AntSwitch v-bind="args" v-model="value" :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSwitch v-bind="args" v-model="notValue" :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.base"/>
+          <AntSwitch v-bind="args" v-model="notValue" :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.info"/>
+          <AntSwitch v-bind="args" v-model="notValue" :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.success"/>
+          <AntSwitch v-bind="args" v-model="notValue" :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.warning"/>
+          <AntSwitch v-bind="args" v-model="notValue" :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSwitch v-bind="args" v-model="notValue" readonly :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.base"/>
+          <AntSwitch v-bind="args" v-model="notValue" readonly :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.info"/>
+          <AntSwitch v-bind="args" v-model="notValue" readonly :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.success"/>
+          <AntSwitch v-bind="args" v-model="notValue" readonly :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.warning"/>
+          <AntSwitch v-bind="args" v-model="notValue" readonly :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSwitch v-bind="args" v-model="notValue" disabled :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.base"/>
+          <AntSwitch v-bind="args" v-model="notValue" disabled :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.info"/>
+          <AntSwitch v-bind="args" v-model="notValue" disabled :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.success"/>
+          <AntSwitch v-bind="args" v-model="notValue" disabled :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.warning"/>
+          <AntSwitch v-bind="args" v-model="notValue" disabled :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.danger"/>
+        </div>
+        <div class="flex gap-2.5">
+          <AntSwitch v-bind="args" v-model="notValue" skeleton :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.base"/>
+          <AntSwitch v-bind="args" v-model="notValue" skeleton :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.info"/>
+          <AntSwitch v-bind="args" v-model="notValue" skeleton :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.success"/>
+          <AntSwitch v-bind="args" v-model="notValue" skeleton :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.warning"/>
+          <AntSwitch v-bind="args" v-model="notValue" skeleton :size="Size.sm" label="Test" value="Value" description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua." :color-type="InputColorType.danger"/>
+        </div>
+      </div>
+    `
+  })
+};

package/dist/runtime/components/form/__stories/AntSwitcher.stories.d.ts

@@ -0,0 +1,8 @@
+import { type Meta, type StoryObj } from '@storybook/vue3';
+import { AntSwitcher } from '../index';
+declare const meta: Meta<typeof AntSwitcher>;
+export default meta;
+type Story = StoryObj<typeof AntSwitcher>;
+export declare const Docs: Story;
+export declare const withValidator: Story;
+export declare const Summary: Story;