@destyler/dialog 0.0.1-beta.10

package/dist/component.mjs

@@ -0,0 +1,505 @@
+import { defineComponent, ref, toRefs, h, mergeProps, onMounted, withDirectives } from 'vue';
+import { DestylerPrimitive } from '@destyler/primitive';
+import { createContext, getOpenState } from '@destyler/shared';
+import { useVModel, useId, useCustomElement, 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);
+      }
+    }), 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 { customElement, currentElement: contentElement } = useCustomElement();
+    onMounted(() => {
+      rootContext.contentElement = contentElement;
+    });
+    return {
+      rootContext,
+      customElement
+    };
+  },
+  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, {
+      ...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": 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?.()), [
+      [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 { customElement, currentElement } = useCustomElement();
+    useHideOthers(currentElement);
+    return {
+      rootContext,
+      emitsAsProps,
+      customElement
+    };
+  },
+  render() {
+    return h(DestylerDialogContentImpl, 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 = 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,
+      "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 = defineComponent({
+  name: "DestylerDialogContent",
+  props: destylerDialogContentProps,
+  emits: ["openAutoFocus", "closeAutoFocus", "escapeKeyDown", "pointerDownOutside", "focusOutside", "interactOutside", "dismiss"],
+  setup(_, { emit }) {
+    const rootContext = injectDialogRootContext();
+    const emitsAsProps = useEmitAsProps(emit);
+    return {
+      rootContext,
+      emitsAsProps
+    };
+  },
+  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, {
+        onOpenAutoFocus: (event) => {
+          this.$emit("openAutoFocus", event);
+        }
+      }), this.$slots.default?.()) : h(DestylerDialogContentNonModal, 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 = defineComponent({
+  name: "DestylerDialogDescription",
+  props: destylerDialogDescriptionProps,
+  setup() {
+    const rootContext = injectDialogRootContext();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    return withDirectives(h(DestylerPrimitive, {
+      as: this.$props.as,
+      asChild: this.$props.asChild
+    }, 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();
+    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"
+      }
+    }, 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();
+    return {
+      rootContext
+    };
+  },
+  render() {
+    const useVShow = this.rootContext?.modal.value;
+    return useVShow ? h(DestylerPresence, {
+      present: this.$props.forceMount || this.rootContext.open.value
+    }, h(DestylerDialogOverlayImpl, 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 = defineComponent({
+  name: "DestylerDialogPortal",
+  props: destylerDialogPortalProps,
+  render() {
+    return h(DestylerTeleport, {}, 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
+    }, 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 { customElement, currentElement } = useCustomElement();
+    onMounted(() => {
+      rootContext.triggerElement = currentElement;
+    });
+    return {
+      rootContext,
+      customElement
+    };
+  },
+  render() {
+    return h(DestylerPrimitive, 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?.());
+  }
+});
+
+export { DestylerDialogClose, DestylerDialogContent, DestylerDialogContentImpl, DestylerDialogContentModal, DestylerDialogContentNonModal, DestylerDialogDescription, DestylerDialogOverlay, DestylerDialogOverlayImpl, DestylerDialogPortal, DestylerDialogRoot, DestylerDialogTitle, DestylerDialogTrigger };

package/dist/index.cjs

@@ -0,0 +1,23 @@
+'use strict';
+
+const index = require('./component.cjs');
+require('vue');
+require('@destyler/primitive');
+require('@destyler/shared');
+require('@destyler/composition');
+require('@destyler/presence');
+require('@destyler/focus-scope');
+require('@destyler/dismissable-layer');
+require('@destyler/directives');
+require('@destyler/teleport');
+
+
+
+exports.DestylerDialogClose = index.DestylerDialogClose;
+exports.DestylerDialogContent = index.DestylerDialogContent;
+exports.DestylerDialogDescription = index.DestylerDialogDescription;
+exports.DestylerDialogOverlay = index.DestylerDialogOverlay;
+exports.DestylerDialogPortal = index.DestylerDialogPortal;
+exports.DestylerDialogRoot = index.DestylerDialogRoot;
+exports.DestylerDialogTitle = index.DestylerDialogTitle;
+exports.DestylerDialogTrigger = index.DestylerDialogTrigger;

package/dist/index.d.cts

@@ -0,0 +1,4 @@
+export { a as DestylerDialogClose, b as DestylerDialogCloseProps, c as DestylerDialogContent, d as DestylerDialogContentProps, e as DestylerDialogDescription, f as DestylerDialogDescriptionProps, g as DestylerDialogOverlay, p as DestylerDialogOverlayProps, h as DestylerDialogPortal, i as DestylerDialogPortalProps, j as DestylerDialogRoot, k as DestylerDialogRootProps, l as DestylerDialogTitle, m as DestylerDialogTitleProps, n as DestylerDialogTrigger, o as DestylerDialogTriggerProps } from './shared/dialog.19d267bb.cjs';
+import 'vue';
+import '@destyler/shared';
+import '@destyler/primitive';

package/dist/index.d.mts

@@ -0,0 +1,4 @@
+export { a as DestylerDialogClose, b as DestylerDialogCloseProps, c as DestylerDialogContent, d as DestylerDialogContentProps, e as DestylerDialogDescription, f as DestylerDialogDescriptionProps, g as DestylerDialogOverlay, p as DestylerDialogOverlayProps, h as DestylerDialogPortal, i as DestylerDialogPortalProps, j as DestylerDialogRoot, k as DestylerDialogRootProps, l as DestylerDialogTitle, m as DestylerDialogTitleProps, n as DestylerDialogTrigger, o as DestylerDialogTriggerProps } from './shared/dialog.19d267bb.mjs';
+import 'vue';
+import '@destyler/shared';
+import '@destyler/primitive';

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export { a as DestylerDialogClose, b as DestylerDialogCloseProps, c as DestylerDialogContent, d as DestylerDialogContentProps, e as DestylerDialogDescription, f as DestylerDialogDescriptionProps, g as DestylerDialogOverlay, p as DestylerDialogOverlayProps, h as DestylerDialogPortal, i as DestylerDialogPortalProps, j as DestylerDialogRoot, k as DestylerDialogRootProps, l as DestylerDialogTitle, m as DestylerDialogTitleProps, n as DestylerDialogTrigger, o as DestylerDialogTriggerProps } from './shared/dialog.19d267bb.js';
+import 'vue';
+import '@destyler/shared';
+import '@destyler/primitive';

package/dist/index.mjs

@@ -0,0 +1,10 @@
+export { DestylerDialogClose, DestylerDialogContent, DestylerDialogDescription, DestylerDialogOverlay, DestylerDialogPortal, DestylerDialogRoot, DestylerDialogTitle, DestylerDialogTrigger } from './component.mjs';
+import 'vue';
+import '@destyler/primitive';
+import '@destyler/shared';
+import '@destyler/composition';
+import '@destyler/presence';
+import '@destyler/focus-scope';
+import '@destyler/dismissable-layer';
+import '@destyler/directives';
+import '@destyler/teleport';

package/dist/resolver.cjs

@@ -0,0 +1,27 @@
+'use strict';
+
+const name = "@destyler/dialog";
+
+const packageName = name;
+const dialogComponentName = [
+  "DestylerDialogClose",
+  "DestylerDialogContent",
+  "DestylerDialogDescription",
+  "DestylerDialogOverlay",
+  "DestylerDialogPortal",
+  "DestylerDialogRoot",
+  "DestylerDialogTitle",
+  "DestylerDialogTrigger"
+];
+function DestylerDialogResolver() {
+  return {
+    type: "component",
+    resolve: (name2) => {
+      if (dialogComponentName.includes(name2))
+        return { name: name2, from: packageName };
+    }
+  };
+}
+
+exports.DestylerDialogResolver = DestylerDialogResolver;
+exports.dialogComponentName = dialogComponentName;

package/dist/resolver.d.cts

@@ -0,0 +1,6 @@
+import { ComponentResolver } from 'unplugin-vue-components';
+
+declare const dialogComponentName: string[];
+declare function DestylerDialogResolver(): ComponentResolver;
+
+export { DestylerDialogResolver, dialogComponentName };

package/dist/resolver.d.mts

@@ -0,0 +1,6 @@
+import { ComponentResolver } from 'unplugin-vue-components';
+
+declare const dialogComponentName: string[];
+declare function DestylerDialogResolver(): ComponentResolver;
+
+export { DestylerDialogResolver, dialogComponentName };

package/dist/resolver.d.ts

@@ -0,0 +1,6 @@
+import { ComponentResolver } from 'unplugin-vue-components';
+
+declare const dialogComponentName: string[];
+declare function DestylerDialogResolver(): ComponentResolver;
+
+export { DestylerDialogResolver, dialogComponentName };

package/dist/resolver.mjs

@@ -0,0 +1,24 @@
+const name = "@destyler/dialog";
+
+const packageName = name;
+const dialogComponentName = [
+  "DestylerDialogClose",
+  "DestylerDialogContent",
+  "DestylerDialogDescription",
+  "DestylerDialogOverlay",
+  "DestylerDialogPortal",
+  "DestylerDialogRoot",
+  "DestylerDialogTitle",
+  "DestylerDialogTrigger"
+];
+function DestylerDialogResolver() {
+  return {
+    type: "component",
+    resolve: (name2) => {
+      if (dialogComponentName.includes(name2))
+        return { name: name2, from: packageName };
+    }
+  };
+}
+
+export { DestylerDialogResolver, dialogComponentName };