@antify/ui 1.0.0

package/dist/components/tabs/__stories/AntTabs.stories.js

@@ -0,0 +1,183 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+module.exports = exports.Summary = exports.FixedHeight = exports.Docs = exports.DifferentStates = void 0;
+var _AntTabs = _interopRequireDefault(require("../AntTabs.vue"));
+var _AntFormGroupLabel = _interopRequireDefault(require("../../forms/AntFormGroupLabel.vue"));
+var _AntFormGroup = _interopRequireDefault(require("../../forms/AntFormGroup.vue"));
+var _vue = require("vue");
+var _freeRegularSvgIcons = require("@fortawesome/free-regular-svg-icons");
+var _AntTabItem = require("../__types/AntTabItem.types");
+var _storybookVue3Router = require("storybook-vue3-router");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+const meta = {
+  title: "Components/Tabs",
+  component: _AntTabs.default,
+  parameters: {
+    controls: {
+      sort: "requiredFirst"
+    }
+  },
+  decorators: [(0, _storybookVue3Router.vueRouter)()],
+  argTypes: {
+    modelValue: {
+      control: "text",
+      table: {
+        type: {
+          summary: "string | undefined"
+        }
+      }
+    }
+  }
+};
+module.exports = meta;
+const Docs = exports.Docs = {
+  render: args => ({
+    components: {
+      AntTabs: _AntTabs.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <div class="dashed">
+        <AntTabs v-bind="args" v-model="args.modelValue"/>
+      </div>
+    `
+  }),
+  args: {
+    tabItems: [{
+      id: "1",
+      label: "First tab"
+    }, {
+      id: "2",
+      label: "Second tab"
+    }, {
+      id: "3",
+      label: "Third tab"
+    }, {
+      id: "4",
+      label: "Fourth tab"
+    }]
+  }
+};
+const FixedHeight = exports.FixedHeight = {
+  render: args => ({
+    components: {
+      AntTabs: _AntTabs.default
+    },
+    setup() {
+      return {
+        args
+      };
+    },
+    template: `
+      <div class="dashed h-20">
+        <AntTabs v-bind="args" v-model="args.modelValue"/>
+      </div>
+    `
+  }),
+  args: Docs.args
+};
+const DifferentStates = exports.DifferentStates = {
+  render: Docs.render,
+  args: {
+    tabItems: [{
+      id: "1",
+      label: "First tab"
+    }, {
+      id: "2",
+      label: "Second tab"
+    }, {
+      id: "3",
+      label: "Third tab",
+      state: _AntTabItem.TabItemState.warning
+    }, {
+      id: "4",
+      label: "Fourth tab",
+      state: _AntTabItem.TabItemState.danger
+    }]
+  }
+};
+const Summary = exports.Summary = {
+  render: args => ({
+    components: {
+      AntTabs: _AntTabs.default,
+      AntFormGroupLabel: _AntFormGroupLabel.default,
+      AntFormGroup: _AntFormGroup.default
+    },
+    setup() {
+      const value_1 = (0, _vue.ref)();
+      const value_2 = (0, _vue.ref)();
+      const value_3 = (0, _vue.ref)("2");
+      const tabItems_1 = [{
+        id: "1",
+        label: "My account"
+      }];
+      const tabItems_2 = [{
+        id: "1",
+        appendIcon: _freeRegularSvgIcons.faUserCircle,
+        label: "My account"
+      }, {
+        id: "2",
+        prependIcon: _freeRegularSvgIcons.faUserCircle,
+        label: "Downloads"
+      }];
+      const tabItems_3 = [{
+        id: "1",
+        appendIcon: _freeRegularSvgIcons.faUserCircle,
+        prependIcon: _freeRegularSvgIcons.faUserCircle,
+        label: "My account",
+        to: "/#"
+      }, {
+        id: "2",
+        prependIcon: _freeRegularSvgIcons.faUserCircle,
+        appendIcon: _freeRegularSvgIcons.faUserCircle,
+        label: "Downloads",
+        to: "/#"
+      }, {
+        id: "3",
+        appendIcon: _freeRegularSvgIcons.faUserCircle,
+        prependIcon: _freeRegularSvgIcons.faUserCircle,
+        label: "Messages",
+        to: "/#"
+      }];
+      return {
+        args,
+        value_1,
+        value_2,
+        value_3,
+        tabItems_1,
+        tabItems_2,
+        tabItems_3
+      };
+    },
+    template: `
+      <AntFormGroup>
+        <AntFormGroupLabel>Default</AntFormGroupLabel>
+        <AntFormGroup>
+          <div class="dashed"><AntTabs v-model="value_1" :tab-items="tabItems_1"/></div>
+          <div class="dashed"><AntTabs v-model="value_2" :tab-items="tabItems_2"/></div>
+          <div class="dashed"><AntTabs v-model="value_3" :tab-items="tabItems_3"/></div>
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Expanded</AntFormGroupLabel>
+        <AntFormGroup>
+          <div class="dashed"><AntTabs v-model="value_1" :tab-items="tabItems_1" expanded separators/></div>
+          <div class="dashed"><AntTabs v-model="value_2" :tab-items="tabItems_2" expanded separators/></div>
+          <div class="dashed"><AntTabs v-model="value_3" :tab-items="tabItems_3" expanded separators/></div>
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Larger container</AntFormGroupLabel>
+        <div class="h-16 dashed">
+          <AntTabs v-model="value_3" :tab-items="tabItems_3" expanded separators/>
+        </div>
+      </AntFormGroup>
+    `
+  }),
+  args: {}
+};

package/dist/components/tabs/__stories/AntTabs.stories.mjs

@@ -0,0 +1,179 @@
+import AntTabs from "../AntTabs.vue";
+import AntFormGroupLabel from "../../forms/AntFormGroupLabel.vue";
+import AntFormGroup from "../../forms/AntFormGroup.vue";
+import { ref } from "vue";
+import { faUserCircle } from "@fortawesome/free-regular-svg-icons";
+import { TabItemState } from "../__types/AntTabItem.types.mjs";
+import { vueRouter } from "storybook-vue3-router";
+const meta = {
+  title: "Components/Tabs",
+  component: AntTabs,
+  parameters: { controls: { sort: "requiredFirst" } },
+  decorators: [vueRouter()],
+  argTypes: {
+    modelValue: {
+      control: "text",
+      table: {
+        type: {
+          summary: "string | undefined"
+        }
+      }
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntTabs },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="dashed">
+        <AntTabs v-bind="args" v-model="args.modelValue"/>
+      </div>
+    `
+  }),
+  args: {
+    tabItems: [
+      {
+        id: "1",
+        label: "First tab"
+      },
+      {
+        id: "2",
+        label: "Second tab"
+      },
+      {
+        id: "3",
+        label: "Third tab"
+      },
+      {
+        id: "4",
+        label: "Fourth tab"
+      }
+    ]
+  }
+};
+export const FixedHeight = {
+  render: (args) => ({
+    components: { AntTabs },
+    setup() {
+      return { args };
+    },
+    template: `
+      <div class="dashed h-20">
+        <AntTabs v-bind="args" v-model="args.modelValue"/>
+      </div>
+    `
+  }),
+  args: Docs.args
+};
+export const DifferentStates = {
+  render: Docs.render,
+  args: {
+    tabItems: [
+      {
+        id: "1",
+        label: "First tab"
+      },
+      {
+        id: "2",
+        label: "Second tab"
+      },
+      {
+        id: "3",
+        label: "Third tab",
+        state: TabItemState.warning
+      },
+      {
+        id: "4",
+        label: "Fourth tab",
+        state: TabItemState.danger
+      }
+    ]
+  }
+};
+export const Summary = {
+  render: (args) => ({
+    components: { AntTabs, AntFormGroupLabel, AntFormGroup },
+    setup() {
+      const value_1 = ref();
+      const value_2 = ref();
+      const value_3 = ref("2");
+      const tabItems_1 = [
+        {
+          id: "1",
+          label: "My account"
+        }
+      ];
+      const tabItems_2 = [
+        {
+          id: "1",
+          appendIcon: faUserCircle,
+          label: "My account"
+        },
+        {
+          id: "2",
+          prependIcon: faUserCircle,
+          label: "Downloads"
+        }
+      ];
+      const tabItems_3 = [
+        {
+          id: "1",
+          appendIcon: faUserCircle,
+          prependIcon: faUserCircle,
+          label: "My account",
+          to: "/#"
+        },
+        {
+          id: "2",
+          prependIcon: faUserCircle,
+          appendIcon: faUserCircle,
+          label: "Downloads",
+          to: "/#"
+        },
+        {
+          id: "3",
+          appendIcon: faUserCircle,
+          prependIcon: faUserCircle,
+          label: "Messages",
+          to: "/#"
+        }
+      ];
+      return {
+        args,
+        value_1,
+        value_2,
+        value_3,
+        tabItems_1,
+        tabItems_2,
+        tabItems_3
+      };
+    },
+    template: `
+      <AntFormGroup>
+        <AntFormGroupLabel>Default</AntFormGroupLabel>
+        <AntFormGroup>
+          <div class="dashed"><AntTabs v-model="value_1" :tab-items="tabItems_1"/></div>
+          <div class="dashed"><AntTabs v-model="value_2" :tab-items="tabItems_2"/></div>
+          <div class="dashed"><AntTabs v-model="value_3" :tab-items="tabItems_3"/></div>
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Expanded</AntFormGroupLabel>
+        <AntFormGroup>
+          <div class="dashed"><AntTabs v-model="value_1" :tab-items="tabItems_1" expanded separators/></div>
+          <div class="dashed"><AntTabs v-model="value_2" :tab-items="tabItems_2" expanded separators/></div>
+          <div class="dashed"><AntTabs v-model="value_3" :tab-items="tabItems_3" expanded separators/></div>
+        </AntFormGroup>
+
+        <AntFormGroupLabel>Larger container</AntFormGroupLabel>
+        <div class="h-16 dashed">
+          <AntTabs v-model="value_3" :tab-items="tabItems_3" expanded separators/>
+        </div>
+      </AntFormGroup>
+    `
+  }),
+  args: {}
+};

package/dist/components/tabs/__types/AntTabItem.types.d.ts

@@ -0,0 +1,17 @@
+import { type IconDefinition } from '@fortawesome/free-solid-svg-icons';
+import { type RouteLocationRaw } from 'vue-router';
+export type TabItem = {
+    id: string;
+    label: string;
+    state?: TabItemState;
+    showIcon?: boolean;
+    icon?: IconDefinition;
+    to?: string | RouteLocationRaw;
+    clickHandler?: () => void;
+    [key: string]: unknown;
+};
+export declare enum TabItemState {
+    base = "base",
+    warning = "warning",
+    danger = "danger"
+}

package/dist/components/tabs/__types/AntTabItem.types.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TabItemState = void 0;
+var TabItemState = exports.TabItemState = /* @__PURE__ */(TabItemState2 => {
+  TabItemState2["base"] = "base";
+  TabItemState2["warning"] = "warning";
+  TabItemState2["danger"] = "danger";
+  return TabItemState2;
+})(TabItemState || {});

package/dist/components/tabs/__types/AntTabItem.types.mjs

@@ -0,0 +1,6 @@
+export var TabItemState = /* @__PURE__ */ ((TabItemState2) => {
+  TabItemState2["base"] = "base";
+  TabItemState2["warning"] = "warning";
+  TabItemState2["danger"] = "danger";
+  return TabItemState2;
+})(TabItemState || {});

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

@@ -0,0 +1 @@
+export * from './AntTabItem.types';

package/dist/components/tabs/__types/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _AntTabItem = require("./AntTabItem.types");
+Object.keys(_AntTabItem).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _AntTabItem[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _AntTabItem[key];
+    }
+  });
+});

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

@@ -0,0 +1 @@
+export * from "./AntTabItem.types.mjs";

package/dist/components/transitions/AntTransitionCollapseHeight.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+/**
+ * It is not possible to smoothly animate height or max-height with CSS transitions not using a fixed value
+ * like 'height: 1rem';
+ *
+ * This component does it via javascript.
+ */
+
+// @ts-nocheck
+// TODO:: fix typescript errors
+/**
+ * @param {HTMLElement} element
+ */
+function beforeEnter(element) {
+  requestAnimationFrame(() => {
+    if (!element.style.height) {
+      element.style.height = '0px';
+    }
+
+    element.style.display = '';
+    // element.style.display = null;
+  });
+}
+
+/**
+ * @param {HTMLElement} element
+ */
+function enter(element) {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      element.style.height = `${element.scrollHeight}px`;
+    });
+  });
+}
+
+/**
+ * @param {HTMLElement} element
+ */
+function afterEnter(element) {
+  element.style.height = '';
+  // element.style.height = null;
+}
+
+/**
+ * @param {HTMLElement} element
+ */
+function beforeLeave(element) {
+  requestAnimationFrame(() => {
+    if (!element.style.height) {
+      element.style.height = `${element.offsetHeight}px`;
+    }
+  });
+}
+
+/**
+ * @param {HTMLElement} element
+ */
+function leave(element) {
+  requestAnimationFrame(() => {
+    requestAnimationFrame(() => {
+      element.style.height = '0px';
+    });
+  });
+}
+
+/**
+ * @param {HTMLElement} element
+ */
+function afterLeave(element) {
+  element.style.height = '';
+  // element.style.height = null;
+}
+</script>
+
+<template>
+  <transition
+    enter-active-class="enter-active"
+    leave-active-class="leave-active"
+    @before-enter="beforeEnter"
+    @enter="enter"
+    @after-enter="afterEnter"
+    @before-leave="beforeLeave"
+    @leave="leave"
+    @after-leave="afterLeave"
+  >
+    <slot/>
+  </transition>
+</template>
+
+<style scoped>
+.enter-active,
+.leave-active {
+  overflow: hidden;
+  transition: height .4s ease-in-out;
+}
+</style>

package/dist/composables/index.d.ts

@@ -0,0 +1 @@
+export * from './useToaster';

package/dist/composables/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _useToaster = require("./useToaster");
+Object.keys(_useToaster).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _useToaster[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _useToaster[key];
+    }
+  });
+});

package/dist/composables/index.mjs

@@ -0,0 +1 @@
+export * from "./useToaster.mjs";

package/dist/composables/useToaster.d.ts

@@ -0,0 +1,21 @@
+import { InputState } from '../enums';
+import { type Toast } from '../components/__types/AntToaster.types';
+export declare const useToaster: () => {
+    getToasts(): {
+        id?: string | undefined;
+        title: string;
+        content?: string | undefined;
+        type: InputState;
+        hasIcon?: boolean | undefined;
+    }[];
+    toast(toast: Toast): void;
+    removeToast(toast: Toast): void;
+    toastSuccess(message: string): void;
+    toastError(message: string): void;
+    toastWarning(message: string): void;
+    toastInfo(message: string): void;
+    toastDeleted(): void;
+    toastCreated(): void;
+    toastUpdated(): void;
+    toastDuplicated(): void;
+};

package/dist/composables/useToaster.js

@@ -0,0 +1,72 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.useToaster = void 0;
+var _vue = require("vue");
+var _enums = require("../enums");
+const useToaster = () => {
+  const toasts = (0, _vue.ref)([]);
+  return {
+    getToasts() {
+      return [...toasts.value].reverse();
+    },
+    toast(toast) {
+      const id = `${Date.now()}`;
+      toasts.value.push({
+        ...toast,
+        id
+      });
+      setTimeout(() => {
+        const index = toasts.value.findIndex(toast2 => toast2.id === id);
+        if (index !== -1) {
+          toasts.value.splice(index, 1);
+        }
+      }, 5e3);
+    },
+    removeToast(toast) {
+      const index = toasts.value.indexOf(toast);
+      if (index !== -1) {
+        toasts.value.splice(index, 1);
+      }
+    },
+    toastSuccess(message) {
+      this.toast({
+        title: message,
+        type: _enums.InputState.success
+      });
+    },
+    toastError(message) {
+      this.toast({
+        title: message,
+        type: _enums.InputState.danger
+      });
+    },
+    toastWarning(message) {
+      this.toast({
+        title: message,
+        type: _enums.InputState.warning
+      });
+    },
+    toastInfo(message) {
+      this.toast({
+        title: message,
+        type: _enums.InputState.info
+      });
+    },
+    toastDeleted() {
+      this.toastSuccess("Deleted");
+    },
+    toastCreated() {
+      this.toastSuccess("Saved");
+    },
+    toastUpdated() {
+      this.toastSuccess("Saved");
+    },
+    toastDuplicated() {
+      this.toastSuccess("Duplicated");
+    }
+  };
+};
+exports.useToaster = useToaster;

package/dist/composables/useToaster.mjs

@@ -0,0 +1,53 @@
+import { ref } from "vue";
+import { InputState } from "../enums/index.mjs";
+export const useToaster = () => {
+  const toasts = ref([]);
+  return {
+    getToasts() {
+      return [...toasts.value].reverse();
+    },
+    toast(toast) {
+      const id = `${Date.now()}`;
+      toasts.value.push({
+        ...toast,
+        id
+      });
+      setTimeout(() => {
+        const index = toasts.value.findIndex((toast2) => toast2.id === id);
+        if (index !== -1) {
+          toasts.value.splice(index, 1);
+        }
+      }, 5e3);
+    },
+    removeToast(toast) {
+      const index = toasts.value.indexOf(toast);
+      if (index !== -1) {
+        toasts.value.splice(index, 1);
+      }
+    },
+    toastSuccess(message) {
+      this.toast({ title: message, type: InputState.success });
+    },
+    toastError(message) {
+      this.toast({ title: message, type: InputState.danger });
+    },
+    toastWarning(message) {
+      this.toast({ title: message, type: InputState.warning });
+    },
+    toastInfo(message) {
+      this.toast({ title: message, type: InputState.info });
+    },
+    toastDeleted() {
+      this.toastSuccess("Deleted");
+    },
+    toastCreated() {
+      this.toastSuccess("Saved");
+    },
+    toastUpdated() {
+      this.toastSuccess("Saved");
+    },
+    toastDuplicated() {
+      this.toastSuccess("Duplicated");
+    }
+  };
+};

package/dist/enums/Direction.enum.d.ts

@@ -0,0 +1,4 @@
+export declare enum Direction {
+    column = "column",
+    row = "row"
+}