plain-design 1.0.0-beta.146 → 1.0.0-beta.147

package/src/packages/components/Table/table/body/row.tsx

@@ -1,47 +1,47 @@
-import {PltCell} from "./cell";
-import {designComponent, iMouseEvent, PropType, useClasses} from "@peryl/react-compose";
-import {Table} from "../Table";
-import {iTableNode} from "../utils/table.utils";
-
-export const PltRow = designComponent({
-  name: 'plt-row',
-  props: {
-    table: { type: Object as PropType<typeof Table.use.class>, required: true },
-    node: { type: Object as PropType<iTableNode>, required: true },
-    vid: { type: [String, Number] },
-  },
-  setup({ props }) {
-
-    const handler = {
-      onMouseMove: (e: iMouseEvent) => props.table.hooks.onMousemoveRow.exec({ e, node: props.node }),
-      onMouseEnter: (e: iMouseEvent) => props.table.hooks.onMouseenterRow.exec({ e, node: props.node }),
-    };
-
-    const classes = useClasses(() => {
-      const ret = [
-        'plt-row',
-        {
-          'plt-row-current': props.table.current.isCurrent(props.node)
-        }
-      ] as any[];
-      if (!!props.table.props.rowClassFunc) {
-        ret.push(props.table.props.rowClassFunc(props.node));
-      }
-      return props.table.hooks.onRowClass.exec({ node: props.node, classList: ret }).classList;
-    });
-
-    return {
-      render: () => {
-        return props.table.hooks.onRenderRow.exec({
-          content: (
-            <tr className={classes.value} style={{ height: `${props.table.numberState.bodyRowHeight}px` }} data-vid={props.vid} data-idx={String(props.node.state.index == null ? "" : props.node.state.index)} {...handler}>
-              {(props.table.bodyPlcList.value?.map((plc) => <PltCell key={plc.plcKey} table={props.table} node={props.node} plc={plc}/>))}
-            </tr>
-          ),
-          node: props.node,
-          row: props.node.data,
-        }).content;
-      }
-    };
-  },
-});
+import {PltCell} from "./cell";
+import {designComponent, iMouseEvent, PropType, useClasses} from "@peryl/react-compose";
+import {Table} from "../Table";
+import {iTableNode} from "../utils/table.utils";
+
+export const PltRow = designComponent({
+  name: 'plt-row',
+  props: {
+    table: { type: Object as PropType<typeof Table.use.class>, required: true },
+    node: { type: Object as PropType<iTableNode>, required: true },
+    vid: { type: [String, Number] },
+  },
+  setup({ props }) {
+
+    const handler = {
+      onMouseMove: (e: iMouseEvent) => props.table.hooks.onMousemoveRow.exec({ e, node: props.node }),
+      onMouseEnter: (e: iMouseEvent) => props.table.hooks.onMouseenterRow.exec({ e, node: props.node }),
+    };
+
+    const classes = useClasses(() => {
+      const ret = [
+        'plt-row',
+        {
+          'plt-row-current': props.table.current.isCurrent(props.node)
+        }
+      ] as any[];
+      if (!!props.table.props.rowClassFunc) {
+        ret.push(props.table.props.rowClassFunc(props.node));
+      }
+      return props.table.hooks.onRowClass.exec({ node: props.node, classList: ret }).classList;
+    });
+
+    return {
+      render: () => {
+        return props.table.hooks.onRenderRow.exec({
+          content: (
+            <tr className={classes.value} style={{ height: `${props.table.numberState.bodyRowHeight}px` }} data-vid={props.vid} data-idx={String(props.node.state.index == null ? "" : props.node.state.index)} {...handler}>
+              {(props.table.bodyPlcList.value?.map((plc) => <PltCell key={plc.plcKey} table={props.table} node={props.node} plc={plc}/>))}
+            </tr>
+          ),
+          node: props.node,
+          row: props.node.data,
+        }).content;
+      }
+    };
+  },
+});

package/src/packages/components/Table/table/body/useCellValue.tsx

@@ -1,145 +1,145 @@
-import {iTableNode} from "../utils/table.utils";
-import {tPlc} from "../../plc/utils/plc.utils";
-import {globalComputed, reactive, toRaw} from "@peryl/react-compose";
-import {PlainObject} from "@peryl/utils/event";
-import {LoadingText} from "../../../../utils/LoadingText";
-import {AsyncFormatter} from "../../../AsyncFormatter";
-import {Formatter} from "../../../Formatter";
-import {renderBodyCell} from "../../plc/utils/plc.render";
-import {iEffects} from "@peryl/utils/createEffects";
-import {delay} from "@peryl/utils/delay";
-
-/**
- * 计算cell渲染所需要的内容
- * @author  韦胜健
- * @date    2022/12/5 20:37
- */
-export function useCellValue(
-  {
-    optionGetter,
-    formEdit,
-    effects,
-  }: {
-    optionGetter: () => { node: iTableNode, plc: tPlc },
-    formEdit: boolean,
-    effects: iEffects,
-  }
-) {
-  /**
-   * 当前渲染的行数据
-   * @author  韦胜健
-   * @date    2022.12.3 10:50
-   */
-  const row = globalComputed(() => {
-    const { node } = optionGetter();
-    return node.state.edit ? node.state.editRow : node.data;
-  });
-  effects.push(() => row.effect.stop());
-
-  /**
-   * 当前单元格的目标数据
-   * @author  韦胜健
-   * @date    2022.12.3 10:50
-   */
-  const sourceValue = globalComputed(() => {
-    const { plc } = optionGetter();
-    return !!plc.props.field ? row.value[plc.props.field] : null;
-  });
-  effects.push(() => sourceValue.effect.stop());
-
-  /**
-   * 异步格式化的状态
-   * @author  韦胜健
-   * @date    2022.12.3 10:51
-   */
-  const asyncState = reactive({
-    asyncValue: null as null | {
-      /*格式化时的行数据*/
-      row: PlainObject,
-      /*格式化的原始值*/
-      sourceValue: any,
-      /*格式化得到的目标值*/
-      targetValue: any,
-      /*是否处于加载状态*/
-      loading: boolean,
-    }
-  });
-  effects.push(() => delay().then(() => {asyncState.asyncValue = null;}));
-
-  const targetValue = globalComputed(() => {
-    const { plc, node } = optionGetter();
-    const { formatter, asyncFormatter, formatterOptions } = plc.props;
-    const cellRenderScope = { plc: plc, node: node, row: row.value };
-
-    if (!!asyncFormatter) {
-      /*异步过滤器*/
-      if (!!asyncState.asyncValue && toRaw(asyncState.asyncValue.sourceValue) === toRaw(sourceValue.value) && toRaw(asyncState.asyncValue.row) === toRaw(row.value)) {
-        /*已经加载过值*/
-        // console.log(asyncState.asyncValue.loading, LoadingText.value);
-        return asyncState.asyncValue.loading ? LoadingText.value : asyncState.asyncValue.targetValue;
-      } else {
-        const asyncFormatterFunction = typeof asyncFormatter === "function" ? asyncFormatter : AsyncFormatter[asyncFormatter];
-        if (!asyncFormatterFunction) {
-          console.error(`无法识别格式化函数名称：${asyncFormatter}`);
-        } else {
-          /*没有加载过值，重新加载这个值*/
-          asyncState.asyncValue = {
-            sourceValue: sourceValue.value,
-            row: row.value,
-            targetValue: null,
-            loading: true,
-          };
-          (async () => {
-            try {
-              const sv = sourceValue.value;
-              const sr = row.value;
-              const value = await asyncFormatterFunction(sourceValue.value, { ...cellRenderScope, ...formatterOptions });
-              if (sv === sourceValue.value && sr === row.value) {
-                asyncState.asyncValue = {
-                  sourceValue: sourceValue.value,
-                  row: row.value,
-                  targetValue: value,
-                  loading: false,
-                };
-              }
-            } catch (e) {
-              /*异步格式化失败*/
-              console.error(e);
-              if (!!asyncState.asyncValue) {
-                asyncState.asyncValue.loading = false;
-                asyncState.asyncValue.targetValue = 'error';
-              }
-            }
-          })();
-          return LoadingText.value;
-        }
-      }
-    } else if (formatter) {
-      /*同步过滤器*/
-      const formatterFunction = typeof formatter === "function" ? formatter : Formatter[formatter];
-      if (!formatterFunction) {
-        console.error(`无法识别格式化函数名称：${formatter}`);
-      } else {
-        try {
-          return formatterFunction(sourceValue.value, { ...cellRenderScope, ...formatterOptions });
-        } catch (e) {
-          console.error(e);
-          return 'error';
-        }
-      }
-    } else {
-      /*没有过滤器*/
-      return sourceValue.value;
-    }
-  });
-  effects.push(() => targetValue.effect.stop());
-
-  const bodyCell = globalComputed(() => {
-    const { node, plc } = optionGetter();
-    const bc = renderBodyCell({ node, plc, formEdit, targetValue: targetValue.value });
-    return () => bc;
-  });
-  effects.push(() => bodyCell.effect.stop());
-
-  return { bodyCell, targetValue };
-}
+import {iTableNode} from "../utils/table.utils";
+import {tPlc} from "../../plc/utils/plc.utils";
+import {globalComputed, reactive, toRaw} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
+import {LoadingText} from "../../../../utils/LoadingText";
+import {AsyncFormatter} from "../../../AsyncFormatter";
+import {Formatter} from "../../../Formatter";
+import {renderBodyCell} from "../../plc/utils/plc.render";
+import {iEffects} from "@peryl/utils/createEffects";
+import {delay} from "@peryl/utils/delay";
+
+/**
+ * 计算cell渲染所需要的内容
+ * @author  韦胜健
+ * @date    2022/12/5 20:37
+ */
+export function useCellValue(
+  {
+    optionGetter,
+    formEdit,
+    effects,
+  }: {
+    optionGetter: () => { node: iTableNode, plc: tPlc },
+    formEdit: boolean,
+    effects: iEffects,
+  }
+) {
+  /**
+   * 当前渲染的行数据
+   * @author  韦胜健
+   * @date    2022.12.3 10:50
+   */
+  const row = globalComputed(() => {
+    const { node } = optionGetter();
+    return node.state.edit ? node.state.editRow : node.data;
+  });
+  effects.push(() => row.effect.stop());
+
+  /**
+   * 当前单元格的目标数据
+   * @author  韦胜健
+   * @date    2022.12.3 10:50
+   */
+  const sourceValue = globalComputed(() => {
+    const { plc } = optionGetter();
+    return !!plc.props.field ? row.value[plc.props.field] : null;
+  });
+  effects.push(() => sourceValue.effect.stop());
+
+  /**
+   * 异步格式化的状态
+   * @author  韦胜健
+   * @date    2022.12.3 10:51
+   */
+  const asyncState = reactive({
+    asyncValue: null as null | {
+      /*格式化时的行数据*/
+      row: PlainObject,
+      /*格式化的原始值*/
+      sourceValue: any,
+      /*格式化得到的目标值*/
+      targetValue: any,
+      /*是否处于加载状态*/
+      loading: boolean,
+    }
+  });
+  effects.push(() => delay().then(() => {asyncState.asyncValue = null;}));
+
+  const targetValue = globalComputed(() => {
+    const { plc, node } = optionGetter();
+    const { formatter, asyncFormatter, formatterOptions } = plc.props;
+    const cellRenderScope = { plc: plc, node: node, row: row.value };
+
+    if (!!asyncFormatter) {
+      /*异步过滤器*/
+      if (!!asyncState.asyncValue && toRaw(asyncState.asyncValue.sourceValue) === toRaw(sourceValue.value) && toRaw(asyncState.asyncValue.row) === toRaw(row.value)) {
+        /*已经加载过值*/
+        // console.log(asyncState.asyncValue.loading, LoadingText.value);
+        return asyncState.asyncValue.loading ? LoadingText.value : asyncState.asyncValue.targetValue;
+      } else {
+        const asyncFormatterFunction = typeof asyncFormatter === "function" ? asyncFormatter : AsyncFormatter[asyncFormatter];
+        if (!asyncFormatterFunction) {
+          console.error(`无法识别格式化函数名称：${asyncFormatter}`);
+        } else {
+          /*没有加载过值，重新加载这个值*/
+          asyncState.asyncValue = {
+            sourceValue: sourceValue.value,
+            row: row.value,
+            targetValue: null,
+            loading: true,
+          };
+          (async () => {
+            try {
+              const sv = sourceValue.value;
+              const sr = row.value;
+              const value = await asyncFormatterFunction(sourceValue.value, { ...cellRenderScope, ...formatterOptions });
+              if (sv === sourceValue.value && sr === row.value) {
+                asyncState.asyncValue = {
+                  sourceValue: sourceValue.value,
+                  row: row.value,
+                  targetValue: value,
+                  loading: false,
+                };
+              }
+            } catch (e) {
+              /*异步格式化失败*/
+              console.error(e);
+              if (!!asyncState.asyncValue) {
+                asyncState.asyncValue.loading = false;
+                asyncState.asyncValue.targetValue = 'error';
+              }
+            }
+          })();
+          return LoadingText.value;
+        }
+      }
+    } else if (formatter) {
+      /*同步过滤器*/
+      const formatterFunction = typeof formatter === "function" ? formatter : Formatter[formatter];
+      if (!formatterFunction) {
+        console.error(`无法识别格式化函数名称：${formatter}`);
+      } else {
+        try {
+          return formatterFunction(sourceValue.value, { ...cellRenderScope, ...formatterOptions });
+        } catch (e) {
+          console.error(e);
+          return 'error';
+        }
+      }
+    } else {
+      /*没有过滤器*/
+      return sourceValue.value;
+    }
+  });
+  effects.push(() => targetValue.effect.stop());
+
+  const bodyCell = globalComputed(() => {
+    const { node, plc } = optionGetter();
+    const bc = renderBodyCell({ node, plc, formEdit, targetValue: targetValue.value });
+    return () => bc;
+  });
+  effects.push(() => bodyCell.effect.stop());
+
+  return { bodyCell, targetValue };
+}

package/src/packages/components/Table/table/head/head-cell.tsx

@@ -1,100 +1,100 @@
-import {useHeadCellResize} from "./useHeadCellResize";
-import {computed, designComponent, iHTMLElement, iMouseEvent, PropType, useClassCache, useRefs, useStyleCache} from "@peryl/react-compose";
-import {toArray} from "@peryl/utils/toArray";
-import {Table} from "../Table";
-import {tPlcType} from "../../plc/utils/plc.utils";
-import {PlainScroll} from "../../../Scroll";
-import {Icon} from "../../../Icon";
-import {renderHeadCell} from "../../plc/utils/plc.render";
-import {useTooltip} from "../../../useTooltip";
-import Tooltip from "../../../Tooltip";
-import {getFunctionValue} from '@peryl/utils/getFunctionValue';
-
-export const PltHeadCell = designComponent({
-  name: 'plt-head-cell',
-  props: {
-    table: { type: Object as PropType<typeof Table.use.class>, required: true },
-    tablePlc: { type: Object as PropType<tPlcType>, required: true },
-    scroll: { type: Function as PropType<() => PlainScroll>, required: true },
-  },
-  setup({ props }) {
-
-    const { refs, onRef } = useRefs({ el: iHTMLElement });
-
-    const { resizeHandler } = useHeadCellResize(props.table, () => props.tablePlc);
-
-    const sort = computed(() => {
-      const { tablePlc, table } = props;
-      if (!table.props.sort) {return null;}
-      if (tablePlc.group) {return null;}
-      const sortObj = toArray(props.table.props.sort!).find(i => i.field === tablePlc.props.field);
-      if (!sortObj) {return null;}
-      return !!sortObj.desc;
-    });
-
-    const handler = {
-      onClick: (e: iMouseEvent) => {props.table.hooks.onClickHeadCell.exec({ e, plc: props.tablePlc });},
-      onEnter: (e: iMouseEvent) => {props.table.hooks.onEnterHeadCell.exec({ e, plc: props.tablePlc });},
-      onLeave: (e: iMouseEvent) => {props.table.hooks.onLeaveHeadCell.exec({ e, plc: props.tablePlc });},
-    };
-
-    useTooltip({
-      overflow: true,
-      tooltip: () => ({
-        popperSize: props.table.styleComputed.value.size,
-        reference: refs.el,
-        message: props.tablePlc.props.title
-      }),
-    });
-
-    const classes = useClassCache(() => {
-      const ret = [
-        props.tablePlc.classes.head as any,
-        props.tablePlc.props.headCls as any,
-        !!props.table.props.headCellClassFunc ? props.table.props.headCellClassFunc(props.tablePlc) : null
-      ];
-      return props.table.hooks.onCellClass.exec({ classes: ret, plc: props.tablePlc }).classes;
-    });
-
-    const styles = useStyleCache(() => {
-      const style: any = {
-        ...props.tablePlc.styles.head as any,
-        ...(!!props.table.props.headCellStyleFunc ? props.table.props.headCellStyleFunc(props.tablePlc) : {})
-      };
-      return props.table.hooks.onCellStyle.exec({ styles: style, plc: props.tablePlc }).styles;
-    });
-
-    return {
-      render: () => {
-        const content = renderHeadCell(props.tablePlc);
-        return (
-          <td
-            ref={onRef.el}
-            className={classes.value}
-            style={styles.value}
-            rowSpan={props.tablePlc.rowspan}
-            colSpan={props.tablePlc.colspan}
-            onClick={handler.onClick}
-            onMouseEnter={handler.onEnter}
-            onMouseLeave={handler.onLeave}
-          >
-            {content}
-            {!!props.tablePlc.props.tip && <Tooltip v-slots={{
-              default: () => <Icon icon="pi-info-circle" className="plt-head-cell-tip"/>,
-              popper: () => getFunctionValue(props.tablePlc.props.tip)
-            }}/>}
-            <span className="plt-head-cell-indicator" onMouseDown={resizeHandler.mousedown}/>
-            {sort.value != null && (
-              <div className={`plt-head-cell-sorter plt-head-cell-sorter-${sort.value ? 'desc' : 'asc'}`}>
-                <div className="plt-head-cell-sorter-inner">
-                  <Icon icon="pi-caret-up"/>
-                  <Icon icon="pi-caret-down"/>
-                </div>
-              </div>
-            )}
-          </td>
-        );
-      }
-    };
-  },
-});
+import {useHeadCellResize} from "./useHeadCellResize";
+import {computed, designComponent, iHTMLElement, iMouseEvent, PropType, useClassCache, useRefs, useStyleCache} from "@peryl/react-compose";
+import {toArray} from "@peryl/utils/toArray";
+import {Table} from "../Table";
+import {tPlcType} from "../../plc/utils/plc.utils";
+import {PlainScroll} from "../../../Scroll";
+import {Icon} from "../../../Icon";
+import {renderHeadCell} from "../../plc/utils/plc.render";
+import {useTooltip} from "../../../useTooltip";
+import Tooltip from "../../../Tooltip";
+import {getFunctionValue} from '@peryl/utils/getFunctionValue';
+
+export const PltHeadCell = designComponent({
+  name: 'plt-head-cell',
+  props: {
+    table: { type: Object as PropType<typeof Table.use.class>, required: true },
+    tablePlc: { type: Object as PropType<tPlcType>, required: true },
+    scroll: { type: Function as PropType<() => PlainScroll>, required: true },
+  },
+  setup({ props }) {
+
+    const { refs, onRef } = useRefs({ el: iHTMLElement });
+
+    const { resizeHandler } = useHeadCellResize(props.table, () => props.tablePlc);
+
+    const sort = computed(() => {
+      const { tablePlc, table } = props;
+      if (!table.props.sort) {return null;}
+      if (tablePlc.group) {return null;}
+      const sortObj = toArray(props.table.props.sort!).find(i => i.field === tablePlc.props.field);
+      if (!sortObj) {return null;}
+      return !!sortObj.desc;
+    });
+
+    const handler = {
+      onClick: (e: iMouseEvent) => {props.table.hooks.onClickHeadCell.exec({ e, plc: props.tablePlc });},
+      onEnter: (e: iMouseEvent) => {props.table.hooks.onEnterHeadCell.exec({ e, plc: props.tablePlc });},
+      onLeave: (e: iMouseEvent) => {props.table.hooks.onLeaveHeadCell.exec({ e, plc: props.tablePlc });},
+    };
+
+    useTooltip({
+      overflow: true,
+      tooltip: () => ({
+        popperSize: props.table.styleComputed.value.size,
+        reference: refs.el,
+        message: props.tablePlc.props.title
+      }),
+    });
+
+    const classes = useClassCache(() => {
+      const ret = [
+        props.tablePlc.classes.head as any,
+        props.tablePlc.props.headCls as any,
+        !!props.table.props.headCellClassFunc ? props.table.props.headCellClassFunc(props.tablePlc) : null
+      ];
+      return props.table.hooks.onCellClass.exec({ classes: ret, plc: props.tablePlc }).classes;
+    });
+
+    const styles = useStyleCache(() => {
+      const style: any = {
+        ...props.tablePlc.styles.head as any,
+        ...(!!props.table.props.headCellStyleFunc ? props.table.props.headCellStyleFunc(props.tablePlc) : {})
+      };
+      return props.table.hooks.onCellStyle.exec({ styles: style, plc: props.tablePlc }).styles;
+    });
+
+    return {
+      render: () => {
+        const content = renderHeadCell(props.tablePlc);
+        return (
+          <td
+            ref={onRef.el}
+            className={classes.value}
+            style={styles.value}
+            rowSpan={props.tablePlc.rowspan}
+            colSpan={props.tablePlc.colspan}
+            onClick={handler.onClick}
+            onMouseEnter={handler.onEnter}
+            onMouseLeave={handler.onLeave}
+          >
+            {content}
+            {!!props.tablePlc.props.tip && <Tooltip v-slots={{
+              default: () => <Icon icon="pi-info-circle" className="plt-head-cell-tip"/>,
+              popper: () => getFunctionValue(props.tablePlc.props.tip)
+            }}/>}
+            <span className="plt-head-cell-indicator" onMouseDown={resizeHandler.mousedown}/>
+            {sort.value != null && (
+              <div className={`plt-head-cell-sorter plt-head-cell-sorter-${sort.value ? 'desc' : 'asc'}`}>
+                <div className="plt-head-cell-sorter-inner">
+                  <Icon icon="pi-caret-up"/>
+                  <Icon icon="pi-caret-down"/>
+                </div>
+              </div>
+            )}
+          </td>
+        );
+      }
+    };
+  },
+});