@antify/ui-module 1.7.3 → 1.8.2

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

@@ -1,235 +0,0 @@
-import { computed, reactive, ref } from "vue";
-import { Size } from "../../../enums/index.mjs";
-import { useFieldValidator } from "@antify/validate";
-import { InputState } from "../../../enums/index.mjs";
-import AntSwitcher from "../AntSwitcher.vue";
-import AntFormGroup from "../../forms/AntFormGroup.vue";
-import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
-const meta = {
-  title: "Inputs/Switcher",
-  component: AntSwitcher,
-  argTypes: {
-    modelValue: {
-      control: "text"
-    },
-    options: {
-      table: {
-        type: {
-          summary: "string | SwitcherOption[]",
-          detail: `
-type SwitcherOption = {
-  label: string;
-  value: string | number;
-  [key: string]: unknown;
-}
-          `
-        }
-      }
-    },
-    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: { 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: (args) => ({
-    components: { AntSwitcher },
-    setup() {
-      const modelValue = computed({
-        // @ts-ignore
-        get: () => args.modelValue,
-        // @ts-ignore
-        set: (val) => args.modelValue = val
-      });
-      const validator = reactive(useFieldValidator(
-        (val) => val === "entry-1" ? "Select something else" : true
-      ));
-      return { args, modelValue, validator, InputState };
-    },
-    template: `
-      <AntSwitcher
-        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)"
-      >
-        This value should be false
-      </AntSwitcher>
-    `
-  }),
-  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 Summary = {
-  parameters: {
-    chromatic: { disableSnapshot: false }
-  },
-  render: (args) => ({
-    components: { AntSwitcher, AntFormGroup, AntFormGroupLabel },
-    setup() {
-      const modelValue = computed({
-        // @ts-ignore
-        get: () => args.modelValue,
-        // @ts-ignore
-        set: (val) => args.modelValue = val
-      });
-      const skeleton = ref(true);
-      return { args, modelValue, InputState, skeleton, Size };
-    },
-    template: `
-      <AntFormGroup>
-        <AntFormGroupLabel>States</AntFormGroupLabel>
-        <AntFormGroup direction="row">
-          <AntSwitcher v-bind="args" v-model="modelValue" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :state="InputState.base"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :state="InputState.info"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :state="InputState.success"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :state="InputState.warning"/>
-          <AntSwitcher v-bind="args" v-model="modelValue" label="Label"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-                       :state="InputState.danger"/>
-        </AntFormGroup>
-        <AntFormGroupLabel>Sizes</AntFormGroupLabel>
-        <AntFormGroup direction="row">
-          <AntSwitcher v-bind="args" v-model="modelValue" label="Label" :size="Size.lg"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-          />
-          <AntSwitcher v-bind="args" v-model="modelValue" label="Label" :size="Size.md"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-          />
-          <AntSwitcher v-bind="args" v-model="modelValue" label="Label" :size="Size.sm"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-          />
-          <AntSwitcher v-bind="args" v-model="modelValue" label="Label" :size="Size.xs"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-          />
-          <AntSwitcher v-bind="args" v-model="modelValue" label="Label" :size="Size.xs2"
-                       description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-          />
-        </AntFormGroup>
-        <AntFormGroup direction="row">
-          <AntFormGroup>
-            <AntFormGroupLabel>Disabled</AntFormGroupLabel>
-            <AntSwitcher v-bind="args" v-model="modelValue" :disabled="true" label="Label" class="w-60"
-                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-            />
-          </AntFormGroup>
-          <AntFormGroup>
-            <AntFormGroupLabel>Readonly</AntFormGroupLabel>
-            <AntSwitcher v-bind="args" v-model="modelValue" :readonly="true" label="Label" class="w-60"
-                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-            />
-          </AntFormGroup>
-          <AntFormGroup>
-            <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
-            <AntSwitcher v-bind="args" v-model="modelValue" :skeleton="true" label="Label" class="w-60"
-                         description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-            />
-          </AntFormGroup>
-        </AntFormGroup>
-        <AntFormGroupLabel>Plain</AntFormGroupLabel>
-        <AntSwitcher v-bind="args" v-model="modelValue" class="w-60"/>
-        <AntFormGroupLabel>With label</AntFormGroupLabel>
-        <AntSwitcher v-bind="args" v-model="modelValue" label="Label" class="w-60"/>
-        <AntFormGroupLabel>With description</AntFormGroupLabel>
-        <AntSwitcher v-bind="args" v-model="modelValue" class="w-60"
-                     description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"/>
-        <AntFormGroupLabel>With label + description</AntFormGroupLabel>
-        <AntSwitcher v-bind="args" v-model="modelValue" label="Label" class="w-60"
-                     description="Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"/>
-      </AntFormGroup>
-    `
-  }),
-  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/inputs/__stories/AntTagInput.stories.d.ts

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

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

@@ -1,228 +0,0 @@
-import AntTagInput from "../AntTagInput.vue";
-import { reactive } from "vue";
-import { ref } from "vue";
-import { InputState } from "../../../enums/index.mjs";
-import { AntTagInputSize } from "../__types/AntTagInput.types.mjs";
-import { useFieldValidator } from "@antify/validate";
-import AntFormGroup from "../../forms/AntFormGroup.vue";
-import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
-const meta = {
-  title: "Inputs/Tag Input",
-  component: AntTagInput,
-  argTypes: {
-    modelValue: {
-      control: "text",
-      table: { type: { summary: "string|null" } }
-    },
-    state: {
-      control: { type: "select" },
-      options: Object.values(InputState)
-    },
-    size: {
-      control: { type: "select" },
-      options: Object.values(AntTagInputSize),
-      table: { defaultValue: { summary: AntTagInputSize.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 withValidator = {
-  render: (args) => ({
-    components: { AntTagInput },
-    setup() {
-      const value = ref(null);
-      const validator = reactive(useFieldValidator((val) => val?.length <= 3 || "Max 3 tags are allowed"));
-      return {
-        args,
-        value,
-        validator,
-        InputState
-      };
-    },
-    template: `
-      <div style="width: 360px">
-        <AntTagInput
-          v-model="value"
-          v-bind="args"
-          description="Choose max. 3 tags."
-          :state="args.state ? args.state : (validator.hasErrors() ? InputState.danger : undefined)"
-          :messages="Array.isArray(args.messages) ? args.messages : validator.getErrors()"
-          @validate="(val) => validator.validate(val)"
-        />
-      </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 summary = {
-  render: (args) => ({
-    components: { AntTagInput, AntFormGroup, AntFormGroupLabel },
-    setup() {
-      const value = ref(["1", "2"]);
-      const noValue = ref([]);
-      return {
-        args,
-        value,
-        noValue,
-        InputState,
-        AntTagInputSize
-      };
-    },
-    template: `
-      <AntFormGroup>
-        <AntFormGroupLabel>States</AntFormGroupLabel>
-        <AntFormGroup>
-          <AntFormGroup direction="row">
-            <AntTagInput v-bind="args" v-model="noValue" class="w-48" label="Label"
-                         description="Lorem ipsum dolor sit amet"/>
-            <AntTagInput v-bind="args" v-model="noValue" :state="InputState.info" class="w-48" label="Label"
-                         description="Lorem ipsum dolor sit amet"/>
-            <AntTagInput v-bind="args" v-model="noValue" :state="InputState.success" class="w-48" label="Label"
-                         description="Lorem ipsum dolor sit amet"/>
-            <AntTagInput v-bind="args" v-model="noValue" :state="InputState.warning" class="w-48" label="Label"
-                         description="Lorem ipsum dolor sit amet"/>
-            <AntTagInput v-bind="args" v-model="noValue" :state="InputState.danger" class="w-48" label="Label"
-                         description="Lorem ipsum dolor sit amet"/>
-          </AntFormGroup>
-          <AntFormGroup direction="row">
-            <AntTagInput v-bind="args" v-model="value" class="w-48" label="Label"
-                         description="Lorem ipsum dolor sit amet"/>
-            <AntTagInput v-bind="args" v-model="value" :state="InputState.info" class="w-48" label="Label"
-                         description="Lorem ipsum dolor sit amet"/>
-            <AntTagInput v-bind="args" v-model="value" :state="InputState.success" class="w-48" label="Label"
-                         description="Lorem ipsum dolor sit amet"/>
-            <AntTagInput v-bind="args" v-model="value" :state="InputState.warning" class="w-48" label="Label"
-                         description="Lorem ipsum dolor sit amet"/>
-            <AntTagInput v-bind="args" v-model="value" :state="InputState.danger" class="w-48" label="Label"
-                         description="Lorem ipsum dolor sit amet"/>
-          </AntFormGroup>
-        </AntFormGroup>
-        <AntFormGroupLabel>Sizes</AntFormGroupLabel>
-        <AntFormGroup>
-          <AntFormGroup direction="row">
-            <AntTagInput v-bind="args" v-model="noValue" :size="AntTagInputSize.lg" class="w-48" label="Label"
-                         description="Lorem ipsum dolor sit amet"/>
-            <AntTagInput v-bind="args" v-model="noValue" :size="AntTagInputSize.md" class="w-48" label="Label"
-                         description="Lorem ipsum dolor sit amet"/>
-            <AntTagInput v-bind="args" v-model="noValue" :size="AntTagInputSize.sm" class="w-48" label="Label"
-                         description="Lorem ipsum dolor sit amet"/>
-          </AntFormGroup>
-          <AntFormGroup direction="row">
-            <AntTagInput v-bind="args" v-model="value" :size="AntTagInputSize.lg" class="w-48" label="Label"
-                         description="Lorem ipsum dolor sit amet"/>
-            <AntTagInput v-bind="args" v-model="value" :size="AntTagInputSize.md" class="w-48" label="Label"
-                         description="Lorem ipsum dolor sit amet"/>
-            <AntTagInput v-bind="args" v-model="value" :size="AntTagInputSize.sm" class="w-48" label="Label"
-                         description="Lorem ipsum dolor sit amet"/>
-          </AntFormGroup>
-        </AntFormGroup>
-        <AntFormGroup direction="row">
-          <AntFormGroup>
-            <AntFormGroupLabel>Disabled</AntFormGroupLabel>
-            <AntTagInput v-bind="args" v-model="noValue" class="w-48" label="Label" value="Value"
-                         description="Lorem ipsum dolor sit amet." disabled/>
-            <AntTagInput v-bind="args" v-model="value" class="w-48" label="Label" value="Value"
-                         description="Lorem ipsum dolor sit amet." disabled/>
-          </AntFormGroup>
-          <AntFormGroup>
-            <AntFormGroupLabel>Readonly</AntFormGroupLabel>
-            <!--TODO:: Add readonly prop if it is implemented-->
-            <AntTagInput v-bind="args" v-model="noValue" class="w-48" label="Label" value="Value"
-                         description="Lorem ipsum dolor sit amet."/>
-            <AntTagInput v-bind="args" v-model="value" class="w-48" label="Label" value="Value"
-                         description="Lorem ipsum dolor sit amet."/>
-          </AntFormGroup>
-          <AntFormGroup>
-            <AntFormGroupLabel>Skeleton</AntFormGroupLabel>
-            <AntTagInput v-bind="args" v-model="noValue" class="w-48" label="Label" value="Value"
-                         description="Lorem ipsum dolor sit amet." skeleton/>
-          </AntFormGroup>
-        </AntFormGroup>
-        <AntFormGroupLabel>Plain</AntFormGroupLabel>
-        <AntTagInput v-bind="args" v-model="noValue" class="w-48" value="value"/>
-        <AntFormGroupLabel>With label</AntFormGroupLabel>
-        <AntTagInput v-bind="args" v-model="noValue" class="w-48" label="Label" value="Value"/>
-        <AntFormGroupLabel>With description</AntFormGroupLabel>
-        <AntTagInput v-bind="args" v-model="noValue" class="w-48" value="Value"
-                     description="Lorem ipsum dolor sit amet."/>
-        <AntFormGroupLabel>With label + description</AntFormGroupLabel>
-        <AntTagInput v-bind="args" v-model="noValue" class="w-48" label="Label" value="Value"
-                     description="Lorem ipsum dolor sit amet."/>
-      </AntFormGroup>
-    `
-  }),
-  args: {
-    ...Docs.args
-  }
-};

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

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