@destyler/dialog 0.0.1-beta.9 → 0.0.2

package/dist/component.mjs

@@ -0,0 +1,537 @@
+import { defineComponent, ref, toRefs, h, mergeProps, onMounted, withDirectives } from 'vue';
+import { DestylerPrimitive } from '@destyler/primitive';
+import { createContext, getOpenState } from '@destyler/shared';
+import { useVModel, useId, useForwardExpose, useEmitAsProps, useHideOthers } from '@destyler/composition';
+import { DestylerPresence } from '@destyler/presence';
+import { DestylerFocusScope } from '@destyler/focus-scope';
+import { DestylerDismissableLayer } from '@destyler/dismissable-layer';
+import { BindOnceDirective } from '@destyler/directives';
+import { DestylerTeleport } from '@destyler/teleport';
+
+const destylerDialogRootProps = {
+  open: {
+    type: Boolean,
+    required: false,
+    default: void 0
+  },
+  defaultOpen: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  modal: {
+    type: Boolean,
+    required: false,
+    default: true
+  }
+};
+const [injectDialogRootContext, provideDialogRootContext] = createContext("DestylerDialogRoot");
+const DestylerDialogRoot = defineComponent({
+  name: "DestylerDialogRoot",
+  props: destylerDialogRootProps,
+  emits: ["update:open"],
+  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: useId(),
+      titleId: useId(),
+      descriptionId: useId(),
+      triggerElement,
+      contentElement
+    });
+  },
+  render() {
+    return this.$slots.default?.();
+  }
+});
+
+const destylerDialogCloseProps = {
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "button"
+  }
+};
+const DestylerDialogClose = defineComponent({
+  name: "DestylerDialogClose",
+  props: destylerDialogCloseProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return h(DestylerPrimitive, mergeProps(this.$props, {
+      type: this.$props.as === "button" ? "button" : void 0,
+      onClick: () => {
+        this.rootContext.onOpenChange(false);
+      }
+    }), {
+      default: () => this.$slots.default?.()
+    });
+  }
+});
+
+const destylerDialogContentImplProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "div"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  forceMount: {
+    type: Boolean,
+    required: false
+  },
+  trapFocus: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerDialogContentImpl = defineComponent({
+  name: "DestylerDialogContentImpl",
+  props: destylerDialogContentImplProps,
+  emits: ["openAutoFocus", "closeAutoFocus", "escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  setup() {
+    const rootContext = injectDialogRootContext();
+    const { forwardRef, currentElement: contentElement } = useForwardExpose();
+    onMounted(() => {
+      rootContext.contentElement = contentElement;
+    });
+    return {
+      rootContext,
+      forwardRef
+    };
+  },
+  render() {
+    return h(DestylerFocusScope, {
+      asChild: true,
+      loop: true,
+      trapped: this.$props.trapFocus,
+      onMountAutoFocus: (event) => {
+        this.$emit("openAutoFocus", event);
+      },
+      onUnmountAutoFocus: (event) => {
+        this.$emit("closeAutoFocus", event);
+      }
+    }, withDirectives(h(DestylerDismissableLayer, mergeProps(this.$attrs, {
+      "ref": (el) => this.forwardRef(el),
+      "as": this.$props.as,
+      "asChild": this.$props.asChild,
+      "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);
+      }
+    }), {
+      default: () => this.$slots.default?.()
+    }), [
+      [BindOnceDirective, { id: this.rootContext.contentId }]
+    ]));
+  }
+});
+
+const DestylerDialogContentModal = defineComponent({
+  name: "DestylerDialogContentModal",
+  props: destylerDialogContentImplProps,
+  emits: ["openAutoFocus", "closeAutoFocus", "escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  setup(_, { emit }) {
+    const rootContext = injectDialogRootContext();
+    const emitsAsProps = useEmitAsProps(emit);
+    const { forwardRef, currentElement } = useForwardExpose();
+    useHideOthers(currentElement);
+    return {
+      rootContext,
+      emitsAsProps,
+      forwardRef
+    };
+  },
+  render() {
+    return h(DestylerDialogContentImpl, 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);
+      }
+    }), {
+      default: () => this.$slots.default?.()
+    });
+  }
+});
+
+const DestylerDialogContentNonModal = defineComponent({
+  name: "DestylerDialogContentNonModal",
+  props: destylerDialogContentImplProps,
+  emits: ["openAutoFocus", "closeAutoFocus", "escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  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(DestylerDialogContentImpl, 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();
+      }
+    }), {
+      default: () => this.$slots.default?.()
+    });
+  }
+});
+
+const destylerDialogContentProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "div"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  forceMount: {
+    type: Boolean,
+    required: false
+  },
+  trapFocus: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerDialogContent = defineComponent({
+  name: "DestylerDialogContent",
+  props: destylerDialogContentProps,
+  emits: ["openAutoFocus", "closeAutoFocus", "escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  setup(_, { emit }) {
+    const rootContext = injectDialogRootContext();
+    const emitsAsProps = useEmitAsProps(emit);
+    const { forwardRef } = useForwardExpose();
+    return {
+      rootContext,
+      emitsAsProps,
+      forwardRef
+    };
+  },
+  render() {
+    const useVShow = this.rootContext.modal.value;
+    return h(DestylerPresence, {
+      present: this.$props.forceMount || this.rootContext.open.value
+    }, [
+      useVShow ? h(DestylerDialogContentModal, mergeProps(this.$props, this.emitsAsProps, this.$attrs, {
+        ref: (el) => this.forwardRef(el),
+        onOpenAutoFocus: (event) => {
+          this.$emit("openAutoFocus", event);
+        }
+      }), {
+        default: () => this.$slots.default?.()
+      }) : h(DestylerDialogContentNonModal, mergeProps(this.$props, this.emitsAsProps, this.$attrs), {
+        ref: (el) => this.forwardRef(el),
+        default: () => this.$slots.default?.()
+      })
+    ]);
+  }
+});
+
+const destylerDialogDescriptionProps = {
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "p"
+  }
+};
+const DestylerDialogDescription = defineComponent({
+  name: "DestylerDialogDescription",
+  props: destylerDialogDescriptionProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return withDirectives(h(DestylerPrimitive, {
+      as: this.$props.as,
+      asChild: this.$props.asChild
+    }, {
+      default: () => this.$slots.default?.()
+    }), [
+      [BindOnceDirective, { id: this.rootContext.descriptionId }]
+    ]);
+  }
+});
+
+const destylerDialogOverlayImplProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "div"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerDialogOverlayImpl = defineComponent({
+  name: "DestylerDialogOverlayImpl",
+  props: destylerDialogOverlayImplProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    useForwardExpose();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return h(DestylerPrimitive, {
+      "as": this.$props.as,
+      "asChild": this.$props.asChild,
+      "data-state": this.rootContext.open.value ? "open" : "closed",
+      "style": {
+        "pointer-events": "auto"
+      }
+    }, {
+      default: () => this.$slots.default?.()
+    });
+  }
+});
+
+const destylerDialogOverlayProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "div"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  forceMount: {
+    type: Boolean,
+    required: false
+  }
+};
+const DestylerDialogOverlay = defineComponent({
+  name: "DestylerDialogOverlay",
+  props: destylerDialogOverlayProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    const { forwardRef } = useForwardExpose();
+    return {
+      rootContext,
+      forwardRef
+    };
+  },
+  render() {
+    const useVShow = this.rootContext?.modal.value;
+    return useVShow ? h(DestylerPresence, {
+      present: this.$props.forceMount || this.rootContext.open.value
+    }, h(DestylerDialogOverlayImpl, mergeProps(this.$attrs, {
+      ref: (el) => this.forwardRef(el),
+      as: this.$props.as,
+      asChild: this.$props.asChild
+    }), {
+      default: () => this.$slots.default?.()
+    })) : null;
+  }
+});
+
+const destylerDialogPortalProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "div"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerDialogPortal = defineComponent({
+  name: "DestylerDialogPortal",
+  props: destylerDialogPortalProps,
+  render() {
+    return h(DestylerTeleport, {}, {
+      default: () => this.$slots.default?.()
+    });
+  }
+});
+
+const destylerDialogTitleProps = {
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "h2"
+  }
+};
+const DestylerDialogTitle = defineComponent({
+  name: "DestylerDialogTitle",
+  props: destylerDialogTitleProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return withDirectives(h(DestylerPrimitive, {
+      as: this.$props.as,
+      asChild: this.$props.asChild
+    }, {
+      default: () => this.$slots.default?.()
+    }), [
+      [BindOnceDirective, { id: this.rootContext.titleId }]
+    ]);
+  }
+});
+
+const destylerDialogTriggerProps = {
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "button"
+  }
+};
+const DestylerDialogTrigger = defineComponent({
+  name: "DestylerDialogTrigger",
+  props: destylerDialogTriggerProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    const { forwardRef, currentElement } = useForwardExpose();
+    onMounted(() => {
+      rootContext.triggerElement = currentElement;
+    });
+    return {
+      rootContext,
+      forwardRef
+    };
+  },
+  render() {
+    return h(DestylerPrimitive, mergeProps(this.$attrs, {
+      "as": this.$props.as,
+      "asChild": this.$props.asChild,
+      "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.contentId,
+      "data-state": this.rootContext.open.value ? "open" : "closed",
+      "onClick": () => {
+        this.rootContext.onOpenToggle();
+      }
+    }), {
+      default: () => this.$slots.default?.()
+    });
+  }
+});
+
+export { DestylerDialogClose, DestylerDialogContent, DestylerDialogContentImpl, DestylerDialogContentModal, DestylerDialogContentNonModal, DestylerDialogDescription, DestylerDialogOverlay, DestylerDialogOverlayImpl, DestylerDialogPortal, DestylerDialogRoot, DestylerDialogTitle, DestylerDialogTrigger };