@lumx/vue 4.4.1-alpha.2 → 4.4.1-alpha.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/package.json +3 -3
- package/utils/index.js +6 -6
- package/utils/index.js.map +1 -1
package/package.json
CHANGED
|
@@ -31,11 +31,11 @@
|
|
|
31
31
|
}
|
|
32
32
|
},
|
|
33
33
|
"sideEffects": false,
|
|
34
|
-
"version": "4.4.1-alpha.
|
|
34
|
+
"version": "4.4.1-alpha.4",
|
|
35
35
|
"dependencies": {
|
|
36
36
|
"@floating-ui/vue": "^1.1.10",
|
|
37
|
-
"@lumx/core": "^4.4.1-alpha.
|
|
38
|
-
"@lumx/icons": "^4.4.1-alpha.
|
|
37
|
+
"@lumx/core": "^4.4.1-alpha.4",
|
|
38
|
+
"@lumx/icons": "^4.4.1-alpha.4",
|
|
39
39
|
"@vueuse/core": "^14.1.0"
|
|
40
40
|
},
|
|
41
41
|
"peerDependencies": {
|
package/utils/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { defineComponent as m, inject as C, provide as p, onMounted as E, onBeforeUnmount as d, watchEffect as R } from "vue";
|
|
2
2
|
import { P as k, a as x } from "../_internal/CCjQX5wE.js";
|
|
3
3
|
const s = ["mousedown", "touchstart"];
|
|
4
|
-
function
|
|
4
|
+
function v(n, o) {
|
|
5
5
|
return !o.some((t) => n.some((e) => t?.contains(e)));
|
|
6
6
|
}
|
|
7
7
|
function u(n, o) {
|
|
@@ -9,13 +9,13 @@ function u(n, o) {
|
|
|
9
9
|
return;
|
|
10
10
|
const t = (e) => {
|
|
11
11
|
const r = [e.composedPath?.()[0], e.target], a = n();
|
|
12
|
-
|
|
12
|
+
v(r, a) && o(e);
|
|
13
13
|
};
|
|
14
14
|
return s.forEach((e) => document.addEventListener(e, t)), () => {
|
|
15
15
|
s.forEach((e) => document.removeEventListener(e, t));
|
|
16
16
|
};
|
|
17
17
|
}
|
|
18
|
-
const i = /* @__PURE__ */ Symbol("LumxClickAway"),
|
|
18
|
+
const i = /* @__PURE__ */ Symbol("LumxClickAway"), y = /* @__PURE__ */ m((n, {
|
|
19
19
|
slots: o
|
|
20
20
|
}) => {
|
|
21
21
|
const t = C(i, null), e = [], r = {
|
|
@@ -53,7 +53,7 @@ const i = /* @__PURE__ */ Symbol("LumxClickAway"), w = /* @__PURE__ */ m((n, {
|
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
});
|
|
56
|
-
function
|
|
56
|
+
function A({ callback: n, childrenRefs: o }) {
|
|
57
57
|
let t;
|
|
58
58
|
R(() => {
|
|
59
59
|
t?.(), t = u(() => {
|
|
@@ -65,9 +65,9 @@ function y({ callback: n, childrenRefs: o }) {
|
|
|
65
65
|
});
|
|
66
66
|
}
|
|
67
67
|
export {
|
|
68
|
-
|
|
68
|
+
y as ClickAwayProvider,
|
|
69
69
|
k as Portal,
|
|
70
70
|
x as PortalProvider,
|
|
71
|
-
|
|
71
|
+
A as useClickAway
|
|
72
72
|
};
|
|
73
73
|
//# sourceMappingURL=index.js.map
|
package/utils/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
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 (
|
|
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 * Note: when `getElements` returns an empty array, any click is considered a click away.\n * Callers should guard against calling `setupClickAway` when no refs are registered.\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 (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;AAcO,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,IAAIN,EAAYC,GAASC,CAAQ,KAC7BK,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;AC3CO,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;"}
|