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

package/src/packages/components/Table/editor/PlcTextarea.tsx

@@ -1,22 +1,22 @@
-import {PlcEmitsOptions, PlcPropsOptions} from "../plc/utils/plc.utils";
-import {designComponent} from "@peryl/react-compose";
-import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
-import {usePlc} from "../plc/use/usePlc";
-import Input from "../../Input";
-
-export const PlcTextarea = designComponent({
-  name: 'plc-textarea',
-  props: {
-    ...PlcPropsOptions,
-  },
-  scopeSlots: PlcScopeSlotsOptions,
-  emits: PlcEmitsOptions,
-  setup({ props, slots, scopeSlots, event }) {
-    return usePlc({
-      props, scopeSlots, slots, event, defaultScopeSlots: {
-        edit: ({ row, plc }) => !plc.props.field ? null : <Input v-model={row[plc.props.field]}/>,
-        form: ({ row, plc }) => !plc.props.field ? null : <Input textarea v-model={row[plc.props.field]}/>,
-      }
-    });
-  },
-});
+import {PlcEmitsOptions, PlcPropsOptions} from "../plc/utils/plc.utils";
+import {designComponent} from "@peryl/react-compose";
+import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
+import {usePlc} from "../plc/use/usePlc";
+import Input from "../../Input";
+
+export const PlcTextarea = designComponent({
+  name: 'plc-textarea',
+  props: {
+    ...PlcPropsOptions,
+  },
+  scopeSlots: PlcScopeSlotsOptions,
+  emits: PlcEmitsOptions,
+  setup({ props, slots, scopeSlots, event }) {
+    return usePlc({
+      props, scopeSlots, slots, event, defaultScopeSlots: {
+        edit: ({ row, plc }) => !plc.props.field ? null : <Input v-model={row[plc.props.field]}/>,
+        form: ({ row, plc }) => !plc.props.field ? null : <Input textarea v-model={row[plc.props.field]}/>,
+      }
+    });
+  },
+});

package/src/packages/components/Table/editor/PlcTime.tsx

@@ -1,54 +1,54 @@
-import {designComponent} from "@peryl/react-compose";
-import {PlcTimePropsOptions, usePlcTimeInheritProps} from "./PlcTime.utils";
-import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
-import {PlcEmitsOptions} from "../plc/utils/plc.utils";
-import {usePlc} from "../plc/use/usePlc";
-import {useTimeFormat} from "../../TimePicker/time.utils";
-import {plainDate} from "../../../utils/plainDate";
-import {TimePicker} from "../../TimePicker";
-
-export const PlcTime = designComponent({
-  name: 'plc-time',
-  props: PlcTimePropsOptions,
-  scopeSlots: PlcScopeSlotsOptions,
-  emits: PlcEmitsOptions,
-  setup({ props, slots, scopeSlots, event }) {
-
-    const { formatString } = useTimeFormat(props);
-
-    const utils = {
-      formatter: (value: any) => {
-        if (value == null) {return null;}
-        if (!!props.displayFormat || !!props.valueFormat) {
-          return plainDate(value, formatString.value).getDisplay();
-        } else {
-          return value;
-        }
-      },
-    };
-
-    const inheritProps = usePlcTimeInheritProps(props);
-
-    return usePlc({
-      props,
-      scopeSlots,
-      slots,
-      event,
-      proxyPropsConfig: {
-        formatter: () => {
-          if (!!props.displayFormat || !!props.valueFormat) {
-            return utils.formatter;
-          }
-        },
-      },
-      defaultScopeSlots: {
-        edit: ({ row, plc }) => !plc.props.field ? null : (
-          <TimePicker
-            v-model={row[plc.props.field]}
-            {...inheritProps.value}
-          />
-        )
-      },
-    });
-  },
-});
+import {designComponent} from "@peryl/react-compose";
+import {PlcTimePropsOptions, usePlcTimeInheritProps} from "./PlcTime.utils";
+import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
+import {PlcEmitsOptions} from "../plc/utils/plc.utils";
+import {usePlc} from "../plc/use/usePlc";
+import {useTimeFormat} from "../../TimePicker/time.utils";
+import {plainDate} from "../../../utils/plainDate";
+import {TimePicker} from "../../TimePicker";
+
+export const PlcTime = designComponent({
+  name: 'plc-time',
+  props: PlcTimePropsOptions,
+  scopeSlots: PlcScopeSlotsOptions,
+  emits: PlcEmitsOptions,
+  setup({ props, slots, scopeSlots, event }) {
+
+    const { formatString } = useTimeFormat(props);
+
+    const utils = {
+      formatter: (value: any) => {
+        if (value == null) {return null;}
+        if (!!props.displayFormat || !!props.valueFormat) {
+          return plainDate(value, formatString.value).getDisplay();
+        } else {
+          return value;
+        }
+      },
+    };
+
+    const inheritProps = usePlcTimeInheritProps(props);
+
+    return usePlc({
+      props,
+      scopeSlots,
+      slots,
+      event,
+      proxyPropsConfig: {
+        formatter: () => {
+          if (!!props.displayFormat || !!props.valueFormat) {
+            return utils.formatter;
+          }
+        },
+      },
+      defaultScopeSlots: {
+        edit: ({ row, plc }) => !plc.props.field ? null : (
+          <TimePicker
+            v-model={row[plc.props.field]}
+            {...inheritProps.value}
+          />
+        )
+      },
+    });
+  },
+});

package/src/packages/components/Table/editor/PlcTime.utils.ts

@@ -1,15 +1,15 @@
-import {TimePublicProps} from "../../TimePicker/panel/time-panel.utils";
-import {PlcPropsOptions} from "../plc/utils/plc.utils";
-import {computed, ExtractPropTypes} from "@peryl/react-compose";
-import {pick} from "@peryl/utils/pick";
-
-export const PlcTimePropsOptions = {
-  ...PlcPropsOptions,
-  ...TimePublicProps,
-};
-
-export type iPlcTimePropsType = ExtractPropTypes<typeof PlcTimePropsOptions>
-
-export function usePlcTimeInheritProps(props: ExtractPropTypes<typeof TimePublicProps>) {
-  return computed((): typeof props => pick(props, Object.keys(TimePublicProps) as (keyof typeof TimePublicProps)[]));
-}
+import {TimePublicProps} from "../../TimePicker/panel/time-panel.utils";
+import {PlcPropsOptions} from "../plc/utils/plc.utils";
+import {computed, ExtractPropTypes} from "@peryl/react-compose";
+import {pick} from "@peryl/utils/pick";
+
+export const PlcTimePropsOptions = {
+  ...PlcPropsOptions,
+  ...TimePublicProps,
+};
+
+export type iPlcTimePropsType = ExtractPropTypes<typeof PlcTimePropsOptions>
+
+export function usePlcTimeInheritProps(props: ExtractPropTypes<typeof TimePublicProps>) {
+  return computed((): typeof props => pick(props, Object.keys(TimePublicProps) as (keyof typeof TimePublicProps)[]));
+}

package/src/packages/components/Table/editor/PlcTimeRange.tsx

@@ -1,66 +1,66 @@
-import {designComponent, PropType} from "@peryl/react-compose";
-import {iPlcTimePropsType, PlcTimePropsOptions, usePlcTimeInheritProps} from "./PlcTime.utils";
-import {nextPlcBindId} from "../plc/utils/plc.utils";
-import {PlcTime} from "./PlcTime";
-import TimePicker from "../../TimePicker";
-import {iTimePropsType} from "../../TimePicker/time.utils";
-
-export const PlcTimeRange = designComponent({
-  name: 'plc-time-range',
-  props: {
-    ...PlcTimePropsOptions,
-    startField: { type: String, required: true },
-    startTitle: { type: String, required: true },
-    endField: { type: String, required: true },
-    endTitle: { type: String, required: true },
-    startAttrs: { type: Object as PropType<Partial<iPlcTimePropsType>> },
-    endAttrs: { type: Object as PropType<Partial<iPlcTimePropsType>> },
-    editAttrs: { type: Object as PropType<Partial<iTimePropsType>> },
-  },
-  setup({ props, }) {
-
-    const inheritProps = usePlcTimeInheritProps(props);
-
-    const startBindId = nextPlcBindId();
-
-    return () => <>
-      <PlcTime
-        key={`${startBindId}_start`}
-        bindId={startBindId}
-        field={props.startField}
-        title={props.startTitle}
-        width={props.width}
-        editColSpan={2}
-        {...{
-          ...inheritProps.value,
-          ...props.startAttrs,
-        }}
-        v-slots={{
-          edit: ({ row }) => (
-            <TimePicker
-              range
-              v-model:start={row[props.startField]}
-              v-model:end={row[props.endField]}
-              {...{
-                ...inheritProps.value,
-                ...props.editAttrs,
-              }}
-            />
-          )
-        }}
-      />
-      <PlcTime
-        key={`${startBindId}_end`}
-        parentBindId={startBindId}
-        field={props.endField}
-        title={props.endTitle}
-        width={props.width}
-        editColSpan={0}
-        {...{
-          ...inheritProps.value,
-          ...props.endAttrs,
-        }}
-      />
-    </>;
-  },
-});
+import {designComponent, PropType} from "@peryl/react-compose";
+import {iPlcTimePropsType, PlcTimePropsOptions, usePlcTimeInheritProps} from "./PlcTime.utils";
+import {nextPlcBindId} from "../plc/utils/plc.utils";
+import {PlcTime} from "./PlcTime";
+import TimePicker from "../../TimePicker";
+import {iTimePropsType} from "../../TimePicker/time.utils";
+
+export const PlcTimeRange = designComponent({
+  name: 'plc-time-range',
+  props: {
+    ...PlcTimePropsOptions,
+    startField: { type: String, required: true },
+    startTitle: { type: String, required: true },
+    endField: { type: String, required: true },
+    endTitle: { type: String, required: true },
+    startAttrs: { type: Object as PropType<Partial<iPlcTimePropsType>> },
+    endAttrs: { type: Object as PropType<Partial<iPlcTimePropsType>> },
+    editAttrs: { type: Object as PropType<Partial<iTimePropsType>> },
+  },
+  setup({ props, }) {
+
+    const inheritProps = usePlcTimeInheritProps(props);
+
+    const startBindId = nextPlcBindId();
+
+    return () => <>
+      <PlcTime
+        key={`${startBindId}_start`}
+        bindId={startBindId}
+        field={props.startField}
+        title={props.startTitle}
+        width={props.width}
+        editColSpan={2}
+        {...{
+          ...inheritProps.value,
+          ...props.startAttrs,
+        }}
+        v-slots={{
+          edit: ({ row }) => (
+            <TimePicker
+              range
+              v-model:start={row[props.startField]}
+              v-model:end={row[props.endField]}
+              {...{
+                ...inheritProps.value,
+                ...props.editAttrs,
+              }}
+            />
+          )
+        }}
+      />
+      <PlcTime
+        key={`${startBindId}_end`}
+        parentBindId={startBindId}
+        field={props.endField}
+        title={props.endTitle}
+        width={props.width}
+        editColSpan={0}
+        {...{
+          ...inheritProps.value,
+          ...props.endAttrs,
+        }}
+      />
+    </>;
+  },
+});

package/src/packages/components/Table/editor/PlcToggle.tsx

@@ -1,40 +1,40 @@
-import {designComponent} from "@peryl/react-compose";
-import {createPlcPropOptions, PlcEmitsOptions} from "../plc/utils/plc.utils";
-import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
-import {usePlc} from "../plc/use/usePlc";
-import Toggle from "../../Toggle";
-
-export const PlcToggle = designComponent({
-  name: 'plc-toggle',
-  props: {
-    ...createPlcPropOptions({
-      addEditPadding: true,
-    }),
-    trueValue: { default: 'Y' as any },
-    falseValue: { default: 'N' as any },
-  },
-  scopeSlots: PlcScopeSlotsOptions,
-  emits: PlcEmitsOptions,
-  setup({ props, slots, scopeSlots, event }) {
-    return usePlc({
-      props, scopeSlots, slots, event, defaultScopeSlots: {
-        summary: () => null,
-        normal: ({ row, plc }) => !plc.props.field ? null : (
-          <Toggle
-            disabled
-            v-model={row[plc.props.field]}
-            trueValue={props.trueValue}
-            falseValue={props.falseValue}
-          />
-        ),
-        edit: ({ row, plc }) => !plc.props.field ? null : (
-          <Toggle
-            v-model={row[plc.props.field]}
-            trueValue={props.trueValue}
-            falseValue={props.falseValue}
-          />
-        ),
-      }
-    });
-  },
-});
+import {designComponent} from "@peryl/react-compose";
+import {createPlcPropOptions, PlcEmitsOptions} from "../plc/utils/plc.utils";
+import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
+import {usePlc} from "../plc/use/usePlc";
+import Toggle from "../../Toggle";
+
+export const PlcToggle = designComponent({
+  name: 'plc-toggle',
+  props: {
+    ...createPlcPropOptions({
+      addEditPadding: true,
+    }),
+    trueValue: { default: 'Y' as any },
+    falseValue: { default: 'N' as any },
+  },
+  scopeSlots: PlcScopeSlotsOptions,
+  emits: PlcEmitsOptions,
+  setup({ props, slots, scopeSlots, event }) {
+    return usePlc({
+      props, scopeSlots, slots, event, defaultScopeSlots: {
+        summary: () => null,
+        normal: ({ row, plc }) => !plc.props.field ? null : (
+          <Toggle
+            disabled
+            v-model={row[plc.props.field]}
+            trueValue={props.trueValue}
+            falseValue={props.falseValue}
+          />
+        ),
+        edit: ({ row, plc }) => !plc.props.field ? null : (
+          <Toggle
+            v-model={row[plc.props.field]}
+            trueValue={props.trueValue}
+            falseValue={props.falseValue}
+          />
+        ),
+      }
+    });
+  },
+});

package/src/packages/components/Table/index.tsx

@@ -1,4 +1,4 @@
-import Table from "./table/Table";
-
-export {Table};
-export default Table;
+import Table from "./table/Table";
+
+export {Table};
+export default Table;

package/src/packages/components/Table/plc/formatPlcList.tsx

@@ -1,92 +1,92 @@
-import {copyPlcList} from "./process/copyPlcList";
-import {processAutoFixed} from "./process/processAutoFixed";
-import {processPlcSort} from "./process/processPlcSort";
-import {processHeadPlcList} from "./process/processHeadPlcList";
-import {processPlcFixed} from "./process/processPlcFixed";
-import {processPlcClassAndStyle} from "./process/processPlcClassAndStyle";
-import {IteratePlcHandleType, iteratePlcList} from "./utils/iteratePlcList";
-import {tPlc, tPlcType} from "./utils/plc.utils";
-import {TablePropsConfig} from "../table/utils/table.utils";
-
-export function formatPlcList(
-  {
-    plcList: sourceList,
-    tableWidth,
-    plcConfigProcessor,
-  }: {
-    plcList: tPlcType[],
-    tableWidth: number,
-    plcConfigProcessor: TablePropsConfig,
-  }
-) {
-
-  /*config plcTypes*/
-  (() => {
-    const flatPlcList: tPlc[] = [];
-    iteratePlcList({
-      plcList: sourceList,
-      onPlc: (plc) => {
-        flatPlcList.push(plc);
-        return IteratePlcHandleType.nothing;
-      },
-      onGroup: () => IteratePlcHandleType.nothing,
-    });
-    plcConfigProcessor(sourceList, flatPlcList);
-  })();
-
-  /*复制一份plc数据*/
-  const plcList = copyPlcList(sourceList);
-
-  const sourceFlatPlcList: tPlc[] = (() => {
-    const list: tPlc[] = [];
-    iteratePlcList({
-      plcList,
-      onGroup: () => IteratePlcHandleType.nothing,
-      onPlc: (plc) => {
-        list.push(plc);
-        return IteratePlcHandleType.nothing;
-      }
-    });
-    return list;
-  })();
-
-  /*先处理AutoFixed*/
-  processAutoFixed({ plcList });
-  /*对plc进行排序*/
-  const { flatPlcList, targetTableWidth, plcKeyString } = processPlcSort({ plcList, tableWidth });
-  /*计算表头渲染需要的数据*/
-  const { headPlcListArray, maxLevel } = processHeadPlcList({ plcList });
-  /*计算固定列所需要的left，right值*/
-  processPlcFixed(flatPlcList);
-  /*计算plc的class以及style*/
-  processPlcClassAndStyle({ headPlcListArray });
-
-  sourceFlatPlcList.sort((a, b) => {
-    let aSeq = flatPlcList.indexOf(a);
-    if (aSeq === -1) {aSeq = 999999;}
-    let bSeq = flatPlcList.indexOf(b);
-    if (bSeq === -1) {bSeq = 999999;}
-    return aSeq - bSeq;
-  });
-
-  /*sourceFlatPlcList.forEach(i => {
-    if (!(i.refer() as any).__getComponent__) {
-      console.error(i);
-      console.error(`列组件异常，refer找不到__getComponent__函数，请检查是否返回了usePlc返回的refer对象引用！`);
-    }
-  });*/
-
-  return {
-    tableWidth,                                             // 表格容器宽度
-    sourceList,                                             // 原始列数组数据，树形结构的数据(修改props有效)
-    sourceFlatPlcList,                                      // 原始列数组数据，拍平的数据
-    plcList,                                                // 原始列数组数据的一份拷贝
-    flatPlcList,                                            // 展开之后最底层的列数组(修改props无效)
-    targetTableWidth,                                       // 表格设置的样式宽度
-    headPlcListArray,                                       // 表头渲染的二维数组
-    plcKeyString,                                           // 当列排序或者其他属性变化之后，需要刷新body，否则会出现部分节点没有更新的问题
-    maxLevel,                                               // 表头层级
-  };
-}
-
-export type tPlcData = ReturnType<typeof formatPlcList>
+import {copyPlcList} from "./process/copyPlcList";
+import {processAutoFixed} from "./process/processAutoFixed";
+import {processPlcSort} from "./process/processPlcSort";
+import {processHeadPlcList} from "./process/processHeadPlcList";
+import {processPlcFixed} from "./process/processPlcFixed";
+import {processPlcClassAndStyle} from "./process/processPlcClassAndStyle";
+import {IteratePlcHandleType, iteratePlcList} from "./utils/iteratePlcList";
+import {tPlc, tPlcType} from "./utils/plc.utils";
+import {TablePropsConfig} from "../table/utils/table.utils";
+
+export function formatPlcList(
+  {
+    plcList: sourceList,
+    tableWidth,
+    plcConfigProcessor,
+  }: {
+    plcList: tPlcType[],
+    tableWidth: number,
+    plcConfigProcessor: TablePropsConfig,
+  }
+) {
+
+  /*config plcTypes*/
+  (() => {
+    const flatPlcList: tPlc[] = [];
+    iteratePlcList({
+      plcList: sourceList,
+      onPlc: (plc) => {
+        flatPlcList.push(plc);
+        return IteratePlcHandleType.nothing;
+      },
+      onGroup: () => IteratePlcHandleType.nothing,
+    });
+    plcConfigProcessor(sourceList, flatPlcList);
+  })();
+
+  /*复制一份plc数据*/
+  const plcList = copyPlcList(sourceList);
+
+  const sourceFlatPlcList: tPlc[] = (() => {
+    const list: tPlc[] = [];
+    iteratePlcList({
+      plcList,
+      onGroup: () => IteratePlcHandleType.nothing,
+      onPlc: (plc) => {
+        list.push(plc);
+        return IteratePlcHandleType.nothing;
+      }
+    });
+    return list;
+  })();
+
+  /*先处理AutoFixed*/
+  processAutoFixed({ plcList });
+  /*对plc进行排序*/
+  const { flatPlcList, targetTableWidth, plcKeyString } = processPlcSort({ plcList, tableWidth });
+  /*计算表头渲染需要的数据*/
+  const { headPlcListArray, maxLevel } = processHeadPlcList({ plcList });
+  /*计算固定列所需要的left，right值*/
+  processPlcFixed(flatPlcList);
+  /*计算plc的class以及style*/
+  processPlcClassAndStyle({ headPlcListArray });
+
+  sourceFlatPlcList.sort((a, b) => {
+    let aSeq = flatPlcList.indexOf(a);
+    if (aSeq === -1) {aSeq = 999999;}
+    let bSeq = flatPlcList.indexOf(b);
+    if (bSeq === -1) {bSeq = 999999;}
+    return aSeq - bSeq;
+  });
+
+  /*sourceFlatPlcList.forEach(i => {
+    if (!(i.refer() as any).__getComponent__) {
+      console.error(i);
+      console.error(`列组件异常，refer找不到__getComponent__函数，请检查是否返回了usePlc返回的refer对象引用！`);
+    }
+  });*/
+
+  return {
+    tableWidth,                                             // 表格容器宽度
+    sourceList,                                             // 原始列数组数据，树形结构的数据(修改props有效)
+    sourceFlatPlcList,                                      // 原始列数组数据，拍平的数据
+    plcList,                                                // 原始列数组数据的一份拷贝
+    flatPlcList,                                            // 展开之后最底层的列数组(修改props无效)
+    targetTableWidth,                                       // 表格设置的样式宽度
+    headPlcListArray,                                       // 表头渲染的二维数组
+    plcKeyString,                                           // 当列排序或者其他属性变化之后，需要刷新body，否则会出现部分节点没有更新的问题
+    maxLevel,                                               // 表头层级
+  };
+}
+
+export type tPlcData = ReturnType<typeof formatPlcList>

package/src/packages/components/Table/plc/group/PlcGroup.tsx

@@ -1,20 +1,20 @@
-import {designComponent, useCollect} from "@peryl/react-compose";
-import {PlcGroupPropsOptions} from "../utils/plc.utils";
-import {Plc} from "../plc/Plc";
-import {PlcGroupScopeSlotsOptions, PlcGroupSlotsOptions} from "../utils/plc.scope-slots";
-import {useBasePlcGroup} from "../use/useBasePlcGroup";
-
-export const PlcGroup = designComponent({
-  name: 'plc-group',
-  props: PlcGroupPropsOptions,
-  scopeSlots: PlcGroupScopeSlotsOptions,
-  slots: PlcGroupSlotsOptions,
-  setup({ props, slots, scopeSlots }) {
-    return useBasePlcGroup({ props, slots, scopeSlots });
-  },
-});
-
-export const PlcCollector = useCollect(() => ({
-  parent: PlcGroup,
-  child: Plc,
-}));
+import {designComponent, useCollect} from "@peryl/react-compose";
+import {PlcGroupPropsOptions} from "../utils/plc.utils";
+import {Plc} from "../plc/Plc";
+import {PlcGroupScopeSlotsOptions, PlcGroupSlotsOptions} from "../utils/plc.scope-slots";
+import {useBasePlcGroup} from "../use/useBasePlcGroup";
+
+export const PlcGroup = designComponent({
+  name: 'plc-group',
+  props: PlcGroupPropsOptions,
+  scopeSlots: PlcGroupScopeSlotsOptions,
+  slots: PlcGroupSlotsOptions,
+  setup({ props, slots, scopeSlots }) {
+    return useBasePlcGroup({ props, slots, scopeSlots });
+  },
+});
+
+export const PlcCollector = useCollect(() => ({
+  parent: PlcGroup,
+  child: Plc,
+}));