plain-design 0.0.97 → 1.0.0-beta.10

package/src/pages/index/components/table/DemoTableClassAndStyle.tsx

@@ -0,0 +1,112 @@
+import {designPage} from "plain-design-composition";
+import './DemoTableClassAndStyle.scss';
+import data from '../../../data/data-1.json';
+import {DemoRow} from "../../Demo/DemoRow";
+import {Plc, Table} from "../../../../packages";
+import {DemoLine} from "../../Demo/DemoLine";
+
+export default designPage(() => {
+
+  const utils = {
+    rowClassFunc({ data }: any) {
+      const { star } = data;
+      return [
+        'custom-row',
+        `custom-row-status-${star > 5 ? 'active' : 'inactive'}`
+      ];
+    },
+    cellClassFunc({ data }: any, plc: any) {
+      const { star } = data;
+
+      if (plc.props.field === 'star') {
+        return [
+          'custom-cell',
+          `custom-cell-status-${star > 5 ? 'active' : 'inactive'}`
+        ];
+      }
+    },
+    cellStyleFunc({ data: { star } }: any, { props: { field } }: any) {
+      if (field === 'star') {
+        return {
+          color: star > 5 ? '#12b4a5' : '',
+          fontWeight: star > 5 ? 'bold' : 'normal'
+        };
+      }
+      return {};
+    },
+    headCellClassFunc({ props: { field } }: any) {
+      if (field === 'star') {
+        return 'custom-head-cell-clz';
+      }
+    },
+    headCellStyleFunc({ props: { field } }: any) {
+      if (field === 'star') {
+        return {
+          backgroundColor: '#3E97EC',
+          color: 'white',
+        };
+      }
+      return {};
+    },
+  };
+
+  return () => (
+    <div>
+      <DemoRow title={'rowClassFunc'}>
+        <DemoLine title={'评分大于5的显示背景蓝色'}/>
+        <Table data={data} rowClassFunc={utils.rowClassFunc} showRows={10}>
+          <Plc field="id" title="编号"/>
+          <Plc field="size" title="大小"/>
+          <Plc field="date" title="日期"/>
+          <Plc field="color" title="颜色"/>
+          <Plc field="name" title="名称"/>
+          <Plc field="star" title="评分"/>
+        </Table>
+      </DemoRow>
+      <DemoRow title={'cellClassFunc'}>
+        <DemoLine title={'评分大于5的显示背景蓝色'}/>
+        <Table data={data} cellClassFunc={utils.cellClassFunc} showRows={10}>
+          <Plc field="id" title="编号"/>
+          <Plc field="size" title="大小"/>
+          <Plc field="date" title="日期"/>
+          <Plc field="color" title="颜色"/>
+          <Plc field="name" title="名称"/>
+          <Plc field="star" title="评分"/>
+        </Table>
+      </DemoRow>
+      <DemoRow title={'cellStyleFunc'}>
+        <DemoLine title={'评分大于5的蓝色加粗字体'}/>
+        <Table data={data} cellStyleFunc={utils.cellStyleFunc} showRows={10}>
+          <Plc field="id" title="编号"/>
+          <Plc field="size" title="大小"/>
+          <Plc field="date" title="日期"/>
+          <Plc field="color" title="颜色"/>
+          <Plc field="name" title="名称"/>
+          <Plc field="star" title="评分"/>
+        </Table>
+      </DemoRow>
+      <DemoRow title={'headCellClassFunc'}>
+        <DemoLine title={'评分大于5的蓝色加粗字体'}/>
+        <Table data={data} headCellClassFunc={utils.headCellClassFunc} showRows={10}>
+          <Plc field="id" title="编号"/>
+          <Plc field="size" title="大小"/>
+          <Plc field="date" title="日期"/>
+          <Plc field="color" title="颜色"/>
+          <Plc field="name" title="名称"/>
+          <Plc field="star" title="评分"/>
+        </Table>
+      </DemoRow>
+      <DemoRow title={'headCellStyleFunc'}>
+        <DemoLine title={'评分大于5的蓝色加粗字体'}/>
+        <Table data={data} headCellStyleFunc={utils.headCellStyleFunc} showRows={10}>
+          <Plc field="id" title="编号"/>
+          <Plc field="size" title="大小"/>
+          <Plc field="date" title="日期"/>
+          <Plc field="color" title="颜色"/>
+          <Plc field="name" title="名称"/>
+          <Plc field="star" title="评分"/>
+        </Table>
+      </DemoRow>
+    </div>
+  );
+});

package/src/pages/index/components/table/DemoTableColDraggable.tsx

@@ -0,0 +1,80 @@
+import {designPage, reactive} from "plain-design-composition";
+import data from '../../../data/data-1.json';
+import {DemoRow} from "../../Demo/DemoRow";
+import {Plc, PlcGroup, PlcIndex, Table} from "../../../../packages";
+import {PlainObject} from "plain-utils/utils/event";
+
+export const demo1 = designPage(() => {
+
+  const cols = new Array(40).fill(null).map((_, i) => ({ title: `列_${i + 1}`, field: `field_${i}` }));
+  const data = new Array(100).fill(null).map((_, i) => cols.reduce((prev, item) => {
+    prev[item.field] = `${item.title},行_${i}`;
+    return prev;
+  }, {} as PlainObject));
+  const fixedData = [data.pop()!];
+
+  const state = reactive({
+    data,
+  });
+
+  return () => (
+    <DemoRow title="基本用法">
+      <Table
+        showRows={5}
+        v-model:data={state.data}
+        summaryData={fixedData}
+        colDraggable
+        rowDraggable
+        border
+        virtualColumn
+        virtual
+        onClickRowDraggier={() => {console.log('click row draggier');}}
+        onClickColDraggier={() => {console.log('click col draggier');}}
+      >
+        <PlcIndex key="index"/>
+        {cols.map((col, index) => (
+          <Plc title={col.title} field={col.field} key={col.field} fixed={index === 0 ? 'left' : index === cols.length - 1 ? 'right' : undefined}/>
+        ))}
+      </Table>
+    </DemoRow>
+  );
+});
+
+export const demo2 = designPage(() => {
+
+  const state = reactive({
+    data,
+  });
+
+  return () => (
+    <DemoRow title={'分组表头中拖拽排序'}>
+      <Table
+        v-model:data={state.data}
+        colDraggable
+        rowDraggable
+        border
+        showRows={10}
+      >
+        <PlcIndex/>
+        <Plc field={'id'} title={'1_编号'} fixed="left"/>
+        <PlcGroup title={'2_分组'}>
+          <Plc field={'size'} title={'2-1_尺寸'}/>
+          <Plc field={'date'} title={'2-2_日期'}/>
+        </PlcGroup>
+        <Plc field={'color'} title={'3_颜色'} align="right"/>
+        <PlcGroup title={'4_分组'}>
+          <PlcGroup title={'4-1_分组'}>
+            <Plc field={'name'} title={'4-1-1_名称'}/>
+            <Plc field={'star'} title={'4-1-2_评分'}/>
+          </PlcGroup>
+          <Plc field={'id'} title={'4-2_编号'}/>
+        </PlcGroup>
+        <Plc field="size" title="5_尺寸"/>
+        <Plc field="date" title="6_日期"/>
+        <Plc field="color" title="7_颜色"/>
+        <Plc field="name" title="8_名称"/>
+        <Plc field="star" title="9_评分" fixed="right"/>
+      </Table>
+    </DemoRow>
+  );
+});

package/src/pages/index/components/table/DemoTableEdit.tsx

@@ -0,0 +1,136 @@
+import {designPage, reactive, useRefs} from "plain-design-composition";
+import data from '../../../data/data-1.json';
+import {iTableCellRenderScope, iTableNode} from "../../../../packages/components/Table/table/utils/table.utils";
+import {$message, Button, ButtonGroup, DatePicker, Form, FormItem, Plc, PlcColorPicker, PlcDate, PlcIndex, PlcInput, PlcNumber, PlcRate, Segment, SegmentGroup, Table, Toggle} from "../../../../packages";
+import {DemoRow} from "../../Demo/DemoRow";
+import {iValidatorParam} from "../../../../packages/components/Form/validate/validate.utils";
+import {PlainObject} from "plain-utils/utils/event";
+import {deepcopy} from "plain-utils/object/deepcopy";
+
+export const demo1 = designPage(() => {
+
+  const { refs, onRef } = useRefs({ table: Table });
+
+  const state = reactive({
+    size: undefined as any,
+    data: data as any[],
+    editNodes: [] as iTableNode[],
+    virtualFlag: false,
+    formEdit: false,
+    associateFields: {
+      name: 'size',
+    },
+    isEditable: ({ state: { editRow } }: iTableNode) => !!editRow.name && editRow.name.length > 5,
+    isRequired: (formData: PlainObject | null | undefined) => !!formData?.name && formData.name.length > 5,
+    customRule: {
+      validator: ({ formData }: iValidatorParam) => {
+        if (!formData) {return; }
+        return !!formData.name && formData.name.length > 5 ?
+          (!formData.size && formData.size !== 0) ? 'name 长度大于5情况下必填' : undefined
+          : undefined;
+      }
+    },
+    onDblClickRow(tableNode: iTableNode) {
+      if (state.formEdit) {
+        refs.table!.formEditor.methods.edit({
+          node: tableNode,
+          onConfirm: (node) => {
+            state.data[tableNode.state.index] = deepcopy(node.state.editRow);
+          }
+        });
+      } else {
+        if (!tableNode.state.edit) {
+          tableNode.enableEdit();
+          state.editNodes.push(tableNode);
+        }
+      }
+    },
+    saveEdit: async () => {
+      const validates = (await Promise.all(state.editNodes.map(node => node.validate()))).filter(Boolean);
+      if (validates.length > 0) {
+        console.log(validates);
+        const { validateResultData, node: { state: { index } } } = validates[0]!;
+        $message.error(`第${index + 1}条记录校验不通过，${validateResultData[0].label}:${validateResultData[0].message}`);
+        return;
+      }
+      // todo 网络保存逻辑
+      state.editNodes.forEach(tableNode => tableNode.saveEdit(tableNode.state.editRow));
+      state.editNodes.forEach(tableNode => tableNode.closeEdit());
+      state.editNodes = [];
+    },
+    cancelEdit: () => {
+      state.editNodes.forEach(tableNode => {
+        tableNode.cancelEdit();
+      });
+      state.editNodes = [];
+    },
+  });
+
+  return () => (
+    <div>
+      <DemoRow title={'基本用法'}>
+        <Form column={1}>
+          <FormItem label="大小尺寸">
+            <SegmentGroup v-model={state.formEdit}>
+              <Segment label="行内编辑" val={false}/>
+              <Segment label="表单编辑" val={true}/>
+            </SegmentGroup>
+          </FormItem>
+          <FormItem label="大小尺寸">
+            <SegmentGroup v-model={state.size}>
+              <Segment label="Mini" val="mini"/>
+              <Segment label="Small" val="small"/>
+              <Segment label="Normal" val="normal"/>
+              <Segment label="Large" val="large"/>
+            </SegmentGroup>
+          </FormItem>
+          <FormItem label={'是否开启虚拟滚动'}>
+            <Toggle v-model={state.virtualFlag}/>
+          </FormItem>
+          <FormItem label={'编辑'}>
+            <ButtonGroup disabled={state.editNodes.length === 0}>
+              <Button onClick={state.saveEdit} label={'保存编辑'}/>
+              <Button onClick={state.cancelEdit} label={'取消编辑'}/>
+            </ButtonGroup>
+          </FormItem>
+        </Form>
+      </DemoRow>
+      <DemoRow title={'行内编辑'}>
+        <Table
+          showRows={10}
+          virtual={state.virtualFlag}
+          data={state.data}
+          onDblclickCell={state.onDblClickRow}
+          size={state.size}
+          ref={onRef.table}
+        >
+          <PlcIndex/>
+          <Plc field="id" title="编号" width={'50'}/>
+          <Plc field="name" title="普通文本列"/>
+          <Plc field="name" title="普通文本列，编辑作用域插槽" width={200} editable={state.isEditable}
+               v-slots={{
+                 edit: ({ row }) => (
+                   <input type="text" v-model={row.name} style={{ paddingLeft: '8px' }}/>
+                 )
+               }}
+          />
+          <PlcInput field="name" title="禁用编辑" editable={false}/>
+          <PlcInput field="name" title="文本框" required/>
+          <PlcInput field="size" title="文本框值大于6可以编辑" width={200} editable={state.isEditable} rules={state.customRule}/>
+          <PlcNumber field={'size'} title={'数字框'} required={state.isRequired}/>
+          <PlcDate field={'date'} title={'日期'}/>
+          <PlcDate field={'dateStart'} title={'开始日期'} formLabel="日期范围" editColSpan={2}>
+            {{
+              edit: ({ row }: iTableCellRenderScope) => (
+                <DatePicker v-model:start={row.dateStart} v-model:end={row.dateEnd} range/>
+              ),
+            }}
+          </PlcDate>
+          <PlcDate field={'dateEnd'} title={'结束日期'} editColSpan={0}/>
+          <PlcColorPicker field={'color'} title={'颜色'}/>
+          <PlcRate field={'star'} title={'评分'}/>
+        </Table>
+      </DemoRow>
+    </div>
+  );
+});

package/src/pages/index/components/table/DemoTableExpand.tsx

@@ -0,0 +1,181 @@
+import {designPage, reactive} from "plain-design-composition";
+import data from '../../../data/data-1.json';
+import {deepcopy} from "plain-utils/object/deepcopy";
+import {DemoRow} from "../../Demo/DemoRow";
+import {ColorPicker, DatePicker, Form, FormItem, Input, InputNumber, Plc, PlcExpand, PlcGroup, PlcIndex, Table} from "../../../../packages";
+
+
+export const demoExpand = designPage(() => {
+
+  const state = reactive({
+    data,
+  });
+
+  const summaryData = deepcopy(data.slice(0, 2));
+
+  return () => (
+    <DemoRow title={'展开行'}>
+      <Table
+        data={state.data}
+        summaryData={summaryData}
+        virtual
+        showRows={10}
+      >
+        <PlcIndex/>
+        <PlcExpand
+          fixedWidth
+          v-slots={{
+            expand: ({ row }) => {
+              return (
+                <div style={{ padding: '12px' }}>
+                  <Form column={1} disabled key={row.id}>
+                    <FormItem label={'普通文本'}>{row.name}</FormItem>
+                    <FormItem label={'输入框'}><Input disabled={false} v-model={row.name}/></FormItem>
+                    <FormItem label={'数字'}><InputNumber v-model={row.size}/></FormItem>
+                    <FormItem label={'日期'}><DatePicker v-model={row.date}/></FormItem>
+                    <FormItem label={'颜色'}><ColorPicker v-model={row.color}/></FormItem>
+                  </Form>
+                </div>
+              );
+            }
+          }}
+        />
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'大小'} field={'size'}/>
+        <PlcGroup title={'地址'} fixed={'left'}>
+          <Plc field="date" title="日期"/>
+          <Plc field="color" title="颜色"/>
+        </PlcGroup>
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'评分'} field={'star'}/>
+        <Plc title={'地址'} field={'addr'}/>
+
+        <Plc title={'名称'} field={'name'} fixed="right"/>
+        <PlcGroup title={'站点'} fixed={'right'}>
+          <Plc field={'url'} title={'链接'}/>
+          <Plc field={'domain'} title={'域名'}/>
+        </PlcGroup>
+
+        <Plc title="协议" field="protocol"/>
+        <Plc title="邮箱" field="email"/>
+        <Plc title="ip" field="ip"/>
+      </Table>
+    </DemoRow>
+  );
+});
+
+
+export const demoExpandVirtualCOlumn = designPage(() => {
+
+  const state = reactive({
+    data,
+  });
+
+  const summaryData = deepcopy(data.slice(0, 2));
+
+  return () => (
+    <DemoRow title={'虚拟列'}>
+      <Table
+        data={state.data}
+        summaryData={summaryData}
+        virtual
+        showRows={10}
+        virtualColumn
+      >
+        <PlcIndex/>
+        <PlcExpand
+          toggleOnClickRow
+          fixedWidth
+          v-slots={{
+            expand: ({ row }) => {
+              return (
+                <div style={{ padding: '12px' }}>
+                  <Form column={1} disabled key={row.id}>
+                    <FormItem label={'普通文本'}>{row.name}</FormItem>
+                    <FormItem label={'输入框'}><Input disabled={false} v-model={row.name}/></FormItem>
+                    <FormItem label={'数字'}><InputNumber v-model={row.size}/></FormItem>
+                    <FormItem label={'日期'}><DatePicker v-model={row.date}/></FormItem>
+                    <FormItem label={'颜色'}><ColorPicker v-model={row.color}/></FormItem>
+                  </Form>
+                </div>
+              );
+            }
+          }}
+        />
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'大小'} field={'size'}/>
+        <PlcGroup title={'地址'} fixed={'left'}>
+          <Plc field="date" title="日期"/>
+          <Plc field="color" title="颜色"/>
+        </PlcGroup>
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'评分'} field={'star'}/>
+        <Plc title={'地址'} field={'addr'}/>
+
+        <Plc title={'名称'} field={'name'} fixed="right"/>
+        <PlcGroup title={'站点'} fixed={'right'}>
+          <Plc field={'url'} title={'链接'}/>
+          <Plc field={'domain'} title={'域名'}/>
+        </PlcGroup>
+
+        <Plc title="协议" field="protocol"/>
+        <Plc title="邮箱" field="email"/>
+        <Plc title="ip" field="ip"/>
+
+        <Plc field={'url'} title={'链接'}/>
+        <Plc field={'domain'} title={'域名'}/>
+        <Plc title="协议" field="protocol"/>
+        <Plc title="邮箱" field="email"/>
+        <Plc title="ip" field="ip"/>
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'评分'} field={'star'}/>
+        <Plc title={'地址'} field={'addr'}/>
+
+        <Plc field={'url'} title={'链接'}/>
+        <Plc field={'domain'} title={'域名'}/>
+        <Plc title="协议" field="protocol"/>
+        <Plc title="邮箱" field="email"/>
+        <Plc title="ip" field="ip"/>
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'评分'} field={'star'}/>
+        <Plc title={'地址'} field={'addr'}/>
+
+        <Plc field={'url'} title={'链接'}/>
+        <Plc field={'domain'} title={'域名'}/>
+        <Plc title="协议" field="protocol"/>
+        <Plc title="邮箱" field="email"/>
+        <Plc title="ip" field="ip"/>
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'评分'} field={'star'}/>
+        <Plc title={'地址'} field={'addr'}/>
+
+        <Plc field={'url'} title={'链接'}/>
+        <Plc field={'domain'} title={'域名'}/>
+        <Plc title="协议" field="protocol"/>
+        <Plc title="邮箱" field="email"/>
+        <Plc title="ip" field="ip"/>
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'评分'} field={'star'}/>
+        <Plc title={'地址'} field={'addr'}/>
+
+        <Plc field={'url'} title={'链接'}/>
+        <Plc field={'domain'} title={'域名'}/>
+        <Plc title="协议" field="protocol"/>
+        <Plc title="邮箱" field="email"/>
+        <Plc title="ip" field="ip"/>
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'评分'} field={'star'}/>
+        <Plc title={'地址'} field={'addr'}/>
+
+        <Plc field={'url'} title={'链接'}/>
+        <Plc field={'domain'} title={'域名'}/>
+        <Plc title="协议" field="protocol"/>
+        <Plc title="邮箱" field="email"/>
+        <Plc title="ip" field="ip"/>
+        <Plc title={'编号'} field={'id'}/>
+        <Plc title={'评分'} field={'star'}/>
+        <Plc title={'地址'} field={'addr'}/>
+      </Table>
+    </DemoRow>
+  );
+});

package/src/pages/index/components/table/DemoTableFixed.tsx

@@ -0,0 +1,131 @@
+import {designPage, reactive} from "plain-design-composition";
+import data from "../../../data/data-1.json";
+import {DemoRow} from "../../Demo/DemoRow";
+import {Checkbox, Form, FormItem, InputNumber, Plc, PlcGroup, PlcIndex, Table, Toggle} from "../../../../packages";
+
+export default designPage(() => {
+
+  const state = reactive({
+    data,
+    summaryData: [
+      {
+        "id": 0,
+        "color": "#79f285",
+        "name": "Lisa",
+        "date": "2002-04-28",
+        "star": "★★★★★★★",
+        "size": 49
+      },
+      {
+        "id": 1,
+        "color": "#f27990",
+        "name": "George",
+        "date": "2019-01-06",
+        "star": "★★★★★★★★",
+        "size": 74
+      },
+    ],
+    other: {
+      hasSummaryData: true,
+      groupHead: true,
+    },
+    props: {
+      headRowHeight: 45,
+      bodyRowHeight: 40,
+      border: true,
+      virtual: false,
+    },
+    plc: {
+      width: 200,
+      align: 'left',
+      init: true,
+      hide: undefined,
+    },
+  });
+
+  return () => (
+    <div>
+      <DemoRow title={'基本用法'}>
+        <Form column={1}>
+          <FormItem label={'列宽度响应测试'}>
+            <InputNumber v-model={state.plc.width} step={100}/>
+          </FormItem>
+          <FormItem label="表头行高">
+            <InputNumber v-model={state.props.headRowHeight} step={5}/>
+          </FormItem>
+          <FormItem label="表体行高">
+            <InputNumber v-model={state.props.bodyRowHeight} step={5}/>
+          </FormItem>
+          <FormItem label="列销毁测试(名称)">
+            <Toggle v-model={state.plc.init}/>
+          </FormItem>
+          <FormItem label="带边框">
+            <Checkbox v-model={state.props.border}/>
+          </FormItem>
+          <FormItem label="合计行">
+            <Toggle v-model={state.other.hasSummaryData}/>
+          </FormItem>
+          <FormItem label="表头分组">
+            <Toggle v-model={state.other.groupHead}/>
+          </FormItem>
+          <FormItem label="启用虚拟滚动">
+            <Toggle v-model={state.props.virtual}/>
+          </FormItem>
+          {!!state.other.groupHead && <>
+            <FormItem label="hide:(评分)">
+              <Toggle v-model={state.plc.hide}/>
+            </FormItem>
+          </>}
+        </Form>
+      </DemoRow>
+      <DemoRow title={'固定列'}>
+        <Table
+          data={data}
+          summaryData={state.other.hasSummaryData ? state.summaryData : undefined}
+          {...state.props}
+          showRows={10}
+        >
+
+          {!!state.other.groupHead && <>
+            <PlcIndex/>
+            <Plc title={'编号'} field={'id'} fixed={'left'} width={state.plc.width}/>
+            <Plc title={'编号'} field={'id'}/>
+            <Plc title={'大小'} field={'size'}/>
+            <PlcGroup title={'地址'} fixed={'left'}>
+              <Plc field="date" title="日期"/>
+              <Plc field="color" title="颜色"/>
+            </PlcGroup>
+            <Plc title={'编号'} field={'id'}/>
+            <Plc title={'评分'} field={'star'}/>
+            <Plc title={'地址'} field={'addr'}/>
+
+            {state.plc.init && <Plc title={'名称'} field={'name'}/>}
+            <PlcGroup title={'站点'} fixed={'right'}>
+              <Plc field={'url'} title={'链接'}/>
+              <Plc field={'domain'} title={'域名'}/>
+            </PlcGroup>
+
+            <Plc title="协议" field="protocol"/>
+            <Plc title="邮箱" field="email"/>
+            <Plc title="ip" field="ip"/>
+          </>}
+          {!state.other.groupHead && <>
+            <PlcIndex/>
+            <Plc field="id" title="编号" fixed={'left'}/>
+            <Plc field="size" title="大小"/>
+            <Plc field="date" title="日期"/>
+            <Plc field="color" title="颜色"/>
+            {!!state.plc.init && <Plc field="name" title="名称" fixed={'right'}/>}
+            <Plc field="star" title="评分"/>
+            <Plc field="addr" title="地址"/>
+            <Plc field="url" title="链接"/>
+            <Plc field="domain" title="域名"/>
+            <Plc field="protocol" title="协议"/>
+            <Plc field="email" title="邮箱"/>
+            <Plc field="ip" title="ip"/>
+          </>}
+        </Table>
+      </DemoRow>
+    </div>
+  );
+});