plain-design 1.0.0-beta.71 → 1.0.0-beta.73

package/src/packages/components/Table/plc/process/processPlcFixed.ts

@@ -1,81 +1,81 @@
-import {StyleProperties} from "plain-design-composition";
-import {TablePlcFixedType, tPlc, tPlcType} from "../utils/plc.utils";
-
-/**
- * 处理plc的fixed定位
- * @author  韦胜健
- * @date    2020/12/19 16:50
- */
-export function processPlcFixed(flatPlcList: tPlc[]) {
-  const collect = (() => {
-    const left = [] as tPlc[];
-    const right = [] as tPlc[];
-    flatPlcList.forEach(plc => {
-      switch (plc.props.fixed) {
-        case TablePlcFixedType.left:
-          left.push(plc);
-          break;
-        case TablePlcFixedType.right:
-          right.push(plc);
-          break;
-      }
-    });
-    return {
-      left,
-      right,
-    };
-  })();
-  const width = {
-    left: 0,
-    right: 0,
-  };
-  Object.keys(collect).forEach((item) => {
-    const key = item as 'left' | 'right';
-    let list = collect[key]!;
-    if (key === 'right') {list = list.reverse();}
-
-    for (let i = 0; i < list.length; i++) {
-      const element = list[i];
-      width[key] += element.props.width;
-      if (i === 0) {
-        element.fixedPosition[key] = 0;
-      } else {
-        const { props: { width: prevWidth }, fixedPosition: { [key]: prevValue } } = list[i - 1]!;
-        element.fixedPosition[key] = Number(prevWidth) + prevValue;
-      }
-    }
-  });
-}
-
-/**
- * 获取plcFixed样式
- * @author  韦胜健
- * @date    2020/12/19 16:55
- */
-export function getPlcFixedStyle(plc: tPlcType) {
-  const { props: { fixed } } = plc;
-  const styles = {} as StyleProperties;
-  if (fixed === TablePlcFixedType.center) {
-    return styles;
-  }
-  styles.position = 'sticky';
-  styles.zIndex = 3;
-
-  if (!plc.group) {
-    (styles as any)[fixed] = (plc.fixedPosition as any)[fixed] + 'px';
-  } else {
-    let count = 10;
-    const isFixedLeft = fixed === TablePlcFixedType.left;
-    while (!!plc && plc.group && count > 0) {
-      plc = plc.children[isFixedLeft ? 0 : plc.children.length - 1];
-      count--;
-    }
-    if (count === 0 && !!plc) {
-      throw new Error('解析异常');
-    }
-    if (!!plc) {
-      (styles as any)[fixed] = (plc.fixedPosition as any)[fixed] + 'px';
-    }
-  }
-  return styles;
-}
+import {StyleProperties} from "plain-design-composition";
+import {TablePlcFixedType, tPlc, tPlcType} from "../utils/plc.utils";
+
+/**
+ * 处理plc的fixed定位
+ * @author  韦胜健
+ * @date    2020/12/19 16:50
+ */
+export function processPlcFixed(flatPlcList: tPlc[]) {
+  const collect = (() => {
+    const left = [] as tPlc[];
+    const right = [] as tPlc[];
+    flatPlcList.forEach(plc => {
+      switch (plc.props.fixed) {
+        case TablePlcFixedType.left:
+          left.push(plc);
+          break;
+        case TablePlcFixedType.right:
+          right.push(plc);
+          break;
+      }
+    });
+    return {
+      left,
+      right,
+    };
+  })();
+  const width = {
+    left: 0,
+    right: 0,
+  };
+  Object.keys(collect).forEach((item) => {
+    const key = item as 'left' | 'right';
+    let list = collect[key]!;
+    if (key === 'right') {list = list.reverse();}
+
+    for (let i = 0; i < list.length; i++) {
+      const element = list[i];
+      width[key] += element.props.width;
+      if (i === 0) {
+        element.fixedPosition[key] = 0;
+      } else {
+        const { props: { width: prevWidth }, fixedPosition: { [key]: prevValue } } = list[i - 1]!;
+        element.fixedPosition[key] = Number(prevWidth) + prevValue;
+      }
+    }
+  });
+}
+
+/**
+ * 获取plcFixed样式
+ * @author  韦胜健
+ * @date    2020/12/19 16:55
+ */
+export function getPlcFixedStyle(plc: tPlcType) {
+  const { props: { fixed } } = plc;
+  const styles = {} as StyleProperties;
+  if (fixed === TablePlcFixedType.center) {
+    return styles;
+  }
+  styles.position = 'sticky';
+  styles.zIndex = 3;
+
+  if (!plc.group) {
+    (styles as any)[fixed] = (plc.fixedPosition as any)[fixed] + 'px';
+  } else {
+    let count = 10;
+    const isFixedLeft = fixed === TablePlcFixedType.left;
+    while (!!plc && plc.group && count > 0) {
+      plc = plc.children[isFixedLeft ? 0 : plc.children.length - 1];
+      count--;
+    }
+    if (count === 0 && !!plc) {
+      throw new Error('解析异常');
+    }
+    if (!!plc) {
+      (styles as any)[fixed] = (plc.fixedPosition as any)[fixed] + 'px';
+    }
+  }
+  return styles;
+}

package/src/packages/components/Table/plc/process/processPlcSort.ts

@@ -1,91 +1,91 @@
-import {IteratePlcHandleType, iteratePlcList} from "../utils/iteratePlcList";
-import {insertSort} from "plain-utils/object/insertSort";
-import {TablePlcFixedType, tPlc, tPlcType} from "../utils/plc.utils";
-
-/**
- * 获取plc的排序索引
- * @author  韦胜健
- * @date    2020/12/18 14:23
- */
-function getPlcOrder(item: tPlcType): number {
-  let order = item.props.order || 0;
-  if (item.props.fixed === TablePlcFixedType.left) {
-    order -= 9999;
-  } else if (item.props.fixed === TablePlcFixedType.right) {
-    order += 9999;
-  }
-  return Number(order);
-}
-
-/**
- * 对plc进行排序
- * @author  韦胜健
- * @date    2020/8/15 19:18
- */
-export function processPlcSort(
-  {
-    plcList,
-    tableWidth,
-  }: {
-    plcList: tPlcType[],
-    tableWidth: number,
-  }
-) {
-  insertSort(plcList, (a, b) => getPlcOrder(a) > getPlcOrder(b));
-  /*计算 flatPlcList 自己 targetTableWidth*/
-  const flatPlcList = [] as tPlc[];
-  iteratePlcList({
-    plcList,
-    onPlc: plc => {
-      flatPlcList.push(plc);
-      return IteratePlcHandleType.nothing;
-    },
-    onGroup: group => {
-      group.children = insertSort(group.children, (a, b) => getPlcOrder(a) > getPlcOrder(b));
-      return IteratePlcHandleType.nothing;
-    }
-  });
-
-  /*计算表格需要固定的宽度*/
-  const { targetTableWidth, plcKeyString } = (() => {
-    let totalPlcWidth = 0;                                          // 总的plc宽度
-    let fitPlc = null as null | tPlc;                                 // 需要自适应宽度的plc
-    const plcKeyString = [] as string[];
-    flatPlcList.forEach(plc => {
-      totalPlcWidth += plc.props.width;
-
-      if (plc.props.fit) {
-        fitPlc = plc;
-      } else if (!fitPlc) {
-        fitPlc = plc;
-      } else if (!fitPlc.props.fit) {
-        if (plc.props.fixed === TablePlcFixedType.center) {
-          fitPlc = plc;
-        } else {
-          if ((fitPlc.props.autoFixedLeft || fitPlc.props.autoFixedRight) && (!plc.props.autoFixedLeft && !plc.props.autoFixedRight)) {
-            fitPlc = plc;
-          }
-        }
-      }
-      plcKeyString.push(plc.props.field || 'empty');
-    });
-    // console.log(fitPlc?.props)
-    /**
-     * 目标table宽度，当总宽度小于tableWidth时，table不设置width宽度。因为table设置了min-width为100%，此时fit的列会自适应宽度。
-     * 当总宽度大于tableWidth时，table需要设置width宽度，否则会导致列被压缩
-     * @author  韦胜健
-     * @date    2020/12/18 15:28
-     */
-    let targetTableWidth = totalPlcWidth > tableWidth ? totalPlcWidth : null;
-    if (!targetTableWidth && !!fitPlc) {
-      fitPlc.props.width = 0;
-    }
-    return { targetTableWidth, plcKeyString: plcKeyString.join('_') };
-  })();
-
-  return {
-    targetTableWidth,
-    flatPlcList,
-    plcKeyString,
-  };
-}
+import {IteratePlcHandleType, iteratePlcList} from "../utils/iteratePlcList";
+import {insertSort} from "plain-utils/object/insertSort";
+import {TablePlcFixedType, tPlc, tPlcType} from "../utils/plc.utils";
+
+/**
+ * 获取plc的排序索引
+ * @author  韦胜健
+ * @date    2020/12/18 14:23
+ */
+function getPlcOrder(item: tPlcType): number {
+  let order = item.props.order || 0;
+  if (item.props.fixed === TablePlcFixedType.left) {
+    order -= 9999;
+  } else if (item.props.fixed === TablePlcFixedType.right) {
+    order += 9999;
+  }
+  return Number(order);
+}
+
+/**
+ * 对plc进行排序
+ * @author  韦胜健
+ * @date    2020/8/15 19:18
+ */
+export function processPlcSort(
+  {
+    plcList,
+    tableWidth,
+  }: {
+    plcList: tPlcType[],
+    tableWidth: number,
+  }
+) {
+  insertSort(plcList, (a, b) => getPlcOrder(a) > getPlcOrder(b));
+  /*计算 flatPlcList 自己 targetTableWidth*/
+  const flatPlcList = [] as tPlc[];
+  iteratePlcList({
+    plcList,
+    onPlc: plc => {
+      flatPlcList.push(plc);
+      return IteratePlcHandleType.nothing;
+    },
+    onGroup: group => {
+      group.children = insertSort(group.children, (a, b) => getPlcOrder(a) > getPlcOrder(b));
+      return IteratePlcHandleType.nothing;
+    }
+  });
+
+  /*计算表格需要固定的宽度*/
+  const { targetTableWidth, plcKeyString } = (() => {
+    let totalPlcWidth = 0;                                          // 总的plc宽度
+    let fitPlc = null as null | tPlc;                                 // 需要自适应宽度的plc
+    const plcKeyString = [] as string[];
+    flatPlcList.forEach(plc => {
+      totalPlcWidth += plc.props.width;
+
+      if (plc.props.fit) {
+        fitPlc = plc;
+      } else if (!fitPlc) {
+        fitPlc = plc;
+      } else if (!fitPlc.props.fit) {
+        if (plc.props.fixed === TablePlcFixedType.center) {
+          fitPlc = plc;
+        } else {
+          if ((fitPlc.props.autoFixedLeft || fitPlc.props.autoFixedRight) && (!plc.props.autoFixedLeft && !plc.props.autoFixedRight)) {
+            fitPlc = plc;
+          }
+        }
+      }
+      plcKeyString.push(plc.props.field || 'empty');
+    });
+    // console.log(fitPlc?.props)
+    /**
+     * 目标table宽度，当总宽度小于tableWidth时，table不设置width宽度。因为table设置了min-width为100%，此时fit的列会自适应宽度。
+     * 当总宽度大于tableWidth时，table需要设置width宽度，否则会导致列被压缩
+     * @author  韦胜健
+     * @date    2020/12/18 15:28
+     */
+    let targetTableWidth = totalPlcWidth > tableWidth ? totalPlcWidth : null;
+    if (!targetTableWidth && !!fitPlc) {
+      fitPlc.props.width = 0;
+    }
+    return { targetTableWidth, plcKeyString: plcKeyString.join('_') };
+  })();
+
+  return {
+    targetTableWidth,
+    flatPlcList,
+    plcKeyString,
+  };
+}

package/src/packages/components/Table/plc/use/useBasePlc.tsx

@@ -1,85 +1,85 @@
-import {iPlcEventType, nextPlcKey, PlcPropsOptions, PlcPublicAttrs, tPlc} from "../utils/plc.utils";
-import {computed, ExtractPropTypes, reactive, useNumber, useRefs} from "plain-design-composition";
-import {PlcCollector} from "../group/PlcGroup";
-import {usePlcPropsState} from "./usePlcPropsState";
-import {tPlcScopeSlots, tPlcSlots} from "../utils/plc.scope-slots";
-import {Validation} from "../../../Form/validate/createValidation";
-import {PlainObject} from "plain-utils/utils/event";
-import {isRuleRequired} from "../../../Form/validate/validate.utils";
-import {pick} from "plain-utils/object/pick";
-import {PlcExclusion} from "../../standard/PlcExclusion";
-
-export function useBasePlc(
-  {
-    props,
-    event,
-    slots,
-    scopeSlots,
-  }: {
-    props: ExtractPropTypes<typeof PlcPropsOptions>,
-    event: iPlcEventType,
-    slots: tPlcSlots,
-    scopeSlots: tPlcScopeSlots,
-  }
-) {
-
-  const plcExclusion = PlcExclusion.use.inject(null);
-
-  const { refs, onRef } = useRefs({ el: HTMLElement });
-
-  const childValidator = Validation.useValidationChild(new Proxy(props, {
-    get(target, key) {
-      if (key === 'label') {return target.title;}
-      return (target as any)[key];
-    },
-  }));
-
-  const isRequired = (data: PlainObject) => childValidator.getRules().some(rule => isRuleRequired(rule, data));
-
-  /*格式化props*/
-  const { numberState } = useNumber(props, ['order', 'width']);
-
-  /*得到可以修改的props state*/
-  const { propsState, state } = usePlcPropsState(computed(() => ({
-    ...pick(props, Object.keys(PlcPropsOptions) as (keyof typeof PlcPropsOptions)[]),
-    ...numberState,
-  }) as Omit<typeof props, 'order' | 'width'> & typeof numberState));
-
-  const plc: tPlc = reactive({
-    /*PlcPublicAttrs 在 copyPlc中会深度复制一遍，这里适配类型即可*/
-    ...PlcPublicAttrs,
-    plcKey: `${props.field || ''}_${nextPlcKey()}`,
-    isRequired,
-    group: false,
-    props: propsState,
-    sourceProps: props,
-    slots,
-    scopeSlots,
-    event,
-    refer: () => plc,
-    refs,
-    /*列宽发生调整*/
-    setDurWidth: (durWidth: number) => plc.setPropsState({ width: Number((propsState.width)) + durWidth }),
-    /*对propsState的state的修改，最好都通过setPropsState来进行，这样可以出发table的onConfigPlc这个hooks*/
-    setPropsState: (data: any) => {
-      Object.entries(data).forEach(([key, val]) => {(propsState as any)[key] = val;});
-      // todo
-      // table.emitConfigPlc();
-    },
-    /*有时候希望直接修改props的state，可以通过这个方法获取修改，这样的不会触发table的onConfigPlc这个hook*/
-    getState: () => state as any,
-    getWidth: () => propsState.width
-  });
-
-  const isExclude = !!plcExclusion && plcExclusion.props.isExclude(plc);
-
-  plc.isExclude = () => isExclude;
-
-  /*collector收集列信息*/
-  !isExclude && PlcCollector.child({ sort: () => refs.el! });
-
-  return {
-    refer: plc,
-    render: () => (<i ref={onRef.el} {...{ title: props.title, field: props.field }}/>)
-  };
-}
+import {iPlcEventType, nextPlcKey, PlcPropsOptions, PlcPublicAttrs, tPlc} from "../utils/plc.utils";
+import {computed, ExtractPropTypes, reactive, useNumber, useRefs} from "plain-design-composition";
+import {PlcCollector} from "../group/PlcGroup";
+import {usePlcPropsState} from "./usePlcPropsState";
+import {tPlcScopeSlots, tPlcSlots} from "../utils/plc.scope-slots";
+import {Validation} from "../../../Form/validate/createValidation";
+import {PlainObject} from "plain-utils/utils/event";
+import {isRuleRequired} from "../../../Form/validate/validate.utils";
+import {pick} from "plain-utils/object/pick";
+import {PlcExclusion} from "../../standard/PlcExclusion";
+
+export function useBasePlc(
+  {
+    props,
+    event,
+    slots,
+    scopeSlots,
+  }: {
+    props: ExtractPropTypes<typeof PlcPropsOptions>,
+    event: iPlcEventType,
+    slots: tPlcSlots,
+    scopeSlots: tPlcScopeSlots,
+  }
+) {
+
+  const plcExclusion = PlcExclusion.use.inject(null);
+
+  const { refs, onRef } = useRefs({ el: HTMLElement });
+
+  const childValidator = Validation.useValidationChild(new Proxy(props, {
+    get(target, key) {
+      if (key === 'label') {return target.title;}
+      return (target as any)[key];
+    },
+  }));
+
+  const isRequired = (data: PlainObject) => childValidator.getRules().some(rule => isRuleRequired(rule, data));
+
+  /*格式化props*/
+  const { numberState } = useNumber(props, ['order', 'width']);
+
+  /*得到可以修改的props state*/
+  const { propsState, state } = usePlcPropsState(computed(() => ({
+    ...pick(props, Object.keys(PlcPropsOptions) as (keyof typeof PlcPropsOptions)[]),
+    ...numberState,
+  }) as Omit<typeof props, 'order' | 'width'> & typeof numberState));
+
+  const plc: tPlc = reactive({
+    /*PlcPublicAttrs 在 copyPlc中会深度复制一遍，这里适配类型即可*/
+    ...PlcPublicAttrs,
+    plcKey: `${props.field || ''}_${nextPlcKey()}`,
+    isRequired,
+    group: false,
+    props: propsState,
+    sourceProps: props,
+    slots,
+    scopeSlots,
+    event,
+    refer: () => plc,
+    refs,
+    /*列宽发生调整*/
+    setDurWidth: (durWidth: number) => plc.setPropsState({ width: Number((propsState.width)) + durWidth }),
+    /*对propsState的state的修改，最好都通过setPropsState来进行，这样可以出发table的onConfigPlc这个hooks*/
+    setPropsState: (data: any) => {
+      Object.entries(data).forEach(([key, val]) => {(propsState as any)[key] = val;});
+      // todo
+      // table.emitConfigPlc();
+    },
+    /*有时候希望直接修改props的state，可以通过这个方法获取修改，这样的不会触发table的onConfigPlc这个hook*/
+    getState: () => state as any,
+    getWidth: () => propsState.width
+  });
+
+  const isExclude = !!plcExclusion && plcExclusion.props.isExclude(plc);
+
+  plc.isExclude = () => isExclude;
+
+  /*collector收集列信息*/
+  !isExclude && PlcCollector.child({ sort: () => refs.el! });
+
+  return {
+    refer: plc,
+    render: () => (<i ref={onRef.el} {...{ title: props.title, field: props.field }}/>)
+  };
+}

package/src/packages/components/Table/plc/use/useBasePlcGroup.tsx

@@ -1,70 +1,70 @@
-import {computed, ExtractPropTypes, reactive, useNumber, useRefs} from "plain-design-composition";
-import {PlcCollector} from "../group/PlcGroup";
-import {usePlcPropsState} from "./usePlcPropsState";
-import {nextPlcKey, PlcGroupPropsOptions, PlcPublicAttrs, tPlcGroup} from "../utils/plc.utils";
-import {tPlcGroupScopeSlots, tPlcSlotsType} from "../utils/plc.scope-slots";
-
-export function useBasePlcGroup(
-  {
-    props,
-    scopeSlots,
-    slots,
-  }: {
-    props: ExtractPropTypes<typeof PlcGroupPropsOptions>,
-    scopeSlots: tPlcGroupScopeSlots,
-    slots: tPlcSlotsType,
-  }
-) {
-  const { refs, onRef } = useRefs({ el: HTMLDivElement });
-  /*collector收集列信息*/
-  PlcCollector.child({ sort: () => refs.el!, injectDefaultValue: null });
-  const items = PlcCollector.parent(true);
-  /*格式化props*/
-  const { numberState } = useNumber(props, ['order']);
-  const { propsState, state } = usePlcPropsState(computed(() => ({
-    ...props,
-    ...numberState,
-  }) as Omit<typeof props, 'order'> & typeof numberState));
-
-  /*核心暴露对象*/
-  const group: tPlcGroup = reactive({
-    refs,
-    /*PlcPublicAttrs 在 copyPlc中会深度复制一遍，这里适配类型即可*/
-    ...PlcPublicAttrs,
-    plcKey: `${props.title || ''}_${nextPlcKey()}`,
-    group: true,
-    children: items,
-    /**
-     * 这里这个props是可修改的对象，别名叫做propsState，来源是props，当props
-     * 中的值发生变化时，自动修正使用props中的值
-     * @author  韦胜健
-     * @date    2021/6/2 15:57
-     */
-    props: propsState,
-    slots: scopeSlots,
-    refer: () => group,
-    /*分组表头宽度调整时，将放大/缩小的列宽分配给每一个子列*/
-    setDurWidth: (durWidth: number) => {
-      const itemDurWidth = Math.floor(durWidth / (items.value.length));
-      items.value.forEach(item => item.setDurWidth(itemDurWidth));
-    },
-    /*对propsState的state的修改，最好都通过setPropsState来进行，这样可以出发table的onConfigPlc这个hooks*/
-    setPropsState: (data: any) => {
-      Object.entries(data).forEach(([key, val]) => {(propsState as any)[key] = val;});
-      // todo
-      // table.emitConfigPlc();
-    },
-    /*有时候希望直接修改props的state，可以通过这个方法获取修改的对象，修改这个对象不会触发table的onConfigPlc这个hook*/
-    getState: () => state as any,
-    getWidth: () => items.value.reduce((prev, child) => prev + child.getWidth(), 0),
-  });
-
-  return {
-    refer: group,
-    render: () => (
-      <div ref={onRef.el} data-gorup={props.title}>
-        {slots.default()}
-      </div>
-    )
-  };
-}
+import {computed, ExtractPropTypes, reactive, useNumber, useRefs} from "plain-design-composition";
+import {PlcCollector} from "../group/PlcGroup";
+import {usePlcPropsState} from "./usePlcPropsState";
+import {nextPlcKey, PlcGroupPropsOptions, PlcPublicAttrs, tPlcGroup} from "../utils/plc.utils";
+import {tPlcGroupScopeSlots, tPlcSlotsType} from "../utils/plc.scope-slots";
+
+export function useBasePlcGroup(
+  {
+    props,
+    scopeSlots,
+    slots,
+  }: {
+    props: ExtractPropTypes<typeof PlcGroupPropsOptions>,
+    scopeSlots: tPlcGroupScopeSlots,
+    slots: tPlcSlotsType,
+  }
+) {
+  const { refs, onRef } = useRefs({ el: HTMLDivElement });
+  /*collector收集列信息*/
+  PlcCollector.child({ sort: () => refs.el!, injectDefaultValue: null });
+  const items = PlcCollector.parent(true);
+  /*格式化props*/
+  const { numberState } = useNumber(props, ['order']);
+  const { propsState, state } = usePlcPropsState(computed(() => ({
+    ...props,
+    ...numberState,
+  }) as Omit<typeof props, 'order'> & typeof numberState));
+
+  /*核心暴露对象*/
+  const group: tPlcGroup = reactive({
+    refs,
+    /*PlcPublicAttrs 在 copyPlc中会深度复制一遍，这里适配类型即可*/
+    ...PlcPublicAttrs,
+    plcKey: `${props.title || ''}_${nextPlcKey()}`,
+    group: true,
+    children: items,
+    /**
+     * 这里这个props是可修改的对象，别名叫做propsState，来源是props，当props
+     * 中的值发生变化时，自动修正使用props中的值
+     * @author  韦胜健
+     * @date    2021/6/2 15:57
+     */
+    props: propsState,
+    slots: scopeSlots,
+    refer: () => group,
+    /*分组表头宽度调整时，将放大/缩小的列宽分配给每一个子列*/
+    setDurWidth: (durWidth: number) => {
+      const itemDurWidth = Math.floor(durWidth / (items.value.length));
+      items.value.forEach(item => item.setDurWidth(itemDurWidth));
+    },
+    /*对propsState的state的修改，最好都通过setPropsState来进行，这样可以出发table的onConfigPlc这个hooks*/
+    setPropsState: (data: any) => {
+      Object.entries(data).forEach(([key, val]) => {(propsState as any)[key] = val;});
+      // todo
+      // table.emitConfigPlc();
+    },
+    /*有时候希望直接修改props的state，可以通过这个方法获取修改的对象，修改这个对象不会触发table的onConfigPlc这个hook*/
+    getState: () => state as any,
+    getWidth: () => items.value.reduce((prev, child) => prev + child.getWidth(), 0),
+  });
+
+  return {
+    refer: group,
+    render: () => (
+      <div ref={onRef.el} data-gorup={props.title}>
+        {slots.default()}
+      </div>
+    )
+  };
+}