ele-admin-plus 1.0.0-beta.2 → 1.0.0-beta.3

package/es/ele-printer/types/index.d.ts

@@ -0,0 +1,40 @@
+/**
+ * 纸张方向
+ */
+export type PrintDirection = 'landscape' | 'portrait';
+/**
+ * 纸张旋转
+ */
+export type PrintOrientation = 'upright' | 'rotate-left' | 'rotate-right';
+/**
+ * 打印位置
+ */
+export type PrintTarget = '_self' | '_blank' | '_iframe';
+/**
+ * 打印参数
+ */
+export interface PrintOption {
+    /** id */
+    printId: string;
+    /** 页面标题 */
+    title?: string;
+    /** 页间距 */
+    margin?: string | number;
+    /** 纸张方向 */
+    direction?: string | null;
+    /** 纸张旋转 */
+    orientation?: string | null;
+}
+/**
+ * pdf 打印参数
+ */
+export interface PrintPdfOption {
+    /** pdf 链接地址 */
+    url?: string;
+    /** 直接指定 arraybuffer 数据 */
+    arraybuffer?: ArrayBuffer;
+    /** 打印完成的回调 */
+    done?: () => void;
+    /** 错误回调 */
+    error?: (status: number, result: string) => void;
+}

package/es/ele-printer/util.d.ts

@@ -0,0 +1,39 @@
+import type { PrintOption, PrintPdfOption } from './types';
+export declare const printContainerId = "ele-printer-container";
+export declare const printFrameId = "ele-printer-iframe";
+export declare const printingClass = "ele-printing";
+/**
+ * 创建并获取打印容器
+ */
+export declare function getPrintContainer(): Element;
+/**
+ * 打印
+ */
+export declare function doPrint(option: PrintOption): void;
+/**
+ * 在子窗口中打印
+ */
+export declare function doPrintOnFrame(opt: PrintOption): Window | undefined;
+/**
+ * 创建并获取打印子窗口
+ */
+export declare function getPrintFrame(): HTMLIFrameElement;
+/**
+ * 移除打印子窗口
+ */
+export declare function removePrintFrame(): void;
+/**
+ * 生成打印设置的样式
+ */
+export declare function getOptionCss(opt: PrintOption): string;
+/**
+ * usePrinter
+ */
+export declare function usePrinter(done: () => void): {
+    printId: string;
+};
+/**
+ * 打印 pdf
+ * @param option 打印参数
+ */
+export declare function printPdf(option: PrintPdfOption): void;

package/es/ele-printer/util.js

@@ -0,0 +1,174 @@
+import { onBeforeUnmount } from "vue";
+import { uuid } from "../utils/core";
+const printContainerId = "ele-printer-container";
+const printFrameId = "ele-printer-iframe";
+const printingClass = "ele-printing";
+function getPrintContainer() {
+  const container = document.getElementById(printContainerId);
+  if (container) {
+    return container;
+  }
+  const elem = document.createElement("div");
+  elem.id = printContainerId;
+  document.body.appendChild(elem);
+  return elem;
+}
+function doPrint(option) {
+  const $html = document.querySelector("html");
+  if ($html) {
+    $html.classList.add(printingClass);
+    const elem = document.createElement("style");
+    elem.setAttribute("type", "text/css");
+    elem.setAttribute("media", "print");
+    elem.innerHTML = getOptionCss(option);
+    document.body.appendChild(elem);
+    const title = document.title;
+    if (option.title != null && option.title !== "") {
+      document.title = option.title;
+    }
+    window.print();
+    $html.classList.remove(printingClass);
+    document.body.removeChild(elem);
+    if (option.title != null) {
+      document.title = title;
+    }
+  }
+}
+function doPrintOnFrame(opt) {
+  var _a;
+  const pFrame = getPrintFrame();
+  const pWin = pFrame.contentWindow;
+  if (!pWin) {
+    return;
+  }
+  pWin.focus();
+  const pDoc = pFrame.contentDocument || pWin.document;
+  if (!pDoc) {
+    return;
+  }
+  const container = getPrintContainer();
+  Array.from(
+    container.querySelectorAll('input[type="text"], input[type="number"]')
+  ).forEach((el) => {
+    el.setAttribute("value", el.value);
+  });
+  pDoc.open();
+  const optHtml = `
+  <style type="text/css" media="print">
+    ${getOptionCss(opt)}
+  </style>
+  <script>
+    const $html = document.querySelector('html');
+    if($html && $html.classList && $html.classList.add) {
+      $html.classList.add('${printingClass}');
+    }
+    window.onload = function() {
+      if(${opt.title == null ? 0 : 1}) {
+        document.title = '${opt.title}';
+      }
+      window.print();
+      window.parent.postMessage('elePrintDone_${opt.printId}', '*');
+    };
+  <\/script>
+  `;
+  const html = ((_a = document.querySelector("html")) == null ? void 0 : _a.outerHTML) || "";
+  const content = html.replace(/<script/g, '<pre style="display:none;" ').replace(/<\/script>/g, "</pre>").replace(/<\/html>/, `${optHtml}</html>`);
+  pDoc.write("<!DOCTYPE html>" + content);
+  pDoc.close();
+  return pWin;
+}
+function getPrintFrame() {
+  removePrintFrame();
+  const elem = document.createElement("iframe");
+  elem.id = printFrameId;
+  elem.style.width = "0px";
+  elem.style.height = "0px";
+  elem.style.position = "fixed";
+  elem.style.visibility = "hidden";
+  document.body.appendChild(elem);
+  elem.focus();
+  return elem;
+}
+function removePrintFrame() {
+  const pFrame = document.getElementById(printFrameId);
+  if (pFrame && pFrame.parentNode) {
+    pFrame.parentNode.removeChild(pFrame);
+  }
+}
+function getOptionCss(opt) {
+  const css = ["@page {"];
+  if (opt.margin != null && opt.margin !== "") {
+    const v = typeof opt.margin === "number" ? opt.margin + "px" : opt.margin;
+    css.push(`margin: ${v};`);
+  }
+  if (opt.direction != null && opt.direction !== "") {
+    css.push(`size: ${opt.direction};`);
+  }
+  if (opt.orientation != null && opt.orientation !== "") {
+    css.push(`page-orientation: ${opt.orientation};`);
+  }
+  css.push("}");
+  return css.join(" ");
+}
+function usePrinter(done) {
+  const printId = uuid(8);
+  const onMessage = (e) => {
+    if (e.data === "elePrintDone_" + printId) {
+      removePrintFrame();
+      done && done();
+    }
+  };
+  window.addEventListener("message", onMessage);
+  onBeforeUnmount(() => {
+    window.removeEventListener("message", onMessage);
+  });
+  return { printId };
+}
+function printPdf(option) {
+  const pFrame = getPrintFrame();
+  pFrame.onload = () => {
+    if (!!pFrame.getAttribute("src")) {
+      pFrame.focus();
+      pFrame.contentWindow && pFrame.contentWindow.print();
+      option.done && option.done();
+    }
+  };
+  const doPrint2 = (buffer) => {
+    const blob = new window.Blob([buffer], { type: "application/pdf" });
+    if (window.navigator && window.navigator["msSaveOrOpenBlob"]) {
+      window.navigator["msSaveOrOpenBlob"](blob, "print.pdf");
+      return;
+    }
+    pFrame.setAttribute("src", window.URL.createObjectURL(blob));
+  };
+  if (option.arraybuffer) {
+    doPrint2(option.arraybuffer);
+    return;
+  }
+  if (option.url) {
+    const req = new window.XMLHttpRequest();
+    req.open("GET", option.url, true);
+    req.responseType = "arraybuffer";
+    req.onload = () => {
+      if ([200, 201].indexOf(req.status) !== -1) {
+        doPrint2(req.response);
+        return;
+      }
+      option.error && option.error(req.status, req.statusText);
+    };
+    req.send();
+  }
+}
+export {
+  doPrint,
+  doPrintOnFrame,
+  getOptionCss,
+  getPrintContainer,
+  getPrintFrame,
+  printContainerId,
+  printFrameId,
+  printPdf,
+  printingClass,
+  removePrintFrame,
+  usePrinter
+};

package/es/ele-pro-layout/components/pro-iframe.d.ts

@@ -0,0 +1,29 @@
+import type { PropType } from 'vue';
+import type { TabItem, IframeItem } from '../types';
+declare const _sfc_main: import("vue").DefineComponent<{
+    keepAlive: BooleanConstructor;
+    transitionName: StringConstructor;
+    transitionDelay: NumberConstructor;
+    tabData: {
+        type: PropType<TabItem[]>;
+        required: true;
+    };
+    tabActive: StringConstructor;
+}, {
+    active: import("vue").Ref<string | null | undefined>;
+    visible: import("vue").Ref<boolean>;
+    data: import("vue").ComputedRef<IframeItem[]>;
+    onAfterLeave: (delay?: number) => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    keepAlive: BooleanConstructor;
+    transitionName: StringConstructor;
+    transitionDelay: NumberConstructor;
+    tabData: {
+        type: PropType<TabItem[]>;
+        required: true;
+    };
+    tabActive: StringConstructor;
+}>>, {
+    keepAlive: boolean;
+}, {}>;
+export default _sfc_main;

package/es/ele-pro-layout/components/pro-iframe.js

@@ -0,0 +1,116 @@
+import { defineComponent, ref, computed, watch, onBeforeUnmount, nextTick, withDirectives, openBlock, createElementBlock, createVNode, TransitionGroup, withCtx, Fragment, renderList, vShow } from "vue";
+const _sfc_main = defineComponent({
+  name: "ProIframe",
+  props: {
+    // 是否支持内链缓存
+    keepAlive: Boolean,
+    // 内链切换动画
+    transitionName: String,
+    // 内链进入动画延迟时间
+    transitionDelay: Number,
+    // 页签数据
+    tabData: {
+      type: Array,
+      required: true
+    },
+    // 页签选中
+    tabActive: String
+  },
+  setup(props) {
+    const state = { timer: null };
+    const visible = ref(false);
+    const active = ref(null);
+    const data = computed(() => {
+      const result = [];
+      props.tabData.forEach((t) => {
+        var _a, _b;
+        const isAlive = ((_a = t.meta) == null ? void 0 : _a.keepAlive) !== false;
+        if (t.key && ((_b = t.meta) == null ? void 0 : _b.iframe) && !t.refresh && isAlive) {
+          result.push({ id: t.key, src: t.meta.iframe });
+        }
+      });
+      return result;
+    });
+    const onAfterLeave = (delay) => {
+      if (props.tabActive && data.value.length && data.value.some((d) => d.id === props.tabActive)) {
+        if (delay) {
+          state.timer = setTimeout(() => {
+            visible.value = true;
+            nextTick(() => {
+              active.value = props.tabActive;
+            });
+          }, delay);
+        } else {
+          visible.value = true;
+          nextTick(() => {
+            active.value = props.tabActive;
+          });
+        }
+      } else {
+        visible.value = false;
+        active.value = null;
+      }
+    };
+    const clearTimer = () => {
+      if (state.timer) {
+        clearTimeout(state.timer);
+        state.timer = null;
+      }
+    };
+    watch([() => props.tabActive, () => props.tabData], () => {
+      clearTimer();
+      if (visible.value) {
+        active.value = null;
+      } else {
+        onAfterLeave(props.transitionDelay);
+      }
+    });
+    onBeforeUnmount(() => {
+      clearTimer();
+    });
+    return {
+      active,
+      visible,
+      data,
+      onAfterLeave
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = { class: "ele-admin-iframe-wrap" };
+const _hoisted_2 = ["id", "src"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return withDirectives((openBlock(), createElementBlock("div", _hoisted_1, [
+    createVNode(TransitionGroup, {
+      appear: true,
+      name: _ctx.transitionName,
+      onAfterLeave: _cache[0] || (_cache[0] = ($event) => _ctx.onAfterLeave())
+    }, {
+      default: withCtx(() => [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data, (item) => {
+          return withDirectives((openBlock(), createElementBlock("iframe", {
+            key: item.id,
+            id: item.id,
+            src: item.src,
+            class: "ele-admin-iframe"
+          }, null, 8, _hoisted_2)), [
+            [vShow, _ctx.active === item.id]
+          ]);
+        }), 128))
+      ]),
+      _: 1
+    }, 8, ["name"])
+  ], 512)), [
+    [vShow, _ctx.visible]
+  ]);
+}
+const proIframe = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  proIframe as default
+};

package/es/ele-pro-layout/components/pro-sidebar.d.ts

@@ -5,10 +5,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: PropType<MenuItem[]>;
         required: true;
     };
-    sidebarStyle: {
-        type: PropType<SidebarStyle>;
-        default: string;
-    };
+    sidebarStyle: PropType<SidebarStyle>;
     colorfulIcon: BooleanConstructor;
     active: StringConstructor;
     collapse: BooleanConstructor;
@@ -18,6 +15,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     titleSlot: StringConstructor;
     iconSlot: StringConstructor;
 }, {
+    menusRef: import("vue").Ref<HTMLDivElement | null>;
     menuItems: import("vue").ComputedRef<import("../../ele-menus/types").MenuItem[]>;
     onOpen: (index: string, indexPath: string[]) => void;
     onClose: (index: string, indexPath: string[]) => void;
@@ -29,10 +27,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
         type: PropType<MenuItem[]>;
         required: true;
     };
-    sidebarStyle: {
-        type: PropType<SidebarStyle>;
-        default: string;
-    };
+    sidebarStyle: PropType<SidebarStyle>;
     colorfulIcon: BooleanConstructor;
     active: StringConstructor;
     collapse: BooleanConstructor;
@@ -47,7 +42,6 @@ declare const _sfc_main: import("vue").DefineComponent<{
 }, {
     uniqueOpened: boolean;
     collapse: boolean;
-    sidebarStyle: SidebarStyle;
     colorfulIcon: boolean;
 }, {}>;
 export default _sfc_main;

package/es/ele-pro-layout/components/pro-sidebar.js

@@ -1,6 +1,6 @@
-import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, renderSlot, createElementVNode, createVNode, createSlots, withCtx, normalizeProps, guardReactiveProps } from "vue";
+import { defineComponent, ref, computed, watch, nextTick, resolveComponent, openBlock, createElementBlock, renderSlot, createElementVNode, createVNode, createSlots, withCtx, normalizeProps, guardReactiveProps } from "vue";
 import EleMenus from "../../ele-menus/index";
-import { getMenuItems } from "../util";
+import { useMenuScroll, getMenuItems } from "../util";
 const _sfc_main = defineComponent({
   name: "ProSidebar",
   components: { EleMenus },
@@ -11,10 +11,7 @@ const _sfc_main = defineComponent({
       required: true
     },
     // 侧栏风格
-    sidebarStyle: {
-      type: String,
-      default: "dark"
-    },
+    sidebarStyle: String,
     // 侧栏菜单是否彩色图标
     colorfulIcon: Boolean,
     // 菜单选中
@@ -37,6 +34,8 @@ const _sfc_main = defineComponent({
     close: (_index, _indexPath) => true
   },
   setup(props, { emit }) {
+    const { scrollIntoView } = useMenuScroll(() => menusRef.value);
+    const menusRef = ref(null);
     const menuItems = computed(() => getMenuItems(props.menus));
     const onOpen = (index, indexPath) => {
       emit("open", index, indexPath);
@@ -44,7 +43,15 @@ const _sfc_main = defineComponent({
     const onClose = (index, indexPath) => {
       emit("close", index, indexPath);
     };
-    return { menuItems, onOpen, onClose };
+    watch(
+      () => props.active,
+      () => {
+        nextTick(() => {
+          scrollIntoView();
+        });
+      }
+    );
+    return { menusRef, menuItems, onOpen, onClose };
   }
 });
 const _export_sfc = (sfc, props) => {
@@ -55,7 +62,10 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 const _hoisted_1 = { class: "ele-admin-sidebar" };
-const _hoisted_2 = { class: "ele-admin-menus" };
+const _hoisted_2 = {
+  ref: "menusRef",
+  class: "ele-admin-menus"
+};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_EleMenus = resolveComponent("EleMenus");
   return openBlock(), createElementBlock("div", _hoisted_1, [
@@ -88,7 +98,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           key: "1"
         } : void 0
       ]), 1032, ["items", "theme", "colorful", "collapse", "defaultActive", "defaultOpeneds", "uniqueOpened", "popperEffect", "onOpen", "onClose"])
-    ]),
+    ], 512),
     renderSlot(_ctx.$slots, "bottom")
   ]);
 }

package/es/ele-pro-layout/components/pro-sidebox.d.ts

@@ -14,6 +14,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     titleSlot: StringConstructor;
     iconSlot: StringConstructor;
 }, {
+    menusRef: import("vue").Ref<HTMLDivElement | null>;
     menuItems: import("vue").ComputedRef<import("../../ele-menus/types").MenuItem[]>;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
     menus: {
@@ -30,7 +31,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     iconSlot: StringConstructor;
 }>>, {
     collapse: boolean;
-    colorfulIcon: boolean;
     compact: boolean;
+    colorfulIcon: boolean;
 }, {}>;
 export default _sfc_main;

package/es/ele-pro-layout/components/pro-sidebox.js

@@ -1,6 +1,6 @@
-import { defineComponent, computed, resolveComponent, openBlock, createElementBlock, renderSlot, createElementVNode, createVNode, createSlots, withCtx, normalizeProps, guardReactiveProps } from "vue";
+import { defineComponent, ref, computed, watch, nextTick, resolveComponent, openBlock, createElementBlock, renderSlot, createElementVNode, createVNode, createSlots, withCtx, normalizeProps, guardReactiveProps } from "vue";
 import EleMenus from "../../ele-menus/index";
-import { getMenuItems } from "../util";
+import { useMenuScroll, getMenuItems } from "../util";
 const _sfc_main = defineComponent({
   name: "ProSidebox",
   components: { EleMenus },
@@ -28,7 +28,18 @@ const _sfc_main = defineComponent({
     iconSlot: String
   },
   setup(props) {
-    return { menuItems: computed(() => getMenuItems(props.menus)) };
+    const { scrollIntoView } = useMenuScroll(() => menusRef.value);
+    const menusRef = ref(null);
+    const menuItems = computed(() => getMenuItems(props.menus));
+    watch(
+      () => props.active,
+      () => {
+        nextTick(() => {
+          scrollIntoView();
+        });
+      }
+    );
+    return { menusRef, menuItems };
   }
 });
 const _export_sfc = (sfc, props) => {
@@ -39,7 +50,10 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 const _hoisted_1 = { class: "ele-admin-sidebox" };
-const _hoisted_2 = { class: "ele-admin-menus" };
+const _hoisted_2 = {
+  ref: "menusRef",
+  class: "ele-admin-menus"
+};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_EleMenus = resolveComponent("EleMenus");
   return openBlock(), createElementBlock("div", _hoisted_1, [
@@ -71,7 +85,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
           key: "1"
         } : void 0
       ]), 1032, ["items", "theme", "popupColorful", "collapse", "defaultActive", "popperEffect", "tooltipDisabled"])
-    ]),
+    ], 512),
     renderSlot(_ctx.$slots, "boxBottom")
   ]);
 }

package/es/ele-pro-layout/components/{pro-tab-bar.d.ts → pro-tabs.d.ts}

@@ -1,5 +1,6 @@
 import type { PropType } from 'vue';
-import type { TabPaneItem, TabEventOption, DropdownInstance } from '../../ele-tabs/types';
+import type { TabPaneItem, TabEventOption } from '../../ele-tabs/types';
+import type { ElDropdownInstance } from '../../ele-app/types';
 import type { TabItem, TabStyle, TabItemEventOption } from '../types';
 declare const _sfc_main: import("vue").DefineComponent<{
     tabs: {
@@ -23,7 +24,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
     onTabRemove: (key: string) => void;
     onTabItemClick: (opt: TabEventOption) => void;
     onTabContextMenu: (opt: TabEventOption) => void;
-    onTabContextOpen: (ref: DropdownInstance) => void;
+    onTabContextOpen: (ref: ElDropdownInstance) => void;
     onTabSortChange: (data: TabPaneItem[]) => void;
 }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     tabClick: (_opt: TabItemEventOption) => true;

package/es/ele-pro-layout/components/{pro-tab-bar.js → pro-tabs.js}

@@ -6,7 +6,7 @@ import EleTabTool from "../../ele-tab-tool/index";
 import EleTabWrap from "../../ele-tab-wrap/index";
 import TabTitle from "../../ele-tabs/components/tab-title";
 const _sfc_main = defineComponent({
-  name: "ProTabBar",
+  name: "ProTabs",
   components: { ElIcon, House, EleTabWrap, EleTabTool, EleTabs, TabTitle },
   props: {
     // 页签数据
@@ -171,6 +171,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
         handleClick: true,
         sortable: _ctx.tabSortable,
         contextMenu: _ctx.tabContextMenu,
+        mousewheel: true,
         onTabRemove: _ctx.onTabRemove,
         onTabItemClick: _ctx.onTabItemClick,
         onTabContextMenu: _ctx.onTabContextMenu,
@@ -197,7 +198,7 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     _: 3
   }, 8, ["type", "class"]);
 }
-const proTabBar = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+const proTabs = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  proTabBar as default
+  proTabs as default
 };