@zhsz/cool-design-crud/es/components/dialog/index.mjs

import { defineComponent, Transition, ref, computed, onMounted, nextTick, watch, provide, createVNode, Teleport, createTextVNode, mergeProps } from "vue";
import { Dialog, Button, Space, Divider, Watermark } from "tdesign-vue-next";
import { CloseIcon, FullscreenIcon, FullscreenExitIcon, ChevronLeftIcon } from "tdesign-icons-vue-next";
import { Scrollbar } from "@zhsz/cool-design";
import { isBoolean, isArray } from "../../utils/index.mjs";
import { renderNode } from "../../utils/vnode.mjs";
import "../../utils/test.mjs";
import { useTools } from "../../hooks/core.mjs";
import "@formily/core";
import { omit, pickBy } from "lodash-es";
import "../../hooks/table.mjs";
import { isString } from "xe-utils";
const ClDialog = /* @__PURE__ */ defineComponent({
  name: "cl-dialog",
  components: {
    TDialog: Dialog,
    CloseIcon,
    FullscreenIcon,
    FullscreenExitIcon,
    ChevronLeftIcon,
    TdButton: Button,
    Space,
    Divider,
    Scrollbar,
    Transition
  },
  props: {
    /** 表格水印 优先级高于全局设置 */
    watermarkText: String,
    /** 表格水印props，会覆盖watermarkText */
    watermarkProps: {
      type: Object
    },
    watermarkDic: {
      type: Object
    },
    dialogProps: {
      type: Object
    },
    // 是否可见
    modelValue: {
      type: Boolean,
      default: false
    },
    props: Object,
    // 自定义样式名
    customClass: String,
    // 标题
    title: {
      type: String,
      default: "-"
    },
    // 高度
    height: {
      type: String,
      default: null
    },
    // 宽度
    width: {
      type: String,
      default: "50%"
    },
    placement: {
      type: String,
      default: "center"
    },
    attach: {
      type: String,
      default: "body"
    },
    // 是否缓存
    keepAlive: Boolean,
    // 是否全屏
    fullscreen: Boolean,
    // 点击蒙层时是否触发关闭事件
    closeOnOverlayClick: {
      type: Boolean,
      default: false
    },
    // 按下 ESC 时是否触发对话框关闭事件
    closeOnEscKeydown: {
      type: Boolean,
      default: false
    },
    // 控制按钮
    controls: {
      type: Array,
      default: () => ["fullscreen", "close"]
    },
    showBox: {
      type: Boolean,
      default: false
    },
    pageLayoutId: {
      type: String
    },
    // 关闭前
    beforeClose: Function,
    // 按钮组
    footer: [Function, Boolean],
    // 页面级样式
    pageStyle: {
      type: [Object, String],
      default: () => ({})
    },
    pageClass: {
      type: String,
      default: ""
    }
  },
  emits: ["update:modelValue", "fullscreen-change", "closed"],
  setup(props, {
    emit,
    expose,
    slots
  }) {
    const {
      browser,
      showWatermark,
      watermark,
      dict
    } = useTools();
    const Dialog$1 = ref();
    const fullscreen = ref(false);
    const visible = ref(false);
    const cacheKey = ref(0);
    const isFullscreen = computed(() => {
      return browser && browser.isMini ? true : fullscreen.value;
    });
    const isMounted = ref(false);
    onMounted(async () => {
      await nextTick();
      if (props.showBox) {
        if (props.pageLayoutId && document.getElementById(props.pageLayoutId)) {
          isMounted.value = true;
        } else {
          console.error("不存在渲染父节点");
        }
      }
    });
    watch(() => props.showBox, (bol) => {
      if (bol) {
        if (props.pageLayoutId && document.getElementById(props.pageLayoutId)) {
          isMounted.value = true;
        } else {
          console.error("不存在渲染父节点");
        }
      }
    });
    watch(() => props.modelValue, (val) => {
      visible.value = val;
      if (val && !props.keepAlive) {
        cacheKey.value += 1;
      }
    }, {
      immediate: true
    });
    watch(() => props.fullscreen, (val) => {
      fullscreen.value = val;
    }, {
      immediate: true
    });
    watch(fullscreen, (val) => {
      emit("fullscreen-change", val);
    });
    provide("dialog", {
      visible,
      fullscreen: isFullscreen
    });
    function open() {
      fullscreen.value = true;
    }
    function close() {
      function done() {
        onClose();
      }
      if (props.beforeClose) {
        props.beforeClose(done);
      } else {
        done();
      }
    }
    function onClose() {
      emit("update:modelValue", false);
      emit("closed");
    }
    function changeFullscreen(val) {
      fullscreen.value = isBoolean(val) ? Boolean(val) : !fullscreen.value;
    }
    function dblClickFullscreen() {
      if (isArray(props.controls) && props.controls.includes("fullscreen")) {
        changeFullscreen();
      }
    }
    function renderHeader() {
      return createVNode("div", {
        "class": "cl-dialog__header",
        "onDblclick": dblClickFullscreen
      }, [createVNode("span", {
        "class": "cl-dialog__title"
      }, [props.title]), createVNode("div", {
        "class": "cl-dialog__controls"
      }, [props.controls.map((e) => {
        switch (e) {
          case "fullscreen":
            if (browser.screen === "xs") {
              return null;
            }
            if (isFullscreen.value) {
              return createVNode("div", {
                "class": "minimize"
              }, [createVNode(FullscreenExitIcon, {
                "size": "20px",
                "onClick": () => {
                  changeFullscreen(false);
                }
              }, null)]);
            } else {
              return createVNode("div", {
                "class": "maximize"
              }, [createVNode(FullscreenIcon, {
                "size": "20px",
                "onClick": () => {
                  changeFullscreen(true);
                }
              }, null)]);
            }
          case "close":
            return createVNode("div", {
              "class": "close"
            }, [createVNode(CloseIcon, {
              "size": "25px",
              "onClick": close
            }, null)]);
          default:
            return renderNode(e, {
              slots
            });
        }
      })])]);
    }
    const watermarkProps = computed(() => {
      var _a, _b, _c, _d, _e, _f;
      if (props.watermarkProps)
        if (props.watermarkProps.watermarkContent) {
          return props.watermarkProps;
        } else {
          return {
            ...props.watermarkProps,
            watermarkContent: props.watermarkText
          };
        }
      if (showWatermark) {
        if (props.watermarkDic) {
          return {
            ...watermark,
            watermarkContent: {
              text: ((_a = props.watermarkDic) == null ? void 0 : _a.prefix) ?? "" + ((_b = props.watermarkDic) == null ? void 0 : _b.level) + ((_c = props.watermarkDic) == null ? void 0 : _c.detail)
            }
          };
        }
        if (dict.watermark) {
          return {
            ...watermark,
            watermarkContent: {
              text: ((_d = dict.watermark) == null ? void 0 : _d.prefix) ?? "" + ((_e = dict.watermark) == null ? void 0 : _e.level) + ((_f = dict.watermark) == null ? void 0 : _f.detail)
            }
          };
        }
        return {
          ...watermark,
          watermarkContent: {
            text: ""
          }
        };
      } else {
        return {
          ...watermark,
          watermarkContent: {
            text: ""
          }
        };
      }
    });
    expose({
      Dialog: Dialog$1,
      visible,
      isFullscreen,
      open,
      close,
      changeFullscreen
    });
    const box = createVNode(Teleport, {
      "to": ["#", props.pageLayoutId].join("")
    }, {
      default: () => [createVNode(Transition, {
        "name": "slide-fade"
      }, {
        default: () => [visible.value ? createVNode("div", {
          "ref": "popupContainer",
          "class": "cl-popup-container"
        }, [createVNode(Watermark, watermarkProps.value, {
          default: () => [createVNode("div", {
            "class": "cl-popup-body"
          }, [createVNode("div", {
            "class": "cl-popup-header"
          }, [createVNode("div", {
            "style": {
              display: "flex",
              paddingLeft: "24px",
              alignItems: "center"
            }
          }, [createVNode("div", null, [createVNode(Button, {
            "variant": "text",
            "onClick": close,
            "style": "padding:0"
          }, {
            default: () => [createVNode("div", {
              "style": "display:flex;align-items:center;"
            }, [createVNode(ChevronLeftIcon, {
              "size": "18px"
            }, null), createTextVNode("返回")])]
          })]), createVNode(Divider, {
            "layout": "vertical"
          }, null), createVNode("div", {
            "style": {
              fontSize: "14px",
              color: "#86909c"
            }
          }, [props.title])]), createVNode("div", {
            "style": {
              paddingRight: "20px"
            }
          }, [createVNode(Space, null, {
            default: () => {
              var _a;
              return [(_a = slots.footer) == null ? void 0 : _a.call(slots)];
            }
          })])]), createVNode(Scrollbar, null, {
            default: () => {
              var _a;
              return [createVNode("div", {
                "class": props.pageClass,
                "style": isString(props.pageStyle) ? `pading: 50px 100px;flex: 1 1 0%;overflow:auto;${props.pageStyle}` : {
                  padding: "50px 100px",
                  flex: "1 1 0%",
                  overflow: "auto",
                  ...props.pageStyle
                }
              }, [(_a = slots.default) == null ? void 0 : _a.call(slots)])];
            }
          })])]
        })]) : ""]
      })]
    });
    const dialog = () => createVNode(Scrollbar, {
      "height": props.height
    }, {
      default: () => [createVNode("div", {
        "class": "cl-dialog__container",
        "key": cacheKey.value
      }, [createVNode(Watermark, watermarkProps.value, {
        default: () => {
          var _a;
          return [(_a = slots.default) == null ? void 0 : _a.call(slots)];
        }
      })])]
    });
    return () => {
      if (isMounted.value && props.showBox) {
        return box;
      } else {
        return createVNode(Dialog, mergeProps({
          "ref": Dialog$1
        }, omit(pickBy(props.dialogProps, (value) => value !== void 0), ["header", "footer", "body", "visible", "onClose", "attach", "mode", "closeOnOverlayClick", "placement", "width", "customClass"]), {
          "class": ["cl-dialog", props.customClass],
          "width": props.width,
          "placement": props.placement,
          "closeOnOverlayClick": props.closeOnOverlayClick,
          "closeOnEscKeydown": props.closeOnEscKeydown,
          "mode": fullscreen.value ? "full-screen" : "modal",
          "attach": props.attach,
          "onClose": onClose,
          "visible": visible.value,
          "onUpdate:visible": (value) => {
            visible.value = value;
          }
        }), {
          header() {
            return renderHeader();
          },
          default() {
            return dialog();
          },
          footer() {
            var _a;
            return slots.footer ? createVNode("div", {
              "class": "cl-dialog__footer"
            }, [(_a = slots.footer) == null ? void 0 : _a.call(slots)]) : "";
          }
        });
      }
    };
  }
});
export {
  ClDialog as default
};