ele-admin-plus 1.4.1 → 1.5.0-beta.1

package/es/ele-basic-select/types.d.ts

@@ -1,3 +1,4 @@
+import type { Ref } from 'vue';
 import type { ComponentProps } from '../ele-app/types';
 import type {
   EleModalProps,
@@ -21,17 +22,17 @@ export type MultipleValue = Array<SingleValue>;
 export type SelectValue = SingleValue | MultipleValue | undefined | null;
 
 /**
- * 多选选中数据
+ * 选中标签数据
  */
 export interface SelectedItem extends Record<string, any> {
   /** 文本 */
   label: string;
   /** 值 */
   value: SingleValue;
-  /** 是否不显示 */
+  /** 原始数据 */
+  data?: any;
+  /** 是否是超出省略时不显示的标签 */
   hide?: boolean;
-  /** 排序号 */
-  index?: number;
 }
 
 /**
@@ -47,3 +48,32 @@ export type PopperProps =
   | EleDrawerProps
   | EleTooltipProps
   | ComponentProps<{}>;
+
+/**
+ * 弹窗模式确认事件钩子
+ */
+export type BeforeConfirm<T> =
+  | ((data?: T) => boolean | undefined | void)
+  | ((data?: T[]) => boolean | undefined | void);
+
+/**
+ * 下拉组件操作选中标签数据
+ */
+export interface SelectDataProvider {
+  /** 选中标签数据 */
+  selectedItems: Ref<SelectedItem[]>;
+  /** 清空选中标签数据 */
+  clearSelectedItems: () => void;
+  /** 移除选中标签项 */
+  removeSelectedItem: (item: SelectedItem) => void;
+  /** 更新选中标签数据 */
+  updateSelectedItems: (items: SelectedItem[]) => void;
+  /** 弹窗模式的临时选中标签数据 */
+  tempSelectedItems: Ref<SelectedItem[]>;
+  /** 弹窗模式清空临时选中标签数据 */
+  clearTempSelectedItems: () => void;
+  /** 弹窗模式移除临时选中标签项 */
+  removeTempSelectedItem: (item: SelectedItem) => void;
+  /** 弹窗模式更新临时选中标签数据 */
+  updateTempSelectedItems: (items: SelectedItem[]) => void;
+}

package/es/ele-basic-select/util.d.ts

@@ -1,11 +1,16 @@
-import { SelectValue } from '../ele-basic-select/types';
+import { InjectionKey } from 'vue';
+import { SelectValue, SelectDataProvider } from './types';
 
+/**
+ * 下拉组件数据注入键名
+ */
+export declare const SELECT_DATA_KEY: InjectionKey<SelectDataProvider>;
 /**
  * 判断是否是空值
  * @param value 值
  * @param multiple 值是否是数组
  */
-export declare function isEmptyValue(value?: SelectValue, multiple?: boolean): boolean | undefined;
+export declare function isEmptyValue(value?: SelectValue, multiple?: boolean): boolean;
 /**
  * 判断值是否有变化
  * @param value1 新值

package/es/ele-basic-select/util.js

@@ -1,9 +1,17 @@
 import { inject } from "vue";
 import { formItemContextKey } from "element-plus";
 import { debugWarn } from "element-plus/es/utils/error";
+const SELECT_DATA_KEY = Symbol(
+  "selectData"
+);
 function isEmptyValue(value, multiple) {
-  const isNull = value == null || value === "";
-  return isNull || multiple && !value.length;
+  if (value == null || value === "") {
+    return true;
+  }
+  if (multiple && !value.length) {
+    return true;
+  }
+  return false;
 }
 function valueIsChanged(value1, value2, multiple) {
   const isNull1 = isEmptyValue(value1);
@@ -42,6 +50,7 @@ function useFormValidate() {
   return { validateChange };
 }
 export {
+  SELECT_DATA_KEY,
   isEmptyValue,
   useFormValidate,
   valueIsChanged

package/es/ele-bottom-bar/index.js

@@ -9,8 +9,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const layoutState = useLayoutState();
     const isActivated = ref(true);
     const teleportTo = computed(() => {
-      var _a;
-      return (_a = layoutState.getBodyWrapperEl) == null ? void 0 : _a.call(layoutState);
+      return layoutState.getBodyWrapperEl?.();
     });
     onActivated(() => {
       isActivated.value = true;

package/es/ele-buttons/components/item-render.d.ts

@@ -0,0 +1,46 @@
+import { PropType } from 'vue';
+import { ElDividerProps } from '../../ele-app/el';
+import { ButtonItem, ButtonItemType, ButtonsLocale } from '../types';
+
+declare const _default: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    /** 按钮数据 */
+    item: {
+        type: PropType<ButtonItem>;
+        required: true;
+    };
+    /** 是否显示分割线 */
+    divider: PropType<boolean | ElDividerProps>;
+    /** 组件类型 */
+    type: PropType<ButtonItemType>;
+    /** 是否增加包裹类名 */
+    wrapClass: BooleanConstructor;
+    /** 文案 */
+    lang: {
+        type: PropType<ButtonsLocale>;
+        required: true;
+    };
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    itemClick: (_command: any, _e?: MouseEvent | undefined) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    /** 按钮数据 */
+    item: {
+        type: PropType<ButtonItem>;
+        required: true;
+    };
+    /** 是否显示分割线 */
+    divider: PropType<boolean | ElDividerProps>;
+    /** 组件类型 */
+    type: PropType<ButtonItemType>;
+    /** 是否增加包裹类名 */
+    wrapClass: BooleanConstructor;
+    /** 文案 */
+    lang: {
+        type: PropType<ButtonsLocale>;
+        required: true;
+    };
+}>> & Readonly<{
+    onItemClick?: ((_command: any, _e?: MouseEvent | undefined) => any) | undefined;
+}>, {
+    wrapClass: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/es/ele-buttons/components/item-render.js

@@ -0,0 +1,225 @@
+import { defineComponent, computed, createElementBlock, openBlock, Fragment, createBlock, createCommentVNode, unref, mergeProps, withCtx, createElementVNode, toDisplayString, createVNode } from "vue";
+import { ElDivider, ElLink, ElIcon, ElButton } from "element-plus";
+import { ArrowDown, EyeOutlined, VerticalAlignMiddleOutlined, ColumnHeightOutlined, DownloadOutlined, UploadOutlined, DeleteOutlined, EditOutlined, PlusOutlined, SyncOutlined, SearchOutlined } from "../../icons/index";
+import { mapTree } from "../../utils/common";
+import { useDropdown } from "../../ele-dropdown-provider/util";
+import { usePopconfirm } from "../../ele-popconfirm-provider/util";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "ItemRender" },
+  __name: "item-render",
+  props: {
+    /** 按钮数据 */
+    item: {
+      type: Object,
+      required: true
+    },
+    /** 是否显示分割线 */
+    divider: [Boolean, Object],
+    /** 组件类型 */
+    type: String,
+    /** 是否增加包裹类名 */
+    wrapClass: Boolean,
+    /** 文案 */
+    lang: {
+      type: Object,
+      required: true
+    }
+  },
+  emits: {
+    itemClick: (_command, _e) => true
+  },
+  setup(__props, { emit: __emit }) {
+    const presetIcon = {
+      search: SearchOutlined,
+      reset: SyncOutlined,
+      add: PlusOutlined,
+      delBatch: DeleteOutlined,
+      edit: EditOutlined,
+      del: DeleteOutlined,
+      import: UploadOutlined,
+      export: DownloadOutlined,
+      upload: UploadOutlined,
+      download: DownloadOutlined,
+      expand: ColumnHeightOutlined,
+      fold: VerticalAlignMiddleOutlined,
+      detail: EyeOutlined
+    };
+    const dangerLinkPreset = ["del", "delBatch"];
+    const dangerBtnPreset = ["del", "delBatch"];
+    const warningBtnPreset = ["edit"];
+    const defaultBtnPreset = [
+      "reset",
+      "import",
+      "export",
+      "expand",
+      "fold",
+      "detail",
+      "more",
+      "cancel"
+    ];
+    const props = __props;
+    const emit = __emit;
+    const dropdown = useDropdown();
+    const popconfirm = usePopconfirm();
+    const getItemTitle = (item, lang) => {
+      if (item.title != null) {
+        return item.title;
+      }
+      if (!item.preset) {
+        return;
+      }
+      return lang[item.preset];
+    };
+    const getItemIcon = (item) => {
+      if (item.icon != null) {
+        return item.icon;
+      }
+      if (!item.preset) {
+        return;
+      }
+      return presetIcon[item.preset];
+    };
+    const title = computed(() => {
+      return getItemTitle(props.item, props.lang);
+    });
+    const icon = computed(() => {
+      return getItemIcon(props.item);
+    });
+    const linkType = computed(() => {
+      const preset = props.item.preset;
+      if (preset && dangerLinkPreset.includes(preset)) {
+        return "danger";
+      }
+      return "primary";
+    });
+    const btnType = computed(() => {
+      const preset = props.item.preset;
+      if (preset) {
+        if (dangerBtnPreset.includes(preset)) {
+          return "danger";
+        }
+        if (warningBtnPreset.includes(preset)) {
+          return "warning";
+        }
+        if (defaultBtnPreset.includes(preset)) {
+          return "default";
+        }
+      }
+      return "primary";
+    });
+    const triggerItemClick = (command, e) => {
+      emit("itemClick", command, e);
+    };
+    const handleDropdownCommand = (command) => {
+      triggerItemClick(command);
+    };
+    const handleOpenDropdown = (e, item) => {
+      if (!item.dropdownItems || !item.dropdownItems.length || !dropdown || !dropdown.openDropdown) {
+        return;
+      }
+      dropdown.openDropdown(
+        e.currentTarget,
+        mapTree(item.dropdownItems, (d) => {
+          return {
+            ...d,
+            title: getItemTitle(d, props.lang),
+            icon: getItemIcon(d)
+          };
+        }),
+        {
+          iconSize: "small",
+          onCommand: handleDropdownCommand,
+          popperOptions: { strategy: "fixed" },
+          ...item.dropdownProps || {},
+          trigger: "hover"
+        }
+      );
+    };
+    const handleOpenPopconfirm = (e, item) => {
+      if (!item.popconfirmProps) {
+        return;
+      }
+      if (!popconfirm || !popconfirm.openPopconfirm) {
+        const onConfirm = item.popconfirmProps.onConfirm;
+        onConfirm && onConfirm(e);
+        return;
+      }
+      popconfirm.openPopconfirm(e.currentTarget, {
+        popperOptions: { strategy: "fixed" },
+        ...item.popconfirmProps || {},
+        trigger: "click"
+      });
+    };
+    const handleItemClick = (e, item) => {
+      if (item.popconfirmProps) {
+        handleOpenPopconfirm(e, item);
+      }
+      item.onClick && item.onClick(e);
+      triggerItemClick(item.command, e);
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        __props.divider ? (openBlock(), createBlock(unref(ElDivider), mergeProps({
+          key: 0,
+          direction: "vertical",
+          class: "ele-buttons-divider"
+        }, typeof __props.divider === "object" ? __props.divider : {}), null, 16)) : createCommentVNode("", true),
+        (__props.item.type ?? __props.type) === "link" ? (openBlock(), createBlock(unref(ElLink), mergeProps({
+          key: 1,
+          underline: "never",
+          type: linkType.value,
+          icon: icon.value,
+          class: ["ele-buttons-item ele-buttons-link", {
+            "ele-buttons-icon-link": !!icon.value,
+            "ele-buttons-wrap": __props.wrapClass
+          }]
+        }, __props.item.props || {}, {
+          onClick: _cache[0] || (_cache[0] = (e) => handleItemClick(e, __props.item)),
+          onMouseenter: _cache[1] || (_cache[1] = (e) => handleOpenDropdown(e, __props.item))
+        }), {
+          default: withCtx(() => [
+            createElementVNode("span", null, toDisplayString(title.value), 1),
+            __props.item.dropdownItems && __props.item.dropdownItems.length ? (openBlock(), createBlock(unref(ElIcon), {
+              key: 0,
+              class: "ele-buttons-arrow"
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(ArrowDown))
+              ]),
+              _: 1
+            })) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 16, ["type", "icon", "class"])) : (openBlock(), createBlock(unref(ElButton), mergeProps({
+          key: 2,
+          type: btnType.value,
+          icon: icon.value,
+          class: ["ele-buttons-item ele-buttons-btn", {
+            "ele-buttons-icon-btn": !!icon.value,
+            "ele-buttons-wrap": __props.wrapClass
+          }]
+        }, __props.item.props || {}, {
+          onClick: _cache[2] || (_cache[2] = (e) => handleItemClick(e, __props.item)),
+          onMouseenter: _cache[3] || (_cache[3] = (e) => handleOpenDropdown(e, __props.item))
+        }), {
+          default: withCtx(() => [
+            createElementVNode("span", null, toDisplayString(title.value), 1),
+            __props.item.dropdownItems && __props.item.dropdownItems.length ? (openBlock(), createBlock(unref(ElIcon), {
+              key: 0,
+              class: "ele-buttons-arrow"
+            }, {
+              default: withCtx(() => [
+                createVNode(unref(ArrowDown))
+              ]),
+              _: 1
+            })) : createCommentVNode("", true)
+          ]),
+          _: 1
+        }, 16, ["type", "icon", "class"]))
+      ], 64);
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/ele-buttons/index.d.ts

@@ -0,0 +1,47 @@
+declare function __VLS_template(): {
+    default?(_: {}): any;
+};
+declare const __VLS_component: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+    items: import('vue').PropType<import('./types').ButtonItem[]>;
+    divider: import('vue').PropType<boolean | import('../ele-app/el').ElDividerProps>;
+    type: import('vue').PropType<import('./types').ButtonItemType>;
+    gap: {
+        type: (NumberConstructor | BooleanConstructor)[];
+        default: null;
+    };
+    wrap: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    modalFooter: BooleanConstructor;
+    locale: import('vue').PropType<Partial<import('./types').ButtonsLocale>>;
+}>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    itemClick: (_command: any, _e?: MouseEvent | undefined) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    items: import('vue').PropType<import('./types').ButtonItem[]>;
+    divider: import('vue').PropType<boolean | import('../ele-app/el').ElDividerProps>;
+    type: import('vue').PropType<import('./types').ButtonItemType>;
+    gap: {
+        type: (NumberConstructor | BooleanConstructor)[];
+        default: null;
+    };
+    wrap: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    modalFooter: BooleanConstructor;
+    locale: import('vue').PropType<Partial<import('./types').ButtonsLocale>>;
+}>> & Readonly<{
+    onItemClick?: ((_command: any, _e?: MouseEvent | undefined) => any) | undefined;
+}>, {
+    gap: number | boolean;
+    wrap: boolean;
+    modalFooter: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, ReturnType<typeof __VLS_template>>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/es/ele-buttons/index.js

@@ -0,0 +1,58 @@
+import { defineComponent, createElementBlock, openBlock, normalizeStyle, normalizeClass, renderSlot, Fragment, renderList, createBlock, unref } from "vue";
+import { useLocale } from "../ele-config-provider/receiver";
+import ItemRender from "./components/item-render";
+import { buttonsEmits, buttonsProps } from "./props";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...{ name: "EleButtons" },
+  __name: "index",
+  props: buttonsProps,
+  emits: buttonsEmits,
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const { lang } = useLocale("buttons", props);
+    const handleItemClick = (command, e) => {
+      emit("itemClick", command, e);
+    };
+    return (_ctx, _cache) => {
+      return _ctx.gap != null || _ctx.wrap != null || _ctx.modalFooter ? (openBlock(), createElementBlock("div", {
+        key: 0,
+        class: normalizeClass(["ele-buttons-wrap ele-buttons", {
+          "is-nowrap": _ctx.wrap === false,
+          "is-gap": _ctx.gap != null,
+          "is-modal-footer": _ctx.modalFooter
+        }]),
+        style: normalizeStyle(_ctx.gap == null || _ctx.gap === true ? {} : { gap: `${_ctx.gap || 0}px` })
+      }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index) => {
+          return openBlock(), createBlock(ItemRender, {
+            key: item.key ?? item.command ?? item.title,
+            item,
+            divider: index === 0 ? false : _ctx.divider,
+            type: _ctx.type,
+            wrapClass: false,
+            lang: unref(lang),
+            onItemClick: handleItemClick
+          }, null, 8, ["item", "divider", "type", "lang"]);
+        }), 128)),
+        renderSlot(_ctx.$slots, "default")
+      ], 6)) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
+        (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.items, (item, index) => {
+          return openBlock(), createBlock(ItemRender, {
+            key: item.key ?? item.command ?? item.title,
+            item,
+            divider: index === 0 ? false : _ctx.divider,
+            type: _ctx.type,
+            wrapClass: true,
+            lang: unref(lang),
+            onItemClick: handleItemClick
+          }, null, 8, ["item", "divider", "type", "lang"]);
+        }), 128)),
+        renderSlot(_ctx.$slots, "default")
+      ], 64));
+    };
+  }
+});
+export {
+  _sfc_main as default
+};

package/es/ele-buttons/props.d.ts

@@ -0,0 +1,36 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { ElDividerProps } from '../ele-app/el';
+import { ButtonItem, ButtonItemType, ButtonsLocale } from './types';
+
+/**
+ * 属性
+ */
+export declare const buttonsProps: {
+    /** 按钮数据 */
+    items: PropType<ButtonItem[]>;
+    /** 是否显示分割线 */
+    divider: PropType<boolean | ElDividerProps>;
+    /** 组件类型 */
+    type: PropType<ButtonItemType>;
+    /** 间距 */
+    gap: {
+        type: (BooleanConstructor | NumberConstructor)[];
+        default: null;
+    };
+    /** 是否自动换行 */
+    wrap: {
+        type: BooleanConstructor;
+        default: null;
+    };
+    /** 是否是弹窗底栏 */
+    modalFooter: BooleanConstructor;
+    /** 国际化 */
+    locale: PropType<Partial<ButtonsLocale>>;
+};
+export type ButtonsProps = ExtractPropTypes<typeof buttonsProps>;
+/**
+ * 事件
+ */
+export declare const buttonsEmits: {
+    itemClick: (_command: any, _e?: MouseEvent) => boolean;
+};

package/es/ele-buttons/props.js

@@ -0,0 +1,29 @@
+const buttonsProps = {
+  /** 按钮数据 */
+  items: Array,
+  /** 是否显示分割线 */
+  divider: [Boolean, Object],
+  /** 组件类型 */
+  type: String,
+  /** 间距 */
+  gap: {
+    type: [Boolean, Number],
+    default: null
+  },
+  /** 是否自动换行 */
+  wrap: {
+    type: Boolean,
+    default: null
+  },
+  /** 是否是弹窗底栏 */
+  modalFooter: Boolean,
+  /** 国际化 */
+  locale: Object
+};
+const buttonsEmits = {
+  itemClick: (_command, _e) => true
+};
+export {
+  buttonsEmits,
+  buttonsProps
+};

package/es/ele-buttons/style/css-var.scss

@@ -0,0 +1,8 @@
+@use '../../style/util.scss' as *;
+
+/* 表格操作按钮主题变量 */
+@mixin set-buttons-var($var) {
+  .ele-buttons-wrap {
+    @include set-ele-var('buttons', $var);
+  }
+}

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,5 @@
+import "element-plus/es/components/divider/style/index";
+import "element-plus/es/components/link/style/index";
+import "element-plus/es/components/button/style/index";
+import "element-plus/es/components/icon/style/index";
+import "./index.scss";

package/es/ele-buttons/style/index.scss

@@ -0,0 +1,68 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+@use './css-var.scss' as *;
+
+@include set-buttons-var($ele);
+
+/* 按钮容器 */
+.ele-buttons {
+  display: inline-flex;
+  align-items: center;
+  flex-wrap: wrap;
+
+  &.is-nowrap {
+    flex-wrap: nowrap;
+  }
+
+  &.is-gap {
+    gap: eleVar('buttons', 'gap');
+
+    .ele-buttons-item.ele-buttons-btn {
+      margin: 0;
+    }
+  }
+
+  &.is-modal-footer {
+    display: flex;
+    justify-content: flex-end;
+  }
+}
+
+/* 下拉箭头 */
+.ele-buttons-link .ele-buttons-arrow {
+  font-size: eleVar('buttons', 'link-arrow-font-size');
+  margin: eleVar('buttons', 'link-arrow-margin');
+  vertical-align: eleVar('buttons', 'link-arrow-vertical-align');
+}
+
+.ele-buttons-btn .ele-buttons-arrow {
+  font-size: eleVar('buttons', 'btn-arrow-vertical-align');
+  margin: eleVar('buttons', 'btn-arrow-margin');
+}
+
+/* 带图标时间距调整 */
+.ele-buttons-item {
+  &.ele-buttons-icon-link > .el-icon {
+    font-size: eleVar('buttons', 'link-icon-font-size');
+    margin: eleVar('buttons', 'link-icon-margin');
+  }
+
+  &.ele-buttons-btn.ele-buttons-icon-btn {
+    padding-left: eleVar('buttons', 'icon-btn-padding-left');
+    padding-right: eleVar('buttons', 'icon-btn-padding-right');
+
+    & > .el-icon {
+      margin: eleVar('buttons', 'btn-icon-margin');
+    }
+
+    &.el-button--small {
+      padding-left: eleVar('buttons', 'icon-btn-sm-padding-left');
+      padding-right: eleVar('buttons', 'icon-btn-sm-padding-right');
+    }
+
+    &.el-button--large {
+      padding-left: eleVar('buttons', 'icon-btn-lg-padding-left');
+      padding-right: eleVar('buttons', 'icon-btn-lg-padding-right');
+    }
+  }
+}