@destyler/dialog 0.0.1-beta.9 → 0.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023-PRESENT Elone Hoo
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/component.cjs

@@ -0,0 +1,550 @@
+'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);
+      }
+    }), {
+      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 = vue.defineComponent({
+  name: "DestylerDialogContentImpl",
+  props: destylerDialogContentImplProps,
+  emits: ["openAutoFocus", "closeAutoFocus", "escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  setup() {
+    const rootContext = injectDialogRootContext();
+    const { forwardRef, currentElement: contentElement } = composition.useForwardExpose();
+    vue.onMounted(() => {
+      rootContext.contentElement = contentElement;
+    });
+    return {
+      rootContext,
+      forwardRef
+    };
+  },
+  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, vue.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": 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);
+      }
+    }), {
+      default: () => 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 { forwardRef, currentElement } = composition.useForwardExpose();
+    composition.useHideOthers(currentElement);
+    return {
+      rootContext,
+      emitsAsProps,
+      forwardRef
+    };
+  },
+  render() {
+    return vue.h(DestylerDialogContentImpl, 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);
+      }
+    }), {
+      default: () => 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,
+      "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 = vue.defineComponent({
+  name: "DestylerDialogContent",
+  props: destylerDialogContentProps,
+  emits: ["openAutoFocus", "closeAutoFocus", "escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  setup(_, { emit }) {
+    const rootContext = injectDialogRootContext();
+    const emitsAsProps = composition.useEmitAsProps(emit);
+    const { forwardRef } = composition.useForwardExpose();
+    return {
+      rootContext,
+      emitsAsProps,
+      forwardRef
+    };
+  },
+  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, {
+        ref: (el) => this.forwardRef(el),
+        onOpenAutoFocus: (event) => {
+          this.$emit("openAutoFocus", event);
+        }
+      }), {
+        default: () => this.$slots.default?.()
+      }) : vue.h(DestylerDialogContentNonModal, vue.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 = 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
+    }, {
+      default: () => 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();
+    composition.useForwardExpose();
+    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"
+      }
+    }, {
+      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 = vue.defineComponent({
+  name: "DestylerDialogOverlay",
+  props: destylerDialogOverlayProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    const { forwardRef } = composition.useForwardExpose();
+    return {
+      rootContext,
+      forwardRef
+    };
+  },
+  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, {
+      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 = vue.defineComponent({
+  name: "DestylerDialogPortal",
+  props: destylerDialogPortalProps,
+  render() {
+    return vue.h(teleport.DestylerTeleport, {}, {
+      default: () => 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
+    }, {
+      default: () => 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 { forwardRef, currentElement } = composition.useForwardExpose();
+    vue.onMounted(() => {
+      rootContext.triggerElement = currentElement;
+    });
+    return {
+      rootContext,
+      forwardRef
+    };
+  },
+  render() {
+    return vue.h(primitive.DestylerPrimitive, vue.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?.()
+    });
+  }
+});
+
+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;