@opensig/opendesign/lib/dialog/ODialog.vue.js

<p align="center"><img src="../docs/public/opendesign-logo-light.png"/></p> <h1 align="center">opendesign</h1> <p align="center">一个 Vue 3 组件库</p> <p align="center"><b>皮肤可定制，使用 TypeScript</b></p>

"use strict";
const vue = require("vue");
const icons = require("../_utils/icons.js");
const index = require("../layer/index.js");
const index$1 = require("../button/index.js");
require("../scrollbar/index.js");
const types = require("./types.js");
const dom = require("../_utils/dom.js");
const useScreen = require("../hooks/use-screen.js");
const vScrollbar = require("../scrollbar/vScrollbar.js");
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__ */ vue.defineComponent({
  __name: "ODialog",
  props: types.dialogProps,
  emits: ["change", "update:visible"],
  setup(__props, { expose: __expose, emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const { isPhonePad } = useScreen.useScreen();
    const layerRef = vue.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 = vue.computed(() => {
      if (props.scrollbar === true) {
        return {
          showType: "hover",
          size: "small"
        };
      }
      return props.scrollbar;
    });
    __expose({
      /** expose: Toggle the ODialog */
      toggle(show) {
        var _a;
        (_a = layerRef.value) == null ? void 0 : _a.toggle(show);
      }
    });
    return (_ctx, _cache) => {
      return vue.openBlock(), vue.createBlock(vue.unref(index.OLayer), {
        ref_key: "layerRef",
        ref: layerRef,
        class: vue.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": vue.unref(dom.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": vue.unref(isPhonePad) ? "css" : "mouse",
        onChange,
        "onUpdate:visible": onUpdateVisible
      }, {
        default: vue.withCtx(() => [
          _ctx.$slots.header ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
            vue.renderSlot(_ctx.$slots, "header")
          ])) : vue.createCommentVNode("v-if", true),
          vue.createElementVNode(
            "div",
            {
              class: vue.normalizeClass(["o-dlg-body", {
                "with-footer": _ctx.$slots.footer || props.actions
              }])
            },
            [
              vue.withDirectives((vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
                vue.renderSlot(_ctx.$slots, "default")
              ])), [
                [vue.unref(vScrollbar.vScrollbar), scrollbarProps.value]
              ])
            ],
            2
            /* CLASS */
          ),
          _ctx.$slots.footer || _ctx.$slots.actions || props.actions ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_3, [
            vue.renderSlot(_ctx.$slots, "footer", {}, () => [
              vue.createElementVNode("div", _hoisted_4, [
                vue.renderSlot(_ctx.$slots, "actions", { isPhonePad: vue.unref(isPhonePad) }, () => [
                  vue.createCommentVNode(" 需要审视透传子组件属性 "),
                  (vue.openBlock(true), vue.createElementBlock(
                    vue.Fragment,
                    null,
                    vue.renderList(props.actions, (item) => {
                      return vue.openBlock(), vue.createBlock(vue.unref(index$1.OButton), {
                        key: item.id,
                        class: "o-dlg-btn",
                        color: item.color,
                        variant: !item.variant && vue.unref(isPhonePad) ? "text" : item.variant,
                        size: item.size,
                        round: item.round,
                        icon: item.icon,
                        loading: item.loading,
                        disabled: item.disabled,
                        onClick: item.onClick
                      }, {
                        default: vue.withCtx(() => [
                          vue.createTextVNode(
                            vue.toDisplayString(item.label),
                            1
                            /* TEXT */
                          )
                        ]),
                        _: 2
                        /* DYNAMIC */
                      }, 1032, ["color", "variant", "size", "round", "icon", "loading", "disabled", "onClick"]);
                    }),
                    128
                    /* KEYED_FRAGMENT */
                  ))
                ])
              ])
            ])
          ])) : vue.createCommentVNode("v-if", true),
          !props.hideClose ? (vue.openBlock(), vue.createElementBlock("div", {
            key: 2,
            class: "o-dlg-btn-close",
            onClick: onCloseClick
          }, [
            vue.createVNode(vue.unref(icons.IconClose))
          ])) : vue.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"]);
    };
  }
});
module.exports = _sfc_main;