@antify/ui 1.0.4 → 1.2.0

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

@@ -3,12 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withValidator = exports.summary = exports.default = exports.Docs = exports.AllowCreate = void 0;
+exports.summary = exports.default = exports.Docs = exports.AllowCreate = void 0;
 var _AntTagInput = _interopRequireDefault(require("../AntTagInput.vue"));
 var _vue = require("vue");
 var _enums = require("../../../enums");
 var _AntTagInput2 = require("../__types/AntTagInput.types");
-var _validate = require("@antify/validate");
 var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
 var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -49,7 +48,6 @@ const meta = {
       }
     },
     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: {
@@ -102,38 +100,6 @@ const Docs = exports.Docs = {
     options
   }
 };
-const withValidator = exports.withValidator = {
-  render: args => ({
-    components: {
-      AntTagInput: _AntTagInput.default
-    },
-    setup() {
-      const value = (0, _vue.ref)(null);
-      const validator = (0, _vue.reactive)((0, _validate.useFieldValidator)(val => val?.length <= 3 || "Max 3 tags are allowed"));
-      return {
-        args,
-        value,
-        validator,
-        InputState: _enums.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
-  }
-};
 const AllowCreate = exports.AllowCreate = {
   render: Docs.render,
   args: {

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

@@ -1,9 +1,7 @@
 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 = {
@@ -27,7 +25,6 @@ const meta = {
       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: {
@@ -83,36 +80,6 @@ export const Docs = {
     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: {

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

@@ -4,6 +4,4 @@ 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;

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

@@ -3,13 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withValidator = exports.limited = exports.default = exports.Summary = exports.Docs = void 0;
+module.exports = exports.Summary = exports.Docs = void 0;
 var _Size = require("../../../enums/Size.enum");
 var _AntTextInput = _interopRequireDefault(require("../AntTextInput.vue"));
-var _validate = require("@antify/validate");
 var _AntTextInput2 = require("../__types/AntTextInput.types");
 var _enums = require("../../../enums");
-var _vue = require("vue");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   title: "Inputs/Text Input",
@@ -88,110 +86,6 @@ const Docs = exports.Docs = {
     description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
   }
 };
-const withValidator = exports.withValidator = {
-  render: args => ({
-    components: {
-      AntTextInput: _AntTextInput.default
-    },
-    setup() {
-      const errorValidator = (0, _vue.reactive)((0, _validate.useFieldValidator)([_validate.isRequiredRule, _validate.notBlankRule]));
-      const warningValidator = (0, _vue.reactive)((0, _validate.useFieldValidator)(val => val?.length >= 1 && val?.length <= 4 ? "It`s recommended to have a value with a length greater than 4" : true));
-      const infoValidator = (0, _vue.reactive)((0, _validate.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 = (0, _vue.reactive)((0, _validate.useFieldValidator)(val => val?.length >= 9 ? "Yes! The value length is big enough now" : true));
-      const state = (0, _vue.computed)(() => {
-        if (args.state) {
-          return args.state;
-        }
-        if (errorValidator.hasErrors()) {
-          return _enums.InputState.danger;
-        }
-        if (warningValidator.hasErrors()) {
-          return _enums.InputState.warning;
-        }
-        if (infoValidator.hasErrors()) {
-          return _enums.InputState.info;
-        }
-        if (successValidator.hasErrors()) {
-          return _enums.InputState.success;
-        }
-        return void 0;
-      });
-      const messages = (0, _vue.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: _enums.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"
-  }
-};
-const limited = exports.limited = {
-  render: args => ({
-    components: {
-      AntTextInput: _AntTextInput.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: `
-      <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
-  }
-};
 const Summary = exports.Summary = {
   parameters: {
     chromatic: {

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

@@ -1,9 +1,7 @@
 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,
@@ -51,108 +49,6 @@ export const Docs = {
     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 }

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

@@ -4,6 +4,4 @@ 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

@@ -3,13 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withValidator = exports.summary = exports.limited = exports.default = exports.Docs = void 0;
-var _validate = require("@antify/validate");
+exports.summary = exports.default = exports.Docs = void 0;
 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",
@@ -78,10 +76,12 @@ const Docs = exports.Docs = {
       };
     },
     template: `
-      <AntTextarea
-        v-bind="args"
-        v-model="args.modelValue"
-      />
+      <div class="h-screen">
+        <AntTextarea
+          v-bind="args"
+          v-model="args.modelValue"
+        />
+      </div>
     `
   }),
   args: {
@@ -90,65 +90,6 @@ const Docs = exports.Docs = {
     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: {

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

@@ -1,9 +1,7 @@
-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,
@@ -45,10 +43,12 @@ export const Docs = {
       return { args };
     },
     template: `
-      <AntTextarea
-        v-bind="args"
-        v-model="args.modelValue"
-      />
+      <div class="h-screen">
+        <AntTextarea
+          v-bind="args"
+          v-model="args.modelValue"
+        />
+      </div>
     `
   }),
   args: {
@@ -57,55 +57,6 @@ export const Docs = {
     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 }

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

@@ -4,6 +4,4 @@ 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;

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

@@ -3,13 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withValidator = exports.default = exports.UnitAsIcon = exports.Limited = exports.Docs = void 0;
+module.exports = exports.UnitAsIcon = exports.Docs = void 0;
 var _Size = require("../../../enums/Size.enum");
 var _AntUnitInput = _interopRequireDefault(require("../AntUnitInput.vue"));
 var _freeSolidSvgIcons = require("@fortawesome/free-solid-svg-icons");
 var _enums = require("../../../enums");
-var _validate = require("@antify/validate");
-var _vue = require("vue");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   title: "Inputs/Unit Input",
@@ -91,64 +89,6 @@ const Docs = exports.Docs = {
     description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
   }
 };
-const withValidator = exports.withValidator = {
-  render: args => ({
-    components: {
-      AntUnitInput: _AntUnitInput.default
-    },
-    setup() {
-      const validator = (0, _vue.reactive)((0, _validate.useFieldValidator)([_validate.isRequiredRule]));
-      return {
-        args,
-        validator,
-        InputState: _enums.InputState
-      };
-    },
-    template: `
-      <AntUnitInput
-        v-bind="args"
-        v-model="args.modelValue"
-        :unit="args.unit"
-        :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,
-    unit: "\u20AC",
-    label: "Label",
-    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-  }
-};
-const Limited = exports.Limited = {
-  render: args => ({
-    components: {
-      AntUnitInput: _AntUnitInput.default
-    },
-    setup() {
-      const validator = (0, _vue.reactive)((0, _validate.useFieldValidator)([_validate.isRequiredRule, val => val <= 10 || "Value should not be bigger than 10", val => val <= 11 || "It should be really not bigger than 10!!!!"]));
-      return {
-        args,
-        validator
-      };
-    },
-    template: `
-      <AntUnitInput
-        v-bind="args"
-        v-model="args.modelValue"
-        :unit="args.unit"
-        :errors="Array.isArray(args.errors) ? args.errors : validator.getErrors()"
-        @validate="(val) => validator.validate(val)"
-      />`
-  }),
-  args: {
-    ...Docs.args,
-    modelValue: 50,
-    limiter: true,
-    max: 10
-  }
-};
 const UnitAsIcon = exports.UnitAsIcon = {
   render: Docs.render,
   args: {