yuang-framework-ui-pc 1.1.45 → 1.1.46

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

@@ -0,0 +1,107 @@
+import type { Component } from 'vue';
+import type { StyleValue } from '../ele-app/types';
+import type {
+  ElIconProps,
+  ElMenuItemProps,
+  ElSubMenuProps,
+  ElMenuItemGroupProps,
+  ElBadgeProps
+} from '../ele-app/el';
+import type { EleTooltipProps } from '../ele-app/plus';
+
+/**
+ * 菜单数据
+ */
+export interface MenuItem
+  extends Omit<ElMenuItemProps, 'style' | 'class'>,
+    Omit<ElSubMenuProps, 'index' | 'style' | 'class'>,
+    ElMenuItemGroupProps {
+  /** 唯一标识 */
+  key?: string | number;
+  /** 标题 */
+  title?: string;
+  /** 图标 */
+  icon?: string | Component;
+  /** 图标属性 */
+  iconProps?: ElIconProps;
+  /** 图标样式 */
+  iconStyle?: StyleValue;
+  /** 菜单链接地址 */
+  path?: string;
+  /** 是否展示为分组菜单 */
+  group?: boolean;
+  /** 徽章 */
+  badge?: ElBadgeProps;
+  /** 子级数据 */
+  children?: MenuItem[];
+  /** 附加数据 */
+  meta?: Record<keyof any, any>;
+  /** 是否是溢出的菜单(内部属性) */
+  overflow?: boolean;
+}
+
+/**
+ * 菜单展示模式
+ */
+export type MenuMode = 'horizontal' | 'vertical' | 'compact';
+
+/**
+ * 主题
+ */
+export type MenuTheme = 'light' | 'dark';
+
+/**
+ * 弹出菜单主题
+ */
+export type PopupMenuTheme = 'auto' | MenuTheme;
+
+/**
+ * 弹出菜单是否彩色图标
+ */
+export type PopupColorful = 'auto' | boolean;
+
+/**
+ * 子菜单项点击事件
+ */
+export type MenuItemEvent = (item: MenuItem, e: MouseEvent) => void;
+
+/**
+ * 省略菜单的属性
+ */
+export interface EllipsisProps extends ElSubMenuProps {
+  /** 唯一标识 */
+  key?: string | number;
+  /** 图标 */
+  icon?: string | Component;
+  /** 图标属性 */
+  iconProps?: ElIconProps;
+  /** 图标样式 */
+  iconStyle?: StyleValue;
+}
+
+/**
+ * 菜单文本溢出提示
+ */
+export type TextEllipsisTooltip = boolean | EleTooltipProps;
+
+/**
+ * 生成菜单数据返回结果
+ */
+export interface MenuResult {
+  /** 菜单数据 */
+  items?: MenuItem[];
+  /** 省略的菜单数据 */
+  moreItems?: MenuItem[];
+}
+
+/**
+ * 菜单省略计算参数
+ */
+export interface MenuEllipsisOption {
+  /** 获取菜单节点的方法 */
+  getMenuEl: () => HTMLElement | null;
+  /** 获取菜单省略项节点的方法 */
+  getMoreEl: () => HTMLElement | null;
+  /** 计算结果回调 */
+  onEllipsis: (index: number) => void;
+}

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.cjs

@@ -0,0 +1,29 @@
+"use strict";
+const vue = require("vue");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "ElePage",
+  props: props.pageProps
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass([
+      "ele-page",
+      { "is-plain": _ctx.plain },
+      { "is-multi-card": _ctx.multiCard },
+      { "is-flex-table": _ctx.flexTable },
+      { "is-hide-footer": _ctx.hideFooter }
+    ])
+  }, [
+    vue.renderSlot(_ctx.$slots, "default")
+  ], 2);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

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.cjs

@@ -0,0 +1,16 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const pageProps = {
+  /** 是否是单纯的容器 */
+  plain: Boolean,
+  /** 内容是否为多个卡片 */
+  multiCard: {
+    type: Boolean,
+    default: true
+  },
+  /** 内部表格是否弹性布局 */
+  flexTable: Boolean,
+  /** 是否关闭页脚 */
+  hideFooter: Boolean
+};
+exports.pageProps = pageProps;

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/css-var.scss

@@ -0,0 +1,9 @@
+@use '../../style/util.scss' as *;
+
+/* 页面容器主题变量 */
+@mixin set-page-var($var) {
+  .ele-page,
+  .ele-admin-tabs {
+    @include set-ele-var('page', $var);
+  }
+}

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;
+  }
+}

package/lib/ele-pagination/index.cjs

@@ -0,0 +1,96 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "ElePagination",
+  components: { ElPagination: elementPlus.ElPagination },
+  props: props.paginationProps,
+  emits: props.paginationEmits,
+  setup(props2, { emit }) {
+    const isInfinite = vue.computed(() => "*" === props2.total);
+    const pageTotal = vue.computed(() => {
+      if (isInfinite.value) {
+        if (props2.hasNext) {
+          return Number.MAX_SAFE_INTEGER;
+        }
+        return (props2.currentPage || 1) * (props2.pageSize || 10);
+      }
+      const num = props2.total == null ? void 0 : Number(props2.total);
+      return num == null || isNaN(num) ? void 0 : num;
+    });
+    const sizesPopperClass = vue.computed(() => {
+      const classes = ["ele-pagination-popper"];
+      if (props2.isFixedPopper) {
+        classes.push("is-fixed");
+      }
+      if (typeof props2.popperClass === "string" && props2.popperClass) {
+        classes.push(props2.popperClass);
+      }
+      return classes.join(" ");
+    });
+    const handleUpdateCurrentPage = (currentPage) => {
+      emit("update:currentPage", currentPage);
+    };
+    const handleUpdatePageSize = (pageSize) => {
+      emit("update:pageSize", pageSize);
+    };
+    return {
+      isInfinite,
+      pageTotal,
+      sizesPopperClass,
+      handleUpdateCurrentPage,
+      handleUpdatePageSize
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElPagination = vue.resolveComponent("ElPagination");
+  return vue.openBlock(), vue.createBlock(_component_ElPagination, {
+    small: _ctx.small,
+    size: _ctx.size,
+    background: _ctx.type === "circle" ? false : _ctx.background,
+    pageSize: _ctx.pageSize,
+    defaultPageSize: _ctx.defaultPageSize,
+    total: _ctx.pageTotal,
+    pageCount: _ctx.pageCount,
+    pagerCount: _ctx.pagerCount,
+    currentPage: _ctx.currentPage,
+    defaultCurrentPage: _ctx.defaultCurrentPage,
+    layout: _ctx.layout,
+    pageSizes: _ctx.pageSizes,
+    popperClass: _ctx.sizesPopperClass,
+    prevText: _ctx.prevText,
+    prevIcon: _ctx.prevIcon,
+    nextText: _ctx.nextText,
+    nextIcon: _ctx.nextIcon,
+    disabled: _ctx.disabled,
+    teleported: _ctx.teleported,
+    hideOnSinglePage: _ctx.hideOnSinglePage,
+    class: vue.normalizeClass([
+      "ele-pagination",
+      { "is-circle": _ctx.type === "circle" },
+      { "is-infinite": _ctx.isInfinite }
+    ]),
+    "onUpdate:currentPage": _ctx.handleUpdateCurrentPage,
+    "onUpdate:pageSize": _ctx.handleUpdatePageSize
+  }, vue.createSlots({ _: 2 }, [
+    vue.renderList(Object.keys(_ctx.$slots), (name) => {
+      return {
+        name,
+        fn: vue.withCtx((slotProps) => [
+          vue.renderSlot(_ctx.$slots, name, vue.normalizeProps(vue.guardReactiveProps(slotProps || {})))
+        ])
+      };
+    })
+  ]), 1032, ["small", "size", "background", "pageSize", "defaultPageSize", "total", "pageCount", "pagerCount", "currentPage", "defaultCurrentPage", "layout", "pageSizes", "popperClass", "prevText", "prevIcon", "nextText", "nextIcon", "disabled", "teleported", "hideOnSinglePage", "class", "onUpdate:currentPage", "onUpdate:pageSize"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;