yuang-framework-ui-pc 1.1.44 → 1.1.46

package/lib/ele-menus/props.d.ts

@@ -0,0 +1,157 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { menuProps } from 'element-plus';
+import { MenuItem, MenuMode, MenuTheme, PopupMenuTheme, PopupColorful, EllipsisProps, TextEllipsisTooltip } from './types';
+
+/**
+ * 属性
+ */
+export declare const menusProps: {
+    mode: PropType<MenuMode>;
+    /** 菜单数据 */
+    items: {
+        type: PropType<MenuItem[]>;
+        required: boolean;
+    };
+    /** 主题 */
+    theme: PropType<MenuTheme>;
+    /** 弹出菜单主题 */
+    popupTheme: {
+        type: PropType<PopupMenuTheme>;
+        default: string;
+    };
+    /** 彩色菜单图标 */
+    colorful: BooleanConstructor;
+    /** 弹出菜单是否彩色图标 */
+    popupColorful: {
+        type: PropType<PopupColorful>;
+        default: string;
+    };
+    /** 一级子菜单类名 */
+    firstPopperClass: StringConstructor;
+    /** 禁用 tooltip */
+    tooltipDisabled: BooleanConstructor;
+    /** 省略菜单的属性 */
+    ellipsisProps: PropType<EllipsisProps>;
+    /** 是否开启菜单文本溢出提示 */
+    textEllipsisTooltip: PropType<TextEllipsisTooltip>;
+    defaultActive: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "";
+    };
+    defaultOpeneds: {
+        readonly type: PropType<string[]>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: () => [];
+    };
+    uniqueOpened: BooleanConstructor;
+    router: BooleanConstructor;
+    menuTrigger: {
+        readonly type: PropType<"hover" | "click">;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "hover";
+    };
+    collapse: BooleanConstructor;
+    backgroundColor: StringConstructor;
+    textColor: StringConstructor;
+    activeTextColor: StringConstructor;
+    closeOnClickOutside: BooleanConstructor;
+    collapseTransition: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    ellipsis: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    popperOffset: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 6;
+    };
+    ellipsisIcon: {
+        readonly type: PropType<string | import('vue').Component>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: () => any;
+    };
+    popperEffect: {
+        readonly type: PropType<import('element-plus').PopperEffect>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "dark";
+    };
+    popperClass: StringConstructor;
+    showTimeout: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 300;
+    };
+    hideTimeout: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 300;
+    };
+    persistent: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+};
+export type MenusProps = ExtractPropTypes<typeof menusProps>;
+export type MenuPropKeys = Array<keyof typeof menuProps>;
+/**
+ * 菜单组件属性名
+ */
+export declare const menuPropKeys: MenuPropKeys;
+/**
+ * 事件
+ */
+export declare const menusEmits: {
+    /** 子菜单项点击事件 */
+    itemClick: (_item: MenuItem, _e: MouseEvent) => boolean;
+    /** 子菜单项鼠标进入事件 */
+    itemMouseenter: (_item: MenuItem, _e: MouseEvent) => boolean;
+    /** 子菜单项鼠标离开事件 */
+    itemMouseleave: (_item: MenuItem, _e: MouseEvent) => boolean;
+    /** 父级菜单项鼠标进入事件 */
+    parentMouseenter: (_item: MenuItem, _e: MouseEvent) => boolean;
+    /** 父级菜单项鼠标离开事件 */
+    parentMouseleave: (_item: MenuItem, _e: MouseEvent) => boolean;
+    close: (index: string, indexPath: string[]) => boolean;
+    open: (index: string, indexPath: string[]) => boolean;
+    select: (index: string, indexPath: string[], item: import('element-plus').MenuItemClicked, routerResult?: Promise<void | import('vue-router').NavigationFailure>) => boolean;
+};

package/lib/ele-menus/style/index.cjs

@@ -0,0 +1,9 @@
+"use strict";
+require("element-plus/es/components/menu/style/index");
+require("element-plus/es/components/menu-item/style/index");
+require("element-plus/es/components/menu-item-group/style/index");
+require("element-plus/es/components/sub-menu/style/index");
+require("element-plus/es/components/icon/style/index");
+require("element-plus/es/components/badge/style/index");
+require("../../ele-tooltip/style/index");
+require("./index.scss");

package/lib/ele-menus/style/index.d.ts

@@ -0,0 +1 @@
+

package/lib/ele-menus/util.cjs

@@ -0,0 +1,132 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const vue = require("vue");
+const core = require("../utils/core");
+function getPopperClass(customerClass, theme, popTheme, colorful, popupColorful, firstPopClass, first, webkit) {
+  const popperClass = ["ele-menu"];
+  if (webkit) {
+    popperClass.push("is-webkit");
+  }
+  if (popTheme === "dark" || popTheme === "auto" && theme === "dark") {
+    popperClass.push("is-night ele-menu-dark");
+  }
+  if (popupColorful === true || popupColorful === "auto" && colorful) {
+    popperClass.push("is-colorful ele-menu-colorful");
+  }
+  if (first && firstPopClass) {
+    popperClass.push(firstPopClass);
+  }
+  if (customerClass) {
+    popperClass.push(customerClass);
+  }
+  return popperClass.join(" ");
+}
+function getMenuItems(menus, index, horizontal) {
+  if (!horizontal || !menus || !menus.length) {
+    return { items: menus };
+  }
+  const data = menus.map((d) => {
+    return { ...d, group: false };
+  });
+  if (index == null || index < 0 || index >= data.length) {
+    return { items: data };
+  }
+  const items = index === 0 ? [] : data.slice(0, index);
+  const moreItems = index === 0 ? data : data.slice(index);
+  moreItems.forEach((d) => {
+    var _a;
+    items.push({
+      ...d,
+      key: `overflow-${d.key || d.index || d.path}`,
+      index: `overflow-${d.index || d.path}`,
+      overflow: true,
+      children: ((_a = d.children) == null ? void 0 : _a.length) ? [null] : void 0
+    });
+  });
+  return { items, moreItems };
+}
+function getMenuWidth(el) {
+  if (!el) {
+    return;
+  }
+  const style = core.getCurrentStyle(el);
+  const pl = Number.parseInt(style.paddingLeft || "0", 10);
+  const pr = Number.parseInt(style.paddingRight || "0", 10);
+  return el.clientWidth - pl - pr;
+}
+function getItemWidth(el) {
+  if (!el) {
+    return;
+  }
+  const style = core.getCurrentStyle(el);
+  const ml = Number.parseInt(style.marginLeft || "0", 10);
+  const mr = Number.parseInt(style.marginRight || "0", 10);
+  return el.offsetWidth + ml + mr;
+}
+function getMenuChilds(el) {
+  const ellipsisClass = "ele-sub-menu-ellipsis";
+  return Array.from(el.childNodes ?? []).filter((t) => {
+    return t.nodeName === "LI" && !t.classList.contains(ellipsisClass);
+  });
+}
+function useMenuEllipsis(option) {
+  const { getMenuEl, getMoreEl, onEllipsis } = option;
+  const state = { activated: true };
+  const observer = new ResizeObserver(
+    core.debounce(() => {
+      computedEllipsis();
+    }, 350)
+  );
+  const computedEllipsis = () => {
+    const menuEl = getMenuEl();
+    if (!menuEl || !state.activated) {
+      return;
+    }
+    const childs = getMenuChilds(menuEl);
+    const menuWidth = getMenuWidth(menuEl) || 0;
+    const moreWidth = getItemWidth(getMoreEl()) || 48;
+    let index = 0;
+    let calcWidth = 0;
+    for (let i = 0; i < childs.length; i++) {
+      const width = getItemWidth(childs[i]) || 0;
+      calcWidth += width;
+      if (calcWidth > menuWidth) {
+        if (calcWidth - width + moreWidth > menuWidth) {
+          index = i - 1;
+        }
+        break;
+      }
+      index = i + 1;
+    }
+    onEllipsis(index);
+  };
+  const observe = () => {
+    unobserve();
+    const menuEl = getMenuEl();
+    if (menuEl) {
+      observer.observe(menuEl);
+    }
+  };
+  const unobserve = () => {
+    const menuEl = getMenuEl();
+    if (menuEl) {
+      observer.unobserve(menuEl);
+    }
+  };
+  vue.onBeforeMount(() => {
+    unobserve();
+  });
+  vue.onActivated(() => {
+    state.activated = true;
+  });
+  vue.onDeactivated(() => {
+    state.activated = false;
+  });
+  return { observe, unobserve, computedEllipsis };
+}
+exports.getItemWidth = getItemWidth;
+exports.getMenuChilds = getMenuChilds;
+exports.getMenuItems = getMenuItems;
+exports.getMenuWidth = getMenuWidth;
+exports.getPopperClass = getPopperClass;
+exports.useMenuEllipsis = useMenuEllipsis;

package/lib/ele-menus/util.d.ts

@@ -0,0 +1,44 @@
+import { MenuItem, MenuTheme, PopupMenuTheme, PopupColorful, MenuResult, MenuEllipsisOption } from './types';
+
+/**
+ * 生成气泡菜单的类名
+ * @param customerClass 自定义的类名
+ * @param theme 主题
+ * @param popTheme 气泡菜单主题
+ * @param colorful 是否彩色图标
+ * @param popupColorful 气泡菜单是否彩色图标
+ * @param firstPopClass 第一级气泡菜单类名
+ * @param first 是否是第一级菜单
+ * @param webkit 是否是webkit内核
+ */
+export declare function getPopperClass(customerClass?: string, theme?: MenuTheme, popTheme?: PopupMenuTheme, colorful?: boolean, popupColorful?: PopupColorful, firstPopClass?: string, first?: boolean, webkit?: boolean): string;
+/**
+ * 生成菜单数据
+ * @param items 菜单数据
+ * @param index 省略位置
+ * @param horizontal 是否是水平菜单
+ */
+export declare function getMenuItems(menus?: MenuItem[], index?: number, horizontal?: boolean): MenuResult;
+/**
+ * 获取菜单节点宽度
+ * @param el 菜单节点
+ */
+export declare function getMenuWidth(el?: HTMLElement | null): number | undefined;
+/**
+ * 获取菜单项节点宽度
+ * @param el 菜单项节点
+ */
+export declare function getItemWidth(el?: HTMLElement | null): number | undefined;
+/**
+ * 获取菜单子级节点
+ * @param el 菜单节点
+ */
+export declare function getMenuChilds(el: HTMLElement): HTMLElement[];
+/**
+ * 菜单溢出省略
+ */
+export declare function useMenuEllipsis(option: MenuEllipsisOption): {
+    observe: () => void;
+    unobserve: () => void;
+    computedEllipsis: () => void;
+};

package/lib/ele-page/index.d.ts

@@ -0,0 +1,23 @@
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    plain: BooleanConstructor;
+    multiCard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flexTable: BooleanConstructor;
+    hideFooter: BooleanConstructor;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    plain: BooleanConstructor;
+    multiCard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    flexTable: BooleanConstructor;
+    hideFooter: BooleanConstructor;
+}>> & Readonly<{}>, {
+    plain: boolean;
+    multiCard: boolean;
+    flexTable: boolean;
+    hideFooter: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/ele-page/props.d.ts

@@ -0,0 +1,19 @@
+import { ExtractPropTypes } from 'vue';
+
+/**
+ * 属性
+ */
+export declare const pageProps: {
+    /** 是否是单纯的容器 */
+    plain: BooleanConstructor;
+    /** 内容是否为多个卡片 */
+    multiCard: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 内部表格是否弹性布局 */
+    flexTable: BooleanConstructor;
+    /** 是否关闭页脚 */
+    hideFooter: BooleanConstructor;
+};
+export type PageProps = ExtractPropTypes<typeof pageProps>;

package/lib/ele-page/style/index.cjs

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.scss");

package/lib/ele-page/style/index.d.ts

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,74 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-page-var($ele);
+
+.ele-page {
+  box-sizing: border-box;
+
+  &:not(.is-plain) {
+    padding: eleVar('page', 'padding');
+  }
+
+  /* 多个卡片 */
+  &.is-multi-card {
+    padding-bottom: 0;
+
+    .ele-card,
+    .el-card {
+      margin-bottom: eleVar('page', 'padding');
+    }
+  }
+
+  /* 关闭页脚 */
+  &.is-hide-footer + .ele-footer {
+    display: none;
+  }
+}
+
+/* 撑开页脚 */
+.ele-admin-content > .ele-page {
+  flex: auto;
+}
+
+.ele-page.is-hide-footer {
+  flex: none;
+}
+
+/* 内部表格高度铺满 */
+.ele-page.is-flex-table {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: auto;
+
+  & > .ele-pro-table {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+
+    & > .ele-pro-table-view {
+      flex: 1;
+      height: 100%;
+      overflow: hidden;
+    }
+  }
+}
+
+/* 内容定宽 */
+.ele-admin-limited > .ele-admin-main > .ele-admin-body > .ele-admin-wrapper {
+  & > .ele-admin-content > .ele-page:not(.is-plain) {
+    margin: 0 auto;
+    width: eleVar('page', 'max-width');
+    max-width: 100%;
+  }
+}
+
+/* 按钮风格页签 */
+.ele-admin-tabs.is-button + .ele-admin-wrapper > .ele-admin-content {
+  & > .ele-page:first-child {
+    padding-top: 0;
+  }
+}