@antify/ui 1.0.0

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

@@ -0,0 +1,158 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.withValidator = exports.default = exports.UnitAsIcon = exports.Limited = 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",
+  component: _AntUnitInput.default,
+  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(_enums.InputState)
+    },
+    size: {
+      control: {
+        type: "select"
+      },
+      options: Object.values(_Size.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"
+        }
+      }
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntUnitInput: _AntUnitInput.default
+    },
+    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"
+  }
+};
+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: {
+    ...Docs.args,
+    unit: _freeSolidSvgIcons.faEuroSign
+  }
+};

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

@@ -0,0 +1,116 @@
+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/components/inputs/__types/AntCheckbox.types.d.ts

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

package/dist/components/inputs/__types/AntCheckbox.types.js

@@ -0,0 +1 @@
+"use strict";

package/dist/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/components/inputs/__types/AntDateInput.types.js

@@ -0,0 +1,14 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AntDateInputTypes = void 0;
+var AntDateInputTypes = exports.AntDateInputTypes = /* @__PURE__ */(AntDateInputTypes2 => {
+  AntDateInputTypes2["date"] = "date";
+  AntDateInputTypes2["datetimeLocal"] = "datetime-local";
+  AntDateInputTypes2["month"] = "month";
+  AntDateInputTypes2["time"] = "time";
+  AntDateInputTypes2["week"] = "week";
+  return AntDateInputTypes2;
+})(AntDateInputTypes || {});

package/dist/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/components/inputs/__types/AntRadio.types.d.ts

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

package/dist/components/inputs/__types/AntRadio.types.js

@@ -0,0 +1 @@
+"use strict";

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

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

package/dist/components/inputs/__types/AntSelect.types.js

@@ -0,0 +1 @@
+"use strict";

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

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

package/dist/components/inputs/__types/AntSwitcher.types.js

@@ -0,0 +1 @@
+"use strict";

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

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

package/dist/components/inputs/__types/AntTagInput.types.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AntTagInputSize = void 0;
+var AntTagInputSize = exports.AntTagInputSize = /* @__PURE__ */(AntTagInputSize2 => {
+  AntTagInputSize2["lg"] = "lg";
+  AntTagInputSize2["md"] = "md";
+  AntTagInputSize2["sm"] = "sm";
+  return AntTagInputSize2;
+})(AntTagInputSize || {});

package/dist/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/components/inputs/__types/AntTextInput.types.d.ts

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

package/dist/components/inputs/__types/AntTextInput.types.js

@@ -0,0 +1,13 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TextInputType = void 0;
+var TextInputType = exports.TextInputType = /* @__PURE__ */(TextInputType2 => {
+  TextInputType2["email"] = "email";
+  TextInputType2["tel"] = "tel";
+  TextInputType2["text"] = "text";
+  TextInputType2["url"] = "url";
+  return TextInputType2;
+})(TextInputType || {});

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

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

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

@@ -0,0 +1,7 @@
+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/components/inputs/__types/index.js

@@ -0,0 +1,82 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _AntCheckbox = require("./AntCheckbox.types");
+Object.keys(_AntCheckbox).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AntCheckbox[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AntCheckbox[key];
+    }
+  });
+});
+var _AntDateInput = require("./AntDateInput.types");
+Object.keys(_AntDateInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AntDateInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AntDateInput[key];
+    }
+  });
+});
+var _AntRadio = require("./AntRadio.types");
+Object.keys(_AntRadio).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AntRadio[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AntRadio[key];
+    }
+  });
+});
+var _AntSelect = require("./AntSelect.types");
+Object.keys(_AntSelect).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AntSelect[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AntSelect[key];
+    }
+  });
+});
+var _AntSwitcher = require("./AntSwitcher.types");
+Object.keys(_AntSwitcher).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AntSwitcher[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AntSwitcher[key];
+    }
+  });
+});
+var _AntTagInput = require("./AntTagInput.types");
+Object.keys(_AntTagInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AntTagInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AntTagInput[key];
+    }
+  });
+});
+var _AntTextInput = require("./AntTextInput.types");
+Object.keys(_AntTextInput).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AntTextInput[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AntTextInput[key];
+    }
+  });
+});

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

@@ -0,0 +1,7 @@
+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/components/layouts/AntNavLeftLayout.vue

@@ -0,0 +1,36 @@
+<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/components/layouts/__stories/AntNavLeftLayout.stories.d.ts

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

package/dist/components/layouts/__stories/AntNavLeftLayout.stories.js

@@ -0,0 +1,77 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.WithoutLogo = exports.Docs = void 0;
+var _AntTabs = _interopRequireDefault(require("../../tabs/AntTabs.vue"));
+var _AntNavLeftLayout = _interopRequireDefault(require("../AntNavLeftLayout.vue"));
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Layouts/NavLeftLayout",
+  component: _AntNavLeftLayout.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  decorators: [() => ({
+    template: '<div class="border border-dashed border-neutral-300"><story/></div>'
+  })],
+  argTypes: {}
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntTabs: _AntTabs.default,
+      AntNavLeftLayout: _AntNavLeftLayout.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <AntNavLeftLayout v-bind="args">
+        <template #logo-image>
+          <img src="/logo.svg" class="h-full w-full"/>
+        </template>
+
+        <div class="slot m-2.5 h-full !text-white !border-white">SLOT</div>
+      </AntNavLeftLayout>
+    `
+  }),
+  args: {
+    logoRoute: "/",
+    navbarItems: [{
+      label: "User",
+      active: true
+    }, {
+      label: "Invoice"
+    }, {
+      label: "Settings"
+    }]
+  }
+};
+const WithoutLogo = exports.WithoutLogo = {
+  render: args => ({
+    components: {
+      AntTabs: _AntTabs.default,
+      AntNavLeftLayout: _AntNavLeftLayout.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <AntNavLeftLayout v-bind="args">
+        <div class="slot m-2.5">SLOT</div>
+      </AntNavLeftLayout>
+    `
+  }),
+  args: {
+    ...Docs.args
+  }
+};