@qsxy/element-plus-react 1.0.0-next.1 → 1.0.0-next.3

package/dist/Select/typings.d.ts

@@ -16,43 +16,76 @@ export type SelectRef = {
 };
 type Child = React.ReactElement<SelectOptionGroupProps | SelectOptionProps> | React.ReactElement<SelectOptionGroupProps | SelectOptionProps>[];
 export interface SelectProps<V = ValueType> extends Omit<FormControlBaseProps<V>, 'onChange'>, BaseProps<Child | Child[]>, NativeProps, AnimationEventProps, PopperOptions {
+    /** 是否多选 */
     multiple?: boolean;
+    /** 是否禁用 */
     disabled?: boolean;
+    /** 作为 value 唯一标识的键名，绑定值为对象类型时必填 */
     valueKey?: string;
+    /** 是否可以清空选项 */
     clearable?: boolean;
+    /** 占位符 */
     placeholder?: string;
+    /** 是否可搜索 */
     filterable?: boolean;
+    /** 自定义搜索方法 */
     filterMethod?: (val: ValueType, searchText: string) => boolean;
+    /** 选项为空时显示的文字 */
     noDataText?: React.ReactElement | string;
+    /** 搜索条件无匹配时显示的文字 */
     noMatchText?: React.ReactElement | string;
+    /** 是否正在从远程获取数据 */
     loading?: boolean;
+    /** 远程加载时显示的文字 */
     loadingText?: React.ReactElement | string;
+    /**  */
     max?: boolean;
+    /**  */
     required?: boolean;
+    /** 表单校验错误提示 */
     error?: boolean;
+    /** 表单校验警告提示 */
     warning?: boolean;
+    /** 下拉项最大宽度 */
     maxWidth?: number;
+    /** 多选时是否将选中值按文字的形式展示 */
     collapseTags?: boolean;
+    /** 需要显示的 Tag 的最大数量 只有当 collapseTags 设置为 true 时才会生效。 */
     maxCollapseTags?: number;
+    /** 当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapseTags属性必须设定为 true */
     collapseTagsTooltip?: boolean;
+    /** 鼠标悬停于折叠标签的文本格式化函数， 要使用此属性，collapseTags属性必须设定为 true*/
     collapseTips?: (collapseNum: number, total: number) => string;
+    /** 是否允许用户创建新条目 */
     allowCreate?: boolean;
+    /** 是否纯文本模式，即无边框 */
     plain?: boolean;
+    /** 输入框前置内容，只对 type="text" 有效 */
     prepend?: React.ReactElement<any> | string | number;
+    /** 输入框后置内容，只对 type="text" 有效 */
     append?: React.ReactElement | string | number;
+    /** 尺寸 */
     size?: TypeAttributes.Size;
+    /** 是否追加到body下 */
     appendToBody?: boolean;
+    /** 选中值发生变化时触发 */
     onChange?: (value: ValueType, label?: string | (string | number)[]) => void;
+    /** 数据加载成功时调用 */
     onLoadSuccess?: (value: ValueType, label?: (string | number | undefined)[]) => void;
 }
 export interface SelectOptionProps extends BaseProps, NativeProps {
+    /** 选项的值 */
     value: string | number;
+    /** 选项的标签，若不设置则默认与 value 相同 */
     label?: string;
+    /** 是否禁用该选项 */
     disabled?: boolean;
     onClick?: (value: ValueType, label: string, e: Event) => void;
 }
 export interface SelectOptionGroupProps extends BaseProps<React.ReactElement<SelectOptionProps> | React.ReactElement<SelectOptionProps>[]>, NativeProps {
+    /** 分组的组名 */
     label: string;
+    /** 是否将该分组下所有选项置为禁用 */
     disabled?: boolean;
 }
 export interface SelectDropdownProps extends SelectProps {

package/dist/Skeleton/PlaceholderGraph.d.ts

@@ -2,9 +2,13 @@ import React from 'react';
 export interface SkeletonGraphProps {
     height?: number;
     width?: number;
+    /** Placeholder status */
     active?: boolean;
+    /** The prefix of the component CSS class */
     classPrefix?: string;
+    /** Additional classes */
     className?: string;
+    /** Additional style */
     style?: React.CSSProperties;
 }
 declare const SkeletonGraph: React.ForwardRefExoticComponent<SkeletonGraphProps & React.RefAttributes<HTMLDivElement>>;

package/dist/Skeleton/PlaceholderGrid.d.ts

@@ -4,9 +4,13 @@ export interface PlaceholderGridProps {
     rowHeight?: number;
     rowMargin?: number;
     columns?: number;
+    /** Placeholder status */
     active?: boolean;
+    /** The prefix of the component CSS class */
     classPrefix?: string;
+    /** Additional classes */
     className?: string;
+    /** Additional style */
     style?: React.CSSProperties;
 }
 declare const PlaceholderGrid: React.ForwardRefExoticComponent<PlaceholderGridProps & React.RefAttributes<HTMLDivElement>>;

package/dist/Skeleton/PlaceholderGrid.js

@@ -69,9 +69,5 @@ var PlaceholderGrid = (0, import_react.forwardRef)((props, ref) => {
   }
   return /* @__PURE__ */ import_react.default.createElement("div", { ...rest, ref, className: classes }, colItems);
 });
-PlaceholderGrid.defaultProps = {
-  rowHeight: 16,
-  rowMargin: 16
-};
 PlaceholderGrid.displayName = "PlaceholderGrid";
 var PlaceholderGrid_default = PlaceholderGrid;

package/dist/Skeleton/PlaceholderParagraph.d.ts

@@ -4,9 +4,13 @@ export interface PlaceholderParagraphProps {
     rowHeight?: number;
     rowMargin?: number;
     graph?: boolean | 'circle' | 'square' | 'image';
+    /** Placeholder status */
     active?: boolean;
+    /** The prefix of the component CSS class */
     classPrefix?: string;
+    /** Additional classes */
     className?: string;
+    /** Additional style */
     style?: React.CSSProperties;
 }
 declare const PlaceholderParagraph: React.ForwardRefExoticComponent<PlaceholderParagraphProps & React.RefAttributes<HTMLDivElement>>;

package/dist/Skeleton/PlaceholderParagraph.js

@@ -55,9 +55,5 @@ var PlaceholderParagraph = (0, import_react.forwardRef)((props, ref) => {
   const graphClasses = b("paragraph-graph", `paragraph-graph-${graphShape}`);
   return /* @__PURE__ */ import_react.default.createElement("div", { ...rest, ref, className: classes }, graphShape && /* @__PURE__ */ import_react.default.createElement("div", { className: graphClasses }, /* @__PURE__ */ import_react.default.createElement("span", { className: b`paragraph-graph-inner` })), /* @__PURE__ */ import_react.default.createElement("div", { className: b`paragraph-rows` }, rowElements));
 });
-PlaceholderParagraph.defaultProps = {
-  rowHeight: 16,
-  rowMargin: 16
-};
 PlaceholderParagraph.displayName = "PlaceholderParagraph";
 var PlaceholderParagraph_default = PlaceholderParagraph;

package/dist/Switch/Switch.js

@@ -39,6 +39,19 @@ var import_Icon = require("../Icon");
 var import_Util = require("../Util");
 var import_hooks = require("../hooks");
 var Switch = (0, import_react.forwardRef)((props, ref) => {
+  props = (0, import_Util.mergeDefaultProps)(
+    {
+      disabled: false,
+      activeText: "",
+      inactiveText: "",
+      activeColor: "",
+      inactiveColor: "",
+      activeValue: true,
+      inactiveValue: false,
+      loading: false
+    },
+    props
+  );
   const {
     defaultValue,
     name,
@@ -154,14 +167,4 @@ var Switch = (0, import_react.forwardRef)((props, ref) => {
     !inlinePrompt && trueLabel
   );
 });
-Switch.defaultProps = {
-  disabled: false,
-  activeText: "",
-  inactiveText: "",
-  activeColor: "",
-  inactiveColor: "",
-  activeValue: true,
-  inactiveValue: false,
-  loading: false
-};
 var Switch_default = Switch;

package/dist/Switch/typings.d.ts

@@ -7,19 +7,34 @@ export type ChangeValue = {
     value: ValueType;
 };
 export interface SwitchProps<V = ValueType> extends Omit<FormControlBaseProps<V>, 'onChange'>, BaseProps, NativeProps<'--el-switch-on-color' | '--el-switch-off-color'>, TooltipBaseProps<HTMLDivElement> {
+    /** switch 的宽度 */
     width?: number;
+    /** switch 打开时的文字描述 */
     activeText?: string;
+    /** switch 的状态为 off 时的文字描述 */
     inactiveText?: string;
+    /** switch 打开时的文字描述 */
     activeIcon?: IconName | React.ReactElement<any>;
+    /** switch 的状态为 off 时的文字描述 */
     inactiveIcon?: IconName | React.ReactElement<any>;
+    /** 当在 on 状态时的背景颜色 */
     activeColor?: string;
+    /** off 状态时的背景颜色 */
     inactiveColor?: string;
+    /** 开关的边框颜色 */
     borderColor?: string;
+    /** switch 状态为 on 时的值 */
     activeValue?: V;
+    /** switch的状态为 off 时的值 */
     inactiveValue?: V;
+    /**  */
     validateEvent?: boolean;
+    /** 是否显示加载中 */
     loading?: boolean;
+    /** 无论图标或文本是否显示在点内，只会呈现文本的第一个字符 */
     inlinePrompt?: boolean;
+    /** switch 状态改变前的钩子， 返回 false 或者返回 Promise 且被 reject 则停止切换 */
     beforeChange?: () => Promise<boolean> | boolean;
+    /** switch 状态发生变化时的回调函数 */
     onChange?: (value?: ValueType, checked?: boolean, e?: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
 }

package/dist/Table/Colgroup.d.ts

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import { TableColumnCtx } from './typings';
 interface Props<T> {
     columns: TableColumnCtx<T>[];
+    /** 设置表格单元、行和列的布局方式 */
     tableLayout?: 'fixed' | 'auto';
 }
 declare const Colgroup: FC<Props<any>>;

package/dist/Table/Table.js

@@ -36,6 +36,7 @@ var import_classnames = __toESM(require("classnames"));
 var import_react = __toESM(require("react"));
 var import_Loading = require("../Loading");
 var import_Scrollbar = require("../Scrollbar");
+var import_Util = require("../Util");
 var import_hooks = require("../hooks");
 var import_Colgroup = __toESM(require("./Colgroup"));
 var import_TableBody = __toESM(require("./TableBody"));
@@ -46,6 +47,18 @@ var import_useSelection = require("./hooks/useSelection");
 var import_useTable = require("./hooks/useTable");
 var import_util = require("./util");
 function InternalTable(props, ref) {
+  props = (0, import_Util.mergeDefaultProps)(
+    {
+      data: [],
+      fit: true,
+      showHeader: true,
+      tableLayout: "fixed",
+      style: {},
+      emptyText: "暂无数据",
+      selectOnIndeterminate: true
+    },
+    props
+  );
   const { height, maxHeight, size, stripe = false, fit, border, tableLayout, showHeader, showSummary, emptyText, append, loading } = props;
   const { b, e, m } = (0, import_hooks.useClassNames)("table");
   const refs = {
@@ -176,14 +189,5 @@ function InternalTable(props, ref) {
 }
 var ForwardTable = (0, import_react.forwardRef)(InternalTable);
 var Table = ForwardTable;
-Table.defaultProps = {
-  data: [],
-  fit: true,
-  showHeader: true,
-  tableLayout: "fixed",
-  style: {},
-  emptyText: "暂无数据",
-  selectOnIndeterminate: true
-};
 Table.displayName = "Table";
 var Table_default = Table;

package/dist/Table/TableBody.js

@@ -33,18 +33,24 @@ __export(TableBody_exports, {
 });
 module.exports = __toCommonJS(TableBody_exports);
 var import_classnames = __toESM(require("classnames"));
-var import_cloneDeep = __toESM(require("lodash/cloneDeep"));
 var import_isEqual = __toESM(require("lodash/isEqual"));
 var import_isObject = __toESM(require("lodash/isObject"));
 var import_some = __toESM(require("lodash/some"));
 var import_react = __toESM(require("react"));
-var import_react_sortable_hoc = require("react-sortable-hoc");
 var import_hooks = require("../hooks");
 var import_TableCell = __toESM(require("./TableCell"));
 var import_TableContext = require("./TableContext");
 var import_util = require("./util");
 var TableBody = () => {
-  const { data, setData, props, tableId, flattenColumns, fixedLeftColumns, fixedRightColumns } = (0, import_react.useContext)(import_TableContext.TableContext);
+  const {
+    data,
+    /* setData, */
+    props,
+    tableId,
+    flattenColumns,
+    fixedLeftColumns,
+    fixedRightColumns
+  } = (0, import_react.useContext)(import_TableContext.TableContext);
   const { state, oldActiveRow, treeProps } = (0, import_react.useContext)(import_TableContext.TableBodyContext);
   const { stripe, rowClassName, rowStyle, onCurrentChange, highlightCurrentRow, currentRowKey, rowKey, onDragChange, spanMethod } = props;
   const { e, em, bm, is } = (0, import_hooks.useClassNames)("table");
@@ -198,44 +204,7 @@ var TableBody = () => {
       treeProps.hasChildren
     ]
   );
-  const onSortItems = (0, import_react.useCallback)(
-    ({ oldIndex, newIndex }) => {
-      const result = (0, import_react_sortable_hoc.arrayMove)((0, import_cloneDeep.default)(data), oldIndex, newIndex);
-      if (!(0, import_isEqual.default)(data, result)) {
-        setData(result);
-        onDragChange == null ? void 0 : onDragChange(result);
-      }
-    },
-    [data, onDragChange, setData]
-  );
-  const isSortTable = (0, import_react.useMemo)(
-    () => [...flattenColumns, ...fixedLeftColumns, ...fixedRightColumns].some((item) => item.type === "drag"),
-    [fixedLeftColumns, fixedRightColumns, flattenColumns]
-  );
-  const Sortable = (0, import_react.useMemo)(() => {
-    return (0, import_react_sortable_hoc.SortableContainer)(({ children }) => /* @__PURE__ */ import_react.default.createElement("tbody", { ref: tbodyRef }, children));
-  }, []);
-  const ListItem = (0, import_react.useMemo)(() => {
-    return (0, import_react_sortable_hoc.SortableElement)(({ item: row, rowIndex }) => renderTr(row, rowIndex));
-  }, [renderTr]);
-  return isSortTable ? (
-    // @ts-ignore
-    /* @__PURE__ */ import_react.default.createElement(
-      Sortable,
-      {
-        axis: "y",
-        helperClass: "r-sort-placeholder",
-        useDragHandle: true,
-        helperContainer: () => tbodyRef.current,
-        onSortEnd: onSortItems,
-        onSortStart: (_, event) => event.preventDefault()
-      },
-      data.map((row, rowIndex) => (
-        // @ts-ignore
-        /* @__PURE__ */ import_react.default.createElement(ListItem, { index: rowIndex, key: `${tableId}_${rowIndex}`, item: row, rowIndex })
-      ))
-    )
-  ) : /* @__PURE__ */ import_react.default.createElement("tbody", { ref: tbodyRef }, data.map(renderTr));
+  return /* @__PURE__ */ import_react.default.createElement("tbody", { ref: tbodyRef }, data.map(renderTr));
 };
 TableBody.displayName = "TableBody";
 var TableBody_default = TableBody;

package/dist/Table/TableCell.js

@@ -43,7 +43,6 @@ var import_words = __toESM(require("lodash/words"));
 var import_react = __toESM(require("react"));
 var import_react_dom = require("react-dom");
 var import_client = require("react-dom/client");
-var import_react_sortable_hoc = require("react-sortable-hoc");
 var import_Checkbox = require("../Checkbox");
 var import_Icon = require("../Icon");
 var import_Util = require("../Util");
@@ -330,9 +329,6 @@ var TableCell = (p) => {
   const treeSuffix = (0, import_react.useMemo)(() => {
     return isTreeExpandCell(column.id) && /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, column.level > 0 && /* @__PURE__ */ import_react.default.createElement("span", { className: e`indent`, style: { paddingLeft: indent * column.level } }), ((0, import_Util.isNotEmpty)(row[treeProps.children]) || row[treeProps.hasChildren]) && /* @__PURE__ */ import_react.default.createElement("div", { ref: expandCell, className: (0, import_classnames.default)(e`expand-icon`, { [em("expand-icon", "expanded")]: row == null ? void 0 : row.expanded }), onClick: handleExpandTreeCell }, loading ? /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "loader", prefix: "far", spin: true }) : /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "angle-right" })), (0, import_Util.isEmpty)(row[treeProps.children]) && !row[treeProps.hasChildren] && /* @__PURE__ */ import_react.default.createElement("span", { className: e`placeholder` }));
   }, [column.id, column.level, e, em, handleExpandTreeCell, indent, isTreeExpandCell, loading, row, treeProps.children, treeProps.hasChildren]);
-  const DragHandle = (0, import_react.useMemo)(() => {
-    return (0, import_react_sortable_hoc.SortableHandle)(() => /* @__PURE__ */ import_react.default.createElement("div", { style: { cursor: "grab" } }, /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "grip-vertical", prefix: "fas" })));
-  }, []);
   return /* @__PURE__ */ import_react.default.createElement(
     "td",
     {
@@ -377,7 +373,6 @@ var TableCell = (p) => {
       } else if (column.type === "expand") {
         return /* @__PURE__ */ import_react.default.createElement("div", { ref: expandCell, className: e`expand-icon`, onClick: handleExpand }, /* @__PURE__ */ import_react.default.createElement(import_Icon.Icon, { name: "angle-right" }));
       } else if (column.type === "drag") {
-        return /* @__PURE__ */ import_react.default.createElement(DragHandle, null);
       } else if (column.type === "selection") {
         return /* @__PURE__ */ import_react.default.createElement(
           import_Checkbox.Checkbox,

package/dist/Table/TableColumn.js

@@ -43,9 +43,5 @@ var TableColumn = (props) => {
     return /* @__PURE__ */ import_react.default.createElement("div", null, columns);
   }
 };
-TableColumn.defaultProps = {
-  resizable: true,
-  filterMultiple: true
-};
 TableColumn.displayName = "TableColumn";
 var TableColumn_default = TableColumn;

package/dist/Table/TableContext.d.ts

@@ -3,9 +3,13 @@ import { Action, State } from './hooks/useSelection';
 import { TableColumnCtx, TableProps, TableRefs, TreeNode } from './typings';
 export interface TableContextProps<T> {
     tableId: string;
+    /** 多级列 */
     columns: TableColumnCtx<T>[][];
+    /** 最后一级列 */
     flattenColumns: TableColumnCtx<T>[];
+    /** 左固定列 */
     fixedLeftColumns: TableColumnCtx<T>[];
+    /** 右固定列 */
     fixedRightColumns: TableColumnCtx<T>[];
     tableRefs: TableRefs;
     props: Omit<TableProps<T>, 'children'>;
@@ -21,8 +25,11 @@ export interface TableBodyContextProps<T> {
     oldActiveRow: MutableRefObject<T | null | undefined>;
     state: State<T>;
     dispatch: (action: Action) => void;
+    /** 原始表格数据 */
     initialData: MutableRefObject<T[]>;
+    /** 排序后表格数据 */
     sortedData: MutableRefObject<T[]>;
+    /** 禁止选中行 */
     disabledRows: MutableRefObject<T[]>;
     isTreeTable: () => boolean;
     isTreeExpandCell: (id: string) => boolean;
@@ -30,6 +37,7 @@ export interface TableBodyContextProps<T> {
         hasChildren: string;
         children: string;
     };
+    /** 树节点信息 */
     treeNodes: MutableRefObject<TreeNode[]>;
 }
 export declare const TableContext: import("react").Context<TableContextProps<any>>;

package/dist/Table/hooks/useSelection.d.ts

@@ -1,5 +1,12 @@
 /// <reference types="react" />
 import { TableProps } from '../typings';
+/**
+ * @author	Parker
+ * @CreateTime	2022/9/17 19:39:22
+ * @LastEditor	Parker
+ * @ModifyTime	2022/11/7 19:38:04
+ * @Description
+ */
 export declare const useSelection: <T>(props: TableProps<T>, data: T[]) => {
     state: {
         isIndeterminate: any;
@@ -28,5 +35,15 @@ export interface Action {
     type: 'onCheck' | 'activeRow';
     payload: any;
 }
+/**
+ * 用于单选表格，设定某一行为选中行
+ * @param payload
+ * @returns
+ */
 export declare const activeRow: <T>(payload: T) => Action;
+/**
+ * 多选模式下选中行
+ * @param payload
+ * @returns
+ */
 export declare const onCheck: <T>(payload: Pick<State<T>, "isIndeterminate" | "selection">) => Action;

package/dist/Table/hooks/useTable.d.ts

@@ -1,5 +1,12 @@
 import React from 'react';
 import { TableColumnCtx, TableColumnProps, TableProps, TableRefs, TreeNode } from '../typings';
+/**
+ * @author	Parker
+ * @CreateTime	2022/9/11 12:24:23
+ * @LastEditor	Parker
+ * @LastEditor	Parker
+ * @ModifyTime	2022/11/19 23:23:42
+ */
 export declare const useTable: <T extends object>(props: TableProps<T>, refs: TableRefs, tableId: string) => {
     data: T[];
     setData: React.Dispatch<React.SetStateAction<T[]>>;

package/dist/Table/treeUtil.d.ts

@@ -1,22 +1,61 @@
 import { TreeNode } from './typings';
+/**
+ * 树形表格数据平铺成二维数据
+ * @param data 表格数据
+ * @param treeProps 渲染嵌套数据的配置选项
+ * @param rowKey 行数据的 Key，用来优化 Table 的渲染
+ * @param defaultExpandAll 是否默认展开所有行
+ * @param defaultExpandRowKeys 默认展开行
+ * @param result 重组后数据
+ * @param level 层级
+ * @param parentId 父ID
+ * @param parentDisplay 父级是否显示
+ * @returns
+ */
 export declare const flatTreeData: <T>(data: T[], treeProps: {
     hasChildren: string;
     children: string;
 }, rowKey: string | ((data: {
     row: T;
 }) => string), defaultExpandAll?: boolean, defaultExpandRowKeys?: any[], result?: (T & TreeNode)[], level?: number, parentId?: any, parentDisplay?: boolean) => (T & TreeNode)[];
+/**
+ * 获取某一行数据所有的子节点
+ * @param data
+ * @param treeProps
+ * @param rowKey
+ * @param defaultExpandAll
+ * @param result
+ * @returns
+ */
 export declare const getAllChildren: <T>(data: T[], treeProps: {
     hasChildren: string;
     children: string;
 }, rowKey: string | ((data: {
     row: T;
 }) => string), defaultExpandAll?: boolean, result?: T[]) => T[];
+/**
+ * 将原始树形数据和树节点数据合并成可以渲染的表格数据
+ * @param treeData 原始树形数据
+ * @param treeNodes 树节点数据
+ * @param treeProps
+ * @param rowKey
+ * @param result 结果数据
+ * @returns
+ */
 export declare const mergeTreeData: <T>(treeData: T[], treeNodes: TreeNode[], treeProps: {
     hasChildren: string;
     children: string;
 }, rowKey: string | ((data: {
     row: T;
 }) => string), result?: (T & TreeNode)[]) => (T & TreeNode)[];
+/**
+ * 给某一行数据添加子节点
+ * @param treeData
+ * @param targetId 目标行id
+ * @param children 子节点
+ * @param treeProps
+ * @param rowKey
+ */
 export declare const addTreeChildren: <T>(treeData: T[], targetId: string, children: T[], treeProps: {
     hasChildren: string;
     children: string;