ele-admin-plus 1.0.0-beta.1

package/es/ele-tabs/index.js

@@ -0,0 +1,277 @@
+import { defineComponent, ref, onMounted, onBeforeUnmount, watch, resolveComponent, openBlock, createBlock, normalizeClass, withCtx, createElementBlock, Fragment, renderList, createSlots, createVNode, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { ElTabs, ElTabPane } from "element-plus";
+import SortableJs from "sortablejs";
+import TabTitle from "./components/tab-title";
+import { tabsProps, tabsEmits } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleTabs",
+  components: { ElTabs, ElTabPane, TabTitle },
+  props: tabsProps,
+  emits: tabsEmits,
+  setup(props, { emit }) {
+    const current = { sortIns: null, isScroll: false };
+    const tabRef = ref(null);
+    const itemRefs = ref([]);
+    const onUpdateModelValue = (name) => {
+      emit("update:modelValue", name);
+    };
+    const onTabClick = (pane, e) => {
+      emit("tabClick", pane, e);
+    };
+    const onTabChange = (name) => {
+      emit("tabChange", name);
+    };
+    const onTabRemove = (name) => {
+      emit("tabRemove", name);
+    };
+    const onTabAdd = () => {
+      emit("tabAdd");
+    };
+    const onEdit = (name, action) => {
+      emit("edit", name, action);
+    };
+    const onItemClick = (option) => {
+      emit("tabItemClick", option);
+    };
+    const onItemContextMenu = (option) => {
+      emit("tabContextMenu", option);
+    };
+    const onItemContextOpen = (ref2) => {
+      if (itemRefs.value) {
+        itemRefs.value.forEach((r) => {
+          if (r.dropdownRef && r.dropdownRef !== ref2) {
+            r.dropdownRef.handleClose();
+          }
+        });
+      }
+      emit("tabContextOpen", ref2);
+    };
+    const hideAllDropdown = () => {
+      if (itemRefs.value) {
+        itemRefs.value.forEach((r) => {
+          if (r.dropdownRef) {
+            r.dropdownRef.handleClose();
+          }
+        });
+      }
+    };
+    const updateActiveBar = () => {
+      const el = getNavEl();
+      if (el) {
+        const bar = el.querySelector(".el-tabs__active-bar");
+        if (bar) {
+          bar.style.width = "0px";
+        }
+      }
+    };
+    const bindDragSort = () => {
+      unbindDragSort();
+      const el = getNavEl();
+      if (!props.sortable || !el) {
+        return;
+      }
+      current.sortIns = new SortableJs(el, {
+        animation: 300,
+        draggable: ".el-tabs__item",
+        onUpdate: ({ oldDraggableIndex, newDraggableIndex }) => {
+          if (typeof oldDraggableIndex === "number" && typeof newDraggableIndex === "number") {
+            const temp = [...props.items];
+            temp.splice(
+              newDraggableIndex,
+              0,
+              temp.splice(oldDraggableIndex, 1)[0]
+            );
+            emit("tabSortChange", temp);
+          }
+        },
+        setData: () => {
+        }
+      });
+    };
+    const unbindDragSort = () => {
+      current.sortIns && current.sortIns.destroy();
+    };
+    const onContextmenu = (e) => {
+      const el = e.target;
+      if (el && el.classList.contains("is-icon-close")) {
+        e.preventDefault();
+      }
+    };
+    const onMousewheel = (e, isFirefox) => {
+      e.preventDefault();
+      e.stopPropagation();
+      const el = e.currentTarget;
+      if (el && !current.isScroll) {
+        current.isScroll = true;
+        const wheelDelta = e.wheelDelta || e.detail;
+        const delta = isFirefox ? -wheelDelta : wheelDelta;
+        if (delta > 0) {
+          const prevEl = el.querySelector(".el-tabs__nav-prev");
+          prevEl && prevEl.click();
+        } else if (delta < 0) {
+          const nextEl = el.querySelector(".el-tabs__nav-next");
+          nextEl && nextEl.click();
+        }
+        setTimeout(() => {
+          current.isScroll = false;
+        }, 300);
+      }
+    };
+    const onFMousewheel = (e) => {
+      onMousewheel(e, true);
+    };
+    const getHeaderEl = () => {
+      const tabEl = tabRef.value ? tabRef.value.$el : void 0;
+      const el = tabEl ? tabEl.querySelector(".el-tabs__header") : void 0;
+      return el;
+    };
+    const getNavEl = () => {
+      const headerEl = getHeaderEl();
+      const el = headerEl ? headerEl.querySelector(".el-tabs__nav") : void 0;
+      return el;
+    };
+    const bindEvents = () => {
+      bindDragSort();
+      const el = getHeaderEl();
+      if (el) {
+        el.addEventListener("mousewheel", onMousewheel);
+        el.addEventListener("DOMMouseScroll", onFMousewheel);
+      }
+    };
+    const unbindEvents = () => {
+      const el = getHeaderEl();
+      if (el) {
+        el.removeEventListener("mousewheel", onMousewheel);
+        el.removeEventListener("DOMMouseScroll", onFMousewheel);
+      }
+      unbindDragSort();
+    };
+    onMounted(() => {
+      bindEvents();
+    });
+    onBeforeUnmount(() => {
+      unbindEvents();
+    });
+    watch(
+      () => props.sortable,
+      () => {
+        bindDragSort();
+      }
+    );
+    return {
+      tabRef,
+      itemRefs,
+      onUpdateModelValue,
+      onTabClick,
+      onTabChange,
+      onTabRemove,
+      onTabAdd,
+      onEdit,
+      onItemClick,
+      onItemContextMenu,
+      onItemContextOpen,
+      onContextmenu,
+      hideAllDropdown,
+      updateActiveBar
+    };
+  }
+});
+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_TabTitle = resolveComponent("TabTitle");
+  const _component_ElTabPane = resolveComponent("ElTabPane");
+  const _component_ElTabs = resolveComponent("ElTabs");
+  return openBlock(), createBlock(_component_ElTabs, {
+    ref: "tabRef",
+    modelValue: _ctx.modelValue,
+    closable: _ctx.closable,
+    addable: _ctx.addable,
+    editable: _ctx.editable,
+    tabPosition: _ctx.tabPosition,
+    stretch: _ctx.stretch,
+    beforeLeave: _ctx.beforeLeave,
+    type: _ctx.type === "card" || _ctx.type === "border-card" ? _ctx.type : void 0,
+    class: normalizeClass([
+      "ele-tab",
+      { "is-small": _ctx.size === "small" },
+      { "is-large": _ctx.size === "large" },
+      { "is-default": !_ctx.type || _ctx.type === "default" },
+      { "is-plain": _ctx.type === "plain" },
+      { "is-simple": _ctx.type === "simple" },
+      { "is-indicator": _ctx.type === "indicator" },
+      { "is-button": _ctx.type === "button" },
+      { "is-center": _ctx.center }
+    ]),
+    "onUpdate:modelValue": _ctx.onUpdateModelValue,
+    onTabClick: _ctx.onTabClick,
+    onTabChange: _ctx.onTabChange,
+    onTabRemove: _ctx.onTabRemove,
+    onTabAdd: _ctx.onTabAdd,
+    onEdit: _ctx.onEdit,
+    onContextmenu: _ctx.onContextmenu
+  }, {
+    default: withCtx(() => [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index2) => {
+        return openBlock(), createBlock(_component_ElTabPane, {
+          key: index2 + "-" + item.name,
+          label: item.label,
+          disabled: item.disabled,
+          name: item.name,
+          closable: item.closable,
+          lazy: item.lazy
+        }, createSlots({
+          label: withCtx(() => [
+            createVNode(_component_TabTitle, {
+              ref_for: true,
+              ref: "itemRefs",
+              item,
+              label: item.label,
+              tabName: item.name,
+              active: _ctx.modelValue,
+              handleClick: _ctx.handleClick,
+              contextMenu: _ctx.contextMenu,
+              onContextMenu: _ctx.onItemContextMenu,
+              onContextOpen: _ctx.onItemContextOpen,
+              onItemClick: _ctx.onItemClick
+            }, createSlots({ _: 2 }, [
+              _ctx.$slots.label ? {
+                name: "label",
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, "label", normalizeProps(guardReactiveProps(slotProps || {})))
+                ]),
+                key: "0"
+              } : void 0,
+              _ctx.$slots.contextMenu ? {
+                name: "contextMenu",
+                fn: withCtx((slotProps) => [
+                  renderSlot(_ctx.$slots, "contextMenu", normalizeProps(guardReactiveProps(slotProps || {})))
+                ]),
+                key: "1"
+              } : void 0
+            ]), 1032, ["item", "label", "tabName", "active", "handleClick", "contextMenu", "onContextMenu", "onContextOpen", "onItemClick"])
+          ]),
+          _: 2
+        }, [
+          item.name && _ctx.$slots[item.name] ? {
+            name: "default",
+            fn: withCtx(() => [
+              renderSlot(_ctx.$slots, item.name, { item })
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1032, ["label", "disabled", "name", "closable", "lazy"]);
+      }), 128))
+    ]),
+    _: 3
+  }, 8, ["modelValue", "closable", "addable", "editable", "tabPosition", "stretch", "beforeLeave", "type", "class", "onUpdate:modelValue", "onTabClick", "onTabChange", "onTabRemove", "onTabAdd", "onEdit", "onContextmenu"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/ele-tabs/props.d.ts

@@ -0,0 +1,75 @@
+import type { PropType, ExtractPropTypes } from 'vue';
+import type { TabPaneItem, TabSize, TabType, TabEventOption, DropdownInstance } from './types';
+/**
+ * 属性
+ */
+export declare const tabsProps: {
+    items: {
+        type: PropType<TabPaneItem[]>;
+        required: boolean;
+    };
+    size: PropType<TabSize>;
+    type: PropType<TabType>;
+    center: BooleanConstructor;
+    contextMenu: BooleanConstructor;
+    sortable: BooleanConstructor;
+    handleClick: BooleanConstructor;
+    activeName: {
+        readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    closable: BooleanConstructor;
+    addable: BooleanConstructor;
+    modelValue: {
+        readonly type: PropType<import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown>>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    editable: BooleanConstructor;
+    tabPosition: import("element-plus/es/utils").EpPropFinalized<StringConstructor, "top" | "bottom" | "right" | "left", unknown, "top", boolean>;
+    beforeLeave: import("element-plus/es/utils").EpPropFinalized<(new (...args: any[]) => (newName: import("element-plus").TabPaneName, oldName: import("element-plus").TabPaneName) => import("element-plus/es/utils").Awaitable<boolean | void>) | (() => (newName: import("element-plus").TabPaneName, oldName: import("element-plus").TabPaneName) => import("element-plus/es/utils").Awaitable<boolean | void>) | {
+        (): (newName: import("element-plus").TabPaneName, oldName: import("element-plus").TabPaneName) => import("element-plus/es/utils").Awaitable<boolean | void>;
+        new (): any;
+        readonly prototype: any;
+    } | ((new (...args: any[]) => (newName: import("element-plus").TabPaneName, oldName: import("element-plus").TabPaneName) => import("element-plus/es/utils").Awaitable<boolean | void>) | (() => (newName: import("element-plus").TabPaneName, oldName: import("element-plus").TabPaneName) => import("element-plus/es/utils").Awaitable<boolean | void>) | {
+        (): (newName: import("element-plus").TabPaneName, oldName: import("element-plus").TabPaneName) => import("element-plus/es/utils").Awaitable<boolean | void>;
+        new (): any;
+        readonly prototype: any;
+    })[], unknown, unknown, () => true, boolean>;
+    stretch: BooleanConstructor;
+};
+export type TabsProps = ExtractPropTypes<typeof tabsProps>;
+/**
+ * 事件
+ */
+export declare const tabsEmits: {
+    tabItemClick: (_opt: TabEventOption) => boolean;
+    tabContextMenu: (_opt: TabEventOption) => boolean;
+    tabContextOpen: (_ref: DropdownInstance) => boolean;
+    tabSortChange: (_data: TabPaneItem[]) => boolean;
+    "update:modelValue": (name: import("element-plus").TabPaneName) => boolean;
+    tabClick: (pane: {
+        uid: number;
+        slots: Readonly<{
+            [name: string]: import("vue").Slot<any> | undefined;
+        }>;
+        props: {
+            readonly label: string;
+            readonly closable: boolean;
+            readonly disabled: boolean;
+            readonly lazy: boolean;
+            readonly name?: import("element-plus/es/utils").EpPropMergeType<readonly [StringConstructor, NumberConstructor], unknown, unknown> | undefined;
+        };
+        paneName: string | number | undefined;
+        active: boolean;
+        index: string | undefined;
+        isClosable: boolean;
+    }, ev: Event) => boolean;
+    tabChange: (name: import("element-plus").TabPaneName) => boolean;
+    edit: (paneName: import("element-plus").TabPaneName | undefined, action: "remove" | "add") => boolean;
+    tabRemove: (name: import("element-plus").TabPaneName) => boolean;
+    tabAdd: () => boolean;
+};

package/es/ele-tabs/props.js

@@ -0,0 +1,36 @@
+import { tabsProps as tabsProps$1, tabsEmits as tabsEmits$1 } from "element-plus";
+const tabsProps = {
+  ...tabsProps$1,
+  // 标签页数据
+  items: {
+    type: Array,
+    required: true
+  },
+  // 尺寸
+  size: String,
+  // 风格类型
+  type: String,
+  // 标签是否居中显示
+  center: Boolean,
+  // 是否支持右键菜单
+  contextMenu: Boolean,
+  // 是否支持拖动排序
+  sortable: Boolean,
+  // 是否自己处理页签点击事件
+  handleClick: Boolean
+};
+const tabsEmits = {
+  ...tabsEmits$1,
+  // 页签点击事件
+  tabItemClick: (_opt) => true,
+  // 页签右键菜单项点击事件
+  tabContextMenu: (_opt) => true,
+  // 页签右键菜单打开事件
+  tabContextOpen: (_ref) => true,
+  // 拖动排序改变事件
+  tabSortChange: (_data) => true
+};
+export {
+  tabsEmits,
+  tabsProps
+};

package/es/ele-tabs/style/css-var.scss

@@ -0,0 +1,35 @@
+@use '../../style/themes/default.scss' as *;
+
+@mixin set-tab-var($var) {
+  .ele-tab > .el-tabs__header,
+  .ele-tab-tool {
+    @include set-ele-var('tab', $var);
+  }
+
+  .ele-tab.is-small > .el-tabs__header,
+  .ele-tab-wrap.is-small .ele-tab-tool {
+    @include set-ele-var('tab-small', $var);
+  }
+
+  .ele-tab.is-large > .el-tabs__header,
+  .ele-tab-wrap.is-large .ele-tab-tool {
+    @include set-ele-var('tab-large', $var);
+  }
+
+  .ele-tab.is-simple > .el-tabs__header,
+  .ele-tab.is-indicator > .el-tabs__header,
+  .ele-tab-wrap.is-simple .ele-tab-tool,
+  .ele-tab-wrap.is-indicator .ele-tab-tool {
+    @include set-ele-var('tab-simple', $var);
+  }
+
+  .ele-tab.is-indicator > .el-tabs__header {
+    @include set-ele-var('tab-indicator', $var);
+  }
+
+  .ele-tab.is-button > .el-tabs__header,
+  .ele-tab-wrap.is-button .ele-tab-tool,
+  .ele-admin-tab-card .ele-admin-tabs {
+    @include set-ele-var('tab-button', $var);
+  }
+}

package/es/ele-tabs/style/index.js

@@ -0,0 +1,5 @@
+import 'element-plus/es/components/tabs/style/index';
+import 'element-plus/es/components/tab-pane/style/index';
+import 'element-plus/es/components/dropdown/style/index';
+import 'element-plus/es/components/dropdown-menu/style/index';
+import './index.scss';