yuang-framework-ui-pc 1.1.44 → 1.1.46

package/lib/ele-table/style/index.scss

@@ -0,0 +1,219 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use '../../ele-data-table/style/css-var.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-table-var($ele);
+
+.ele-table {
+  width: 100%;
+  border-spacing: 0;
+  border-collapse: separate;
+
+  /* 单元格样式 */
+  & > tr,
+  & > thead > tr,
+  & > tbody > tr,
+  & > tfoot > tr {
+    & > th,
+    & > td {
+      color: eleVar('table', 'color');
+      font-size: eleVar('table', 'font-size');
+      font-weight: normal;
+      line-height: eleVar('table', 'line-height');
+      padding: eleVar('table', 'padding');
+      transition: background-color $transition-base;
+      border-width: 0;
+      border-style: solid;
+      border-color: eleVar('table', 'border-color');
+      border-bottom-width: 1px;
+      vertical-align: middle;
+      box-sizing: border-box;
+      text-align: left;
+
+      /* 单元格对齐方式 */
+      &.is-align-left {
+        text-align: left;
+      }
+
+      &.is-align-center {
+        text-align: center;
+      }
+
+      &.is-align-right {
+        text-align: right;
+      }
+    }
+
+    & > td {
+      background: eleVar('table', 'tr-bg');
+    }
+
+    &:hover > td {
+      background: eleVar('table', 'tr-hover-bg');
+    }
+  }
+
+  /* 表头单元格 */
+  & > tr > th,
+  & > thead > tr > th,
+  & > tbody > tr > th,
+  & > tfoot > tr > th,
+  & > thead > tr > td {
+    color: eleVar('table', 'th-color');
+    font-weight: eleVar('table', 'th-font-weight');
+    background: eleVar('table', 'th-bg');
+  }
+
+  & > thead > tr > th {
+    position: relative;
+
+    &::after {
+      content: '';
+      width: 0;
+      height: 20px;
+      border-right: 1px solid eleVar('table', 'border-color');
+      position: absolute;
+      right: 0;
+      top: 50%;
+      margin-top: -10px;
+    }
+  }
+
+  & > thead > tr > th:last-child::after,
+  &.is-border > thead > tr > th::after {
+    display: none;
+  }
+
+  /* 表尾 */
+  & > tfoot > tr > td {
+    background: eleVar('table', 'th-bg');
+  }
+
+  &:not(.is-border) > tfoot > tr:last-child > td {
+    border-bottom-width: 0;
+  }
+
+  /* 圆角 */
+  @include table-radius(eleVar('table', 'radius'));
+
+  /* 斑马纹 */
+  &.is-stripe {
+    & > tr:nth-child(even),
+    & > tbody > tr:nth-child(even) {
+      & > td {
+        background: eleVar('table', 'even-bg');
+      }
+
+      &:hover > td {
+        background: eleVar('table', 'tr-hover-bg');
+      }
+    }
+  }
+
+  /* 行选中 */
+  & > tr.is-active,
+  & > tbody > tr.is-active,
+  &.is-stripe > tr.is-active,
+  &.is-stripe > tbody > tr.is-active {
+    & > td {
+      background: eleVar('table', 'tr-active-bg');
+    }
+
+    &:hover > td {
+      background: eleVar('table', 'tr-active-hover-bg');
+    }
+  }
+
+  /* 大型尺寸 */
+  &.is-large {
+    & > tr,
+    & > thead > tr,
+    & > tbody > tr,
+    & > tfoot > tr {
+      & > th,
+      & > td {
+        font-size: eleVar('table', 'lg-size');
+        padding: eleVar('table', 'lg-padding');
+      }
+    }
+
+    @include table-radius(eleVar('table', 'lg-radius'));
+  }
+
+  /* 小型尺寸 */
+  &.is-small {
+    & > tr,
+    & > thead > tr,
+    & > tbody > tr,
+    & > tfoot > tr {
+      & > th,
+      & > td {
+        font-size: eleVar('table', 'sm-size');
+        padding: eleVar('table', 'sm-padding');
+      }
+    }
+
+    @include table-radius(eleVar('table', 'sm-radius'));
+  }
+
+  /* 全边框 */
+  &.is-border {
+    border-top: 1px solid eleVar('table', 'border-color');
+    border-left: 1px solid eleVar('table', 'border-color');
+
+    & > tr,
+    & > thead > tr,
+    & > tbody > tr,
+    & > tfoot > tr {
+      & > th,
+      & > td {
+        border-right-width: 1px;
+      }
+    }
+  }
+
+  &:not(.has-header) {
+    border-top: 1px solid eleVar('table', 'border-color');
+  }
+
+  /* 表格内组件样式优化 */
+  @include table-common-style();
+
+  /* 打印风格的皮肤 */
+  &.is-print-skin {
+    table-layout: fixed;
+    border-collapse: collapse;
+    word-break: break-all;
+
+    &.is-border {
+      border-right: 2px solid eleVar('table', 'border-color');
+
+      & > tr,
+      & > thead > tr,
+      & > tbody > tr,
+      & > tfoot > tr {
+        & > th,
+        & > td {
+          border-right-width: 0;
+          border-left-width: 1px;
+        }
+      }
+    }
+  }
+}
+
+body table.ele-table.is-print-skin {
+  #{eleVarName('table', 'color')}: #000;
+  #{eleVarName('table', 'th-color')}: #000;
+  #{eleVarName('table', 'border-color')}: #000;
+  #{eleVarName('table', 'bg')}: transparent;
+  #{eleVarName('table', 'th-bg')}: transparent;
+  #{eleVarName('table', 'tr-bg')}: transparent;
+}
+
+table.ele-table.is-border.is-print-skin {
+  #{eleVarName('table', 'radius')}: 0;
+  #{eleVarName('table', 'sm-radius')}: 0;
+  #{eleVarName('table', 'lg-radius')}: 0;
+}

package/lib/ele-table-select/style/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 表格下拉选择主题变量 */
+@mixin set-table-select-var($var) {
+  .ele-table-select-popper {
+    @include set-ele-var('table-select', $var);
+  }
+}

package/lib/ele-tabs/index.cjs

@@ -0,0 +1,478 @@
+"use strict";
+const vue = require("vue");
+const SortableJs = require("sortablejs");
+const elementPlus = require("element-plus");
+const icons = require("../icons");
+const core = require("../utils/core");
+const hook = require("../utils/hook");
+const EleDropdown = require("../ele-dropdown/index");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleTabs",
+  components: {
+    ElTabs: elementPlus.ElTabs,
+    ElTabPane: elementPlus.ElTabPane,
+    ElIcon: elementPlus.ElIcon,
+    EleDropdown,
+    CornerLeftFilled: icons.CornerLeftFilled,
+    CornerRightFilled: icons.CornerRightFilled
+  },
+  props: props.tabsProps,
+  emits: props.tabsEmits,
+  setup(props$1, { emit }) {
+    let sortableIns = null;
+    let currentSortItemId = null;
+    let contextMenuTabItem = null;
+    let contextMenuTabName = null;
+    const wrapProps = vue.inject(props.TAB_WRAP_KEY, null);
+    const [startScrollTimer, _stopScrollTimer, scrollWaiting] = hook.useTimer(320);
+    const { bindMousewheel, unbindMousewheel } = hook.useMousewheel((param) => {
+      const { e, direction } = param;
+      scrollTabs(direction === "up" ? "prev" : "next", () => {
+        e.preventDefault();
+        e.stopPropagation();
+      });
+    });
+    const { bindTouchEvent, unbindTouchEvent } = hook.useTouchEvent({
+      end: (param) => {
+        if (param.distanceX && param.distanceX > 80) {
+          scrollTabs("prev");
+        } else if (param.distanceX && param.distanceX < 80) {
+          scrollTabs("next");
+        }
+      }
+    });
+    const [startGhostTimer] = hook.useTimer(100);
+    const tabRef = vue.ref(null);
+    const isOnlyTab = vue.computed(() => wrapProps == null);
+    const tabSize = vue.computed(
+      () => wrapProps == null ? props$1.size : wrapProps.size
+    );
+    const tabType = vue.computed(
+      () => wrapProps == null ? props$1.type : wrapProps.type
+    );
+    const tabProps = vue.computed(() => {
+      return core.pick(props$1, props.tabPropKeys);
+    });
+    const ctxMenuDropdownRef = vue.ref(null);
+    const ctxMenuDropdownItems = vue.shallowRef([]);
+    const ctxMenuDropdownVirtualRef = vue.ref();
+    const updateModelValue = (name) => {
+      emit("update:modelValue", name);
+    };
+    const handleContextmenu = (e) => {
+      if (!props$1.contextMenu) {
+        return;
+      }
+      const el = e.target;
+      if (el && (el.classList.contains("is-icon-close") || el.classList.contains("el-tabs__nav") || el.classList.contains("el-tabs__item"))) {
+        e.preventDefault();
+      }
+    };
+    const handleTabClick = (pane, e) => {
+      emit("tabClick", pane, e);
+    };
+    const handleTabChange = (name) => {
+      emit("tabChange", name);
+    };
+    const handleTabRemove = (name) => {
+      emit("tabRemove", name);
+    };
+    const handleTabAdd = () => {
+      emit("tabAdd");
+    };
+    const handleEdit = (name, action) => {
+      emit("edit", name, action);
+    };
+    const handleItemClick = (item, tabName, e) => {
+      if (props$1.handleClick) {
+        e.stopPropagation();
+      }
+      emit("tabItemClick", {
+        item,
+        name: item ? item.name : tabName,
+        active: props$1.modelValue
+      });
+    };
+    const handleItemCtxMenuVisible = (visible) => {
+      if (visible) {
+        emit(
+          "tabContextOpen",
+          ctxMenuDropdownRef.value,
+          contextMenuTabItem,
+          contextMenuTabName
+        );
+      }
+    };
+    const handleItemCtxMenuClick = (command) => {
+      if (contextMenuTabItem != null || contextMenuTabName != null) {
+        emit("tabContextMenu", {
+          command,
+          item: contextMenuTabItem,
+          name: contextMenuTabItem ? contextMenuTabItem.name : contextMenuTabName,
+          active: props$1.modelValue
+        });
+      }
+    };
+    const getContextMenus = (item, tabName) => {
+      if (typeof props$1.contextMenus === "function") {
+        return props$1.contextMenus(item, tabName);
+      }
+      return props$1.contextMenus;
+    };
+    const hideAllDropdown = () => {
+      if (ctxMenuDropdownRef.value) {
+        ctxMenuDropdownRef.value.handleClose();
+      }
+    };
+    const showItemContextMenu = (item, tabName, itemEl) => {
+      if (contextMenuTabItem != null && contextMenuTabItem === item || contextMenuTabName != null && contextMenuTabName === tabName) {
+        return;
+      }
+      hideAllDropdown();
+      vue.nextTick(() => {
+        contextMenuTabItem = item;
+        contextMenuTabName = tabName;
+        ctxMenuDropdownItems.value = getContextMenus(item, tabName) || [];
+        ctxMenuDropdownVirtualRef.value = itemEl;
+        if (props$1.contextMenu && ctxMenuDropdownItems.value.length) {
+          vue.nextTick(() => {
+            ctxMenuDropdownRef.value && ctxMenuDropdownRef.value.handleOpen();
+          });
+        }
+      });
+    };
+    const handleItemContextmenu = (item, tabName, e) => {
+      const itemEl = e.currentTarget;
+      if (!props$1.contextMenu || ctxMenuDropdownVirtualRef.value === itemEl) {
+        return;
+      }
+      e.preventDefault();
+      showItemContextMenu(item, tabName, itemEl);
+    };
+    const getHeaderEl = () => {
+      const tabEl = tabRef.value ? tabRef.value.$el : void 0;
+      return tabEl ? tabEl.querySelector(".el-tabs__header") : void 0;
+    };
+    const getNavEl = () => {
+      const headerEl = getHeaderEl();
+      return headerEl ? headerEl.querySelector(".el-tabs__nav") : void 0;
+    };
+    const updateActiveBar = () => {
+      const el = getNavEl();
+      if (el) {
+        const bar = el.querySelector(".el-tabs__active-bar");
+        if (bar) {
+          bar.style.width = "0px";
+        }
+      }
+    };
+    const scrollTabs = (direction, done) => {
+      const tabEl = getHeaderEl();
+      if (tabEl && !scrollWaiting.value) {
+        const el = tabEl.querySelector(`.el-tabs__nav-${direction}`);
+        if (el && !el.classList.contains("is-disabled")) {
+          startScrollTimer();
+          done && done();
+          el.click();
+        }
+      }
+    };
+    const checkSortGhostTab = () => {
+      const navEl = getNavEl();
+      if (navEl == null) {
+        return;
+      }
+      if (currentSortItemId == null) {
+        const el2 = navEl.querySelector(".el-tabs__item.sortable-ghost");
+        if (el2 != null) {
+          el2.classList.remove("sortable-ghost");
+        }
+        return;
+      }
+      const el = navEl.querySelector(
+        `.el-tabs__item[id="${currentSortItemId}"]`
+      );
+      if (el != null) {
+        el.classList.add("sortable-ghost");
+      }
+    };
+    const bindDragSort = () => {
+      unbindDragSort();
+      const navEl = getNavEl();
+      if (!props$1.sortable || !navEl) {
+        return;
+      }
+      sortableIns = new SortableJs(navEl, {
+        draggable: ".el-tabs__item",
+        delay: 20,
+        onUpdate: ({ oldDraggableIndex, newDraggableIndex }) => {
+          if (typeof oldDraggableIndex === "number" && typeof newDraggableIndex === "number") {
+            const data = [...props$1.items];
+            data.splice(
+              newDraggableIndex,
+              0,
+              data.splice(oldDraggableIndex, 1)[0]
+            );
+            emit("tabSortChange", data);
+          }
+        },
+        onStart: (e) => {
+          currentSortItemId = e.item.getAttribute("id");
+          checkSortGhostTab();
+          startGhostTimer(() => {
+            checkSortGhostTab();
+          });
+        },
+        onEnd: () => {
+          currentSortItemId = null;
+          checkSortGhostTab();
+        },
+        onChange: () => {
+          checkSortGhostTab();
+          startGhostTimer(() => {
+            checkSortGhostTab();
+          });
+        },
+        onMove: () => {
+          checkSortGhostTab();
+          startGhostTimer(() => {
+            checkSortGhostTab();
+          });
+        },
+        setData: () => {
+        }
+      });
+    };
+    const unbindDragSort = () => {
+      sortableIns && sortableIns.destroy();
+      sortableIns = null;
+      currentSortItemId = null;
+    };
+    const initMousewheelEvent = () => {
+      const el = getHeaderEl();
+      if (el != null) {
+        unbindMousewheel(el);
+        if (props$1.mousewheel) {
+          bindMousewheel(el);
+        }
+      }
+    };
+    const initTouchEvent = () => {
+      const el = getHeaderEl();
+      if (el != null) {
+        unbindTouchEvent(el);
+        if (!props$1.sortable) {
+          bindTouchEvent(el);
+        }
+      }
+    };
+    if (wrapProps && wrapProps.setTabMethods) {
+      wrapProps.setTabMethods({
+        triggerTabItemClick: handleItemClick,
+        triggerItemContextMenu: handleItemContextmenu
+      });
+    }
+    vue.onMounted(() => {
+      initMousewheelEvent();
+      initTouchEvent();
+      bindDragSort();
+    });
+    vue.onBeforeUnmount(() => {
+      if (wrapProps && wrapProps.setTabMethods) {
+        wrapProps.setTabMethods({
+          triggerTabItemClick: void 0,
+          triggerItemContextMenu: void 0
+        });
+      }
+      contextMenuTabItem = null;
+      contextMenuTabName = null;
+      const el = getHeaderEl();
+      if (el != null) {
+        unbindMousewheel(el);
+        unbindTouchEvent(el);
+      }
+      unbindDragSort();
+    });
+    vue.watch(
+      () => props$1.sortable,
+      () => {
+        bindDragSort();
+        initTouchEvent();
+      }
+    );
+    vue.watch(
+      () => props$1.mousewheel,
+      () => {
+        initMousewheelEvent();
+      }
+    );
+    return {
+      omit: core.omit,
+      tabRef,
+      isOnlyTab,
+      tabSize,
+      tabType,
+      tabProps,
+      ctxMenuDropdownRef,
+      ctxMenuDropdownItems,
+      ctxMenuDropdownVirtualRef,
+      updateModelValue,
+      handleContextmenu,
+      handleTabClick,
+      handleTabChange,
+      handleTabRemove,
+      handleTabAdd,
+      handleEdit,
+      handleItemClick,
+      handleItemCtxMenuVisible,
+      handleItemCtxMenuClick,
+      handleItemContextmenu,
+      hideAllDropdown,
+      updateActiveBar,
+      scrollTabs
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = ["onClick", "onContextmenu"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CornerLeftFilled = vue.resolveComponent("CornerLeftFilled");
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  const _component_CornerRightFilled = vue.resolveComponent("CornerRightFilled");
+  const _component_ElTabPane = vue.resolveComponent("ElTabPane");
+  const _component_EleDropdown = vue.resolveComponent("EleDropdown");
+  const _component_ElTabs = vue.resolveComponent("ElTabs");
+  return vue.openBlock(), vue.createBlock(_component_ElTabs, vue.mergeProps(_ctx.tabProps, {
+    ref: "tabRef",
+    type: _ctx.tabType === "card" || _ctx.tabType === "border-card" ? _ctx.tabType : void 0,
+    class: [
+      "ele-tabs",
+      { "ele-tabs-wrap": _ctx.isOnlyTab },
+      { "is-small": _ctx.tabSize === "small" },
+      { "is-large": _ctx.tabSize === "large" },
+      { "is-default": !_ctx.tabType || _ctx.tabType === "default" },
+      { "is-plain": _ctx.tabType === "plain" },
+      { "is-simple": _ctx.tabType === "simple" },
+      { "is-indicator": _ctx.tabType === "indicator" },
+      { "is-button": _ctx.tabType === "button" },
+      { "is-tag": _ctx.tabType === "tag" },
+      { "is-center": _ctx.center },
+      { "is-sortable": _ctx.sortable },
+      { "is-flex-table": _ctx.flexTable }
+    ],
+    "onUpdate:modelValue": _ctx.updateModelValue,
+    onTabClick: _ctx.handleTabClick,
+    onTabChange: _ctx.handleTabChange,
+    onTabRemove: _ctx.handleTabRemove,
+    onTabAdd: _ctx.handleTabAdd,
+    onEdit: _ctx.handleEdit,
+    onContextmenu: _ctx.handleContextmenu
+  }), vue.createSlots({
+    default: vue.withCtx(() => [
+      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item, index2) => {
+        return vue.openBlock(), vue.createBlock(_component_ElTabPane, vue.mergeProps({
+          key: [
+            index2,
+            item.name,
+            item.label,
+            !!item.closable,
+            !!item.disabled,
+            !!item.lazy
+          ].join("-")
+        }, { ref_for: true }, _ctx.omit(item, ["slot", "meta"])), vue.createSlots({
+          label: vue.withCtx(() => [
+            vue.createElementVNode("div", {
+              class: "ele-tab-title",
+              onClick: (e) => _ctx.handleItemClick(item, void 0, e),
+              onContextmenu: (e) => _ctx.handleItemContextmenu(item, void 0, e)
+            }, [
+              vue.renderSlot(_ctx.$slots, "label", {
+                item,
+                label: item.label,
+                active: _ctx.modelValue
+              }, () => [
+                vue.createTextVNode(vue.toDisplayString(item.label), 1)
+              ])
+            ], 40, _hoisted_1),
+            _ctx.tabType === "simple" || _ctx.tabType === "indicator" ? (vue.openBlock(), vue.createBlock(_component_ElIcon, {
+              key: 0,
+              class: "ele-tab-corner-left"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_CornerLeftFilled)
+              ]),
+              _: 1
+            })) : vue.createCommentVNode("", true),
+            _ctx.tabType === "simple" || _ctx.tabType === "indicator" ? (vue.openBlock(), vue.createBlock(_component_ElIcon, {
+              key: 1,
+              class: "ele-tab-corner-right"
+            }, {
+              default: vue.withCtx(() => [
+                vue.createVNode(_component_CornerRightFilled)
+              ]),
+              _: 1
+            })) : vue.createCommentVNode("", true)
+          ]),
+          _: 2
+        }, [
+          item.name && _ctx.$slots[item.slot || item.name] ? {
+            name: "default",
+            fn: vue.withCtx(() => [
+              vue.renderSlot(_ctx.$slots, item.slot || item.name, { item })
+            ]),
+            key: "0"
+          } : void 0
+        ]), 1040);
+      }), 128)),
+      _ctx.contextMenu ? (vue.openBlock(), vue.createBlock(_component_EleDropdown, vue.mergeProps(
+        {
+          key: 0,
+          triggerKeys: [],
+          persistent: false,
+          placement: "bottom-start",
+          popperClass: "ele-tab-popup",
+          popperOptions: {
+            modifiers: [{ name: "offset", options: { offset: [0, 8] } }]
+          }
+        },
+        !_ctx.contextMenu || typeof _ctx.contextMenu == "boolean" ? {} : _ctx.contextMenu,
+        {
+          ref: "ctxMenuDropdownRef",
+          componentType: "pro",
+          preventContextmenu: true,
+          trigger: "contextmenu",
+          virtualTriggering: true,
+          virtualRef: _ctx.ctxMenuDropdownVirtualRef,
+          disabled: !_ctx.ctxMenuDropdownItems.length,
+          items: _ctx.ctxMenuDropdownItems,
+          onCommand: _ctx.handleItemCtxMenuClick,
+          onVisibleChange: _ctx.handleItemCtxMenuVisible
+        }
+      ), null, 16, ["virtualRef", "disabled", "items", "onCommand", "onVisibleChange"])) : vue.createCommentVNode("", true)
+    ]),
+    _: 2
+  }, [
+    _ctx.$slots["add-icon"] ? {
+      name: "add-icon",
+      fn: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "add-icon")
+      ]),
+      key: "0"
+    } : _ctx.$slots.addIcon ? {
+      name: "addIcon",
+      fn: vue.withCtx(() => [
+        vue.renderSlot(_ctx.$slots, "addIcon")
+      ]),
+      key: "1"
+    } : void 0
+  ]), 1040, ["type", "class", "onUpdate:modelValue", "onTabClick", "onTabChange", "onTabRemove", "onTabAdd", "onEdit", "onContextmenu"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;