@lumx/vue 4.4.1-alpha.1 → 4.4.1-alpha.3

package/package.json

@@ -24,13 +24,18 @@
     ".": {
       "types": "./index.d.ts",
       "default": "./index.js"
+    },
+    "./utils": {
+      "types": "./utils/index.d.ts",
+      "default": "./utils/index.js"
     }
   },
   "sideEffects": false,
-  "version": "4.4.1-alpha.1",
+  "version": "4.4.1-alpha.3",
   "dependencies": {
-    "@lumx/core": "^4.4.1-alpha.1",
-    "@lumx/icons": "^4.4.1-alpha.1",
+    "@floating-ui/vue": "^1.1.10",
+    "@lumx/core": "^4.4.1-alpha.3",
+    "@lumx/icons": "^4.4.1-alpha.3",
     "@vueuse/core": "^14.1.0"
   },
   "peerDependencies": {
@@ -40,9 +45,9 @@
   "devDependencies": {
     "@babel/plugin-transform-react-jsx": "^7.27.1",
     "@chromatic-com/storybook": "^5.0.0",
+    "@lumx/storybook-testing": "workspace:*",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@storybook/addon-a11y": "^10.2.0",
-    "@storybook/addon-vitest": "10.2.0",
     "@storybook/vue3-vite": "^10.2.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/user-event": "^14.4.3",
@@ -50,12 +55,10 @@
     "@types/lodash": "^4.14.149",
     "@vitejs/plugin-vue": "^6.0.3",
     "@vitejs/plugin-vue-jsx": "^5.1.3",
-    "@vitest/browser-playwright": "^4.0.18",
     "chromatic": "^13.3.5",
     "focus-visible": "^5.2.1",
     "jsdom": "^27.2.0",
     "storybook": "^10.2.0",
-    "storybook-addon-vis": "^3.1.2",
     "typescript": "^5.4.3",
     "vite": "^7.3.1",
     "vite-plugin-dts": "^4.5.4",

package/stories/decorators/withChromaticForceScreenSize.d.ts

@@ -0,0 +1,2 @@
+/** Story decorator used to force a minimum screen size when running in chromatic */
+export declare const withChromaticForceScreenSize: () => (story: any) => any;

package/stories/decorators/withValueOnChange.d.ts

@@ -0,0 +1,12 @@
+/**
+ * SB decorator managing a local reactive state for a value prop,
+ * updating it via the onChange callback.
+ *
+ * This is the Vue equivalent of the React withValueOnChange decorator.
+ */
+export declare const withValueOnChange: ({ valueProp, valueTransform, }?: {
+    valueProp?: string;
+    valueTransform?: (v: any) => any;
+}) => (story: any, ctx: any) => () => import('vue').VNode<import('vue').RendererNode, import('vue').RendererElement, {
+    [key: string]: any;
+}>;

package/utils/ClickAway/ClickAwayProvider.d.ts

@@ -0,0 +1,21 @@
+import { InjectionKey, Ref } from 'vue';
+import { ClickAwayCallback } from '@lumx/core/js/utils/ClickAway';
+interface ContextValue {
+    childrenRefs: HTMLElement[];
+    addRefs(...newChildrenRefs: Array<Ref<HTMLElement | undefined>>): void;
+}
+export declare const CLICK_AWAY_KEY: InjectionKey<ContextValue>;
+/**
+ * Component combining click away detection with Vue's provide/inject to hook into the component tree
+ * and take into account both the DOM tree and the component tree to detect click away.
+ */
+export declare const ClickAwayProvider: import('vue').DefineSetupFnComponent<{
+    callback: ClickAwayCallback;
+    childrenRefs: Ref<Array<Ref<HTMLElement | undefined>>>;
+    parentRef?: Ref<HTMLElement | undefined>;
+}, {}, {}, {
+    callback: ClickAwayCallback;
+    childrenRefs: Ref<Array<Ref<HTMLElement | undefined>>>;
+    parentRef?: Ref<HTMLElement | undefined>;
+} & {}, import('vue').PublicProps>;
+export {};

package/utils/ClickAway/ClickAwayProvider.stories.d.ts

@@ -0,0 +1,25 @@
+declare const _default: {
+    component: any;
+    parameters: {
+        chromatic: {
+            disable: boolean;
+        };
+    };
+    tags: string[];
+    title: string;
+};
+export default _default;
+export declare const NestedClickAway: {
+    render: () => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const InShadowDOM: {
+    render: () => import("vue/jsx-runtime").JSX.Element;
+};
+export declare const TestClickAwayCloses: {
+    render: () => import("vue/jsx-runtime").JSX.Element;
+    play(): Promise<void>;
+};
+export declare const TestNestedClickAway: {
+    render: () => import("vue/jsx-runtime").JSX.Element;
+    play(): Promise<void>;
+};

package/utils/ClickAway/index.d.ts

@@ -0,0 +1,2 @@
+export { ClickAwayProvider } from './ClickAwayProvider';
+export { useClickAway } from './useClickAway';

package/utils/ClickAway/useClickAway.d.ts

@@ -0,0 +1,18 @@
+import { Ref } from 'vue';
+import { ClickAwayCallback } from '@lumx/core/js/utils/ClickAway';
+export interface ClickAwayParameters {
+    /**
+     * A callback function to call when the user clicks away from the elements.
+     */
+    callback: ClickAwayCallback;
+    /**
+     * Elements considered within the click away context (clicking outside them will trigger the click away callback).
+     */
+    childrenRefs: Ref<Array<Ref<HTMLElement | undefined>>>;
+}
+/**
+ * Listen to clicks away from the given elements and callback the passed in function.
+ *
+ * Warning: If you need to detect click away on nested Vue portals, please use the `ClickAwayProvider` component.
+ */
+export declare function useClickAway({ callback, childrenRefs }: ClickAwayParameters): void;

package/utils/Portal/Portal.d.ts

@@ -0,0 +1,7 @@
+import { PortalProps } from '@lumx/core/js/utils/Portal';
+export type { PortalProps } from '@lumx/core/js/utils/Portal';
+/**
+ * Render children in a portal outside the current DOM position
+ * (defaults to `document.body` but can be customized with the PortalProvider)
+ */
+export declare const Portal: import('vue').DefineSetupFnComponent<PortalProps, {}, {}, PortalProps & {}, import('vue').PublicProps>;

package/utils/Portal/PortalProvider.d.ts

@@ -0,0 +1,9 @@
+import { InjectionKey } from 'vue';
+import { PortalInit, PortalProviderProps } from '@lumx/core/js/utils/Portal';
+export type { PortalInit, PortalProviderProps } from '@lumx/core/js/utils/Portal';
+export declare const PORTAL_KEY: InjectionKey<PortalInit>;
+export declare const defaultPortalInit: PortalInit;
+/**
+ * Customize where <Portal> wrapped elements render (tooltip, popover, dialog, etc.)
+ */
+export declare const PortalProvider: import('vue').DefineSetupFnComponent<PortalProviderProps, {}, {}, PortalProviderProps & {}, import('vue').PublicProps>;

package/utils/Portal/PortalProvider.stories.d.ts

@@ -0,0 +1,19 @@
+declare const _default: {
+    component: any;
+    args: {
+        enabled: boolean;
+    };
+    parameters: {
+        chromatic: {
+            disable: boolean;
+        };
+    };
+    tags: string[];
+    title: string;
+};
+export default _default;
+export declare const RenderInShadowDOM: {
+    render: ({ enabled }: {
+        enabled: boolean;
+    }) => import("vue/jsx-runtime").JSX.Element;
+};

package/utils/Portal/index.d.ts

@@ -0,0 +1,2 @@
+export { type PortalInit, PortalProvider, type PortalProviderProps } from './PortalProvider';
+export { type PortalProps, Portal } from './Portal';

package/utils/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * WARNING: All modules exported here are exposed to NPM in '@lumx/vue/utils'.
+ */
+export { Portal, type PortalProps, type PortalInit, PortalProvider, type PortalProviderProps } from './Portal';
+export { ClickAwayProvider, useClickAway } from './ClickAway';

package/utils/index.js

@@ -0,0 +1,73 @@
+import { defineComponent as m, inject as C, provide as p, onMounted as E, onBeforeUnmount as d, watchEffect as R } from "vue";
+import { P as k, a as x } from "../_internal/CCjQX5wE.js";
+const s = ["mousedown", "touchstart"];
+function h(n, o) {
+  return !o.some((t) => n.some((e) => t?.contains(e)));
+}
+function u(n, o) {
+  if (!o)
+    return;
+  const t = (e) => {
+    const r = [e.composedPath?.()[0], e.target], a = n();
+    a.length > 0 && h(r, a) && o(e);
+  };
+  return s.forEach((e) => document.addEventListener(e, t)), () => {
+    s.forEach((e) => document.removeEventListener(e, t));
+  };
+}
+const i = /* @__PURE__ */ Symbol("LumxClickAway"), w = /* @__PURE__ */ m((n, {
+  slots: o
+}) => {
+  const t = C(i, null), e = [], r = {
+    childrenRefs: e,
+    addRefs(...c) {
+      for (const l of c) {
+        const f = l.value;
+        f && e.push(f);
+      }
+      t && (t.addRefs(...c), n.parentRef && t.addRefs(n.parentRef));
+    }
+  };
+  p(i, r);
+  let a;
+  return E(() => {
+    const c = n.childrenRefs.value;
+    c && r.addRefs(...c), a = u(() => e, n.callback);
+  }), d(() => {
+    a?.();
+  }), () => o.default?.();
+}, {
+  name: "LumxClickAwayProvider",
+  props: {
+    callback: {
+      type: [Function, Boolean, void 0],
+      default: void 0
+    },
+    childrenRefs: {
+      type: Object,
+      required: !0
+    },
+    parentRef: {
+      type: Object,
+      default: void 0
+    }
+  }
+});
+function y({ callback: n, childrenRefs: o }) {
+  let t;
+  R(() => {
+    t?.(), t = u(() => {
+      const r = o.value;
+      return r ? r.map((a) => a?.value).filter(Boolean) : [];
+    }, n);
+  }), d(() => {
+    t?.();
+  });
+}
+export {
+  w as ClickAwayProvider,
+  k as Portal,
+  x as PortalProvider,
+  y as useClickAway
+};
+//# sourceMappingURL=index.js.map

package/utils/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../lumx-core/src/js/utils/ClickAway/index.ts","../../src/utils/ClickAway/ClickAwayProvider.tsx","../../src/utils/ClickAway/useClickAway.ts"],"sourcesContent":["/**\n * Shared types and logic for ClickAway detection.\n *\n * ClickAway detects clicks outside a set of elements and triggers a callback.\n * The core logic (event listening + target checking) is framework-agnostic.\n * Framework-specific wrappers (React hook, Vue composable) and context providers\n * (React context, Vue provide/inject) are implemented in each framework package.\n */\n\nimport type { Falsy } from '@lumx/core/js/types';\n\n/** Event types that trigger click away detection. */\nexport const CLICK_AWAY_EVENT_TYPES = ['mousedown', 'touchstart'] as const;\n\n/** Callback triggered when a click away is detected. */\nexport type ClickAwayCallback = EventListener | Falsy;\n\n/**\n * Check if the click event targets are outside all the given elements.\n *\n * @param targets - The event target elements (from `event.target` and `event.composedPath()`).\n * @param elements - The elements considered \"inside\" the click away context.\n * @returns `true` if the click is outside all elements (i.e. a click away).\n */\nexport function isClickAway(targets: HTMLElement[], elements: HTMLElement[]): boolean {\n    return !elements.some((element) => targets.some((target) => element?.contains(target)));\n}\n\n/**\n * Imperative setup for click away detection.\n * Adds mousedown/touchstart listeners on `document` and calls the callback when a click\n * occurs outside the elements returned by `getElements`.\n *\n * @param getElements - Getter returning the current list of elements considered \"inside\".\n * @param callback - Callback to invoke on click away.\n * @returns A teardown function that removes the event listeners.\n */\nexport function setupClickAway(\n    getElements: () => HTMLElement[],\n    callback: ClickAwayCallback,\n): (() => void) | undefined {\n    if (!callback) {\n        return undefined;\n    }\n\n    const listener: EventListener = (evt) => {\n        const targets = [evt.composedPath?.()[0], evt.target] as HTMLElement[];\n        const elements = getElements();\n        if (elements.length > 0 && isClickAway(targets, elements)) {\n            callback(evt);\n        }\n    };\n\n    CLICK_AWAY_EVENT_TYPES.forEach((evtType) => document.addEventListener(evtType, listener));\n    return () => {\n        CLICK_AWAY_EVENT_TYPES.forEach((evtType) => document.removeEventListener(evtType, listener));\n    };\n}\n","import {\n    defineComponent,\n    inject,\n    onBeforeUnmount,\n    onMounted,\n    provide,\n    type InjectionKey,\n    type PropType,\n    type Ref,\n} from 'vue';\nimport { setupClickAway, type ClickAwayCallback } from '@lumx/core/js/utils/ClickAway';\n\ninterface ContextValue {\n    childrenRefs: HTMLElement[];\n    addRefs(...newChildrenRefs: Array<Ref<HTMLElement | undefined>>): void;\n}\n\nexport const CLICK_AWAY_KEY: InjectionKey<ContextValue> = Symbol('LumxClickAway');\n\n/**\n * Component combining click away detection with Vue's provide/inject to hook into the component tree\n * and take into account both the DOM tree and the component tree to detect click away.\n */\nexport const ClickAwayProvider = defineComponent(\n    (\n        props: {\n            callback: ClickAwayCallback;\n            childrenRefs: Ref<Array<Ref<HTMLElement | undefined>>>;\n            parentRef?: Ref<HTMLElement | undefined>;\n        },\n        { slots },\n    ) => {\n        const parentContext = inject(CLICK_AWAY_KEY, null);\n\n        const contextChildrenRefs: HTMLElement[] = [];\n\n        const currentContext: ContextValue = {\n            childrenRefs: contextChildrenRefs,\n            addRefs(...newChildrenRefs) {\n                for (const newRef of newChildrenRefs) {\n                    const el = newRef.value;\n                    if (el) {\n                        contextChildrenRefs.push(el);\n                    }\n                }\n                if (parentContext) {\n                    parentContext.addRefs(...newChildrenRefs);\n                    if (props.parentRef) {\n                        parentContext.addRefs(props.parentRef);\n                    }\n                }\n            },\n        };\n\n        provide(CLICK_AWAY_KEY, currentContext);\n\n        let teardown: (() => void) | undefined;\n\n        onMounted(() => {\n            const refs = props.childrenRefs.value;\n            if (refs) {\n                currentContext.addRefs(...refs);\n            }\n\n            // Setup click away using the context's collected refs directly\n            teardown = setupClickAway(() => contextChildrenRefs, props.callback);\n        });\n\n        onBeforeUnmount(() => {\n            teardown?.();\n        });\n\n        return () => slots.default?.();\n    },\n    {\n        name: 'LumxClickAwayProvider',\n        props: {\n            callback: {\n                type: [Function, Boolean, undefined] as PropType<ClickAwayCallback>,\n                default: undefined,\n            },\n            childrenRefs: {\n                type: Object as PropType<Ref<Array<Ref<HTMLElement | undefined>>>>,\n                required: true,\n            },\n            parentRef: {\n                type: Object as PropType<Ref<HTMLElement | undefined>>,\n                default: undefined,\n            },\n        },\n    },\n);\n","import { onBeforeUnmount, watchEffect, type Ref } from 'vue';\nimport { setupClickAway, type ClickAwayCallback } from '@lumx/core/js/utils/ClickAway';\n\nexport interface ClickAwayParameters {\n    /**\n     * A callback function to call when the user clicks away from the elements.\n     */\n    callback: ClickAwayCallback;\n    /**\n     * Elements considered within the click away context (clicking outside them will trigger the click away callback).\n     */\n    childrenRefs: Ref<Array<Ref<HTMLElement | undefined>>>;\n}\n\n/**\n * Listen to clicks away from the given elements and callback the passed in function.\n *\n * Warning: If you need to detect click away on nested Vue portals, please use the `ClickAwayProvider` component.\n */\nexport function useClickAway({ callback, childrenRefs }: ClickAwayParameters): void {\n    let teardown: (() => void) | undefined;\n\n    watchEffect(() => {\n        // Clean up previous listener\n        teardown?.();\n\n        const getElements = () => {\n            const refs = childrenRefs.value;\n            if (!refs) return [];\n            return refs.map((ref) => ref?.value).filter(Boolean) as HTMLElement[];\n        };\n\n        teardown = setupClickAway(getElements, callback);\n    });\n\n    onBeforeUnmount(() => {\n        teardown?.();\n    });\n}\n"],"names":["CLICK_AWAY_EVENT_TYPES","isClickAway","targets","elements","element","target","setupClickAway","getElements","callback","listener","evt","evtType","CLICK_AWAY_KEY","Symbol","ClickAwayProvider","props","slots","parentContext","inject","contextChildrenRefs","currentContext","childrenRefs","addRefs","newChildrenRefs","newRef","el","value","push","parentRef","provide","teardown","onMounted","refs","onBeforeUnmount","default","name","type","Function","Boolean","undefined","Object","required","useClickAway","watchEffect","ref"],"mappings":";;AAYO,MAAMA,IAAyB,CAAC,aAAa,YAAY;AAYzD,SAASC,EAAYC,GAAwBC,GAAkC;AAClF,SAAO,CAACA,EAAS,KAAK,CAACC,MAAYF,EAAQ,KAAK,CAACG,MAAWD,GAAS,SAASC,CAAM,CAAC,CAAC;AAC1F;AAWO,SAASC,EACZC,GACAC,GACwB;AACxB,MAAI,CAACA;AACD;AAGJ,QAAMC,IAA0B,CAACC,MAAQ;AACrC,UAAMR,IAAU,CAACQ,EAAI,eAAA,EAAiB,CAAC,GAAGA,EAAI,MAAM,GAC9CP,IAAWI,EAAA;AACjB,IAAIJ,EAAS,SAAS,KAAKF,EAAYC,GAASC,CAAQ,KACpDK,EAASE,CAAG;AAAA,EAEpB;AAEA,SAAAV,EAAuB,QAAQ,CAACW,MAAY,SAAS,iBAAiBA,GAASF,CAAQ,CAAC,GACjF,MAAM;AACT,IAAAT,EAAuB,QAAQ,CAACW,MAAY,SAAS,oBAAoBA,GAASF,CAAQ,CAAC;AAAA,EAC/F;AACJ;ACxCO,MAAMG,IAA6CC,uBAAO,eAAe,GAMnEC,sBACT,CACIC,GAKA;AAAA,EAAEC,OAAAA;AAAM,MACP;AACD,QAAMC,IAAgBC,EAAON,GAAgB,IAAI,GAE3CO,IAAqC,CAAA,GAErCC,IAA+B;AAAA,IACjCC,cAAcF;AAAAA,IACdG,WAAWC,GAAiB;AACxB,iBAAWC,KAAUD,GAAiB;AAClC,cAAME,IAAKD,EAAOE;AAClB,QAAID,KACAN,EAAoBQ,KAAKF,CAAE;AAAA,MAEnC;AACA,MAAIR,MACAA,EAAcK,QAAQ,GAAGC,CAAe,GACpCR,EAAMa,aACNX,EAAcK,QAAQP,EAAMa,SAAS;AAAA,IAGjD;AAAA;AAGJC,EAAAA,EAAQjB,GAAgBQ,CAAc;AAEtC,MAAIU;AAEJC,SAAAA,EAAU,MAAM;AACZ,UAAMC,IAAOjB,EAAMM,aAAaK;AAChC,IAAIM,KACAZ,EAAeE,QAAQ,GAAGU,CAAI,GAIlCF,IAAWxB,EAAe,MAAMa,GAAqBJ,EAAMP,QAAQ;AAAA,EACvE,CAAC,GAEDyB,EAAgB,MAAM;AAClBH,IAAAA,IAAQ;AAAA,EACZ,CAAC,GAEM,MAAMd,EAAMkB,UAAO;AAC9B,GACA;AAAA,EACIC,MAAM;AAAA,EACNpB,OAAO;AAAA,IACHP,UAAU;AAAA,MACN4B,MAAM,CAACC,UAAUC,SAASC,MAAS;AAAA,MACnCL,SAASK;AAAAA;IAEblB,cAAc;AAAA,MACVe,MAAMI;AAAAA,MACNC,UAAU;AAAA;IAEdb,WAAW;AAAA,MACPQ,MAAMI;AAAAA,MACNN,SAASK;AAAAA,IACb;AAAA,EACJ;AACJ,CACJ;ACxEO,SAASG,EAAa,EAAE,UAAAlC,GAAU,cAAAa,KAA2C;AAChF,MAAIS;AAEJ,EAAAa,EAAY,MAAM;AAEd,IAAAb,IAAA,GAQAA,IAAWxB,EANS,MAAM;AACtB,YAAM0B,IAAOX,EAAa;AAC1B,aAAKW,IACEA,EAAK,IAAI,CAACY,MAAQA,GAAK,KAAK,EAAE,OAAO,OAAO,IADjC,CAAA;AAAA,IAEtB,GAEuCpC,CAAQ;AAAA,EACnD,CAAC,GAEDyB,EAAgB,MAAM;AAClB,IAAAH,IAAA;AAAA,EACJ,CAAC;AACL;"}