@mekari/pixel3-popover 0.0.4 → 0.0.5
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/{chunk-SMKHJPNG.mjs → chunk-52BTWLDY.mjs} +2 -2
- package/dist/{chunk-KRK533DP.mjs → chunk-5LOKC2YN.mjs} +1 -1
- package/dist/{chunk-3VISLXE6.mjs → chunk-ACYTEMPK.mjs} +5 -8
- package/dist/{chunk-G54Z6NKL.mjs → chunk-LTPID7ZX.mjs} +12669 -10472
- package/dist/{chunk-EOUKE4WB.mjs → chunk-MPDM4USP.mjs} +25 -13
- package/dist/{chunk-E2N74NQW.mjs → chunk-VN53X7QU.mjs} +1 -1
- package/dist/{chunk-OBEDLACV.mjs → chunk-WBFSONWB.mjs} +2 -2
- package/dist/{chunk-6AOSFLZR.mjs → chunk-YFYQ7S3B.mjs} +2 -2
- package/dist/content.js +9 -12
- package/dist/content.mjs +3 -3
- package/dist/index.css +540 -0
- package/dist/index.js +13422 -11216
- package/dist/index.mjs +8 -8
- package/dist/list-item.css +540 -0
- package/dist/list-item.js +12809 -10603
- package/dist/list-item.mjs +8 -8
- package/dist/list.mjs +2 -2
- package/dist/metafile-cjs.json +1 -1
- package/dist/metafile-esm.json +1 -1
- package/dist/modules/popover.hooks.d.mts +1 -0
- package/dist/modules/popover.hooks.d.ts +1 -0
- package/dist/modules/popover.hooks.js +25 -13
- package/dist/modules/popover.hooks.mjs +1 -1
- package/dist/modules/popover.props.d.mts +10 -16
- package/dist/modules/popover.props.d.ts +10 -16
- package/dist/modules/popover.props.js +5 -8
- package/dist/modules/popover.props.mjs +1 -1
- package/dist/popover.d.mts +13 -19
- package/dist/popover.d.ts +13 -19
- package/dist/popover.js +12 -15
- package/dist/popover.mjs +3 -3
- package/dist/singleton-popover.d.mts +13 -19
- package/dist/singleton-popover.d.ts +13 -19
- package/dist/singleton-popover.js +6 -9
- package/dist/singleton-popover.mjs +3 -3
- package/dist/trigger.mjs +2 -2
- package/package.json +2 -2
|
@@ -12,7 +12,7 @@ import { useId, onClickOutside, onKeyStroke, unrefElement } from "@mekari/pixel3
|
|
|
12
12
|
import { popoverContentRecipe, popoverListRecipe, popoverListItemRecipe } from "@mekari/pixel3-styled-system/recipes";
|
|
13
13
|
import { flex } from "@mekari/pixel3-styled-system/patterns";
|
|
14
14
|
function usePopover(props, emit) {
|
|
15
|
-
const isOpen = ref(props.
|
|
15
|
+
const isOpen = ref(props.isDefaultOpen);
|
|
16
16
|
const triggerNode = ref(null);
|
|
17
17
|
const contentNode = ref(null);
|
|
18
18
|
const placement = ref(props.placement);
|
|
@@ -26,27 +26,27 @@ function usePopover(props, emit) {
|
|
|
26
26
|
whileElementsMounted: autoUpdate
|
|
27
27
|
});
|
|
28
28
|
function onOpenPopover() {
|
|
29
|
+
if (props.isManual)
|
|
30
|
+
return;
|
|
31
|
+
isOpen.value = true;
|
|
29
32
|
emit("open", {
|
|
30
33
|
isOpen,
|
|
31
34
|
triggerNode,
|
|
32
35
|
contentNode,
|
|
33
36
|
placement
|
|
34
37
|
});
|
|
35
|
-
if (props.isManual)
|
|
36
|
-
return;
|
|
37
|
-
isOpen.value = true;
|
|
38
38
|
}
|
|
39
39
|
__name(onOpenPopover, "onOpenPopover");
|
|
40
40
|
function onClosePopover() {
|
|
41
|
+
if (props.isManual)
|
|
42
|
+
return;
|
|
43
|
+
isOpen.value = false;
|
|
41
44
|
emit("close", {
|
|
42
45
|
isOpen,
|
|
43
46
|
triggerNode,
|
|
44
47
|
contentNode,
|
|
45
48
|
placement
|
|
46
49
|
});
|
|
47
|
-
if (props.isManual)
|
|
48
|
-
return;
|
|
49
|
-
isOpen.value = false;
|
|
50
50
|
}
|
|
51
51
|
__name(onClosePopover, "onClosePopover");
|
|
52
52
|
function setHovering(value) {
|
|
@@ -80,7 +80,7 @@ function useSingletonPopover(props, emit) {
|
|
|
80
80
|
const {
|
|
81
81
|
triggerNode
|
|
82
82
|
} = toRefs(props);
|
|
83
|
-
const isOpen = ref(props.
|
|
83
|
+
const isOpen = ref(props.isDefaultOpen);
|
|
84
84
|
const contentNode = ref(null);
|
|
85
85
|
const placement = ref(props.placement);
|
|
86
86
|
const middleware = ref([offset(4), flip(), shift()]);
|
|
@@ -189,8 +189,8 @@ function usePopoverContent(props, emit) {
|
|
|
189
189
|
} = usePopoverContext();
|
|
190
190
|
const {
|
|
191
191
|
id,
|
|
192
|
-
|
|
193
|
-
|
|
192
|
+
isCloseOnBlur,
|
|
193
|
+
isCloseOnEscape,
|
|
194
194
|
trigger,
|
|
195
195
|
isAdaptiveWidth,
|
|
196
196
|
usePortal
|
|
@@ -199,14 +199,14 @@ function usePopoverContent(props, emit) {
|
|
|
199
199
|
const getId = computed(() => (id == null ? void 0 : id.value) ? `popover-content-${id.value}` : `popover-content-${useId(4)}`);
|
|
200
200
|
onClickOutside(restContentNode, (e) => {
|
|
201
201
|
emit("blur", e);
|
|
202
|
-
if (
|
|
202
|
+
if (isCloseOnBlur.value) {
|
|
203
203
|
onClosePopover();
|
|
204
204
|
}
|
|
205
205
|
});
|
|
206
206
|
onKeyStroke("Escape", (e) => {
|
|
207
207
|
if (isOpen.value) {
|
|
208
208
|
emit("escape");
|
|
209
|
-
if (
|
|
209
|
+
if (isCloseOnEscape.value) {
|
|
210
210
|
onClosePopover();
|
|
211
211
|
e.preventDefault();
|
|
212
212
|
}
|
|
@@ -271,6 +271,13 @@ function usePopoverList() {
|
|
|
271
271
|
}
|
|
272
272
|
__name(usePopoverList, "usePopoverList");
|
|
273
273
|
function usePopoverListItem(props) {
|
|
274
|
+
const {
|
|
275
|
+
onClosePopover,
|
|
276
|
+
rootProps: popoverProps
|
|
277
|
+
} = usePopoverContext();
|
|
278
|
+
const {
|
|
279
|
+
isCloseOnSelect
|
|
280
|
+
} = popoverProps;
|
|
274
281
|
const isHighligted = ref(false);
|
|
275
282
|
const rootAttrs = computed(() => {
|
|
276
283
|
return {
|
|
@@ -281,7 +288,12 @@ function usePopoverListItem(props) {
|
|
|
281
288
|
"data-highlight": isHighligted.value || void 0,
|
|
282
289
|
"data-active": props.isActive || void 0,
|
|
283
290
|
onmouseenter: () => isHighligted.value = true,
|
|
284
|
-
onmouseleave: () => isHighligted.value = false
|
|
291
|
+
onmouseleave: () => isHighligted.value = false,
|
|
292
|
+
onClick: () => {
|
|
293
|
+
if (isCloseOnSelect.value) {
|
|
294
|
+
onClosePopover();
|
|
295
|
+
}
|
|
296
|
+
}
|
|
285
297
|
};
|
|
286
298
|
});
|
|
287
299
|
const contentAttrs = {
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
import {
|
|
2
2
|
popoverContentProps
|
|
3
|
-
} from "./chunk-
|
|
3
|
+
} from "./chunk-ACYTEMPK.mjs";
|
|
4
4
|
import {
|
|
5
5
|
usePopoverContent
|
|
6
|
-
} from "./chunk-
|
|
6
|
+
} from "./chunk-MPDM4USP.mjs";
|
|
7
7
|
|
|
8
8
|
// src/content.tsx
|
|
9
9
|
import { createTextVNode as _createTextVNode, createVNode as _createVNode, mergeProps as _mergeProps, Fragment as _Fragment } from "vue";
|
package/dist/content.js
CHANGED
|
@@ -53,8 +53,8 @@ function usePopoverContent(props, emit) {
|
|
|
53
53
|
} = usePopoverContext();
|
|
54
54
|
const {
|
|
55
55
|
id,
|
|
56
|
-
|
|
57
|
-
|
|
56
|
+
isCloseOnBlur,
|
|
57
|
+
isCloseOnEscape,
|
|
58
58
|
trigger,
|
|
59
59
|
isAdaptiveWidth,
|
|
60
60
|
usePortal
|
|
@@ -63,14 +63,14 @@ function usePopoverContent(props, emit) {
|
|
|
63
63
|
const getId = (0, import_vue.computed)(() => (id == null ? void 0 : id.value) ? `popover-content-${id.value}` : `popover-content-${(0, import_pixel3_utils2.useId)(4)}`);
|
|
64
64
|
(0, import_pixel3_utils2.onClickOutside)(restContentNode, (e) => {
|
|
65
65
|
emit("blur", e);
|
|
66
|
-
if (
|
|
66
|
+
if (isCloseOnBlur.value) {
|
|
67
67
|
onClosePopover();
|
|
68
68
|
}
|
|
69
69
|
});
|
|
70
70
|
(0, import_pixel3_utils2.onKeyStroke)("Escape", (e) => {
|
|
71
71
|
if (isOpen.value) {
|
|
72
72
|
emit("escape");
|
|
73
|
-
if (
|
|
73
|
+
if (isCloseOnEscape.value) {
|
|
74
74
|
onClosePopover();
|
|
75
75
|
e.preventDefault();
|
|
76
76
|
}
|
|
@@ -141,7 +141,7 @@ var popoverProps = {
|
|
|
141
141
|
triggerId: {
|
|
142
142
|
type: String
|
|
143
143
|
},
|
|
144
|
-
|
|
144
|
+
isDefaultOpen: {
|
|
145
145
|
type: Boolean
|
|
146
146
|
},
|
|
147
147
|
isManual: {
|
|
@@ -150,21 +150,18 @@ var popoverProps = {
|
|
|
150
150
|
isOpen: {
|
|
151
151
|
type: Boolean
|
|
152
152
|
},
|
|
153
|
-
|
|
153
|
+
isFocusOnClose: {
|
|
154
154
|
type: Boolean
|
|
155
155
|
},
|
|
156
|
-
|
|
157
|
-
type: Boolean
|
|
158
|
-
},
|
|
159
|
-
closeOnBlur: {
|
|
156
|
+
isCloseOnBlur: {
|
|
160
157
|
type: Boolean,
|
|
161
158
|
default: true
|
|
162
159
|
},
|
|
163
|
-
|
|
160
|
+
isCloseOnEscape: {
|
|
164
161
|
type: Boolean,
|
|
165
162
|
default: true
|
|
166
163
|
},
|
|
167
|
-
|
|
164
|
+
isCloseOnSelect: {
|
|
168
165
|
type: Boolean,
|
|
169
166
|
default: false
|
|
170
167
|
},
|
package/dist/content.mjs
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import {
|
|
2
2
|
MpPopoverContent
|
|
3
|
-
} from "./chunk-
|
|
4
|
-
import "./chunk-
|
|
5
|
-
import "./chunk-
|
|
3
|
+
} from "./chunk-WBFSONWB.mjs";
|
|
4
|
+
import "./chunk-ACYTEMPK.mjs";
|
|
5
|
+
import "./chunk-MPDM4USP.mjs";
|
|
6
6
|
import "./chunk-2ZUCITXI.mjs";
|
|
7
7
|
import "./chunk-QZ7VFGWC.mjs";
|
|
8
8
|
export {
|