@destyler/dialog 0.0.5 → 0.0.7-beta.1

package/dist/shared/dialog.d09a7a95.cjs

@@ -1,540 +0,0 @@
-'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;