yuang-framework-ui-pc 1.1.44 → 1.1.46

package/es/ele-cropper-modal/index.js

@@ -0,0 +1,94 @@
+import { defineComponent, resolveComponent, createBlock, openBlock, mergeProps, createSlots, withCtx, createVNode, renderSlot, normalizeProps, guardReactiveProps } from "vue";
+import { useLocale } from "../ele-config-provider/receiver";
+import EleDialog from "../ele-dialog/index";
+import EleCropper from "../ele-cropper/index";
+import { cropperModalEmits, cropperModalProps } from "./props";
+const _sfc_main = defineComponent({
+  name: "EleCropperModal",
+  components: { EleDialog, EleCropper },
+  props: cropperModalProps,
+  emits: cropperModalEmits,
+  setup(props, { emit }) {
+    const { lang } = useLocale("cropper", props);
+    const updateModelValue = (value) => {
+      emit("update:modelValue", value);
+    };
+    const handleDone = (result) => {
+      emit("done", result);
+    };
+    return { lang, updateModelValue, handleDone };
+  }
+});
+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_EleCropper = resolveComponent("EleCropper");
+  const _component_EleDialog = resolveComponent("EleDialog");
+  return openBlock(), createBlock(_component_EleDialog, mergeProps({
+    width: "620px",
+    title: _ctx.lang.title
+  }, _ctx.modalProps || {}, {
+    modelValue: _ctx.modelValue,
+    "onUpdate:modelValue": _ctx.updateModelValue
+  }), createSlots({
+    default: withCtx(() => [
+      createVNode(_component_EleCropper, {
+        height: _ctx.height,
+        src: _ctx.src,
+        imageType: _ctx.imageType,
+        accept: _ctx.accept,
+        tools: _ctx.tools,
+        preview: _ctx.preview,
+        previewWidth: _ctx.previewWidth,
+        toBlob: _ctx.toBlob,
+        options: _ctx.options,
+        croppedOptions: _ctx.croppedOptions,
+        tooltip: _ctx.tooltip,
+        tooltipProps: _ctx.tooltipProps,
+        beforeUploadClick: _ctx.beforeUploadClick,
+        responsive: _ctx.responsive,
+        locale: _ctx.locale,
+        onDone: _ctx.handleDone
+      }, null, 8, ["height", "src", "imageType", "accept", "tools", "preview", "previewWidth", "toBlob", "options", "croppedOptions", "tooltip", "tooltipProps", "beforeUploadClick", "responsive", "locale", "onDone"])
+    ]),
+    _: 2
+  }, [
+    _ctx.$slots.header ? {
+      name: "header",
+      fn: withCtx((slotProps) => [
+        renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps(slotProps || {})))
+      ]),
+      key: "0"
+    } : void 0,
+    _ctx.$slots.footer ? {
+      name: "footer",
+      fn: withCtx((slotProps) => [
+        renderSlot(_ctx.$slots, "footer", normalizeProps(guardReactiveProps(slotProps || {})))
+      ]),
+      key: "1"
+    } : void 0,
+    _ctx.$slots.maxIcon ? {
+      name: "maxIcon",
+      fn: withCtx((slotProps) => [
+        renderSlot(_ctx.$slots, "maxIcon", normalizeProps(guardReactiveProps(slotProps || {})))
+      ]),
+      key: "2"
+    } : void 0,
+    _ctx.$slots.closeIcon ? {
+      name: "closeIcon",
+      fn: withCtx((slotProps) => [
+        renderSlot(_ctx.$slots, "closeIcon", normalizeProps(guardReactiveProps(slotProps || {})))
+      ]),
+      key: "3"
+    } : void 0
+  ]), 1040, ["title", "modelValue", "onUpdate:modelValue"]);
+}
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
+export {
+  index as default
+};

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

@@ -0,0 +1,17 @@
+import { PropType, ExtractPropTypes } from 'vue';
+import { DashboardType } from './types';
+
+/**
+ * 属性
+ */
+export declare const dashboardProps: {
+    /** 类型 */
+    type: PropType<DashboardType>;
+    /** 自定义颜色 */
+    color: StringConstructor;
+    /** 尺寸 */
+    size: (StringConstructor | NumberConstructor)[];
+    /** 间距 */
+    space: (StringConstructor | NumberConstructor)[];
+};
+export type DashboardProps = ExtractPropTypes<typeof dashboardProps>;

package/es/ele-dashboard/props.js

@@ -0,0 +1,13 @@
+const dashboardProps = {
+  /** 类型 */
+  type: String,
+  /** 自定义颜色 */
+  color: String,
+  /** 尺寸 */
+  size: [Number, String],
+  /** 间距 */
+  space: [Number, String]
+};
+export {
+  dashboardProps
+};

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

@@ -0,0 +1,79 @@
+@use '../../style/themes/default.scss' as *;
+@use '../../style/util.scss' as *;
+
+.ele-dashboard {
+  --ele-dashboard-space: 18px;
+  --ele-dashboard-color: #{elVar('color-primary')};
+  width: 170px;
+  height: 170px;
+  display: inline-block;
+  padding: var(--ele-dashboard-space);
+  box-sizing: border-box;
+  position: relative;
+
+  &.is-success {
+    --ele-dashboard-color: #{elVar('color-success')};
+  }
+
+  &.is-warning {
+    --ele-dashboard-color: #{elVar('color-warning')};
+  }
+
+  &.is-danger {
+    --ele-dashboard-color: #{elVar('color-danger')};
+  }
+}
+
+.ele-dashboard-inner {
+  width: 100%;
+  height: 100%;
+  color: var(--ele-dashboard-color);
+  background: elVar('bg-color');
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  text-align: center;
+  position: relative;
+  z-index: 2;
+}
+
+.ele-dashboard-outer {
+  width: calc(100% - var(--ele-dashboard-space));
+  height: calc(100% - var(--ele-dashboard-space));
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+
+  & > .ele-dashboard-bg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: var(--ele-dashboard-color);
+    animation: eleAnimDashboard 8s infinite linear;
+    border-radius: 46% 46% 42% 44%;
+    opacity: 0.3;
+
+    &:first-child {
+      animation: eleAnimDashboard 12s infinite linear;
+      border-radius: 56% 56% 52% 54%;
+      opacity: 0.8;
+    }
+
+    &:last-child {
+      animation: eleAnimDashboard 10s infinite linear;
+      border-radius: 44% 44% 42% 46%;
+      opacity: 0.5;
+    }
+  }
+}
+
+@keyframes eleAnimDashboard {
+  to {
+    transform: rotate(360deg);
+  }
+}

package/es/ele-data-table/index.js

@@ -0,0 +1,401 @@
+import { defineComponent, ref, computed, watch, nextTick, onMounted, createVNode, mergeProps, h } from "vue";
+import { ElEmpty, ElTable, ElTableColumn } from "element-plus";
+import { FilterFilled } from "../icons";
+import { omit, pick, getValue, eachTree } from "../utils/core";
+import { useEmits, useMethods, useStickyHeader, isReserveChecked, getGlobalTooltipProps, getStateCols, getHeadRowClass, getBodyRowClass, isDisableRow, getTableFilter, getRowKeys, valueIsChanged, getRowByKey, arrayIsChanged, getKeysAndList, toggleRowSelectionPro, getTooltipProps, getFilterPopperClass, getCellClass } from "./util";
+import { dataTableEmits, dataTableProps, tablePropKeys } from "./props";
+const ownSlots = ["default", "append", "empty"];
+const index = /* @__PURE__ */ defineComponent({
+  name: "EleDataTable",
+  components: {
+    ElTable,
+    ElEmpty
+  },
+  props: dataTableProps,
+  emits: dataTableEmits,
+  setup(props, {
+    emit,
+    slots,
+    expose
+  }) {
+    const events = useEmits(emit);
+    const methods = useMethods(() => tableRef.value);
+    const {
+      isLayoutFixedHead,
+      isLayoutMaximized
+    } = useStickyHeader();
+    const tableState = {
+      sorter: props.defaultSort,
+      key: null,
+      checkedKeys: [],
+      checked: [],
+      reserveChecked: isReserveChecked(props.columns)
+    };
+    const tableRef = ref(null);
+    const tableCols = ref(props.columns ?? []);
+    const tableOverflowTooltip = computed(() => {
+      return getGlobalTooltipProps(props.showOverflowTooltip, props.tooltipEffect, props.tooltipOptions);
+    });
+    const childKey = computed(() => {
+      var _a;
+      return ((_a = props.treeProps) == null ? void 0 : _a.children) || "children";
+    });
+    const tableProps = computed(() => {
+      const propKeys = tablePropKeys.filter((k) => !["currentRowKey", "showOverflowTooltip", "tooltipOptions", "tooltipEffect"].includes(k));
+      return {
+        ...pick(props, propKeys),
+        ...omit(events, ["onUpdate:currentRowKey", "onUpdate:selectedRowKeys", "onRowClick", "onHeaderClick", "onSortChange", "onFilterChange", "onCurrentChange", "onSelect", "onSelectAll", "onSelectionChange"])
+      };
+    });
+    const handleRowClick = (row, column, event) => {
+      if (props.rowClickChecked && !isDisableRow(row, props.data.indexOf(row), props.columns)) {
+        const selections = methods.getSelectionRows();
+        if (props.rowClickChecked === "smart" && (!selections || !selections.length || selections.length === 1)) {
+          const key = getValue(row, props.rowKey);
+          updateCheckedState(key == null ? [] : [key]);
+        } else {
+          toggleRowSelection(row);
+        }
+      }
+      events.onRowClick(row, column, event);
+    };
+    const handleHeaderClick = (column, e) => {
+      if (column.sortable && column.filters) {
+        const el = e.currentTarget;
+        if (el) {
+          const caretEl = el.querySelector(".caret-wrapper");
+          caretEl && caretEl.dispatchEvent(new MouseEvent("click"));
+        }
+      }
+      events.onHeaderClick(column, e);
+    };
+    const handleSortChange = (sorter) => {
+      const currentSorter = tableState.sorter;
+      if (currentSorter && sorter.prop === currentSorter.prop && sorter.order === currentSorter.order) {
+        return;
+      }
+      tableState.sorter = sorter;
+      events.onSortChange(sorter);
+    };
+    const handleFilterChange = (filter) => {
+      tableState.filter = getTableFilter(tableRef.value) ?? filter;
+      events.onFilterChange(tableState.filter);
+    };
+    const handleCurrentChange = (row, old) => {
+      if (row != null && row !== old) {
+        updateSelectedState(getValue(row, props.rowKey), row);
+      }
+    };
+    const handleSelect = (selection, row) => {
+      events.onSelect(selection, row);
+      updateCheckedState(getRowKeys(selection, props.rowKey), selection);
+    };
+    const handleSelectAll = (selection) => {
+      updateCheckedState(getRowKeys(selection, props.rowKey), selection);
+      events.onSelectAll(selection);
+    };
+    const updateScrollBar = () => {
+      var _a;
+      const scrollBarRef = (_a = tableRef.value) == null ? void 0 : _a.scrollBarRef;
+      if (scrollBarRef && typeof scrollBarRef.update === "function") {
+        scrollBarRef.update();
+      }
+    };
+    const clearSort = () => {
+      methods.clearSort();
+      tableState.sorter = {};
+    };
+    const clearSelection = () => {
+      updateCheckedState([]);
+    };
+    const toggleRowSelection = (row, selected) => {
+      methods.toggleRowSelection(row, selected);
+      const selection = methods.getSelectionRows() || [];
+      updateCheckedState(getRowKeys(selection, props.rowKey), selection);
+    };
+    const setCurrentRow = (row) => {
+      updateSelectedState(getValue(row, props.rowKey), row);
+    };
+    const setCurrentRowKey = (key) => {
+      updateSelectedState(key);
+    };
+    const getCurrentRow = () => {
+      return tableState.row;
+    };
+    const setSelectedRows = (rows) => {
+      if (rows) {
+        updateCheckedState(getRowKeys(rows, props.rowKey), rows, !!rows.length);
+      }
+    };
+    const setSelectedRowKeys = (keys) => {
+      if (keys) {
+        updateCheckedState(keys);
+      }
+    };
+    const toggleRowExpansionAll = (expanded) => {
+      eachTree(props.data, (row) => {
+        var _a;
+        if ((_a = row[childKey.value]) == null ? void 0 : _a.length) {
+          methods.toggleRowExpansion(row, expanded);
+        }
+      }, childKey.value);
+    };
+    const updateSelectedState = (key, item) => {
+      if (!valueIsChanged(tableState.key, key)) {
+        if (key != null && item != null) {
+          if (tableState.row !== item) {
+            tableState.row = item;
+            events.onCurrentChange(item, tableState.oldRow);
+          }
+          methods.setCurrentRow(item);
+        }
+        return;
+      }
+      if (key != null) {
+        const row = getRowByKey(key, props.data, props.rowKey, childKey.value);
+        if (row != null || props.reserveCurrent) {
+          tableState.oldRow = tableState.row;
+          tableState.row = row || item || void 0;
+          if (tableState.row == null && props.cacheData != null) {
+            tableState.row = getRowByKey(key, props.cacheData, props.rowKey, childKey.value);
+          }
+          tableState.key = key;
+          methods.setCurrentRow(row);
+          updateCurrentRowKey(key);
+          events.onCurrentChange(tableState.row, tableState.oldRow);
+          return;
+        }
+      }
+      if (tableState.key != null) {
+        tableState.oldRow = tableState.row;
+        tableState.row = void 0;
+        tableState.key = null;
+        methods.setCurrentRow(null);
+        updateCurrentRowKey();
+        events.onCurrentChange(void 0, tableState.oldRow);
+      }
+    };
+    const updateCheckedState = (keys, items, force) => {
+      if (!force && !arrayIsChanged(tableState.checkedKeys, keys)) {
+        return;
+      }
+      const [dataKeys, list] = getKeysAndList(props.data, props.rowKey, childKey.value);
+      const [cacheKeys, cacheList] = getKeysAndList(props.cacheData, props.rowKey, childKey.value);
+      const itemKeys = items ? items.map((d) => getValue(d, props.rowKey)) : [];
+      const oldKeys = tableState.checked.map((d) => getValue(d, props.rowKey));
+      const checkedKeys = [];
+      const checked = [];
+      keys.forEach((key) => {
+        const index2 = dataKeys.indexOf(key);
+        if (index2 !== -1) {
+          checkedKeys.push(key);
+          checked.push(list[index2]);
+        } else if (tableState.reserveChecked) {
+          checkedKeys.push(key);
+          if (items != null) {
+            const tIndex = itemKeys.indexOf(key);
+            if (tIndex !== -1 && !items[tIndex]._isMock) {
+              checked.push(items[tIndex]);
+              return;
+            }
+          }
+          if (props.cacheData != null) {
+            const i = cacheKeys.indexOf(key);
+            if (i !== -1) {
+              checked.push(cacheList[i]);
+              return;
+            }
+          }
+          const oIndex = oldKeys.indexOf(key);
+          if (oIndex !== -1) {
+            checked.push(tableState.checked[oIndex]);
+            return;
+          }
+          if (typeof props.rowKey === "string") {
+            checked.push({
+              [props.rowKey]: key,
+              _isMock: true
+            });
+          }
+        }
+      });
+      const isChanged = arrayIsChanged(tableState.checked, checked);
+      tableState.checked = checked;
+      tableState.checkedKeys = checkedKeys;
+      if (isChanged || force && arrayIsChanged(methods.getSelectionRows(), checked)) {
+        methods.clearSelection();
+        checked.forEach((row) => {
+          toggleRowSelectionPro(tableRef.value, row, true);
+        });
+      }
+      updateSelectedRowKeys(checkedKeys);
+      if (isChanged) {
+        events.onSelectionChange(checked);
+      }
+    };
+    const updateSelectedAndChecked = () => {
+      const key = tableState.key;
+      if (key != null) {
+        const row = getRowByKey(key, props.data, props.rowKey, childKey.value);
+        if (row != null) {
+          updateSelectedState(key, row);
+        } else if (!props.reserveCurrent) {
+          updateSelectedState(null);
+        } else if (props.cacheData != null) {
+          const temp = getRowByKey(key, props.cacheData, props.rowKey, childKey.value);
+          if (temp != null) {
+            updateSelectedState(key, temp);
+          }
+        }
+      }
+      if (tableState.checkedKeys.length) {
+        updateCheckedState(tableState.checkedKeys, void 0, true);
+      }
+    };
+    const updateKeyChildren = (key, rows) => {
+      methods.updateKeyChildren(key, rows);
+    };
+    const updateCurrentRowKey = (key) => {
+      if (valueIsChanged(props.currentRowKey, key)) {
+        events["onUpdate:currentRowKey"](key);
+      }
+    };
+    const updateSelectedRowKeys = (keys) => {
+      const selected = props.selectedRowKeys || [];
+      if (arrayIsChanged(selected, keys)) {
+        events["onUpdate:selectedRowKeys"](keys);
+      }
+    };
+    watch(() => props.columns, (columns) => {
+      tableState.reserveChecked = isReserveChecked(columns);
+      if (!columns) {
+        tableCols.value = [];
+      } else {
+        const {
+          cols,
+          sorter
+        } = getStateCols(columns, tableState.sorter, tableState.filter);
+        tableCols.value = cols;
+        nextTick(() => {
+          methods.doLayout();
+          updateScrollBar();
+          if (sorter) {
+            methods.sort(sorter.prop, sorter.order || "ascending");
+          }
+        });
+      }
+    }, {
+      deep: true
+    });
+    watch([() => props.data, () => props.cacheData], () => {
+      nextTick(() => {
+        updateSelectedAndChecked();
+      });
+    });
+    watch(() => props.currentRowKey, (key) => {
+      updateSelectedState(key);
+    });
+    watch(() => props.selectedRowKeys, (selectedRowKeys) => {
+      updateCheckedState(selectedRowKeys || []);
+    }, {
+      deep: true
+    });
+    onMounted(() => {
+      if (props.currentRowKey != null) {
+        updateSelectedState(props.currentRowKey);
+      }
+      if (props.selectedRowKeys != null && props.selectedRowKeys.length) {
+        updateCheckedState(props.selectedRowKeys);
+      }
+    });
+    const exposeValue = {
+      ...methods,
+      clearSort,
+      clearSelection,
+      toggleRowSelection,
+      setCurrentRow,
+      setCurrentRowKey,
+      getCurrentRow,
+      setSelectedRows,
+      setSelectedRowKeys,
+      toggleRowExpansionAll,
+      updateSelectedAndChecked,
+      updateKeyChildren,
+      tableRef
+    };
+    expose(exposeValue);
+    const renderTableColumn = (col) => {
+      return createVNode(ElTableColumn, mergeProps(omit(col, ["showOverflowTooltip", "filterClassName", "columnKey", "className", "uid", "slot", "headerSlot", "hideInTable", "hideInSetting", "hideInExport", "hideInPrint", "printSlot", "children"]), {
+        "key": col.uid ?? col.columnKey ?? col.prop,
+        "index": col.index ?? props.pageIndex,
+        "className": getCellClass(col),
+        "columnKey": col.columnKey ?? col.prop,
+        "filterClassName": getFilterPopperClass(col.filterClassName),
+        "showOverflowTooltip": getTooltipProps(col.showOverflowTooltip, tableOverflowTooltip.value)
+      }), {
+        header: (slotProps) => {
+          var _a, _b, _c;
+          return col.headerSlot && !ownSlots.includes(col.headerSlot) && slots[col.headerSlot] ? (_a = slots[col.headerSlot]) == null ? void 0 : _a.call(slots, slotProps) : createVNode("div", {
+            "class": "ele-cell-title",
+            "title": (_b = slotProps == null ? void 0 : slotProps.column) == null ? void 0 : _b.label
+          }, [(_c = slotProps == null ? void 0 : slotProps.column) == null ? void 0 : _c.label]);
+        },
+        ["filter-icon"]: (slotProps) => {
+          var _a;
+          return !col.filterIcon ? createVNode(FilterFilled, null, null) : typeof col.filterIcon === "string" && !ownSlots.includes(col.filterIcon) && slots[col.filterIcon] ? (_a = slots[col.filterIcon]) == null ? void 0 : _a.call(slots, slotProps) : h(col.filterIcon);
+        },
+        default: (slotProps) => {
+          var _a;
+          return col.slot && !ownSlots.includes(col.slot) && slots[col.slot] && (!props.slotNormalize || (slotProps == null ? void 0 : slotProps.$index) != -1) ? (_a = slots[col.slot]) == null ? void 0 : _a.call(slots, slotProps) : col.children && col.children.length ? col.children.map(renderTableColumn) : void 0;
+        }
+      });
+    };
+    return () => createVNode(ElTable, mergeProps(tableProps.value, {
+      "ref": tableRef,
+      "emptyText": props.errorText || props.emptyText,
+      "rowClassName": (param) => getBodyRowClass(props.rowClassName, param),
+      "headerRowClassName": (param) => getHeadRowClass(props.headerRowClassName, param, props.headerEllipsis),
+      "class": ["ele-data-table", {
+        "is-sticky": props.sticky
+      }, {
+        "is-layout-fixed-head": props.sticky && isLayoutFixedHead.value
+      }, {
+        "is-layout-maximized": props.sticky && isLayoutMaximized.value
+      }, {
+        "is-sticky": props.sticky
+      }, {
+        "hide-header": !props.showHeader
+      }, {
+        "hide-bottom-line": !props.bottomLine
+      }],
+      "onRowClick": handleRowClick,
+      "onHeaderClick": handleHeaderClick,
+      "onSortChange": handleSortChange,
+      "onFilterChange": handleFilterChange,
+      "onCurrentChange": handleCurrentChange,
+      "onSelect": handleSelect,
+      "onSelectAll": handleSelectAll
+    }), {
+      append: slots.append ? (slotProps) => {
+        var _a;
+        return (_a = slots.append) == null ? void 0 : _a.call(slots, slotProps);
+      } : void 0,
+      empty: slots.empty ? () => {
+        var _a;
+        return (_a = slots.empty) == null ? void 0 : _a.call(slots, {
+          text: props.emptyText,
+          error: props.errorText
+        });
+      } : props.emptyProps ? () => createVNode(ElEmpty, mergeProps({
+        "imageSize": 68
+      }, !props.emptyProps || props.emptyProps === true ? {} : props.emptyProps, {
+        "description": props.errorText || props.emptyText,
+        "class": "ele-table-empty"
+      }), null) : void 0,
+      default: () => tableCols.value.map(renderTableColumn)
+    });
+  }
+});
+export {
+  index as default
+};