@antify/ui-module 1.7.3 → 1.8.2

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

@@ -1,255 +0,0 @@
-import { Size } from "../../../enums/Size.enum.mjs";
-import AntSelect from "../AntSelect.vue";
-import { computed, reactive } from "vue";
-import { useFieldValidator } from "@antify/validate";
-import { InputState } from "../../../enums/index.mjs";
-const meta = {
-  title: "Inputs/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;}"
-        }
-      }
-    },
-    state: {
-      control: { type: "select" },
-      options: Object.values(InputState)
-    },
-    size: {
-      control: { type: "select" },
-      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: (args) => ({
-    components: { AntSelect },
-    setup() {
-      const modelValue = computed({
-        // @ts-ignore
-        get: () => args.modelValue,
-        // @ts-ignore
-        set: (val) => args.modelValue = val
-      });
-      const validator = reactive(
-        useFieldValidator([
-          (val) => val !== null || "This field should not be empty",
-          (val) => val === "invalid" ? 'Value "Invalid" is not allowed' : true
-        ])
-      );
-      return { args, modelValue, validator, InputState };
-    },
-    template: `
-      <AntSelect
-        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)"
-      />`
-  }),
-  args: {
-    ...Docs.args,
-    options: [
-      {
-        label: "Valid",
-        value: "valid"
-      },
-      {
-        label: "Invalid",
-        value: "invalid"
-      }
-    ],
-    nullable: true
-  }
-};
-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 = {
-  parameters: {
-    chromatic: { disableSnapshot: false }
-  },
-  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" state="base"/>
-          <AntSelect v-bind="args" :value="null" size="md" state="info"/>
-          <AntSelect v-bind="args" :value="null" size="md" state="success"/>
-          <AntSelect v-bind="args" :value="null" size="md" state="warning"/>
-          <AntSelect v-bind="args" :value="null" size="md" state="danger"/>
-        </div>
-        <div class="flex gap-2.5">
-          <AntSelect v-bind="args" :value="null" size="sm" state="base"/>
-          <AntSelect v-bind="args" :value="null" size="sm" state="info"/>
-          <AntSelect v-bind="args" :value="null" size="sm" state="success"/>
-          <AntSelect v-bind="args" :value="null" size="sm" state="warning"/>
-          <AntSelect v-bind="args" :value="null" size="sm" state="danger"/>
-        </div>
-        <div class="flex gap-2.5">
-          <AntSelect v-bind="args" value="1" size="md" state="base"/>
-          <AntSelect v-bind="args" value="1" size="md" state="info"/>
-          <AntSelect v-bind="args" value="1" size="md" state="success"/>
-          <AntSelect v-bind="args" value="1" size="md" state="warning"/>
-          <AntSelect v-bind="args" value="1" size="md" state="danger"/>
-        </div>
-        <div class="flex gap-2.5">
-          <AntSelect v-bind="args" value="1" size="sm" state="base"/>
-          <AntSelect v-bind="args" value="1" size="sm" state="info"/>
-          <AntSelect v-bind="args" value="1" size="sm" state="success"/>
-          <AntSelect v-bind="args" value="1" size="sm" state="warning"/>
-          <AntSelect v-bind="args" value="1" size="sm" state="danger"/>
-        </div>
-        <div class="flex gap-2.5">
-          <AntSelect v-bind="args" value="1" size="sm" state="base" disabled/>
-          <AntSelect v-bind="args" value="1" size="sm" state="info" disabled/>
-          <AntSelect v-bind="args" value="1" size="sm" state="success" disabled/>
-          <AntSelect v-bind="args" value="1" size="sm" state="warning" disabled/>
-          <AntSelect v-bind="args" value="1" size="sm" state="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 state="base"/>
-          <AntSelect v-bind="args" value="1" size="md" nullable state="info"/>
-          <AntSelect v-bind="args" value="1" size="md" nullable state="success"/>
-          <AntSelect v-bind="args" value="1" size="md" nullable state="warning"/>
-          <AntSelect v-bind="args" value="1" size="md" nullable state="danger"/>
-        </div>
-        <div class="flex gap-2.5">
-          <AntSelect v-bind="args" value="1" size="sm" nullable state="base"/>
-          <AntSelect v-bind="args" value="1" size="sm" nullable state="info"/>
-          <AntSelect v-bind="args" value="1" size="sm" nullable state="success"/>
-          <AntSelect v-bind="args" value="1" size="sm" nullable state="warning"/>
-          <AntSelect v-bind="args" value="1" size="sm" nullable state="danger"/>
-        </div>
-      </div>
-    `
-  }),
-  args: {
-    ...Docs.args
-  }
-};

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

@@ -1,8 +0,0 @@
-import { type Meta, type StoryObj } from '@storybook/vue3';
-import AntSwitch from '../AntSwitch.vue';
-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/inputs/__stories/AntSwitch.stories.mjs

@@ -1,344 +0,0 @@
-import AntSwitch from "../AntSwitch.vue";
-import { computed, reactive, ref } from "vue";
-import { InputState } from "../../../enums/index.mjs";
-import { useFieldValidator } from "@antify/validate";
-import { Size } from "../../../enums/Size.enum.mjs";
-import AntFormGroup from "../../forms/AntFormGroup.vue";
-import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
-const meta = {
-  title: "Inputs/Switch",
-  component: AntSwitch,
-  argTypes: {
-    state: {
-      control: { type: "select" },
-      options: Object.values(InputState)
-    },
-    size: {
-      control: { type: "select" },
-      options: Object.values(Size)
-    }
-  }
-};
-export default meta;
-export const Docs = {
-  render: (args) => ({
-    components: { AntSwitch },
-    setup() {
-      return { args };
-    },
-    template: `
-      <AntSwitch v-bind="args"/>
-    `
-  }),
-  args: {
-    modelValue: false
-  }
-};
-export const withValidator = {
-  render: (args) => ({
-    components: { AntSwitch },
-    setup() {
-      const value = computed({
-        // @ts-ignore
-        get: () => args.modelValue,
-        // @ts-ignore
-        set: (val) => args.modelValue = val
-      });
-      const validator = reactive(useFieldValidator([
-        (val) => {
-          return !val || "Switch must be off";
-        }
-      ]));
-      return { args, value, validator, InputState };
-    },
-    template: `
-      <AntSwitch
-        v-bind="args"
-        v-model="value"
-        :state="args.state ? args.state : (validator.hasErrors() ? InputState.danger : undefined)"
-        :messages="Array.isArray(args.messages) ? args.messages : validator.getErrors()"
-        @validate="(val) => validator.validate(val)"
-      >
-        Value must be false
-      </AntSwitch>
-
-      <span class="text-sm text-gray-500">Reactive value: {{ value }}</span>
-    `
-  }),
-  args: {
-    ...Docs.args
-  }
-};
-export const Summary = {
-  parameters: {
-    chromatic: { disableSnapshot: false }
-  },
-  render: (args) => ({
-    components: { AntSwitch, AntFormGroup, AntFormGroupLabel },
-    setup() {
-      const value = ref(true);
-      const notValue = ref(false);
-      return { args, value, notValue, InputState, Size };
-    },
-    template: `
-      <AntFormGroup>
-        <AntFormGroupLabel>States & Messages & False value</AntFormGroupLabel>
-        <AntFormGroup direction="row">
-          <AntSwitch
-            v-model="notValue"
-            label="Label"
-            description="Lorem ipsum dolor sit amet"
-            :messages="['Here is a message']"
-            :state="InputState.base">Content
-          </AntSwitch>
-          <AntSwitch
-            v-model="notValue"
-            label="Label"
-            description="Lorem ipsum dolor sit amet"
-            :messages="['Here is a message']"
-            :state="InputState.info">Content
-          </AntSwitch>
-          <AntSwitch
-            v-model="notValue"
-            label="Label"
-            description="Lorem ipsum dolor sit amet"
-            :messages="['Here is a message']"
-            :state="InputState.success">Content
-          </AntSwitch>
-          <AntSwitch
-            v-model="notValue"
-            label="Label"
-            description="Lorem ipsum dolor sit amet"
-            :messages="['Here is a message']"
-            :state="InputState.warning">Content
-          </AntSwitch>
-          <AntSwitch
-            v-model="notValue"
-            label="Label"
-            description="Lorem ipsum dolor sit amet"
-            :messages="['Here is a message']"
-            :state="InputState.danger">Content
-          </AntSwitch>
-        </AntFormGroup>
-        <AntFormGroupLabel>States & Messages & True value</AntFormGroupLabel>
-        <AntFormGroup direction="row">
-          <AntSwitch
-            v-model="value"
-            label="Label"
-            description="Lorem ipsum dolor sit amet"
-            :messages="['Here is a message']"
-            :state="InputState.base">Content
-          </AntSwitch>
-          <AntSwitch
-            v-model="value"
-            label="Label"
-            description="Lorem ipsum dolor sit amet"
-            :messages="['Here is a message']"
-            :state="InputState.info">Content
-          </AntSwitch>
-          <AntSwitch
-            v-model="value"
-            label="Label"
-            description="Lorem ipsum dolor sit amet"
-            :messages="['Here is a message']"
-            :state="InputState.success">Content
-          </AntSwitch>
-          <AntSwitch
-            v-model="value"
-            label="Label"
-            description="Lorem ipsum dolor sit amet"
-            :messages="['Here is a message']"
-            :state="InputState.warning">Content
-          </AntSwitch>
-          <AntSwitch
-            v-model="value"
-            label="Label"
-            description="Lorem ipsum dolor sit amet"
-            :messages="['Here is a message']"
-            :state="InputState.danger">Content
-          </AntSwitch>
-        </AntFormGroup>
-        <AntFormGroupLabel>Sizes</AntFormGroupLabel>
-        <AntFormGroup direction="row">
-          <AntSwitch
-            v-model="notValue"
-            class="w-28"
-            :size="Size.lg"
-            label="Label"
-            description="Lorem ipsum dolor sit amet"
-          >Content
-          </AntSwitch>
-          <AntSwitch
-            v-model="value"
-            class="w-28"
-            :size="Size.lg"
-            label="Label"
-            description="Lorem ipsum dolor sit amet"
-          >Content
-          </AntSwitch>
-          <AntSwitch
-            v-model="notValue"
-            class="w-28"
-            :size="Size.md"
-            label="Label"
-            description="Lorem ipsum dolor sit amet"
-          >Content
-          </AntSwitch>
-          <AntSwitch
-            v-model="value"
-            class="w-28"
-            :size="Size.md"
-            label="Label"
-            description="Lorem ipsum dolor sit amet"
-          >Content
-          </AntSwitch>
-          <AntSwitch
-            v-model="notValue"
-            class="w-28"
-            :size="Size.sm"
-            label="Label"
-            description="Lorem ipsum dolor sit amet"
-          >Content
-          </AntSwitch>
-          <AntSwitch
-            v-model="value"
-            class="w-28"
-            :size="Size.sm"
-            label="Label"
-            description="Lorem ipsum dolor sit amet"
-          >Content
-          </AntSwitch>
-          <AntSwitch
-            v-model="notValue"
-            class="w-28"
-            :size="Size.xs"
-            label="Label"
-            description="Lorem ipsum dolor sit amet"
-          >Content
-          </AntSwitch>
-          <AntSwitch
-            v-model="value"
-            class="w-28"
-            :size="Size.xs"
-            label="Label"
-            description="Lorem ipsum dolor sit amet"
-          >Content
-          </AntSwitch>
-          <AntSwitch
-            v-model="notValue"
-            class="w-28"
-            :size="Size.xs2"
-            label="Label"
-            description="Lorem ipsum dolor sit amet"
-          >Content
-          </AntSwitch>
-          <AntSwitch
-            v-model="value"
-            class="w-28"
-            :size="Size.xs2"
-            label="Label"
-            description="Lorem ipsum dolor sit amet"
-          >Content
-          </AntSwitch>
-        </AntFormGroup>
-        <AntFormGroup direction="row">
-          <AntFormGroup>
-            <AntFormGroupLabel>Disabled</AntFormGroupLabel>
-            <AntFormGroup direction="row">
-              <AntSwitch
-                v-model="notValue"
-                label="Label"
-                description="Lorem ipsum dolor sit amet"
-                :state="InputState.base"
-                :disabled="true"
-              >Content
-              </AntSwitch>
-              <AntSwitch
-                v-model="value"
-                label="Label"
-                description="Lorem ipsum dolor sit amet"
-                :state="InputState.base"
-                :disabled="true"
-              >Content
-              </AntSwitch>
-            </AntFormGroup>
-          </AntFormGroup>
-          <AntFormGroup>
-            <AntFormGroupLabel>Readonly</AntFormGroupLabel>
-            <AntFormGroup direction="row">
-              <AntSwitch
-                v-model="notValue"
-                label="Label"
-                description="Lorem ipsum dolor sit amet"
-                :state="InputState.base"
-                :readonly="true"
-              >Content
-              </AntSwitch>
-              <AntSwitch
-                v-model="value"
-                label="Label"
-                description="Lorem ipsum dolor sit amet"
-                :state="InputState.base"
-                :readonly="true"
-              >Content
-              </AntSwitch>
-            </AntFormGroup>
-          </AntFormGroup>
-          <AntFormGroup>
-            <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
-            <AntSwitch
-              v-model="value"
-              label="Label"
-              description="Lorem ipsum dolor sit amet"
-              :state="InputState.base"
-              skeleton
-            >Content
-            </AntSwitch>
-          </AntFormGroup>
-        </AntFormGroup>
-        <AntFormGroupLabel>Plain & (Plain & Content)</AntFormGroupLabel>
-        <AntFormGroup direction="row">
-          <AntSwitch v-model="notValue"/>
-          <AntSwitch v-model="value"/>
-          <AntSwitch v-model="notValue">Content</AntSwitch>
-          <AntSwitch v-model="value">Content</AntSwitch>
-        </AntFormGroup>
-        <AntFormGroupLabel>Label & (Label & Content)</AntFormGroupLabel>
-        <AntFormGroup direction="row">
-          <AntSwitch v-model="notValue" label="Label"/>
-          <AntSwitch v-model="value" label="Label"/>
-          <AntSwitch v-model="notValue" label="Label">Content</AntSwitch>
-          <AntSwitch v-model="value" label="Label">Content</AntSwitch>
-        </AntFormGroup>
-        <AntFormGroupLabel>Description & (Description & Content)</AntFormGroupLabel>
-        <AntFormGroup direction="row">
-          <AntSwitch v-model="notValue" class="w-28" description="Lorem ipsum dolor sit amet"/>
-          <AntSwitch v-model="value" class="w-28" description="Lorem ipsum dolor sit amet"/>
-          <AntSwitch
-            v-model="notValue"
-            class="w-28"
-            description="Lorem ipsum dolor sit amet"
-          >Content
-          </AntSwitch>
-          <AntSwitch
-            v-model="value"
-            class="w-28"
-            description="Lorem ipsum dolor sit amet"
-          >Content
-          </AntSwitch>
-        </AntFormGroup>
-        <AntFormGroupLabel>Label & Description & (Label & Description & Content)</AntFormGroupLabel>
-        <AntFormGroup direction="row">
-          <AntSwitch v-model="notValue" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
-          <AntSwitch v-model="value" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"/>
-          <AntSwitch v-model="notValue" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"
-          >Content
-          </AntSwitch>
-          <AntSwitch v-model="value" class="w-28" description="Lorem ipsum dolor sit amet" label="Label"
-          >Content
-          </AntSwitch>
-        </AntFormGroup>
-      </AntFormGroup>
-    `
-  })
-};

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

@@ -1,8 +0,0 @@
-import { type Meta, type StoryObj } from '@storybook/vue3';
-import AntSwitcher from '../AntSwitcher.vue';
-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;