@antify/ui-module 1.1.3

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

@@ -0,0 +1,173 @@
+import AntTabs from "../AntTabs.vue";
+import { ref } from "vue";
+import { faUserCircle } from "@fortawesome/free-regular-svg-icons";
+import { ColorType } from "../__types/AntTabItem.types.mjs";
+const meta = {
+  title: "Components/Tabs",
+  component: AntTabs,
+  parameters: { controls: { sort: "requiredFirst" } },
+  decorators: [() => ({ template: '<div class="border border-neutral-300 border-dashed"><story /></div>' })],
+  argTypes: {
+    modelValue: {
+      control: "text",
+      table: {
+        type: {
+          summary: "string | undefined"
+        }
+      }
+    }
+  }
+};
+export default meta;
+export const Docs = {
+  render: (args) => ({
+    components: { AntTabs },
+    setup() {
+      return { args };
+    },
+    template: `
+      <AntTabs v-bind="args" v-model="args.modelValue"/>
+    `
+  }),
+  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="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",
+        colorType: ColorType.warning
+      },
+      {
+        id: "4",
+        label: "Fourth tab",
+        colorType: ColorType.danger
+      }
+    ]
+  }
+};
+export const Overview = {
+  render: (args) => ({
+    components: { AntTabs },
+    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: `
+      <div>Default:</div>
+      <div class="flex flex-col gap-3 flex-nowrap">
+        <AntTabs v-model="value_1" :tab-items="tabItems_1"/>
+        <AntTabs v-model="value_2" :tab-items="tabItems_2"/>
+        <AntTabs v-model="value_3" :tab-items="tabItems_3"/>
+      </div>
+
+      <div class="mt-8">Expanded:</div>
+      <div class="flex flex-col gap-3 flex-nowrap">
+        <AntTabs v-model="value_1" :tab-items="tabItems_1" expanded separators/>
+        <AntTabs v-model="value_2" :tab-items="tabItems_2" expanded separators/>
+        <AntTabs v-model="value_3" :tab-items="tabItems_3" expanded separators/>
+      </div>
+
+      <div class="mt-8">Larger container:</div>
+
+      <div class="h-16 bg-primary-500">
+        <AntTabs v-model="value_3" :tab-items="tabItems_3" expanded separators/>
+      </div>
+    `
+  }),
+  args: {}
+};

package/dist/runtime/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;
+    colorType?: ColorType;
+    showIcon?: boolean;
+    icon?: IconDefinition;
+    to?: string | RouteLocationRaw;
+    clickHandler?: () => void;
+    [key: string]: unknown;
+};
+export declare enum ColorType {
+    base = "base",
+    warning = "warning",
+    danger = "danger"
+}

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

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

package/dist/runtime/components/transitions/AntTransitionCollapseHeight.vue

@@ -0,0 +1,92 @@
+<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/runtime/composables/useUi.d.ts

@@ -0,0 +1,20 @@
+import { ColorType, InputColorType } from '../enums/ColorType.enum';
+import { ColorType as TabItemColorType } from '../components/tabs/__types/AntTabItem.types';
+import { Direction } from '../enums/Direction.enum';
+import { Grouped } from '../enums/Grouped.enum';
+import { Position, CornerPosition } from '../enums/Position.enum';
+import { Size } from '../enums/Size.enum';
+import { AntTableRowTypes, AntTableAlign, AntTableSortDirection } from '../components/table/__types/TableHeader.type';
+export declare const useUi: () => {
+    Direction: typeof Direction;
+    ColorType: typeof ColorType;
+    InputColorType: typeof InputColorType;
+    TabItemColorType: typeof TabItemColorType;
+    Grouped: typeof Grouped;
+    Position: typeof Position;
+    CornerPosition: typeof CornerPosition;
+    Size: typeof Size;
+    AntTableRowTypes: typeof AntTableRowTypes;
+    AntTableAlign: typeof AntTableAlign;
+    AntTableSortDirection: typeof AntTableSortDirection;
+};

package/dist/runtime/composables/useUi.mjs

@@ -0,0 +1,31 @@
+import {
+  ColorType,
+  InputColorType
+} from "../enums/ColorType.enum.mjs";
+import {
+  ColorType as TabItemColorType
+} from "../components/tabs/__types/AntTabItem.types.mjs";
+import { Direction } from "../enums/Direction.enum.mjs";
+import { Grouped } from "../enums/Grouped.enum.mjs";
+import { Position, CornerPosition } from "../enums/Position.enum.mjs";
+import { Size } from "../enums/Size.enum.mjs";
+import {
+  AntTableRowTypes,
+  AntTableAlign,
+  AntTableSortDirection
+} from "../components/table/__types/TableHeader.type.mjs";
+export const useUi = () => {
+  return {
+    Direction,
+    ColorType,
+    InputColorType,
+    TabItemColorType,
+    Grouped,
+    Position,
+    CornerPosition,
+    Size,
+    AntTableRowTypes,
+    AntTableAlign,
+    AntTableSortDirection
+  };
+};

package/dist/runtime/composables/useUiClient.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Set of helper functions for client side
+ */
+import type { FetchResponse, FetchError } from 'ofetch';
+import { type LocationQuery, type RouteLocationRaw } from 'vue-router';
+import { type Ref } from 'vue';
+export declare function handleNotFoundResponse(response: FetchResponse, fallbackUrl: RouteLocationRaw): Promise<void>;
+export declare function handleResponseError(error: Ref<FetchError | null>): void;
+declare function isFormDisabled(status: Ref | Ref[]): boolean;
+/**
+ * Creates a skeleton ref with flicker protection by prevent switching to fast from true to false.
+ *
+ * Important, it only watches the pending ref once, because a skeleton should be shown only one time
+ * on initial loading.
+ *
+ * @param pending
+ */
+declare function createSkeleton(pending: Ref<boolean>): Ref<boolean>;
+/**
+ * Detect if the given queryToWatch changed.
+ */
+declare function queryChanged(from: LocationQuery, to: LocationQuery, queryToWatch: string | string[]): boolean;
+export declare const useUiClient: () => {
+    handler: {
+        handleNotFoundResponse: typeof handleNotFoundResponse;
+        handleResponseError: typeof handleResponseError;
+    };
+    utils: {
+        isFormDisabled: typeof isFormDisabled;
+        createSkeleton: typeof createSkeleton;
+        queryChanged: typeof queryChanged;
+    };
+};
+export {};

package/dist/runtime/composables/useUiClient.mjs

@@ -0,0 +1,61 @@
+import { useNuxtApp, navigateTo, createError } from "#imports";
+import { ref } from "vue";
+import { watchOnce } from "@vueuse/core";
+export async function handleNotFoundResponse(response, fallbackUrl) {
+  if (response._data?.notFound) {
+    useNuxtApp().$uiModule.toaster.toastError("Entity not found. Maybe an other user deleted it.");
+    await navigateTo(fallbackUrl);
+  }
+}
+export function handleResponseError(error) {
+  if (error.value) {
+    throw createError({ ...error.value?.data, statusCode: 500, fatal: true });
+  }
+}
+function isFormDisabled(status) {
+  if (Array.isArray(status)) {
+    return status.some((status2) => isFormDisabled(status2));
+  }
+  return status.value === "pending";
+}
+function createSkeleton(pending) {
+  const skeleton = ref(true);
+  const initialTimestamp = Date.now();
+  const minShowTime = 500;
+  watchOnce(pending, () => {
+    const timeShowed = Date.now() - (initialTimestamp || Date.now());
+    const restTimeToShow = minShowTime - timeShowed > 0 ? minShowTime - timeShowed : 0;
+    if (restTimeToShow === 0) {
+      skeleton.value = false;
+    } else {
+      setTimeout(() => {
+        skeleton.value = false;
+      }, restTimeToShow);
+    }
+  });
+  return skeleton;
+}
+function queryChanged(from, to, queryToWatch) {
+  const _queryToWatch = Array.isArray(queryToWatch) ? queryToWatch : [queryToWatch];
+  const changes = Object.keys(to).reduce((acc, key) => {
+    if (to[key] !== from[key]) {
+      acc[key] = to[key];
+    }
+    return acc;
+  }, {});
+  return _queryToWatch.some((key) => changes[key] !== void 0);
+}
+export const useUiClient = () => {
+  return {
+    handler: {
+      handleNotFoundResponse,
+      handleResponseError
+    },
+    utils: {
+      isFormDisabled,
+      createSkeleton,
+      queryChanged
+      // createFlickerProtectRef
+    }
+  };
+};

package/dist/runtime/composables/useValidator.d.ts

@@ -0,0 +1 @@
+export { useValidator } from '@antify/validate';

package/dist/runtime/composables/useValidator.mjs

@@ -0,0 +1 @@
+export { useValidator } from "@antify/validate";

package/dist/runtime/enums/ColorType.enum.d.ts

@@ -0,0 +1,16 @@
+export declare enum ColorType {
+    base = "base",
+    primary = "primary",
+    secondary = "secondary",
+    danger = "danger",
+    info = "info",
+    success = "success",
+    warning = "warning"
+}
+export declare enum InputColorType {
+    base = "base",
+    danger = "danger",
+    info = "info",
+    success = "success",
+    warning = "warning"
+}

package/dist/runtime/enums/ColorType.enum.mjs

@@ -0,0 +1,18 @@
+export var ColorType = /* @__PURE__ */ ((ColorType2) => {
+  ColorType2["base"] = "base";
+  ColorType2["primary"] = "primary";
+  ColorType2["secondary"] = "secondary";
+  ColorType2["danger"] = "danger";
+  ColorType2["info"] = "info";
+  ColorType2["success"] = "success";
+  ColorType2["warning"] = "warning";
+  return ColorType2;
+})(ColorType || {});
+export var InputColorType = /* @__PURE__ */ ((InputColorType2) => {
+  InputColorType2["base"] = "base";
+  InputColorType2["danger"] = "danger";
+  InputColorType2["info"] = "info";
+  InputColorType2["success"] = "success";
+  InputColorType2["warning"] = "warning";
+  return InputColorType2;
+})(InputColorType || {});

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

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

package/dist/runtime/enums/Direction.enum.mjs

@@ -0,0 +1,5 @@
+export var Direction = /* @__PURE__ */ ((Direction2) => {
+  Direction2["column"] = "column";
+  Direction2["row"] = "row";
+  return Direction2;
+})(Direction || {});

package/dist/runtime/enums/Grouped.enum.d.ts

@@ -0,0 +1,6 @@
+export declare enum Grouped {
+    none = "none",
+    left = "left",
+    center = "center",
+    right = "right"
+}

package/dist/runtime/enums/Grouped.enum.mjs

@@ -0,0 +1,7 @@
+export var Grouped = /* @__PURE__ */ ((Grouped2) => {
+  Grouped2["none"] = "none";
+  Grouped2["left"] = "left";
+  Grouped2["center"] = "center";
+  Grouped2["right"] = "right";
+  return Grouped2;
+})(Grouped || {});

package/dist/runtime/enums/Position.enum.d.ts

@@ -0,0 +1,12 @@
+export declare enum Position {
+    top = "top",
+    right = "right",
+    bottom = "bottom",
+    left = "left"
+}
+export declare enum CornerPosition {
+    topLeft = "topLeft",
+    topRight = "topRight",
+    bottomRight = "bottomRight",
+    bottomLeft = "bottomLeft"
+}

package/dist/runtime/enums/Position.enum.mjs

@@ -0,0 +1,14 @@
+export var Position = /* @__PURE__ */ ((Position2) => {
+  Position2["top"] = "top";
+  Position2["right"] = "right";
+  Position2["bottom"] = "bottom";
+  Position2["left"] = "left";
+  return Position2;
+})(Position || {});
+export var CornerPosition = /* @__PURE__ */ ((CornerPosition2) => {
+  CornerPosition2["topLeft"] = "topLeft";
+  CornerPosition2["topRight"] = "topRight";
+  CornerPosition2["bottomRight"] = "bottomRight";
+  CornerPosition2["bottomLeft"] = "bottomLeft";
+  return CornerPosition2;
+})(CornerPosition || {});

package/dist/runtime/enums/Size.enum.d.ts

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

package/dist/runtime/enums/Size.enum.mjs

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

package/dist/runtime/enums/index.d.ts

@@ -0,0 +1,4 @@
+export * from './ColorType.enum';
+export * from './Grouped.enum';
+export * from './Position.enum';
+export * from './Size.enum';

package/dist/runtime/enums/index.mjs

@@ -0,0 +1,4 @@
+export * from "./ColorType.enum.mjs";
+export * from "./Grouped.enum.mjs";
+export * from "./Position.enum.mjs";
+export * from "./Size.enum.mjs";

package/dist/runtime/env.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue'
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
+  const component: DefineComponent<{}, {}, any>
+  export default component
+}

package/dist/runtime/handler.d.ts

@@ -0,0 +1 @@
+export declare function handleEnumValidation(value: any, allowedValues: object, propertyName: string): void;

package/dist/runtime/handler.mjs

@@ -0,0 +1,5 @@
+export function handleEnumValidation(value, allowedValues, propertyName) {
+  if (Object.values(allowedValues).indexOf(value) === -1) {
+    throw Error(`${propertyName} ${value} not allowed. Use one of ${Object.values(allowedValues).join(" | ")}`);
+  }
+}

package/dist/runtime/plugins/toaster.d.ts

@@ -0,0 +1,22 @@
+import { type Toast } from '../components/__types/AntToaster.types';
+import { InputColorType } from '../enums';
+declare const _default: () => {
+    getToasts(): {
+        id?: string | undefined;
+        title: string;
+        content?: string | undefined;
+        type: InputColorType;
+        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;
+};
+export default _default;

package/dist/runtime/plugins/toaster.mjs

@@ -0,0 +1,53 @@
+import { InputColorType } from "../enums/index.mjs";
+import { ref } from "vue";
+export default () => {
+  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: InputColorType.success });
+    },
+    toastError(message) {
+      this.toast({ title: message, type: InputColorType.danger });
+    },
+    toastWarning(message) {
+      this.toast({ title: message, type: InputColorType.warning });
+    },
+    toastInfo(message) {
+      this.toast({ title: message, type: InputColorType.info });
+    },
+    toastDeleted() {
+      this.toastSuccess("Deleted");
+    },
+    toastCreated() {
+      this.toastSuccess("Saved");
+    },
+    toastUpdated() {
+      this.toastSuccess("Saved");
+    },
+    toastDuplicated() {
+      this.toastSuccess("Duplicated");
+    }
+  };
+};

package/dist/runtime/plugins/ui-module.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;