@antify/ui-module 1.5.1 → 1.7.1

package/dist/runtime/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/runtime/components/{form → inputs}/__stories/AntTextarea.stories.d.ts

@@ -4,5 +4,6 @@ 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/runtime/components/{form → inputs}/__stories/AntTextarea.stories.mjs

@@ -2,19 +2,19 @@ import { isRequiredRule, notBlankRule, useFieldValidator } from "@antify/validat
 import { Grouped as _Grouped } from "../../../enums/Grouped.enum.mjs";
 import { Size } from "../../../enums/Size.enum.mjs";
 import AntTextarea from "../AntTextarea.vue";
-import { InputColorType } from "../../../enums/index.mjs";
+import { InputState } from "../../../enums/index.mjs";
 import { reactive } from "vue";
 const meta = {
-  title: "Components/Forms/Textarea",
+  title: "Inputs/Textarea",
   component: AntTextarea,
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
-    colorType: {
+    state: {
       control: { type: "select" },
-      options: Object.values(InputColorType)
+      options: Object.values(InputState)
     },
     size: {
-      control: { type: "radio" },
+      control: { type: "select" },
       options: Object.values(Size)
     },
     placeholder: {
@@ -32,24 +32,44 @@ const meta = {
     },
     showIcon: {
       control: "boolean",
-      description: "Some InputColorTypes can has an icon. Control with this property if it get shown or not.",
+      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 };
+      return { args, validator, InputState };
     },
     template: `
       <AntTextarea
         v-bind="args"
         v-model="args.modelValue"
-        :errors="Array.isArray(args.errors) ? args.errors : validator.getErrors()"
+        :state="args.state ? args.state : (validator.hasErrors() ? InputState.danger : undefined)"
+        :messages="Array.isArray(args.messages) ? args.messages : validator.getErrors()"
         @validate="val => validator.validate(val)"
       />
     `
@@ -67,13 +87,14 @@ export const limited = {
       const validator = reactive(useFieldValidator(
         (val) => val?.length <= 10 || "Max. 10 characters allowed"
       ));
-      return { args, validator };
+      return { args, validator, InputState };
     },
     template: `
       <AntTextarea
         v-bind="args"
         v-model="args.modelValue"
-        :errors="Array.isArray(args.errors) ? args.errors : validator.getErrors()"
+        :state="args.state ? args.state : (validator.hasErrors() ? InputState.danger : undefined)"
+        :messages="Array.isArray(args.messages) ? args.messages : validator.getErrors()"
         @validate="(val) => validator.validate(val)"
       />
     `
@@ -97,33 +118,25 @@ export const summary = {
     template: `
       <div class="pb-10 flex flex-col gap-2">
         <div class="flex gap-2">
-          <AntTextarea v-bind="args" v-model:value="modelValue" color-type="base"/>
-          <AntTextarea v-bind="args" v-model:value="modelValue" color-type="info"/>
-          <AntTextarea v-bind="args" v-model:value="modelValue" color-type="success"/>
-          <AntTextarea v-bind="args" v-model:value="modelValue" color-type="warning"/>
-          <AntTextarea v-bind="args" v-model:value="modelValue" color-type="danger"/>
-        </div>
-
-        <div class="flex gap-2">
-          <AntTextarea v-bind="args" v-model:value="modelValue" :show-icon="false" color-type="base"/>
-          <AntTextarea v-bind="args" v-model:value="modelValue" :show-icon="false" color-type="info"/>
-          <AntTextarea v-bind="args" v-model:value="modelValue" :show-icon="false" color-type="success"/>
-          <AntTextarea v-bind="args" v-model:value="modelValue" :show-icon="false" color-type="warning"/>
-          <AntTextarea v-bind="args" v-model:value="modelValue" :show-icon="false" color-type="danger"/>
+          <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:value="modelValue" :icon-left="faSearch" color-type="base"/>
-          <AntTextarea v-bind="args" v-model:value="modelValue" :icon-left="faSearch" color-type="info"/>
-          <AntTextarea v-bind="args" v-model:value="modelValue" :icon-left="faSearch" color-type="success"/>
-          <AntTextarea v-bind="args" v-model:value="modelValue" :icon-left="faSearch" color-type="warning"/>
-          <AntTextarea v-bind="args" v-model:value="modelValue" :icon-left="faSearch" color-type="danger"/>
+          <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:value="modelValue" grouped="left"/>
-          <AntTextarea v-bind="args" v-model:value="modelValue" grouped="center" color-type="danger"/>
-          <AntTextarea v-bind="args" v-model:value="modelValue" grouped="right" color-type="info"/>
+          <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>`
   }),

package/dist/runtime/components/{form → inputs}/__stories/AntUnitInput.stories.d.ts

@@ -4,5 +4,6 @@ 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/runtime/components/{form → inputs}/__stories/AntUnitInput.stories.mjs

@@ -1,11 +1,11 @@
 import { Size } from "../../../enums/Size.enum.mjs";
 import AntUnitInput from "../AntUnitInput.vue";
 import { faEuroSign } from "@fortawesome/free-solid-svg-icons";
-import { InputColorType } from "../../../enums/index.mjs";
+import { InputState } from "../../../enums/index.mjs";
 import { isRequiredRule, useFieldValidator } from "@antify/validate";
 import { reactive } from "vue";
 const meta = {
-  title: "Components/Forms/Unit Input",
+  title: "Inputs/Unit Input",
   component: AntUnitInput,
   parameters: { controls: { sort: "requiredFirst" } },
   argTypes: {
@@ -17,12 +17,12 @@ const meta = {
       description: "Will be displayed right to the input.<br>Use text or Font-awesome Icons.",
       table: { type: { summary: "string|IconDefinition" } }
     },
-    colorType: {
+    state: {
       control: { type: "select" },
-      options: Object.values(InputColorType)
+      options: Object.values(InputState)
     },
     size: {
-      control: { type: "radio" },
+      control: { type: "select" },
       options: Object.values(Size)
     },
     placeholder: {
@@ -40,18 +40,36 @@ export const Docs = {
   render: (args) => ({
     components: { AntUnitInput },
     setup() {
-      const validator = reactive(useFieldValidator([
-        isRequiredRule,
-        (val) => typeof val !== "number" || val <= 8 || "Value should not be bigger than 8"
-      ]));
-      return { args, validator };
+      return { args };
     },
     template: `
       <AntUnitInput
         v-bind="args"
         v-model="args.modelValue"
         :unit="args.unit"
-        :errors="Array.isArray(args.errors) ? args.errors : validator.getErrors()"
+      />`
+  }),
+  args: {
+    modelValue: null,
+    unit: "\u20AC",
+    label: "Label",
+    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
+  }
+};
+export const withValidator = {
+  render: (args) => ({
+    components: { AntUnitInput },
+    setup() {
+      const validator = reactive(useFieldValidator([isRequiredRule]));
+      return { args, validator, 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)"
       />`
   }),
@@ -63,16 +81,30 @@ export const Docs = {
   }
 };
 export const Limited = {
-  render: Docs.render,
+  render: (args) => ({
+    components: { AntUnitInput },
+    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 };
+    },
+    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,
-    validator: useFieldValidator([
-      (val) => val <= 10 || "Value should not be bigger than 10",
-      (val) => val <= 11 || "It should be really not bigger than 10!!!!"
-    ])
+    max: 10
   }
 };
 export const UnitAsIcon = {

package/dist/runtime/components/{form/AntCheckboxWidget/__types/AntCheckbox.d.ts → inputs/__types/AntCheckbox.types.d.ts}

@@ -4,3 +4,7 @@ export type AntCheckboxType = {
     disabled?: boolean;
     readonly?: boolean;
 };
+export declare enum AntCheckboxSize {
+    md = "md",
+    sm = "sm"
+}

package/dist/runtime/components/inputs/__types/AntCheckbox.types.mjs

@@ -0,0 +1,5 @@
+export var AntCheckboxSize = /* @__PURE__ */ ((AntCheckboxSize2) => {
+  AntCheckboxSize2["md"] = "md";
+  AntCheckboxSize2["sm"] = "sm";
+  return AntCheckboxSize2;
+})(AntCheckboxSize || {});

package/dist/runtime/components/inputs/__types/AntDateInput.types.d.ts

@@ -0,0 +1,7 @@
+export declare enum AntDateInputTypes {
+    date = "date",
+    datetimeLocal = "datetime-local",
+    month = "month",
+    time = "time",
+    week = "week"
+}

package/dist/runtime/components/inputs/__types/AntDateInput.types.mjs

@@ -0,0 +1,8 @@
+export var AntDateInputTypes = /* @__PURE__ */ ((AntDateInputTypes2) => {
+  AntDateInputTypes2["date"] = "date";
+  AntDateInputTypes2["datetimeLocal"] = "datetime-local";
+  AntDateInputTypes2["month"] = "month";
+  AntDateInputTypes2["time"] = "time";
+  AntDateInputTypes2["week"] = "week";
+  return AntDateInputTypes2;
+})(AntDateInputTypes || {});

package/dist/runtime/components/inputs/__types/AntRadio.types.d.ts

@@ -0,0 +1,13 @@
+import { InputState } from '../../../enums';
+export declare enum AntRadioSize {
+    md = "md",
+    sm = "sm"
+}
+export type AntRadioTypes = {
+    value: string;
+    label?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    state?: InputState;
+    [key: string]: unknown;
+};

package/dist/runtime/components/inputs/__types/AntRadio.types.mjs

@@ -0,0 +1,5 @@
+export var AntRadioSize = /* @__PURE__ */ ((AntRadioSize2) => {
+  AntRadioSize2["md"] = "md";
+  AntRadioSize2["sm"] = "sm";
+  return AntRadioSize2;
+})(AntRadioSize || {});

package/dist/runtime/components/inputs/__types/AntSwitch.types.d.ts

@@ -0,0 +1,4 @@
+export declare enum AntSwitchSize {
+    md = "md",
+    sm = "sm"
+}

package/dist/runtime/components/inputs/__types/AntSwitch.types.mjs

@@ -0,0 +1,5 @@
+export var AntSwitchSize = /* @__PURE__ */ ((AntSwitchSize2) => {
+  AntSwitchSize2["md"] = "md";
+  AntSwitchSize2["sm"] = "sm";
+  return AntSwitchSize2;
+})(AntSwitchSize || {});

package/dist/runtime/components/inputs/__types/AntTagInput.types.d.ts

@@ -0,0 +1,5 @@
+export declare enum AntTagInputSize {
+    lg = "lg",
+    md = "md",
+    sm = "sm"
+}

package/dist/runtime/components/inputs/__types/AntTagInput.types.mjs

@@ -0,0 +1,6 @@
+export var AntTagInputSize = /* @__PURE__ */ ((AntTagInputSize2) => {
+  AntTagInputSize2["lg"] = "lg";
+  AntTagInputSize2["md"] = "md";
+  AntTagInputSize2["sm"] = "sm";
+  return AntTagInputSize2;
+})(AntTagInputSize || {});

package/dist/runtime/components/{form/__types/AntTextInput.type.d.ts → inputs/__types/AntTextInput.types.d.ts}

@@ -1,6 +1,5 @@
 export declare enum TextInputType {
     email = "email",
-    password = "password",
     tel = "tel",
     text = "text",
     url = "url"

package/dist/runtime/components/{form/__types/AntTextInput.type.mjs → inputs/__types/AntTextInput.types.mjs}

@@ -1,6 +1,5 @@
 export var TextInputType = /* @__PURE__ */ ((TextInputType2) => {
   TextInputType2["email"] = "email";
-  TextInputType2["password"] = "password";
   TextInputType2["tel"] = "tel";
   TextInputType2["text"] = "text";
   TextInputType2["url"] = "url";

package/dist/runtime/components/inputs/__types/index.d.ts

@@ -0,0 +1,8 @@
+export * from './AntCheckbox.types';
+export * from './AntDateInput.types';
+export * from './AntRadio.types';
+export * from './AntSelect.types';
+export * from './AntSwitch.types';
+export * from './AntSwitcher.types';
+export * from './AntTagInput.types';
+export * from './AntTextInput.types';

package/dist/runtime/components/inputs/__types/index.mjs

@@ -0,0 +1,8 @@
+export * from "./AntCheckbox.types.mjs";
+export * from "./AntDateInput.types.mjs";
+export * from "./AntRadio.types.mjs";
+export * from "./AntSelect.types.mjs";
+export * from "./AntSwitch.types.mjs";
+export * from "./AntSwitcher.types.mjs";
+export * from "./AntTagInput.types.mjs";
+export * from "./AntTextInput.types.mjs";

package/dist/runtime/components/layouts/AntNavLeftLayout.vue

@@ -2,18 +2,18 @@
 import {computed, useSlots} from 'vue';
 import AntNavbar from '../navbar/AntNavbar.vue';
 import type {RouteLocationRaw} from 'vue-router';
-import type {NavbarItem} from '../navbar/__types/NavbarItem';
+import type {NavbarItemTypes} from '../navbar/__types/NavbarItem.types';
 
 defineProps<{
-  navbarItems: NavbarItem[];
+  navbarItems: NavbarItemTypes[];
   logoRoute?: RouteLocationRaw;
-}>()
+}>();
 
 const hasLogoImageSlot = computed(() => useSlots()['logo-image'] || false);
 </script>
 
 <template>
-  <div class="flex gap-px bg-neutral-300 h-screen overflow-hidden">
+  <div class="flex gap-px bg-neutral-300 h-screen min-w-full overflow-y-hidden">
     <div class="flex flex-col gap-px bg-neutral-300 w-52 shrink-0">
       <component
         :is="logoRoute ? 'RouterLink' : 'div'"
@@ -29,7 +29,7 @@ const hasLogoImageSlot = computed(() => useSlots()['logo-image'] || false);
       />
     </div>
 
-    <div class="flex-grow">
+    <div class="w-px flex-grow">
       <slot />
     </div>
   </div>

package/dist/runtime/components/layouts/__stories/AntNavLeftLayout.stories.mjs

@@ -25,7 +25,7 @@ export const Docs = {
           <img src="/logo.svg" class="h-full w-full"/>
         </template>
 
-        <div class="slot m-2.5">SLOT</div>
+        <div class="slot m-2.5 h-full !text-white !border-white">SLOT</div>
       </AntNavLeftLayout>
     `
   }),