@open-xamu-co/ui-components-vue 3.1.0-next.9 → 4.0.0-next.1

package/dist/theme-CChhGSbE.cjs

@@ -0,0 +1 @@
+"use strict";const n=require("vue"),A=require("@open-xamu-co/ui-common-helpers"),i=require("@open-xamu-co/ui-common-enums");function h(e){const{countriesUrl:r="https://countries.xamu.com.co/api/v1",...s}=n.inject("xamu")||{};return e({...s,countriesUrl:r})}function g(e){function r(u){return u.map(a=>{if(typeof a!="string")return!1;const l=a.split(":",2),o=l[1]?.toLowerCase?.()==="asc"?"asc":"desc";return[l[0],o]}).filter(a=>!!a)}const s=e;return Array.isArray(s)?r(s):typeof s=="string"?r([s]):[]}async function w(e){const r=await e;return Array.isArray(r)?r:[r]}function m(e){if(Array.isArray(e))return[e[0],e[1]||i.eColors.LIGHT];if(typeof e=="object"&&e!==null){const r=Object.entries(e).filter(([s,u])=>u);return m([r[0][0]])}return m([e])}function b(e,r){return h(s=>{const{getModifierClasses:u,getPropData:a}=A.useUtils(s),l=n.computed(()=>{const[t,c]=m(e.theme??i.eColors.SECONDARY),f=[t,c||i.eColors.LIGHT];return e.invertTheme||f.reverse(),f}),o=n.computed(()=>[l.value[1],l.value[0]]),d=n.computed(()=>[i.eColors.DANGER,o.value[1]===i.eColors.DARK?i.eColors.DARK:i.eColors.LIGHT]),v=n.computed(()=>{let t;if(typeof e.shadow=="boolean")t=e.shadow;else{if(!e.shadow?.length)return[];t=e.shadow.some(c=>o.value[0]===c)}return t?u([{shadow:t}],{prefix:""}):[]}),C=n.computed(()=>{if(!e.theme)return[];const t=r?o.value:[o.value[0]];return u([t.join("-")],{modifier:"tm",divider:"-"})}),y=n.computed(()=>{if(!e.theme)return[];const t=r?d.value:[d.value[0]];return u([t.join("-")],{modifier:"tm",divider:"-"})}),T=n.computed(()=>{const t=e.tooltip&&a(e.tooltip),c=o.value[1]!==i.eColors.LIGHT;return t?{"aria-label":e.ariaLabel??t,"data-tooltip":t,"data-tooltip-position":e.tooltipPosition,"data-tooltip-text":e.tooltipAsText??!0,"data-tooltip-bg":o.value[0],"data-tooltip-color":c?o.value[1]:void 0}:{"aria-label":e.ariaLabel}});return{invertedThemeValues:l,themeValues:o,dangerThemeValues:d,themeClasses:C,dangerThemeClasses:y,shadowClasses:v,tooltipAttributes:T}})}exports.useHelpers=h;exports.useOrderBy=g;exports.useResolveNodeFn=w;exports.useTheme=b;

package/dist/theme-DWMJmaKP.js

@@ -0,0 +1,83 @@
+import { inject as T, computed as s } from "vue";
+import { useUtils as g } from "@open-xamu-co/ui-common-helpers";
+import { eColors as i } from "@open-xamu-co/ui-common-enums";
+function w(e) {
+  const { countriesUrl: r = "https://countries.xamu.com.co/api/v1", ...n } = T("xamu") || {};
+  return e({ ...n, countriesUrl: r });
+}
+function L(e) {
+  function r(a) {
+    return a.map((u) => {
+      if (typeof u != "string") return !1;
+      const l = u.split(":", 2), o = l[1]?.toLowerCase?.() === "asc" ? "asc" : "desc";
+      return [l[0], o];
+    }).filter((u) => !!u);
+  }
+  const n = e;
+  return Array.isArray(n) ? r(n) : typeof n == "string" ? r([n]) : [];
+}
+async function G(e) {
+  const r = await e;
+  return Array.isArray(r) ? r : [r];
+}
+function d(e) {
+  if (Array.isArray(e))
+    return [e[0], e[1] || i.LIGHT];
+  if (typeof e == "object" && e !== null) {
+    const r = Object.entries(e).filter(([n, a]) => a);
+    return d([r[0][0]]);
+  }
+  return d([e]);
+}
+function j(e, r) {
+  return w((n) => {
+    const { getModifierClasses: a, getPropData: u } = g(n), l = s(() => {
+      const [t, c] = d(e.theme ?? i.SECONDARY), m = [t, c || i.LIGHT];
+      return e.invertTheme || m.reverse(), m;
+    }), o = s(() => [l.value[1], l.value[0]]), f = s(() => [
+      i.DANGER,
+      o.value[1] === i.DARK ? i.DARK : i.LIGHT
+    ]), h = s(() => {
+      let t;
+      if (typeof e.shadow == "boolean") t = e.shadow;
+      else {
+        if (!e.shadow?.length) return [];
+        t = e.shadow.some((c) => o.value[0] === c);
+      }
+      return t ? a([{ shadow: t }], { prefix: "" }) : [];
+    }), v = s(() => {
+      if (!e.theme) return [];
+      const t = r ? o.value : [o.value[0]];
+      return a([t.join("-")], { modifier: "tm", divider: "-" });
+    }), y = s(() => {
+      if (!e.theme) return [];
+      const t = r ? f.value : [f.value[0]];
+      return a([t.join("-")], { modifier: "tm", divider: "-" });
+    }), A = s(() => {
+      const t = e.tooltip && u(e.tooltip), c = o.value[1] !== i.LIGHT;
+      return t ? {
+        "aria-label": e.ariaLabel ?? t,
+        "data-tooltip": t,
+        "data-tooltip-position": e.tooltipPosition,
+        "data-tooltip-text": e.tooltipAsText ?? !0,
+        "data-tooltip-bg": o.value[0],
+        "data-tooltip-color": c ? o.value[1] : void 0
+      } : { "aria-label": e.ariaLabel };
+    });
+    return {
+      invertedThemeValues: l,
+      themeValues: o,
+      dangerThemeValues: f,
+      themeClasses: v,
+      dangerThemeClasses: y,
+      shadowClasses: h,
+      tooltipAttributes: A
+    };
+  });
+}
+export {
+  j as a,
+  L as b,
+  G as c,
+  w as u
+};

package/dist/theme.cjs

@@ -0,0 +1 @@
+"use strict";require("vue");require("@open-xamu-co/ui-common-helpers");require("@open-xamu-co/ui-common-enums");const e=require("./theme-CChhGSbE.cjs");module.exports=e.useTheme;

package/dist/theme.js

@@ -1 +1,7 @@
-"use strict";require("vue");require("@open-xamu-co/ui-common-helpers");require("@open-xamu-co/ui-common-enums");const e=require("./theme-DSVG59vT.js");module.exports=e.useTheme;
+import "vue";
+import "@open-xamu-co/ui-common-helpers";
+import "@open-xamu-co/ui-common-enums";
+import { a } from "./theme-DWMJmaKP.js";
+export {
+  a as default
+};

package/dist/types/plugin.d.ts

@@ -3,7 +3,15 @@ import type { iPluginOptions } from "@open-xamu-co/ui-common-types";
 import type { useAsyncDataFn } from "../composables/async";
 export type vComponent<P extends Record<string, any> = Record<string, any>> = VueComponent<P> | FunctionalComponent<P> | DefineComponent<P>;
 export interface iVuePluginOptions extends iPluginOptions<vComponent> {
-    internals?: {
+    /**
+     * Override internal behavior
+     * Useful to setup nuxt modules
+     */
+    internals?: iPluginOptions<vComponent>["internals"] & {
+        /**
+         * Client only component
+         */
+        clientOnly?: vComponent;
         /**
          * Nuxt Async data
          */

package/dist/types/props.d.ts

@@ -1,4 +1,4 @@
-import type { iFormOption, tFormAutocomplete, tIndicative, tProp, tProps, tPropsModifier, tThemeModifier, tThemeTuple, tSizeModifier, iProperty, iNodeFn, tOrderBy, tPropertyOrderFn, tOrder } from "@open-xamu-co/ui-common-types";
+import type { iFormOption, tFormAutocomplete, tIndicative, tProp, tProps, tPropsModifier, tThemeModifier, tThemeTuple, tSizeModifier, iProperty, iNodeFn, tOrderBy, tPropertyOrderFn, tOrder, iPageInfo, iPagination } from "@open-xamu-co/ui-common-types";
 import type { AllowedComponentProps, RendererElement } from "vue";
 import type { vComponent } from "./plugin";
 export interface iUseModifiersProps {
@@ -36,7 +36,7 @@ export interface iUseStateProps {
      * @state
      * @example no--overrides
      */
-    noOverrides?: boolean;
+    noThemeOverride?: boolean;
     /**
      * Component states
      *
@@ -54,6 +54,7 @@ export interface iUseThemeProps {
     shadow?: boolean | tThemeModifier[];
 }
 export interface iUseThemeTooltipProps {
+    ariaLabel?: string;
     /**
      * Show given text as tooltip on hover.
      *
@@ -144,21 +145,30 @@ export interface iModalProps extends iUseThemeProps {
      * Are modal requirement meet?
      * This is intended to prevent the usage of certain modals
      *
-     * Ex: user does not have enough permissions
+     * This should not depend on any internal state
+     *
+     * @example User does not have enough permissions
      */
     hide?: boolean;
+    /** Message to show when modal is hidden */
     hideMessage?: string;
+    /** Hides the footer */
     hideFooter?: boolean;
+    /** disables modal */
+    disabled?: boolean;
     /**
-     * disables modal
+     * Target element to append the modal to
+     *
+     * Another modal could be the target so it appears nested
+     *
+     * @default body
      */
-    disabled?: boolean;
+    target?: string | RendererElement;
     /**
      * Shows/hides the modal
      * @private
      */
     modelValue?: boolean;
-    target?: string | RendererElement;
 }
 export interface iValueComplexProps extends iUseThemeProps {
     /**
@@ -200,7 +210,7 @@ export interface iTablePropertyMeta<Ti extends Record<string, any>> extends iPro
     value: string;
     canSort: boolean;
 }
-export interface iTableProps<Ti extends Record<string, any>> extends iUseThemeProps {
+export interface iTableProps<Ti extends Record<string, any>, Tm extends Record<string, any> = Ti> extends iUseThemeProps {
     /**
      * Table nodes
      * an array of nodes
@@ -208,6 +218,12 @@ export interface iTableProps<Ti extends Record<string, any>> extends iUseThemePr
      * @old rows
      */
     nodes: Ti[];
+    /**
+     * Map nodes as required
+     * Also useful to omit nodes from the array
+     */
+    mapNodes?: (nodes: NoInfer<Ti>[]) => Tm[];
+    hydrateNodes?: (newNodes: NoInfer<Ti>[] | null, newErrors?: unknown) => void;
     /**
      * Table column names
      * an array of property names
@@ -273,14 +289,21 @@ export interface iTableProps<Ti extends Record<string, any>> extends iUseThemePr
      * @fallback property name
      */
     childrenName?: string;
-    childrenCountKey?: keyof NoInfer<Ti>;
+    childrenCountKey?: keyof NoInfer<Ti> | keyof NoInfer<Tm>;
     modalProps?: iModalProps & AllowedComponentProps;
     /**
      * Prevent node functions from triggering refresh event (useful with firebase hydration)
      */
     omitRefresh?: boolean;
     size?: tSizeModifier;
-    withRoute?: boolean;
+    /**
+     * Filter & order nodes through the router
+     */
+    withRoute?: boolean | iPagination;
+    /**
+     * Page info
+     */
+    pageInfo?: iPageInfo;
     /**
      * Show real node id or given component
      */
@@ -288,8 +311,30 @@ export interface iTableProps<Ti extends Record<string, any>> extends iUseThemePr
         index: number;
         node: NoInfer<Ti>;
     }>;
+    /**
+     * Make the table container opaque
+     */
+    opaque?: boolean;
 }
-export interface iTableChildProps<Ti extends Record<string, any>> extends iTableProps<Ti> {
+export interface iNodeVisibility {
+    disableCreateNodeChildren?: boolean;
+    showNodeChildren?: boolean;
+    childrenCount: number;
+}
+export interface iMappedNode<Ti extends Record<string, any>, Tm extends Record<string, any> = Ti> {
+    node: Tm;
+    index: number;
+    visibility: iNodeVisibility;
+    hydrateNode: (newNode: Ti | null, _newErrors?: unknown) => void;
+    createNodeChildrenAndRefresh: iNodeFn<Ti>;
+}
+export interface iMappedNodes<Ti extends Record<string, any>, Tm extends Record<string, any> = Ti> {
+    nodes: iMappedNode<Ti, Tm>[];
+    length: number;
+    withChildren: boolean;
+}
+export interface iTableChildProps<Ti extends Record<string, any>, Tm extends Record<string, any> = Ti> extends iTableProps<Ti, Tm> {
+    mappedNodes: iMappedNodes<Ti, Tm>;
     /**
      * Table unique identifier
      *
@@ -314,11 +359,9 @@ export interface iTableChildProps<Ti extends Record<string, any>> extends iTable
     selectedNodesCount: number;
     openNodesCount: number;
     /**
-     * Count childrens
-     *
-     * node['propertyWithChildren']
+     * Can show children
      */
-    childrenCount(node: Ti): number;
+    canShowChildren(visibility: iNodeVisibility, mappedIndex: number): boolean;
     /**
      * Set pagination order
      *
@@ -339,21 +382,21 @@ export interface iTableChildProps<Ti extends Record<string, any>> extends iTable
      *
      * @single
      */
-    updateNodeAndRefresh(node: Ti): Promise<void>;
+    updateNodeAndRefresh: iNodeFn<Ti>;
     /**
      * Clones given node
      * sometimes it could fail but still clone (api issue)
      *
      * @single
      */
-    cloneNodeAndRefresh(node: Ti, toggleModal?: (m?: boolean) => any): Promise<void>;
+    cloneNodeAndRefresh: iNodeFn<Ti, [Ti, ((m?: boolean) => any) | undefined, HTMLElement?]>;
     /**
      * Deletes given node
      * sometimes it could fail but still delete (api issue)
      *
      * @single
      */
-    deleteNodeAndRefresh(node: Ti, toggleModal?: (m?: boolean) => any, modalRef?: HTMLElement): Promise<void>;
+    deleteNodeAndRefresh: iNodeFn<Ti, [Ti, ((m?: boolean) => any) | undefined, HTMLElement?]>;
     /**
      * Deletes multiple selected nodes
      * sometimes it could fail but still delete (api issue)

package/dist/types/storybook.d.ts

@@ -0,0 +1,10 @@
+import type { Meta } from "@storybook/vue3-vite";
+import type { ComponentExposed } from "vue-component-type-helpers";
+/**
+ * Meta for generic vue components
+ *
+ * @see https://github.com/storybookjs/storybook/issues/24238#issuecomment-2609580391
+ */
+export type GenericMeta<C> = Omit<Meta<C>, "component"> & {
+    component: ComponentExposed<C>;
+};

package/package.json

@@ -1,13 +1,16 @@
 {
   "name": "@open-xamu-co/ui-components-vue",
-  "version": "3.1.0-next.9",
+  "version": "4.0.0-next.1",
   "description": "Vue component system for the xamu project",
   "scripts": {
     "build:entries": "rimraf dist && vite build",
     "build:types": "vue-tsc --declaration --emitDeclarationOnly",
     "build": "yarn build:entries && yarn build:types",
     "dev": "storybook dev",
-    "storybook:build": "storybook build"
+    "typecheck": "vue-tsc --build",
+    "test": "vitest run --coverage",
+    "storybook:build": "storybook build",
+    "storybook:test": "vitest run --project=storybook --coverage"
   },
   "repository": {
     "type": "git",
@@ -31,6 +34,7 @@
   "types": "dist/index.d.ts",
   "typings": "dist/index.d.ts",
   "module": "dist/index.mjs",
+  "type": "module",
   "files": [
     "CHANGELOG.md",
     "README.md",
@@ -39,53 +43,58 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "import": "./dist/index.mjs",
-      "require": "./dist/index.js",
-      "default": "./dist/index.mjs"
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs",
+      "default": "./dist/index.js"
     },
     "./plugin": {
       "types": "./dist/plugin.d.ts",
-      "import": "./dist/plugin.mjs",
-      "require": "./dist/plugin.js",
-      "default": "./dist/plugin.mjs"
+      "import": "./dist/plugin.js",
+      "require": "./dist/plugin.cjs",
+      "default": "./dist/plugin.js"
     },
     "./theme": {
       "types": "./dist/composables/theme.d.ts",
-      "import": "./dist/theme.mjs",
-      "require": "./dist/theme.js",
-      "default": "./dist/theme.mjs"
+      "import": "./dist/theme.js",
+      "require": "./dist/theme.cjs",
+      "default": "./dist/theme.js"
     }
   },
   "dependencies": {
     "@fortawesome/fontawesome-common-types": "^6.4.0",
     "@open-xamu-co/ui-common-enums": "^3.1.0-next.1",
-    "@open-xamu-co/ui-common-helpers": "^3.0.2-next.4",
+    "@open-xamu-co/ui-common-helpers": "^4.0.0-next.1",
     "lodash-es": "^4.17.21",
-    "sweetalert2": "^11.11.1"
+    "sweetalert2": "^11.11.1",
+    "ts-md5": "^1.3.1",
+    "validator": "^13.11.0",
+    "vue-color": "^3.3.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "1.4.0",
-    "@open-xamu-co/ui-common-types": "^3.1.0-next.2",
-    "@open-xamu-co/ui-styles": "^4.0.1-next.2",
-    "@storybook/addon-essentials": "^8.1.1",
-    "@storybook/addon-interactions": "^8.1.1",
-    "@storybook/addon-links": "^8.1.1",
-    "@storybook/blocks": "^8.1.1",
-    "@storybook/test": "^8.1.1",
-    "@storybook/vue3": "^8.1.1",
-    "@storybook/vue3-vite": "^8.1.1",
+    "@open-xamu-co/ui-common-types": "^4.0.0-next.1",
+    "@open-xamu-co/ui-styles": "^5.0.0-next.1",
+    "@playwright/test": "^1.57.0",
+    "@storybook/addon-docs": "^10.1.9",
+    "@storybook/addon-links": "^10.1.9",
+    "@storybook/addon-onboarding": "^10.1.9",
+    "@storybook/addon-vitest": "^10.1.9",
+    "@storybook/vue3-vite": "^10.1.9",
+    "@types/jsdom": "^27.0.0",
     "@types/lodash-es": "^4.14.192",
     "@types/validator": "^13.11.1",
-    "@vitejs/plugin-vue": "^5.2.0",
-    "storybook": "^8.1.1",
-    "ts-md5": "^1.3.1",
-    "validator": "^13.11.0",
-    "vue": "^3.5.17",
-    "vue-router": "^4.5.1"
+    "@vitejs/plugin-vue": "^6.0.2",
+    "@vitest/browser-playwright": "^4.0.14",
+    "@vitest/coverage-v8": "^4.0.14",
+    "jsdom": "^27.2.0",
+    "msw": "^2.12.4",
+    "playwright": "^1.57.0",
+    "storybook": "^10.1.9",
+    "vue": "^3.5.25",
+    "vue-router": "^4.6.4"
   },
   "peerDependencies": {
-    "vue": "^3.5.17",
-    "vue-router": "^4.5.1"
+    "vue": "^3.5.25",
+    "vue-router": "^4.6.4"
   },
   "peerDependenciesMeta": {
     "vue-router": {

package/dist/components/table/Head.vue.d.ts

@@ -1,25 +0,0 @@
-import type { iTableChildProps } from "../../types/props";
-export interface iTableHeadProps<Ti extends Record<string, any>> extends iTableChildProps<Ti> {
-    withDefaultSlot: boolean;
-}
-declare const _default: <T extends Record<string, any>>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{} & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, never> & Partial<{}> & iTableHeadProps<T>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
-    attrs: any;
-    slots: {
-        headActions?(_: {
-            nodes: T[];
-            updateNodeAndRefresh: (node: T) => Promise<void>;
-            cloneNodeAndRefresh: (node: T, toggleModal?: (m?: boolean) => any) => Promise<void>;
-            deleteNodeAndRefresh: (node: T, toggleModal?: (m?: boolean) => any, modalRef?: HTMLElement) => Promise<void>;
-            deleteNodesAndRefresh: (nodes?: T[] | undefined) => Promise<void>;
-        }): any;
-    };
-    emit: {};
-}>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
-};
-export default _default;
-type __VLS_PrettifyLocal<T> = {
-    [K in keyof T]: T[K];
-} & {};