@antify/ui-module 1.1.3

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

@@ -0,0 +1,168 @@
+import { Size } from "../../../../enums/Size.enum.mjs";
+import { BaseInputType } from "../__types/AntBaseInput.type.mjs";
+import AntBaseInput from "../AntBaseInput.vue";
+import AntButton from "../../../buttons/AntButton.vue";
+import { Grouped as _Grouped } from "../../../../enums/Grouped.enum.mjs";
+import { isRequiredRule, notBlankRule, useFieldValidator } from "@antify/validate";
+import { computed, reactive } from "vue";
+import { faSearch } from "@fortawesome/free-solid-svg-icons";
+import { InputColorType } from "../../../../enums/index.mjs";
+const meta = {
+  title: "Components/Forms/Elements/Base Input",
+  component: AntBaseInput,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    value: {
+      control: { type: "text" },
+      table: { type: { summary: "string|number|null" } }
+    },
+    type: {
+      control: { type: "select" },
+      options: Object.values(BaseInputType),
+      table: { defaultValue: { summary: BaseInputType.text } }
+    },
+    colorType: {
+      control: { type: "select" },
+      options: Object.values(InputColorType)
+    },
+    size: {
+      control: { type: "radio" },
+      options: Object.values(Size),
+      table: { defaultValue: { summary: Size.md } }
+    },
+    placeholder: {
+      control: "text",
+      table: { defaultValue: { summary: "this.label" } }
+    },
+    grouped: {
+      control: { type: "select" },
+      options: Object.values(_Grouped),
+      description: "Where is this fields position in a group",
+      table: { defaultValue: { summary: _Grouped.none } }
+    },
+    wrapperClass: {
+      control: "text",
+      description: 'Class for the first element because the attribute "class" would affect the input element.',
+      table: { type: { summary: "string|object" } }
+    },
+    showIcon: {
+      control: "boolean",
+      description: "Some InputColorTypes can have an icon. Control with this property if it gets shown or not."
+    },
+    iconLeft: {
+      control: { type: "none" },
+      description: "Will be displayed left to the input text.<br>Use Font-awesome Icons."
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntBaseInput },
+    setup: () => {
+      const validator = reactive(useFieldValidator([isRequiredRule, notBlankRule]));
+      return { args, validator };
+    },
+    template: `
+      <AntBaseInput
+        v-bind="args"
+        v-model:value="args.value"
+        :has-errors="typeof args.hasErrors === 'boolean' ? args.hasErrors : validator.hasErrors()"
+        @validate="(val) => validator.validate(val)"
+      />`
+  }),
+  args: {
+    value: null,
+    placeholder: "Placeholder"
+  }
+};
+export const withValidator = {
+  render: (args) => ({
+    components: { AntBaseInput },
+    setup: () => {
+      setTimeout(() => {
+        args.skeleton = false;
+      }, 1e3);
+      const validator = reactive(useFieldValidator([isRequiredRule, notBlankRule]));
+      return { args, validator };
+    },
+    template: `
+      <AntBaseInput
+        v-bind="args"
+        v-model:value="args.value"
+        :has-errors="typeof args.hasErrors === 'boolean' ? args.hasErrors : validator.hasErrors()"
+        @validate="(val) => validator.validate(val)"
+      />`
+  }),
+  args: {
+    ...Docs.args,
+    value: null,
+    skeleton: true,
+    description: void 0
+  }
+};
+export const IconLeft = {
+  render: Docs.render,
+  args: {
+    ...Docs.args,
+    iconLeft: faSearch
+  }
+};
+export const Summary = {
+  render: (args) => ({
+    components: { AntBaseInput, AntButton },
+    setup: () => {
+      const value = computed({
+        // @ts-ignore
+        get: () => args.value,
+        // @ts-ignore
+        set: (val) => args.value = val
+      });
+      return { args, value, faSearch };
+    },
+    template: `
+      <div class="p-4 pb-10 flex flex-col gap-2">
+        <div class="flex gap-2">
+          <AntBaseInput v-bind="args" v-model:value="value" color-type="base"/>
+          <AntBaseInput v-bind="args" v-model:value="value" color-type="info"/>
+          <AntBaseInput v-bind="args" v-model:value="value" color-type="success"/>
+          <AntBaseInput v-bind="args" v-model:value="value" color-type="warning"/>
+          <AntBaseInput v-bind="args" v-model:value="value" color-type="danger"/>
+        </div>
+
+        <div class="flex gap-2">
+          <AntBaseInput v-bind="args" value="A value" nullable color-type="base"/>
+          <AntBaseInput v-bind="args" value="A value" nullable color-type="info"/>
+          <AntBaseInput v-bind="args" value="A value" nullable color-type="success"/>
+          <AntBaseInput v-bind="args" value="A value" nullable color-type="warning"/>
+          <AntBaseInput v-bind="args" value="A value" nullable color-type="danger"/>
+        </div>
+
+        <div class="flex gap-2">
+          <AntBaseInput v-bind="args" v-model:value="value" :show-icon="false" color-type="base"/>
+          <AntBaseInput v-bind="args" v-model:value="value" :show-icon="false" color-type="info"/>
+          <AntBaseInput v-bind="args" v-model:value="value" :show-icon="false" color-type="success"/>
+          <AntBaseInput v-bind="args" v-model:value="value" :show-icon="false" color-type="warning"/>
+          <AntBaseInput v-bind="args" v-model:value="value" :show-icon="false" color-type="danger"/>
+        </div>
+
+        <div class="flex gap-2">
+          <AntBaseInput v-bind="args" v-model:value="value" :icon-left="faSearch" color-type="base"/>
+          <AntBaseInput v-bind="args" v-model:value="value" :icon-left="faSearch" color-type="info"/>
+          <AntBaseInput v-bind="args" v-model:value="value" :icon-left="faSearch" color-type="success"/>
+          <AntBaseInput v-bind="args" v-model:value="value" :icon-left="faSearch" color-type="warning"/>
+          <AntBaseInput v-bind="args" v-model:value="value" :icon-left="faSearch" color-type="danger"/>
+        </div>
+
+        <div class="flex gap-[-2px]">
+          <AntBaseInput v-bind="args" v-model:value="value" grouped="left"/>
+          <AntBaseInput v-bind="args" v-model:value="value" grouped="center" color-type="danger"/>
+          <AntBaseInput v-bind="args" v-model:value="value" grouped="right" color-type="info"/>
+        </div>
+      </div>`
+  }),
+  args: {
+    value: "",
+    placeholder: "Placeholder"
+  }
+};

package/dist/runtime/components/form/Elements/__stories/AntField.stories.d.ts

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

package/dist/runtime/components/form/Elements/__stories/AntField.stories.mjs

@@ -0,0 +1,80 @@
+import AntField from "../AntField.vue";
+import AntBaseInput from "../AntBaseInput.vue";
+import { Size } from "../../../../enums/Size.enum.mjs";
+import { computed, reactive, ref } from "vue";
+import { InputColorType } from "../../../../enums/index.mjs";
+import { isRequiredRule, notBlankRule, useFieldValidator } from "@antify/validate";
+const meta = {
+  title: "Components/Forms/Elements/Field",
+  component: AntField,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: Object.values(Size)
+    },
+    colorType: {
+      control: { type: "select" },
+      options: Object.values(InputColorType)
+    },
+    skeleton: {
+      control: "boolean",
+      table: { defaultValue: { summary: false } }
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntField, AntBaseInput },
+    setup: () => {
+      const skeleton = computed({
+        get() {
+          return args.skeleton;
+        },
+        set(val) {
+          args.skeleton = val;
+        }
+      });
+      const size = computed({
+        get() {
+          return args.size;
+        },
+        set(val) {
+          args.size = val;
+        }
+      });
+      const colorType = computed({
+        get() {
+          return args.colorType;
+        },
+        set(val) {
+          args.colorType = val;
+        }
+      });
+      const value = ref(null);
+      const validator = reactive(useFieldValidator([isRequiredRule, notBlankRule]));
+      return { args, value, validator, skeleton, size, colorType };
+    },
+    template: `
+      <AntField
+        v-bind="args"
+        :errors="Array.isArray(args.errors) ? args.errors : validator.getErrors()"
+      >
+        <AntBaseInput
+          v-model:value="value"
+          :skeleton="skeleton"
+          :size="size"
+          :color-type="colorType"
+          placeholder="Placeholder"
+          :has-errors="Array.isArray(args.errors) ? args.errors.length > 0 : validator.hasErrors()"
+          @validate="(val) => validator.validate(val)"
+        />
+      </AntField>
+    `
+  }),
+  args: {
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+  }
+};

package/dist/runtime/components/form/Elements/__stories/AntInputDescription.stories.d.ts

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

package/dist/runtime/components/form/Elements/__stories/AntInputDescription.stories.mjs

@@ -0,0 +1,34 @@
+import AntInputDescription from "../AntInputDescription.vue";
+import { Size } from "../../../../enums/Size.enum.mjs";
+import { InputColorType } from "../../../../enums/index.mjs";
+const meta = {
+  title: "Components/Forms/Elements/Ant Input Description",
+  component: AntInputDescription,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: Object.values(Size),
+      table: { defaultValue: { summary: Size.md } }
+    },
+    skeleton: {
+      control: "boolean",
+      table: { defaultValue: { summary: false } }
+    },
+    colorType: {
+      control: { type: "select" },
+      options: Object.values(InputColorType)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntInputDescription },
+    setup() {
+      return { args };
+    },
+    template: '<div class="p-4"><AntInputDescription v-bind="args">Description</AntInputDescription></div>'
+  }),
+  args: {}
+};

package/dist/runtime/components/form/Elements/__stories/AntInputLabel.stories.d.ts

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

package/dist/runtime/components/form/Elements/__stories/AntInputLabel.stories.mjs

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

package/dist/runtime/components/form/Elements/__stories/AntInputLimiter.stories.d.ts

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

package/dist/runtime/components/form/Elements/__stories/AntInputLimiter.stories.mjs

@@ -0,0 +1,37 @@
+import AntInputLimiter from "../AntInputLimiter.vue";
+import { Size } from "../../../../enums/Size.enum.mjs";
+import { InputColorType } from "../../../../enums/index.mjs";
+const meta = {
+  title: "Components/Forms/Elements/Ant Input Limiter",
+  component: AntInputLimiter,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    size: {
+      control: { type: "radio" },
+      options: Object.values(Size),
+      table: { defaultValue: { summary: Size.md } }
+    },
+    skeleton: {
+      control: "boolean",
+      table: { defaultValue: { summary: false } }
+    },
+    colorType: {
+      control: { type: "select" },
+      options: Object.values(InputColorType)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntInputLimiter },
+    setup() {
+      return { args };
+    },
+    template: '<div class="p-4"><AntInputLimiter v-bind="args">Description</AntInputLimiter></div>'
+  }),
+  args: {
+    value: 0,
+    maxValue: 10
+  }
+};

package/dist/runtime/components/form/Elements/__types/AntBaseInput.type.d.ts

@@ -0,0 +1,16 @@
+export declare enum BaseInputType {
+    date = "date",
+    datetime = "datetime",
+    email = "email",
+    hidden = "hidden",
+    month = "month",
+    number = "number",
+    password = "password",
+    search = "search",
+    tel = "tel",
+    text = "text",
+    time = "time",
+    url = "url",
+    week = "week",
+    range = "range"
+}

package/dist/runtime/components/form/Elements/__types/AntBaseInput.type.mjs

@@ -0,0 +1,17 @@
+export var BaseInputType = /* @__PURE__ */ ((BaseInputType2) => {
+  BaseInputType2["date"] = "date";
+  BaseInputType2["datetime"] = "datetime";
+  BaseInputType2["email"] = "email";
+  BaseInputType2["hidden"] = "hidden";
+  BaseInputType2["month"] = "month";
+  BaseInputType2["number"] = "number";
+  BaseInputType2["password"] = "password";
+  BaseInputType2["search"] = "search";
+  BaseInputType2["tel"] = "tel";
+  BaseInputType2["text"] = "text";
+  BaseInputType2["time"] = "time";
+  BaseInputType2["url"] = "url";
+  BaseInputType2["week"] = "week";
+  BaseInputType2["range"] = "range";
+  return BaseInputType2;
+})(BaseInputType || {});

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

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

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

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

package/dist/runtime/components/form/Elements/index.d.ts

@@ -0,0 +1,6 @@
+import AntBaseInput from './AntBaseInput.vue';
+import AntField from './AntField.vue';
+import AntInputDescription from './AntInputDescription.vue';
+import AntInputLabel from './AntInputLabel.vue';
+import AntInputLimiter from './AntInputLimiter.vue';
+export { AntBaseInput, AntField, AntInputDescription, AntInputLabel, AntInputLimiter };

package/dist/runtime/components/form/Elements/index.mjs

@@ -0,0 +1,12 @@
+import AntBaseInput from "./AntBaseInput.vue";
+import AntField from "./AntField.vue";
+import AntInputDescription from "./AntInputDescription.vue";
+import AntInputLabel from "./AntInputLabel.vue";
+import AntInputLimiter from "./AntInputLimiter.vue";
+export {
+  AntBaseInput,
+  AntField,
+  AntInputDescription,
+  AntInputLabel,
+  AntInputLimiter
+};

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

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

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

@@ -0,0 +1,33 @@
+import AntFormGroup from "../AntFormGroup.vue";
+import AntFormGroupLabel from "../AntFormGroupLabel.vue";
+import AntTextInput from "../AntTextInput.vue";
+import AntButton from "../../buttons/AntButton.vue";
+import { Direction } from "../../../enums/Direction.enum.mjs";
+const meta = {
+  title: "Components/Forms/Form Group",
+  component: AntFormGroup,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    direction: {
+      control: { type: "select" },
+      options: Object.values(Direction)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntFormGroup, AntFormGroupLabel, AntTextInput, AntButton },
+    setup() {
+      return { args };
+    },
+    template: `
+      <AntFormGroup v-bind="args">
+        <AntFormGroupLabel>Example label</AntFormGroupLabel>
+        <AntTextInput label="Example"/>
+        <AntButton color-type="primary">Submit</AntButton>
+      </AntFormGroup>
+    `
+  }),
+  args: {}
+};

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

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

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

@@ -0,0 +1,20 @@
+import AntFormGroupLabel from "../AntFormGroupLabel.vue";
+const meta = {
+  title: "Components/Forms/Form Group Label",
+  component: AntFormGroupLabel,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {}
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntFormGroupLabel },
+    setup() {
+      return { args };
+    },
+    template: `
+      <AntFormGroupLabel v-bind="args">Example label</AntFormGroupLabel>
+    `
+  }),
+  args: {}
+};

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

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

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

@@ -0,0 +1,67 @@
+import { Size } from "../../../enums/Size.enum.mjs";
+import AntNumberInput from "../AntNumberInput.vue";
+import { ColorType } from "../../../enums/ColorType.enum.mjs";
+import { isRequiredRule, useFieldValidator } from "@antify/validate";
+import { reactive } from "vue";
+const meta = {
+  title: "Components/Forms/Number Input",
+  component: AntNumberInput,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    modelValue: {
+      control: { type: "number" },
+      table: { type: { summary: "number|null" } }
+    },
+    colorType: {
+      control: { type: "select" },
+      options: Object.values(ColorType)
+    },
+    size: {
+      control: { type: "radio" },
+      options: Object.values(Size),
+      table: { defaultValue: { summary: Size.md } }
+    },
+    placeholder: {
+      table: { defaultValue: { summary: "this.label" } }
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntNumberInput },
+    setup() {
+      const validator = reactive(useFieldValidator([
+        isRequiredRule,
+        (val) => typeof val !== "number" || val <= 8 || "Value should not be bigger than 8"
+      ]));
+      return { args, validator };
+    },
+    template: `
+      <AntNumberInput
+        v-bind="args"
+        v-model="args.modelValue"
+        :errors="Array.isArray(args.errors) ? args.errors : validator.getErrors()"
+        @validate="(val) => validator.validate(val)"
+      />`
+  }),
+  args: {
+    modelValue: null,
+    steps: 1,
+    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: 50,
+    limiter: true,
+    max: 10,
+    validator: useFieldValidator([
+      (val) => val <= 10 || "Value should not be bigger than 10",
+      (val) => val <= 11 || "It should be really not bigger than 10!!!!"
+    ])
+  }
+};

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

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

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

@@ -0,0 +1,40 @@
+import AntRangeSlider from "../AntRangeSlider.vue";
+import { ref } from "vue";
+import { InputColorType } from "../../../enums/index.mjs";
+const meta = {
+  title: "Components/Forms/Range Slider",
+  component: AntRangeSlider,
+  parameters: {
+    docs: {
+      description: {
+        component: "WIP: waiting for design to finish"
+      }
+    },
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    modelValue: {
+      control: "number",
+      description: "Reactive value"
+    },
+    colorType: {
+      control: { type: "select" },
+      options: Object.values(InputColorType)
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntRangeSlider },
+    setup() {
+      const value = ref(1);
+      return { args, value };
+    },
+    template: `
+      <AntRangeSlider v-bind="args" v-model="value"/>
+    `
+  })
+};