@antify/ui-module 1.7.3 → 1.8.2

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

@@ -1,225 +0,0 @@
-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/inputs/__stories/AntTextarea.stories.d.ts

@@ -1,9 +0,0 @@
-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/runtime/components/inputs/__stories/AntTextarea.stories.mjs

@@ -1,144 +0,0 @@
-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/runtime/components/inputs/__stories/AntUnitInput.stories.d.ts

@@ -1,9 +0,0 @@
-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;

package/dist/runtime/components/inputs/__stories/AntUnitInput.stories.mjs

@@ -1,116 +0,0 @@
-import { Size } from "../../../enums/Size.enum.mjs";
-import AntUnitInput from "../AntUnitInput.vue";
-import { faEuroSign } from "@fortawesome/free-solid-svg-icons";
-import { InputState } from "../../../enums/index.mjs";
-import { isRequiredRule, useFieldValidator } from "@antify/validate";
-import { reactive } from "vue";
-const meta = {
-  title: "Inputs/Unit Input",
-  component: AntUnitInput,
-  parameters: { controls: { sort: "requiredFirst" } },
-  argTypes: {
-    modelValue: {
-      table: { type: { summary: "number|null" } }
-    },
-    unit: {
-      control: "text",
-      description: "Will be displayed right to the input.<br>Use text or Font-awesome Icons.",
-      table: { type: { summary: "string|IconDefinition" } }
-    },
-    state: {
-      control: { type: "select" },
-      options: Object.values(InputState)
-    },
-    size: {
-      control: { type: "select" },
-      options: Object.values(Size)
-    },
-    placeholder: {
-      table: { defaultValue: { summary: "this.label" } }
-    },
-    wrapperClass: {
-      control: "text",
-      description: 'Class for the first element because the attribute "class" would affect the input element.',
-      table: { type: { summary: "string|object" } }
-    }
-  }
-};
-export default meta;
-export const Docs = {
-  render: (args) => ({
-    components: { AntUnitInput },
-    setup() {
-      return { args };
-    },
-    template: `
-      <AntUnitInput
-        v-bind="args"
-        v-model="args.modelValue"
-        :unit="args.unit"
-      />`
-  }),
-  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)"
-      />`
-  }),
-  args: {
-    modelValue: null,
-    unit: "\u20AC",
-    label: "Label",
-    description: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod"
-  }
-};
-export const Limited = {
-  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
-  }
-};
-export const UnitAsIcon = {
-  render: Docs.render,
-  args: {
-    ...Docs.args,
-    unit: faEuroSign
-  }
-};

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

@@ -1,6 +0,0 @@
-export type AntCheckboxType = {
-    label: string;
-    value: string;
-    disabled?: boolean;
-    readonly?: boolean;
-};

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

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

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

@@ -1,8 +0,0 @@
-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

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

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

@@ -1,4 +0,0 @@
-export type SelectOption = {
-    label: string;
-    value: string | number;
-};

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

@@ -1,4 +0,0 @@
-export type SwitcherOption = {
-    label: string;
-    value: string | number;
-};

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

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

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

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

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

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

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

@@ -1,7 +0,0 @@
-export var TextInputType = /* @__PURE__ */ ((TextInputType2) => {
-  TextInputType2["email"] = "email";
-  TextInputType2["tel"] = "tel";
-  TextInputType2["text"] = "text";
-  TextInputType2["url"] = "url";
-  return TextInputType2;
-})(TextInputType || {});

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

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

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

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

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

@@ -1,36 +0,0 @@
-<script setup lang="ts">
-import {computed, useSlots} from 'vue';
-import AntNavbar from '../navbar/AntNavbar.vue';
-import type {RouteLocationRaw} from 'vue-router';
-import type {NavbarItemTypes} from '../navbar/__types/NavbarItem.types';
-
-defineProps<{
-  navbarItems: NavbarItemTypes[];
-  logoRoute?: RouteLocationRaw;
-}>();
-
-const hasLogoImageSlot = computed(() => useSlots()['logo-image'] || false);
-</script>
-
-<template>
-  <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'"
-        v-if="hasLogoImageSlot"
-        :to="logoRoute"
-        class="bg-white min-h-[60px] flex justify-center items-center p-2.5"
-      >
-        <slot name="logo-image" />
-      </component>
-
-      <AntNavbar
-        :navbar-items="navbarItems"
-      />
-    </div>
-
-    <div class="w-px flex-grow">
-      <slot />
-    </div>
-  </div>
-</template>

package/dist/runtime/components/layouts/__stories/AntNavLeftLayout.stories.d.ts

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