plain-design 0.0.97 → 1.0.0-beta.10

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

@@ -0,0 +1,61 @@
+import {designComponent} from "plain-design-composition";
+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 "../../../../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

@@ -0,0 +1,35 @@
+import {omit} from "../../../../utils/omit";
+import {createPlcPropOptions, PlcEmitsOptions} from "../../plc/utils/plc.utils";
+import {ComponentEvent, ExtractPropTypes, PropType,} from "plain-design-composition";
+import {PlainObject} from "plain-utils/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

@@ -0,0 +1,55 @@
+import {designComponent, onBeforeUnmount, PropType, useModel} 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 {PlainObject} from "plain-utils/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

@@ -0,0 +1,26 @@
+import {designComponent, PropType} from "plain-design-composition";
+import {tPlc} from "../plc/utils/plc.utils";
+import {createCounter} from "plain-utils/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');

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

@@ -0,0 +1,206 @@
+import {classnames, computed, designComponent, onBeforeUnmount, reactive, toRaw, useStyles} from "plain-design-composition";
+import {createPlcPropOptions, PlcEmitsOptions} from "../plc/utils/plc.utils";
+import {iTableNode} from "../table/utils/table.utils";
+import {PlcScopeSlotsOptions} from "../plc/utils/plc.scope-slots";
+import {PlainObject} from "plain-utils/utils/event";
+import {injectPlainTable} from "../table/Table";
+import {usePlc} from "../plc/use/usePlc";
+import {Dropdown} from "../../Dropdown";
+import {Icon} from "../../Icon";
+import {DropdownOption} from "../../DropdownOption";
+import i18n from "../../i18n";
+
+export const PlcExpand = designComponent({
+  name: 'plc-expand',
+  props: {
+    ...createPlcPropOptions({
+      autoFixedLeft: true,
+      order: -9997,
+      width: 45,
+      align: 'center',
+      noPadding: true,
+      hideInForm: true,
+      noFilter: true,
+      noSort: true,
+    }),
+    toggleOnClickRow: { type: Boolean },          // 点击行的时候展开收起
+    fixedWidth: { type: Boolean },                // 固定展开内容的宽度
+  },
+  emits: {
+    ...PlcEmitsOptions,
+    onExpand: (node: iTableNode) => true,
+  },
+  scopeSlots: {
+    ...PlcScopeSlotsOptions,
+    expand: (scope: { node: iTableNode, row: PlainObject }) => null,
+  },
+  setup({ props, event, slots, scopeSlots }) {
+
+    const table = injectPlainTable();
+
+    const state = reactive({
+      expandData: [] as PlainObject[]
+    });
+
+    /*实时计算出来总列数*/
+    const totalSpan = computed(() => !table.plcData.value ? 1 : table.bodyPlcList.value?.length || 0);
+
+    const expandStyles = useStyles((styles) => {
+      if (!!props.fixedWidth) {
+        styles.width = `${table.plcData.value!.tableWidth - 20}px`;
+      }
+    });
+
+    const utils = {
+      /**
+       * 判断节点是否已经展开
+       * @author  韦胜健
+       * @date    2022/11/17 10:46
+       */
+      isExpand: (data: PlainObject): boolean => {
+        return !!state.expandData.find(i => toRaw(i) === toRaw(data));
+      },
+      /**
+       * 渲染展开内容
+       * @author  韦胜健
+       * @date    2022/11/17 10:46
+       */
+      renderExpand: (node: iTableNode) => {
+        return (
+          <tr className="plt-row plt-expand-row" key={`expand_${node.state.index}`}>
+            <td className="plt-cell" rowSpan={1} colSpan={totalSpan.value}>
+              <div className="plt-expand-body" style={expandStyles.value}>
+                {scopeSlots.expand({ node, row: node.data })}
+              </div>
+            </td>
+          </tr>
+        );
+      }
+    };
+
+    const methods = {
+      /**
+       * 展开节点
+       * @author  韦胜健
+       * @date    2022/11/17 10:46
+       */
+      expand: (data: PlainObject) => {
+        if (utils.isExpand(data)) {return;}
+        state.expandData.push(data);
+      },
+      /**
+       * 收起节点
+       * @author  韦胜健
+       * @date    2022/11/17 10:46
+       */
+      collapse: (data: PlainObject) => {
+        const index = state.expandData.findIndex(i => toRaw(i) === toRaw(data));
+        if (index === -1) {return;}
+        state.expandData.splice(index, 1);
+      },
+      /**
+       * 展开/收起节点
+       * @author  韦胜健
+       * @date    2022/11/17 10:46
+       */
+      toggle: (data: PlainObject) => {
+        if (utils.isExpand(data)) {
+          methods.collapse(data);
+        } else {
+          methods.expand(data);
+        }
+      },
+      /**
+       * 展开所有节点
+       * @author  韦胜健
+       * @date    2022/11/17 10:46
+       */
+      expandAll: () => {
+        state.expandData = [...table.props.data || []];
+      },
+      /**
+       * 收起所有节点
+       * @author  韦胜健
+       * @date    2022/11/17 10:47
+       */
+      collapseAll: () => {
+        state.expandData = [];
+      },
+    };
+
+    /**
+     * 不允许启用行虚拟滚动
+     * @author  韦胜健
+     * @date    2022/11/17 13:56
+     */
+    onBeforeUnmount(table.hooks.onEnableVirtual.use(() => false));
+
+    /**
+     * 拦截行渲染
+     * @author  韦胜健
+     * @date    2022/11/17 14:15
+     */
+    onBeforeUnmount(table.hooks.onRenderRow.use((scope) => {
+      const { node, row, content } = scope;
+      if (!utils.isExpand(row)) {return;}
+      return {
+        node,
+        row,
+        content: <>
+          {content}
+          {utils.renderExpand(node)}
+        </>
+      };
+    }));
+
+    /**
+     * 点击行的时候展开收起
+     * @author  韦胜健
+     * @date    2022/11/17 14:32
+     */
+    onBeforeUnmount(table.hooks.onClickCell.use(({ node }) => {
+      !!props.toggleOnClickRow && methods.toggle(node.data);
+    }));
+
+    const { render, refer } = usePlc({
+      props,
+      scopeSlots,
+      event,
+      slots,
+      defaultScopeSlots: {
+        head: () => (
+          <Dropdown arrowSize={0}>
+            {{
+              reference: () => (
+                <div className="cell-fit-height cell-align-center">
+                  <Icon icon="pi-more"/>
+                </div>
+              ),
+              popper: () => <>
+                <DropdownOption label={i18n('base.edit.expandAll').d('全部展开')} icon="pi-expand" onClick={methods.expandAll}/>
+                <DropdownOption label={i18n('base.edit.collapseAll').d('全部收起')} icon="pi-shrink" onClick={methods.collapseAll}/>
+              </>
+            }}
+          </Dropdown>
+        ),
+        normal: ({ node }) => {
+          const isExpand = utils.isExpand(node.data);
+          return (
+            <span className={classnames(['plc-expand-button', { 'plc-expand-active': isExpand }])} onClick={() => methods[isExpand ? 'collapse' : 'expand'](node.data)}>
+              <Icon icon={isExpand ? 'pi-down' : 'pi-caret-right'}/>
+            </span>
+          );
+        },
+        summary: () => '',
+      },
+      externalRefer: {
+        utils,
+      },
+    });
+
+    return {
+      refer,
+      render,
+    };
+  },
+});

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

@@ -0,0 +1,34 @@
+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 i18n from "../../i18n";
+
+export const PlcIndex = designComponent({
+  name: 'plc-index',
+  props: {
+    ...createPlcPropOptions({
+      autoFixedLeft: true,
+      order: -9995,
+      width: 45,
+      align: 'center',
+      noPadding: true,
+      hideInForm: true,
+      noFilter: true,
+      noSort: true,
+    }),
+    summaryText: { type: String, default: () => i18n('base.edit.summary').d('合计') },
+    start: { type: Number, default: 0 },
+  },
+  scopeSlots: PlcScopeSlotsOptions,
+  emits: PlcEmitsOptions,
+  setup({ props, slots, scopeSlots, event }) {
+    return usePlc({
+      props, scopeSlots, event, slots, defaultScopeSlots: {
+        head: () => '#',
+        normal: ({ node }) => props.start + node.state.index + 1,
+        summary: () => <span className="plc-index-summary-text">{props.summaryText}</span>,
+      }
+    });
+  },
+});

package/src/packages/components/Table/standard/PlcOperation/OuterOperation.tsx

@@ -0,0 +1,208 @@
+import {computed, designComponent, getComponentCls, PropType, reactive, RenderNode, useClasses} from "plain-design-composition";
+import {eTableOperationPosition, iTableOperation, iTableOperationPermitConfig, iTableOuterOperation, iTableOuterOperationConfig, TableOperationDefaultTypeSeq} from "./PlcOperation.utils";
+import {Button} from "../../../Button";
+import {ButtonGroup} from "../../../ButtonGroup";
+import {DropdownOption} from "../../../DropdownOption";
+import {Dropdown} from "../../../Dropdown";
+import './outer-operation.scss';
+import {iOperationPermission, useOperationPermission} from "./useOperationPermission";
+import {iTableOptionKeyboard} from "../../../AutoTable/use/useTableOptionKeyboard";
+import {createEffects} from "plain-utils/utils/createEffects";
+import {Tooltip} from "../../../Tooltip";
+import i18n from "../../../i18n";
+
+export const OuterOperation = designComponent({
+  name: 'outer-operation',
+  props: {
+    keyboard: { type: Object as PropType<iTableOptionKeyboard> },         // 键盘事件
+    permit: { type: [Object, Function] as PropType<iTableOperationPermitConfig | (() => iOperationPermission)> },    // 权限控制
+    operations: { type: Array as PropType<iTableOperation[]> },           // 外部按钮以及操作列按钮
+    collapseLength: { type: Number, default: 4 },                         // 最多显示按钮的数量，超过会折叠下拉显示
+    processOuterOperations: { type: Function as PropType<(buttons: iTableOuterOperationConfig[]) => void | iTableOuterOperationConfig[]> }, // 处理外置按钮
+  },
+  slots: ['leftOperation'],
+  setup({ props, slots }) {
+
+    const classes = useClasses(() => [
+      getComponentCls('outer-operation'),
+      'table-operation-bar',
+    ]);
+
+    const state = reactive({
+      dropdown: {
+        show: false,
+        operation: null as null | iTableOuterOperation,
+        onClickDropdownOption: (operation: iTableOuterOperation) => {
+          state.dropdown.operation = operation;
+          operation.handler?.();
+        },
+      },
+    });
+
+    const permission = (() => {
+      const { permit } = props;
+      if (!!permit && typeof permit === "function") {
+        return permit();
+      } else {
+        return useOperationPermission(() => props.permit as iTableOperationPermitConfig);
+      }
+    })();
+
+    const { effects: keyboardEffects } = createEffects();
+
+    /**
+     * 计算外部按钮
+     * @author  韦胜健
+     * @date    2022/11/23 17:29
+     */
+    const outerOperations = computed((): iTableOuterOperation[] => {
+      keyboardEffects.clear();
+
+      let operations: iTableOuterOperation[] = [];
+      let outerOperationConfigs: iTableOuterOperationConfig[] = props.operations?.filter(i => !i.position || i.position === eTableOperationPosition.outer) as any;
+      outerOperationConfigs = props.processOuterOperations?.(outerOperationConfigs) || outerOperationConfigs || [];
+      outerOperationConfigs.forEach(i => {
+        const { position, handler, keyboard, render } = i;
+        const type = typeof i.type === "function" ? i.type() : i.type || 'other';
+        const operation: iTableOuterOperation = {
+          label: typeof i.label === "function" ? i.label() : i.label,
+          show: typeof i.show === "function" ? i.show() : i.show !== false,
+          seq: typeof i.seq === "function" ? i.seq() : i.seq || TableOperationDefaultTypeSeq[type],
+          code: typeof i.code === "function" ? i.code() : i.code || `${position}-${type}`,
+          buttonAttrs: typeof i.buttonAttrs === "function" ? i.buttonAttrs() : i.buttonAttrs || undefined,
+          type,
+          disabled: typeof i.disabled === "function" ? i.disabled() : !!i.disabled,
+          position,
+          handler,
+          mode: typeof i.mode === "function" ? i.mode() : i.mode,
+          status: typeof i.status === "function" ? i.status() : i.status,
+          icon: typeof i.icon === "function" ? i.icon() : i.icon,
+          keyboard,
+          render,
+        };
+        if (
+          permission.permit.value.disabled[operation.type] ||
+          permission.permit.value.disabled.codes[operation.code]
+        ) {
+          operation.disabled = true;
+        }
+        if (
+          !permission.permit.value.show[operation.type] ||
+          permission.permit.value.show.codes[operation.code] === false
+        ) {
+          operation.show = false;
+        }
+        operations.push(operation);
+
+        !!props.keyboard && operation.keyboard && keyboardEffects.push(
+          props.keyboard.on(operation.keyboard, () => {
+            if (!operation.show || operation.disabled) {return;}
+            operation.handler?.();
+          })
+        );
+      });
+      return operations.filter(i => i.show);
+    });
+
+    return () => {
+      if (!slots.leftOperation.isExist() && outerOperations.value.length === 0) {return null;}
+      return (
+        <div className={classes.value}>
+          <div className="table-operation-bar-left">{slots.leftOperation()}</div>
+          <div className="table-operation-bar-right">
+            {(() => {
+              const outerButtonSize = 3;
+              const exposeOuterButtons = outerOperations.value.slice(0, outerButtonSize);
+              const hiddenOuterButtons = outerOperations.value.slice(outerButtonSize);
+              const renderContent: RenderNode[] = [];
+              const exposeOuterButtonsContent = exposeOuterButtons.map(operation => {
+                const btn = operation.render ? operation.render(false) : (
+                  <Button
+                    key={operation.label}
+                    label={operation.label}
+                    onClick={operation.handler}
+                    data-code={operation.code}
+                    data-type={operation.type}
+                    disabled={operation.disabled}
+                    mode={operation.mode}
+                    status={operation.status}
+                    icon={operation.icon}
+                  />
+                );
+                return operation.keyboard ? <Tooltip key={operation.label} message={operation.keyboard}>{btn}</Tooltip> : btn;
+              });
+              exposeOuterButtons.length > 0 && renderContent.push(
+                outerOperations.value.length > outerButtonSize ? (
+                  <ButtonGroup key="button-group">
+                    {exposeOuterButtonsContent}
+                  </ButtonGroup>
+                ) : exposeOuterButtonsContent
+              );
+              if (hiddenOuterButtons.length > 0) {
+                const dropdownOptions = hiddenOuterButtons.map(operation => {
+                  const btn = operation.render ? operation.render(true) : (
+                    <DropdownOption
+                      key={operation.label}
+                      label={operation.label}
+                      onClick={() => state.dropdown.onClickDropdownOption(operation)}
+                      data-code={operation.code}
+                      data-type={operation.type}
+                      disabled={operation.disabled}
+                      icon={operation.icon}
+                    />
+                  );
+                  return operation.keyboard ? <Tooltip key={operation.label} message={operation.keyboard} placement="left">{btn}</Tooltip> : btn;
+                });
+                if (!state.dropdown.operation) {
+                  renderContent.push(
+                    <Dropdown
+                      key="more1"
+                      v-model={state.dropdown.show}
+                      scrollOptionLength={hiddenOuterButtons.length}
+                      placement="bottom-end"
+                      arrowSize={0}
+                      trigger="hover"
+                      v-slots={{
+                        default: () => (
+                          <ButtonGroup>
+                            <Button label={i18n('base.more').d('更多')}/>
+                            <Button icon="pi-down"/>
+                          </ButtonGroup>
+                        ),
+                        popper: () => dropdownOptions,
+                      }}
+                    />
+                  );
+                } else {
+                  renderContent.push(
+                    <ButtonGroup key="more2">
+                      <Button
+                        label={(state.dropdown.operation.label)}
+                        onClick={state.dropdown.operation.handler}
+                        icon={state.dropdown.operation.icon}
+                      />
+                      <Dropdown
+                        v-model={state.dropdown.show}
+                        scrollOptionLength={hiddenOuterButtons.length}
+                        placement="bottom-end"
+                        trigger="hover"
+                        arrowSize={0}
+                        v-slots={{
+                          default: () => (<Button icon="pi-down"/>),
+                          popper: () => dropdownOptions,
+                        }}
+                      />
+                    </ButtonGroup>
+                  );
+                }
+              }
+              return renderContent;
+            })()}
+          </div>
+        </div>
+      );
+    };
+  },
+});
+
+export default OuterOperation;