yuang-framework-ui-pc 1.1.40 → 1.1.42

package/es/ele-tabs/index.js

@@ -1,480 +0,0 @@
-import { defineComponent, inject, ref, computed, shallowRef, onMounted, onBeforeUnmount, watch, nextTick, resolveComponent, openBlock, createBlock, mergeProps, createSlots, withCtx, createElementBlock, Fragment, renderList, createElementVNode, renderSlot, createTextVNode, toDisplayString, createVNode, createCommentVNode } from "vue";
-import SortableJs from "sortablejs";
-import { ElTabs, ElTabPane, ElIcon } from "element-plus";
-import { CornerLeftFilled, CornerRightFilled } from "../icons";
-import { pick, omit } from "../utils/core";
-import { useTimer, useMousewheel, useTouchEvent } from "../utils/hook";
-import EleDropdown from "../ele-dropdown/index";
-import { tabsProps, tabsEmits, TAB_WRAP_KEY, tabPropKeys } from "./props";
-const _sfc_main = defineComponent({
-  name: "EleTabs",
-  components: {
-    ElTabs,
-    ElTabPane,
-    ElIcon,
-    EleDropdown,
-    CornerLeftFilled,
-    CornerRightFilled
-  },
-  props: tabsProps,
-  emits: tabsEmits,
-  setup(props, { emit }) {
-    let sortableIns = null;
-    let currentSortItemId = null;
-    let contextMenuTabItem = null;
-    let contextMenuTabName = null;
-    const wrapProps = inject(TAB_WRAP_KEY, null);
-    const [startScrollTimer, _stopScrollTimer, scrollWaiting] = useTimer(320);
-    const { bindMousewheel, unbindMousewheel } = useMousewheel((param) => {
-      const { e, direction } = param;
-      scrollTabs(direction === "up" ? "prev" : "next", () => {
-        e.preventDefault();
-        e.stopPropagation();
-      });
-    });
-    const { bindTouchEvent, unbindTouchEvent } = useTouchEvent({
-      end: (param) => {
-        if (param.distanceX && param.distanceX > 80) {
-          scrollTabs("prev");
-        } else if (param.distanceX && param.distanceX < 80) {
-          scrollTabs("next");
-        }
-      }
-    });
-    const [startGhostTimer] = useTimer(100);
-    const tabRef = ref(null);
-    const isOnlyTab = computed(() => wrapProps == null);
-    const tabSize = computed(
-      () => wrapProps == null ? props.size : wrapProps.size
-    );
-    const tabType = computed(
-      () => wrapProps == null ? props.type : wrapProps.type
-    );
-    const tabProps = computed(() => {
-      return pick(props, tabPropKeys);
-    });
-    const ctxMenuDropdownRef = ref(null);
-    const ctxMenuDropdownItems = shallowRef([]);
-    const ctxMenuDropdownVirtualRef = ref();
-    const updateModelValue = (name) => {
-      emit("update:modelValue", name);
-    };
-    const handleContextmenu = (e) => {
-      if (!props.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.handleClick) {
-        e.stopPropagation();
-      }
-      emit("tabItemClick", {
-        item,
-        name: item ? item.name : tabName,
-        active: props.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.modelValue
-        });
-      }
-    };
-    const getContextMenus = (item, tabName) => {
-      if (typeof props.contextMenus === "function") {
-        return props.contextMenus(item, tabName);
-      }
-      return props.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();
-      nextTick(() => {
-        contextMenuTabItem = item;
-        contextMenuTabName = tabName;
-        ctxMenuDropdownItems.value = getContextMenus(item, tabName) || [];
-        ctxMenuDropdownVirtualRef.value = itemEl;
-        if (props.contextMenu && ctxMenuDropdownItems.value.length) {
-          nextTick(() => {
-            ctxMenuDropdownRef.value && ctxMenuDropdownRef.value.handleOpen();
-          });
-        }
-      });
-    };
-    const handleItemContextmenu = (item, tabName, e) => {
-      const itemEl = e.currentTarget;
-      if (!props.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.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.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.mousewheel) {
-          bindMousewheel(el);
-        }
-      }
-    };
-    const initTouchEvent = () => {
-      const el = getHeaderEl();
-      if (el != null) {
-        unbindTouchEvent(el);
-        if (!props.sortable) {
-          bindTouchEvent(el);
-        }
-      }
-    };
-    if (wrapProps && wrapProps.setTabMethods) {
-      wrapProps.setTabMethods({
-        triggerTabItemClick: handleItemClick,
-        triggerItemContextMenu: handleItemContextmenu
-      });
-    }
-    onMounted(() => {
-      initMousewheelEvent();
-      initTouchEvent();
-      bindDragSort();
-    });
-    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();
-    });
-    watch(
-      () => props.sortable,
-      () => {
-        bindDragSort();
-        initTouchEvent();
-      }
-    );
-    watch(
-      () => props.mousewheel,
-      () => {
-        initMousewheelEvent();
-      }
-    );
-    return {
-      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, props) => {
-  const target = sfc.__vccOpts || sfc;
-  for (const [key, val] of props) {
-    target[key] = val;
-  }
-  return target;
-};
-const _hoisted_1 = ["onClick", "onContextmenu"];
-function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  const _component_CornerLeftFilled = resolveComponent("CornerLeftFilled");
-  const _component_ElIcon = resolveComponent("ElIcon");
-  const _component_CornerRightFilled = resolveComponent("CornerRightFilled");
-  const _component_ElTabPane = resolveComponent("ElTabPane");
-  const _component_EleDropdown = resolveComponent("EleDropdown");
-  const _component_ElTabs = resolveComponent("ElTabs");
-  return openBlock(), createBlock(_component_ElTabs, 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
-  }), createSlots({
-    default: withCtx(() => [
-      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index2) => {
-        return openBlock(), createBlock(_component_ElTabPane, mergeProps({
-          key: [
-            index2,
-            item.name,
-            item.label,
-            !!item.closable,
-            !!item.disabled,
-            !!item.lazy
-          ].join("-"),
-          ref_for: true
-        }, _ctx.omit(item, ["slot", "meta"])), createSlots({
-          label: withCtx(() => [
-            createElementVNode("div", {
-              class: "ele-tab-title",
-              onClick: (e) => _ctx.handleItemClick(item, void 0, e),
-              onContextmenu: (e) => _ctx.handleItemContextmenu(item, void 0, e)
-            }, [
-              renderSlot(_ctx.$slots, "label", {
-                item,
-                label: item.label,
-                active: _ctx.modelValue
-              }, () => [
-                createTextVNode(toDisplayString(item.label), 1)
-              ])
-            ], 40, _hoisted_1),
-            _ctx.tabType === "simple" || _ctx.tabType === "indicator" ? (openBlock(), createBlock(_component_ElIcon, {
-              key: 0,
-              class: "ele-tab-corner-left"
-            }, {
-              default: withCtx(() => [
-                createVNode(_component_CornerLeftFilled)
-              ]),
-              _: 1
-            })) : createCommentVNode("", true),
-            _ctx.tabType === "simple" || _ctx.tabType === "indicator" ? (openBlock(), createBlock(_component_ElIcon, {
-              key: 1,
-              class: "ele-tab-corner-right"
-            }, {
-              default: withCtx(() => [
-                createVNode(_component_CornerRightFilled)
-              ]),
-              _: 1
-            })) : createCommentVNode("", true)
-          ]),
-          _: 2
-        }, [
-          item.name && _ctx.$slots[item.slot || item.name] ? {
-            name: "default",
-            fn: withCtx(() => [
-              renderSlot(_ctx.$slots, item.slot || item.name, { item })
-            ]),
-            key: "0"
-          } : void 0
-        ]), 1040);
-      }), 128)),
-      _ctx.contextMenu ? (openBlock(), createBlock(_component_EleDropdown, 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"])) : createCommentVNode("", true)
-    ]),
-    _: 2
-  }, [
-    _ctx.$slots["add-icon"] ? {
-      name: "add-icon",
-      fn: withCtx(() => [
-        renderSlot(_ctx.$slots, "add-icon")
-      ]),
-      key: "0"
-    } : _ctx.$slots.addIcon ? {
-      name: "addIcon",
-      fn: withCtx(() => [
-        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]]);
-export {
-  index as default
-};

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

@@ -1,8 +0,0 @@
-@use '../../style/util.scss' as *;
-
-/* 标签页主题变量 */
-@mixin set-tab-var($var) {
-  .ele-tabs-wrap {
-    @include set-ele-var('tab', $var);
-  }
-}

package/es/ele-tabs/style/index.d.ts

@@ -1 +0,0 @@
-

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

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

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

@@ -1,89 +0,0 @@
-import type { ElTabPaneProps } from '../ele-app/el';
-import type { DropdownItem } from '../ele-dropdown/types';
-
-/**
- * 页签数据
- */
-export interface TabPaneItem extends ElTabPaneProps {
-  /** 插槽名称 */
-  slot?: string;
-  /** 元数据 */
-  meta?: any;
-  /** 唯一标识 */
-  key?: string | number | symbol;
-}
-
-/**
- * 尺寸
- */
-export type TabSize = 'large' | 'default' | 'small';
-
-/**
- * 风格类型
- */
-export type TabType =
-  | 'default'
-  | 'card'
-  | 'border-card'
-  | 'plain'
-  | 'simple'
-  | 'indicator'
-  | 'button'
-  | 'tag';
-
-/**
- * 页签事件参数
- */
-export interface TabEventOption {
-  /** 页签标识 */
-  name?: string | number | null;
-  /** 页签数据 */
-  item?: TabPaneItem | null;
-  /** 当前选中的页签标识 */
-  active?: string | number;
-  /** 事件标识 */
-  command?: string;
-}
-
-/**
- * 获取右键菜单方法
- */
-export type ContextMenusFunc = (
-  item?: TabPaneItem,
-  tabName?: string | number
-) => DropdownItem[] | undefined;
-
-/**
- * 右键菜单属性
- */
-export type ContextMenus = DropdownItem[] | ContextMenusFunc;
-
-/**
- * 页签实例方法
- */
-export interface TabMethods {
-  /** 触发页签项点击事件 */
-  triggerTabItemClick?: (
-    item: TabPaneItem | undefined,
-    tabName: string | number | undefined,
-    e: MouseEvent
-  ) => void;
-  /** 触发页签项右键菜单事件 */
-  triggerItemContextMenu?: (
-    item: TabPaneItem | undefined,
-    tabName: string | number | undefined,
-    e: MouseEvent
-  ) => void;
-}
-
-/**
- * 标签页容器属性
- */
-export interface TabWrapProvide extends TabMethods {
-  /** 尺寸 */
-  size?: TabSize;
-  /** 风格类型 */
-  type?: TabType;
-  /** 设置页签实例方法 */
-  setTabMethods?: (methods: TabMethods) => void;
-}

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

@@ -1,8 +0,0 @@
-@use '../../style/util.scss' as *;
-
-/* 文本主题变量 */
-@mixin set-text-var($var) {
-  .ele-text {
-    @include set-ele-var('test', $var);
-  }
-}

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

@@ -1,39 +0,0 @@
-import { PropType, ExtractPropTypes } from 'vue';
-import { StyleValue } from '../ele-app/types';
-import { ElIconProps } from '../ele-app/el';
-import { TextType, TextSize, TextIcon } from './types';
-
-/**
- * 属性
- */
-export declare const textProps: {
-    /** 渲染标签 */
-    tag: {
-        type: StringConstructor;
-        default: string;
-    };
-    /** 类型 */
-    type: PropType<TextType>;
-    /** 文字大小 */
-    size: PropType<TextSize>;
-    /** 文字删除线 */
-    deleted: BooleanConstructor;
-    /** 文字下划线 */
-    underline: BooleanConstructor;
-    /** 是否加粗 */
-    strong: BooleanConstructor;
-    /** 是否斜体 */
-    italic: BooleanConstructor;
-    /** 图标 */
-    icon: PropType<TextIcon>;
-    /** 图标属性 */
-    iconProps: PropType<ElIconProps>;
-    /** 图标样式 */
-    iconStyle: PropType<StyleValue>;
-};
-export type TextProps = ExtractPropTypes<typeof textProps>;
-export type TextPropKeys = Array<keyof typeof textProps>;
-/**
- * 属性名
- */
-export declare const textPropKeys: TextPropKeys;

package/es/ele-text/props.js

@@ -1,30 +0,0 @@
-const textProps = {
-  /** 渲染标签 */
-  tag: {
-    type: String,
-    default: "div"
-  },
-  /** 类型 */
-  type: String,
-  /** 文字大小 */
-  size: String,
-  /** 文字删除线 */
-  deleted: Boolean,
-  /** 文字下划线 */
-  underline: Boolean,
-  /** 是否加粗 */
-  strong: Boolean,
-  /** 是否斜体 */
-  italic: Boolean,
-  /** 图标 */
-  icon: [String, Object, Function],
-  /** 图标属性 */
-  iconProps: Object,
-  /** 图标样式 */
-  iconStyle: Object
-};
-const textPropKeys = Object.keys(textProps);
-export {
-  textPropKeys,
-  textProps
-};