plain-design 1.0.0-beta.70 → 1.0.0-beta.72

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

@@ -1,73 +1,73 @@
-import {computed, designComponent, PropType} from "plain-design-composition";
-import {nextPlcBindId, PlcPropsOptions} from "../plc/utils/plc.utils";
-import {iPlcDatePropsType, PlcDateInheritProps, usePlcDateInheritProps} from "./PlcDate.utils";
-import {PlcDate} from "./PlcDate";
-import {DatePicker} from "../../DatePicker";
-import {iDatePropsType} from "../../DatePicker/date.utils";
-
-export const PlcDateRange = designComponent({
-  name: 'plc-date-range',
-  props: {
-    ...PlcPropsOptions,
-    ...PlcDateInheritProps,
-    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<iPlcDatePropsType>> },
-    endAttrs: { type: Object as PropType<Partial<iPlcDatePropsType>> },
-    editAttrs: { type: Object as PropType<Partial<iDatePropsType>> },
-  },
-  setup({ props }) {
-
-    const inheritProps = usePlcDateInheritProps(props);
-
-    const startBindId = nextPlcBindId();
-
-    const width = computed(() => {
-      const isDefault = props.width === PlcPropsOptions.width.default;
-      if (!isDefault) {return props.width;}
-      return props.datetime ? 200 : PlcPropsOptions.width.default;
-    });
-
-    return () => <>
-      <PlcDate
-        key={`${startBindId}_start`}
-        bindId={startBindId}
-        field={props.startField}
-        title={props.startTitle}
-        width={width.value}
-        editColSpan={2}
-        {...{
-          ...inheritProps.value,
-          ...props.startAttrs,
-        }}
-        v-slots={{
-          edit: ({ row }) => (
-            <DatePicker
-              range
-              v-model:start={row[props.startField]}
-              v-model:end={row[props.endField]}
-              {...{
-                ...inheritProps.value,
-                ...props.editAttrs,
-              }}
-            />
-          )
-        }}
-      />
-      <PlcDate
-        key={`${startBindId}_end`}
-        parentBindId={startBindId}
-        field={props.endField}
-        title={props.endTitle}
-        width={width.value}
-        editColSpan={0}
-        {...{
-          ...inheritProps.value,
-          ...props.endAttrs,
-        }}
-      />
-    </>;
-  },
-});
+import {computed, designComponent, PropType} from "plain-design-composition";
+import {nextPlcBindId, PlcPropsOptions} from "../plc/utils/plc.utils";
+import {iPlcDatePropsType, PlcDateInheritProps, usePlcDateInheritProps} from "./PlcDate.utils";
+import {PlcDate} from "./PlcDate";
+import {DatePicker} from "../../DatePicker";
+import {iDatePropsType} from "../../DatePicker/date.utils";
+
+export const PlcDateRange = designComponent({
+  name: 'plc-date-range',
+  props: {
+    ...PlcPropsOptions,
+    ...PlcDateInheritProps,
+    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<iPlcDatePropsType>> },
+    endAttrs: { type: Object as PropType<Partial<iPlcDatePropsType>> },
+    editAttrs: { type: Object as PropType<Partial<iDatePropsType>> },
+  },
+  setup({ props }) {
+
+    const inheritProps = usePlcDateInheritProps(props);
+
+    const startBindId = nextPlcBindId();
+
+    const width = computed(() => {
+      const isDefault = props.width === PlcPropsOptions.width.default;
+      if (!isDefault) {return props.width;}
+      return props.datetime ? 200 : PlcPropsOptions.width.default;
+    });
+
+    return () => <>
+      <PlcDate
+        key={`${startBindId}_start`}
+        bindId={startBindId}
+        field={props.startField}
+        title={props.startTitle}
+        width={width.value}
+        editColSpan={2}
+        {...{
+          ...inheritProps.value,
+          ...props.startAttrs,
+        }}
+        v-slots={{
+          edit: ({ row }) => (
+            <DatePicker
+              range
+              v-model:start={row[props.startField]}
+              v-model:end={row[props.endField]}
+              {...{
+                ...inheritProps.value,
+                ...props.editAttrs,
+              }}
+            />
+          )
+        }}
+      />
+      <PlcDate
+        key={`${startBindId}_end`}
+        parentBindId={startBindId}
+        field={props.endField}
+        title={props.endTitle}
+        width={width.value}
+        editColSpan={0}
+        {...{
+          ...inheritProps.value,
+          ...props.endAttrs,
+        }}
+      />
+    </>;
+  },
+});

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

@@ -1,21 +1,21 @@
-import {PlcEmitsOptions, PlcPropsOptions} from "../plc/utils/plc.utils";
-import {designComponent} from "plain-design-composition";
-import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
-import {usePlc} from "../plc/use/usePlc";
-import Input from "../../Input";
-
-export const PlcInput = designComponent({
-  name: 'plc-input',
-  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]}/>
-      }
-    });
-  },
-});
+import {PlcEmitsOptions, PlcPropsOptions} from "../plc/utils/plc.utils";
+import {designComponent} from "plain-design-composition";
+import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
+import {usePlc} from "../plc/use/usePlc";
+import Input from "../../Input";
+
+export const PlcInput = designComponent({
+  name: 'plc-input',
+  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]}/>
+      }
+    });
+  },
+});

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

@@ -1,23 +1,23 @@
-import {designComponent} from "plain-design-composition";
-import {PlcEmitsOptions, PlcPropsOptions} from "../plc/utils/plc.utils";
-import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
-import {usePlc} from "../plc/use/usePlc";
-import {InputNumber} from "../../InputNumber";
-
-export const PlcNumber = designComponent({
-  name: 'plc-number',
-  props: {
-    ...PlcPropsOptions,
-    filterType: { type: String, default: 'number' },
-    filterHandler: { type: String, default: 'range' },
-  },
-  scopeSlots: PlcScopeSlotsOptions,
-  emits: PlcEmitsOptions,
-  setup({ props, slots, scopeSlots, event }) {
-    return usePlc({
-      props, scopeSlots, slots, event, defaultScopeSlots: {
-        edit: ({ row, plc }) => !plc.props.field ? null : <InputNumber v-model={row[plc.props.field]}/>
-      }
-    });
-  },
-});
+import {designComponent} from "plain-design-composition";
+import {PlcEmitsOptions, PlcPropsOptions} from "../plc/utils/plc.utils";
+import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
+import {usePlc} from "../plc/use/usePlc";
+import {InputNumber} from "../../InputNumber";
+
+export const PlcNumber = designComponent({
+  name: 'plc-number',
+  props: {
+    ...PlcPropsOptions,
+    filterType: { type: String, default: 'number' },
+    filterHandler: { type: String, default: 'range' },
+  },
+  scopeSlots: PlcScopeSlotsOptions,
+  emits: PlcEmitsOptions,
+  setup({ props, slots, scopeSlots, event }) {
+    return usePlc({
+      props, scopeSlots, slots, event, defaultScopeSlots: {
+        edit: ({ row, plc }) => !plc.props.field ? null : <InputNumber v-model={row[plc.props.field]}/>
+      }
+    });
+  },
+});

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

@@ -1,24 +1,24 @@
-import {designComponent} from "plain-design-composition";
-import {createPlcPropOptions, PlcEmitsOptions} from "../plc/utils/plc.utils";
-import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
-import {usePlc} from "../plc/use/usePlc";
-import Rate from "../../Rate";
-
-export const PlcRate = designComponent({
-  name: 'plc-rate',
-  props: {
-    ...createPlcPropOptions({
-      addEditPadding: true,
-    }),
-  },
-  scopeSlots: PlcScopeSlotsOptions,
-  emits: PlcEmitsOptions,
-  setup({ props, slots, scopeSlots, event }) {
-    return usePlc({
-      props, scopeSlots, slots, event, defaultScopeSlots: {
-        normal: ({ row, plc }) => !plc.props.field ? null : <Rate disabled v-model={row[plc.props.field]}/>,
-        edit: ({ row, plc }) => !plc.props.field ? null : <Rate v-model={row[plc.props.field]}/>,
-      }
-    });
-  },
-});
+import {designComponent} from "plain-design-composition";
+import {createPlcPropOptions, PlcEmitsOptions} from "../plc/utils/plc.utils";
+import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
+import {usePlc} from "../plc/use/usePlc";
+import Rate from "../../Rate";
+
+export const PlcRate = designComponent({
+  name: 'plc-rate',
+  props: {
+    ...createPlcPropOptions({
+      addEditPadding: true,
+    }),
+  },
+  scopeSlots: PlcScopeSlotsOptions,
+  emits: PlcEmitsOptions,
+  setup({ props, slots, scopeSlots, event }) {
+    return usePlc({
+      props, scopeSlots, slots, event, defaultScopeSlots: {
+        normal: ({ row, plc }) => !plc.props.field ? null : <Rate disabled v-model={row[plc.props.field]}/>,
+        edit: ({ row, plc }) => !plc.props.field ? null : <Rate v-model={row[plc.props.field]}/>,
+      }
+    });
+  },
+});

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

@@ -1,180 +1,180 @@
-import {createPlcPropOptions, PlcEmitsOptions} from "../plc/utils/plc.utils";
-import {computed, designComponent, Fragment} from "plain-design-composition";
-import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
-import {usePlc} from "../plc/use/usePlc";
-import {Select} from "../../Select";
-import {createSelectOptionDecoder} from "../../Select/createSelectOptionDecoder";
-import {iTableCellRenderScope} from "../table/utils/table.utils";
-import {SelectPropOptions} from "../../Select/select.utils";
-import {eMultipleValueType} from "../../../uses/useMultipleModel";
-import {iFilterConfigSelect} from "../../FilterService/filter/filter.select";
-import {injectPlainTable} from "../table/Table";
-
-export const PlcSelect = designComponent({
-  name: 'plc-select',
-  props: {
-    ...createPlcPropOptions({
-      filterType: 'select',
-      filterHandler: 'in',
-    }),
-    multiple: SelectPropOptions.multiple,
-    valueType: SelectPropOptions.valueType,
-    useOptionRenderNormal: { type: Boolean },
-  },
-  scopeSlots: {
-    ...PlcScopeSlotsOptions,
-    dynamic: (cellRenderScope: iTableCellRenderScope) => {},
-  },
-  emits: PlcEmitsOptions,
-  slots: ['default'],
-  setup({ props, scopeSlots, event, slots }) {
-
-    const table = injectPlainTable();
-
-    const selectOptionDecoder = createSelectOptionDecoder();
-
-    /**
-     * 当使用dynamic插槽渲染每一个选项时，每一行都应该有自己的decoder，公用一个decoder会导致renderKey一直刷新
-     * @author  韦胜健
-     * @date    2023.1.25 16:18
-     */
-    const dynamicOptionDecoderList = computed(() => {
-      return (table.dataRef.value.data || []).map(() => {
-        if (!scopeSlots.dynamic.isExist()) {
-          return selectOptionDecoder;
-        } else {
-          return createSelectOptionDecoder();
-        }
-      });
-    });
-
-    const filterConfig = computed((): iFilterConfigSelect => {
-      return {
-        renderOptions: () => slots.default(),
-        ...props.filterConfig,
-      };
-    });
-
-    const utils = {
-      /**
-       * 多选时将值转化为数组对象
-       * @author  韦胜健
-       * @date    2022.12.4 15:29
-       */
-      getArrayValue: (value: any): any[] | null | undefined => {
-        if (value == null) {return value;}
-        if (Array.isArray(value)) {
-          return value;
-        }
-        if (typeof value === "string") {
-          if (props.valueType === eMultipleValueType.arrayjson) {
-            return JSON.parse(value);
-          } else {
-            return value.split(',');
-          }
-        }
-      },
-      /**
-       * 值格式化为显示值，用于前端静态导出显示内容
-       * @author  韦胜健
-       * @date    2022.12.4 11:55
-       */
-      labelFormatter: (value: any): string | number | null | undefined => {
-        if (value == null) {return value;}
-        if (!props.multiple) {
-          const item = selectOptionDecoder.options.find(i => i.props.val === value);
-          return !!item ? item.props.label : value;
-        } else {
-          const arrayValue = utils.getArrayValue(value);
-          if (!arrayValue) {return null;}
-          return arrayValue.map(itemValue => {
-            const item = selectOptionDecoder.options.find(i => i.props.val === itemValue);
-            return !!item ? item.props.label : itemValue;
-          }).join(',');
-        }
-      },
-    };
-
-    const { refer, render } = usePlc({
-      props,
-      slots,
-      scopeSlots,
-      event,
-      proxyPropsConfig: {
-        formatter: () => {
-          if (slots.default.isExist()) {
-            return utils.labelFormatter;
-          }
-        },
-        filterConfig: () => filterConfig.value,
-      },
-      defaultScopeSlots: {
-        summary: () => null,
-        normal: (scope) => {
-
-          const decoder = dynamicOptionDecoderList.value[scope.node.state.index];
-
-          /*没有绑定字段，不渲染内容*/
-          if (!props.field || !decoder || !decoder.isRender()) {return null;}
-          /*原始值*/
-          const sourceValue = scope.row[props.field];
-          if (sourceValue == null) {return null;}
-          /*目标值，无论如何格式化为数组展示*/
-          const valueList = props.multiple ? utils.getArrayValue(sourceValue) : [sourceValue];
-          if (!valueList) {return null;}
-
-          /*动态选项，每次render normal cell都decode解析scopeSlots.dynamic一遍，根据每次解析的内容计算显示值*/
-          /*否贼为静态选项，只有渲染plc的时候，只解析一遍slots.default*/
-          if (scopeSlots.dynamic.isExist()) {
-            decoder.decode(scopeSlots.dynamic(scope));
-          }
-
-          const lastIndex = valueList.length - 1;
-          return valueList.map((val, index) => {
-            const selectedOption = decoder.options.find(i => i.props.val === val)?.node;
-            if (!selectedOption) {
-              /*无匹配选项*/
-              return val;
-            }
-            if (props.useOptionRenderNormal) {
-              /*渲染option的渲染内容*/
-              return <Fragment key={val}>{selectedOption.props.children || selectedOption.props.label}</Fragment>;
-            } else {
-              /*仅渲染文本，option的渲染内容仅供下拉的时候展示*/
-              return <Fragment key={val}>{selectedOption.props.label}{index !== lastIndex ? ',' : ''}</Fragment>;
-            }
-          });
-        },
-        edit: ({ row, plc, node }) => !plc.props.field ? null : (
-          <Select
-            v-model={row[plc.props.field]}
-            multiple={props.multiple}
-            valueType={props.valueType}
-            v-slots={{
-              default: () => {
-                if (scopeSlots.dynamic.isExist()) {
-                  /*动态选项*/
-                  return scopeSlots.dynamic({ row, plc, node });
-                } else if (slots.default.isExist()) {
-                  /*静态选项*/
-                  return slots.default();
-                }
-              }
-            }}
-          />
-        ),
-      }
-    });
-
-    return {
-      refer,
-      render: () => {
-        if (slots.default.isExist()) {
-          /*解析静态选项*/
-          selectOptionDecoder.decode(slots.default());
-        }
-        return render();
-      }
-    };
-  },
-});
+import {createPlcPropOptions, PlcEmitsOptions} from "../plc/utils/plc.utils";
+import {computed, designComponent, Fragment} from "plain-design-composition";
+import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
+import {usePlc} from "../plc/use/usePlc";
+import {Select} from "../../Select";
+import {createSelectOptionDecoder} from "../../Select/createSelectOptionDecoder";
+import {iTableCellRenderScope} from "../table/utils/table.utils";
+import {SelectPropOptions} from "../../Select/select.utils";
+import {eMultipleValueType} from "../../../uses/useMultipleModel";
+import {iFilterConfigSelect} from "../../FilterService/filter/filter.select";
+import {injectPlainTable} from "../table/Table";
+
+export const PlcSelect = designComponent({
+  name: 'plc-select',
+  props: {
+    ...createPlcPropOptions({
+      filterType: 'select',
+      filterHandler: 'in',
+    }),
+    multiple: SelectPropOptions.multiple,
+    valueType: SelectPropOptions.valueType,
+    useOptionRenderNormal: { type: Boolean },
+  },
+  scopeSlots: {
+    ...PlcScopeSlotsOptions,
+    dynamic: (cellRenderScope: iTableCellRenderScope) => {},
+  },
+  emits: PlcEmitsOptions,
+  slots: ['default'],
+  setup({ props, scopeSlots, event, slots }) {
+
+    const table = injectPlainTable();
+
+    const selectOptionDecoder = createSelectOptionDecoder();
+
+    /**
+     * 当使用dynamic插槽渲染每一个选项时，每一行都应该有自己的decoder，公用一个decoder会导致renderKey一直刷新
+     * @author  韦胜健
+     * @date    2023.1.25 16:18
+     */
+    const dynamicOptionDecoderList = computed(() => {
+      return (table.dataRef.value.data || []).map(() => {
+        if (!scopeSlots.dynamic.isExist()) {
+          return selectOptionDecoder;
+        } else {
+          return createSelectOptionDecoder();
+        }
+      });
+    });
+
+    const filterConfig = computed((): iFilterConfigSelect => {
+      return {
+        renderOptions: () => slots.default(),
+        ...props.filterConfig,
+      };
+    });
+
+    const utils = {
+      /**
+       * 多选时将值转化为数组对象
+       * @author  韦胜健
+       * @date    2022.12.4 15:29
+       */
+      getArrayValue: (value: any): any[] | null | undefined => {
+        if (value == null) {return value;}
+        if (Array.isArray(value)) {
+          return value;
+        }
+        if (typeof value === "string") {
+          if (props.valueType === eMultipleValueType.arrayjson) {
+            return JSON.parse(value);
+          } else {
+            return value.split(',');
+          }
+        }
+      },
+      /**
+       * 值格式化为显示值，用于前端静态导出显示内容
+       * @author  韦胜健
+       * @date    2022.12.4 11:55
+       */
+      labelFormatter: (value: any): string | number | null | undefined => {
+        if (value == null) {return value;}
+        if (!props.multiple) {
+          const item = selectOptionDecoder.options.find(i => i.props.val === value);
+          return !!item ? item.props.label : value;
+        } else {
+          const arrayValue = utils.getArrayValue(value);
+          if (!arrayValue) {return null;}
+          return arrayValue.map(itemValue => {
+            const item = selectOptionDecoder.options.find(i => i.props.val === itemValue);
+            return !!item ? item.props.label : itemValue;
+          }).join(',');
+        }
+      },
+    };
+
+    const { refer, render } = usePlc({
+      props,
+      slots,
+      scopeSlots,
+      event,
+      proxyPropsConfig: {
+        formatter: () => {
+          if (slots.default.isExist()) {
+            return utils.labelFormatter;
+          }
+        },
+        filterConfig: () => filterConfig.value,
+      },
+      defaultScopeSlots: {
+        summary: () => null,
+        normal: (scope) => {
+
+          const decoder = dynamicOptionDecoderList.value[scope.node.state.index];
+
+          /*没有绑定字段，不渲染内容*/
+          if (!props.field || !decoder || !decoder.isRender()) {return null;}
+          /*原始值*/
+          const sourceValue = scope.row[props.field];
+          if (sourceValue == null) {return null;}
+          /*目标值，无论如何格式化为数组展示*/
+          const valueList = props.multiple ? utils.getArrayValue(sourceValue) : [sourceValue];
+          if (!valueList) {return null;}
+
+          /*动态选项，每次render normal cell都decode解析scopeSlots.dynamic一遍，根据每次解析的内容计算显示值*/
+          /*否贼为静态选项，只有渲染plc的时候，只解析一遍slots.default*/
+          if (scopeSlots.dynamic.isExist()) {
+            decoder.decode(scopeSlots.dynamic(scope));
+          }
+
+          const lastIndex = valueList.length - 1;
+          return valueList.map((val, index) => {
+            const selectedOption = decoder.options.find(i => i.props.val === val)?.node;
+            if (!selectedOption) {
+              /*无匹配选项*/
+              return val;
+            }
+            if (props.useOptionRenderNormal) {
+              /*渲染option的渲染内容*/
+              return <Fragment key={val}>{selectedOption.props.children || selectedOption.props.label}</Fragment>;
+            } else {
+              /*仅渲染文本，option的渲染内容仅供下拉的时候展示*/
+              return <Fragment key={val}>{selectedOption.props.label}{index !== lastIndex ? ',' : ''}</Fragment>;
+            }
+          });
+        },
+        edit: ({ row, plc, node }) => !plc.props.field ? null : (
+          <Select
+            v-model={row[plc.props.field]}
+            multiple={props.multiple}
+            valueType={props.valueType}
+            v-slots={{
+              default: () => {
+                if (scopeSlots.dynamic.isExist()) {
+                  /*动态选项*/
+                  return scopeSlots.dynamic({ row, plc, node });
+                } else if (slots.default.isExist()) {
+                  /*静态选项*/
+                  return slots.default();
+                }
+              }
+            }}
+          />
+        ),
+      }
+    });
+
+    return {
+      refer,
+      render: () => {
+        if (slots.default.isExist()) {
+          /*解析静态选项*/
+          selectOptionDecoder.decode(slots.default());
+        }
+        return render();
+      }
+    };
+  },
+});