yuang-framework-ui-pc 1.1.45 → 1.1.46

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

@@ -0,0 +1,184 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { StyleValue } from '../ele-app/types';
+
+/**
+ * 属性
+ */
+export declare const drawerProps: {
+    /** 自定义标题样式 */
+    headerStyle: PropType<StyleValue>;
+    /** 标题样式 */
+    titleStyle: PropType<StyleValue>;
+    /** 自定义主体样式 */
+    bodyStyle: PropType<StyleValue>;
+    /** 自定义底部样式 */
+    footerStyle: PropType<StyleValue>;
+    /** 自定义关闭按钮样式 */
+    closeBtnStyle: PropType<StyleValue>;
+    /** 是否限制在主体内部 */
+    inner: BooleanConstructor;
+    direction: {
+        readonly type: PropType<"ltr" | "rtl" | "ttb" | "btt">;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "rtl";
+    };
+    size: {
+        readonly type: PropType<string | number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "30%";
+    };
+    withHeader: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    modalFade: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    headerAriaLevel: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "2";
+    };
+    appendToBody: BooleanConstructor;
+    appendTo: {
+        readonly type: PropType<string | HTMLElement>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "body";
+    };
+    beforeClose: {
+        readonly type: PropType<import('element-plus').DialogBeforeCloseFn>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    destroyOnClose: BooleanConstructor;
+    closeOnClickModal: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    closeOnPressEscape: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    lockScroll: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    modal: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    openDelay: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 0;
+    };
+    closeDelay: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: 0;
+    };
+    top: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    modelValue: BooleanConstructor;
+    modalClass: StringConstructor;
+    headerClass: StringConstructor;
+    bodyClass: StringConstructor;
+    footerClass: StringConstructor;
+    width: {
+        readonly type: PropType<string | number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    zIndex: {
+        readonly type: PropType<number>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    trapFocus: BooleanConstructor;
+    center: BooleanConstructor;
+    alignCenter: BooleanConstructor;
+    closeIcon: {
+        readonly type: PropType<string | import('vue').Component>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    };
+    draggable: BooleanConstructor;
+    overflow: BooleanConstructor;
+    fullscreen: BooleanConstructor;
+    showClose: {
+        readonly type: PropType<boolean>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: true;
+    };
+    title: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "";
+    };
+    ariaLevel: {
+        readonly type: PropType<string>;
+        readonly required: false;
+        readonly validator: ((val: unknown) => boolean) | undefined;
+        __epPropKey: true;
+    } & {
+        readonly default: "2";
+    };
+};
+export type DrawerProps = ExtractPropTypes<typeof drawerProps>;

package/lib/ele-drawer/style/css-var.scss

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

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,96 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-drawer-var($ele);
+
+/* 抽屉 */
+.ele-drawer {
+  & > .el-drawer {
+    background: eleVar('drawer', 'bg');
+
+    & > .el-drawer__header {
+      margin: 0;
+      padding: 0;
+      color: inherit;
+      display: block;
+      flex-shrink: 0;
+      border: none;
+    }
+
+    & > .el-drawer__body {
+      padding: 0;
+    }
+
+    & > .el-drawer__footer {
+      padding: 0;
+      flex-shrink: 0;
+      border: none;
+    }
+  }
+}
+
+.ele-drawer-header {
+  display: flex;
+  align-items: center;
+  padding: eleVar('drawer', 'header-padding');
+  border-bottom: eleVar('drawer', 'header-border');
+  box-sizing: border-box;
+}
+
+.ele-drawer-title {
+  flex: 1;
+  color: eleVar('drawer', 'header-color');
+  font-size: eleVar('drawer', 'header-font-size');
+  line-height: eleVar('drawer', 'header-line-height');
+  font-weight: eleVar('drawer', 'header-font-weight');
+  box-sizing: border-box;
+}
+
+.ele-drawer-close {
+  flex-shrink: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: eleVar('drawer', 'icon-size');
+  height: eleVar('drawer', 'icon-size');
+  line-height: eleVar('drawer', 'icon-size');
+  color: eleVar('drawer', 'icon-color');
+  font-size: eleVar('drawer', 'icon-font-size');
+  border-radius: eleVar('drawer', 'icon-radius');
+  transition: (color $transition-base, background-color $transition-base);
+  box-sizing: border-box;
+  cursor: pointer;
+
+  &:hover {
+    color: eleVar('drawer', 'icon-hover-color');
+    background: eleVar('drawer', 'icon-hover-bg');
+  }
+}
+
+.ele-drawer-body {
+  padding: eleVar('drawer', 'body-padding');
+  box-sizing: border-box;
+}
+
+.ele-drawer-footer {
+  padding: eleVar('drawer', 'footer-padding');
+  border-top: eleVar('drawer', 'footer-border');
+  box-sizing: border-box;
+}
+
+/* 失活状态 */
+.ele-drawer-hide {
+  display: none !important;
+}
+
+/* 限制在主体区域 */
+.ele-admin-modals > .ele-drawer {
+  height: auto;
+  pointer-events: auto;
+  position: absolute !important;
+
+  &:not(.el-drawer-fade-leave-active):not(.el-drawer-fade-enter-active) {
+    transition: (width $transition-base, left $transition-base);
+  }
+}

package/lib/ele-dropdown/components/dropdown-menu-item.cjs

@@ -0,0 +1,131 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const icons = require("../../icons");
+const _sfc_main = vue.defineComponent({
+  name: "DropdownMenuItem",
+  components: { ElIcon: elementPlus.ElIcon, ArrowRight: icons.ArrowRight },
+  props: {
+    /** 菜单项数据 */
+    item: {
+      type: Object,
+      required: true
+    },
+    /** 选中的菜单 */
+    selected: [String, Number, Object],
+    /** 自定义图标属性 */
+    iconProps: Object
+  },
+  emits: {
+    itemClick: (_item) => true,
+    wrapperContext: (_e) => true
+  },
+  setup(props, { emit }) {
+    const itemRef = vue.ref(null);
+    const subMenuRef = vue.ref(null);
+    const placement = vue.ref();
+    const handleItemClick = () => {
+      if (props.item.disabled) {
+        return;
+      }
+      emit("itemClick", props.item);
+    };
+    const handleItemMouseenter = () => {
+      const subMenuEl = subMenuRef.value;
+      if (!subMenuEl || !itemRef.value) {
+        return;
+      }
+      const rect = itemRef.value.getBoundingClientRect();
+      const rightOver = rect.right + subMenuEl.offsetWidth > window.innerWidth;
+      const bottomOver = rect.top + subMenuEl.offsetHeight > window.innerHeight;
+      if (rightOver && bottomOver) {
+        placement.value = "leftEnd";
+      } else if (rightOver) {
+        placement.value = "leftStart";
+      } else if (bottomOver) {
+        placement.value = "rightEnd";
+      } else {
+        placement.value = void 0;
+      }
+    };
+    const handleWrapperContext = (e) => {
+      emit("wrapperContext", e);
+    };
+    return {
+      itemRef,
+      subMenuRef,
+      placement,
+      handleItemClick,
+      handleItemMouseenter,
+      handleWrapperContext
+    };
+  }
+});
+const _export_sfc = (sfc, props) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "ele-dropdown-menu-divider"
+};
+const _hoisted_2 = { key: 1 };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  const _component_ArrowRight = vue.resolveComponent("ArrowRight");
+  return vue.openBlock(), vue.createElementBlock(vue.Fragment, null, [
+    _ctx.item.divided ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_1)) : vue.createCommentVNode("", true),
+    vue.createElementVNode("div", {
+      ref: "itemRef",
+      class: vue.normalizeClass([
+        "ele-dropdown-menu-item",
+        { "is-disabled": !!_ctx.item.disabled },
+        { "is-active": _ctx.selected === _ctx.item.command },
+        { "is-danger": !!_ctx.item.danger }
+      ]),
+      onClick: _cache[2] || (_cache[2] = vue.withModifiers((...args) => _ctx.handleItemClick && _ctx.handleItemClick(...args), ["stop"])),
+      onMouseenter: _cache[3] || (_cache[3] = (...args) => _ctx.handleItemMouseenter && _ctx.handleItemMouseenter(...args))
+    }, [
+      _ctx.item.slot && _ctx.item.slot !== "default" && _ctx.item.slot !== "subMenus" && _ctx.$slots[_ctx.item.slot] ? vue.renderSlot(_ctx.$slots, _ctx.item.slot, {
+        key: 0,
+        item: _ctx.item
+      }) : (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 1 }, [
+        _ctx.item.icon ? (vue.openBlock(), vue.createBlock(_component_ElIcon, vue.normalizeProps(vue.mergeProps({ key: 0 }, { ..._ctx.iconProps || {}, ..._ctx.item.iconProps || {} })), {
+          default: vue.withCtx(() => [
+            (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.item.icon), {
+              style: vue.normalizeStyle(_ctx.item.iconStyle)
+            }, null, 8, ["style"]))
+          ]),
+          _: 1
+        }, 16)) : vue.createCommentVNode("", true),
+        _ctx.item.title ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_2, vue.toDisplayString(_ctx.item.title), 1)) : vue.createCommentVNode("", true)
+      ], 64)),
+      _ctx.item.children && _ctx.item.children.length ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 2 }, [
+        vue.createVNode(_component_ElIcon, { class: "ele-dropdown-menu-item-arrow" }, {
+          default: vue.withCtx(() => [
+            vue.createVNode(_component_ArrowRight)
+          ]),
+          _: 1
+        }),
+        vue.createElementVNode("div", {
+          ref: "subMenuRef",
+          class: vue.normalizeClass(["ele-dropdown-wrapper is-sub-menu", [
+            { "is-right-end": _ctx.placement === "rightEnd" },
+            { "is-left-start": _ctx.placement === "leftStart" },
+            { "is-left-end": _ctx.placement === "leftEnd" }
+          ]]),
+          onContextmenu: _cache[0] || (_cache[0] = (...args) => _ctx.handleWrapperContext && _ctx.handleWrapperContext(...args)),
+          onClick: _cache[1] || (_cache[1] = vue.withModifiers(() => {
+          }, ["stop"]))
+        }, [
+          vue.renderSlot(_ctx.$slots, "subMenus")
+        ], 34)
+      ], 64)) : vue.createCommentVNode("", true)
+    ], 34)
+  ], 64);
+}
+const dropdownMenuItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = dropdownMenuItem;

package/lib/ele-dropdown/components/dropdown-menu-item.d.ts

@@ -0,0 +1,97 @@
+import { PropType } from 'vue';
+import { ElIconProps } from '../../ele-app/el';
+import { DropdownItem } from '../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** 菜单项数据 */
+    item: {
+        type: PropType<DropdownItem>;
+        required: true;
+    };
+    /** 选中的菜单 */
+    selected: PropType<DropdownItem["command"]>;
+    /** 自定义图标属性 */
+    iconProps: PropType<ElIconProps>;
+}>, {
+    itemRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    subMenuRef: import('vue').Ref<HTMLDivElement | null, HTMLDivElement | null>;
+    placement: import('vue').Ref<"rightEnd" | "leftStart" | "leftEnd" | undefined, "rightEnd" | "leftStart" | "leftEnd" | undefined>;
+    handleItemClick: () => void;
+    handleItemMouseenter: () => void;
+    handleWrapperContext: (e: MouseEvent) => void;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    itemClick: (_item: DropdownItem) => true;
+    wrapperContext: (_e: MouseEvent) => true;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 菜单项数据 */
+    item: {
+        type: PropType<DropdownItem>;
+        required: true;
+    };
+    /** 选中的菜单 */
+    selected: PropType<DropdownItem["command"]>;
+    /** 自定义图标属性 */
+    iconProps: PropType<ElIconProps>;
+}>> & Readonly<{
+    onItemClick?: ((_item: DropdownItem) => any) | undefined;
+    onWrapperContext?: ((_e: MouseEvent) => any) | undefined;
+}>, {}, {}, {
+    ElIcon: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstanceWithMixins<Readonly<import('vue').ExtractPropTypes<{
+            readonly size: {
+                readonly type: PropType<string | number>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
+            readonly color: {
+                readonly type: PropType<string>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
+        }>>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, Record<string, any>, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, {}, true, {}, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, {}, any, import('vue').ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('vue').ExtractPropTypes<{
+            readonly size: {
+                readonly type: PropType<string | number>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
+            readonly color: {
+                readonly type: PropType<string>;
+                readonly required: false;
+                readonly validator: ((val: unknown) => boolean) | undefined;
+                __epPropKey: true;
+            };
+        }>>, {}, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+        readonly size: {
+            readonly type: PropType<string | number>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
+        readonly color: {
+            readonly type: PropType<string>;
+            readonly required: false;
+            readonly validator: ((val: unknown) => boolean) | undefined;
+            __epPropKey: true;
+        };
+    }>>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, Record<string, any>, string, {}, {}, string, {}, import('vue').GlobalComponents, import('vue').GlobalDirectives, string, import('vue').ComponentProvideOptions> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+        $slots: {
+            default?(_: {}): any;
+        };
+    }) & import('vue').Plugin;
+    ArrowRight: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/ele-dropdown/components/dropdown-menus.cjs

@@ -0,0 +1,110 @@
+"use strict";
+const vue = require("vue");
+const DropdownMenuItem = require("./dropdown-menu-item");
+const _sfc_main = vue.defineComponent({
+  name: "DropdownMenus",
+  components: { DropdownMenuItem },
+  props: {
+    /** 下拉菜单数据 */
+    items: {
+      type: Array,
+      required: true
+    },
+    /** 选中的菜单 */
+    selected: [String, Number, Object],
+    /** 自定义下拉菜单样式 */
+    menuStyle: Object,
+    /** 自定义图标属性 */
+    iconProps: Object,
+    /** 尺寸 */
+    size: String
+  },
+  emits: {
+    itemClick: (_item) => true,
+    wrapperContext: (_e) => true
+  },
+  setup(_props, { emit }) {
+    const handleItemClick = (item) => {
+      if (item.disabled) {
+        return;
+      }
+      emit("itemClick", item);
+    };
+    const handleWrapperContext = (e) => {
+      emit("wrapperContext", e);
+    };
+    return {
+      handleItemClick,
+      handleWrapperContext
+    };
+  }
+});
+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) {
+  const _component_DropdownMenus = vue.resolveComponent("DropdownMenus", true);
+  const _component_DropdownMenuItem = vue.resolveComponent("DropdownMenuItem");
+  return vue.openBlock(), vue.createElementBlock("div", {
+    class: vue.normalizeClass([
+      "ele-dropdown-menu",
+      { "is-small": _ctx.size === "small" },
+      { "is-large": _ctx.size === "large" }
+    ]),
+    style: vue.normalizeStyle(_ctx.menuStyle)
+  }, [
+    (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.items, (item) => {
+      return vue.openBlock(), vue.createBlock(_component_DropdownMenuItem, {
+        key: item.key == null ? JSON.stringify(item.command) : item.key,
+        item,
+        selected: _ctx.selected,
+        iconProps: _ctx.iconProps,
+        onItemClick: _ctx.handleItemClick,
+        onWrapperContext: _ctx.handleWrapperContext
+      }, vue.createSlots({ _: 2 }, [
+        vue.renderList(Object.keys(_ctx.$slots).filter(
+          (k) => "default" !== k && "subMenus" !== k
+        ), (name) => {
+          return {
+            name,
+            fn: vue.withCtx((slotProps) => [
+              vue.renderSlot(_ctx.$slots, name, vue.mergeProps({ ref_for: true }, slotProps || {}))
+            ])
+          };
+        }),
+        item.children && item.children.length ? {
+          name: "subMenus",
+          fn: vue.withCtx(() => [
+            vue.createVNode(_component_DropdownMenus, {
+              items: item.children,
+              selected: _ctx.selected,
+              menuStyle: _ctx.menuStyle,
+              iconProps: _ctx.iconProps,
+              size: _ctx.size,
+              onItemClick: _ctx.handleItemClick,
+              onWrapperContext: _ctx.handleWrapperContext
+            }, vue.createSlots({ _: 2 }, [
+              vue.renderList(Object.keys(_ctx.$slots).filter(
+                (k) => "default" !== k && "subMenus" !== k
+              ), (name) => {
+                return {
+                  name,
+                  fn: vue.withCtx((slotProps) => [
+                    vue.renderSlot(_ctx.$slots, name, vue.mergeProps({ ref_for: true }, slotProps || {}))
+                  ])
+                };
+              })
+            ]), 1032, ["items", "selected", "menuStyle", "iconProps", "size", "onItemClick", "onWrapperContext"])
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["item", "selected", "iconProps", "onItemClick", "onWrapperContext"]);
+    }), 128))
+  ], 6);
+}
+const dropdownMenus = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = dropdownMenus;