ele-admin-plus 1.0.0-beta.1

package/es/ele-pro-layout/components/pro-tab-bar.js

@@ -0,0 +1,203 @@
+import { defineComponent, ref, computed, resolveComponent, openBlock, createBlock, normalizeClass, withCtx, createVNode, createSlots, renderSlot, normalizeProps, guardReactiveProps, createCommentVNode } from "vue";
+import { ElIcon } from "element-plus";
+import { House } from "@element-plus/icons-vue";
+import EleTabs from "../../ele-tabs/index";
+import EleTabTool from "../../ele-tab-tool/index";
+import EleTabWrap from "../../ele-tab-wrap/index";
+import TabTitle from "../../ele-tabs/components/tab-title";
+const _sfc_main = defineComponent({
+  name: "ProTabBar",
+  components: { ElIcon, House, EleTabWrap, EleTabTool, EleTabs, TabTitle },
+  props: {
+    // 页签数据
+    tabs: {
+      type: Array,
+      required: true
+    },
+    // 页签选中
+    active: {
+      type: String,
+      required: true
+    },
+    // 是否需要固定的主页页签
+    fixedHome: Boolean,
+    // 主页路由地址
+    homePath: String,
+    // 当前路由是否是主页
+    isHome: Boolean,
+    // 页签风格
+    tabStyle: String,
+    // 是否支持右键菜单
+    tabContextMenu: Boolean,
+    // 是否支持拖动排序
+    tabSortable: Boolean
+  },
+  emits: {
+    tabClick: (_opt) => true,
+    tabRemove: (_opt) => true,
+    tabContextMenu: (_opt) => true,
+    tabSortChange: (_data) => true
+  },
+  setup(props, { emit }) {
+    const homeRef = ref(null);
+    const tabRef = ref(null);
+    const items = computed(() => {
+      const temp = props.fixedHome ? props.tabs.filter((t) => !t.home) : props.tabs;
+      const onlyOne = !props.fixedHome && temp.length === 1;
+      return temp.map((d) => {
+        return {
+          name: d.key,
+          label: d.title,
+          closable: onlyOne && d.home ? false : d.closable
+        };
+      });
+    });
+    const onTabItemClick = (opt) => {
+      const key = opt.name;
+      const item = key ? props.tabs.find((d) => d.key === key) : void 0;
+      emit("tabClick", { key, item, active: props.active });
+    };
+    const onTabRemove = (key) => {
+      const item = key ? props.tabs.find((d) => d.key === key) : void 0;
+      emit("tabRemove", { item, key, active: props.active });
+    };
+    const onTabContextMenu = (opt) => {
+      const key = opt.name;
+      const item = key ? props.tabs.find((d) => d.key === key) : void 0;
+      const command = opt.command;
+      emit("tabContextMenu", { key, item, active: props.active, command });
+    };
+    const onTabContextOpen = (ref2) => {
+      const $home = homeRef.value;
+      if (!$home || !$home.dropdownRef) {
+        return;
+      }
+      if ($home.dropdownRef !== ref2) {
+        $home.dropdownRef.handleClose();
+      } else if (tabRef.value) {
+        tabRef.value.hideAllDropdown();
+      }
+    };
+    const onTabSortChange = (data) => {
+      const temp = data.map((d) => {
+        return props.tabs.find((t) => t.key === d.name);
+      });
+      if (props.fixedHome) {
+        const homeTab = props.tabs.find((t) => t.home);
+        if (homeTab) {
+          temp.unshift(homeTab);
+        }
+      }
+      emit("tabSortChange", temp);
+    };
+    return {
+      homeRef,
+      tabRef,
+      items,
+      onTabRemove,
+      onTabItemClick,
+      onTabContextMenu,
+      onTabContextOpen,
+      onTabSortChange
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_House = resolveComponent("House");
+  const _component_ElIcon = resolveComponent("ElIcon");
+  const _component_TabTitle = resolveComponent("TabTitle");
+  const _component_EleTabTool = resolveComponent("EleTabTool");
+  const _component_EleTabs = resolveComponent("EleTabs");
+  const _component_EleTabWrap = resolveComponent("EleTabWrap");
+  return openBlock(), createBlock(_component_EleTabWrap, {
+    type: _ctx.tabStyle,
+    class: normalizeClass(["ele-admin-tabs", { "is-fixed-home": _ctx.fixedHome }])
+  }, {
+    default: withCtx(() => [
+      _ctx.fixedHome ? (openBlock(), createBlock(_component_EleTabTool, {
+        key: 0,
+        tab: true,
+        active: _ctx.isHome
+      }, {
+        default: withCtx(() => [
+          createVNode(_component_TabTitle, {
+            ref: "homeRef",
+            active: _ctx.active,
+            tabName: _ctx.homePath,
+            handleClick: true,
+            contextMenu: _ctx.tabContextMenu,
+            onContextMenu: _ctx.onTabContextMenu,
+            onContextOpen: _ctx.onTabContextOpen,
+            onItemClick: _ctx.onTabItemClick
+          }, createSlots({
+            label: withCtx(() => [
+              renderSlot(_ctx.$slots, "tabHome", {}, () => [
+                createVNode(_component_ElIcon, {
+                  size: 16,
+                  style: { "vertical-align": "-2px" }
+                }, {
+                  default: withCtx(() => [
+                    createVNode(_component_House, { style: { "transform": "scale(0.98)" } })
+                  ]),
+                  _: 1
+                })
+              ])
+            ]),
+            _: 2
+          }, [
+            _ctx.$slots.tabContext ? {
+              name: "contextMenu",
+              fn: withCtx((slotProps) => [
+                renderSlot(_ctx.$slots, "tabContext", normalizeProps(guardReactiveProps(slotProps || {})))
+              ]),
+              key: "0"
+            } : void 0
+          ]), 1032, ["active", "tabName", "contextMenu", "onContextMenu", "onContextOpen", "onItemClick"])
+        ]),
+        _: 3
+      }, 8, ["active"])) : createCommentVNode("", true),
+      createVNode(_component_EleTabs, {
+        ref: "tabRef",
+        items: _ctx.items,
+        type: _ctx.tabStyle,
+        modelValue: _ctx.active,
+        handleClick: true,
+        sortable: _ctx.tabSortable,
+        contextMenu: _ctx.tabContextMenu,
+        onTabRemove: _ctx.onTabRemove,
+        onTabItemClick: _ctx.onTabItemClick,
+        onTabContextMenu: _ctx.onTabContextMenu,
+        onTabContextOpen: _ctx.onTabContextOpen,
+        onTabSortChange: _ctx.onTabSortChange
+      }, createSlots({ _: 2 }, [
+        _ctx.$slots.tabTitle ? {
+          name: "label",
+          fn: withCtx((slotProps) => [
+            renderSlot(_ctx.$slots, "tabTitle", normalizeProps(guardReactiveProps(slotProps || {})))
+          ]),
+          key: "0"
+        } : void 0,
+        _ctx.$slots.tabContext ? {
+          name: "contextMenu",
+          fn: withCtx((slotProps) => [
+            renderSlot(_ctx.$slots, "tabContext", normalizeProps(guardReactiveProps(slotProps || {})))
+          ]),
+          key: "1"
+        } : void 0
+      ]), 1032, ["items", "type", "modelValue", "sortable", "contextMenu", "onTabRemove", "onTabItemClick", "onTabContextMenu", "onTabContextOpen", "onTabSortChange"]),
+      renderSlot(_ctx.$slots, "tabExtra", { active: _ctx.active })
+    ]),
+    _: 3
+  }, 8, ["type", "class"]);
+}
+const proTabBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  proTabBar as default
+};

package/es/ele-pro-layout/components/sidebar-tool.d.ts

@@ -0,0 +1,2 @@
+declare const _sfc_main: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
+export default _sfc_main;

package/es/ele-pro-layout/components/sidebar-tool.js

@@ -0,0 +1,21 @@
+import { defineComponent, openBlock, createElementBlock, renderSlot } from "vue";
+const _sfc_main = defineComponent({
+  name: "SidebarTool"
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-sidebar-tool" };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    renderSlot(_ctx.$slots, "default")
+  ]);
+}
+const sidebarTool = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  sidebarTool as default
+};

package/es/ele-pro-layout/components/tab-dropdown.d.ts

@@ -0,0 +1,8 @@
+declare const _sfc_main: import("vue").DefineComponent<{}, {
+    onCommand: (command: string) => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    menuClick: (_command: string) => true;
+}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
+    onMenuClick?: ((_command: string) => any) | undefined;
+}, {}, {}>;
+export default _sfc_main;

package/es/ele-pro-layout/components/tab-dropdown.js

@@ -0,0 +1,72 @@
+import { defineComponent, resolveComponent, openBlock, createBlock, withCtx, createVNode, renderSlot, createElementVNode } from "vue";
+import { ArrowDown } from "@element-plus/icons-vue";
+import { ElDropdown, ElDropdownMenu, ElIcon } from "element-plus";
+import EleTabTool from "../../ele-tab-tool/index";
+const _sfc_main = defineComponent({
+  name: "TabDropdown",
+  components: { ElDropdown, ElDropdownMenu, ElIcon, ArrowDown, EleTabTool },
+  emits: {
+    menuClick: (_command) => true
+  },
+  setup(_props, { emit }) {
+    return {
+      onCommand: (command) => {
+        emit("menuClick", command);
+      }
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { style: { "text-align": "center", "outline": "none" } };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ArrowDown = resolveComponent("ArrowDown");
+  const _component_ElIcon = resolveComponent("ElIcon");
+  const _component_ElDropdownMenu = resolveComponent("ElDropdownMenu");
+  const _component_ElDropdown = resolveComponent("ElDropdown");
+  const _component_EleTabTool = resolveComponent("EleTabTool");
+  return openBlock(), createBlock(_component_EleTabTool, null, {
+    default: withCtx(() => [
+      createVNode(_component_ElDropdown, {
+        placement: "bottom-end",
+        popperClass: "ele-tab-popup",
+        onCommand: _ctx.onCommand
+      }, {
+        dropdown: withCtx(() => [
+          createVNode(_component_ElDropdownMenu, null, {
+            default: withCtx(() => [
+              renderSlot(_ctx.$slots, "default")
+            ]),
+            _: 3
+          })
+        ]),
+        default: withCtx(() => [
+          createElementVNode("div", _hoisted_1, [
+            renderSlot(_ctx.$slots, "icon", {}, () => [
+              createVNode(_component_ElIcon, {
+                size: 16,
+                style: { "vertical-align": "-3px" }
+              }, {
+                default: withCtx(() => [
+                  createVNode(_component_ArrowDown)
+                ]),
+                _: 1
+              })
+            ])
+          ])
+        ]),
+        _: 3
+      }, 8, ["onCommand"])
+    ]),
+    _: 3
+  });
+}
+const tabDropdown = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  tabDropdown as default
+};