yuang-framework-ui-pc 1.1.44 → 1.1.46

package/es/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/es/ele-menus/util.js

@@ -0,0 +1,132 @@
+import { onBeforeMount, onActivated, onDeactivated } from "vue";
+import { getCurrentStyle, debounce } from "../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 = 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 = 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(
+    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);
+    }
+  };
+  onBeforeMount(() => {
+    unobserve();
+  });
+  onActivated(() => {
+    state.activated = true;
+  });
+  onDeactivated(() => {
+    state.activated = false;
+  });
+  return { observe, unobserve, computedEllipsis };
+}
+export {
+  getItemWidth,
+  getMenuChilds,
+  getMenuItems,
+  getMenuWidth,
+  getPopperClass,
+  useMenuEllipsis
+};

package/es/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/es/ele-page/index.js

@@ -0,0 +1,30 @@
+import { defineComponent, createElementBlock, openBlock, normalizeClass, renderSlot } from "vue";
+import { pageProps } from "./props";
+const _sfc_main = defineComponent({
+  name: "ElePage",
+  props: pageProps
+});
+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) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass([
+      "ele-page",
+      { "is-plain": _ctx.plain },
+      { "is-multi-card": _ctx.multiCard },
+      { "is-flex-table": _ctx.flexTable },
+      { "is-hide-footer": _ctx.hideFooter }
+    ])
+  }, [
+    renderSlot(_ctx.$slots, "default")
+  ], 2);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

package/es/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/es/ele-page/props.js

@@ -0,0 +1,16 @@
+const pageProps = {
+  /** 是否是单纯的容器 */
+  plain: Boolean,
+  /** 内容是否为多个卡片 */
+  multiCard: {
+    type: Boolean,
+    default: true
+  },
+  /** 内部表格是否弹性布局 */
+  flexTable: Boolean,
+  /** 是否关闭页脚 */
+  hideFooter: Boolean
+};
+export {
+  pageProps
+};

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1 @@
+import "./index.scss";