@antify/ui 1.0.0

package/dist/components/inputs/__stories/AntTextInput.stories.mjs

@@ -0,0 +1,225 @@
+import { Size } from "../../../enums/Size.enum.mjs";
+import AntTextInput from "../AntTextInput.vue";
+import { isRequiredRule, notBlankRule, useFieldValidator } from "@antify/validate";
+import { TextInputType } from "../__types/AntTextInput.types.mjs";
+import { InputState } from "../../../enums/index.mjs";
+import { computed, reactive } from "vue";
+const meta = {
+  title: "Inputs/Text Input",
+  component: AntTextInput,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    modelValue: {
+      control: "text",
+      table: { type: { summary: "string|null" } }
+    },
+    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" } }
+    },
+    type: {
+      control: { type: "select" },
+      options: Object.values(TextInputType),
+      table: { defaultValue: { summary: TextInputType.text } }
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntTextInput },
+    setup() {
+      return { args };
+    },
+    template: `
+      <AntTextInput
+        v-bind="args"
+        v-model="args.modelValue"
+      />`
+  }),
+  args: {
+    modelValue: null,
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+  }
+};
+export const withValidator = {
+  render: (args) => ({
+    components: { AntTextInput },
+    setup() {
+      const errorValidator = reactive(useFieldValidator([isRequiredRule, notBlankRule]));
+      const warningValidator = reactive(useFieldValidator(
+        (val) => val?.length >= 1 && val?.length <= 4 ? "It`s recommended to have a value with a length greater than 4" : true
+      ));
+      const infoValidator = reactive(useFieldValidator(
+        (val) => val?.length >= 5 && val?.length <= 8 ? "Way better! But if you type in 4 characters more, the value is perfect!" : true
+      ));
+      const successValidator = reactive(useFieldValidator(
+        (val) => val?.length >= 9 ? "Yes! The value length is big enough now" : true
+      ));
+      const state = computed(() => {
+        if (args.state) {
+          return args.state;
+        }
+        if (errorValidator.hasErrors()) {
+          return InputState.danger;
+        }
+        if (warningValidator.hasErrors()) {
+          return InputState.warning;
+        }
+        if (infoValidator.hasErrors()) {
+          return InputState.info;
+        }
+        if (successValidator.hasErrors()) {
+          return InputState.success;
+        }
+        return void 0;
+      });
+      const messages = computed(() => {
+        if (args.messages) {
+          return args.messages;
+        }
+        if (errorValidator.hasErrors()) {
+          return errorValidator.getErrors();
+        }
+        if (warningValidator.hasErrors()) {
+          return warningValidator.getErrors();
+        }
+        if (infoValidator.hasErrors()) {
+          return infoValidator.getErrors();
+        }
+        if (successValidator.hasErrors()) {
+          return successValidator.getErrors();
+        }
+        return void 0;
+      });
+      function validate(val) {
+        errorValidator.validate(val);
+        warningValidator.validate(val);
+        infoValidator.validate(val);
+        successValidator.validate(val);
+      }
+      return {
+        args,
+        validate,
+        state,
+        messages,
+        InputState
+      };
+    },
+    template: `
+      <AntTextInput
+        v-bind="args"
+        v-model="args.modelValue"
+        :state="state"
+        :messages="messages"
+        @validate="validate"
+      />`
+  }),
+  args: {
+    modelValue: null,
+    label: "Label",
+    description: "Focus in the element and blur out. After that, follow the error, warning, info and success instructions"
+  }
+};
+export const limited = {
+  render: (args) => ({
+    components: { AntTextInput },
+    setup() {
+      const validator = reactive(useFieldValidator([(val) => val.length <= 10 || "Max. 10 characters allowed"]));
+      return { args, validator, InputState };
+    },
+    template: `
+      <AntTextInput
+        v-bind="args"
+        v-model="args.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,
+    modelValue: "A to long value",
+    max: 10,
+    limiter: true
+  }
+};
+export const Summary = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
+  render: (args) => ({
+    components: { AntTextInput },
+    setup() {
+      return { args, InputState };
+    },
+    template: `
+      <div class="flex gap-2.5">
+        <AntTextInput
+          v-bind="args"
+          v-model="args.modelValue"
+        />
+        <AntTextInput
+          v-bind="args"
+          v-model="args.modelValue"
+          :state="InputState.info"
+        />
+        <AntTextInput
+          v-bind="args"
+          v-model="args.modelValue"
+          :state="InputState.success"
+        />
+        <AntTextInput
+          v-bind="args"
+          v-model="args.modelValue"
+          :state="InputState.warning"
+        />
+        <AntTextInput
+          v-bind="args"
+          v-model="args.modelValue"
+          :state="InputState.danger"
+        />
+      </div>
+      <div class="flex gap-2.5">
+        <AntTextInput
+          v-bind="args"
+          v-model="args.modelValue"
+        />
+        <AntTextInput
+          v-bind="args"
+          v-model="args.modelValue"
+          :state="InputState.info"
+        />
+        <AntTextInput
+          v-bind="args"
+          v-model="args.modelValue"
+          :state="InputState.success"
+        />
+        <AntTextInput
+          v-bind="args"
+          v-model="args.modelValue"
+          :state="InputState.warning"
+        />
+        <AntTextInput
+          v-bind="args"
+          v-model="args.modelValue"
+          :state="InputState.danger"
+        />
+      </div>
+    `
+  }),
+  args: {
+    modelValue: null,
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+  }
+};

package/dist/components/inputs/__stories/AntTextarea.stories.d.ts

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

package/dist/components/inputs/__stories/AntTextarea.stories.js

@@ -0,0 +1,189 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withValidator = exports.summary = exports.limited = exports.default = exports.Docs = void 0;
+var _validate = require("@antify/validate");
+var _Grouped2 = require("../../../enums/Grouped.enum");
+var _Size = require("../../../enums/Size.enum");
+var _AntTextarea = _interopRequireDefault(require("../AntTextarea.vue"));
+var _enums = require("../../../enums");
+var _vue = require("vue");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Inputs/Textarea",
+  component: _AntTextarea.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  argTypes: {
+    state: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_enums.InputState)
+    },
+    size: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_Size.Size)
+    },
+    placeholder: {
+      table: {
+        defaultValue: {
+          summary: "this.label"
+        }
+      }
+    },
+    grouped: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_Grouped2.Grouped),
+      description: "Where is this fields position in a group"
+    },
+    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 InputStates can has an icon. Control with this property if it get shown or not.",
+      table: {
+        type: {
+          summary: "Type"
+        }
+      }
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntTextarea: _AntTextarea.default
+    },
+    setup: () => {
+      return {
+        args
+      };
+    },
+    template: `
+      <AntTextarea
+        v-bind="args"
+        v-model="args.modelValue"
+      />
+    `
+  }),
+  args: {
+    modelValue: null,
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+  }
+};
+const withValidator = exports.withValidator = {
+  render: args => ({
+    components: {
+      AntTextarea: _AntTextarea.default
+    },
+    setup: () => {
+      const validator = (0, _vue.reactive)((0, _validate.useFieldValidator)([_validate.isRequiredRule, _validate.notBlankRule]));
+      return {
+        args,
+        validator,
+        InputState: _enums.InputState
+      };
+    },
+    template: `
+      <AntTextarea
+        v-bind="args"
+        v-model="args.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: {
+    modelValue: null,
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+  }
+};
+const limited = exports.limited = {
+  render: args => ({
+    components: {
+      AntTextarea: _AntTextarea.default
+    },
+    setup: () => {
+      const validator = (0, _vue.reactive)((0, _validate.useFieldValidator)(val => val?.length <= 10 || "Max. 10 characters allowed"));
+      return {
+        args,
+        validator,
+        InputState: _enums.InputState
+      };
+    },
+    template: `
+      <AntTextarea
+        v-bind="args"
+        v-model="args.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,
+    modelValue: "A to long value",
+    limiter: true,
+    max: 10
+  }
+};
+const summary = exports.summary = {
+  parameters: {
+    chromatic: {
+      disableSnapshot: false
+    }
+  },
+  render: (args, ctx) => ({
+    // @ts-ignore
+    components: Docs.render(args, ctx).components,
+    // @ts-ignore
+    setup: Docs.render(args, ctx).setup,
+    template: `
+      <div class="pb-10 flex flex-col gap-2">
+        <div class="flex gap-2">
+          <AntTextarea v-bind="args" v-model="modelValue" state="base"/>
+          <AntTextarea v-bind="args" v-model="modelValue" state="info"/>
+          <AntTextarea v-bind="args" v-model="modelValue" state="success"/>
+          <AntTextarea v-bind="args" v-model="modelValue" state="warning"/>
+          <AntTextarea v-bind="args" v-model="modelValue" state="danger"/>
+        </div>
+
+        <div class="flex gap-2">
+          <AntTextarea v-bind="args" v-model="modelValue" :show-icon="false" state="base"/>
+          <AntTextarea v-bind="args" v-model="modelValue" :show-icon="false" state="info"/>
+          <AntTextarea v-bind="args" v-model="modelValue" :show-icon="false" state="success"/>
+          <AntTextarea v-bind="args" v-model="modelValue" :show-icon="false" state="warning"/>
+          <AntTextarea v-bind="args" v-model="modelValue" :show-icon="false" state="danger"/>
+        </div>
+
+        <div class="flex gap-[-2px]">
+          <AntTextarea v-bind="args" v-model="modelValue" grouped="left"/>
+          <AntTextarea v-bind="args" v-model="modelValue" grouped="center" state="danger"/>
+          <AntTextarea v-bind="args" v-model="modelValue" grouped="right" state="info"/>
+        </div>
+      </div>`
+  }),
+  args: Docs.args
+};

package/dist/components/inputs/__stories/AntTextarea.stories.mjs

@@ -0,0 +1,144 @@
+import { isRequiredRule, notBlankRule, useFieldValidator } from "@antify/validate";
+import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
+import { Size } from "../../../enums/Size.enum.mjs";
+import AntTextarea from "../AntTextarea.vue";
+import { InputState } from "../../../enums/index.mjs";
+import { reactive } from "vue";
+const meta = {
+  title: "Inputs/Textarea",
+  component: AntTextarea,
+  parameters: { controls: { sort: "requiredFirst" } },
+  argTypes: {
+    state: {
+      control: { type: "select" },
+      options: Object.values(InputState)
+    },
+    size: {
+      control: { type: "select" },
+      options: Object.values(Size)
+    },
+    placeholder: {
+      table: { defaultValue: { summary: "this.label" } }
+    },
+    grouped: {
+      control: { type: "select" },
+      options: Object.values(_Grouped),
+      description: "Where is this fields position in a group"
+    },
+    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 InputStates can has an icon. Control with this property if it get shown or not.",
+      table: { type: { summary: "Type" } }
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntTextarea },
+    setup: () => {
+      return { args };
+    },
+    template: `
+      <AntTextarea
+        v-bind="args"
+        v-model="args.modelValue"
+      />
+    `
+  }),
+  args: {
+    modelValue: null,
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+  }
+};
+export const withValidator = {
+  render: (args) => ({
+    components: { AntTextarea },
+    setup: () => {
+      const validator = reactive(useFieldValidator([isRequiredRule, notBlankRule]));
+      return { args, validator, InputState };
+    },
+    template: `
+      <AntTextarea
+        v-bind="args"
+        v-model="args.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: {
+    modelValue: null,
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+  }
+};
+export const limited = {
+  render: (args) => ({
+    components: { AntTextarea },
+    setup: () => {
+      const validator = reactive(useFieldValidator(
+        (val) => val?.length <= 10 || "Max. 10 characters allowed"
+      ));
+      return { args, validator, InputState };
+    },
+    template: `
+      <AntTextarea
+        v-bind="args"
+        v-model="args.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,
+    modelValue: "A to long value",
+    limiter: true,
+    max: 10
+  }
+};
+export const summary = {
+  parameters: {
+    chromatic: { disableSnapshot: false }
+  },
+  render: (args, ctx) => ({
+    // @ts-ignore
+    components: Docs.render(args, ctx).components,
+    // @ts-ignore
+    setup: Docs.render(args, ctx).setup,
+    template: `
+      <div class="pb-10 flex flex-col gap-2">
+        <div class="flex gap-2">
+          <AntTextarea v-bind="args" v-model="modelValue" state="base"/>
+          <AntTextarea v-bind="args" v-model="modelValue" state="info"/>
+          <AntTextarea v-bind="args" v-model="modelValue" state="success"/>
+          <AntTextarea v-bind="args" v-model="modelValue" state="warning"/>
+          <AntTextarea v-bind="args" v-model="modelValue" state="danger"/>
+        </div>
+
+        <div class="flex gap-2">
+          <AntTextarea v-bind="args" v-model="modelValue" :show-icon="false" state="base"/>
+          <AntTextarea v-bind="args" v-model="modelValue" :show-icon="false" state="info"/>
+          <AntTextarea v-bind="args" v-model="modelValue" :show-icon="false" state="success"/>
+          <AntTextarea v-bind="args" v-model="modelValue" :show-icon="false" state="warning"/>
+          <AntTextarea v-bind="args" v-model="modelValue" :show-icon="false" state="danger"/>
+        </div>
+
+        <div class="flex gap-[-2px]">
+          <AntTextarea v-bind="args" v-model="modelValue" grouped="left"/>
+          <AntTextarea v-bind="args" v-model="modelValue" grouped="center" state="danger"/>
+          <AntTextarea v-bind="args" v-model="modelValue" grouped="right" state="info"/>
+        </div>
+      </div>`
+  }),
+  args: Docs.args
+};

package/dist/components/inputs/__stories/AntUnitInput.stories.d.ts

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