@antify/ui 1.0.4 → 1.2.0

package/dist/components/inputs/Elements/index.js

@@ -33,9 +33,16 @@ Object.defineProperty(exports, "AntInputLimiter", {
     return _AntInputLimiter.default;
   }
 });
+Object.defineProperty(exports, "AntSelectMenu", {
+  enumerable: true,
+  get: function () {
+    return _AntSelectMenu.default;
+  }
+});
 var _AntBaseInput = _interopRequireDefault(require("./AntBaseInput.vue"));
 var _AntField = _interopRequireDefault(require("../../forms/AntField.vue"));
 var _AntInputDescription = _interopRequireDefault(require("./AntInputDescription.vue"));
 var _AntInputLabel = _interopRequireDefault(require("./AntInputLabel.vue"));
 var _AntInputLimiter = _interopRequireDefault(require("./AntInputLimiter.vue"));
+var _AntSelectMenu = _interopRequireDefault(require("./AntSelectMenu.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }

package/dist/components/inputs/Elements/index.mjs

@@ -3,10 +3,12 @@ import AntField from "../../forms/AntField.vue";
 import AntInputDescription from "./AntInputDescription.vue";
 import AntInputLabel from "./AntInputLabel.vue";
 import AntInputLimiter from "./AntInputLimiter.vue";
+import AntSelectMenu from "./AntSelectMenu.vue";
 export {
   AntBaseInput,
   AntField,
   AntInputDescription,
   AntInputLabel,
-  AntInputLimiter
+  AntInputLimiter,
+  AntSelectMenu
 };

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

@@ -4,5 +4,4 @@ declare const meta: Meta<typeof AntCheckbox>;
 export default meta;
 type Story = StoryObj<typeof AntCheckbox>;
 export declare const Docs: Story;
-export declare const WithValidator: Story;
 export declare const Summary: Story;

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

@@ -3,11 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.WithValidator = exports.Summary = exports.Docs = void 0;
+module.exports = exports.Summary = exports.Docs = void 0;
 var _AntCheckbox = _interopRequireDefault(require("../AntCheckbox.vue"));
 var _vue = require("vue");
 var _enums = require("../../../enums");
-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 }; }
@@ -62,47 +61,6 @@ const Docs = exports.Docs = {
     `
   })
 };
-const WithValidator = exports.WithValidator = {
-  render: args => ({
-    components: {
-      AntCheckbox: _AntCheckbox.default
-    },
-    setup() {
-      const modelValue = (0, _vue.computed)({
-        get() {
-          return args.modelValue;
-        },
-        set(val) {
-          args.modelValue = val;
-        }
-      });
-      const validator = (0, _vue.ref)((0, _validate.useFieldValidator)(val => !val ? "Check this box!" : true));
-      return {
-        args,
-        modelValue,
-        validator,
-        InputState: _enums.InputState
-      };
-    },
-    template: `
-      <div class="m-2">
-        <AntCheckbox
-          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)"
-        >
-          Accept some kind of document before continuing
-        </AntCheckbox>
-        <span class="text-sm text-gray-500">Reactive value: {{ modelValue }}</span>
-      </div>
-    `
-  }),
-  args: {
-    modelValue: false
-  }
-};
 const Summary = exports.Summary = {
   parameters: {
     chromatic: {

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

@@ -1,7 +1,6 @@
 import AntCheckbox from "../AntCheckbox.vue";
 import { computed, ref } from "vue";
 import { InputState, Size } from "../../../enums/index.mjs";
-import { useFieldValidator } from "@antify/validate";
 import AntFormGroup from "../../forms/AntFormGroup.vue";
 import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
 const meta = {
@@ -42,40 +41,6 @@ export const Docs = {
     `
   })
 };
-export const WithValidator = {
-  render: (args) => ({
-    components: { AntCheckbox },
-    setup() {
-      const modelValue = computed({
-        get() {
-          return args.modelValue;
-        },
-        set(val) {
-          args.modelValue = val;
-        }
-      });
-      const validator = ref(useFieldValidator((val) => !val ? "Check this box!" : true));
-      return { args, modelValue, validator, InputState };
-    },
-    template: `
-      <div class="m-2">
-        <AntCheckbox
-          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)"
-        >
-          Accept some kind of document before continuing
-        </AntCheckbox>
-        <span class="text-sm text-gray-500">Reactive value: {{ modelValue }}</span>
-      </div>
-    `
-  }),
-  args: {
-    modelValue: false
-  }
-};
 export const Summary = {
   parameters: {
     chromatic: { disableSnapshot: false }

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

@@ -4,4 +4,3 @@ declare const meta: Meta<typeof AntCheckboxGroup>;
 export default meta;
 type Story = StoryObj<typeof AntCheckboxGroup>;
 export declare const Docs: Story;
-export declare const WithValidator: Story;

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

@@ -3,12 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.WithValidator = exports.Docs = void 0;
+module.exports = exports.Docs = void 0;
 var _AntCheckboxGroup = _interopRequireDefault(require("../AntCheckboxGroup.vue"));
-var _vue = require("vue");
 var _enums = require("../../../enums");
 var _Direction = require("../../../enums/Direction.enum");
-var _validate = require("@antify/validate");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   title: "Inputs/Checkbox Group",
@@ -76,32 +74,4 @@ const Docs = exports.Docs = {
       value: "checkbox-4"
     }]
   }
-};
-const WithValidator = exports.WithValidator = {
-  render: args => ({
-    components: {
-      AntCheckboxGroup: _AntCheckboxGroup.default
-    },
-    setup() {
-      const validator = (0, _vue.reactive)((0, _validate.useFieldValidator)(val => val.length >= 2 || "Select at least 2"));
-      return {
-        args,
-        validator,
-        InputState: _enums.InputState
-      };
-    },
-    template: `
-      <AntCheckboxGroup
-        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: null
-  }
 };

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

@@ -1,8 +1,6 @@
 import AntCheckboxGroup from "../AntCheckboxGroup.vue";
-import { reactive } from "vue";
 import { InputState, Size } from "../../../enums/index.mjs";
 import { Direction } from "../../../enums/Direction.enum.mjs";
-import { useFieldValidator } from "@antify/validate";
 const meta = {
   title: "Inputs/Checkbox Group",
   component: AntCheckboxGroup,
@@ -56,29 +54,3 @@ export const Docs = {
     }]
   }
 };
-export const WithValidator = {
-  render: (args) => ({
-    components: { AntCheckboxGroup },
-    setup() {
-      const validator = reactive(useFieldValidator((val) => val.length >= 2 || "Select at least 2"));
-      return {
-        args,
-        validator,
-        InputState
-      };
-    },
-    template: `
-      <AntCheckboxGroup
-        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: null
-  }
-};

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

@@ -4,5 +4,4 @@ declare const meta: Meta<typeof AntDateInput>;
 export default meta;
 type Story = StoryObj<typeof AntDateInput>;
 export declare const Docs: Story;
-export declare const WithValidator: Story;
 export declare const Summary: Story;

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

@@ -3,14 +3,12 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.WithValidator = exports.Summary = exports.Docs = void 0;
+module.exports = exports.Summary = exports.Docs = void 0;
 var _Size = require("../../../enums/Size.enum");
 var _Direction = require("../../../enums/Direction.enum");
 var _AntDateInput = _interopRequireDefault(require("../AntDateInput.vue"));
 var _enums = require("../../../enums");
 var _AntDateInput2 = require("../__types/AntDateInput.types");
-var _validate = require("@antify/validate");
-var _vue = require("vue");
 var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
 var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
@@ -74,35 +72,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: {
-      AntDateInput: _AntDateInput.default
-    },
-    setup() {
-      const validator = (0, _vue.reactive)((0, _validate.useFieldValidator)([_validate.isRequiredRule, val => typeof val !== "number" || val <= 8 || "Value should not be bigger than 8"]));
-      return {
-        args,
-        validator,
-        InputState: _enums.InputState
-      };
-    },
-    template: `
-      <AntDateInput
-        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 Summary = exports.Summary = {
   parameters: {
     chromatic: {

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

@@ -3,8 +3,6 @@ import { Direction } from "../../../enums/Direction.enum.mjs";
 import AntDateInput from "../AntDateInput.vue";
 import { InputState } from "../../../enums/index.mjs";
 import { AntDateInputTypes } from "../__types/AntDateInput.types.mjs";
-import { isRequiredRule, useFieldValidator } from "@antify/validate";
-import { reactive } from "vue";
 import AntFormGroup from "../../forms/AntFormGroup.vue";
 import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
 const meta = {
@@ -49,32 +47,6 @@ export const Docs = {
     description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
   }
 };
-export const WithValidator = {
-  render: (args) => ({
-    components: { AntDateInput },
-    setup() {
-      const validator = reactive(useFieldValidator([
-        isRequiredRule,
-        (val) => typeof val !== "number" || val <= 8 || "Value should not be bigger than 8"
-      ]));
-      return { args, validator, InputState };
-    },
-    template: `
-      <AntDateInput
-        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 Summary = {
   parameters: {
     chromatic: { disableSnapshot: false }

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

@@ -4,7 +4,5 @@ declare const meta: Meta<typeof AntNumberInput>;
 export default meta;
 type Story = StoryObj<typeof AntNumberInput>;
 export declare const Docs: Story;
-export declare const withValidator: Story;
-export declare const Limited: Story;
 export declare const WithIndicators: Story;
 export declare const Summary: Story;

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

@@ -3,20 +3,15 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withValidator = exports.default = exports.WithIndicators = exports.Summary = exports.Limited = exports.Docs = void 0;
+module.exports = exports.WithIndicators = exports.Summary = exports.Docs = void 0;
 var _Size = require("../../../enums/Size.enum");
 var _AntNumberInput = _interopRequireDefault(require("../AntNumberInput.vue"));
 var _State = require("../../../enums/State.enum");
-var _validate = require("@antify/validate");
 var _vue = require("vue");
 var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
 var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
-  components: {
-    AntFormGroupLabel: _AntFormGroupLabel.default,
-    AntFormGroup: _AntFormGroup.default
-  },
   title: "Inputs/Number Input",
   component: _AntNumberInput.default,
   parameters: {
@@ -85,65 +80,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: {
-      AntNumberInput: _AntNumberInput.default
-    },
-    setup() {
-      const validator = (0, _vue.reactive)((0, _validate.useFieldValidator)(_validate.isRequiredRule));
-      return {
-        args,
-        validator,
-        InputState: _State.InputState
-      };
-    },
-    template: `
-      <AntNumberInput
-        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,
-    steps: 1,
-    label: "Label",
-    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-  }
-};
-const Limited = exports.Limited = {
-  render: args => ({
-    components: {
-      AntNumberInput: _AntNumberInput.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,
-        InputState: _State.InputState
-      };
-    },
-    template: `
-      <AntNumberInput
-        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: 50,
-    limiter: true,
-    max: 10,
-    indicators: true
-  }
-};
 const WithIndicators = exports.WithIndicators = {
   render: Docs.render,
   args: {

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

@@ -1,12 +1,10 @@
 import { Size } from "../../../enums/Size.enum.mjs";
 import AntNumberInput from "../AntNumberInput.vue";
 import { InputState } from "../../../enums/State.enum.mjs";
-import { isRequiredRule, useFieldValidator } from "@antify/validate";
-import { reactive, ref } from "vue";
+import { ref } from "vue";
 import AntFormGroup from "../../forms/AntFormGroup.vue";
 import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
 const meta = {
-  components: { AntFormGroupLabel, AntFormGroup },
   title: "Inputs/Number Input",
   component: AntNumberInput,
   parameters: { controls: { sort: "requiredFirst" } },
@@ -49,57 +47,6 @@ export const Docs = {
     description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
   }
 };
-export const withValidator = {
-  render: (args) => ({
-    components: { AntNumberInput },
-    setup() {
-      const validator = reactive(useFieldValidator(isRequiredRule));
-      return { args, validator, InputState };
-    },
-    template: `
-      <AntNumberInput
-        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,
-    steps: 1,
-    label: "Label",
-    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-  }
-};
-export const Limited = {
-  render: (args) => ({
-    components: { AntNumberInput },
-    setup() {
-      const validator = reactive(useFieldValidator([
-        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, InputState };
-    },
-    template: `
-      <AntNumberInput
-        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: 50,
-    limiter: true,
-    max: 10,
-    indicators: true
-  }
-};
 export const WithIndicators = {
   render: Docs.render,
   args: {

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

@@ -4,5 +4,4 @@ declare const meta: Meta<typeof AntPasswordInput>;
 export default meta;
 type Story = StoryObj<typeof AntPasswordInput>;
 export declare const Docs: Story;
-export declare const WithValidator: Story;
 export declare const Summary: Story;

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

@@ -3,20 +3,14 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-module.exports = exports.WithValidator = exports.Summary = exports.Docs = void 0;
+module.exports = exports.Summary = exports.Docs = void 0;
 var _Size = require("../../../enums/Size.enum");
-var _validate = require("@antify/validate");
 var _enums = require("../../../enums");
-var _vue = require("vue");
 var _AntPasswordInput = _interopRequireDefault(require("../AntPasswordInput.vue"));
 var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
 var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
-  components: {
-    AntFormGroupLabel: _AntFormGroupLabel.default,
-    AntFormGroup: _AntFormGroup.default
-  },
   title: "Inputs/Password Input",
   component: _AntPasswordInput.default,
   parameters: {
@@ -82,34 +76,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: {
-      AntPasswordInput: _AntPasswordInput.default
-    },
-    setup() {
-      const validator = (0, _vue.reactive)((0, _validate.useFieldValidator)([_validate.isRequiredRule, _validate.notBlankRule]));
-      return {
-        args,
-        validator,
-        InputState: _enums.InputState
-      };
-    },
-    template: `
-      <AntPasswordInput
-        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 Summary = exports.Summary = {
   parameters: {
     chromatic: {

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

@@ -1,12 +1,9 @@
 import { Size } from "../../../enums/Size.enum.mjs";
-import { isRequiredRule, notBlankRule, useFieldValidator } from "@antify/validate";
 import { InputState } from "../../../enums/index.mjs";
-import { reactive } from "vue";
 import AntPasswordInput from "../AntPasswordInput.vue";
 import AntFormGroup from "../../forms/AntFormGroup.vue";
 import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
 const meta = {
-  components: { AntFormGroupLabel, AntFormGroup },
   title: "Inputs/Password Input",
   component: AntPasswordInput,
   parameters: { controls: { sort: "requiredFirst" } },
@@ -48,28 +45,6 @@ export const Docs = {
     description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
   }
 };
-export const WithValidator = {
-  render: (args) => ({
-    components: { AntPasswordInput },
-    setup() {
-      const validator = reactive(useFieldValidator([isRequiredRule, notBlankRule]));
-      return { args, validator, InputState };
-    },
-    template: `
-      <AntPasswordInput
-        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 Summary = {
   parameters: {
     chromatic: { disableSnapshot: false }

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

@@ -4,5 +4,4 @@ declare const meta: Meta<typeof AntRadioGroup>;
 export default meta;
 type Story = StoryObj<typeof AntRadioGroup>;
 export declare const Docs: Story;
-export declare const WithValidator: Story;
 export declare const summary: Story;