plain-design 1.0.0-beta.12 → 1.0.0-beta.121

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

@@ -1,307 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import DATA from "../../../data/data-1.json";
-import {iTableNode} from "../../../../packages/components/Table/table/utils/table.utils";
-import {$message, Alert, Checkbox, Form, FormItem, InputNumber, OuterOperation, Plc, PlcGroup, PlcOperation, Radio, RadioGroup, Segment, SegmentGroup, Table, Toggle} from "../../../../packages";
-import {iTableOperation} from "../../../../packages/components/Table/standard/PlcOperation/PlcOperation.utils";
-
-export const demo1 = designPage(() => {
-
-  const data = DATA.slice(0, 3);
-
-  const operations: iTableOperation[] = [
-    { label: '复制', position: 'inner', handler: ({ row }) => {$message(`复制：` + row.name);} },
-    { label: '删除', position: 'inner', handler: ({ row }) => {$message(`删除：` + row.name);} },
-    { label: '自定义渲染', position: 'inner', render: ({ row }) => <span key="custom" onClick={() => console.log('自定义渲染:' + row.name)}>[{row.name}]</span> },
-  ];
-
-  return () => (
-    <DemoRow title="基本用法">
-      <Table data={data}>
-        <Plc field="id" title="编号"/>
-        <Plc field="name" title="名称"/>
-        <Plc field="date" title="日期(order=6)" order="6"/>
-        <Plc field="color" title="颜色"/>
-        <Plc field="star" title="评分"/>
-        <PlcOperation operations={operations}/>
-      </Table>
-    </DemoRow>
-  );
-});
-
-export const demo2 = designPage(() => {
-
-  const data = DATA.slice(0, 3);
-
-  const operations: iTableOperation[] = [
-    { label: '复制', position: 'inner', handler: ({ row }) => {$message(`复制：` + row.name);} },
-    { label: '删除', position: 'inner', handler: ({ row }) => {$message(`删除：` + row.name);}, show: ({ row }) => !!row.star && row.star > 4 },
-  ];
-
-  return () => (
-    <DemoRow title="动态显示的按钮">
-      <Alert label="删除按钮评分小于4则隐藏" style={{ marginBottom: '12px' }}/>
-      <Table data={data}>
-        <Plc field="id" title="编号"/>
-        <Plc field="name" title="名称"/>
-        <Plc field="date" title="日期(order=6)" order="6"/>
-        <Plc field="color" title="颜色"/>
-        <Plc field="star" title="评分"/>
-        <PlcOperation operations={operations}/>
-      </Table>
-    </DemoRow>
-  );
-});
-
-export const demo3 = designPage(() => {
-
-  const data = DATA.slice(0, 3);
-
-  const operations: iTableOperation[] = [
-    { label: '复制', position: 'inner', handler: ({ row }) => {$message(`复制：` + row.name);} },
-    { label: '删除', position: 'inner', handler: ({ row }) => {$message(`删除：` + row.name);}, disabled: ({ row }) => !row.star || row.star < 4 },
-  ];
-
-  return () => (
-    <DemoRow title="动态禁用的按钮">
-      <Alert label="删除按钮评分小于4则禁用" style={{ marginBottom: '12px' }}/>
-      <Table data={data}>
-        <Plc field="id" title="编号"/>
-        <Plc field="name" title="名称"/>
-        <Plc field="date" title="日期(order=6)" order="6"/>
-        <Plc field="color" title="颜色"/>
-        <Plc field="star" title="评分"/>
-        <PlcOperation operations={operations}/>
-      </Table>
-    </DemoRow>
-  );
-});
-
-export const demo4 = designPage(() => {
-
-  const data = DATA.slice(0, 10);
-
-  const operations: iTableOperation[] = [
-    { label: '复制', position: 'inner', handler: ({ row }) => {$message(`复制：` + row.name);} },
-    { label: '删除', position: 'inner', handler: ({ row }) => {$message(`删除：` + row.name);}, show: ({ row }) => !!row.star && row.star > 4 },
-    { label: '订阅', position: 'inner', handler: ({ row }) => {$message(`订阅：` + row.name);}, show: ({ row }) => !!row.star && row.star > 3 },
-    { label: '收藏', position: 'inner', handler: ({ row }) => {$message(`收藏：` + row.name);}, show: ({ row }) => !!row.star && row.star > 2 },
-    { label: '发布', position: 'inner', handler: ({ row }) => {$message(`发布：` + row.name);}, show: ({ row }) => !!row.star && row.star > 1 },
-  ];
-
-  return () => (
-    <DemoRow title="按钮自动折叠">
-      <Table data={data}>
-        <Plc field="id" title="编号"/>
-        <Plc field="name" title="名称"/>
-        <Plc field="date" title="日期(order=6)" order="6"/>
-        <Plc field="color" title="颜色"/>
-        <Plc field="star" title="评分"/>
-        <PlcOperation operations={operations}/>
-      </Table>
-    </DemoRow>
-  );
-});
-
-export const demo10 = designPage(() => {
-
-  const state = reactive({
-    data: DATA,
-    size: undefined as any,
-    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: undefined,
-      bodyRowHeight: undefined,
-      border: false,
-      virtual: true,
-    },
-    plc: {
-      width: 200,
-      align: 'left' as any,
-      init: true,
-      order: 5,
-      hide: undefined,
-    },
-    editNode: null as null | iTableNode,
-    onDblclickCell: (node: iTableNode) => {
-      console.log('node', node);
-      if (!!state.editNode) {
-        if (node === state.editNode) {
-          // node.saveEdit();
-          // node.closeEdit();
-          state.editNode = null;
-          return;
-        } else {
-          // state.editNode.cancelEdit();
-        }
-      }
-
-      // node.enableEdit();
-      state.editNode = node;
-    },
-  });
-
-  const operations: iTableOperation[] = [
-    {
-      label: '外部按钮一',
-      handler: () => {
-        $message('外部按钮一');
-      },
-    },
-    {
-      label: '外部按钮二',
-      handler: () => {
-        $message('外部按钮二');
-      },
-    },
-    {
-      label: '复制',
-      position: 'inner',
-      handler: ({ row }) => {
-        $message('复制' + row.name);
-      },
-    },
-    {
-      label: '删除',
-      position: 'inner',
-      handler: ({ row }) => {
-        $message('删除' + row.name);
-      },
-    },
-    {
-      label: '发布',
-      position: 'inner',
-      handler: ({ row }) => {
-        $message('发布' + row.name);
-      },
-    },
-    {
-      label: '订阅',
-      position: 'inner',
-      handler: ({ row }) => {
-        $message('订阅' + row.name);
-      },
-    },
-    {
-      label: '收藏',
-      position: 'inner',
-      handler: ({ row }) => {
-        $message('收藏' + row.name);
-      },
-    },
-  ];
-
-  return () => (
-    <DemoRow title={'切换列'}>
-      <Form column={3}>
-        <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="大小尺寸">
-          <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="文本对齐方式">
-          <RadioGroup v-model={state.plc.align}>
-            <Radio label="left" val="left"/>
-            <Radio label="center" val="center"/>
-            <Radio label="right" val="right"/>
-          </RadioGroup>
-        </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="order(名称)">
-            <InputNumber v-model={state.plc.order}/>
-          </FormItem>
-          <FormItem label="hide:(评分)">
-            <Toggle v-model={state.plc.hide}/>
-          </FormItem>
-        </>}
-      </Form>
-      <OuterOperation operations={operations}/>
-      <Table
-        data={state.data}
-        summaryData={state.other.hasSummaryData ? state.summaryData : undefined}
-        onDblclickCell={state.onDblclickCell}
-        {...state.props}
-        /*不加这个key，没有问题，还很流畅*/
-        // key={state.other.groupHead ? '1' : '2'}
-        size={state.size}
-        showRows={10}
-        virtual={state.props.virtual}
-      >
-
-        {!!state.other.groupHead && <>
-          <Plc title={'普通文本列'} field={'id'}/>
-          <Plc title={'设置宽度'} field={'id'} width={state.plc.width} align={state.plc.align}/>
-          <Plc title={'大小'} field={'size'} align={state.plc.align}/>
-          <PlcGroup title="联系方式">
-            <Plc title={'地址'} field={'addr'} align={state.plc.align}/>
-            <Plc title={'链接'} field={'url'} align={state.plc.align}/>
-          </PlcGroup>
-          <PlcGroup title={'地址'} align={state.plc.align}>
-            <Plc field="date" title="日期" align={state.plc.align}/>
-            {!!state.plc.init && <Plc field="name" title="名称" align={state.plc.align}/>}
-            <Plc field="color" title="颜色" align={state.plc.align}/>
-          </PlcGroup>
-        </>}
-        {!state.other.groupHead && <>
-          <Plc field="id" title="编号"/>
-          <Plc field="name" title="名称"/>
-          <Plc field="id" title="编号(order=4)" order="4" align={state.plc.align}/>
-          <Plc field="size" title="大小" align={state.plc.align}/>
-          {!!state.plc.init && <Plc field="name" title="名称" order={state.plc.order} align={state.plc.align}/>}
-          <Plc field="date" title="日期(order=6)" order="6" align={state.plc.align}/>
-          <Plc field="color" title="颜色" align={state.plc.align}/>
-          <Plc field="star" title="评分" hide={state.plc.hide} align={state.plc.align}/>
-        </>}
-        <PlcOperation operations={operations}/>
-      </Table>
-    </DemoRow>
-  );
-});

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

@@ -1,220 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Checkbox, Form, FormItem, InputNumber, Plc, PlcGroup, Radio, RadioGroup, Segment, SegmentGroup, Table, Toggle} from "../../../../packages";
-import DATA from '../../../data/data-1.json';
-import {iTableNode} from "../../../../packages/components/Table/table/utils/table.utils";
-
-
-export const demo1 = designPage(() => {
-
-  const state = reactive({
-    data: DATA,
-    size: undefined as any,
-    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: undefined,
-      bodyRowHeight: undefined,
-      border: false,
-      virtual: false,
-    },
-    plc: {
-      width: 200,
-      align: 'left' as any,
-      init: true,
-      order: 5,
-      hide: undefined,
-    },
-    editNode: null as null | iTableNode,
-    onDblclickCell: (node: iTableNode) => {
-      console.log('node', node);
-      if (!!state.editNode) {
-        if (node === state.editNode) {
-          // node.saveEdit();
-          // node.closeEdit();
-          state.editNode = null;
-          return;
-        } else {
-          // state.editNode.cancelEdit();
-        }
-      }
-
-      // node.enableEdit();
-      state.editNode = node;
-    },
-  });
-
-  return () => (
-    <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="大小尺寸">
-          <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="文本对齐方式">
-          <RadioGroup v-model={state.plc.align}>
-            <Radio label="left" val="left"/>
-            <Radio label="center" val="center"/>
-            <Radio label="right" val="right"/>
-          </RadioGroup>
-        </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="order(名称)">
-            <InputNumber v-model={state.plc.order}/>
-          </FormItem>
-          <FormItem label="hide:(评分)">
-            <Toggle v-model={state.plc.hide}/>
-          </FormItem>
-        </>}
-      </Form>
-      <Table
-        data={state.data}
-        summaryData={state.other.hasSummaryData ? state.summaryData : undefined}
-        onDblclickCell={state.onDblclickCell}
-        {...state.props}
-        /*不加这个key，没有问题，还很流畅*/
-        // key={state.other.groupHead ? '1' : '2'}
-        size={state.size}
-        showRows={10}
-        virtual={state.props.virtual}
-      >
-
-        {!!state.other.groupHead && <>
-          <Plc title={'普通文本列'} field={'id'}/>
-          <Plc title={'设置宽度'} field={'id'} width={state.plc.width} align={state.plc.align}/>
-          <Plc title={'大小'} field={'size'} align={state.plc.align}/>
-          <PlcGroup title="联系方式">
-            <Plc title={'地址'} field={'addr'} align={state.plc.align}/>
-            <Plc title={'链接'} field={'url'} align={state.plc.align}/>
-          </PlcGroup>
-          <PlcGroup title={'地址'} align={state.plc.align}>
-            <Plc field="date" title="日期" align={state.plc.align}/>
-            {!!state.plc.init && <Plc field="name" title="名称" align={state.plc.align}/>}
-            <Plc field="color" title="颜色" align={state.plc.align}/>
-          </PlcGroup>
-        </>}
-        {!state.other.groupHead && <>
-          <Plc field="id" title="编号(order=4)" order="4" align={state.plc.align}/>
-          <Plc field="size" title="大小" align={state.plc.align}/>
-          {!!state.plc.init && <Plc field="name" title="名称" order={state.plc.order} align={state.plc.align}/>}
-          <Plc field="date" title="日期(order=6)" order="6" align={state.plc.align}/>
-          <Plc field="color" title="颜色" align={state.plc.align}/>
-          <Plc field="star" title="评分" hide={state.plc.hide} align={state.plc.align}/>
-        </>}
-      </Table>
-    </DemoRow>
-  );
-});
-
-const data = DATA.slice(0, 15);
-
-export const DemoTableBasic = designPage(() => {
-  return () => (
-    <DemoRow title="基本">
-      <div style={{ width: '50%' }}>
-        <Table data={data} showRows={10}>
-          <Plc field="id" title="ID"/>
-          <Plc field="name" title="名称"/>
-          <Plc field="date" title="日期"/>
-          <Plc field="color" title="颜色"/>
-          <Plc field="size" title="大小"/>
-        </Table>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const DemoTableHorizontalScroll = designPage(() => {
-  return () => (
-    <DemoRow title="横向纵向滚动">
-      <div style={{ width: '50%' }}>
-        <Table data={data} showRows={10} size="small">
-          <Plc field="name" title="名称"/>
-          <Plc field="date" title="日期"/>
-          <Plc field="color" title="颜色"/>
-          <Plc field="size" title="大小"/>
-          <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"/>
-          <Plc field="flag" title="标识"/>
-        </Table>
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const DemoTableAutoHeight = designPage(() => {
-  return () => (
-    <DemoRow title="自动高度">
-      <div style={{ width: '50%' }}>
-        <Table data={data} size="mini">
-          <Plc field="name" title="名称"/>
-          <Plc field="date" title="日期"/>
-          <Plc field="color" title="颜色"/>
-          <Plc field="size" title="大小"/>
-          <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"/>
-          <Plc field="flag" title="标识"/>
-        </Table>
-      </div>
-    </DemoRow>
-  );
-});

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

@@ -1,78 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import DATA from '../../../data/data-1.json';
-import {Button, ButtonGroup, Checkbox, Plc, PlcCheck, PlcIndex, Table} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-
-  const data = DATA.slice(0, -2);
-  const summaryData = DATA.slice(DATA.length - 2);
-
-  const state = reactive({
-    checked: null as any,
-    toggleOnClickRow: false,
-  });
-
-  return () => (
-    <DemoRow title="单选">
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label={!!state.checked ? `已选中:${state.checked.name}` : '未选中节点'}/>
-        <Button label="选中第三条数据" onClick={() => state.checked = data[2]}/>
-        <Button>
-          <Checkbox v-model={state.toggleOnClickRow} label="点击行的时候选中"/>
-        </Button>
-      </ButtonGroup>
-      <Table
-        data={data}
-        summaryData={summaryData}
-        showRows={10}
-      >
-        <PlcCheck field="id" v-model={state.checked} toggleOnClickRow={state.toggleOnClickRow} multiple={false}/>
-        <Plc field="id" title="编号"/>
-        <Plc field="size" title="大小"/>
-        <Plc field="name" title="名称"/>
-        <Plc field="date" title="日期"/>
-        <Plc field="color" title="颜色"/>
-        <Plc field="star" title="评分"/>
-      </Table>
-    </DemoRow>
-  );
-});
-
-
-export const demo2 = designPage(() => {
-
-  const data = DATA.slice(0, -2);
-  const summaryData = DATA.slice(DATA.length - 2);
-
-  const state = reactive({
-    checked: null as any,
-    toggleOnClickRow: true,
-  });
-
-  return () => (
-    <DemoRow title="多选">
-      <ButtonGroup style={{ margin: '4px 0' }}>
-        <Button label={!!state.checked ? `已选中:${state.checked?.map((i: any) => i.name).join(',')}` : '未选中节点'}/>
-        <Button label="选中第三条数据" onClick={() => state.checked = [data[2]]}/>
-        <Button>
-          <Checkbox v-model={state.toggleOnClickRow} label="点击行的时候选中"/>
-        </Button>
-      </ButtonGroup>
-      <Table
-        data={data}
-        summaryData={summaryData}
-        showRows={10}
-      >
-        <PlcCheck field="id" v-model={state.checked} toggleOnClickRow={state.toggleOnClickRow}/>
-        <PlcIndex/>
-        <Plc field="id" title="编号"/>
-        <Plc field="size" title="大小"/>
-        <Plc field="name" title="名称"/>
-        <Plc field="date" title="日期"/>
-        <Plc field="color" title="颜色"/>
-        <Plc field="star" title="评分"/>
-      </Table>
-    </DemoRow>
-  );
-});

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

@@ -1,18 +0,0 @@
-.custom-row {
-  &.custom-row-status-active {
-    td {
-      background-color: rgba(#3E97EC, 0.1) !important;
-    }
-  }
-}
-
-.custom-cell {
-  &.custom-cell-status-active {
-    background-color: rgba(#3E97EC, 0.1) !important;
-  }
-}
-
-.custom-head-cell-clz {
-  background-color: #3E97EC !important;
-  color: white !important;
-}