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

package/src/packages/components/Table/standard/PlcCheck/PlcCheck.single.tsx

@@ -1,89 +1,89 @@
-import {iPlcCheckEventType, iPlcCheckPropsType} from "./PlcCheck.utils";
-import {createEffectsOfReaction, useModel} from "@peryl/react-compose";
-import {PlainObject} from "@peryl/utils/event";
-import {iTableRowRenderScope} from "../../table/utils/table.utils";
-import {Radio} from "../../../Radio";
-import {CheckboxStatus} from "../../../../utils/constant";
-import {iPlcCheckHooks} from "./PlcCheck.hooks";
-import {iTableRefer} from "../../table/Table";
-
-export function usePlcCheckSingle(
-  {
-    props,
-    event,
-    hooks,
-    table,
-  }: {
-    props: iPlcCheckPropsType,
-    event: iPlcCheckEventType,
-    hooks: iPlcCheckHooks,
-    table: iTableRefer,
-  }
-) {
-
-  const { effects } = createEffectsOfReaction();
-
-  /**
-   * 双向绑定值
-   * @author  韦胜健
-   * @date    2022.11.27 16:36
-   */
-  const model = useModel(() => props.modelValue as PlainObject | null | undefined, event.emit.onUpdateModelValue as any, undefined, effects);
-
-  const utils = {
-    /**
-     * 判断节点是否选中
-     * @author  韦胜健
-     * @date    2022.11.27 17:14
-     */
-    isChecked: (row: PlainObject) => {
-      return model.value?.[props.field] === row[props.field];
-    },
-  };
-
-  const methods = {
-    check: (row: PlainObject) => {
-      model.value = row;
-    },
-    toggleCheck: (row: PlainObject) => {
-      methods.check(row);
-    },
-  };
-
-  const handler = {
-    onClickCheckbox: (rowRenderScope: iTableRowRenderScope) => {
-      // /*并且判断为不可选中的话，如果已经选中则取消选中，未选中则不处理任何动作???todo*/
-      if (!!props.isCheckAble && !props.isCheckAble(rowRenderScope) && !utils.isChecked(rowRenderScope.row)) {
-        return;
-      }
-      methods.toggleCheck(rowRenderScope.row);
-    },
-  };
-
-  effects.push(hooks.onGetSelected.use(() => model.value));
-
-  effects.push(hooks.onClickRow.use(({ rowRenderScope }) => {
-    handler.onClickCheckbox(rowRenderScope);
-  }));
-
-  effects.push(hooks.onRenderHead.use(() => ('')));
-
-  effects.push(hooks.onRenderNormal.use(({ scope }) => ({
-    scope,
-    content: (
-      <Radio
-        checkStatus={utils.isChecked(scope.row) ? CheckboxStatus.check : CheckboxStatus.uncheck}
-        customReadonly
-        onClick={() => !props.toggleOnClickRow && handler.onClickCheckbox(scope)}
-      />
-    )
-  })));
-
-  effects.push(table.hooks.onRowClass.use(({ classList, node }) => {
-    if (utils.isChecked(node.data)) {
-      classList.push('plt-row-checked');
-    }
-  }));
-
-  return effects.clear;
-}
+import {iPlcCheckEventType, iPlcCheckPropsType} from "./PlcCheck.utils";
+import {createEffectsOfReaction, useModel} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
+import {iTableRowRenderScope} from "../../table/utils/table.utils";
+import {Radio} from "../../../Radio";
+import {CheckboxStatus} from "../../../../utils/constant";
+import {iPlcCheckHooks} from "./PlcCheck.hooks";
+import {iTableRefer} from "../../table/Table";
+
+export function usePlcCheckSingle(
+  {
+    props,
+    event,
+    hooks,
+    table,
+  }: {
+    props: iPlcCheckPropsType,
+    event: iPlcCheckEventType,
+    hooks: iPlcCheckHooks,
+    table: iTableRefer,
+  }
+) {
+
+  const { effects } = createEffectsOfReaction();
+
+  /**
+   * 双向绑定值
+   * @author  韦胜健
+   * @date    2022.11.27 16:36
+   */
+  const model = useModel(() => props.modelValue as PlainObject | null | undefined, event.emit.onUpdateModelValue as any, undefined, effects);
+
+  const utils = {
+    /**
+     * 判断节点是否选中
+     * @author  韦胜健
+     * @date    2022.11.27 17:14
+     */
+    isChecked: (row: PlainObject) => {
+      return model.value?.[props.field] === row[props.field];
+    },
+  };
+
+  const methods = {
+    check: (row: PlainObject) => {
+      model.value = row;
+    },
+    toggleCheck: (row: PlainObject) => {
+      methods.check(row);
+    },
+  };
+
+  const handler = {
+    onClickCheckbox: (rowRenderScope: iTableRowRenderScope) => {
+      // /*并且判断为不可选中的话，如果已经选中则取消选中，未选中则不处理任何动作???todo*/
+      if (!!props.isCheckAble && !props.isCheckAble(rowRenderScope) && !utils.isChecked(rowRenderScope.row)) {
+        return;
+      }
+      methods.toggleCheck(rowRenderScope.row);
+    },
+  };
+
+  effects.push(hooks.onGetSelected.use(() => model.value));
+
+  effects.push(hooks.onClickRow.use(({ rowRenderScope }) => {
+    handler.onClickCheckbox(rowRenderScope);
+  }));
+
+  effects.push(hooks.onRenderHead.use(() => ('')));
+
+  effects.push(hooks.onRenderNormal.use(({ scope }) => ({
+    scope,
+    content: (
+      <Radio
+        checkStatus={utils.isChecked(scope.row) ? CheckboxStatus.check : CheckboxStatus.uncheck}
+        customReadonly
+        onClick={() => !props.toggleOnClickRow && handler.onClickCheckbox(scope)}
+      />
+    )
+  })));
+
+  effects.push(table.hooks.onRowClass.use(({ classList, node }) => {
+    if (utils.isChecked(node.data)) {
+      classList.push('plt-row-checked');
+    }
+  }));
+
+  return effects.clear;
+}

package/src/packages/components/Table/standard/PlcCheck/PlcCheck.tsx

@@ -1,61 +1,61 @@
-import {designComponent} from "@peryl/react-compose";
-import {PlcScopeSlotsOptions} from "../../plc/utils/plc.scope-slots";
-import {usePlc} from "../../plc/use/usePlc";
-import {injectPlainTable} from "../../table/Table";
-import {PlcCheckEmitsOptions, PlcCheckPropsOptions} from "./PlcCheck.utils";
-import {useWatchAutoClear} from "../../../../utils/watchEffectAutoClear";
-import {createPlcCheckHooks} from "./PlcCheck.hooks";
-import {usePlcCheckMultiple} from "./PlcCheck.multiple";
-import {usePlcCheckSingle} from "./PlcCheck.single";
-import {doNothing} from "@peryl/utils/doNothing";
-
-export const PlcCheck = designComponent({
-  name: 'plc-check',
-  props: PlcCheckPropsOptions,
-  emits: PlcCheckEmitsOptions,
-  scopeSlots: PlcScopeSlotsOptions,
-  setup({ props, scopeSlots, slots, event }) {
-
-    const methods = {
-      checkAll: () => hooks.onTriggerCheckAll.exec(undefined),
-      uncheckAll: () => hooks.onTriggerUncheckAll.exec(undefined),
-      getSelected: () => hooks.onGetSelected.exec([]),
-    };
-
-    const table = injectPlainTable();
-
-    const hooks = createPlcCheckHooks();
-
-    const params = {
-      props,
-      event,
-      hooks,
-      table,
-    };
-
-    const { refer, render } = usePlc({
-      props, scopeSlots, slots, event, defaultScopeSlots: {
-        head: () => hooks.onRenderHead.exec(null),
-        normal: (rowRenderScope) => hooks.onRenderNormal.exec({ scope: rowRenderScope, content: null }).content,
-        summary: () => '',
-      },
-      externalRefer: {
-        ...methods,
-      },
-    });
-
-    useWatchAutoClear(() => props.multiple, multiple => {
-      return refer.isExclude() ? doNothing : (multiple ? usePlcCheckMultiple(params) : usePlcCheckSingle(params));
-    });
-
-    useWatchAutoClear(() => props.toggleOnClickRow && !refer.isExclude(), toggleOnClickRow => {
-      return !!toggleOnClickRow ? table.hooks.onClickRow.use(({ node }) => {hooks.onClickRow.exec({ rowRenderScope: { node, row: node.data } });}) : doNothing;
-    });
-
-    return {
-      refer,
-      render,
-    };
-  },
-});
-
+import {designComponent} from "@peryl/react-compose";
+import {PlcScopeSlotsOptions} from "../../plc/utils/plc.scope-slots";
+import {usePlc} from "../../plc/use/usePlc";
+import {injectPlainTable} from "../../table/Table";
+import {PlcCheckEmitsOptions, PlcCheckPropsOptions} from "./PlcCheck.utils";
+import {useWatchAutoClear} from "../../../../utils/watchEffectAutoClear";
+import {createPlcCheckHooks} from "./PlcCheck.hooks";
+import {usePlcCheckMultiple} from "./PlcCheck.multiple";
+import {usePlcCheckSingle} from "./PlcCheck.single";
+import {doNothing} from "@peryl/utils/doNothing";
+
+export const PlcCheck = designComponent({
+  name: 'plc-check',
+  props: PlcCheckPropsOptions,
+  emits: PlcCheckEmitsOptions,
+  scopeSlots: PlcScopeSlotsOptions,
+  setup({ props, scopeSlots, slots, event }) {
+
+    const methods = {
+      checkAll: () => hooks.onTriggerCheckAll.exec(undefined),
+      uncheckAll: () => hooks.onTriggerUncheckAll.exec(undefined),
+      getSelected: () => hooks.onGetSelected.exec([]),
+    };
+
+    const table = injectPlainTable();
+
+    const hooks = createPlcCheckHooks();
+
+    const params = {
+      props,
+      event,
+      hooks,
+      table,
+    };
+
+    const { refer, render } = usePlc({
+      props, scopeSlots, slots, event, defaultScopeSlots: {
+        head: () => hooks.onRenderHead.exec(null),
+        normal: (rowRenderScope) => hooks.onRenderNormal.exec({ scope: rowRenderScope, content: null }).content,
+        summary: () => '',
+      },
+      externalRefer: {
+        ...methods,
+      },
+    });
+
+    useWatchAutoClear(() => props.multiple, multiple => {
+      return refer.isExclude() ? doNothing : (multiple ? usePlcCheckMultiple(params) : usePlcCheckSingle(params));
+    });
+
+    useWatchAutoClear(() => props.toggleOnClickRow && !refer.isExclude(), toggleOnClickRow => {
+      return !!toggleOnClickRow ? table.hooks.onClickRow.use(({ node }) => {hooks.onClickRow.exec({ rowRenderScope: { node, row: node.data } });}) : doNothing;
+    });
+
+    return {
+      refer,
+      render,
+    };
+  },
+});
+

package/src/packages/components/Table/standard/PlcCheck/PlcCheck.utils.ts

@@ -1,35 +1,35 @@
-import {omit} from "@peryl/utils/omit";
-import {createPlcPropOptions, PlcEmitsOptions} from "../../plc/utils/plc.utils";
-import {ComponentEvent, ExtractPropTypes, PropType,} from "@peryl/react-compose";
-import {PlainObject} from "@peryl/utils/event";
-import {iTableRowRenderScope} from "../../table/utils/table.utils";
-
-export const PlcCheckPropsOptions = {
-  ...omit(createPlcPropOptions({
-    autoFixedLeft: true,
-    order: -9998,
-    width: 45,
-    align: 'center',
-    noPadding: true,
-    hideInForm: true,
-    noFilter: true,
-    noSort: true,
-  }), ['field']),
-  multiple: { type: Boolean, default: true }, // 是否为多选
-  field: { type: String, required: true }, // 行数据唯一标识字段名称
-  modelValue: { type: [Object, Array] as PropType<PlainObject | PlainObject[]> }, // 选中绑定值
-  isCheckAble: { type: Function as PropType<(rowRenderScope: iTableRowRenderScope) => boolean> }, // 判断行是否可以选中
-  toggleOnClickRow: { type: Boolean }, // 点击行的时候切换选中状态
-
-  hideShowAllButton: { type: Boolean }, // 是否显示查看全部按钮
-  // ignorePlcCheckHidden: { type: Boolean }, // 忽略PlcCheckHidden上下文
-} as const;
-
-export type iPlcCheckPropsType = ExtractPropTypes<typeof PlcCheckPropsOptions>
-
-export const PlcCheckEmitsOptions = {
-  ...PlcEmitsOptions,
-  onUpdateModelValue: (val?: PlainObject | PlainObject[]) => true,
-};
-
-export type iPlcCheckEventType = ComponentEvent<typeof PlcCheckEmitsOptions>
+import {omit} from "@peryl/utils/omit";
+import {createPlcPropOptions, PlcEmitsOptions} from "../../plc/utils/plc.utils";
+import {ComponentEvent, ExtractPropTypes, PropType,} from "@peryl/react-compose";
+import {PlainObject} from "@peryl/utils/event";
+import {iTableRowRenderScope} from "../../table/utils/table.utils";
+
+export const PlcCheckPropsOptions = {
+  ...omit(createPlcPropOptions({
+    autoFixedLeft: true,
+    order: -9998,
+    width: 45,
+    align: 'center',
+    noPadding: true,
+    hideInForm: true,
+    noFilter: true,
+    noSort: true,
+  }), ['field']),
+  multiple: { type: Boolean, default: true }, // 是否为多选
+  field: { type: String, required: true }, // 行数据唯一标识字段名称
+  modelValue: { type: [Object, Array] as PropType<PlainObject | PlainObject[]> }, // 选中绑定值
+  isCheckAble: { type: Function as PropType<(rowRenderScope: iTableRowRenderScope) => boolean> }, // 判断行是否可以选中
+  toggleOnClickRow: { type: Boolean }, // 点击行的时候切换选中状态
+
+  hideShowAllButton: { type: Boolean }, // 是否显示查看全部按钮
+  // ignorePlcCheckHidden: { type: Boolean }, // 忽略PlcCheckHidden上下文
+} as const;
+
+export type iPlcCheckPropsType = ExtractPropTypes<typeof PlcCheckPropsOptions>
+
+export const PlcCheckEmitsOptions = {
+  ...PlcEmitsOptions,
+  onUpdateModelValue: (val?: PlainObject | PlainObject[]) => true,
+};
+
+export type iPlcCheckEventType = ComponentEvent<typeof PlcCheckEmitsOptions>

package/src/packages/components/Table/standard/PlcDraggier/PlcDraggier.tsx

@@ -1,55 +1,55 @@
-import {designComponent, onBeforeUnmount, PropType, useModel} 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 {PlainObject} from "@peryl/utils/event";
-import {Icon} from "../../../Icon";
-import {injectPlainTable} from "../../table/Table";
-
-export const PlcDraggier = designComponent({
-  name: 'plc-draggier',
-  props: {
-    modelValue: { type: Array as PropType<PlainObject[]> },
-    ...createPlcPropOptions({
-      autoFixedLeft: true,
-      order: -9999,
-      width: 45,
-      align: 'center',
-      noPadding: true,
-      hideInForm: true,
-      noFilter: true,
-      noSort: true,
-    }),
-  },
-  emits: {
-    ...PlcEmitsOptions,
-    onUpdateModelValue: (val?: PlainObject[]) => true,
-  },
-  scopeSlots: PlcScopeSlotsOptions,
-  setup({ props, slots, scopeSlots, event }) {
-
-    /*双向绑定列表数据*/
-    const model = useModel(() => props.modelValue, event.emit.onUpdateModelValue);
-
-    /*表格父组件*/
-    const table = injectPlainTable();
-
-    onBeforeUnmount(
-      table.event.on.onUpdateData(val => {model.value = val as any;})
-    );
-
-    return usePlc({
-      props, slots, scopeSlots, event, defaultScopeSlots: {
-        normal: (cellRenderScope) => (
-          <div
-            className="plc-draggier-cell"
-            onMouseDown={e => table.tableDraggier.rowDraggier.handler.onMousedown(e, cellRenderScope.node)}
-          >
-            <Icon icon="pi-menu"/>
-          </div>
-        ),
-        summary: () => null,
-      }
-    });
-  },
-});
+import {designComponent, onBeforeUnmount, PropType, useModel} 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 {PlainObject} from "@peryl/utils/event";
+import {Icon} from "../../../Icon";
+import {injectPlainTable} from "../../table/Table";
+
+export const PlcDraggier = designComponent({
+  name: 'plc-draggier',
+  props: {
+    modelValue: { type: Array as PropType<PlainObject[]> },
+    ...createPlcPropOptions({
+      autoFixedLeft: true,
+      order: -9999,
+      width: 45,
+      align: 'center',
+      noPadding: true,
+      hideInForm: true,
+      noFilter: true,
+      noSort: true,
+    }),
+  },
+  emits: {
+    ...PlcEmitsOptions,
+    onUpdateModelValue: (val?: PlainObject[]) => true,
+  },
+  scopeSlots: PlcScopeSlotsOptions,
+  setup({ props, slots, scopeSlots, event }) {
+
+    /*双向绑定列表数据*/
+    const model = useModel(() => props.modelValue, event.emit.onUpdateModelValue);
+
+    /*表格父组件*/
+    const table = injectPlainTable();
+
+    onBeforeUnmount(
+      table.event.on.onUpdateData(val => {model.value = val as any;})
+    );
+
+    return usePlc({
+      props, slots, scopeSlots, event, defaultScopeSlots: {
+        normal: (cellRenderScope) => (
+          <div
+            className="plc-draggier-cell"
+            onMouseDown={e => table.tableDraggier.rowDraggier.handler.onMousedown(e, cellRenderScope.node)}
+          >
+            <Icon icon="pi-menu"/>
+          </div>
+        ),
+        summary: () => null,
+      }
+    });
+  },
+});

package/src/packages/components/Table/standard/PlcExclusion.tsx

@@ -1,26 +1,26 @@
-import {designComponent, PropType} from "@peryl/react-compose";
-import {tPlc} from "../plc/utils/plc.utils";
-import {createCounter} from "@peryl/utils/createCounter";
-
-export const PlcExclusion = designComponent({
-  name: 'plc-exclusion',
-  provideRefer: true,
-  props: {
-    isExclude: { type: Function as PropType<(plc: tPlc) => boolean>, required: true },
-  },
-  slots: ['default'],
-  setup({ props, slots }) {
-    return {
-      refer: {
-        props,
-      },
-      render: () => {
-        return slots.default();
-      }
-    };
-  },
-});
-
-export default PlcExclusion;
-
-export const nextPlcExcludeCode = createCounter('plc_exclude');
+import {designComponent, PropType} from "@peryl/react-compose";
+import {tPlc} from "../plc/utils/plc.utils";
+import {createCounter} from "@peryl/utils/createCounter";
+
+export const PlcExclusion = designComponent({
+  name: 'plc-exclusion',
+  provideRefer: true,
+  props: {
+    isExclude: { type: Function as PropType<(plc: tPlc) => boolean>, required: true },
+  },
+  slots: ['default'],
+  setup({ props, slots }) {
+    return {
+      refer: {
+        props,
+      },
+      render: () => {
+        return slots.default();
+      }
+    };
+  },
+});
+
+export default PlcExclusion;
+
+export const nextPlcExcludeCode = createCounter('plc_exclude');