tms-vue3-ui/dist/es/frame/index.js

Vue3基础UI库，提供JSONSchema编辑器，支持基于JSONSchema生成表单。

import { nextTick as h, createVNode as i, mergeProps as l } from "vue";
function S(c) {
  c.component("tms-frame", {
    props: {
      display: {
        type: Object,
        default: () => ({
          header: !0,
          footer: !0,
          left: !0,
          right: !0
        })
      },
      displaySm: {
        type: Object,
        default: () => ({
          header: !0,
          footer: !0,
          left: !1,
          right: !1
        })
      },
      backColor: {
        type: String,
        default: "#f0f3f6"
      },
      headerColor: {
        type: String,
        default: "#f0f3f6"
      },
      headerMinHeight: {
        type: String,
        default: "32px"
      },
      leftColor: {
        type: String,
        default: "#f0f3f6"
      },
      leftWidth: {
        type: String,
        default: "25%"
      },
      leftWidthSm: {
        type: String,
        default: "100%"
      },
      centerColor: {
        type: String,
        default: "#fff"
      },
      centerMargin: {
        type: String,
        default: "0 8px"
      },
      centerMarginSm: {
        type: String,
        default: ""
      },
      rightColor: {
        type: String,
        default: "#f0f3f6"
      },
      rightWidth: {
        type: String,
        default: "25%"
      },
      rightWidthSm: {
        type: String,
        default: "100%"
      },
      footerColor: {
        type: String,
        default: "#f0f3f6"
      },
      footerMinHeight: {
        type: String,
        default: "32px"
      },
      mainDirection: {
        type: String,
        default: "row"
      },
      mainDirectionSm: {
        type: String,
        default: "row"
      }
    },
    methods: {
      adjust() {
        let e = this.$props, t = this.$el.querySelector(".tms-frame__main");
        t && (this.isSmallScreen ? (t.classList.remove(`tms-frame__main_${e.mainDirection}`), t.classList.add(`tms-frame__main_${e.mainDirectionSm}`)) : (t.classList.remove(`tms-frame__main_${e.mainDirectionSm}`), t.classList.add(`tms-frame__main_${e.mainDirection}`)));
        let a = this.$el.querySelector(".tms-frame__main__center");
        a && (this.isSmallScreen ? a.style.margin = e.centerMarginSm : a.style.margin = e.centerMargin);
        let n = this.$el.querySelector(".tms-frame__main__left");
        n && (n.style.width = this.isSmallScreen ? e.leftWidthSm : e.leftWidth);
        let r = this.$el.querySelector(".tms-frame__main__right");
        r && (r.style.width = this.isSmallScreen ? e.rightWidthSm : e.rightWidth);
      }
    },
    data: function() {
      return {
        isSmallScreen: !1
      };
    },
    computed: {
      responsiveDisplay: function() {
        return this.isSmallScreen ? this.displaySm : this.display;
      }
    },
    mounted() {
      this.isSmallScreen = window.screen && window.screen.width <= 768, window.addEventListener("resize", () => {
        this.isSmallScreen = window.screen && window.screen.width <= 768, h(() => {
          this.adjust();
        });
      }), h(() => {
        this.adjust();
      });
    },
    render() {
      var s, o, f, m, d;
      let e = this.$slots, t = this.$props, a = {
        backgroundColor: t.headerColor
      };
      a.minHeight = t.headerMinHeight;
      let n = {
        backgroundColor: t.footerColor
      };
      n.minHeight = t.footerMinHeight;
      let r = this.responsiveDisplay;
      return i("div", l({
        class: "tms-frame"
      }, {
        style: {
          backgroundColor: t.backColor
        }
      }), [r.header ? i("header", l({
        class: "tms-frame__header"
      }, {
        style: a
      }), [(s = e.header) == null ? void 0 : s.call(e)]) : "", i("main", {
        class: "tms-frame__main"
      }, [r.left ? i("section", l({
        class: "tms-frame__main__left"
      }, {
        style: {
          backgroundColor: t.leftColor,
          width: t.leftWidth
        }
      }), [(o = e.left) == null ? void 0 : o.call(e)]) : "", i("section", l({
        class: "tms-frame__main__center"
      }, {
        style: {
          backgroundColor: t.centerColor,
          margin: t.centerMargin
        }
      }), [(f = e.center) == null ? void 0 : f.call(e)]), r.right ? i("section", l({
        class: "tms-frame__main__right"
      }, {
        style: {
          backgroundColor: t.rightColor,
          width: t.rightWidth
        }
      }), [(m = e.right) == null ? void 0 : m.call(e)]) : ""]), r.footer ? i("footer", l({
        class: "tms-frame__footer"
      }, {
        style: n
      }), [(d = e.footer) == null ? void 0 : d.call(e)]) : ""]);
    }
  });
}
export {
  S as default
};