plain-design 1.0.0-beta.1 → 1.0.0-beta.100

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

@@ -1,66 +0,0 @@
-import {designPage, useRefs} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import data from '../../../data/data-50.json';
-import {Button, ButtonGroup, Plc, PlcIndex, Table} from "../../../../packages";
-import {delay} from "plain-utils/utils/delay";
-
-export const demo1 = designPage(() => {
-
-  const { refs, onRef } = useRefs({ table: Table });
-
-  return () => (
-    <DemoRow title="同步格式化值">
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="导出原始数据" onClick={() => console.log(refs.table!.methods.getSourceData())}/>
-        <Button label="导出显示数据" onClick={() => refs.table!.methods.getShowData().then(val => console.log(val))}/>
-      </ButtonGroup>
-      <Table data={data} showRows={10} ref={onRef.table}>
-        <PlcIndex/>
-        <Plc title="名称" field="name"/>
-        <Plc title="电话号码" field="tel"/>
-        <Plc title="电话号码(tel)" field="tel" formatter="tel" width={150}/>
-        <Plc title="整数" field="float"/>
-        <Plc title="整数(int)" field="float" formatter="int"/>
-        <Plc title="金额" field="num" align="right"/>
-        <Plc title="金额(money)" field="num" formatter="money" align="right"/>
-        <Plc title="人民币" field="num" align="right"/>
-        <Plc title="人民币(cny)" field="num" formatter="cny" align="right"/>
-        <Plc title="百分比" field="percent" align="right"/>
-        <Plc title="百分比(percent)" field="percent" formatter="percent" align="right"/>
-      </Table>
-    </DemoRow>
-  );
-});
-
-export const demo2 = designPage(() => {
-
-  const { refs, onRef } = useRefs({ table: Table });
-
-  const statusMap: any = {
-    primary: '基础',
-    success: '成功',
-    warn: '警告',
-    error: '错误',
-    info: '通知',
-  };
-
-  const statusAsyncFormatter = async (value: string | null) => {
-    await delay(Math.random() * 3000);
-    return !value ? null : statusMap[value];
-  };
-
-  return () => (
-    <DemoRow title="异步格式化值">
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="导出原始数据" onClick={() => console.log(refs.table!.methods.getSourceData())}/>
-        <Button label="导出显示数据" onClick={() => refs.table!.methods.getShowData().then(val => console.log(val))}/>
-      </ButtonGroup>
-      <Table data={data} showRows={10} ref={onRef.table}>
-        <PlcIndex/>
-        <Plc title="名称" field="name"/>
-        <Plc title="状态" field="status"/>
-        <Plc title="状态asyncFormatter" field="status" asyncFormatter={statusAsyncFormatter}/>
-      </Table>
-    </DemoRow>
-  );
-});

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

@@ -1,67 +0,0 @@
-import {designPage, useRefs} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import data from '../../../data/data-50.json';
-import {Button, ButtonGroup, Plc, PlcIndex, Table} from "../../../../packages";
-import {delay} from "plain-utils/utils/delay";
-
-export const demo1 = designPage(() => {
-
-  const { refs, onRef } = useRefs({ table: Table });
-
-  return () => (
-    <DemoRow title="同步格式化值">
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="导出原始数据" onClick={() => console.log(refs.table!.methods.getSourceData())}/>
-        <Button label="导出显示数据" onClick={() => refs.table!.methods.getShowData().then(val => console.log(val))}/>
-      </ButtonGroup>
-      <Table data={data} showRows={10} ref={onRef.table}>
-        <PlcIndex/>
-        <Plc title="名称" field="name"/>
-        <Plc title="电话号码" field="tel" overflowTooltip/>
-        <Plc title="电话号码(tel)" field="tel" formatter="tel" width={150} overflowTooltip/>
-        <Plc title="整数" field="float"/>
-        <Plc title="整数(int)" field="float" formatter="int"/>
-        <Plc title="金额" field="num" align="right"/>
-        <Plc title="金额(money)" field="num" formatter="money" align="right"/>
-        <Plc title="人民币" field="num" align="right"/>
-        <Plc title="人民币(cny)" field="num" formatter="cny" align="right"/>
-        <Plc title="百分比" field="percent" align="right"/>
-        <Plc title="百分比(percent)" field="percent" formatter="percent" align="right"/>
-      </Table>
-    </DemoRow>
-  );
-});
-
-export const demo2 = designPage(() => {
-
-  const { refs, onRef } = useRefs({ table: Table });
-
-  const statusMap: any = {
-    primary: '基础',
-    success: '成功',
-    warn: '警告',
-    error: '错误',
-    info: '通知',
-  };
-
-  const statusAsyncFormatter = async (value: string | null) => {
-    await delay(Math.random() * 3000);
-    return !value ? null : statusMap[value];
-  };
-
-  return () => (
-    <DemoRow title="异步格式化值">
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label="导出原始数据" onClick={() => console.log(refs.table!.methods.getSourceData())}/>
-        <Button label="导出显示数据" onClick={() => refs.table!.methods.getShowData().then(val => console.log(val))}/>
-      </ButtonGroup>
-      <Table data={data} showRows={10} ref={onRef.table}>
-        <PlcIndex/>
-        <Plc title="名称" field="name"/>
-        <Plc title="状态" field="status"/>
-        <Plc title="状态asyncFormatter(tooltip)" field="status" asyncFormatter={statusAsyncFormatter} overflowTooltip/>
-        <Plc title="状态asyncFormatter" field="status" asyncFormatter={statusAsyncFormatter}/>
-      </Table>
-    </DemoRow>
-  );
-});

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

@@ -1,106 +0,0 @@
-import {designPage, reactive, useRefs} from "plain-design-composition";
-import data from '../../../data/data-2.json';
-import {iTableNode} from "../../../../packages/components/Table/table/utils/table.utils";
-import {$message, Button, ButtonGroup, Form, FormItem, Plc, PlcCheck, PlcColorPicker, PlcDate, PlcDraggier, PlcIndex, PlcInput, PlcNumber, PlcRate, PlcToggle, Table, Toggle} from "../../../../packages";
-import {DemoRow} from "../../Demo/DemoRow";
-
-export const demoBaisc = designPage(() => {
-
-  const state = reactive({
-    data: data.slice(0, 6)
-  });
-
-  return () => (
-    <DemoRow title="基本用法">
-      <Table data={state.data}>
-        <PlcIndex/>
-        <PlcDraggier v-model={state.data}/>
-        <Plc field="name" title="普通文本列"/>
-        <Plc field="id" title="编号"/>
-        <PlcInput field="name" title="文本框" required/>
-        <PlcNumber field={'size'} title={'数字框'}/>
-        <PlcDate field={'date'} title={'日期'}/>
-        <PlcColorPicker field={'color'} title={'颜色'}/>
-        <PlcRate field={'star'} title={'评分'}/>
-        <PlcToggle field={'flag'} title={'开关'}/>
-      </Table>
-    </DemoRow>
-  );
-});
-
-export const demo1 = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    check: PlcCheck,
-  });
-
-  const state = reactive({
-    data,
-    editNodes: [] as iTableNode[],
-    virtualFlag: true,
-    onDblClickRow(tableNode: iTableNode) {
-      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 index = validates[0]!.node.state.index;
-        const message = validates[0]!.validateResultData[0].message;
-        $message.error(`第${index + 1}条记录校验不通过，${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 () => (
-    <DemoRow title={'基本用法'}>
-      <Form column={1} singleColumnContentWidth={400}>
-        <FormItem label={'是否开启虚拟滚动'}>
-          <Toggle v-model={state.virtualFlag}/>
-        </FormItem>
-        <FormItem label={'编辑'}>
-          <ButtonGroup disabled={state.editNodes.length === 0}>
-            <Button label={'打印数据'} disabled={false} onClick={() => console.log(data.map((item: any) => item.name).join(','))}/>
-            <Button label={'获取选中行'} disabled={false} onClick={() => {
-              $message(refs.check!.getSelected().map((item: any) => item.data.name).join(','));
-            }}/>
-            <Button onClick={state.saveEdit} label={'保存编辑'}/>
-            <Button onClick={state.cancelEdit} label={'取消编辑'}/>
-          </ButtonGroup>
-        </FormItem>
-      </Form>
-      <Table
-        virtual={state.virtualFlag}
-        data={state.data}
-        onDblclickCell={state.onDblClickRow}
-        showRows={5}
-      >
-        <PlcIndex/>
-        <PlcCheck ref={onRef.check} field="id"/>
-        <PlcDraggier v-model={state.data}/>
-        <Plc field="name" title="普通文本列"/>
-        <Plc field="id" title="编号"/>
-        <PlcInput field="name" title="文本框" required/>
-        <PlcNumber field={'size'} title={'数字框'}/>
-        <PlcDate field={'date'} title={'日期'}/>
-        <PlcColorPicker field={'color'} title={'颜色'}/>
-        <PlcRate field={'star'} title={'评分'}/>
-        <PlcToggle field={'flag'} title={'开关'}/>
-      </Table>
-    </DemoRow>
-  );
-});

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

@@ -1,153 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-// @ts-ignore
-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,
-    destroy: false,
-    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: false,
-    },
-    props: {
-      headRowHeight: 45,
-      bodyRowHeight: 40,
-      border: false,
-      virtual: false,
-    },
-    plc: {
-      width: 200,
-      align: 'left',
-      init: true,
-      hide: undefined,
-    },
-  });
-
-  return () => (
-    <div>
-      <DemoRow title={'基本用法'}>
-        <Form column={1}>
-          <FormItem label="销毁表格">
-            <Checkbox v-model={state.destroy} label={'销毁'}/>
-          </FormItem>
-          <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={'作用域插槽'}>
-        {!state.destroy &&
-          <Table
-            showRows={10}
-            key={state.other.groupHead ? '1' : '2'}
-            data={data}
-            summaryData={state.other.hasSummaryData ? state.summaryData : undefined}
-            {...state.props}>
-
-            {!!state.other.groupHead && <>
-              <Plc title={'编号'}
-                   field={'id'}
-                   fixed={'left'}
-                   width={state.plc.width}
-                   v-slots={{
-                     head: ({ plc }) => (<span>id标题:{plc.props.title}</span>),
-                     normal: ({ row }) => (<span>id:{row.id}</span>),
-                     summary: ({ row }) => (<span>smy:{row.id}</span>),
-                   }}
-              />
-              <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="大小"
-                v-slots={{
-                  head: ({ plc }) => (<span>size:{plc.props.title}</span>),
-                  normal: ({ row }) => (<span>size:{row.id}</span>),
-                  summary: ({ row }) => (<span>smy size:{row.id}</span>),
-                }}
-              />
-              <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>
-  );
-});

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

@@ -1,167 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {iTableNode} from "../../../../packages/components/Table/table/utils/table.utils";
-import {DemoLine} from "../../Demo/DemoLine";
-import {Plc, PlcIndex, Table} from "../../../../packages";
-import {DemoRow} from "../../Demo/DemoRow";
-
-const DemoRowSpan = designPage(() => {
-
-  const data = [
-    { first: '1', second: '1-1', third: '1-1-1' },
-    { first: '1', second: '1-1', third: '1-1-2' },
-    { first: '1', second: '1-1', third: '1-1-3' },
-    { first: '1', second: '1-2', third: '1-2-1' },
-    { first: '1', second: '1-3', third: '1-3-1' },
-    { first: '2', second: '2-1', third: '2-1-1' },
-    { first: '2', second: '2-1', third: '2-1-2' },
-    { first: '2', second: '2-2', third: '2-2-1' },
-  ] as Record<string, string>[];
-
-  const prevIndex: any = {
-    first: 0,
-    second: 0,
-    third: 0,
-  };
-
-  const spanMap: { [k: string]: any }[] = [];
-  const collapseField = ['first', 'second'];
-  const initMap = collapseField.reduce((ret, item) => {
-    ret[item] = 1;
-    return ret;
-  }, {} as Record<string, number>);
-
-  data.forEach((item, index) => {
-
-    const map = { ...initMap };
-
-    if (index === 0) {
-      spanMap.push(map);
-      return;
-    }
-
-    collapseField.forEach(key => {
-      if (item[key] === data[prevIndex[key]][key]) {
-        spanMap[prevIndex[key]][key]++;
-        map[key] = 0;
-      } else {
-        prevIndex[key] = index;
-      }
-    });
-
-    spanMap.push(map);
-  });
-
-  // console.log(JSON.parse(JSON.stringify(spanMap)))
-
-  function spanMethod({ node, plc }: { node: iTableNode, plc: any }) {
-    return {
-      colspan: 1,
-      rowspan: spanMap[node.state.index][plc.props.field!] != null ? spanMap[node.state.index][plc.props.field!] : 1,
-    };
-  }
-
-  return () => (
-    <div>
-      <DemoLine>字段值相同则合并行</DemoLine>
-      <ul>
-        {data.map((item, index) => (
-          <li key={index}>
-            {JSON.stringify(item)}
-          </li>
-        ))}
-      </ul>
-      <Table data={data} spanMethod={spanMethod} border>
-        <PlcIndex/>
-        <Plc title={'一级标题'} field={'first'}/>
-        <Plc title={'二级标题'} field={'second'}/>
-        <Plc title={'三级标题'} field={'third'}/>
-      </Table>
-    </div>
-  );
-
-});
-
-const DemoColSpan = designPage(() => {
-
-  const data = [
-    { name: '产品线A', first: '盈利', second: '盈利', third: '亏损', fourth: '亏损', },
-    { name: '产品线B', first: '盈利', second: '亏损', third: '亏损', fourth: '亏损', },
-    { name: '产品线C', first: '盈利', second: '盈利', third: '盈利', fourth: '亏损', },
-    { name: '产品线D', first: '亏损', second: '亏损', third: '亏损', fourth: '亏损', },
-    { name: '产品线E', first: '盈利', second: '盈利', third: '盈利', fourth: '盈利', },
-  ];
-
-  const spanMap: Record<string, any>[] = [];
-  const collapseFields = ['first', 'second', 'third', 'fourth'];
-
-  data.forEach((item: any) => {
-    const map: any = {};
-    let prevField: any = null;
-    collapseFields.forEach((field, fieldIndex) => {
-      if (fieldIndex === 0) {
-        prevField = field;
-        map[field] = 1;
-        return;
-      }
-
-      if (item[prevField] === item[field]) {
-        map[field] = 0;
-        map[prevField]++;
-      } else {
-        map[field] = 1;
-        prevField = field;
-      }
-
-    });
-    spanMap.push(map);
-  });
-
-  function spanMethod({ node, plc }: { node: iTableNode, plc: any }) {
-
-    const { field } = plc.props;
-
-    if (field === 'name') {
-      return {
-        rowspan: 1,
-        colspan: 1,
-      };
-    } else {
-      return {
-        rowspan: 1,
-        colspan: spanMap[node.state.index][field]
-      };
-    }
-  }
-
-  return () => (
-    <div>
-      <DemoLine>字段值相同则合并列</DemoLine>
-      <ul>
-        {data.map((item, index) => (
-          <li key={index}>{JSON.stringify(item)}</li>
-        ))}
-      </ul>
-      <Table data={data} spanMethod={spanMethod} border>
-        <PlcIndex/>
-        <Plc title="产品线" field="name"/>
-        <Plc title="第一季度盈亏" field="first"/>
-        <Plc title="第二季度盈亏" field="second"/>
-        <Plc title="第三季度盈亏" field="third"/>
-        <Plc title="第四季度盈亏" field="fourth"/>
-      </Table>
-    </div>
-  );
-});
-
-export default () => {
-  return (
-    <div>
-      <DemoRow title={'合并行'}>
-        <DemoRowSpan/>
-      </DemoRow>
-      <DemoRow title={'合并列'}>
-        <DemoColSpan/>
-      </DemoRow>
-    </div>
-  );
-}