@destyler/dialog 0.0.2 → 0.0.4

package/dist/shared/dialog.d09a7a95.cjs

@@ -0,0 +1,540 @@
+'use strict';
+
+const vue = require('vue');
+const primitive = require('@destyler/primitive');
+const composition = require('@destyler/composition');
+const shared = require('@destyler/shared');
+const presence = require('@destyler/presence');
+const focusScope = require('@destyler/focus-scope');
+const dismissableLayer = require('@destyler/dismissable-layer');
+const component = require('@destyler/dismissable-layer/component');
+const directives = require('@destyler/directives');
+const teleport = require('@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] = shared.createContext("DestylerDialogRoot");
+const dialogRootEmits = {
+  /**
+   * Event handler called when the open state of the dialog changes.
+   */
+  "update:open": (_value) => true
+};
+const DialogRoot = vue.defineComponent({
+  name: "DestylerDialogRoot",
+  props: dialogRootProps,
+  emits: dialogRootEmits,
+  setup(props, { emit }) {
+    const open = composition.useVModel(props, "open", emit, {
+      defaultValue: props.defaultOpen,
+      passive: props.open === void 0
+    });
+    const triggerElement = vue.ref();
+    const contentElement = vue.ref();
+    const { modal } = vue.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 = {
+  ...primitive.primitiveProps,
+  /**
+   * @default button
+   */
+  as: {
+    ...primitive.primitiveProps.as,
+    default: "button"
+  }
+};
+const DialogClose = vue.defineComponent({
+  name: "DestylerDialogClose",
+  props: dialogCloseProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    composition.useForwardExpose();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return vue.h(primitive.Primitive, vue.mergeProps(this.$props, {
+      type: this.$props.as === "button" ? "button" : void 0,
+      onClick: () => {
+        this.rootContext.onOpenChange(false);
+      }
+    }), () => this.$slots.default?.());
+  }
+});
+
+const dialogContentImplProps = {
+  ...component.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 = {
+  ...component.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 = vue.defineComponent({
+  name: "DestylerDialogContentImpl",
+  props: dialogContentImplProps,
+  emits: dialogContentImplEmtis,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    const { forwardRef, currentElement: contentElement } = composition.useForwardExpose();
+    rootContext.titleId || (rootContext.titleId = composition.useId(void 0, "destyler-dialog-title"));
+    rootContext.descriptionId || (rootContext.descriptionId = composition.useId(void 0, "destyler-dialog-description"));
+    vue.onMounted(() => {
+      rootContext.contentElement = contentElement;
+    });
+    return {
+      rootContext,
+      forwardRef
+    };
+  },
+  render() {
+    return vue.h(focusScope.FocusScope, {
+      asChild: true,
+      loop: true,
+      trapped: this.$props.trapFocus,
+      onMountAutoFocus: (event) => {
+        this.$emit("openAutoFocus", event);
+      },
+      onUnmountAutoFocus: (event) => {
+        this.$emit("closeAutoFocus", event);
+      }
+    }, () => vue.withDirectives(vue.h(dismissableLayer.DismissableLayer, vue.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": shared.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?.()), [
+      [directives.BindOnceDirective, { id: this.rootContext.contentId }]
+    ]));
+  }
+});
+
+const DialogContentModal = vue.defineComponent({
+  name: "DestylerDialogContentModal",
+  props: dialogContentImplProps,
+  emits: dialogContentImplEmtis,
+  setup(_, { emit }) {
+    const rootContext = injectDialogRootContext();
+    const emitsAsProps = composition.useEmitAsProps(emit);
+    const { forwardRef, currentElement } = composition.useForwardExpose();
+    composition.useHideOthers(currentElement);
+    return {
+      rootContext,
+      emitsAsProps,
+      forwardRef
+    };
+  },
+  render() {
+    return vue.h(DialogContentImpl, vue.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 = vue.defineComponent({
+  name: "DestylerDialogContentNonModal",
+  props: dialogContentImplProps,
+  emits: dialogContentImplEmtis,
+  setup(_, { emit }) {
+    const rootContext = injectDialogRootContext();
+    const hasInteractedOutsideRef = vue.ref(false);
+    const hasPointerDownOutsideRef = vue.ref(false);
+    const emitsAsProps = composition.useEmitAsProps(emit);
+    return {
+      rootContext,
+      hasInteractedOutsideRef,
+      hasPointerDownOutsideRef,
+      emitsAsProps
+    };
+  },
+  render() {
+    return vue.h(DialogContentImpl, vue.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 = vue.defineComponent({
+  name: "DestylerDialogContent",
+  props: dialogContentProps,
+  emits: dialogContentEmits,
+  setup(_, { emit }) {
+    const rootContext = injectDialogRootContext();
+    const emitsAsProps = composition.useEmitAsProps(emit);
+    const { forwardRef } = composition.useForwardExpose();
+    return {
+      rootContext,
+      emitsAsProps,
+      forwardRef
+    };
+  },
+  render() {
+    const useVShow = this.$props.forceMount || this.rootContext.modal.value;
+    return vue.h(presence.Presence, {
+      present: this.$props.forceMount || this.rootContext.open.value
+    }, () => [
+      useVShow ? vue.h(DialogContentModal, vue.mergeProps(this.$props, this.emitsAsProps, this.$attrs, {
+        ref: (el) => this.forwardRef(el),
+        onOpenAutoFocus: (event) => {
+          this.$emit("openAutoFocus", event);
+        }
+      }), () => this.$slots.default?.()) : vue.h(DialogContentNonModal, vue.mergeProps(this.$props, this.emitsAsProps, this.$attrs, {
+        ref: (el) => this.forwardRef(el)
+      }), () => this.$slots.default?.())
+    ]);
+  }
+});
+
+const dialogDescriptionProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default p
+   */
+  as: {
+    ...primitive.primitiveProps.as,
+    default: "p"
+  }
+};
+const DialogDescription = vue.defineComponent({
+  name: "DestylerDialogDescription",
+  props: dialogDescriptionProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    composition.useForwardExpose();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return vue.withDirectives(vue.h(primitive.Primitive, {
+      as: this.$props.as,
+      asChild: this.$props.asChild
+    }, () => this.$slots.default?.()), [
+      [directives.BindOnceDirective, { id: this.rootContext.descriptionId }]
+    ]);
+  }
+});
+
+const dialogOverlayImplProps = {
+  ...primitive.primitiveProps
+};
+const DialogOverlayImpl = vue.defineComponent({
+  name: "DestylerDialogOverlayImpl",
+  props: dialogOverlayImplProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    composition.useForwardExpose();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return vue.h(primitive.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 = {
+  ...primitive.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 = vue.defineComponent({
+  name: "DestylerDialogOverlay",
+  props: dialogOverlayProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    const { forwardRef } = composition.useForwardExpose();
+    return {
+      rootContext,
+      forwardRef
+    };
+  },
+  render() {
+    const useVShow = this.rootContext?.modal.value;
+    return useVShow ? vue.h(presence.Presence, {
+      present: this.$props.forceMount || this.rootContext.open.value
+    }, () => vue.h(DialogOverlayImpl, vue.mergeProps(this.$attrs, {
+      ref: (el) => this.forwardRef(el),
+      as: this.$props.as,
+      asChild: this.$props.asChild
+    }), () => this.$slots.default?.())) : null;
+  }
+});
+
+const dialogPortalProps = {
+  ...teleport.teleportPrimitiveProps
+};
+const DialogPortal = vue.defineComponent({
+  name: "DestylerDialogPortal",
+  props: dialogPortalProps,
+  render() {
+    return vue.h(teleport.TeleportPrimitive, vue.mergeProps(this.$props), () => this.$slots.default?.());
+  }
+});
+
+const dialogTitleProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default h2
+   */
+  as: {
+    ...primitive.primitiveProps.as,
+    default: "h2"
+  }
+};
+const DialogTitle = vue.defineComponent({
+  name: "DestylerDialogTitle",
+  props: dialogTitleProps,
+  setup() {
+    composition.useForwardExpose();
+    const rootContext = injectDialogRootContext();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return vue.withDirectives(vue.h(primitive.Primitive, {
+      as: this.$props.as,
+      asChild: this.$props.asChild
+    }, () => this.$slots.default?.()), [
+      [directives.BindOnceDirective, { id: this.rootContext.titleId }]
+    ]);
+  }
+});
+
+const dialogTriggerProps = {
+  ...primitive.primitiveProps,
+  /**
+   * @default button
+   */
+  as: {
+    ...primitive.primitiveProps.as,
+    default: "button"
+  }
+};
+const DialogTrigger = vue.defineComponent({
+  name: "DestylerDialogTrigger",
+  props: dialogTriggerProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    const { forwardRef, currentElement } = composition.useForwardExpose();
+    rootContext.contentId || (rootContext.contentId = composition.useId(void 0, "destyler-dialog-content"));
+    vue.onMounted(() => {
+      rootContext.triggerElement = currentElement;
+    });
+    return {
+      rootContext,
+      forwardRef
+    };
+  },
+  render() {
+    return vue.h(primitive.Primitive, vue.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?.());
+  }
+});
+
+exports.DialogClose = DialogClose;
+exports.DialogContent = DialogContent;
+exports.DialogContentImpl = DialogContentImpl;
+exports.DialogContentModal = DialogContentModal;
+exports.DialogContentNonModal = DialogContentNonModal;
+exports.DialogDescription = DialogDescription;
+exports.DialogOverlay = DialogOverlay;
+exports.DialogOverlayImpl = DialogOverlayImpl;
+exports.DialogPortal = DialogPortal;
+exports.DialogRoot = DialogRoot;
+exports.DialogTitle = DialogTitle;
+exports.DialogTrigger = DialogTrigger;
+exports.dialogCloseProps = dialogCloseProps;
+exports.dialogContentEmits = dialogContentEmits;
+exports.dialogContentImplEmtis = dialogContentImplEmtis;
+exports.dialogContentImplProps = dialogContentImplProps;
+exports.dialogContentProps = dialogContentProps;
+exports.dialogDescriptionProps = dialogDescriptionProps;
+exports.dialogOverlayImplProps = dialogOverlayImplProps;
+exports.dialogOverlayProps = dialogOverlayProps;
+exports.dialogPortalProps = dialogPortalProps;
+exports.dialogRootEmits = dialogRootEmits;
+exports.dialogRootProps = dialogRootProps;
+exports.dialogTitleProps = dialogTitleProps;
+exports.dialogTriggerProps = dialogTriggerProps;