@opensig/opendesign/es/dialog/ODialog.vue.mjs

import { defineComponent, ref, computed, createBlock, openBlock, unref, normalizeClass, withCtx, createElementBlock, createCommentVNode, createElementVNode, renderSlot, withDirectives, Fragment, renderList, createTextVNode, toDisplayString, createVNode } from "vue";
import { IconClose } from "../_utils/icons.mjs";
import { OLayer } from "../layer/index.mjs";
import { OButton } from "../button/index.mjs";
import "../scrollbar/index.mjs";
import { dialogProps } from "./types.mjs";
import { mergeClass } from "../_utils/vue-utils.mjs";
import "../_utils/is.mjs";
import "../hooks/use-theme.mjs";
import { useScreen } from "../hooks/use-screen.mjs";
import "@vueuse/core";
import { vScrollbar } from "../scrollbar/vScrollbar.mjs";
const _hoisted_1 = {
  key: 0,
  class: "o-dlg-header"
};
const _hoisted_2 = { class: "o-dlg-body-content" };
const _hoisted_3 = {
  key: 1,
  class: "o-dlg-footer"
};
const _hoisted_4 = { class: "o-dlg-actions" };
const _sfc_main = /* @__PURE__ */ defineComponent({
  __name: "ODialog",
  props: dialogProps,
  emits: ["change", "update:visible"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const { isPhonePad } = useScreen();
    const layerRef = ref(null);
    const onCloseClick = () => {
      var _a;
      (_a = layerRef.value) == null ? void 0 : _a.toggle(false);
    };
    const onChange = (visible) => {
      emits("change", visible);
    };
    const onUpdateVisible = (value, e) => {
      emits("update:visible", value, e);
    };
    const scrollbarProps = computed(() => {
      if (props.scrollbar === true) {
        return {
          showType: "hover",
          size: "small"
        };
      }
      return props.scrollbar;
    });
    __expose({
      /**
       * @zh-CN 切换对话框显示状态
       * @en-US Toggle the dialog visibility
       */
      toggle(show) {
        var _a;
        (_a = layerRef.value) == null ? void 0 : _a.toggle(show);
      }
    });
    return (_ctx, _cache) => {
      return openBlock(), createBlock(unref(OLayer), {
        ref_key: "layerRef",
        ref: layerRef,
        class: normalizeClass(["o-dialog", [
          `o-dialog-${props.size}`,
          {
            "o-dialog-responsive": !props.noResponsive,
            "o-dialog-phone-half-full": props.phoneHalfFull
          }
        ]]),
        visible: props.visible,
        wrapper: props.wrapper,
        "unmount-on-hide": props.unmountOnHide,
        "main-class": unref(mergeClass)("o-dlg-main", props.mainClass),
        "main-transition": props.mainTransition,
        "mask-transition": props.maskTransition,
        mask: props.mask,
        "mask-close": props.maskClose,
        "before-hide": props.beforeHide,
        "before-show": props.beforeShow,
        "transition-orign": unref(isPhonePad) ? "css" : "mouse",
        onChange,
        "onUpdate:visible": onUpdateVisible
      }, {
        default: withCtx(() => [
          _ctx.$slots.header ? (openBlock(), createElementBlock("div", _hoisted_1, [
            renderSlot(_ctx.$slots, "header")
          ])) : createCommentVNode("v-if", true),
          createElementVNode(
            "div",
            {
              class: normalizeClass(["o-dlg-body", {
                "with-footer": _ctx.$slots.footer || props.actions
              }])
            },
            [
              withDirectives((openBlock(), createElementBlock("div", _hoisted_2, [
                renderSlot(_ctx.$slots, "default")
              ])), [
                [unref(vScrollbar), scrollbarProps.value]
              ])
            ],
            2
            /* CLASS */
          ),
          _ctx.$slots.footer || _ctx.$slots.actions || props.actions ? (openBlock(), createElementBlock("div", _hoisted_3, [
            renderSlot(_ctx.$slots, "footer", {}, () => [
              createElementVNode("div", _hoisted_4, [
                renderSlot(_ctx.$slots, "actions", { isPhonePad: unref(isPhonePad) }, () => [
                  createCommentVNode(" 需要审视透传子组件属性 "),
                  (openBlock(true), createElementBlock(
                    Fragment,
                    null,
                    renderList(props.actions, (item) => {
                      return openBlock(), createBlock(unref(OButton), {
                        key: item.id,
                        class: "o-dlg-btn",
                        color: item.color,
                        variant: !item.variant && unref(isPhonePad) ? "text" : item.variant,
                        size: item.size,
                        round: item.round,
                        icon: item.icon,
                        loading: item.loading,
                        disabled: item.disabled,
                        onClick: item.onClick
                      }, {
                        default: withCtx(() => [
                          createTextVNode(
                            toDisplayString(item.label),
                            1
                            /* TEXT */
                          )
                        ]),
                        _: 2
                        /* DYNAMIC */
                      }, 1032, ["color", "variant", "size", "round", "icon", "loading", "disabled", "onClick"]);
                    }),
                    128
                    /* KEYED_FRAGMENT */
                  ))
                ])
              ])
            ])
          ])) : createCommentVNode("v-if", true),
          !props.hideClose ? (openBlock(), createElementBlock("div", {
            key: 2,
            class: "o-dlg-btn-close",
            onClick: onCloseClick
          }, [
            createVNode(unref(IconClose))
          ])) : createCommentVNode("v-if", true)
        ]),
        _: 3
        /* FORWARDED */
      }, 8, ["class", "visible", "wrapper", "unmount-on-hide", "main-class", "main-transition", "mask-transition", "mask", "mask-close", "before-hide", "before-show", "transition-orign"]);
    };
  }
});
export {
  _sfc_main as default
};