@destyler/popover 0.0.2 → 0.0.3
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/component.cjs +2 -4
- package/dist/component.mjs +3 -5
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/dist/shared/{popover.f0fbccbe.cjs → popover.0f6ec87d.cjs} +14 -34
- package/dist/shared/{popover.a25f925c.mjs → popover.87a37156.mjs} +14 -34
- package/package.json +11 -10
package/dist/component.cjs
CHANGED
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
const vue = require('vue');
|
|
4
4
|
const popper = require('@destyler/popper');
|
|
5
|
-
const index = require('./shared/popover.
|
|
5
|
+
const index = require('./shared/popover.0f6ec87d.cjs');
|
|
6
6
|
require('@destyler/primitive');
|
|
7
7
|
require('@destyler/shared');
|
|
8
8
|
require('@destyler/composition');
|
|
@@ -40,9 +40,7 @@ const DestylerPopoverAnchor = vue.defineComponent({
|
|
|
40
40
|
});
|
|
41
41
|
},
|
|
42
42
|
render() {
|
|
43
|
-
return vue.h(popper.DestylerPopperAnchor, vue.mergeProps(this.$props, {}),
|
|
44
|
-
default: () => this.$slots.default?.()
|
|
45
|
-
});
|
|
43
|
+
return vue.h(popper.DestylerPopperAnchor, vue.mergeProps(this.$props, {}), () => this.$slots.default?.());
|
|
46
44
|
}
|
|
47
45
|
});
|
|
48
46
|
|
package/dist/component.mjs
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import { defineComponent, onBeforeMount, onUnmounted, h, mergeProps } from 'vue';
|
|
2
2
|
import { DestylerPopperAnchor } from '@destyler/popper';
|
|
3
|
-
import { i as injectPopoverRootContext } from './shared/popover.
|
|
4
|
-
export { D as DestylerPopoverArrow, a as DestylerPopoverClose, b as DestylerPopoverContent, c as DestylerPopoverContentImpl, d as DestylerPopoverContentModal, e as DestylerPopoverContentNonModal, f as DestylerPopoverPortal, g as DestylerPopoverRoot, h as DestylerPopoverTrigger } from './shared/popover.
|
|
3
|
+
import { i as injectPopoverRootContext } from './shared/popover.87a37156.mjs';
|
|
4
|
+
export { D as DestylerPopoverArrow, a as DestylerPopoverClose, b as DestylerPopoverContent, c as DestylerPopoverContentImpl, d as DestylerPopoverContentModal, e as DestylerPopoverContentNonModal, f as DestylerPopoverPortal, g as DestylerPopoverRoot, h as DestylerPopoverTrigger } from './shared/popover.87a37156.mjs';
|
|
5
5
|
import '@destyler/primitive';
|
|
6
6
|
import '@destyler/shared';
|
|
7
7
|
import '@destyler/composition';
|
|
@@ -39,9 +39,7 @@ const DestylerPopoverAnchor = defineComponent({
|
|
|
39
39
|
});
|
|
40
40
|
},
|
|
41
41
|
render() {
|
|
42
|
-
return h(DestylerPopperAnchor, mergeProps(this.$props, {}),
|
|
43
|
-
default: () => this.$slots.default?.()
|
|
44
|
-
});
|
|
42
|
+
return h(DestylerPopperAnchor, mergeProps(this.$props, {}), () => this.$slots.default?.());
|
|
45
43
|
}
|
|
46
44
|
});
|
|
47
45
|
|
package/dist/index.cjs
CHANGED
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
export { D as DestylerPopoverArrow, a as DestylerPopoverClose, b as DestylerPopoverContent, f as DestylerPopoverPortal, g as DestylerPopoverRoot, h as DestylerPopoverTrigger } from './shared/popover.
|
|
1
|
+
export { D as DestylerPopoverArrow, a as DestylerPopoverClose, b as DestylerPopoverContent, f as DestylerPopoverPortal, g as DestylerPopoverRoot, h as DestylerPopoverTrigger } from './shared/popover.87a37156.mjs';
|
|
2
2
|
import 'vue';
|
|
3
3
|
import '@destyler/popper';
|
|
4
4
|
import '@destyler/primitive';
|
|
@@ -37,9 +37,7 @@ const DestylerPopoverArrow = vue.defineComponent({
|
|
|
37
37
|
name: "DestylerPopoverArrow",
|
|
38
38
|
props: destylerPopoverArrowProps,
|
|
39
39
|
render() {
|
|
40
|
-
return vue.h(popper.DestylerPopperArrow, vue.mergeProps(this.$props, {}),
|
|
41
|
-
default: () => this.$slots.default?.()
|
|
42
|
-
});
|
|
40
|
+
return vue.h(popper.DestylerPopperArrow, vue.mergeProps(this.$props, {}), () => this.$slots.default?.());
|
|
43
41
|
}
|
|
44
42
|
});
|
|
45
43
|
|
|
@@ -97,9 +95,7 @@ const DestylerPopoverRoot = vue.defineComponent({
|
|
|
97
95
|
};
|
|
98
96
|
},
|
|
99
97
|
render() {
|
|
100
|
-
return vue.h(popper.DestylerPopperRoot, null,
|
|
101
|
-
default: () => this.$slots.default?.()
|
|
102
|
-
});
|
|
98
|
+
return vue.h(popper.DestylerPopperRoot, null, () => this.$slots.default?.());
|
|
103
99
|
}
|
|
104
100
|
});
|
|
105
101
|
|
|
@@ -132,9 +128,7 @@ const DestylerPopoverClose = vue.defineComponent({
|
|
|
132
128
|
onClick: () => {
|
|
133
129
|
this.rootContext.onOpenChange(false);
|
|
134
130
|
}
|
|
135
|
-
},
|
|
136
|
-
default: () => this.$slots.default?.()
|
|
137
|
-
});
|
|
131
|
+
}, () => this.$slots.default?.());
|
|
138
132
|
}
|
|
139
133
|
});
|
|
140
134
|
|
|
@@ -249,7 +243,7 @@ const DestylerPopoverContentImpl = vue.defineComponent({
|
|
|
249
243
|
onUnmountAutoFocus: (event) => {
|
|
250
244
|
this.$emit("closeAutoFocus", event);
|
|
251
245
|
}
|
|
252
|
-
}, vue.h(dismissableLayer.DestylerDismissableLayer, {
|
|
246
|
+
}, () => vue.h(dismissableLayer.DestylerDismissableLayer, {
|
|
253
247
|
asChild: true,
|
|
254
248
|
disableOutsidePointerEvents: this.$props.disableOutsidePointerEvents,
|
|
255
249
|
onPointerDownOutside: (event) => {
|
|
@@ -267,7 +261,7 @@ const DestylerPopoverContentImpl = vue.defineComponent({
|
|
|
267
261
|
onDismiss: () => {
|
|
268
262
|
this.rootContext.onOpenChange(false);
|
|
269
263
|
}
|
|
270
|
-
}, vue.withDirectives(vue.h(popper.DestylerPopperContent, vue.mergeProps(this.forwarded, {
|
|
264
|
+
}, () => vue.withDirectives(vue.h(popper.DestylerPopperContent, vue.mergeProps(this.forwarded, {
|
|
271
265
|
"data-state": this.rootContext.open.value ? "open" : "closed",
|
|
272
266
|
"role": "dialog",
|
|
273
267
|
"style": {
|
|
@@ -277,9 +271,7 @@ const DestylerPopoverContentImpl = vue.defineComponent({
|
|
|
277
271
|
"--destyler_popover_trigger_width": "var(--destyler_popper_anchor_width)",
|
|
278
272
|
"--destyler_popover_trigger_height": "var(--destyler_popper_anchor_height)"
|
|
279
273
|
}
|
|
280
|
-
}),
|
|
281
|
-
default: () => this.$slots.default?.()
|
|
282
|
-
}), [
|
|
274
|
+
}), () => this.$slots.default?.()), [
|
|
283
275
|
[directives.BindOnceDirective, { id: this.rootContext.contentId }]
|
|
284
276
|
])));
|
|
285
277
|
}
|
|
@@ -320,9 +312,7 @@ const DestylerPopoverContentModal = vue.defineComponent({
|
|
|
320
312
|
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
|
|
321
313
|
this.isRightClickOutsideRef = isRightClick;
|
|
322
314
|
}
|
|
323
|
-
},
|
|
324
|
-
default: () => this.$slots.default?.()
|
|
325
|
-
});
|
|
315
|
+
}, () => this.$slots.default?.());
|
|
326
316
|
}
|
|
327
317
|
});
|
|
328
318
|
|
|
@@ -371,9 +361,7 @@ const DestylerPopoverContentNonModal = vue.defineComponent({
|
|
|
371
361
|
if (event.detail.originalEvent.type === "focusin" && this.hasPointerDownOutsideRef)
|
|
372
362
|
event.preventDefault();
|
|
373
363
|
}
|
|
374
|
-
},
|
|
375
|
-
default: () => this.$slots.default?.()
|
|
376
|
-
});
|
|
364
|
+
}, () => this.$slots.default?.());
|
|
377
365
|
}
|
|
378
366
|
});
|
|
379
367
|
|
|
@@ -402,15 +390,11 @@ const DestylerPopoverContent = vue.defineComponent({
|
|
|
402
390
|
const useVShow = this.rootContext.modal.value;
|
|
403
391
|
return vue.h(presence.DestylerPresence, {
|
|
404
392
|
present: this.forceMount || this.rootContext.open.value
|
|
405
|
-
}, useVShow ? vue.h(DestylerPopoverContentModal, {
|
|
393
|
+
}, () => useVShow ? vue.h(DestylerPopoverContentModal, {
|
|
406
394
|
...this.forwarded
|
|
407
|
-
}, {
|
|
408
|
-
default: () => this.$slots.default?.()
|
|
409
|
-
}) : vue.h(DestylerPopoverContentNonModal, {
|
|
395
|
+
}, () => this.$slots.default?.()) : vue.h(DestylerPopoverContentNonModal, {
|
|
410
396
|
...this.forwarded
|
|
411
|
-
},
|
|
412
|
-
default: () => this.$slots.default?.()
|
|
413
|
-
}));
|
|
397
|
+
}, () => this.$slots.default?.()));
|
|
414
398
|
}
|
|
415
399
|
});
|
|
416
400
|
|
|
@@ -435,9 +419,7 @@ const DestylerPopoverPortal = vue.defineComponent({
|
|
|
435
419
|
name: "DestylerPopoverPortal",
|
|
436
420
|
props: destylerPopoverPortalProps,
|
|
437
421
|
render() {
|
|
438
|
-
return vue.h(teleport.DestylerTeleport, vue.mergeProps(this.$props),
|
|
439
|
-
default: () => this.$slots.default?.()
|
|
440
|
-
});
|
|
422
|
+
return vue.h(teleport.DestylerTeleport, vue.mergeProps(this.$props), () => this.$slots.default?.());
|
|
441
423
|
}
|
|
442
424
|
});
|
|
443
425
|
|
|
@@ -470,7 +452,7 @@ const DestylerPopoverTrigger = vue.defineComponent({
|
|
|
470
452
|
render() {
|
|
471
453
|
return vue.h(this.rootContext.hasCustomAnchor.value ? primitive.DestylerPrimitive : popper.DestylerPopperAnchor, {
|
|
472
454
|
asChild: true
|
|
473
|
-
}, vue.h(primitive.DestylerPrimitive, {
|
|
455
|
+
}, () => vue.h(primitive.DestylerPrimitive, {
|
|
474
456
|
"ref": (el) => this.forwardRef(el),
|
|
475
457
|
"type": this.$props.as === "button" ? "button" : void 0,
|
|
476
458
|
"as": this.$props.as,
|
|
@@ -482,9 +464,7 @@ const DestylerPopoverTrigger = vue.defineComponent({
|
|
|
482
464
|
"onClick": () => {
|
|
483
465
|
this.rootContext.onOpenToggle();
|
|
484
466
|
}
|
|
485
|
-
},
|
|
486
|
-
default: () => this.$slots.default?.()
|
|
487
|
-
}));
|
|
467
|
+
}, () => this.$slots.default?.()));
|
|
488
468
|
}
|
|
489
469
|
});
|
|
490
470
|
|
|
@@ -35,9 +35,7 @@ const DestylerPopoverArrow = defineComponent({
|
|
|
35
35
|
name: "DestylerPopoverArrow",
|
|
36
36
|
props: destylerPopoverArrowProps,
|
|
37
37
|
render() {
|
|
38
|
-
return h(DestylerPopperArrow, mergeProps(this.$props, {}),
|
|
39
|
-
default: () => this.$slots.default?.()
|
|
40
|
-
});
|
|
38
|
+
return h(DestylerPopperArrow, mergeProps(this.$props, {}), () => this.$slots.default?.());
|
|
41
39
|
}
|
|
42
40
|
});
|
|
43
41
|
|
|
@@ -95,9 +93,7 @@ const DestylerPopoverRoot = defineComponent({
|
|
|
95
93
|
};
|
|
96
94
|
},
|
|
97
95
|
render() {
|
|
98
|
-
return h(DestylerPopperRoot, null,
|
|
99
|
-
default: () => this.$slots.default?.()
|
|
100
|
-
});
|
|
96
|
+
return h(DestylerPopperRoot, null, () => this.$slots.default?.());
|
|
101
97
|
}
|
|
102
98
|
});
|
|
103
99
|
|
|
@@ -130,9 +126,7 @@ const DestylerPopoverClose = defineComponent({
|
|
|
130
126
|
onClick: () => {
|
|
131
127
|
this.rootContext.onOpenChange(false);
|
|
132
128
|
}
|
|
133
|
-
},
|
|
134
|
-
default: () => this.$slots.default?.()
|
|
135
|
-
});
|
|
129
|
+
}, () => this.$slots.default?.());
|
|
136
130
|
}
|
|
137
131
|
});
|
|
138
132
|
|
|
@@ -247,7 +241,7 @@ const DestylerPopoverContentImpl = defineComponent({
|
|
|
247
241
|
onUnmountAutoFocus: (event) => {
|
|
248
242
|
this.$emit("closeAutoFocus", event);
|
|
249
243
|
}
|
|
250
|
-
}, h(DestylerDismissableLayer, {
|
|
244
|
+
}, () => h(DestylerDismissableLayer, {
|
|
251
245
|
asChild: true,
|
|
252
246
|
disableOutsidePointerEvents: this.$props.disableOutsidePointerEvents,
|
|
253
247
|
onPointerDownOutside: (event) => {
|
|
@@ -265,7 +259,7 @@ const DestylerPopoverContentImpl = defineComponent({
|
|
|
265
259
|
onDismiss: () => {
|
|
266
260
|
this.rootContext.onOpenChange(false);
|
|
267
261
|
}
|
|
268
|
-
}, withDirectives(h(DestylerPopperContent, mergeProps(this.forwarded, {
|
|
262
|
+
}, () => withDirectives(h(DestylerPopperContent, mergeProps(this.forwarded, {
|
|
269
263
|
"data-state": this.rootContext.open.value ? "open" : "closed",
|
|
270
264
|
"role": "dialog",
|
|
271
265
|
"style": {
|
|
@@ -275,9 +269,7 @@ const DestylerPopoverContentImpl = defineComponent({
|
|
|
275
269
|
"--destyler_popover_trigger_width": "var(--destyler_popper_anchor_width)",
|
|
276
270
|
"--destyler_popover_trigger_height": "var(--destyler_popper_anchor_height)"
|
|
277
271
|
}
|
|
278
|
-
}),
|
|
279
|
-
default: () => this.$slots.default?.()
|
|
280
|
-
}), [
|
|
272
|
+
}), () => this.$slots.default?.()), [
|
|
281
273
|
[BindOnceDirective, { id: this.rootContext.contentId }]
|
|
282
274
|
])));
|
|
283
275
|
}
|
|
@@ -318,9 +310,7 @@ const DestylerPopoverContentModal = defineComponent({
|
|
|
318
310
|
const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
|
|
319
311
|
this.isRightClickOutsideRef = isRightClick;
|
|
320
312
|
}
|
|
321
|
-
},
|
|
322
|
-
default: () => this.$slots.default?.()
|
|
323
|
-
});
|
|
313
|
+
}, () => this.$slots.default?.());
|
|
324
314
|
}
|
|
325
315
|
});
|
|
326
316
|
|
|
@@ -369,9 +359,7 @@ const DestylerPopoverContentNonModal = defineComponent({
|
|
|
369
359
|
if (event.detail.originalEvent.type === "focusin" && this.hasPointerDownOutsideRef)
|
|
370
360
|
event.preventDefault();
|
|
371
361
|
}
|
|
372
|
-
},
|
|
373
|
-
default: () => this.$slots.default?.()
|
|
374
|
-
});
|
|
362
|
+
}, () => this.$slots.default?.());
|
|
375
363
|
}
|
|
376
364
|
});
|
|
377
365
|
|
|
@@ -400,15 +388,11 @@ const DestylerPopoverContent = defineComponent({
|
|
|
400
388
|
const useVShow = this.rootContext.modal.value;
|
|
401
389
|
return h(DestylerPresence, {
|
|
402
390
|
present: this.forceMount || this.rootContext.open.value
|
|
403
|
-
}, useVShow ? h(DestylerPopoverContentModal, {
|
|
391
|
+
}, () => useVShow ? h(DestylerPopoverContentModal, {
|
|
404
392
|
...this.forwarded
|
|
405
|
-
}, {
|
|
406
|
-
default: () => this.$slots.default?.()
|
|
407
|
-
}) : h(DestylerPopoverContentNonModal, {
|
|
393
|
+
}, () => this.$slots.default?.()) : h(DestylerPopoverContentNonModal, {
|
|
408
394
|
...this.forwarded
|
|
409
|
-
},
|
|
410
|
-
default: () => this.$slots.default?.()
|
|
411
|
-
}));
|
|
395
|
+
}, () => this.$slots.default?.()));
|
|
412
396
|
}
|
|
413
397
|
});
|
|
414
398
|
|
|
@@ -433,9 +417,7 @@ const DestylerPopoverPortal = defineComponent({
|
|
|
433
417
|
name: "DestylerPopoverPortal",
|
|
434
418
|
props: destylerPopoverPortalProps,
|
|
435
419
|
render() {
|
|
436
|
-
return h(DestylerTeleport, mergeProps(this.$props),
|
|
437
|
-
default: () => this.$slots.default?.()
|
|
438
|
-
});
|
|
420
|
+
return h(DestylerTeleport, mergeProps(this.$props), () => this.$slots.default?.());
|
|
439
421
|
}
|
|
440
422
|
});
|
|
441
423
|
|
|
@@ -468,7 +450,7 @@ const DestylerPopoverTrigger = defineComponent({
|
|
|
468
450
|
render() {
|
|
469
451
|
return h(this.rootContext.hasCustomAnchor.value ? DestylerPrimitive : DestylerPopperAnchor, {
|
|
470
452
|
asChild: true
|
|
471
|
-
}, h(DestylerPrimitive, {
|
|
453
|
+
}, () => h(DestylerPrimitive, {
|
|
472
454
|
"ref": (el) => this.forwardRef(el),
|
|
473
455
|
"type": this.$props.as === "button" ? "button" : void 0,
|
|
474
456
|
"as": this.$props.as,
|
|
@@ -480,9 +462,7 @@ const DestylerPopoverTrigger = defineComponent({
|
|
|
480
462
|
"onClick": () => {
|
|
481
463
|
this.rootContext.onOpenToggle();
|
|
482
464
|
}
|
|
483
|
-
},
|
|
484
|
-
default: () => this.$slots.default?.()
|
|
485
|
-
}));
|
|
465
|
+
}, () => this.$slots.default?.()));
|
|
486
466
|
}
|
|
487
467
|
});
|
|
488
468
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@destyler/popover",
|
|
3
|
-
"
|
|
3
|
+
"type": "module",
|
|
4
|
+
"version": "0.0.3",
|
|
4
5
|
"description": "unstyled popover component for vue",
|
|
5
6
|
"author": "Elone Hoo <elonehoo@gmail.com>",
|
|
6
7
|
"license": "MIT",
|
|
@@ -33,15 +34,15 @@
|
|
|
33
34
|
"vue": ">=3.3.4"
|
|
34
35
|
},
|
|
35
36
|
"dependencies": {
|
|
36
|
-
"@destyler/composition": "0.0.
|
|
37
|
-
"@destyler/
|
|
38
|
-
"@destyler/
|
|
39
|
-
"@destyler/
|
|
40
|
-
"@destyler/
|
|
41
|
-
"@destyler/
|
|
42
|
-
"@destyler/
|
|
43
|
-
"@destyler/
|
|
44
|
-
"@destyler/
|
|
37
|
+
"@destyler/composition": "0.0.3",
|
|
38
|
+
"@destyler/directives": "0.0.3",
|
|
39
|
+
"@destyler/dismissable-layer": "0.0.3",
|
|
40
|
+
"@destyler/focus-scope": "0.0.3",
|
|
41
|
+
"@destyler/teleport": "0.0.3",
|
|
42
|
+
"@destyler/popper": "0.0.3",
|
|
43
|
+
"@destyler/presence": "0.0.3",
|
|
44
|
+
"@destyler/shared": "0.0.3",
|
|
45
|
+
"@destyler/primitive": "0.0.3"
|
|
45
46
|
},
|
|
46
47
|
"scripts": {
|
|
47
48
|
"clear": "rimraf ./dist",
|