adverich-kun-ui 0.1.52 → 0.1.53
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/dist/adverich-kun-ui.css +1 -1
- package/dist/components/KunAutocomplete/src/components/KunAutocomplete.vue.js +209 -126
- package/dist/components/KunAutocomplete/src/composables/KunAutocompleteProps.js +9 -1
- package/dist/components/KunAutocomplete/src/composables/useAutocomplete.js +125 -87
- package/dist/components/KunAutocomplete/src/composables/useIntersect.js +22 -0
- package/dist/components/KunCard/src/composables/kunCardProps.js +8 -0
- package/dist/components/KunCard/src/composables/useCard.js +11 -10
- package/dist/components/KunList/src/components/KunList.vue.js +36 -7
- package/dist/components/KunList/src/composables/useKunList.js +31 -0
- package/dist/components/KunListGroup/src/components/KunListGroup.vue.js +31 -0
- package/dist/components/KunListImg/src/components/KunListImg.vue.js +37 -0
- package/dist/components/KunListItem/src/components/KunListItem.vue.js +39 -0
- package/dist/components/KunListItemAction/src/components/KunListItemAction.vue.js +31 -0
- package/dist/components/KunListItemAvatar/src/components/KunListItemAvatar.vue.js +31 -0
- package/dist/components/KunListItemSubtitle/src/components/KunListItemSubtitle.vue.js +31 -0
- package/dist/components/KunListItemText/src/components/KunListItemText.vue.js +31 -0
- package/dist/components/KunListSubheader/src/components/KunListSubheader.vue.js +31 -0
- package/dist/components/KunSlider/src/components/KunSlider.vue.js +3 -3
- package/dist/components/KunTooltip/src/components/KunTooltip.vue.js +97 -0
- package/dist/components/KunTooltip/src/composables/useTooltip.js +93 -0
- package/dist/components/kunMenu/src/components/kunMenu.vue.js +150 -0
- package/dist/components/kunMenu/src/composables/kunMenuProps.js +63 -0
- package/dist/components/kunMenu/src/composables/useKunMenu.js +169 -0
- package/dist/components/kunMenu/src/composables/useKunMenuComposable.js +25 -0
- package/dist/components/kunMenu/src/composables/useKunScrollStrategy.js +25 -0
- package/dist/index.js +95 -65
- package/package.json +1 -1
|
@@ -10,8 +10,8 @@ const S = {
|
|
|
10
10
|
__name: "KunSlider",
|
|
11
11
|
props: x(),
|
|
12
12
|
emits: ["update:modelValue"],
|
|
13
|
-
setup(p, { emit:
|
|
14
|
-
const
|
|
13
|
+
setup(p, { emit: c }) {
|
|
14
|
+
const f = c, o = p, { internalValue: s, thumbPosition: b } = k(o, f);
|
|
15
15
|
return (e, a) => (i(), n("div", {
|
|
16
16
|
class: u(["kun-slider", { "kun-slider--disabled": e.disabled }, o.class]),
|
|
17
17
|
style: d(o.style)
|
|
@@ -46,7 +46,7 @@ const S = {
|
|
|
46
46
|
])
|
|
47
47
|
], 6));
|
|
48
48
|
}
|
|
49
|
-
}, N = /* @__PURE__ */ w(z, [["__scopeId", "data-v-
|
|
49
|
+
}, N = /* @__PURE__ */ w(z, [["__scopeId", "data-v-e6512ce5"]]);
|
|
50
50
|
export {
|
|
51
51
|
N as default
|
|
52
52
|
};
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
import { useSlots as C, computed as w, ref as x, onMounted as N, createElementBlock as d, openBlock as u, renderSlot as n, createVNode as _, createElementVNode as p, Transition as E, withCtx as V, createCommentVNode as B, unref as a, normalizeStyle as f, normalizeClass as v, createTextVNode as y, toDisplayString as m } from "vue";
|
|
2
|
+
import { useTooltip as L } from "../composables/useTooltip.js";
|
|
3
|
+
const T = { class: "kun-tooltip relative inline-block" }, $ = {
|
|
4
|
+
__name: "KunTooltip",
|
|
5
|
+
props: {
|
|
6
|
+
text: {
|
|
7
|
+
type: String,
|
|
8
|
+
default: ""
|
|
9
|
+
},
|
|
10
|
+
location: {
|
|
11
|
+
type: String,
|
|
12
|
+
default: "top",
|
|
13
|
+
validator: (t) => ["top", "bottom", "left", "right"].includes(t)
|
|
14
|
+
},
|
|
15
|
+
openOn: {
|
|
16
|
+
type: String,
|
|
17
|
+
default: "hover",
|
|
18
|
+
validator: (t) => ["hover", "click"].includes(t)
|
|
19
|
+
},
|
|
20
|
+
disabled: Boolean,
|
|
21
|
+
contentClass: {
|
|
22
|
+
type: [String, Object, Array],
|
|
23
|
+
default: null
|
|
24
|
+
},
|
|
25
|
+
delay: {
|
|
26
|
+
type: [String, Number],
|
|
27
|
+
default: 0,
|
|
28
|
+
validator: (t) => !isNaN(parseInt(t))
|
|
29
|
+
},
|
|
30
|
+
closeOnClick: {
|
|
31
|
+
type: Boolean,
|
|
32
|
+
default: !1
|
|
33
|
+
},
|
|
34
|
+
transition: {
|
|
35
|
+
type: String,
|
|
36
|
+
default: "fade"
|
|
37
|
+
}
|
|
38
|
+
},
|
|
39
|
+
setup(t) {
|
|
40
|
+
const o = t, r = C(), k = w(() => r.activator ? {
|
|
41
|
+
onMouseenter: s,
|
|
42
|
+
onMouseleave: i,
|
|
43
|
+
onClick: c
|
|
44
|
+
} : {}), {
|
|
45
|
+
isVisible: g,
|
|
46
|
+
arrowClass: S,
|
|
47
|
+
positionStyle: b,
|
|
48
|
+
arrowStyle: h,
|
|
49
|
+
onEnter: s,
|
|
50
|
+
onLeave: i,
|
|
51
|
+
onClick: c
|
|
52
|
+
} = L(o), l = x(null);
|
|
53
|
+
return N(() => {
|
|
54
|
+
if (!r.activator && l.value) {
|
|
55
|
+
const e = l.value;
|
|
56
|
+
e.addEventListener("mouseenter", s), e.addEventListener("mouseleave", i), e.addEventListener("click", c);
|
|
57
|
+
}
|
|
58
|
+
}), (e, z) => (u(), d("div", T, [
|
|
59
|
+
n(e.$slots, "activator", { props: k.value }, () => [
|
|
60
|
+
p("span", {
|
|
61
|
+
ref_key: "activator",
|
|
62
|
+
ref: l,
|
|
63
|
+
class: "kun-tooltip-activator"
|
|
64
|
+
}, [
|
|
65
|
+
n(e.$slots, "default")
|
|
66
|
+
], 512)
|
|
67
|
+
]),
|
|
68
|
+
_(E, { name: "fade" }, {
|
|
69
|
+
default: V(() => [
|
|
70
|
+
a(g) ? (u(), d("div", {
|
|
71
|
+
key: 0,
|
|
72
|
+
ref: "tooltip",
|
|
73
|
+
class: v([
|
|
74
|
+
"kun-tooltip-content",
|
|
75
|
+
"absolute z-50 px-2 py-1 text-sm rounded shadow-lg text-white bg-gray-800 dark:bg-gray-700 whitespace-nowrap",
|
|
76
|
+
o.contentClass
|
|
77
|
+
]),
|
|
78
|
+
style: f(a(b))
|
|
79
|
+
}, [
|
|
80
|
+
y(m(o.text) + " ", 1),
|
|
81
|
+
n(e.$slots, "default", {}, () => [
|
|
82
|
+
y(m(o.text), 1)
|
|
83
|
+
]),
|
|
84
|
+
p("div", {
|
|
85
|
+
class: v(["kun-tooltip-arrow", a(S)]),
|
|
86
|
+
style: f(a(h))
|
|
87
|
+
}, null, 6)
|
|
88
|
+
], 6)) : B("", !0)
|
|
89
|
+
]),
|
|
90
|
+
_: 3
|
|
91
|
+
})
|
|
92
|
+
]));
|
|
93
|
+
}
|
|
94
|
+
};
|
|
95
|
+
export {
|
|
96
|
+
$ as default
|
|
97
|
+
};
|
|
@@ -0,0 +1,93 @@
|
|
|
1
|
+
import { ref as l, computed as i } from "vue";
|
|
2
|
+
function x(e) {
|
|
3
|
+
const o = l(!1);
|
|
4
|
+
let c = null, s = null;
|
|
5
|
+
const w = i(() => {
|
|
6
|
+
switch (e.location) {
|
|
7
|
+
case "top":
|
|
8
|
+
return "mb-2";
|
|
9
|
+
case "bottom":
|
|
10
|
+
return "mt-2";
|
|
11
|
+
case "left":
|
|
12
|
+
return "mr-2";
|
|
13
|
+
case "right":
|
|
14
|
+
return "ml-2";
|
|
15
|
+
default:
|
|
16
|
+
return "";
|
|
17
|
+
}
|
|
18
|
+
}), h = i(() => {
|
|
19
|
+
switch (e.location) {
|
|
20
|
+
case "top":
|
|
21
|
+
return "border-b border-l border-gray-800 dark:border-gray-700";
|
|
22
|
+
case "bottom":
|
|
23
|
+
return "border-t border-l border-gray-800 dark:border-gray-700";
|
|
24
|
+
case "left":
|
|
25
|
+
return "border-r border-t border-gray-800 dark:border-gray-700";
|
|
26
|
+
case "right":
|
|
27
|
+
return "border-l border-t border-gray-800 dark:border-gray-700";
|
|
28
|
+
default:
|
|
29
|
+
return "";
|
|
30
|
+
}
|
|
31
|
+
}), g = i(() => {
|
|
32
|
+
let t = {};
|
|
33
|
+
switch (e.location) {
|
|
34
|
+
case "top":
|
|
35
|
+
case "bottom":
|
|
36
|
+
t.left = "50%", t.transform = "translateX(-50%)";
|
|
37
|
+
break;
|
|
38
|
+
case "left":
|
|
39
|
+
case "right":
|
|
40
|
+
t.top = "50%", t.transform = "translateY(-50%)";
|
|
41
|
+
break;
|
|
42
|
+
}
|
|
43
|
+
return t;
|
|
44
|
+
}), u = l({}), d = () => {
|
|
45
|
+
if (!n.value || !a.value) return;
|
|
46
|
+
const t = n.value.getBoundingClientRect(), f = a.value.getBoundingClientRect();
|
|
47
|
+
let r = {};
|
|
48
|
+
switch (e.location) {
|
|
49
|
+
case "top":
|
|
50
|
+
r.top = `${t.top + window.scrollY - f.height}px`, r.left = `${t.left + window.scrollX + t.width / 2}px`;
|
|
51
|
+
break;
|
|
52
|
+
case "bottom":
|
|
53
|
+
r.top = `${t.bottom + window.scrollY}px`, r.left = `${t.left + window.scrollX + t.width / 2}px`;
|
|
54
|
+
break;
|
|
55
|
+
case "left":
|
|
56
|
+
r.top = `${t.top + window.scrollY + t.height / 2}px`, r.left = `${t.left + window.scrollX - f.width}px`;
|
|
57
|
+
break;
|
|
58
|
+
case "right":
|
|
59
|
+
r.top = `${t.top + window.scrollY + t.height / 2}px`, r.left = `${t.right + window.scrollX}px`;
|
|
60
|
+
break;
|
|
61
|
+
}
|
|
62
|
+
u.value = r;
|
|
63
|
+
}, n = l(null), a = l(null), m = () => {
|
|
64
|
+
e.disabled || (clearTimeout(s), c = setTimeout(() => {
|
|
65
|
+
o.value = !0, d();
|
|
66
|
+
}, parseInt(e.delay)));
|
|
67
|
+
}, b = () => {
|
|
68
|
+
e.disabled || (clearTimeout(c), s = setTimeout(() => {
|
|
69
|
+
o.value = !1;
|
|
70
|
+
}, 100));
|
|
71
|
+
};
|
|
72
|
+
return {
|
|
73
|
+
isVisible: o,
|
|
74
|
+
positionClass: w,
|
|
75
|
+
arrowClass: h,
|
|
76
|
+
positionStyle: u,
|
|
77
|
+
arrowStyle: g,
|
|
78
|
+
onEnter: () => {
|
|
79
|
+
e.openOn === "hover" && m();
|
|
80
|
+
},
|
|
81
|
+
onLeave: () => {
|
|
82
|
+
e.openOn === "hover" && b();
|
|
83
|
+
},
|
|
84
|
+
onClick: () => {
|
|
85
|
+
e.openOn === "click" && (o.value = !o.value, o.value && d()), e.closeOnClick && b();
|
|
86
|
+
},
|
|
87
|
+
activator: n,
|
|
88
|
+
tooltip: a
|
|
89
|
+
};
|
|
90
|
+
}
|
|
91
|
+
export {
|
|
92
|
+
x as useTooltip
|
|
93
|
+
};
|
|
@@ -0,0 +1,150 @@
|
|
|
1
|
+
import { createElementBlock as A, openBlock as y, Fragment as D, createBlock as g, createCommentVNode as j, createElementVNode as a, Teleport as R, resolveDynamicComponent as q, unref as e, withCtx as $, withDirectives as K, mergeProps as V, withKeys as r, withModifiers as s, renderSlot as b, vShow as c, Transition as G, normalizeStyle as J, normalizeClass as L, normalizeProps as O, guardReactiveProps as Q } from "vue";
|
|
2
|
+
import { useKunMenu as U } from "../composables/useKunMenu.js";
|
|
3
|
+
import { kunMenuProps as X } from "../composables/kunMenuProps.js";
|
|
4
|
+
/* empty css */
|
|
5
|
+
const Y = ["aria-label"], Z = { class: "max-h-60 overflow-auto" }, _ = ["aria-label"], ee = { class: "max-h-60 overflow-auto" }, te = ["aria-expanded"], re = {
|
|
6
|
+
__name: "kunMenu",
|
|
7
|
+
props: X,
|
|
8
|
+
emits: ["update:modelValue"],
|
|
9
|
+
setup(B, { emit: F }) {
|
|
10
|
+
const l = B, N = F, {
|
|
11
|
+
menuVisible: d,
|
|
12
|
+
activatorEl: S,
|
|
13
|
+
contentEl: h,
|
|
14
|
+
computedHeight: k,
|
|
15
|
+
computedMinWidth: w,
|
|
16
|
+
computedMinHeight: C,
|
|
17
|
+
computedMaxWidth: M,
|
|
18
|
+
computedMaxHeight: z,
|
|
19
|
+
locationMap: I,
|
|
20
|
+
transitionComponent: T,
|
|
21
|
+
hideMenu: p,
|
|
22
|
+
handleActivatorClick: P,
|
|
23
|
+
handleHover: H,
|
|
24
|
+
handleFocus: E,
|
|
25
|
+
handleContentClick: u,
|
|
26
|
+
focusNextItem: m,
|
|
27
|
+
focusPrevItem: v,
|
|
28
|
+
focusCurrentItem: f,
|
|
29
|
+
computedTransition: x,
|
|
30
|
+
menuWidth: W
|
|
31
|
+
} = U(l, N);
|
|
32
|
+
return (o, t) => (y(), A(D, null, [
|
|
33
|
+
o.attach !== !0 ? (y(), g(R, {
|
|
34
|
+
key: 0,
|
|
35
|
+
to: o.attach || "body"
|
|
36
|
+
}, [
|
|
37
|
+
typeof l.transition == "object" ? (y(), g(q(e(T)), {
|
|
38
|
+
key: 0,
|
|
39
|
+
mode: "out-in"
|
|
40
|
+
}, {
|
|
41
|
+
default: $(() => {
|
|
42
|
+
var i;
|
|
43
|
+
return [
|
|
44
|
+
K(a("div", V({
|
|
45
|
+
ref_key: "contentEl",
|
|
46
|
+
ref: h,
|
|
47
|
+
role: "menu",
|
|
48
|
+
"aria-label": o.label,
|
|
49
|
+
tabindex: "-1",
|
|
50
|
+
class: ["absolute bg-white dark:bg-gray-800 rounded shadow-lg z-[var(--zIndex,2000)] overflow-hidden focus:outline-none", [
|
|
51
|
+
o.contentClass,
|
|
52
|
+
((i = e(I)[o.location]) == null ? void 0 : i.class) || ""
|
|
53
|
+
]],
|
|
54
|
+
style: {
|
|
55
|
+
width: e(W),
|
|
56
|
+
minWidth: e(w),
|
|
57
|
+
maxWidth: e(M),
|
|
58
|
+
minHeight: e(C),
|
|
59
|
+
maxHeight: e(z),
|
|
60
|
+
height: e(k),
|
|
61
|
+
zIndex: o.zIndex,
|
|
62
|
+
opacity: o.scrim && typeof o.scrim == "string" ? l.opacity : void 0
|
|
63
|
+
}
|
|
64
|
+
}, o.contentProps, {
|
|
65
|
+
onClick: t[0] || (t[0] = s((...n) => e(u) && e(u)(...n), ["stop"])),
|
|
66
|
+
onKeydown: [
|
|
67
|
+
t[1] || (t[1] = r(s((...n) => e(m) && e(m)(...n), ["stop", "prevent"]), ["down"])),
|
|
68
|
+
t[2] || (t[2] = r(s((...n) => e(v) && e(v)(...n), ["stop", "prevent"]), ["up"])),
|
|
69
|
+
t[3] || (t[3] = r(s((...n) => e(f) && e(f)(...n), ["stop"]), ["enter"])),
|
|
70
|
+
t[4] || (t[4] = r((...n) => e(p) && e(p)(...n), ["escape"]))
|
|
71
|
+
]
|
|
72
|
+
}), [
|
|
73
|
+
a("div", Z, [
|
|
74
|
+
b(o.$slots, "default")
|
|
75
|
+
])
|
|
76
|
+
], 16, Y), [
|
|
77
|
+
[c, e(d)]
|
|
78
|
+
])
|
|
79
|
+
];
|
|
80
|
+
}),
|
|
81
|
+
_: 3
|
|
82
|
+
})) : (y(), g(G, {
|
|
83
|
+
key: 1,
|
|
84
|
+
name: e(x)
|
|
85
|
+
}, {
|
|
86
|
+
default: $(() => {
|
|
87
|
+
var i;
|
|
88
|
+
return [
|
|
89
|
+
K(a("div", V({
|
|
90
|
+
ref_key: "contentEl",
|
|
91
|
+
ref: h,
|
|
92
|
+
role: "menu",
|
|
93
|
+
"aria-label": o.label,
|
|
94
|
+
tabindex: "-1",
|
|
95
|
+
class: ["absolute bg-white dark:bg-gray-800 rounded shadow-lg z-[var(--zIndex,2000)] overflow-hidden focus:outline-none", [
|
|
96
|
+
o.contentClass,
|
|
97
|
+
((i = e(I)[o.location]) == null ? void 0 : i.class) || ""
|
|
98
|
+
]],
|
|
99
|
+
style: {
|
|
100
|
+
width: e(W),
|
|
101
|
+
minWidth: e(w),
|
|
102
|
+
maxWidth: e(M),
|
|
103
|
+
minHeight: e(C),
|
|
104
|
+
maxHeight: e(z),
|
|
105
|
+
height: e(k),
|
|
106
|
+
zIndex: o.zIndex,
|
|
107
|
+
opacity: o.scrim && typeof o.scrim == "string" ? l.opacity : void 0
|
|
108
|
+
}
|
|
109
|
+
}, o.contentProps, {
|
|
110
|
+
onClick: t[5] || (t[5] = s((...n) => e(u) && e(u)(...n), ["stop"])),
|
|
111
|
+
onKeydown: [
|
|
112
|
+
t[6] || (t[6] = r(s((...n) => e(m) && e(m)(...n), ["stop", "prevent"]), ["down"])),
|
|
113
|
+
t[7] || (t[7] = r(s((...n) => e(v) && e(v)(...n), ["stop", "prevent"]), ["up"])),
|
|
114
|
+
t[8] || (t[8] = r(s((...n) => e(f) && e(f)(...n), ["stop"]), ["enter"])),
|
|
115
|
+
t[9] || (t[9] = r((...n) => e(p) && e(p)(...n), ["escape"]))
|
|
116
|
+
]
|
|
117
|
+
}), [
|
|
118
|
+
a("div", ee, [
|
|
119
|
+
b(o.$slots, "default")
|
|
120
|
+
])
|
|
121
|
+
], 16, _), [
|
|
122
|
+
[c, e(d)]
|
|
123
|
+
])
|
|
124
|
+
];
|
|
125
|
+
}),
|
|
126
|
+
_: 3
|
|
127
|
+
}, 8, ["name"]))
|
|
128
|
+
], 8, ["to"])) : j("", !0),
|
|
129
|
+
a("div", {
|
|
130
|
+
ref_key: "activatorEl",
|
|
131
|
+
ref: S,
|
|
132
|
+
class: L(["inline-block relative", [o.activatorProps.class]]),
|
|
133
|
+
style: J([o.activatorProps.style]),
|
|
134
|
+
onClick: t[10] || (t[10] = s((...i) => e(P) && e(P)(...i), ["stop"])),
|
|
135
|
+
onMouseenter: t[11] || (t[11] = (i) => e(H)("enter")),
|
|
136
|
+
onMouseleave: t[12] || (t[12] = (i) => e(H)("leave")),
|
|
137
|
+
onFocus: t[13] || (t[13] = (...i) => e(E) && e(E)(...i)),
|
|
138
|
+
role: "button",
|
|
139
|
+
"aria-haspopup": !0,
|
|
140
|
+
"aria-expanded": e(d),
|
|
141
|
+
tabindex: "0"
|
|
142
|
+
}, [
|
|
143
|
+
b(o.$slots, "activator", O(Q({ isActive: e(d) })))
|
|
144
|
+
], 46, te)
|
|
145
|
+
], 64));
|
|
146
|
+
}
|
|
147
|
+
};
|
|
148
|
+
export {
|
|
149
|
+
re as default
|
|
150
|
+
};
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
const t = {
|
|
2
|
+
modelValue: Boolean,
|
|
3
|
+
activator: [String, Object],
|
|
4
|
+
activatorProps: {
|
|
5
|
+
type: Object,
|
|
6
|
+
default: () => ({})
|
|
7
|
+
},
|
|
8
|
+
attach: [Boolean, String, Object],
|
|
9
|
+
openOnClick: Boolean,
|
|
10
|
+
openOnHover: Boolean,
|
|
11
|
+
openOnFocus: Boolean,
|
|
12
|
+
closeOnContentClick: { type: Boolean, default: !0 },
|
|
13
|
+
closeOnBack: { type: Boolean, default: !0 },
|
|
14
|
+
contained: Boolean,
|
|
15
|
+
contentClass: [String, Array, Object],
|
|
16
|
+
contentProps: {
|
|
17
|
+
type: Object,
|
|
18
|
+
default: () => ({})
|
|
19
|
+
},
|
|
20
|
+
disabled: Boolean,
|
|
21
|
+
eager: Boolean,
|
|
22
|
+
height: [String, Number],
|
|
23
|
+
width: [String, Number],
|
|
24
|
+
matchActivatorWidth: {
|
|
25
|
+
type: Boolean,
|
|
26
|
+
default: !1
|
|
27
|
+
},
|
|
28
|
+
minHeight: [String, Number],
|
|
29
|
+
minWidth: [String, Number],
|
|
30
|
+
maxHeight: [String, Number],
|
|
31
|
+
maxWidth: [String, Number],
|
|
32
|
+
offset: [String, Number, Array],
|
|
33
|
+
openDelay: { type: [String, Number], default: 100 },
|
|
34
|
+
closeDelay: { type: [String, Number], default: 100 },
|
|
35
|
+
location: { type: String, default: "bottom" },
|
|
36
|
+
origin: { type: String, default: "auto" },
|
|
37
|
+
transition: {
|
|
38
|
+
type: [String, Object],
|
|
39
|
+
default: "scale",
|
|
40
|
+
validator: (e) => ["fade", "slide-y", "slide-left", "slide-right", "scale"].includes(e) || typeof e == "object" && "component" in e
|
|
41
|
+
},
|
|
42
|
+
persistent: Boolean,
|
|
43
|
+
zIndex: [String, Number],
|
|
44
|
+
submenu: Boolean,
|
|
45
|
+
scrim: [Boolean, String],
|
|
46
|
+
opacity: { type: [Number, String], default: 1 },
|
|
47
|
+
scrollStrategy: {
|
|
48
|
+
type: [String, Function],
|
|
49
|
+
default: "reposition",
|
|
50
|
+
validator: (e) => ["close", "block", "reposition", "none"].includes(e) || typeof e == "function"
|
|
51
|
+
},
|
|
52
|
+
label: {
|
|
53
|
+
type: String,
|
|
54
|
+
default: "Menú contextual"
|
|
55
|
+
},
|
|
56
|
+
keyboardNavigation: {
|
|
57
|
+
type: Boolean,
|
|
58
|
+
default: !0
|
|
59
|
+
}
|
|
60
|
+
};
|
|
61
|
+
export {
|
|
62
|
+
t as kunMenuProps
|
|
63
|
+
};
|
|
@@ -0,0 +1,169 @@
|
|
|
1
|
+
import { ref as r, computed as o, watch as w, nextTick as L, onMounted as X, onBeforeUnmount as Y } from "vue";
|
|
2
|
+
import { useKunMenuComposable as q } from "./useKunMenuComposable.js";
|
|
3
|
+
import { useKunScrollStrategy as F } from "./useKunScrollStrategy.js";
|
|
4
|
+
function U(e, v) {
|
|
5
|
+
const l = r(e.modelValue), a = r(null), i = r(null), d = r(null), s = r(null), k = o(
|
|
6
|
+
() => typeof e.width == "number" ? `${e.width}px` : e.width
|
|
7
|
+
), C = o(
|
|
8
|
+
() => typeof e.height == "number" ? `${e.height}px` : e.height
|
|
9
|
+
), H = o(
|
|
10
|
+
() => typeof e.minWidth == "number" ? `${e.minWidth}px` : e.minWidth
|
|
11
|
+
), I = o(
|
|
12
|
+
() => typeof e.minHeight == "number" ? `${e.minHeight}px` : e.minHeight
|
|
13
|
+
), M = o(
|
|
14
|
+
() => typeof e.maxWidth == "number" ? `${e.maxWidth}px` : e.maxWidth
|
|
15
|
+
), W = o(
|
|
16
|
+
() => typeof e.maxHeight == "number" ? `${e.maxHeight}px` : e.maxHeight
|
|
17
|
+
), T = {
|
|
18
|
+
top: { class: "origin-bottom" },
|
|
19
|
+
bottom: { class: "origin-top" },
|
|
20
|
+
left: { class: "origin-right" },
|
|
21
|
+
right: { class: "origin-left" }
|
|
22
|
+
}, A = o(() => {
|
|
23
|
+
var t;
|
|
24
|
+
return ((t = e.transition) == null ? void 0 : t.component) || null;
|
|
25
|
+
});
|
|
26
|
+
function g() {
|
|
27
|
+
e.disabled || (clearTimeout(s.value), d.value = setTimeout(() => {
|
|
28
|
+
l.value = !0, v("update:modelValue", !0);
|
|
29
|
+
}, +e.openDelay));
|
|
30
|
+
}
|
|
31
|
+
function m() {
|
|
32
|
+
e.persistent || (clearTimeout(d.value), s.value = setTimeout(() => {
|
|
33
|
+
l.value = !1, v("update:modelValue", !1);
|
|
34
|
+
}, +e.closeDelay));
|
|
35
|
+
}
|
|
36
|
+
function x() {
|
|
37
|
+
l.value ? m() : g();
|
|
38
|
+
}
|
|
39
|
+
function $(t) {
|
|
40
|
+
e.disabled || e.openOnClick && !e.persistent && x();
|
|
41
|
+
}
|
|
42
|
+
function E(t) {
|
|
43
|
+
if (!e.openOnHover || e.disabled) return;
|
|
44
|
+
clearTimeout(d.value), clearTimeout(s.value);
|
|
45
|
+
const c = t === "enter" ? e.openDelay : e.closeDelay;
|
|
46
|
+
setTimeout(() => {
|
|
47
|
+
l.value = t === "enter";
|
|
48
|
+
}, +c);
|
|
49
|
+
}
|
|
50
|
+
function O() {
|
|
51
|
+
e.openOnFocus && (l.value = !0);
|
|
52
|
+
}
|
|
53
|
+
function V(t) {
|
|
54
|
+
e.closeOnContentClick && !e.persistent && m();
|
|
55
|
+
}
|
|
56
|
+
w(
|
|
57
|
+
() => e.modelValue,
|
|
58
|
+
(t) => {
|
|
59
|
+
l.value = t;
|
|
60
|
+
}
|
|
61
|
+
), w(
|
|
62
|
+
l,
|
|
63
|
+
async (t) => {
|
|
64
|
+
t && (await L(), h());
|
|
65
|
+
}
|
|
66
|
+
);
|
|
67
|
+
function h() {
|
|
68
|
+
if (!a.value || !i.value) return;
|
|
69
|
+
const t = a.value.getBoundingClientRect(), c = window.scrollX || window.pageXOffset, f = window.scrollY || window.pageYOffset;
|
|
70
|
+
let n = 0, u = 0;
|
|
71
|
+
const b = e.submenu ? "right" : e.location;
|
|
72
|
+
switch (b) {
|
|
73
|
+
case "top":
|
|
74
|
+
n = t.top - i.value.offsetHeight, u = t.left;
|
|
75
|
+
break;
|
|
76
|
+
case "bottom":
|
|
77
|
+
n = t.bottom, u = t.left;
|
|
78
|
+
break;
|
|
79
|
+
case "left":
|
|
80
|
+
n = t.top, u = t.left - i.value.offsetWidth;
|
|
81
|
+
break;
|
|
82
|
+
case "right":
|
|
83
|
+
n = t.top, u = t.right;
|
|
84
|
+
break;
|
|
85
|
+
default:
|
|
86
|
+
n = t.bottom, u = t.left;
|
|
87
|
+
}
|
|
88
|
+
if (e.offset)
|
|
89
|
+
if (Array.isArray(e.offset))
|
|
90
|
+
u += e.offset[0], n += e.offset[1];
|
|
91
|
+
else {
|
|
92
|
+
const y = parseInt(e.offset);
|
|
93
|
+
["top", "bottom"].includes(b) ? u += y : n += y;
|
|
94
|
+
}
|
|
95
|
+
i.value.style.top = `${n + f}px`, i.value.style.left = `${u + c}px`;
|
|
96
|
+
}
|
|
97
|
+
function D() {
|
|
98
|
+
if (!e.keyboardNavigation) return;
|
|
99
|
+
const t = Array.from(i.value.querySelectorAll('[role="menuitem"]')), f = (t.findIndex((n) => document.activeElement === n) + 1) % t.length;
|
|
100
|
+
t[f].focus();
|
|
101
|
+
}
|
|
102
|
+
function N() {
|
|
103
|
+
if (!e.keyboardNavigation) return;
|
|
104
|
+
const t = Array.from(i.value.querySelectorAll('[role="menuitem"]')), f = (t.findIndex((n) => document.activeElement === n) - 1 + t.length) % t.length;
|
|
105
|
+
t[f].focus();
|
|
106
|
+
}
|
|
107
|
+
function S() {
|
|
108
|
+
if (!e.keyboardNavigation) return;
|
|
109
|
+
const t = document.activeElement;
|
|
110
|
+
t && t.getAttribute("role") === "menuitem" && t.click();
|
|
111
|
+
}
|
|
112
|
+
X(async () => {
|
|
113
|
+
var n;
|
|
114
|
+
e.activator === "parent" && (a.value = (n = i.value) == null ? void 0 : n.parentElement);
|
|
115
|
+
const { onClickOutside: t } = q(), { addEventListeners: c, removeEventListeners: f } = t(
|
|
116
|
+
i,
|
|
117
|
+
() => {
|
|
118
|
+
e.persistent || m();
|
|
119
|
+
},
|
|
120
|
+
[a]
|
|
121
|
+
);
|
|
122
|
+
c(), Y(() => {
|
|
123
|
+
f();
|
|
124
|
+
}), F(e, m, h);
|
|
125
|
+
});
|
|
126
|
+
const B = o(() => {
|
|
127
|
+
if (typeof e.transition == "object")
|
|
128
|
+
return e.transition.component || "transition";
|
|
129
|
+
switch (e.location) {
|
|
130
|
+
case "top":
|
|
131
|
+
return "slide-y";
|
|
132
|
+
case "left":
|
|
133
|
+
return "slide-left";
|
|
134
|
+
case "right":
|
|
135
|
+
return "slide-right";
|
|
136
|
+
default:
|
|
137
|
+
return "scale";
|
|
138
|
+
}
|
|
139
|
+
}), K = o(() => e.width ? e.width : e.matchActivatorWidth && a.value ? `${a.value.getBoundingClientRect().width}px` : "auto");
|
|
140
|
+
return {
|
|
141
|
+
menuVisible: l,
|
|
142
|
+
activatorEl: a,
|
|
143
|
+
contentEl: i,
|
|
144
|
+
computedWidth: k,
|
|
145
|
+
computedHeight: C,
|
|
146
|
+
computedMinWidth: H,
|
|
147
|
+
computedMinHeight: I,
|
|
148
|
+
computedMaxWidth: M,
|
|
149
|
+
computedMaxHeight: W,
|
|
150
|
+
locationMap: T,
|
|
151
|
+
transitionComponent: A,
|
|
152
|
+
showMenu: g,
|
|
153
|
+
hideMenu: m,
|
|
154
|
+
toggleMenu: x,
|
|
155
|
+
handleActivatorClick: $,
|
|
156
|
+
handleHover: E,
|
|
157
|
+
handleFocus: O,
|
|
158
|
+
handleContentClick: V,
|
|
159
|
+
positionMenu: h,
|
|
160
|
+
focusNextItem: D,
|
|
161
|
+
focusPrevItem: N,
|
|
162
|
+
focusCurrentItem: S,
|
|
163
|
+
computedTransition: B,
|
|
164
|
+
menuWidth: K
|
|
165
|
+
};
|
|
166
|
+
}
|
|
167
|
+
export {
|
|
168
|
+
U as useKunMenu
|
|
169
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
function v() {
|
|
2
|
+
function r(c, i, u = []) {
|
|
3
|
+
const n = (e) => {
|
|
4
|
+
var s;
|
|
5
|
+
const o = c.value;
|
|
6
|
+
if (!o) return;
|
|
7
|
+
const d = ((s = e.composedPath) == null ? void 0 : s.call(e)[0]) || e.target;
|
|
8
|
+
[o, ...u.map((t) => t == null ? void 0 : t.value)].some(
|
|
9
|
+
(t) => t == null ? void 0 : t.contains(d)
|
|
10
|
+
) || i(e);
|
|
11
|
+
};
|
|
12
|
+
return {
|
|
13
|
+
addEventListeners: () => {
|
|
14
|
+
document.addEventListener("click", n, !0), document.addEventListener("touchstart", n, !0);
|
|
15
|
+
},
|
|
16
|
+
removeEventListeners: () => {
|
|
17
|
+
document.removeEventListener("click", n, !0), document.removeEventListener("touchstart", n, !0);
|
|
18
|
+
}
|
|
19
|
+
};
|
|
20
|
+
}
|
|
21
|
+
return { onClickOutside: r };
|
|
22
|
+
}
|
|
23
|
+
export {
|
|
24
|
+
v as useKunMenuComposable
|
|
25
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import { ref as t, onMounted as s, onBeforeUnmount as c } from "vue";
|
|
2
|
+
function a(r, n, l) {
|
|
3
|
+
const o = t(0);
|
|
4
|
+
function e() {
|
|
5
|
+
switch (r.scrollStrategy) {
|
|
6
|
+
case "close":
|
|
7
|
+
n();
|
|
8
|
+
break;
|
|
9
|
+
case "reposition":
|
|
10
|
+
l();
|
|
11
|
+
break;
|
|
12
|
+
case "block":
|
|
13
|
+
window.scrollTo(0, o.value);
|
|
14
|
+
break;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
s(() => {
|
|
18
|
+
o.value = window.scrollY || window.pageYOffset, window.addEventListener("scroll", e, !0);
|
|
19
|
+
}), c(() => {
|
|
20
|
+
window.removeEventListener("scroll", e, !0);
|
|
21
|
+
});
|
|
22
|
+
}
|
|
23
|
+
export {
|
|
24
|
+
a as useKunScrollStrategy
|
|
25
|
+
};
|