@destyler/dialog 0.0.3 → 0.0.4

package/dist/resolver.mjs

@@ -2,16 +2,16 @@ const name = "@destyler/dialog";
 
 const packageName = name;
 const dialogComponentName = [
-  "DestylerDialogClose",
-  "DestylerDialogContent",
-  "DestylerDialogDescription",
-  "DestylerDialogOverlay",
-  "DestylerDialogPortal",
-  "DestylerDialogRoot",
-  "DestylerDialogTitle",
-  "DestylerDialogTrigger"
+  "DialogClose",
+  "DialogContent",
+  "DialogDescription",
+  "DialogOverlay",
+  "DialogPortal",
+  "DialogRoot",
+  "DialogTitle",
+  "DialogTrigger"
 ];
-function DestylerDialogResolver() {
+function DialogResolver() {
   return {
     type: "component",
     resolve: (name2) => {
@@ -21,4 +21,4 @@ function DestylerDialogResolver() {
   };
 }
 
-export { DestylerDialogResolver, dialogComponentName };
+export { DialogResolver, dialogComponentName };

package/dist/shared/dialog.1e7a01aa.mjs

@@ -0,0 +1,514 @@
+import { defineComponent, ref, toRefs, h, mergeProps, onMounted, withDirectives } from 'vue';
+import { primitiveProps, Primitive } from '@destyler/primitive';
+import { useVModel, useForwardExpose, useId, useEmitAsProps, useHideOthers } from '@destyler/composition';
+import { createContext, getOpenState } from '@destyler/shared';
+import { Presence } from '@destyler/presence';
+import { FocusScope } from '@destyler/focus-scope';
+import { DismissableLayer } from '@destyler/dismissable-layer';
+import { dismissableLayerProps, dismissableLayerEmits } from '@destyler/dismissable-layer/component';
+import { BindOnceDirective } from '@destyler/directives';
+import { teleportPrimitiveProps, TeleportPrimitive } from '@destyler/teleport';
+
+const dialogRootProps = {
+  /**
+   * The controlled open state of the dialog. Can be binded as `v-model:open`.
+   *
+   * @default undefined
+   */
+  open: {
+    type: Boolean,
+    required: false,
+    default: void 0
+  },
+  /**
+   * The open state of the dialog when it is initially rendered.
+   * Use when you do not need to control its open state.
+   *
+   * @default false
+   */
+  defaultOpen: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  /**
+   * The modality of the dialog When set to true,
+   * interaction with outside elements will be
+   * disabled and only dialog content will
+   * be visible to screen readers.
+   *
+   * @default true
+   */
+  modal: {
+    type: Boolean,
+    required: false,
+    default: true
+  }
+};
+const [injectDialogRootContext, provideDialogRootContext] = createContext("DestylerDialogRoot");
+const dialogRootEmits = {
+  /**
+   * Event handler called when the open state of the dialog changes.
+   */
+  "update:open": (_value) => true
+};
+const DialogRoot = defineComponent({
+  name: "DestylerDialogRoot",
+  props: dialogRootProps,
+  emits: dialogRootEmits,
+  setup(props, { emit }) {
+    const open = useVModel(props, "open", emit, {
+      defaultValue: props.defaultOpen,
+      passive: props.open === void 0
+    });
+    const triggerElement = ref();
+    const contentElement = ref();
+    const { modal } = toRefs(props);
+    provideDialogRootContext({
+      open,
+      modal,
+      openModal: () => {
+        open.value = true;
+      },
+      onOpenChange: (value) => {
+        open.value = value;
+      },
+      onOpenToggle: () => {
+        open.value = !open.value;
+      },
+      contentId: "",
+      titleId: "",
+      descriptionId: "",
+      triggerElement,
+      contentElement
+    });
+  },
+  render() {
+    return this.$slots.default?.();
+  }
+});
+
+const dialogCloseProps = {
+  ...primitiveProps,
+  /**
+   * @default button
+   */
+  as: {
+    ...primitiveProps.as,
+    default: "button"
+  }
+};
+const DialogClose = defineComponent({
+  name: "DestylerDialogClose",
+  props: dialogCloseProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    useForwardExpose();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return h(Primitive, mergeProps(this.$props, {
+      type: this.$props.as === "button" ? "button" : void 0,
+      onClick: () => {
+        this.rootContext.onOpenChange(false);
+      }
+    }), () => this.$slots.default?.());
+  }
+});
+
+const dialogContentImplProps = {
+  ...dismissableLayerProps,
+  /**
+   * Used to force mounting when more control is needed.
+   * Useful when controlling animation with Vue animation libraries.
+   *
+   * @default false
+   */
+  forceMount: {
+    type: Boolean,
+    required: false
+  },
+  /**
+   * When `true`, focus cannot escape the Content via keyboard,
+   * pointer, or a programmatic focus.
+   *
+   * @default false
+   */
+  trapFocus: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const dialogContentImplEmtis = {
+  ...dismissableLayerEmits,
+  /**
+   * Event handler called when auto-focusing on open. Can be prevented.
+   */
+  openAutoFocus: (_event) => true,
+  /**
+   * Event handler called when the a `pointerdown` event happens
+   * outside of the `DismissableLayer`. Can be prevented.
+   */
+  closeAutoFocus: (_event) => true
+};
+const DialogContentImpl = defineComponent({
+  name: "DestylerDialogContentImpl",
+  props: dialogContentImplProps,
+  emits: dialogContentImplEmtis,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    const { forwardRef, currentElement: contentElement } = useForwardExpose();
+    rootContext.titleId || (rootContext.titleId = useId(void 0, "destyler-dialog-title"));
+    rootContext.descriptionId || (rootContext.descriptionId = useId(void 0, "destyler-dialog-description"));
+    onMounted(() => {
+      rootContext.contentElement = contentElement;
+    });
+    return {
+      rootContext,
+      forwardRef
+    };
+  },
+  render() {
+    return h(FocusScope, {
+      asChild: true,
+      loop: true,
+      trapped: this.$props.trapFocus,
+      onMountAutoFocus: (event) => {
+        this.$emit("openAutoFocus", event);
+      },
+      onUnmountAutoFocus: (event) => {
+        this.$emit("closeAutoFocus", event);
+      }
+    }, () => withDirectives(h(DismissableLayer, mergeProps(this.$attrs, {
+      "ref": (el) => this.forwardRef(el),
+      "as": this.$props.as,
+      "asChild": this.$props.asChild,
+      "disableOutsidePointerEvents": this.$props.disableOutsidePointerEvents,
+      "role": "dialog",
+      "aria-describedby": this.rootContext.descriptionId,
+      "aria-labelledby": this.rootContext.titleId,
+      "data-state": getOpenState(this.rootContext.open.value),
+      "isDismissable": true,
+      "onDismiss": () => {
+        this.rootContext.onOpenChange(false);
+      },
+      "onEscapeKeyDown": (event) => {
+        this.$emit("escapeKeyDown", event);
+      },
+      "onFocusOutside": (event) => {
+        this.$emit("focusOutside", event);
+      },
+      "onInteractOutside": (event) => {
+        this.$emit("interactOutside", event);
+      },
+      "onPointerDownOutside": (event) => {
+        this.$emit("pointerDownOutside", event);
+      }
+    }), () => this.$slots.default?.()), [
+      [BindOnceDirective, { id: this.rootContext.contentId }]
+    ]));
+  }
+});
+
+const DialogContentModal = defineComponent({
+  name: "DestylerDialogContentModal",
+  props: dialogContentImplProps,
+  emits: dialogContentImplEmtis,
+  setup(_, { emit }) {
+    const rootContext = injectDialogRootContext();
+    const emitsAsProps = useEmitAsProps(emit);
+    const { forwardRef, currentElement } = useForwardExpose();
+    useHideOthers(currentElement);
+    return {
+      rootContext,
+      emitsAsProps,
+      forwardRef
+    };
+  },
+  render() {
+    return h(DialogContentImpl, mergeProps(this.$props, this.emitsAsProps, {
+      "ref": (el) => this.forwardRef(el),
+      "trap-focus": this.rootContext.open.value,
+      "disableOutsidePointerEvents": true,
+      "onCloseAutoFocus": (event) => {
+        this.$emit("closeAutoFocus", event);
+        if (!event.defaultPrevented) {
+          event.preventDefault();
+          this.rootContext.triggerElement.value?.focus();
+        }
+      },
+      "onPointerDownOutside": (event) => {
+        const originalEvent = event.detail.originalEvent;
+        const ctrlLeftClick = originalEvent.button === 0 && originalEvent.ctrlKey === true;
+        const isRightClick = originalEvent.button === 2 || ctrlLeftClick;
+        if (isRightClick)
+          event.preventDefault();
+      },
+      "onFocusOutside": (event) => {
+        event.preventDefault();
+      },
+      "onOpenAutoFocus": (event) => {
+        this.$emit("openAutoFocus", event);
+      }
+    }), () => this.$slots.default?.());
+  }
+});
+
+const DialogContentNonModal = defineComponent({
+  name: "DestylerDialogContentNonModal",
+  props: dialogContentImplProps,
+  emits: dialogContentImplEmtis,
+  setup(_, { emit }) {
+    const rootContext = injectDialogRootContext();
+    const hasInteractedOutsideRef = ref(false);
+    const hasPointerDownOutsideRef = ref(false);
+    const emitsAsProps = useEmitAsProps(emit);
+    return {
+      rootContext,
+      hasInteractedOutsideRef,
+      hasPointerDownOutsideRef,
+      emitsAsProps
+    };
+  },
+  render() {
+    return h(DialogContentImpl, mergeProps(this.$props, this.emitsAsProps, {
+      "trap-focus": false,
+      "disableOutsidePointerEvents": false,
+      "onCloseAutoFocus": (event) => {
+        this.$emit("closeAutoFocus", event);
+        if (!event.defaultPrevented) {
+          if (!this.hasInteractedOutsideRef)
+            this.rootContext.triggerElement.value?.focus();
+          event.preventDefault();
+        }
+        this.hasInteractedOutsideRef = false;
+        this.hasPointerDownOutsideRef = false;
+      },
+      "onInteractOutside": (event) => {
+        if (!event.defaultPrevented) {
+          this.hasInteractedOutsideRef = true;
+          if (event.detail.originalEvent.type === "pointerdown")
+            this.hasPointerDownOutsideRef = true;
+        }
+        const target = event.target;
+        const targetIsTrigger = this.rootContext.triggerElement.value?.contains(target);
+        if (targetIsTrigger)
+          event.preventDefault();
+        if (event.detail.originalEvent.type === "focusin" && this.hasPointerDownOutsideRef)
+          event.preventDefault();
+      }
+    }), () => this.$slots.default?.());
+  }
+});
+
+const dialogContentProps = {
+  ...dialogContentImplProps
+};
+const dialogContentEmits = {
+  ...dialogContentImplEmtis
+};
+const DialogContent = defineComponent({
+  name: "DestylerDialogContent",
+  props: dialogContentProps,
+  emits: dialogContentEmits,
+  setup(_, { emit }) {
+    const rootContext = injectDialogRootContext();
+    const emitsAsProps = useEmitAsProps(emit);
+    const { forwardRef } = useForwardExpose();
+    return {
+      rootContext,
+      emitsAsProps,
+      forwardRef
+    };
+  },
+  render() {
+    const useVShow = this.$props.forceMount || this.rootContext.modal.value;
+    return h(Presence, {
+      present: this.$props.forceMount || this.rootContext.open.value
+    }, () => [
+      useVShow ? h(DialogContentModal, mergeProps(this.$props, this.emitsAsProps, this.$attrs, {
+        ref: (el) => this.forwardRef(el),
+        onOpenAutoFocus: (event) => {
+          this.$emit("openAutoFocus", event);
+        }
+      }), () => this.$slots.default?.()) : h(DialogContentNonModal, mergeProps(this.$props, this.emitsAsProps, this.$attrs, {
+        ref: (el) => this.forwardRef(el)
+      }), () => this.$slots.default?.())
+    ]);
+  }
+});
+
+const dialogDescriptionProps = {
+  ...primitiveProps,
+  /**
+   * @default p
+   */
+  as: {
+    ...primitiveProps.as,
+    default: "p"
+  }
+};
+const DialogDescription = defineComponent({
+  name: "DestylerDialogDescription",
+  props: dialogDescriptionProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    useForwardExpose();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return withDirectives(h(Primitive, {
+      as: this.$props.as,
+      asChild: this.$props.asChild
+    }, () => this.$slots.default?.()), [
+      [BindOnceDirective, { id: this.rootContext.descriptionId }]
+    ]);
+  }
+});
+
+const dialogOverlayImplProps = {
+  ...primitiveProps
+};
+const DialogOverlayImpl = defineComponent({
+  name: "DestylerDialogOverlayImpl",
+  props: dialogOverlayImplProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    useForwardExpose();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return h(Primitive, {
+      "as": this.$props.as,
+      "asChild": this.$props.asChild,
+      "data-state": this.rootContext.open.value ? "open" : "closed",
+      "style": {
+        "pointer-events": "auto"
+      }
+    }, () => this.$slots.default?.());
+  }
+});
+
+const dialogOverlayProps = {
+  ...primitiveProps,
+  /**
+   * Used to force mounting when more control is needed.
+   * Useful when controlling animation with Vue animation libraries.
+   */
+  forceMount: {
+    type: Boolean,
+    required: false
+  }
+};
+const DialogOverlay = defineComponent({
+  name: "DestylerDialogOverlay",
+  props: dialogOverlayProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    const { forwardRef } = useForwardExpose();
+    return {
+      rootContext,
+      forwardRef
+    };
+  },
+  render() {
+    const useVShow = this.rootContext?.modal.value;
+    return useVShow ? h(Presence, {
+      present: this.$props.forceMount || this.rootContext.open.value
+    }, () => h(DialogOverlayImpl, mergeProps(this.$attrs, {
+      ref: (el) => this.forwardRef(el),
+      as: this.$props.as,
+      asChild: this.$props.asChild
+    }), () => this.$slots.default?.())) : null;
+  }
+});
+
+const dialogPortalProps = {
+  ...teleportPrimitiveProps
+};
+const DialogPortal = defineComponent({
+  name: "DestylerDialogPortal",
+  props: dialogPortalProps,
+  render() {
+    return h(TeleportPrimitive, mergeProps(this.$props), () => this.$slots.default?.());
+  }
+});
+
+const dialogTitleProps = {
+  ...primitiveProps,
+  /**
+   * @default h2
+   */
+  as: {
+    ...primitiveProps.as,
+    default: "h2"
+  }
+};
+const DialogTitle = defineComponent({
+  name: "DestylerDialogTitle",
+  props: dialogTitleProps,
+  setup() {
+    useForwardExpose();
+    const rootContext = injectDialogRootContext();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return withDirectives(h(Primitive, {
+      as: this.$props.as,
+      asChild: this.$props.asChild
+    }, () => this.$slots.default?.()), [
+      [BindOnceDirective, { id: this.rootContext.titleId }]
+    ]);
+  }
+});
+
+const dialogTriggerProps = {
+  ...primitiveProps,
+  /**
+   * @default button
+   */
+  as: {
+    ...primitiveProps.as,
+    default: "button"
+  }
+};
+const DialogTrigger = defineComponent({
+  name: "DestylerDialogTrigger",
+  props: dialogTriggerProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    const { forwardRef, currentElement } = useForwardExpose();
+    rootContext.contentId || (rootContext.contentId = useId(void 0, "destyler-dialog-content"));
+    onMounted(() => {
+      rootContext.triggerElement = currentElement;
+    });
+    return {
+      rootContext,
+      forwardRef
+    };
+  },
+  render() {
+    return h(Primitive, mergeProps(this.$attrs, this.$props, {
+      "ref": (el) => this.forwardRef(el),
+      "type": this.$props.as === "button" ? "button" : void 0,
+      "aria-haspopup": "dialog",
+      "aria-expanded": this.rootContext.open.value || false,
+      "aria-controls": this.rootContext.open.value ? this.rootContext.contentId : void 0,
+      "data-state": this.rootContext.open.value ? "open" : "closed",
+      "onClick": () => {
+        this.rootContext.onOpenToggle();
+      }
+    }), () => this.$slots.default?.());
+  }
+});
+
+export { DialogClose as D, DialogContent as a, dialogContentProps as b, DialogDescription as c, dialogCloseProps as d, dialogDescriptionProps as e, DialogOverlay as f, dialogOverlayProps as g, DialogPortal as h, dialogPortalProps as i, DialogRoot as j, dialogRootProps as k, DialogTitle as l, dialogTitleProps as m, DialogTrigger as n, dialogTriggerProps as o, dialogContentEmits as p, DialogContentImpl as q, dialogContentImplEmtis as r, dialogContentImplProps as s, DialogContentModal as t, DialogContentNonModal as u, DialogOverlayImpl as v, dialogOverlayImplProps as w, dialogRootEmits as x };