@destyler/dialog 0.0.1-beta.13 → 0.0.1-beta.14

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/LICENSE ADDED
@@ -0,0 +1,21 @@
1
+ MIT License
2
+
3
+ Copyright (c) 2023-PRESENT Elone Hoo
4
+
5
+ Permission is hereby granted, free of charge, to any person obtaining a copy
6
+ of this software and associated documentation files (the "Software"), to deal
7
+ in the Software without restriction, including without limitation the rights
8
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9
+ copies of the Software, and to permit persons to whom the Software is
10
+ furnished to do so, subject to the following conditions:
11
+
12
+ The above copyright notice and this permission notice shall be included in all
13
+ copies or substantial portions of the Software.
14
+
15
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21
+ SOFTWARE.
@@ -124,13 +124,13 @@ const DestylerDialogContentImpl = vue.defineComponent({
124
124
  emits: ["openAutoFocus", "closeAutoFocus", "escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
125
125
  setup() {
126
126
  const rootContext = injectDialogRootContext();
127
- const { customElement, currentElement: contentElement } = composition.useCustomElement();
127
+ const { forwardRef, currentElement: contentElement } = composition.useForwardExpose();
128
128
  vue.onMounted(() => {
129
129
  rootContext.contentElement = contentElement;
130
130
  });
131
131
  return {
132
132
  rootContext,
133
- customElement
133
+ forwardRef
134
134
  };
135
135
  },
136
136
  render() {
@@ -144,15 +144,15 @@ const DestylerDialogContentImpl = vue.defineComponent({
144
144
  onUnmountAutoFocus: (event) => {
145
145
  this.$emit("closeAutoFocus", event);
146
146
  }
147
- }, vue.withDirectives(vue.h(dismissableLayer.DestylerDismissableLayer, {
148
- ...this.$attrs,
149
- "ref": "customElement",
147
+ }, vue.withDirectives(vue.h(dismissableLayer.DestylerDismissableLayer, vue.mergeProps(this.$attrs, {
148
+ "ref": (el) => this.forwardRef(el),
150
149
  "as": this.$props.as,
151
150
  "asChild": this.$props.asChild,
152
151
  "role": "dialog",
153
152
  "aria-describedby": this.rootContext.descriptionId,
154
153
  "aria-labelledby": this.rootContext.titleId,
155
154
  "data-state": shared.getOpenState(this.rootContext.open.value),
155
+ "isDismissable": true,
156
156
  "onDismiss": () => {
157
157
  this.rootContext.onOpenChange(false);
158
158
  },
@@ -168,7 +168,7 @@ const DestylerDialogContentImpl = vue.defineComponent({
168
168
  "onPointerDownOutside": (event) => {
169
169
  this.$emit("pointerDownOutside", event);
170
170
  }
171
- }, {
171
+ }), {
172
172
  default: () => this.$slots.default?.()
173
173
  }), [
174
174
  [directives.BindOnceDirective, { id: this.rootContext.contentId }]
@@ -183,19 +183,19 @@ const DestylerDialogContentModal = vue.defineComponent({
183
183
  setup(_, { emit }) {
184
184
  const rootContext = injectDialogRootContext();
185
185
  const emitsAsProps = composition.useEmitAsProps(emit);
186
- const { customElement, currentElement } = composition.useCustomElement();
186
+ const { forwardRef, currentElement } = composition.useForwardExpose();
187
187
  composition.useHideOthers(currentElement);
188
188
  return {
189
189
  rootContext,
190
190
  emitsAsProps,
191
- customElement
191
+ forwardRef
192
192
  };
193
193
  },
194
194
  render() {
195
195
  return vue.h(DestylerDialogContentImpl, vue.mergeProps(this.$props, this.emitsAsProps, {
196
- "ref": "customElement",
196
+ "ref": (el) => this.forwardRef(el),
197
197
  "trap-focus": this.rootContext.open.value,
198
- "disable-outside-pointer-events": true,
198
+ "disableOutsidePointerEvents": true,
199
199
  "onCloseAutoFocus": (event) => {
200
200
  this.$emit("closeAutoFocus", event);
201
201
  if (!event.defaultPrevented) {
@@ -241,7 +241,7 @@ const DestylerDialogContentNonModal = vue.defineComponent({
241
241
  render() {
242
242
  return vue.h(DestylerDialogContentImpl, vue.mergeProps(this.$props, this.emitsAsProps, {
243
243
  "trap-focus": false,
244
- "disable-outside-pointer-events": false,
244
+ "disableOutsidePointerEvents": false,
245
245
  "onCloseAutoFocus": (event) => {
246
246
  this.$emit("closeAutoFocus", event);
247
247
  if (!event.defaultPrevented) {
@@ -299,9 +299,11 @@ const DestylerDialogContent = vue.defineComponent({
299
299
  setup(_, { emit }) {
300
300
  const rootContext = injectDialogRootContext();
301
301
  const emitsAsProps = composition.useEmitAsProps(emit);
302
+ const { forwardRef } = composition.useForwardExpose();
302
303
  return {
303
304
  rootContext,
304
- emitsAsProps
305
+ emitsAsProps,
306
+ forwardRef
305
307
  };
306
308
  },
307
309
  render() {
@@ -310,12 +312,14 @@ const DestylerDialogContent = vue.defineComponent({
310
312
  present: this.$props.forceMount || this.rootContext.open.value
311
313
  }, [
312
314
  useVShow ? vue.h(DestylerDialogContentModal, vue.mergeProps(this.$props, this.emitsAsProps, this.$attrs, {
315
+ ref: (el) => this.forwardRef(el),
313
316
  onOpenAutoFocus: (event) => {
314
317
  this.$emit("openAutoFocus", event);
315
318
  }
316
319
  }), {
317
320
  default: () => this.$slots.default?.()
318
321
  }) : vue.h(DestylerDialogContentNonModal, vue.mergeProps(this.$props, this.emitsAsProps, this.$attrs), {
322
+ ref: (el) => this.forwardRef(el),
319
323
  default: () => this.$slots.default?.()
320
324
  })
321
325
  ]);
@@ -372,6 +376,7 @@ const DestylerDialogOverlayImpl = vue.defineComponent({
372
376
  props: destylerDialogOverlayImplProps,
373
377
  setup() {
374
378
  const rootContext = injectDialogRootContext();
379
+ composition.useForwardExpose();
375
380
  return {
376
381
  rootContext
377
382
  };
@@ -411,8 +416,10 @@ const DestylerDialogOverlay = vue.defineComponent({
411
416
  props: destylerDialogOverlayProps,
412
417
  setup() {
413
418
  const rootContext = injectDialogRootContext();
419
+ const { forwardRef } = composition.useForwardExpose();
414
420
  return {
415
- rootContext
421
+ rootContext,
422
+ forwardRef
416
423
  };
417
424
  },
418
425
  render() {
@@ -420,6 +427,7 @@ const DestylerDialogOverlay = vue.defineComponent({
420
427
  return useVShow ? vue.h(presence.DestylerPresence, {
421
428
  present: this.$props.forceMount || this.rootContext.open.value
422
429
  }, vue.h(DestylerDialogOverlayImpl, vue.mergeProps(this.$attrs, {
430
+ ref: (el) => this.forwardRef(el),
423
431
  as: this.$props.as,
424
432
  asChild: this.$props.asChild
425
433
  }), {
@@ -500,20 +508,20 @@ const DestylerDialogTrigger = vue.defineComponent({
500
508
  props: destylerDialogTriggerProps,
501
509
  setup() {
502
510
  const rootContext = injectDialogRootContext();
503
- const { customElement, currentElement } = composition.useCustomElement();
511
+ const { forwardRef, currentElement } = composition.useForwardExpose();
504
512
  vue.onMounted(() => {
505
513
  rootContext.triggerElement = currentElement;
506
514
  });
507
515
  return {
508
516
  rootContext,
509
- customElement
517
+ forwardRef
510
518
  };
511
519
  },
512
520
  render() {
513
521
  return vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$attrs, {
514
522
  "as": this.$props.as,
515
523
  "asChild": this.$props.asChild,
516
- "ref": "customElement",
524
+ "ref": (el) => this.forwardRef(el),
517
525
  "type": this.$props.as === "button" ? "button" : void 0,
518
526
  "aria-haspopup": "dialog",
519
527
  "aria-expanded": this.rootContext.open.value || false,
@@ -1,5 +1,5 @@
1
- import { D as DialogRootContext } from './shared/dialog.19d267bb.cjs';
2
- export { a as DestylerDialogClose, b as DestylerDialogCloseProps, c as DestylerDialogContent, d as DestylerDialogContentProps, e as DestylerDialogDescription, f as DestylerDialogDescriptionProps, g as DestylerDialogOverlay, h as DestylerDialogPortal, i as DestylerDialogPortalProps, j as DestylerDialogRoot, k as DestylerDialogRootProps, l as DestylerDialogTitle, m as DestylerDialogTitleProps, n as DestylerDialogTrigger, o as DestylerDialogTriggerProps } from './shared/dialog.19d267bb.cjs';
1
+ import { D as DialogRootContext } from './shared/dialog.25aba8c4.cjs';
2
+ export { a as DestylerDialogClose, b as DestylerDialogCloseProps, c as DestylerDialogContent, d as DestylerDialogContentProps, e as DestylerDialogDescription, f as DestylerDialogDescriptionProps, g as DestylerDialogOverlay, h as DestylerDialogPortal, i as DestylerDialogPortalProps, j as DestylerDialogRoot, k as DestylerDialogRootProps, l as DestylerDialogTitle, m as DestylerDialogTitleProps, n as DestylerDialogTrigger, o as DestylerDialogTriggerProps } from './shared/dialog.25aba8c4.cjs';
3
3
  import * as vue from 'vue';
4
4
  import { PropType, Component } from 'vue';
5
5
  import * as _destyler_primitive from '@destyler/primitive';
@@ -28,7 +28,7 @@ declare const DestylerDialogContentImpl: vue.DefineComponent<{
28
28
  };
29
29
  }, {
30
30
  rootContext: DialogRootContext;
31
- customElement: vue.Ref<vue.ComponentPublicInstance | undefined>;
31
+ forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
32
32
  }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("openAutoFocus" | "closeAutoFocus" | "escapeKeyDown" | "pointerDownOutside" | "focusOutside" | "interactOutside" | "dismiss")[], "openAutoFocus" | "closeAutoFocus" | "escapeKeyDown" | "pointerDownOutside" | "focusOutside" | "interactOutside" | "dismiss", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
33
33
  readonly as: {
34
34
  readonly type: PropType<AsTag | Component>;
@@ -86,7 +86,7 @@ declare const DestylerDialogContentModal: vue.DefineComponent<{
86
86
  }, {
87
87
  rootContext: DialogRootContext;
88
88
  emitsAsProps: Record<string, any>;
89
- customElement: vue.Ref<vue.ComponentPublicInstance | undefined>;
89
+ forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
90
90
  }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("openAutoFocus" | "closeAutoFocus" | "escapeKeyDown" | "pointerDownOutside" | "focusOutside" | "interactOutside" | "dismiss")[], "openAutoFocus" | "closeAutoFocus" | "escapeKeyDown" | "pointerDownOutside" | "focusOutside" | "interactOutside" | "dismiss", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
91
91
  readonly as: {
92
92
  readonly type: vue.PropType<_destyler_primitive.AsTag | vue.Component>;
@@ -1,5 +1,5 @@
1
- import { D as DialogRootContext } from './shared/dialog.19d267bb.mjs';
2
- export { a as DestylerDialogClose, b as DestylerDialogCloseProps, c as DestylerDialogContent, d as DestylerDialogContentProps, e as DestylerDialogDescription, f as DestylerDialogDescriptionProps, g as DestylerDialogOverlay, h as DestylerDialogPortal, i as DestylerDialogPortalProps, j as DestylerDialogRoot, k as DestylerDialogRootProps, l as DestylerDialogTitle, m as DestylerDialogTitleProps, n as DestylerDialogTrigger, o as DestylerDialogTriggerProps } from './shared/dialog.19d267bb.mjs';
1
+ import { D as DialogRootContext } from './shared/dialog.25aba8c4.mjs';
2
+ export { a as DestylerDialogClose, b as DestylerDialogCloseProps, c as DestylerDialogContent, d as DestylerDialogContentProps, e as DestylerDialogDescription, f as DestylerDialogDescriptionProps, g as DestylerDialogOverlay, h as DestylerDialogPortal, i as DestylerDialogPortalProps, j as DestylerDialogRoot, k as DestylerDialogRootProps, l as DestylerDialogTitle, m as DestylerDialogTitleProps, n as DestylerDialogTrigger, o as DestylerDialogTriggerProps } from './shared/dialog.25aba8c4.mjs';
3
3
  import * as vue from 'vue';
4
4
  import { PropType, Component } from 'vue';
5
5
  import * as _destyler_primitive from '@destyler/primitive';
@@ -28,7 +28,7 @@ declare const DestylerDialogContentImpl: vue.DefineComponent<{
28
28
  };
29
29
  }, {
30
30
  rootContext: DialogRootContext;
31
- customElement: vue.Ref<vue.ComponentPublicInstance | undefined>;
31
+ forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
32
32
  }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("openAutoFocus" | "closeAutoFocus" | "escapeKeyDown" | "pointerDownOutside" | "focusOutside" | "interactOutside" | "dismiss")[], "openAutoFocus" | "closeAutoFocus" | "escapeKeyDown" | "pointerDownOutside" | "focusOutside" | "interactOutside" | "dismiss", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
33
33
  readonly as: {
34
34
  readonly type: PropType<AsTag | Component>;
@@ -86,7 +86,7 @@ declare const DestylerDialogContentModal: vue.DefineComponent<{
86
86
  }, {
87
87
  rootContext: DialogRootContext;
88
88
  emitsAsProps: Record<string, any>;
89
- customElement: vue.Ref<vue.ComponentPublicInstance | undefined>;
89
+ forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
90
90
  }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("openAutoFocus" | "closeAutoFocus" | "escapeKeyDown" | "pointerDownOutside" | "focusOutside" | "interactOutside" | "dismiss")[], "openAutoFocus" | "closeAutoFocus" | "escapeKeyDown" | "pointerDownOutside" | "focusOutside" | "interactOutside" | "dismiss", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
91
91
  readonly as: {
92
92
  readonly type: vue.PropType<_destyler_primitive.AsTag | vue.Component>;
@@ -1,5 +1,5 @@
1
- import { D as DialogRootContext } from './shared/dialog.19d267bb.js';
2
- export { a as DestylerDialogClose, b as DestylerDialogCloseProps, c as DestylerDialogContent, d as DestylerDialogContentProps, e as DestylerDialogDescription, f as DestylerDialogDescriptionProps, g as DestylerDialogOverlay, h as DestylerDialogPortal, i as DestylerDialogPortalProps, j as DestylerDialogRoot, k as DestylerDialogRootProps, l as DestylerDialogTitle, m as DestylerDialogTitleProps, n as DestylerDialogTrigger, o as DestylerDialogTriggerProps } from './shared/dialog.19d267bb.js';
1
+ import { D as DialogRootContext } from './shared/dialog.25aba8c4.js';
2
+ export { a as DestylerDialogClose, b as DestylerDialogCloseProps, c as DestylerDialogContent, d as DestylerDialogContentProps, e as DestylerDialogDescription, f as DestylerDialogDescriptionProps, g as DestylerDialogOverlay, h as DestylerDialogPortal, i as DestylerDialogPortalProps, j as DestylerDialogRoot, k as DestylerDialogRootProps, l as DestylerDialogTitle, m as DestylerDialogTitleProps, n as DestylerDialogTrigger, o as DestylerDialogTriggerProps } from './shared/dialog.25aba8c4.js';
3
3
  import * as vue from 'vue';
4
4
  import { PropType, Component } from 'vue';
5
5
  import * as _destyler_primitive from '@destyler/primitive';
@@ -28,7 +28,7 @@ declare const DestylerDialogContentImpl: vue.DefineComponent<{
28
28
  };
29
29
  }, {
30
30
  rootContext: DialogRootContext;
31
- customElement: vue.Ref<vue.ComponentPublicInstance | undefined>;
31
+ forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
32
32
  }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("openAutoFocus" | "closeAutoFocus" | "escapeKeyDown" | "pointerDownOutside" | "focusOutside" | "interactOutside" | "dismiss")[], "openAutoFocus" | "closeAutoFocus" | "escapeKeyDown" | "pointerDownOutside" | "focusOutside" | "interactOutside" | "dismiss", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
33
33
  readonly as: {
34
34
  readonly type: PropType<AsTag | Component>;
@@ -86,7 +86,7 @@ declare const DestylerDialogContentModal: vue.DefineComponent<{
86
86
  }, {
87
87
  rootContext: DialogRootContext;
88
88
  emitsAsProps: Record<string, any>;
89
- customElement: vue.Ref<vue.ComponentPublicInstance | undefined>;
89
+ forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
90
90
  }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("openAutoFocus" | "closeAutoFocus" | "escapeKeyDown" | "pointerDownOutside" | "focusOutside" | "interactOutside" | "dismiss")[], "openAutoFocus" | "closeAutoFocus" | "escapeKeyDown" | "pointerDownOutside" | "focusOutside" | "interactOutside" | "dismiss", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
91
91
  readonly as: {
92
92
  readonly type: vue.PropType<_destyler_primitive.AsTag | vue.Component>;
@@ -1,7 +1,7 @@
1
1
  import { defineComponent, ref, toRefs, h, mergeProps, onMounted, withDirectives } from 'vue';
2
2
  import { DestylerPrimitive } from '@destyler/primitive';
3
3
  import { createContext, getOpenState } from '@destyler/shared';
4
- import { useVModel, useId, useCustomElement, useEmitAsProps, useHideOthers } from '@destyler/composition';
4
+ import { useVModel, useId, useForwardExpose, useEmitAsProps, useHideOthers } from '@destyler/composition';
5
5
  import { DestylerPresence } from '@destyler/presence';
6
6
  import { DestylerFocusScope } from '@destyler/focus-scope';
7
7
  import { DestylerDismissableLayer } from '@destyler/dismissable-layer';
@@ -122,13 +122,13 @@ const DestylerDialogContentImpl = defineComponent({
122
122
  emits: ["openAutoFocus", "closeAutoFocus", "escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
123
123
  setup() {
124
124
  const rootContext = injectDialogRootContext();
125
- const { customElement, currentElement: contentElement } = useCustomElement();
125
+ const { forwardRef, currentElement: contentElement } = useForwardExpose();
126
126
  onMounted(() => {
127
127
  rootContext.contentElement = contentElement;
128
128
  });
129
129
  return {
130
130
  rootContext,
131
- customElement
131
+ forwardRef
132
132
  };
133
133
  },
134
134
  render() {
@@ -142,15 +142,15 @@ const DestylerDialogContentImpl = defineComponent({
142
142
  onUnmountAutoFocus: (event) => {
143
143
  this.$emit("closeAutoFocus", event);
144
144
  }
145
- }, withDirectives(h(DestylerDismissableLayer, {
146
- ...this.$attrs,
147
- "ref": "customElement",
145
+ }, withDirectives(h(DestylerDismissableLayer, mergeProps(this.$attrs, {
146
+ "ref": (el) => this.forwardRef(el),
148
147
  "as": this.$props.as,
149
148
  "asChild": this.$props.asChild,
150
149
  "role": "dialog",
151
150
  "aria-describedby": this.rootContext.descriptionId,
152
151
  "aria-labelledby": this.rootContext.titleId,
153
152
  "data-state": getOpenState(this.rootContext.open.value),
153
+ "isDismissable": true,
154
154
  "onDismiss": () => {
155
155
  this.rootContext.onOpenChange(false);
156
156
  },
@@ -166,7 +166,7 @@ const DestylerDialogContentImpl = defineComponent({
166
166
  "onPointerDownOutside": (event) => {
167
167
  this.$emit("pointerDownOutside", event);
168
168
  }
169
- }, {
169
+ }), {
170
170
  default: () => this.$slots.default?.()
171
171
  }), [
172
172
  [BindOnceDirective, { id: this.rootContext.contentId }]
@@ -181,19 +181,19 @@ const DestylerDialogContentModal = defineComponent({
181
181
  setup(_, { emit }) {
182
182
  const rootContext = injectDialogRootContext();
183
183
  const emitsAsProps = useEmitAsProps(emit);
184
- const { customElement, currentElement } = useCustomElement();
184
+ const { forwardRef, currentElement } = useForwardExpose();
185
185
  useHideOthers(currentElement);
186
186
  return {
187
187
  rootContext,
188
188
  emitsAsProps,
189
- customElement
189
+ forwardRef
190
190
  };
191
191
  },
192
192
  render() {
193
193
  return h(DestylerDialogContentImpl, mergeProps(this.$props, this.emitsAsProps, {
194
- "ref": "customElement",
194
+ "ref": (el) => this.forwardRef(el),
195
195
  "trap-focus": this.rootContext.open.value,
196
- "disable-outside-pointer-events": true,
196
+ "disableOutsidePointerEvents": true,
197
197
  "onCloseAutoFocus": (event) => {
198
198
  this.$emit("closeAutoFocus", event);
199
199
  if (!event.defaultPrevented) {
@@ -239,7 +239,7 @@ const DestylerDialogContentNonModal = defineComponent({
239
239
  render() {
240
240
  return h(DestylerDialogContentImpl, mergeProps(this.$props, this.emitsAsProps, {
241
241
  "trap-focus": false,
242
- "disable-outside-pointer-events": false,
242
+ "disableOutsidePointerEvents": false,
243
243
  "onCloseAutoFocus": (event) => {
244
244
  this.$emit("closeAutoFocus", event);
245
245
  if (!event.defaultPrevented) {
@@ -297,9 +297,11 @@ const DestylerDialogContent = defineComponent({
297
297
  setup(_, { emit }) {
298
298
  const rootContext = injectDialogRootContext();
299
299
  const emitsAsProps = useEmitAsProps(emit);
300
+ const { forwardRef } = useForwardExpose();
300
301
  return {
301
302
  rootContext,
302
- emitsAsProps
303
+ emitsAsProps,
304
+ forwardRef
303
305
  };
304
306
  },
305
307
  render() {
@@ -308,12 +310,14 @@ const DestylerDialogContent = defineComponent({
308
310
  present: this.$props.forceMount || this.rootContext.open.value
309
311
  }, [
310
312
  useVShow ? h(DestylerDialogContentModal, mergeProps(this.$props, this.emitsAsProps, this.$attrs, {
313
+ ref: (el) => this.forwardRef(el),
311
314
  onOpenAutoFocus: (event) => {
312
315
  this.$emit("openAutoFocus", event);
313
316
  }
314
317
  }), {
315
318
  default: () => this.$slots.default?.()
316
319
  }) : h(DestylerDialogContentNonModal, mergeProps(this.$props, this.emitsAsProps, this.$attrs), {
320
+ ref: (el) => this.forwardRef(el),
317
321
  default: () => this.$slots.default?.()
318
322
  })
319
323
  ]);
@@ -370,6 +374,7 @@ const DestylerDialogOverlayImpl = defineComponent({
370
374
  props: destylerDialogOverlayImplProps,
371
375
  setup() {
372
376
  const rootContext = injectDialogRootContext();
377
+ useForwardExpose();
373
378
  return {
374
379
  rootContext
375
380
  };
@@ -409,8 +414,10 @@ const DestylerDialogOverlay = defineComponent({
409
414
  props: destylerDialogOverlayProps,
410
415
  setup() {
411
416
  const rootContext = injectDialogRootContext();
417
+ const { forwardRef } = useForwardExpose();
412
418
  return {
413
- rootContext
419
+ rootContext,
420
+ forwardRef
414
421
  };
415
422
  },
416
423
  render() {
@@ -418,6 +425,7 @@ const DestylerDialogOverlay = defineComponent({
418
425
  return useVShow ? h(DestylerPresence, {
419
426
  present: this.$props.forceMount || this.rootContext.open.value
420
427
  }, h(DestylerDialogOverlayImpl, mergeProps(this.$attrs, {
428
+ ref: (el) => this.forwardRef(el),
421
429
  as: this.$props.as,
422
430
  asChild: this.$props.asChild
423
431
  }), {
@@ -498,20 +506,20 @@ const DestylerDialogTrigger = defineComponent({
498
506
  props: destylerDialogTriggerProps,
499
507
  setup() {
500
508
  const rootContext = injectDialogRootContext();
501
- const { customElement, currentElement } = useCustomElement();
509
+ const { forwardRef, currentElement } = useForwardExpose();
502
510
  onMounted(() => {
503
511
  rootContext.triggerElement = currentElement;
504
512
  });
505
513
  return {
506
514
  rootContext,
507
- customElement
515
+ forwardRef
508
516
  };
509
517
  },
510
518
  render() {
511
519
  return h(DestylerPrimitive, mergeProps(this.$attrs, {
512
520
  "as": this.$props.as,
513
521
  "asChild": this.$props.asChild,
514
- "ref": "customElement",
522
+ "ref": (el) => this.forwardRef(el),
515
523
  "type": this.$props.as === "button" ? "button" : void 0,
516
524
  "aria-haspopup": "dialog",
517
525
  "aria-expanded": this.rootContext.open.value || false,
package/dist/index.d.cts CHANGED
@@ -1,4 +1,4 @@
1
- export { a as DestylerDialogClose, b as DestylerDialogCloseProps, c as DestylerDialogContent, d as DestylerDialogContentProps, e as DestylerDialogDescription, f as DestylerDialogDescriptionProps, g as DestylerDialogOverlay, p as DestylerDialogOverlayProps, h as DestylerDialogPortal, i as DestylerDialogPortalProps, j as DestylerDialogRoot, k as DestylerDialogRootProps, l as DestylerDialogTitle, m as DestylerDialogTitleProps, n as DestylerDialogTrigger, o as DestylerDialogTriggerProps } from './shared/dialog.19d267bb.cjs';
1
+ export { a as DestylerDialogClose, b as DestylerDialogCloseProps, c as DestylerDialogContent, d as DestylerDialogContentProps, e as DestylerDialogDescription, f as DestylerDialogDescriptionProps, g as DestylerDialogOverlay, p as DestylerDialogOverlayProps, h as DestylerDialogPortal, i as DestylerDialogPortalProps, j as DestylerDialogRoot, k as DestylerDialogRootProps, l as DestylerDialogTitle, m as DestylerDialogTitleProps, n as DestylerDialogTrigger, o as DestylerDialogTriggerProps } from './shared/dialog.25aba8c4.cjs';
2
2
  import 'vue';
3
3
  import '@destyler/shared';
4
4
  import '@destyler/primitive';
package/dist/index.d.mts CHANGED
@@ -1,4 +1,4 @@
1
- export { a as DestylerDialogClose, b as DestylerDialogCloseProps, c as DestylerDialogContent, d as DestylerDialogContentProps, e as DestylerDialogDescription, f as DestylerDialogDescriptionProps, g as DestylerDialogOverlay, p as DestylerDialogOverlayProps, h as DestylerDialogPortal, i as DestylerDialogPortalProps, j as DestylerDialogRoot, k as DestylerDialogRootProps, l as DestylerDialogTitle, m as DestylerDialogTitleProps, n as DestylerDialogTrigger, o as DestylerDialogTriggerProps } from './shared/dialog.19d267bb.mjs';
1
+ export { a as DestylerDialogClose, b as DestylerDialogCloseProps, c as DestylerDialogContent, d as DestylerDialogContentProps, e as DestylerDialogDescription, f as DestylerDialogDescriptionProps, g as DestylerDialogOverlay, p as DestylerDialogOverlayProps, h as DestylerDialogPortal, i as DestylerDialogPortalProps, j as DestylerDialogRoot, k as DestylerDialogRootProps, l as DestylerDialogTitle, m as DestylerDialogTitleProps, n as DestylerDialogTrigger, o as DestylerDialogTriggerProps } from './shared/dialog.25aba8c4.mjs';
2
2
  import 'vue';
3
3
  import '@destyler/shared';
4
4
  import '@destyler/primitive';
package/dist/index.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- export { a as DestylerDialogClose, b as DestylerDialogCloseProps, c as DestylerDialogContent, d as DestylerDialogContentProps, e as DestylerDialogDescription, f as DestylerDialogDescriptionProps, g as DestylerDialogOverlay, p as DestylerDialogOverlayProps, h as DestylerDialogPortal, i as DestylerDialogPortalProps, j as DestylerDialogRoot, k as DestylerDialogRootProps, l as DestylerDialogTitle, m as DestylerDialogTitleProps, n as DestylerDialogTrigger, o as DestylerDialogTriggerProps } from './shared/dialog.19d267bb.js';
1
+ export { a as DestylerDialogClose, b as DestylerDialogCloseProps, c as DestylerDialogContent, d as DestylerDialogContentProps, e as DestylerDialogDescription, f as DestylerDialogDescriptionProps, g as DestylerDialogOverlay, p as DestylerDialogOverlayProps, h as DestylerDialogPortal, i as DestylerDialogPortalProps, j as DestylerDialogRoot, k as DestylerDialogRootProps, l as DestylerDialogTitle, m as DestylerDialogTitleProps, n as DestylerDialogTrigger, o as DestylerDialogTriggerProps } from './shared/dialog.25aba8c4.js';
2
2
  import 'vue';
3
3
  import '@destyler/shared';
4
4
  import '@destyler/primitive';
@@ -160,6 +160,7 @@ declare const DestylerDialogContent: vue.DefineComponent<{
160
160
  }, {
161
161
  rootContext: DialogRootContext;
162
162
  emitsAsProps: Record<string, any>;
163
+ forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
163
164
  }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("openAutoFocus" | "closeAutoFocus" | "escapeKeyDown" | "pointerDownOutside" | "focusOutside" | "interactOutside" | "dismiss")[], "openAutoFocus" | "closeAutoFocus" | "escapeKeyDown" | "pointerDownOutside" | "focusOutside" | "interactOutside" | "dismiss", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
164
165
  readonly as: {
165
166
  readonly type: PropType<AsTag | Component>;
@@ -270,6 +271,7 @@ declare const DestylerDialogOverlay: vue.DefineComponent<{
270
271
  };
271
272
  }, {
272
273
  rootContext: DialogRootContext;
274
+ forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
273
275
  }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
274
276
  readonly as: {
275
277
  readonly type: PropType<AsTag | Component>;
@@ -398,7 +400,7 @@ declare const DestylerDialogTrigger: vue.DefineComponent<{
398
400
  };
399
401
  }, {
400
402
  rootContext: DialogRootContext;
401
- customElement: vue.Ref<vue.ComponentPublicInstance | undefined>;
403
+ forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
402
404
  }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
403
405
  readonly asChild: {
404
406
  readonly type: PropType<boolean>;
@@ -160,6 +160,7 @@ declare const DestylerDialogContent: vue.DefineComponent<{
160
160
  }, {
161
161
  rootContext: DialogRootContext;
162
162
  emitsAsProps: Record<string, any>;
163
+ forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
163
164
  }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("openAutoFocus" | "closeAutoFocus" | "escapeKeyDown" | "pointerDownOutside" | "focusOutside" | "interactOutside" | "dismiss")[], "openAutoFocus" | "closeAutoFocus" | "escapeKeyDown" | "pointerDownOutside" | "focusOutside" | "interactOutside" | "dismiss", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
164
165
  readonly as: {
165
166
  readonly type: PropType<AsTag | Component>;
@@ -270,6 +271,7 @@ declare const DestylerDialogOverlay: vue.DefineComponent<{
270
271
  };
271
272
  }, {
272
273
  rootContext: DialogRootContext;
274
+ forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
273
275
  }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
274
276
  readonly as: {
275
277
  readonly type: PropType<AsTag | Component>;
@@ -398,7 +400,7 @@ declare const DestylerDialogTrigger: vue.DefineComponent<{
398
400
  };
399
401
  }, {
400
402
  rootContext: DialogRootContext;
401
- customElement: vue.Ref<vue.ComponentPublicInstance | undefined>;
403
+ forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
402
404
  }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
403
405
  readonly asChild: {
404
406
  readonly type: PropType<boolean>;
@@ -160,6 +160,7 @@ declare const DestylerDialogContent: vue.DefineComponent<{
160
160
  }, {
161
161
  rootContext: DialogRootContext;
162
162
  emitsAsProps: Record<string, any>;
163
+ forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
163
164
  }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("openAutoFocus" | "closeAutoFocus" | "escapeKeyDown" | "pointerDownOutside" | "focusOutside" | "interactOutside" | "dismiss")[], "openAutoFocus" | "closeAutoFocus" | "escapeKeyDown" | "pointerDownOutside" | "focusOutside" | "interactOutside" | "dismiss", vue.PublicProps, Readonly<vue.ExtractPropTypes<{
164
165
  readonly as: {
165
166
  readonly type: PropType<AsTag | Component>;
@@ -270,6 +271,7 @@ declare const DestylerDialogOverlay: vue.DefineComponent<{
270
271
  };
271
272
  }, {
272
273
  rootContext: DialogRootContext;
274
+ forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
273
275
  }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
274
276
  readonly as: {
275
277
  readonly type: PropType<AsTag | Component>;
@@ -398,7 +400,7 @@ declare const DestylerDialogTrigger: vue.DefineComponent<{
398
400
  };
399
401
  }, {
400
402
  rootContext: DialogRootContext;
401
- customElement: vue.Ref<vue.ComponentPublicInstance | undefined>;
403
+ forwardRef: (ref: Element | vue.ComponentPublicInstance | null) => void;
402
404
  }, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
403
405
  readonly asChild: {
404
406
  readonly type: PropType<boolean>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@destyler/dialog",
3
- "version": "0.0.1-beta.13",
3
+ "version": "0.0.1-beta.14",
4
4
  "description": "unstyled dialog component for vue",
5
5
  "author": "Elone Hoo <elonehoo@gmail.com>",
6
6
  "license": "MIT",
@@ -33,14 +33,14 @@
33
33
  "vue": ">=3.3.4"
34
34
  },
35
35
  "dependencies": {
36
- "@destyler/composition": "0.0.1-beta.13",
37
- "@destyler/directives": "0.0.1-beta.13",
38
- "@destyler/focus-scope": "0.0.1-beta.13",
39
- "@destyler/shared": "0.0.1-beta.13",
40
- "@destyler/primitive": "0.0.1-beta.13",
41
- "@destyler/presence": "0.0.1-beta.13",
42
- "@destyler/dismissable-layer": "0.0.1-beta.13",
43
- "@destyler/teleport": "0.0.1-beta.13"
36
+ "@destyler/composition": "0.0.1-beta.14",
37
+ "@destyler/dismissable-layer": "0.0.1-beta.14",
38
+ "@destyler/primitive": "0.0.1-beta.14",
39
+ "@destyler/shared": "0.0.1-beta.14",
40
+ "@destyler/teleport": "0.0.1-beta.14",
41
+ "@destyler/focus-scope": "0.0.1-beta.14",
42
+ "@destyler/directives": "0.0.1-beta.14",
43
+ "@destyler/presence": "0.0.1-beta.14"
44
44
  },
45
45
  "scripts": {
46
46
  "clear": "rimraf ./dist",