@antify/ui 1.0.4 → 1.2.0

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

@@ -3,11 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.summary = exports.default = exports.WithValidator = exports.Docs = void 0;
+exports.summary = exports.default = exports.Docs = void 0;
 var _vue = require("vue");
 var _AntRadioGroup = _interopRequireDefault(require("../AntRadioGroup.vue"));
 var _enums = require("../../../enums");
-var _validate = require("@antify/validate");
 var _Direction = require("../../../enums/Direction.enum");
 var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
 var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
@@ -110,51 +109,6 @@ const Docs = exports.Docs = {
     radioButtons: simpleButtons
   }
 };
-const WithValidator = exports.WithValidator = {
-  render: args => ({
-    components: {
-      AntRadioGroup: _AntRadioGroup.default
-    },
-    setup() {
-      const value = (0, _vue.ref)(null);
-      const validator = (0, _vue.ref)((0, _validate.useFieldValidator)([val => val !== "invalid-radio" || "Choose other option!"]));
-      return {
-        args,
-        value,
-        validator,
-        InputState: _enums.InputState
-      };
-    },
-    template: `
-      <AntRadioGroup
-        v-bind="args"
-        v-model="value"
-        :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: {
-    radioButtons: [{
-      id: "radio-1",
-      label: "Radio 1",
-      value: "radio-1"
-    }, {
-      id: "radio-2",
-      label: "Radio 2",
-      value: "radio-2"
-    }, {
-      id: "invalid-radio",
-      label: "Invalid Radio",
-      value: "invalid-radio"
-    }, {
-      id: "radio-4",
-      label: "Radio 4",
-      value: "radio-4"
-    }]
-  }
-};
 const summary = exports.summary = {
   parameters: {
     chromatic: {

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

@@ -1,7 +1,6 @@
 import { ref } from "vue";
 import AntRadioGroup from "../AntRadioGroup.vue";
 import { InputState, Size } from "../../../enums/index.mjs";
-import { useFieldValidator } from "@antify/validate";
 import { Direction } from "../../../enums/Direction.enum.mjs";
 import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
 import AntFormGroup from "../../forms/AntFormGroup.vue";
@@ -93,51 +92,6 @@ export const Docs = {
     radioButtons: simpleButtons
   }
 };
-export const WithValidator = {
-  render: (args) => ({
-    components: { AntRadioGroup },
-    setup() {
-      const value = ref(null);
-      const validator = ref(useFieldValidator([
-        (val) => val !== "invalid-radio" || "Choose other option!"
-      ]));
-      return { args, value, validator, InputState };
-    },
-    template: `
-      <AntRadioGroup
-        v-bind="args"
-        v-model="value"
-        :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: {
-    radioButtons: [
-      {
-        id: "radio-1",
-        label: "Radio 1",
-        value: "radio-1"
-      },
-      {
-        id: "radio-2",
-        label: "Radio 2",
-        value: "radio-2"
-      },
-      {
-        id: "invalid-radio",
-        label: "Invalid Radio",
-        value: "invalid-radio"
-      },
-      {
-        id: "radio-4",
-        label: "Radio 4",
-        value: "radio-4"
-      }
-    ]
-  }
-};
 export const summary = {
   parameters: {
     chromatic: { disableSnapshot: false }

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

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

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

@@ -3,11 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withValidator = exports.default = exports.Docs = void 0;
+module.exports = exports.Docs = void 0;
 var _AntRangeSlider = _interopRequireDefault(require("../AntRangeSlider.vue"));
 var _vue = require("vue");
 var _enums = require("../../../enums");
-var _validate = require("@antify/validate");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
   title: "Inputs/Range Slider",
@@ -52,35 +51,4 @@ const Docs = exports.Docs = {
       <AntRangeSlider v-bind="args" v-model="value"/>
     `
   })
-};
-const withValidator = exports.withValidator = {
-  render: args => ({
-    components: {
-      AntRangeSlider: _AntRangeSlider.default
-    },
-    setup() {
-      const value = (0, _vue.ref)(1);
-      const validator = (0, _vue.reactive)((0, _validate.useFieldValidator)(val => val > 80 || "The value must be bigger than 80!"));
-      return {
-        args,
-        value,
-        validator,
-        InputState: _enums.InputState
-      };
-    },
-    template: `
-      <AntRangeSlider
-        v-bind="args"
-        v-model="value"
-        :state="args.state ? args.state : (validator.hasErrors() ? InputState.danger : undefined)"
-        :messages="Array.isArray(args.messages) ? args.messages : validator.getErrors()"
-        @validate="(val) => validator.validate(val)"
-      />
-      <span class="text-sm text-gray-500">Reactive value: {{ value }}</span>
-    `
-  }),
-  args: {
-    max: 100,
-    description: "Lorem ipsum dolor sit amet"
-  }
 };

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

@@ -1,7 +1,6 @@
 import AntRangeSlider from "../AntRangeSlider.vue";
-import { reactive, ref } from "vue";
+import { ref } from "vue";
 import { InputState } from "../../../enums/index.mjs";
-import { useFieldValidator } from "@antify/validate";
 const meta = {
   title: "Inputs/Range Slider",
   component: AntRangeSlider,
@@ -39,29 +38,3 @@ export const Docs = {
     `
   })
 };
-export const withValidator = {
-  render: (args) => ({
-    components: { AntRangeSlider },
-    setup() {
-      const value = ref(1);
-      const validator = reactive(useFieldValidator(
-        (val) => val > 80 || "The value must be bigger than 80!"
-      ));
-      return { args, value, validator, InputState };
-    },
-    template: `
-      <AntRangeSlider
-        v-bind="args"
-        v-model="value"
-        :state="args.state ? args.state : (validator.hasErrors() ? InputState.danger : undefined)"
-        :messages="Array.isArray(args.messages) ? args.messages : validator.getErrors()"
-        @validate="(val) => validator.validate(val)"
-      />
-      <span class="text-sm text-gray-500">Reactive value: {{ value }}</span>
-    `
-  }),
-  args: {
-    max: 100,
-    description: "Lorem ipsum dolor sit amet"
-  }
-};

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

@@ -4,7 +4,6 @@ declare const meta: Meta<typeof AntSelect>;
 export default meta;
 type Story = StoryObj<typeof AntSelect>;
 export declare const Docs: Story;
-export declare const withValidator: Story;
 export declare const nullable: Story;
 export declare const skeleton: Story;
 export declare const disabled: Story;

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

@@ -3,11 +3,11 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withValidator = exports.withPlaceholder = exports.summary = exports.skeleton = exports.nullable = exports.ellipsisText = exports.disabled = exports.default = exports.Docs = void 0;
+exports.withPlaceholder = exports.summary = exports.skeleton = exports.nullable = exports.ellipsisText = exports.disabled = exports.default = exports.Docs = void 0;
 var _Size = require("../../../enums/Size.enum");
 var _AntSelect = _interopRequireDefault(require("../AntSelect.vue"));
+var _AntSelectMenu = _interopRequireDefault(require("../Elements/AntSelectMenu.vue"));
 var _vue = require("vue");
-var _validate = require("@antify/validate");
 var _enums = require("../../../enums");
 function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
 const meta = {
@@ -78,7 +78,8 @@ const options = [{
 const Docs = exports.Docs = {
   render: args => ({
     components: {
-      AntSelect: _AntSelect.default
+      AntSelect: _AntSelect.default,
+      AntDropdown: _AntSelectMenu.default
     },
     setup() {
       const modelValue = (0, _vue.computed)({
@@ -87,13 +88,25 @@ const Docs = exports.Docs = {
         // @ts-ignore
         set: val => args.modelValue = val
       });
+      const scrollContainer = (0, _vue.ref)(void 0);
+      (0, _vue.onMounted)(() => {
+        if (scrollContainer.value) {
+          scrollContainer.value.scrollTop = (scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight) / 2;
+        }
+      });
       return {
         args,
-        modelValue
+        modelValue,
+        scrollContainer
       };
     },
     template: `
-      <AntSelect v-bind="args" v-model="modelValue"/>`
+      <div ref="scrollContainer" class="overflow-y-auto h-[100vh] p-2.5 dashed">
+        <div class="flex items-center h-[200vh]">
+          <AntSelect v-bind="args" v-model="modelValue"/>
+        </div>
+      </div>
+    `
   }),
   args: {
     modelValue: null,
@@ -102,47 +115,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: {
-      AntSelect: _AntSelect.default
-    },
-    setup() {
-      const modelValue = (0, _vue.computed)({
-        // @ts-ignore
-        get: () => args.modelValue,
-        // @ts-ignore
-        set: val => args.modelValue = val
-      });
-      const validator = (0, _vue.reactive)((0, _validate.useFieldValidator)([val => val !== null || "This field should not be empty", val => val === "invalid" ? 'Value "Invalid" is not allowed' : true]));
-      return {
-        args,
-        modelValue,
-        validator,
-        InputState: _enums.InputState
-      };
-    },
-    template: `
-      <AntSelect
-        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)"
-      />`
-  }),
-  args: {
-    ...Docs.args,
-    options: [{
-      label: "Valid",
-      value: "valid"
-    }, {
-      label: "Invalid",
-      value: "invalid"
-    }],
-    nullable: true
-  }
-};
 const nullable = exports.nullable = {
   render: Docs.render,
   args: {

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

@@ -1,7 +1,7 @@
 import { Size } from "../../../enums/Size.enum.mjs";
 import AntSelect from "../AntSelect.vue";
-import { computed, reactive } from "vue";
-import { useFieldValidator } from "@antify/validate";
+import AntDropdown from "../Elements/AntSelectMenu.vue";
+import { computed, onMounted, ref } from "vue";
 import { InputState } from "../../../enums/index.mjs";
 const meta = {
   title: "Inputs/Select",
@@ -55,7 +55,7 @@ const options = [
 ];
 export const Docs = {
   render: (args) => ({
-    components: { AntSelect },
+    components: { AntSelect, AntDropdown },
     setup() {
       const modelValue = computed({
         // @ts-ignore
@@ -63,10 +63,21 @@ export const Docs = {
         // @ts-ignore
         set: (val) => args.modelValue = val
       });
-      return { args, modelValue };
+      const scrollContainer = ref(void 0);
+      onMounted(() => {
+        if (scrollContainer.value) {
+          scrollContainer.value.scrollTop = (scrollContainer.value.scrollHeight - scrollContainer.value.clientHeight) / 2;
+        }
+      });
+      return { args, modelValue, scrollContainer };
     },
     template: `
-      <AntSelect v-bind="args" v-model="modelValue"/>`
+      <div ref="scrollContainer" class="overflow-y-auto h-[100vh] p-2.5 dashed">
+        <div class="flex items-center h-[200vh]">
+          <AntSelect v-bind="args" v-model="modelValue"/>
+        </div>
+      </div>
+    `
   }),
   args: {
     modelValue: null,
@@ -75,48 +86,6 @@ export const Docs = {
     description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
   }
 };
-export const withValidator = {
-  render: (args) => ({
-    components: { AntSelect },
-    setup() {
-      const modelValue = computed({
-        // @ts-ignore
-        get: () => args.modelValue,
-        // @ts-ignore
-        set: (val) => args.modelValue = val
-      });
-      const validator = reactive(
-        useFieldValidator([
-          (val) => val !== null || "This field should not be empty",
-          (val) => val === "invalid" ? 'Value "Invalid" is not allowed' : true
-        ])
-      );
-      return { args, modelValue, validator, InputState };
-    },
-    template: `
-      <AntSelect
-        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)"
-      />`
-  }),
-  args: {
-    ...Docs.args,
-    options: [
-      {
-        label: "Valid",
-        value: "valid"
-      },
-      {
-        label: "Invalid",
-        value: "invalid"
-      }
-    ],
-    nullable: true
-  }
-};
 export const nullable = {
   render: Docs.render,
   args: {

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

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

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

@@ -3,11 +3,10 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withValidator = exports.default = exports.Summary = exports.Docs = void 0;
+module.exports = exports.Summary = exports.Docs = void 0;
 var _AntSwitch = _interopRequireDefault(require("../AntSwitch.vue"));
 var _vue = require("vue");
 var _enums = require("../../../enums");
-var _validate = require("@antify/validate");
 var _Size = require("../../../enums/Size.enum");
 var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
 var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
@@ -49,46 +48,6 @@ const Docs = exports.Docs = {
     modelValue: false
   }
 };
-const withValidator = exports.withValidator = {
-  render: args => ({
-    components: {
-      AntSwitch: _AntSwitch.default
-    },
-    setup() {
-      const value = (0, _vue.computed)({
-        // @ts-ignore
-        get: () => args.modelValue,
-        // @ts-ignore
-        set: val => args.modelValue = val
-      });
-      const validator = (0, _vue.reactive)((0, _validate.useFieldValidator)([val => {
-        return !val || "Switch must be off";
-      }]));
-      return {
-        args,
-        value,
-        validator,
-        InputState: _enums.InputState
-      };
-    },
-    template: `
-      <AntSwitch
-        v-bind="args"
-        v-model="value"
-        :state="args.state ? args.state : (validator.hasErrors() ? InputState.danger : undefined)"
-        :messages="Array.isArray(args.messages) ? args.messages : validator.getErrors()"
-        @validate="(val) => validator.validate(val)"
-      >
-        Value must be false
-      </AntSwitch>
-
-      <span class="text-sm text-gray-500">Reactive value: {{ value }}</span>
-    `
-  }),
-  args: {
-    ...Docs.args
-  }
-};
 const Summary = exports.Summary = {
   parameters: {
     chromatic: {

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

@@ -1,7 +1,6 @@
 import AntSwitch from "../AntSwitch.vue";
-import { computed, reactive, ref } from "vue";
+import { ref } from "vue";
 import { InputState } from "../../../enums/index.mjs";
-import { useFieldValidator } from "@antify/validate";
 import { Size } from "../../../enums/Size.enum.mjs";
 import AntFormGroup from "../../forms/AntFormGroup.vue";
 import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
@@ -34,41 +33,6 @@ export const Docs = {
     modelValue: false
   }
 };
-export const withValidator = {
-  render: (args) => ({
-    components: { AntSwitch },
-    setup() {
-      const value = computed({
-        // @ts-ignore
-        get: () => args.modelValue,
-        // @ts-ignore
-        set: (val) => args.modelValue = val
-      });
-      const validator = reactive(useFieldValidator([
-        (val) => {
-          return !val || "Switch must be off";
-        }
-      ]));
-      return { args, value, validator, InputState };
-    },
-    template: `
-      <AntSwitch
-        v-bind="args"
-        v-model="value"
-        :state="args.state ? args.state : (validator.hasErrors() ? InputState.danger : undefined)"
-        :messages="Array.isArray(args.messages) ? args.messages : validator.getErrors()"
-        @validate="(val) => validator.validate(val)"
-      >
-        Value must be false
-      </AntSwitch>
-
-      <span class="text-sm text-gray-500">Reactive value: {{ value }}</span>
-    `
-  }),
-  args: {
-    ...Docs.args
-  }
-};
 export const Summary = {
   parameters: {
     chromatic: { disableSnapshot: false }

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

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

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

@@ -3,10 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.withValidator = exports.default = exports.Summary = exports.Docs = void 0;
+module.exports = exports.Summary = exports.Docs = void 0;
 var _vue = require("vue");
 var _enums = require("../../../enums");
-var _validate = require("@antify/validate");
 var _AntSwitcher = _interopRequireDefault(require("../AntSwitcher.vue"));
 var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
 var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
@@ -85,55 +84,6 @@ const Docs = exports.Docs = {
     modelValue: "entry-1"
   }
 };
-const withValidator = exports.withValidator = {
-  render: args => ({
-    components: {
-      AntSwitcher: _AntSwitcher.default
-    },
-    setup() {
-      const modelValue = (0, _vue.computed)({
-        // @ts-ignore
-        get: () => args.modelValue,
-        // @ts-ignore
-        set: val => args.modelValue = val
-      });
-      const validator = (0, _vue.reactive)((0, _validate.useFieldValidator)(val => val === "entry-1" ? "Select something else" : true));
-      return {
-        args,
-        modelValue,
-        validator,
-        InputState: _enums.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"
-  }
-};
 const Summary = exports.Summary = {
   parameters: {
     chromatic: {

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

@@ -1,6 +1,5 @@
-import { computed, reactive, ref } from "vue";
+import { computed, 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";
@@ -75,55 +74,6 @@ export const Docs = {
     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 }

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

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