@destyler/dialog 0.0.1-beta.10

package/dist/component.cjs

@@ -0,0 +1,518 @@
+'use strict';
+
+const vue = require('vue');
+const primitive = require('@destyler/primitive');
+const shared = require('@destyler/shared');
+const composition = require('@destyler/composition');
+const presence = require('@destyler/presence');
+const focusScope = require('@destyler/focus-scope');
+const dismissableLayer = require('@destyler/dismissable-layer');
+const directives = require('@destyler/directives');
+const teleport = require('@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] = shared.createContext("DestylerDialogRoot");
+const DestylerDialogRoot = vue.defineComponent({
+  name: "DestylerDialogRoot",
+  props: destylerDialogRootProps,
+  emits: ["update:open"],
+  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: composition.useId(),
+      titleId: composition.useId(),
+      descriptionId: composition.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 = vue.defineComponent({
+  name: "DestylerDialogClose",
+  props: destylerDialogCloseProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$props, {
+      type: this.$props.as === "button" ? "button" : void 0,
+      onClick: () => {
+        this.rootContext.onOpenChange(false);
+      }
+    }), 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 = vue.defineComponent({
+  name: "DestylerDialogContentImpl",
+  props: destylerDialogContentImplProps,
+  emits: ["openAutoFocus", "closeAutoFocus", "escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  setup() {
+    const rootContext = injectDialogRootContext();
+    const { customElement, currentElement: contentElement } = composition.useCustomElement();
+    vue.onMounted(() => {
+      rootContext.contentElement = contentElement;
+    });
+    return {
+      rootContext,
+      customElement
+    };
+  },
+  render() {
+    return vue.h(focusScope.DestylerFocusScope, {
+      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.DestylerDismissableLayer, {
+      ...this.$attrs,
+      "ref": "customElement",
+      "as": this.$props.as,
+      "asChild": this.$props.asChild,
+      "role": "dialog",
+      "aria-describedby": this.rootContext.descriptionId,
+      "aria-labelledby": this.rootContext.titleId,
+      "data-state": shared.getOpenState(this.rootContext.open.value),
+      "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 DestylerDialogContentModal = vue.defineComponent({
+  name: "DestylerDialogContentModal",
+  props: destylerDialogContentImplProps,
+  emits: ["openAutoFocus", "closeAutoFocus", "escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  setup(_, { emit }) {
+    const rootContext = injectDialogRootContext();
+    const emitsAsProps = composition.useEmitAsProps(emit);
+    const { customElement, currentElement } = composition.useCustomElement();
+    composition.useHideOthers(currentElement);
+    return {
+      rootContext,
+      emitsAsProps,
+      customElement
+    };
+  },
+  render() {
+    return vue.h(DestylerDialogContentImpl, vue.mergeProps(this.$props, this.emitsAsProps, {
+      "ref": "customElement",
+      "trap-focus": this.rootContext.open.value,
+      "disable-outside-pointer-events": 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 DestylerDialogContentNonModal = vue.defineComponent({
+  name: "DestylerDialogContentNonModal",
+  props: destylerDialogContentImplProps,
+  emits: ["openAutoFocus", "closeAutoFocus", "escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  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(DestylerDialogContentImpl, vue.mergeProps(this.$props, this.emitsAsProps, {
+      "trap-focus": false,
+      "disable-outside-pointer-events": 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 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 = vue.defineComponent({
+  name: "DestylerDialogContent",
+  props: destylerDialogContentProps,
+  emits: ["openAutoFocus", "closeAutoFocus", "escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  setup(_, { emit }) {
+    const rootContext = injectDialogRootContext();
+    const emitsAsProps = composition.useEmitAsProps(emit);
+    return {
+      rootContext,
+      emitsAsProps
+    };
+  },
+  render() {
+    const useVShow = this.rootContext.modal.value;
+    return vue.h(presence.DestylerPresence, {
+      present: this.$props.forceMount || this.rootContext.open.value
+    }, [
+      useVShow ? vue.h(DestylerDialogContentModal, vue.mergeProps(this.$props, this.emitsAsProps, this.$attrs, {
+        onOpenAutoFocus: (event) => {
+          this.$emit("openAutoFocus", event);
+        }
+      }), this.$slots.default?.()) : vue.h(DestylerDialogContentNonModal, vue.mergeProps(this.$props, this.emitsAsProps, this.$attrs), this.$slots.default?.())
+    ]);
+  }
+});
+
+const destylerDialogDescriptionProps = {
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "p"
+  }
+};
+const DestylerDialogDescription = vue.defineComponent({
+  name: "DestylerDialogDescription",
+  props: destylerDialogDescriptionProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return vue.withDirectives(vue.h(primitive.DestylerPrimitive, {
+      as: this.$props.as,
+      asChild: this.$props.asChild
+    }, this.$slots.default?.()), [
+      [directives.BindOnceDirective, { id: this.rootContext.descriptionId }]
+    ]);
+  }
+});
+
+const destylerDialogOverlayImplProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "div"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerDialogOverlayImpl = vue.defineComponent({
+  name: "DestylerDialogOverlayImpl",
+  props: destylerDialogOverlayImplProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return vue.h(primitive.DestylerPrimitive, {
+      "as": this.$props.as,
+      "asChild": this.$props.asChild,
+      "data-state": this.rootContext.open.value ? "open" : "closed",
+      "style": {
+        "pointer-events": "auto"
+      }
+    }, 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 = vue.defineComponent({
+  name: "DestylerDialogOverlay",
+  props: destylerDialogOverlayProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    const useVShow = this.rootContext?.modal.value;
+    return useVShow ? vue.h(presence.DestylerPresence, {
+      present: this.$props.forceMount || this.rootContext.open.value
+    }, vue.h(DestylerDialogOverlayImpl, vue.mergeProps(this.$attrs, {
+      as: this.$props.as,
+      asChild: this.$props.asChild
+    }), this.$slots.default?.())) : null;
+  }
+});
+
+const destylerDialogPortalProps = {
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "div"
+  },
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  }
+};
+const DestylerDialogPortal = vue.defineComponent({
+  name: "DestylerDialogPortal",
+  props: destylerDialogPortalProps,
+  render() {
+    return vue.h(teleport.DestylerTeleport, {}, this.$slots.default?.());
+  }
+});
+
+const destylerDialogTitleProps = {
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "h2"
+  }
+};
+const DestylerDialogTitle = vue.defineComponent({
+  name: "DestylerDialogTitle",
+  props: destylerDialogTitleProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return vue.withDirectives(vue.h(primitive.DestylerPrimitive, {
+      as: this.$props.as,
+      asChild: this.$props.asChild
+    }, this.$slots.default?.()), [
+      [directives.BindOnceDirective, { id: this.rootContext.titleId }]
+    ]);
+  }
+});
+
+const destylerDialogTriggerProps = {
+  asChild: {
+    type: Boolean,
+    required: false,
+    default: false
+  },
+  as: {
+    type: [String, Object],
+    required: false,
+    default: "button"
+  }
+};
+const DestylerDialogTrigger = vue.defineComponent({
+  name: "DestylerDialogTrigger",
+  props: destylerDialogTriggerProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    const { customElement, currentElement } = composition.useCustomElement();
+    vue.onMounted(() => {
+      rootContext.triggerElement = currentElement;
+    });
+    return {
+      rootContext,
+      customElement
+    };
+  },
+  render() {
+    return vue.h(primitive.DestylerPrimitive, vue.mergeProps(this.$attrs, {
+      "as": this.$props.as,
+      "asChild": this.$props.asChild,
+      "ref": "customElement",
+      "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();
+      }
+    }), this.$slots.default?.());
+  }
+});
+
+exports.DestylerDialogClose = DestylerDialogClose;
+exports.DestylerDialogContent = DestylerDialogContent;
+exports.DestylerDialogContentImpl = DestylerDialogContentImpl;
+exports.DestylerDialogContentModal = DestylerDialogContentModal;
+exports.DestylerDialogContentNonModal = DestylerDialogContentNonModal;
+exports.DestylerDialogDescription = DestylerDialogDescription;
+exports.DestylerDialogOverlay = DestylerDialogOverlay;
+exports.DestylerDialogOverlayImpl = DestylerDialogOverlayImpl;
+exports.DestylerDialogPortal = DestylerDialogPortal;
+exports.DestylerDialogRoot = DestylerDialogRoot;
+exports.DestylerDialogTitle = DestylerDialogTitle;
+exports.DestylerDialogTrigger = DestylerDialogTrigger;