yuang-framework-ui-pc 1.0.19 → 1.1.0

package/lib/ele-data-table/util.d.ts

@@ -0,0 +1,172 @@
+import { Emitter } from '../ele-app/types';
+import { ElTableInstance } from '../ele-app/el';
+import { dataTableEmits } from './props';
+import { DataKey, DataItem, Column, Columns, Sorter, Filter, GetInstance, TableMethods, ShowOverflowTooltip, TooltipEffect, TooltipOptions, RowClass, RowKey } from './types';
+
+/**
+ * 获取行的类名
+ * @param rowClass 自定义行类名
+ * @param param 方法类型的参数
+ */
+export declare function getRowClass(rowClass: RowClass | undefined, param: Parameters<Exclude<RowClass, string | undefined>>[0]): string | undefined;
+/**
+ * 获取行的类名
+ * @param rowClass 自定义行类名
+ * @param param 方法类型的参数
+ */
+export declare function getBodyRowClass(rowClass: RowClass | undefined, param: Parameters<Exclude<RowClass, string | undefined>>[0]): string;
+/**
+ * 获取表头行的类名
+ * @param rowClass 自定义行类名
+ * @param param 方法类型的参数
+ * @param ellipsis 是否单行省略
+ */
+export declare function getHeadRowClass(rowClass: RowClass | undefined, param: Parameters<Exclude<RowClass, string | undefined>>[0], ellipsis: boolean): string;
+/**
+ * 获取全局溢出提示组件属性
+ * @param showOverflowTooltip 溢出提示组件属性
+ * @param tooltipEffect 溢出提示组件主题
+ * @param tooltipOptions 溢出提示组件配置
+ */
+export declare function getGlobalTooltipProps(showOverflowTooltip?: ShowOverflowTooltip, tooltipEffect?: TooltipEffect, tooltipOptions?: TooltipOptions): ShowOverflowTooltip;
+/**
+ * 合并提示组件相关属性
+ * @param props 单元格提示组件属性
+ * @param globalProps 表格提示组件属性
+ */
+export declare function mergeTooltipProps(props?: ShowOverflowTooltip, globalProps?: ShowOverflowTooltip): Exclude<ShowOverflowTooltip, true>;
+/**
+ * 获取单元格提示组件属性
+ * @param props 单元格提示组件属性
+ * @param globalProps 表格提示组件属性
+ */
+export declare function getTooltipProps(props?: ShowOverflowTooltip, globalProps?: ShowOverflowTooltip): ShowOverflowTooltip;
+/**
+ * 切换表格指定数据的选中状态
+ * @param tableRef 表格实例
+ * @param row 数据
+ * @param selected 选中状态
+ */
+export declare function toggleRowSelectionPro(tableRef: ElTableInstance | undefined, row: DataItem, selected: boolean): void;
+/**
+ * 获取表格筛选值
+ * @param tableRef 表格实例
+ */
+export declare function getTableFilter(tableRef?: ElTableInstance): Filter | undefined;
+/**
+ * 获取含表格状态的列配置
+ * @param cols 表格的列
+ * @param sorter 当前排序状态
+ * @param filter 当前筛选状态
+ */
+export declare function getStateCols(cols: Columns, sorter?: Sorter, filter?: Filter): {
+    cols: Columns;
+    sorter?: undefined;
+} | {
+    cols: Columns;
+    sorter: Sorter | undefined;
+};
+/**
+ * 获取判断多选是否可选择的方法
+ * @param columns 列配置
+ */
+export declare function getSelectableFunction(columns?: Columns): ((row: any, index: number) => boolean) | null | undefined;
+/**
+ * 判断行是否禁止多选
+ * @param row 行数据
+ * @param index 行索引
+ * @param columns 列配置
+ */
+export declare function isDisableRow(row: DataItem, index: number, columns?: Columns): boolean;
+/**
+ * 判断是否保存不存在的选中数据
+ * @param columns 列配置
+ */
+export declare function isReserveChecked(columns?: Columns): boolean;
+/**
+ * 用于根据列的固定值排序
+ * @param fixed 固定值
+ */
+export declare function getColFixedNumber(fixed?: boolean | string): 0 | 1 | 2;
+/**
+ * 获取列类名
+ * @param col 列属性
+ */
+export declare function getCellClass(col: Column): string | undefined;
+/**
+ * 获取列筛选下拉框类名
+ * @param filterClassName 自定义类名
+ */
+export declare function getFilterPopperClass(filterClassName?: string): string;
+/**
+ * 获取数据值
+ * @param rows 数据
+ * @param rowKey 值键名
+ */
+export declare function getRowKeys(rows: DataItem[] | undefined, rowKey: RowKey): DataKey[];
+/**
+ * 获取值对应的数据
+ * @param key 值
+ * @param data 全部数据
+ * @param rowKey 值键名
+ * @param childrenField 子级数据键名
+ */
+export declare function getRowByKey(key: DataKey, data?: DataItem[], rowKey?: RowKey, childrenField?: string): DataItem | undefined;
+/**
+ * 获取平铺后的数据值和数据
+ * @param data 表格数据
+ * @param rowKey 数据值字段名
+ * @param childrenField 子级字段名
+ */
+export declare function getKeysAndList(data?: DataItem[], rowKey?: RowKey, childrenField?: string): [DataKey[], DataItem[]];
+/**
+ * 判断值是否改变
+ * @param value1 值
+ * @param value2 新值
+ */
+export declare function valueIsChanged<T>(value1?: T | null, value2?: T | null): boolean;
+/**
+ * 判断数组数据是否改变
+ * @param list1 数组
+ * @param list2 新数组
+ */
+export declare function arrayIsChanged<T>(list1?: T[] | null, list2?: T[] | null): boolean;
+/**
+ * 使用粘性表头
+ */
+export declare function useStickyHeader(): {
+    isLayoutFixedHead: import('vue').ComputedRef<boolean | undefined>;
+    isLayoutMaximized: import('vue').ComputedRef<boolean | undefined>;
+};
+/**
+ * 表格实例方法统一处理
+ * @param getInstance 获取表格实例方法
+ */
+export declare function useMethods(getInstance: GetInstance): TableMethods;
+/**
+ * 表格事件统一处理
+ * @param emit 事件触发器
+ */
+export declare function useEmits(emit: Emitter<typeof dataTableEmits>): {
+    onSelect: (selection: DataItem[], row: DataItem) => void;
+    onSelectAll: (selection: DataItem[]) => void;
+    onCellMouseEnter: (row: DataItem, column: Column, cell: HTMLTableCellElement, event: MouseEvent) => void;
+    onCellMouseLeave: (row: DataItem, column: Column, cell: HTMLTableCellElement, event: MouseEvent) => void;
+    onCellClick: (row: DataItem, column: Column, cell: HTMLTableCellElement, event: MouseEvent) => void;
+    onCellDblclick: (row: DataItem, column: Column, cell: HTMLTableCellElement, event: MouseEvent) => void;
+    onCellContextmenu: (row: DataItem, column: Column, cell: HTMLTableCellElement, event: MouseEvent) => void;
+    onRowClick: (row: DataItem, column: Column, event: MouseEvent) => void;
+    onRowContextmenu: (row: DataItem, column: Column, event: MouseEvent) => void;
+    onRowDblclick: (row: DataItem, column: Column, event: MouseEvent) => void;
+    onHeaderClick: (column: Column, event: MouseEvent) => void;
+    onHeaderContextmenu: (column: Column, event: MouseEvent) => void;
+    onHeaderDragend: (newWidth: number, oldWidth: number, column: Column, event: MouseEvent) => void;
+    onExpandChange: (row: DataItem | undefined, expanded: boolean | DataItem[]) => void;
+    onSelectionChange: (selection: DataItem[]) => void;
+    onSortChange: (sorter: Sorter) => void;
+    onFilterChange: (filter: Filter) => void;
+    onCurrentChange: (currentRow?: DataItem | null, oldCurrentRow?: DataItem | null) => void;
+    /** 新增的事件 */
+    'onUpdate:currentRowKey': (currentRowKey?: DataKey) => void;
+    'onUpdate:selectedRowKeys': (selectedRowKeys: DataKey[]) => void;
+};

package/lib/ele-dot/index.cjs

@@ -0,0 +1,43 @@
+"use strict";
+const vue = require("vue");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleDot",
+  props: props.dotProps
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = {
+  key: 0,
+  class: "ele-dot-text"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return vue.openBlock(), vue.createElementBlock("span", {
+    class: vue.normalizeClass([
+      "ele-dot",
+      { "is-success": "success" === _ctx.type },
+      { "is-warning": "warning" === _ctx.type },
+      { "is-danger": "danger" === _ctx.type },
+      { "is-info": "info" === _ctx.type },
+      { "is-ripple": _ctx.ripple }
+    ])
+  }, [
+    vue.createElementVNode("span", {
+      class: "ele-dot-status",
+      style: vue.normalizeStyle({ width: _ctx.size, height: _ctx.size, background: _ctx.color })
+    }, [
+      vue.createElementVNode("span", {
+        class: "ele-dot-ripple",
+        style: vue.normalizeStyle({ width: _ctx.size, height: _ctx.size, background: _ctx.color })
+      }, null, 4)
+    ], 4),
+    _ctx.text ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_1, vue.toDisplayString(_ctx.text), 1)) : vue.createCommentVNode("", true)
+  ], 2);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;

package/lib/ele-dot/index.d.ts

@@ -0,0 +1,29 @@
+declare const _default: import('vue').DefineComponent<{
+    type: import('vue').PropType<import('./types').DotType>;
+    color: StringConstructor;
+    ripple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    text: StringConstructor;
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+}, unknown, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+    type: import('vue').PropType<import('./types').DotType>;
+    color: StringConstructor;
+    ripple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    text: StringConstructor;
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    ripple: boolean;
+    size: string;
+}, {}>;
+export default _default;

package/lib/ele-dot/props.cjs

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const dotProps = {
+  /** 类型 */
+  type: String,
+  /** 自定义颜色 */
+  color: String,
+  /** 是否显示水波动画 */
+  ripple: {
+    type: Boolean,
+    default: true
+  },
+  /** 文本 */
+  text: String,
+  /** 尺寸 */
+  size: {
+    type: String,
+    default: "6px"
+  }
+};
+exports.dotProps = dotProps;

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

@@ -0,0 +1,25 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { DotType } from './types';
+
+/**
+ * 属性
+ */
+export declare const dotProps: {
+    /** 类型 */
+    type: PropType<DotType>;
+    /** 自定义颜色 */
+    color: StringConstructor;
+    /** 是否显示水波动画 */
+    ripple: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** 文本 */
+    text: StringConstructor;
+    /** 尺寸 */
+    size: {
+        type: StringConstructor;
+        default: string;
+    };
+};
+export type DotProps = ExtractPropTypes<typeof dotProps>;

package/lib/ele-dot/style/index.cjs

@@ -0,0 +1,2 @@
+"use strict";
+require("./index.scss");

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

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,68 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+
+.ele-dot {
+  display: inline-flex;
+  align-items: center;
+
+  .ele-dot-text {
+    flex-shrink: 0;
+    margin-left: 8px;
+  }
+
+  .ele-dot-status {
+    flex-shrink: 0;
+    background: elVar('color-primary');
+    border-radius: 50%;
+    position: relative;
+  }
+
+  .ele-dot-ripple {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: elVar('color-primary');
+    animation: eleAnimDot 1.2s ease-in-out infinite;
+    transform-origin: center;
+    border-radius: 50%;
+    display: none;
+  }
+
+  &.is-ripple .ele-dot-ripple {
+    display: block;
+  }
+
+  &.is-success .ele-dot-status,
+  &.is-success .ele-dot-ripple {
+    background: elVar('color-success');
+  }
+
+  &.is-warning .ele-dot-status,
+  &.is-warning .ele-dot-ripple {
+    background: elVar('color-warning');
+  }
+
+  &.is-danger .ele-dot-status,
+  &.is-danger .ele-dot-ripple {
+    background: elVar('color-danger');
+  }
+
+  &.is-info .ele-dot-status,
+  &.is-info .ele-dot-ripple {
+    background: elVar('color-info');
+  }
+}
+
+@keyframes eleAnimDot {
+  from {
+    transform: scale(0.8);
+    opacity: 0.6;
+  }
+
+  to {
+    transform: scale(2.4);
+    opacity: 0;
+  }
+}

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

@@ -0,0 +1,4 @@
+/**
+ * 类型
+ */
+export type DotType = 'primary' | 'success' | 'warning' | 'danger' | 'info';

package/lib/ele-drawer/index.cjs

@@ -0,0 +1,201 @@
+"use strict";
+const vue = require("vue");
+const elementPlus = require("element-plus");
+const icons = require("../icons");
+const ReceiverView = require("../ele-config-provider/components/receiver-view");
+const util = require("../ele-pro-layout/util");
+const util$1 = require("../ele-modal/util");
+const props = require("./props");
+const _sfc_main = vue.defineComponent({
+  name: "EleDrawer",
+  components: { ElDrawer: elementPlus.ElDrawer, ElIcon: elementPlus.ElIcon, CloseOutlined: icons.CloseOutlined, ReceiverView },
+  props: props.drawerProps,
+  emits: elementPlus.drawerEmits,
+  setup(props2, { emit }) {
+    const layoutState = util.useLayoutState();
+    const drawerRef = vue.ref(null);
+    const isActivated = vue.ref(true);
+    const drawerClass = vue.computed(() => {
+      const classes = ["ele-drawer"];
+      if (!props2.modelValue) {
+        classes.push("ele-drawer-closed");
+      }
+      if (!isActivated.value && props2.modelValue) {
+        classes.push("ele-drawer-hide");
+      }
+      if (props2.inner) {
+        classes.push("ele-drawer-inner");
+      }
+      if (props2.modalClass) {
+        classes.push(props2.modalClass);
+      }
+      return classes.join(" ");
+    });
+    const teleportTo = vue.computed(() => {
+      return util$1.getModalContainer(
+        props2.inner,
+        false,
+        props2.appendTo,
+        layoutState.modalsEl
+      );
+    });
+    const teleportDisabled = vue.computed(() => {
+      const appendTo = props2.appendTo || "body";
+      const disabled = appendTo === "body" ? !props2.appendToBody : false;
+      return props2.inner ? false : disabled;
+    });
+    const handleClose = () => {
+      if (drawerRef.value && drawerRef.value.handleClose) {
+        drawerRef.value.handleClose();
+      }
+    };
+    const updateModelValue = (value) => {
+      emit("update:modelValue", value);
+    };
+    const handleDrawerOpen = () => {
+      emit("open");
+    };
+    const handleDrawerOpened = () => {
+      emit("opened");
+    };
+    const handleDrawerClose = () => {
+      emit("close");
+    };
+    const handleDrawerClosed = () => {
+      emit("closed");
+    };
+    const handleDrawerOpenAutoFocus = () => {
+      emit("openAutoFocus");
+    };
+    const handleDrawerCloseAutoFocus = () => {
+      emit("closeAutoFocus");
+    };
+    vue.onActivated(() => {
+      isActivated.value = true;
+    });
+    vue.onDeactivated(() => {
+      isActivated.value = false;
+    });
+    return {
+      drawerRef,
+      drawerClass,
+      teleportTo,
+      teleportDisabled,
+      handleClose,
+      updateModelValue,
+      handleDrawerOpen,
+      handleDrawerOpened,
+      handleDrawerClose,
+      handleDrawerClosed,
+      handleDrawerOpenAutoFocus,
+      handleDrawerCloseAutoFocus
+    };
+  }
+});
+const _export_sfc = (sfc, props2) => {
+  const target = sfc.__vccOpts || sfc;
+  for (const [key, val] of props2) {
+    target[key] = val;
+  }
+  return target;
+};
+const _hoisted_1 = ["onClick"];
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_CloseOutlined = vue.resolveComponent("CloseOutlined");
+  const _component_ElIcon = vue.resolveComponent("ElIcon");
+  const _component_ReceiverView = vue.resolveComponent("ReceiverView");
+  const _component_ElDrawer = vue.resolveComponent("ElDrawer");
+  return vue.openBlock(), vue.createBlock(vue.Teleport, {
+    to: _ctx.teleportTo,
+    disabled: _ctx.teleportDisabled
+  }, [
+    vue.createVNode(_component_ElDrawer, vue.mergeProps(_ctx.$attrs, {
+      ref: "drawerRef",
+      modelValue: _ctx.modelValue,
+      appendToBody: false,
+      lockScroll: _ctx.inner ? false : _ctx.lockScroll,
+      beforeClose: _ctx.beforeClose,
+      closeOnClickModal: _ctx.closeOnClickModal,
+      closeOnPressEscape: _ctx.closeOnPressEscape,
+      openDelay: _ctx.openDelay,
+      closeDelay: _ctx.closeDelay,
+      destroyOnClose: _ctx.destroyOnClose,
+      modal: _ctx.modal,
+      direction: _ctx.direction,
+      showClose: false,
+      size: _ctx.size,
+      title: _ctx.title,
+      withHeader: _ctx.withHeader,
+      modalClass: _ctx.drawerClass,
+      zIndex: _ctx.zIndex,
+      headerAriaLevel: _ctx.headerAriaLevel,
+      onOpen: _ctx.handleDrawerOpen,
+      onOpened: _ctx.handleDrawerOpened,
+      onClose: _ctx.handleDrawerClose,
+      onClosed: _ctx.handleDrawerClosed,
+      onOpenAutoFocus: _ctx.handleDrawerOpenAutoFocus,
+      onCloseAutoFocus: _ctx.handleDrawerCloseAutoFocus,
+      "onUpdate:modelValue": _ctx.updateModelValue
+    }), vue.createSlots({
+      header: vue.withCtx(({ close }) => [
+        vue.createElementVNode("div", {
+          class: "ele-drawer-header",
+          style: vue.normalizeStyle(_ctx.headerStyle)
+        }, [
+          vue.createElementVNode("div", {
+            role: "heading",
+            class: "ele-drawer-title",
+            style: vue.normalizeStyle(_ctx.titleStyle)
+          }, [
+            vue.renderSlot(_ctx.$slots, "header", {}, () => [
+              vue.createTextVNode(vue.toDisplayString(_ctx.title), 1)
+            ])
+          ], 4),
+          _ctx.showClose ? (vue.openBlock(), vue.createElementBlock("div", {
+            key: 0,
+            class: "ele-drawer-close",
+            style: vue.normalizeStyle(_ctx.closeBtnStyle),
+            onClick: close
+          }, [
+            vue.renderSlot(_ctx.$slots, "closeBtn", {}, () => [
+              vue.createVNode(_component_ElIcon, null, {
+                default: vue.withCtx(() => [
+                  vue.createVNode(_component_CloseOutlined)
+                ]),
+                _: 1
+              })
+            ])
+          ], 12, _hoisted_1)) : vue.createCommentVNode("", true)
+        ], 4)
+      ]),
+      default: vue.withCtx(() => [
+        vue.createVNode(_component_ReceiverView, {
+          wrapPosition: false,
+          class: "ele-drawer-body",
+          style: vue.normalizeStyle(_ctx.bodyStyle)
+        }, {
+          default: vue.withCtx(() => [
+            vue.renderSlot(_ctx.$slots, "default")
+          ]),
+          _: 3
+        }, 8, ["style"])
+      ]),
+      _: 2
+    }, [
+      _ctx.$slots.footer ? {
+        name: "footer",
+        fn: vue.withCtx(() => [
+          vue.createElementVNode("div", {
+            class: "ele-drawer-footer",
+            style: vue.normalizeStyle(_ctx.footerStyle)
+          }, [
+            vue.renderSlot(_ctx.$slots, "footer")
+          ], 4)
+        ]),
+        key: "0"
+      } : void 0
+    ]), 1040, ["modelValue", "lockScroll", "beforeClose", "closeOnClickModal", "closeOnPressEscape", "openDelay", "closeDelay", "destroyOnClose", "modal", "direction", "size", "title", "withHeader", "modalClass", "zIndex", "headerAriaLevel", "onOpen", "onOpened", "onClose", "onClosed", "onOpenAutoFocus", "onCloseAutoFocus", "onUpdate:modelValue"])
+  ], 8, ["to", "disabled"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+module.exports = index;