plain-design 1.0.0-beta.10 → 1.0.0-beta.101

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

@@ -1,112 +0,0 @@
-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

@@ -1,80 +0,0 @@
-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

@@ -1,136 +0,0 @@
-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

@@ -1,181 +0,0 @@
-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

@@ -1,131 +0,0 @@
-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>
-  );
-});