@antify/ui-module 1.6.0 → 1.7.1

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

@@ -1,218 +0,0 @@
-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 = {
-  parameters: {
-    chromatic: { disableSnapshot: false }
-  },
-  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.mjs

@@ -1,228 +0,0 @@
-import { computed, ref } from "vue";
-import { Size } from "../../../enums/index.mjs";
-import { useFieldValidator } from "@antify/validate";
-import { InputColorType } from "../../../enums/index.mjs";
-import { AntSwitcher } from "../index.mjs";
-const meta = {
-  title: "Components/Forms/Switcher",
-  component: AntSwitcher,
-  argTypes: {
-    modelValue: {
-      control: "text"
-    },
-    options: {
-      table: {
-        type: {
-          summary: "string | SwitcherOption[]",
-          detail: `
-type SwitcherOption = {
-  label: string;
-  value: string | number;
-  [key: string]: unknown;
-}
-          `
-        }
-      }
-    },
-    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: { AntSwitcher },
-    setup() {
-      const modelValue = computed({
-        // @ts-ignore
-        get: () => args.modelValue,
-        // @ts-ignore
-        set: (val) => args.modelValue = val
-      });
-      return { args, modelValue };
-    },
-    template: `
-      <AntSwitcher v-bind="args" v-model="modelValue"/>
-    `
-  }),
-  args: {
-    options: [
-      {
-        label: "Entry 1",
-        value: "entry-1"
-      },
-      {
-        label: "Entry 2",
-        value: "entry-2"
-      },
-      {
-        label: "Entry 3",
-        value: "entry-3"
-      },
-      {
-        label: "Entry 4",
-        value: "entry-4"
-      }
-    ],
-    modelValue: "entry-1"
-  }
-};
-export const withValidator = {
-  render: Docs.render,
-  args: {
-    ...Docs.args,
-    validator: useFieldValidator([
-      (val) => {
-        return val.value !== "entry-1" || "Select something else";
-      }
-    ])
-  }
-};
-export const Summary = {
-  parameters: {
-    chromatic: { disableSnapshot: false }
-  },
-  render: (args) => ({
-    components: { AntSwitcher },
-    setup() {
-      const modelValue = computed({
-        // @ts-ignore
-        get: () => args.modelValue,
-        // @ts-ignore
-        set: (val) => args.modelValue = val
-      });
-      const skeleton = ref(true);
-      return { args, modelValue, InputColorType, skeleton };
-    },
-    template: `
-      <div class="flex flex-col gap-5 ">
-        <div class="flex gap-2.5">
-          <AntSwitcher v-bind="args" v-model="modelValue" :color-type="InputColorType.base"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" :color-type="InputColorType.info"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" :color-type="InputColorType.success"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" :color-type="InputColorType.warning"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" :color-type="InputColorType.danger"/>
-        </div>
-        <div class="flex gap-2.5">
-          <AntSwitcher v-bind="args" v-model="modelValue" label="Label" :color-type="InputColorType.base"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" label="Label" :color-type="InputColorType.info"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" label="Label" :color-type="InputColorType.success"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" label="Label" :color-type="InputColorType.warning"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" label="Label" :color-type="InputColorType.danger"/>
-        </div>
-        <div class="flex gap-2.5">
-          <AntSwitcher v-bind="args" v-model="modelValue"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.base"/>
-          <AntSwitcher v-bind="args" v-model="modelValue"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.info"/>
-          <AntSwitcher v-bind="args" v-model="modelValue"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.success"/>
-          <AntSwitcher v-bind="args" v-model="modelValue"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.warning"/>
-          <AntSwitcher v-bind="args" v-model="modelValue"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.danger"/>
-        </div>
-        <div class="flex gap-2.5">
-          <AntSwitcher v-bind="args" v-model="modelValue" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.base"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.info"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.success"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.warning"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.danger"/>
-        </div>
-        <div class="flex gap-2.5">
-          <AntSwitcher v-bind="args" v-model="modelValue" readonly label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.base"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" readonly label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.info"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" readonly label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.success"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" readonly label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.warning"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" readonly label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.danger"/>
-        </div>
-        <div class="flex gap-2.5">
-          <AntSwitcher v-bind="args" v-model="modelValue" disabled label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.base"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" disabled label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.info"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" disabled label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.success"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" disabled label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.warning"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" disabled label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.danger"/>
-        </div>
-        <div class="flex gap-2.5">
-          <AntSwitcher v-bind="args" v-model="modelValue" :skeleton="true" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.base"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" :skeleton="true" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.info"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" :skeleton="true" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.success"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" :skeleton="true" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.warning"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" :skeleton="true" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :color-type="InputColorType.danger"/>
-        </div>
-      </div>
-    `
-  }),
-  args: {
-    options: [
-      {
-        label: "Entry 1",
-        value: "entry-1"
-      },
-      {
-        label: "Entry 2",
-        value: "entry-2"
-      },
-      {
-        label: "Entry 3",
-        value: "entry-3"
-      },
-      {
-        label: "Entry 4",
-        value: "entry-4"
-      }
-    ],
-    modelValue: "entry-1"
-  }
-};

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

@@ -1,106 +0,0 @@
-import { AntTagInput } from "../index.mjs";
-import { ref } from "vue";
-import { InputColorType, Size } from "../../../enums/index.mjs";
-const meta = {
-  title: "Components/Forms/Tag input",
-  component: AntTagInput,
-  argTypes: {
-    modelValue: {
-      control: "text",
-      table: { type: { summary: "string|null" } }
-    },
-    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" } }
-    },
-    createCallback: {
-      control: "none",
-      description: "If allowCreate is true the createCallback needs to be specified. It will be called when the user creates a new tag. It should return a promise that resolves to a SelectOption.",
-      table: {
-        type: {
-          summary: "(item: string) => Promise<SelectOption>",
-          detail: `
-Params:
-item: string - the label of the new tag
-
-Returns:
-Promise<SelectOption> - the new tag as a SelectOption
-          `
-        }
-      }
-    }
-  }
-};
-export default meta;
-const options = [
-  {
-    label: "Tag",
-    value: "1"
-  },
-  {
-    label: "Cat",
-    value: "2"
-  },
-  {
-    label: "Dog",
-    value: "3"
-  },
-  {
-    label: "Chicken",
-    value: "4"
-  }
-];
-export const Docs = {
-  render: (args) => ({
-    components: { AntTagInput },
-    setup() {
-      const value = ref([]);
-      return {
-        args,
-        value
-      };
-    },
-    template: `
-      <div style="width: 360px">
-      <AntTagInput v-model="value" v-bind="args"/>
-      </div>
-    `
-  }),
-  args: {
-    options
-  }
-};
-export const AllowCreate = {
-  render: Docs.render,
-  args: {
-    options,
-    allowCreate: true,
-    createCallback(item) {
-      return new Promise((resolve) => {
-        resolve({ label: item, value: `${Math.random()}-${item}` });
-      });
-    }
-  }
-};
-export const Disabled = {
-  render: Docs.render,
-  args: {
-    options,
-    disabled: true
-  }
-};
-export const Skeleton = {
-  render: Docs.render,
-  args: {
-    options,
-    skeleton: true
-  }
-};

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

@@ -1,68 +0,0 @@
-import { Size } from "../../../enums/Size.enum.mjs";
-import AntTextInput from "../AntTextInput.vue";
-import { isRequiredRule, notBlankRule, useFieldValidator } from "@antify/validate";
-import { TextInputType } from "../__types/AntTextInput.type.mjs";
-import { InputColorType } from "../../../enums/index.mjs";
-import { reactive } from "vue";
-const meta = {
-  title: "Components/Forms/Text Input",
-  component: AntTextInput,
-  parameters: { controls: { sort: "requiredFirst" } },
-  argTypes: {
-    modelValue: {
-      control: "text",
-      table: { type: { summary: "string|null" } }
-    },
-    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" } }
-    },
-    type: {
-      control: { type: "select" },
-      options: Object.values(TextInputType),
-      table: { defaultValue: { summary: TextInputType.text } }
-    }
-  }
-};
-export default meta;
-export const Docs = {
-  render: (args) => ({
-    components: { AntTextInput },
-    setup() {
-      const validator = reactive(useFieldValidator([isRequiredRule, notBlankRule]));
-      return { args, validator };
-    },
-    template: `
-      <AntTextInput
-        v-bind="args"
-        v-model="args.modelValue"
-        :errors="Array.isArray(args.errors) ? args.errors : validator.getErrors()"
-        @validate="(val) => validator.validate(val)"
-      />`
-  }),
-  args: {
-    modelValue: null,
-    label: "Label",
-    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-  }
-};
-export const limited = {
-  render: Docs.render,
-  args: {
-    ...Docs.args,
-    modelValue: "A to long value",
-    max: 10,
-    limiter: true,
-    validator: useFieldValidator([
-      (val) => val.length <= 10 || "Max. 10 characters allowed"
-    ])
-  }
-};