@oruga-ui/oruga-next/dist/esm/modal.mjs

UI components for Vue.js and CSS framework agnostic

/*! Oruga v0.11.0 | MIT License | github.com/oruga-ui/oruga */
import { defineComponent, mergeModels, useTemplateRef, useModel, computed, watch, nextTick, onMounted, ref, createBlock, openBlock, Teleport, createVNode, Transition, withCtx, withDirectives, createElementBlock, mergeProps, withKeys, unref, createCommentVNode, createElementVNode, normalizeClass, normalizeStyle, renderSlot, resolveDynamicComponent, toHandlers, toDisplayString, vShow } from "vue";
import { _ as _sfc_main$1 } from "./Icon.vue_vue_type_script_setup_true_lang-C6IfOTXx.mjs";
import { i as isClient, g as getDefault, b as registerComponent, a as registerComponentProgrammatic } from "./config-Dl7tu_Ly.mjs";
import { toCssDimension } from "./helpers.mjs";
import { d as defineClasses } from "./defineClasses-CWB9NuS-.mjs";
import { u as useMatchMedia } from "./useMatchMedia-Go6cZv_b.mjs";
import { u as useClickOutside } from "./useClickOutside-Cq7Otb3W.mjs";
import { u as usePreventScrolling } from "./usePreventScrolling-CRyyOkPi.mjs";
import { u as useTeleportDefault } from "./useConfig-43UsDYp_.mjs";
import { u as useTrapFocus } from "./useTrapFocus-lpk0D-Ty.mjs";
import { I as InstanceRegistry, C as ComponentProgrammatic } from "./useProgrammatic-B50-6K60.mjs";
const _hoisted_1 = ["role", "aria-label", "aria-modal"];
const _hoisted_2 = { key: 0 };
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    isOruga: true,
    name: "OModal",
    configField: "modal",
    inheritAttrs: false
  },
  __name: "Modal",
  props: /* @__PURE__ */ mergeModels({
    override: { type: Boolean, default: void 0 },
    active: { type: Boolean, default: false },
    fullScreen: { type: Boolean, default: false },
    content: { default: void 0 },
    width: { default: () => getDefault("modal.width", 960) },
    animation: { default: () => getDefault("modal.animation", "zoom-out") },
    overlay: { type: Boolean, default: () => getDefault("modal.overlay", true) },
    cancelable: { type: [Array, Boolean], default: () => getDefault("modal.cancelable", ["escape", "x", "outside"]) },
    clipScroll: { type: Boolean, default: () => getDefault("modal.clipScroll", false) },
    trapFocus: { type: Boolean, default: () => getDefault("modal.trapFocus", true) },
    alert: { type: Boolean, default: () => getDefault("modal.alert", false) },
    ariaLabel: { default: () => getDefault("modal.ariaLabel") },
    autoFocus: { type: Boolean, default: () => getDefault("modal.autoFocus", true) },
    closeIcon: { default: () => getDefault("modal.closeIcon", "close") },
    closeIconSize: { default: () => getDefault("modal.closeIconSize", "medium") },
    ariaCloseLabel: { default: () => getDefault("modal.ariaCloseLabel", "Close") },
    mobileBreakpoint: { default: () => getDefault("modal.mobileBreakpoint") },
    teleport: { type: [Boolean, String, Object], default: () => getDefault("modal.teleport", false) },
    container: {},
    component: { default: void 0 },
    props: { default: void 0 },
    events: { default: void 0 },
    rootClass: {},
    mobileClass: {},
    activeClass: {},
    overlayClass: {},
    contentClass: {},
    fullScreenClass: {},
    closeClass: {},
    scrollClipClass: {},
    scrollKeepClass: {}
  }, {
    "active": { type: Boolean, ...{ default: false } },
    "activeModifiers": {}
  }),
  emits: /* @__PURE__ */ mergeModels(["update:active", "close"], ["update:active"]),
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const { vTrapFocus } = useTrapFocus();
    const rootRef = useTemplateRef("rootElement");
    const contentRef = useTemplateRef("contentElement");
    const isActive = useModel(__props, "active");
    const { isMobile } = useMatchMedia(props.mobileBreakpoint);
    const _teleport = computed(
      () => typeof props.teleport === "boolean" ? { to: useTeleportDefault(), disabled: !props.teleport } : { to: props.teleport, disabled: false }
    );
    const showX = computed(
      () => Array.isArray(props.cancelable) ? props.cancelable.indexOf("x") >= 0 : props.cancelable
    );
    const customStyle = computed(
      () => !props.fullScreen ? { maxWidth: toCssDimension(props.width) } : null
    );
    const toggleScroll = usePreventScrolling(props.clipScroll);
    watch(isActive, (value) => {
      if (props.overlay) toggleScroll(value);
      if (value && props.autoFocus)
        nextTick(() => {
          if (rootRef.value) rootRef.value.focus();
        });
    });
    onMounted(() => {
      if (isActive.value && props.overlay) toggleScroll(isActive.value);
    });
    if (isClient) {
      if (!props.overlay)
        useClickOutside(contentRef, onClickedOutside, {
          trigger: isActive
        });
    }
    function onClickedOutside(event) {
      if (!isActive.value || isAnimating.value) return;
      if (props.overlay || contentRef.value && !event.composedPath().includes(contentRef.value))
        event.preventDefault();
      cancel("outside");
    }
    function onEscapePress() {
      if (!isActive.value) return;
      cancel("escape");
    }
    function cancel(method) {
      if (typeof props.cancelable === "boolean" && !props.cancelable || !props.cancelable || Array.isArray(props.cancelable) && !props.cancelable.includes(method))
        return;
      close(method);
    }
    function close(...args) {
      isActive.value = false;
      emits("close", ...args);
    }
    const isAnimating = ref(!props.active);
    function afterEnter() {
      isAnimating.value = false;
    }
    function beforeLeave() {
      isAnimating.value = true;
    }
    const rootClasses = defineClasses(
      ["rootClass", "o-modal"],
      ["mobileClass", "o-modal--mobile", null, isMobile],
      ["activeClass", "o-modal--active", null, isActive]
    );
    const overlayClasses = defineClasses(["overlayClass", "o-modal__overlay"]);
    const contentClasses = defineClasses(
      ["contentClass", "o-modal__content"],
      [
        "fullScreenClass",
        "o-modal__content--full-screen",
        null,
        computed(() => props.fullScreen)
      ]
    );
    const closeClasses = defineClasses(["closeClass", "o-modal__close"]);
    __expose({ close });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(Teleport, {
        to: _teleport.value.to,
        disabled: _teleport.value.disabled
      }, [
        createVNode(Transition, {
          name: _ctx.animation,
          onAfterEnter: afterEnter,
          onBeforeLeave: beforeLeave
        }, {
          default: withCtx(() => [
            withDirectives((openBlock(), createElementBlock("div", mergeProps({ ref: "rootElement" }, _ctx.$attrs, {
              "data-oruga": "modal",
              class: unref(rootClasses),
              tabindex: -1,
              role: _ctx.alert ? "alertdialog" : "dialog",
              "aria-label": _ctx.ariaLabel,
              "aria-modal": isActive.value,
              onKeyup: withKeys(onEscapePress, ["escape"])
            }), [
              _ctx.overlay ? (openBlock(), createElementBlock("div", {
                key: 0,
                class: normalizeClass(unref(overlayClasses)),
                tabindex: "-1",
                onClick: onClickedOutside
              }, null, 2)) : createCommentVNode("", true),
              createElementVNode("div", {
                ref: "contentElement",
                class: normalizeClass(unref(contentClasses)),
                style: normalizeStyle(customStyle.value)
              }, [
                _ctx.component ? (openBlock(), createBlock(resolveDynamicComponent(_ctx.component), mergeProps({ key: 0 }, _ctx.$props.props, toHandlers(_ctx.$props.events || {}), { onClose: close }), null, 16)) : renderSlot(_ctx.$slots, "default", {
                  key: 1,
                  close
                }, () => [
                  _ctx.content ? (openBlock(), createElementBlock("div", _hoisted_2, toDisplayString(_ctx.content), 1)) : createCommentVNode("", true)
                ]),
                showX.value ? withDirectives((openBlock(), createBlock(_sfc_main$1, {
                  key: 2,
                  class: normalizeClass(unref(closeClasses)),
                  icon: _ctx.closeIcon,
                  size: _ctx.closeIconSize,
                  clickable: "",
                  "aria-label": _ctx.ariaCloseLabel,
                  onClick: _cache[0] || (_cache[0] = ($event) => cancel("x"))
                }, null, 8, ["class", "icon", "size", "aria-label"])), [
                  [vShow, !isAnimating.value]
                ]) : createCommentVNode("", true)
              ], 6)
            ], 16, _hoisted_1)), [
              [vShow, isActive.value],
              [unref(vTrapFocus), _ctx.trapFocus && isActive.value]
            ])
          ]),
          _: 3
        }, 8, ["name"])
      ], 8, ["to", "disabled"]);
    };
  }
});
const registry = new InstanceRegistry();
const ModalProgrammatic = {
  /** Returns the number of registered active instances. */
  count: registry.count,
  /**
   * Create a new programmatic modal component instance.
   * @param options modal content string or modal component props object
   * @param target specify a target the component get rendered into - default is `document.body`
   * @returns ProgrammaticExpose
   */
  open(options, target) {
    const _options = typeof options === "string" ? { content: options } : options;
    const componentProps = {
      active: true,
      // set the active default state to true
      ..._options
    };
    return ComponentProgrammatic.open(_sfc_main, {
      registry,
      // custom programmatic instance registry
      target,
      // target the component get rendered into
      props: componentProps,
      // component specific props
      onClose: _options.onClose
      // on close event handler
    });
  },
  /** Close the last registred instance in the modal programmatic instance registry. */
  close(...args) {
    var _a, _b;
    (_b = (_a = registry.last()) == null ? void 0 : _a.exposed) == null ? void 0 : _b.close(...args);
  },
  /** Close all instances in the programmatic modal instance registry. */
  closeAll(...args) {
    registry.walk((entry) => {
      var _a;
      return (_a = entry.exposed) == null ? void 0 : _a.close(...args);
    });
  }
};
const index = {
  install(app) {
    registerComponent(app, _sfc_main);
    registerComponentProgrammatic(app, "modal", ModalProgrammatic);
  }
};
export {
  ModalProgrammatic,
  _sfc_main as OModal,
  index as default
};
//# sourceMappingURL=modal.mjs.map