@bdsoft/element 1.1.26 → 1.1.27

package/dist/cjs/src/components/layout/layout1.vue.cjs

@@ -0,0 +1,79 @@
+"use strict";
+const vue = require("vue");
+const _hoisted_1 = {
+  key: 0,
+  class: "top"
+};
+const _hoisted_2 = { class: "topin" };
+const _sfc_main = {
+  __name: "layout1",
+  props: {
+    title: {
+      type: String,
+      default: "左侧菜单栏"
+    },
+    // 左侧宽度
+    leftWidth: {
+      type: String,
+      default: "200px"
+    },
+    // 左侧样式配置
+    leftStyles: {
+      type: Object,
+      default: () => {
+        return {
+          padding: "0px",
+          margin: "0px 10px 0px 0px"
+        };
+      }
+    },
+    // 右侧样式配置
+    rightStyles: {
+      type: Object,
+      default: () => {
+        return {
+          padding: "0px",
+          margin: "10px 10px 0px 0px"
+        };
+      }
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const showLeftTop = vue.computed(() => {
+      return props.title ? true : false;
+    });
+    return (_ctx, _cache) => {
+      const _component_el_aside = vue.resolveComponent("el-aside");
+      const _component_el_main = vue.resolveComponent("el-main");
+      const _component_el_container = vue.resolveComponent("el-container");
+      return vue.openBlock(), vue.createBlock(_component_el_container, { class: "containerBg" }, {
+        default: vue.withCtx(() => [
+          vue.createVNode(_component_el_aside, {
+            width: __props.leftWidth,
+            style: vue.normalizeStyle({ ...__props.leftStyles })
+          }, {
+            default: vue.withCtx(() => [
+              showLeftTop.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+                vue.createElementVNode("div", _hoisted_2, vue.toDisplayString(__props.title), 1)
+              ])) : vue.createCommentVNode("", true),
+              vue.renderSlot(_ctx.$slots, "left")
+            ]),
+            _: 3
+          }, 8, ["width", "style"]),
+          vue.createVNode(_component_el_main, {
+            class: "containerRight",
+            style: vue.normalizeStyle({ ...__props.rightStyles })
+          }, {
+            default: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          }, 8, ["style"])
+        ]),
+        _: 3
+      });
+    };
+  }
+};
+module.exports = _sfc_main;

package/dist/cjs/src/components/layout/layout2.vue.cjs

@@ -0,0 +1,174 @@
+"use strict";
+const vue = require("vue");
+const add = require("../../assets/images/menu/add.png.cjs");
+const edit = require("../../assets/images/menu/edit.png.cjs");
+const del = require("../../assets/images/menu/del.png.cjs");
+const ElementPlusIconsVue = require("@element-plus/icons-vue");
+require("./layout2.vue2.cjs");
+const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
+const _hoisted_1 = {
+  key: 0,
+  class: "top"
+};
+const _hoisted_2 = { class: "topin" };
+const _hoisted_3 = {
+  class: "headwarp-top",
+  style: { "border-radius": "4px" }
+};
+const _hoisted_4 = {
+  class: "headwarp-bottom",
+  style: { "padding-left": "0px" }
+};
+const _hoisted_5 = {
+  class: "top_right",
+  style: { "width": "200px" }
+};
+const _sfc_main = {
+  __name: "layout2",
+  props: {
+    title: {
+      type: String,
+      default: "左侧菜单栏"
+    },
+    leftWidth: {
+      type: String,
+      default: "200px"
+    },
+    leftStyles: {
+      type: Object,
+      default: () => {
+        return {
+          padding: "0px",
+          margin: "0px 10px 0px 0px"
+        };
+      }
+    },
+    // 右侧样式配置
+    rightStyles: {
+      type: Object,
+      default: () => {
+        return {
+          padding: "0px",
+          margin: "0px 0px 10px 0px"
+        };
+      }
+    }
+  },
+  emits: ["searchTable"],
+  setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    const props = __props;
+    const searchValue = vue.ref("");
+    const showLeftTop = vue.computed(() => {
+      return props.title ? true : false;
+    });
+    const getTableData = () => {
+      emits("searchTable", searchValue.value);
+    };
+    return (_ctx, _cache) => {
+      const _component_el_aside = vue.resolveComponent("el-aside");
+      const _component_el_divider = vue.resolveComponent("el-divider");
+      const _component_el_input = vue.resolveComponent("el-input");
+      const _component_el_header = vue.resolveComponent("el-header");
+      const _component_el_main = vue.resolveComponent("el-main");
+      const _component_el_container = vue.resolveComponent("el-container");
+      return vue.openBlock(), vue.createBlock(_component_el_container, { class: "containerBg" }, {
+        default: vue.withCtx(() => [
+          vue.createVNode(_component_el_aside, {
+            width: __props.leftWidth,
+            style: vue.normalizeStyle({ ...__props.leftStyles })
+          }, {
+            default: vue.withCtx(() => [
+              showLeftTop.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1, [
+                vue.createElementVNode("div", _hoisted_2, vue.toDisplayString(__props.title), 1)
+              ])) : vue.createCommentVNode("", true),
+              vue.renderSlot(_ctx.$slots, "left", {}, void 0, true)
+            ]),
+            _: 3
+          }, 8, ["width", "style"]),
+          vue.createVNode(_component_el_container, { style: { "background-color": "#fff", "margin": "10px 10px 10px 0", "height": "calc(100% - 20px)", "border-radius": "4px" } }, {
+            default: vue.withCtx(() => [
+              vue.createVNode(_component_el_header, {
+                height: "50px",
+                class: "headwarp",
+                style: { "border-bottom": "1px solid #e6e6e6", "border-radius": "4px 4px 0 0" }
+              }, {
+                default: vue.withCtx(() => [
+                  vue.createElementVNode("div", _hoisted_3, [
+                    vue.createElementVNode("div", _hoisted_4, [
+                      vue.renderSlot(_ctx.$slots, "lefttop", {}, () => [
+                        vue.createElementVNode("span", {
+                          class: "warpmenu",
+                          onClick: _cache[0] || (_cache[0] = (...args) => _ctx.addTable && _ctx.addTable(...args)),
+                          title: "添加"
+                        }, [..._cache[6] || (_cache[6] = [
+                          vue.createElementVNode("img", {
+                            class: "menuimg",
+                            src: add
+                          }, null, -1),
+                          vue.createTextVNode(" 添加 ", -1)
+                        ])]),
+                        vue.createElementVNode("span", {
+                          class: "warpmenu",
+                          onClick: _cache[1] || (_cache[1] = (...args) => _ctx.editTable && _ctx.editTable(...args)),
+                          title: "编辑"
+                        }, [..._cache[7] || (_cache[7] = [
+                          vue.createElementVNode("img", {
+                            class: "menuimg",
+                            src: edit
+                          }, null, -1),
+                          vue.createTextVNode(" 编辑 ", -1)
+                        ])]),
+                        vue.createElementVNode("span", {
+                          class: "warpmenu",
+                          onClick: _cache[2] || (_cache[2] = (...args) => _ctx.delTable && _ctx.delTable(...args)),
+                          title: "删除"
+                        }, [..._cache[8] || (_cache[8] = [
+                          vue.createElementVNode("img", {
+                            class: "menuimg",
+                            src: del
+                          }, null, -1),
+                          vue.createTextVNode(" 删除", -1)
+                        ])]),
+                        vue.createVNode(_component_el_divider, { direction: "vertical" })
+                      ], true)
+                    ]),
+                    vue.createElementVNode("div", _hoisted_5, [
+                      vue.renderSlot(_ctx.$slots, "righttop2", {}, () => [
+                        vue.createVNode(_component_el_input, {
+                          modelValue: searchValue.value,
+                          "onUpdate:modelValue": _cache[3] || (_cache[3] = ($event) => searchValue.value = $event),
+                          placeholder: "全局搜索",
+                          size: "default",
+                          onKeyup: _cache[4] || (_cache[4] = vue.withKeys(($event) => getTableData(), ["enter"])),
+                          clearable: "",
+                          onClear: _cache[5] || (_cache[5] = ($event) => getTableData()),
+                          "prefix-icon": vue.unref(ElementPlusIconsVue.Search),
+                          class: "top_search"
+                        }, null, 8, ["modelValue", "prefix-icon"])
+                      ], true)
+                    ])
+                  ])
+                ]),
+                _: 3
+              }),
+              vue.createVNode(_component_el_main, {
+                class: "main-container",
+                style: vue.normalizeStyle({ ...__props.rightStyles })
+              }, {
+                default: vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+                ]),
+                _: 3
+              }, 8, ["style"])
+            ]),
+            _: 3
+          })
+        ]),
+        _: 3
+      });
+    };
+  }
+};
+const layout2 = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["__scopeId", "data-v-05e55ce7"]]);
+module.exports = layout2;

package/dist/cjs/src/components/layout/layout2.vue2.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/src/components/layout/layout3.vue.cjs

@@ -0,0 +1,111 @@
+"use strict";
+const vue = require("vue");
+require("./layout3.vue2.cjs");
+const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
+const _hoisted_1 = {
+  class: "headwarp-top",
+  style: { "border-radius": "4px" }
+};
+const _hoisted_2 = {
+  key: 0,
+  class: "top"
+};
+const _hoisted_3 = { class: "topin" };
+const _sfc_main = {
+  __name: "layout3",
+  props: {
+    headerHeight: {
+      type: [String, Number],
+      default: "50px"
+    },
+    // 是否显示左侧
+    showLeft: {
+      type: Boolean,
+      default: true
+    },
+    title: {
+      type: String,
+      default: "左侧菜单栏"
+    },
+    rightStyles: {
+      type: Object,
+      default: () => {
+        return {
+          padding: "20px",
+          margin: "10px 10px 10px 0px"
+        };
+      }
+    },
+    leftStyles: {
+      type: Object
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const showLeftTop = vue.computed(() => {
+      return props.title ? true : false;
+    });
+    const _headerHeight = vue.computed(() => {
+      if (typeof props.headerHeight == "number") {
+        return `${props.headerHeight}px`;
+      } else {
+        return props.headerHeight;
+      }
+    });
+    return (_ctx, _cache) => {
+      const _component_el_header = vue.resolveComponent("el-header");
+      const _component_el_aside = vue.resolveComponent("el-aside");
+      const _component_el_main = vue.resolveComponent("el-main");
+      const _component_el_container = vue.resolveComponent("el-container");
+      return vue.openBlock(), vue.createBlock(_component_el_container, { class: "containerBg" }, {
+        default: vue.withCtx(() => [
+          vue.createVNode(_component_el_header, {
+            height: _headerHeight.value,
+            class: "headwarp",
+            style: { "border-bottom": "1px solid #e6e6e6", "border-radius": "4px 4px 0 0" }
+          }, {
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", _hoisted_1, [
+                vue.renderSlot(_ctx.$slots, "header", {}, void 0, true)
+              ])
+            ]),
+            _: 3
+          }, 8, ["height"]),
+          vue.createVNode(_component_el_container, {
+            class: "maincon",
+            style: {}
+          }, {
+            default: vue.withCtx(() => [
+              __props.showLeft ? (vue.openBlock(), vue.createBlock(_component_el_aside, {
+                key: 0,
+                width: "200px",
+                style: vue.normalizeStyle({ ...__props.leftStyles })
+              }, {
+                default: vue.withCtx(() => [
+                  showLeftTop.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
+                    vue.createElementVNode("div", _hoisted_3, vue.toDisplayString(__props.title), 1)
+                  ])) : vue.createCommentVNode("", true),
+                  vue.renderSlot(_ctx.$slots, "left", {}, void 0, true)
+                ]),
+                _: 3
+              }, 8, ["style"])) : vue.createCommentVNode("", true),
+              vue.createVNode(_component_el_main, {
+                class: "main-container",
+                style: vue.normalizeStyle([{ "background-color": "#fff" }, { ...__props.rightStyles }])
+              }, {
+                default: vue.withCtx(() => [
+                  vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+                ]),
+                _: 3
+              }, 8, ["style"])
+            ]),
+            _: 3
+          })
+        ]),
+        _: 3
+      });
+    };
+  }
+};
+const layout3 = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["__scopeId", "data-v-0b11619a"]]);
+module.exports = layout3;

package/dist/cjs/src/components/layout/layout3.vue2.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/src/components/layout/layout4.vue.cjs

@@ -0,0 +1,70 @@
+"use strict";
+const vue = require("vue");
+require("./layout4.vue2.cjs");
+const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
+const _sfc_main = {
+  __name: "layout4",
+  props: {
+    headerHeight: {
+      type: [String, Number],
+      default: "50px"
+    },
+    rightStyles: {
+      type: Object,
+      default: () => {
+        return {
+          backgroundColor: "#EFEFEF"
+        };
+      }
+    },
+    innerBgColor: {
+      type: String,
+      default: "#fff"
+    }
+  },
+  setup(__props) {
+    const props = __props;
+    const _headerHeight = vue.computed(() => {
+      if (typeof props.headerHeight == "number") {
+        return `${props.headerHeight}px`;
+      } else {
+        return props.headerHeight;
+      }
+    });
+    return (_ctx, _cache) => {
+      const _component_el_header = vue.resolveComponent("el-header");
+      const _component_el_main = vue.resolveComponent("el-main");
+      const _component_el_container = vue.resolveComponent("el-container");
+      return vue.openBlock(), vue.createBlock(_component_el_container, { class: "containerBg" }, {
+        default: vue.withCtx(() => [
+          vue.createVNode(_component_el_header, {
+            style: { "background-color": "#fff", "padding": "0" },
+            height: _headerHeight.value
+          }, {
+            default: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, "header", {}, void 0, true)
+            ]),
+            _: 3
+          }, 8, ["height"]),
+          vue.createVNode(_component_el_main, {
+            class: "main main-container",
+            style: vue.normalizeStyle({ ...__props.rightStyles })
+          }, {
+            default: vue.withCtx(() => [
+              vue.createElementVNode("div", {
+                class: "page-warp",
+                style: vue.normalizeStyle({ "background-color": __props.innerBgColor })
+              }, [
+                vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
+              ], 4)
+            ]),
+            _: 3
+          }, 8, ["style"])
+        ]),
+        _: 3
+      });
+    };
+  }
+};
+const layout4 = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["__scopeId", "data-v-1da747ee"]]);
+module.exports = layout4;

package/dist/cjs/src/components/layout/layout4.vue2.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/src/components/layout/nav.vue.cjs

@@ -0,0 +1,222 @@
+"use strict";
+const vue = require("vue");
+require("./nav.vue2.cjs");
+require("./nav.vue3.cjs");
+const _pluginVue_exportHelper = require("../../../_virtual/_plugin-vue_export-helper.cjs");
+const _hoisted_1 = ["onMouseenter", "onMouseleave", "onClick"];
+const _hoisted_2 = ["src"];
+const _sfc_main = {
+  __name: "nav",
+  props: {
+    // 所有项居中
+    isCenter: {
+      type: Boolean,
+      default: false
+    },
+    themeWarpStyle: {
+      type: Object,
+      default: () => {
+        return {
+          backgroundColor: "transparent",
+          height: "100px"
+        };
+      }
+    },
+    imgWarp: {
+      type: Object,
+      default: () => {
+        return {
+          width: "40px",
+          height: "40px",
+          right: "0px"
+        };
+      }
+    },
+    // 是否垂直展示
+    isVertical: {
+      type: Boolean,
+      default: true
+    },
+    themelist: {
+      type: Array,
+      required: true,
+      validator: (value) => {
+        if (value.length == 0) {
+          console.error("菜单数组不能为空");
+        }
+        return value.length > 0;
+      }
+    },
+    color: {
+      type: String,
+      default: "#0B101A"
+    },
+    hoverBgColor: {
+      type: String,
+      default: "var(--hoverbg)"
+    }
+  },
+  emits: ["selectCategory"],
+  setup(__props, { emit: __emit }) {
+    const emits = __emit;
+    const themelistRef = vue.ref();
+    const props = __props;
+    const overlayRefs = vue.ref([]);
+    const setItemRefs = vue.ref([]);
+    const selectTheme = vue.ref(props.themelist[0]);
+    const getDirection = (event, element) => {
+      const rect = element.getBoundingClientRect();
+      const x = event.clientX - rect.left - rect.width / 2;
+      const y = event.clientY - rect.top - rect.height / 2;
+      let dir = Math.round((Math.atan2(y, x) * (180 / Math.PI) + 180) / 90 + 3) % 4;
+      return dir;
+    };
+    const handleMouseEnter = (index, event) => {
+      const overlay = overlayRefs.value[index];
+      const element = setItemRefs.value[index];
+      if (overlay) {
+        const direction = getDirection(event, element);
+        overlay.style.transition = "";
+        overlay.classList.remove("overlay-leave-to-left", "overlay-leave-to-top", "overlay-leave-to-right", "overlay-leave-to-bottom");
+        switch (direction) {
+          case 0:
+            overlay.classList.add("overlay-enter-from-top");
+            break;
+          case 1:
+            overlay.classList.add("overlay-enter-from-right");
+            break;
+          case 2:
+            overlay.classList.add("overlay-enter-from-bottom");
+            break;
+          case 3:
+            overlay.classList.add("overlay-enter-from-left");
+            break;
+        }
+        requestAnimationFrame(() => {
+          overlay.style.transition = "transform 0.5s ease";
+          switch (direction) {
+            case 0:
+              overlay.style.transform = "translateY(0%)";
+              break;
+            case 1:
+              overlay.style.transform = "translateX(0%)";
+              break;
+            case 2:
+              overlay.style.transform = "translateY(0%)";
+              break;
+            case 3:
+              overlay.style.transform = "translateX(0%)";
+              break;
+          }
+        });
+      }
+    };
+    const handleMouseLeave = (index, event) => {
+      const overlay = overlayRefs.value[index];
+      if (overlay) {
+        const element = setItemRefs.value[index];
+        const direction = getDirection(event, element);
+        overlay.style.transition = "";
+        overlay.classList.remove("overlay-enter-from-left", "overlay-enter-from-top", "overlay-enter-from-right", "overlay-enter-from-bottom");
+        switch (direction) {
+          case 0:
+            overlay.classList.add("overlay-leave-to-top");
+            break;
+          case 1:
+            overlay.classList.add("overlay-leave-to-right");
+            break;
+          case 2:
+            overlay.classList.add("overlay-leave-to-bottom");
+            break;
+          case 3:
+            overlay.classList.add("overlay-leave-to-left");
+            break;
+        }
+        requestAnimationFrame(() => {
+          overlay.style.transition = "transform 0.5s ease";
+          switch (direction) {
+            case 0:
+              overlay.style.transform = "translateY(-100%)";
+              break;
+            case 1:
+              overlay.style.transform = "translateX(100%)";
+              break;
+            case 2:
+              overlay.style.transform = "translateY(100%)";
+              break;
+            case 3:
+              overlay.style.transform = "translateX(-100%)";
+              break;
+          }
+        });
+      }
+    };
+    const themeStyle = vue.computed(() => {
+      let _style = { color: props.color };
+      if (props.isVertical)
+        ;
+      else {
+        _style.display = "flex";
+        _style.justifyContent = "center";
+      }
+      return _style;
+    });
+    const handleClick = (item) => {
+      selectTheme.value = item;
+      emits("selectCategory", item);
+    };
+    vue.watch(
+      () => props.themelist,
+      (newValue) => {
+        themelistRef.value;
+      },
+      {
+        deep: true
+      }
+    );
+    return (_ctx, _cache) => {
+      return vue.openBlock(), vue.createElementBlock("ul", {
+        class: "theme-list",
+        ref_key: "themelistRef",
+        ref: themelistRef,
+        style: vue.normalizeStyle({ justifyContent: __props.isCenter ? "center" : "start" })
+      }, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(__props.themelist, (item, index) => {
+          return vue.openBlock(), vue.createElementBlock("li", {
+            class: vue.normalizeClass(["theme-item", { selected: selectTheme.value.title == item.title }]),
+            style: vue.normalizeStyle(__props.themeWarpStyle),
+            key: index,
+            ref_for: true,
+            ref: (el) => setItemRefs.value[index] = el,
+            onMouseenter: (event) => handleMouseEnter(index, event),
+            onMouseleave: (event) => handleMouseLeave(index, event),
+            onClick: ($event) => handleClick(item)
+          }, [
+            vue.createElementVNode("div", {
+              class: "theme-title",
+              style: vue.normalizeStyle(themeStyle.value)
+            }, [
+              item.icon ? (vue.openBlock(), vue.createElementBlock("div", {
+                key: 0,
+                style: vue.normalizeStyle({ height: __props.imgWarp.height, marginRight: __props.imgWarp.right })
+              }, [
+                vue.createElementVNode("img", {
+                  style: vue.normalizeStyle([{ "vertical-align": "middle" }, { width: __props.imgWarp.width }]),
+                  src: item.icon
+                }, null, 12, _hoisted_2)
+              ], 4)) : vue.createCommentVNode("", true),
+              vue.createTextVNode(" " + vue.toDisplayString(item.title), 1)
+            ], 4),
+            vue.createElementVNode("div", {
+              class: "overlay",
+              ref_for: true,
+              ref: (el) => overlayRefs.value[index] = el
+            }, null, 512)
+          ], 46, _hoisted_1);
+        }), 128))
+      ], 4);
+    };
+  }
+};
+const nav = /* @__PURE__ */ _pluginVue_exportHelper(_sfc_main, [["__scopeId", "data-v-cb04959d"]]);
+module.exports = nav;

package/dist/cjs/src/components/layout/nav.vue2.cjs

@@ -0,0 +1 @@
+"use strict";

package/dist/cjs/src/components/layout/nav.vue3.cjs

@@ -0,0 +1 @@
+"use strict";