plain-design 1.0.0-beta.5 → 1.0.0-beta.51

package/src/pages/index/components/normal/DemoDropdown.tsx

@@ -1,463 +0,0 @@
-import {designPage} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$message, Button, ButtonGroup, Dropdown, DropdownGroup, DropdownOption, Scroll, VirtualList} from "../../../../packages";
-import AddressData from '../../../data/address.json';
-
-export const demo1 = designPage(() => {
-  return () => (
-    <DemoRow title="基本用法">
-      <Dropdown onSelect={(data) => $message('select ' + data.props.val)}>
-        {{
-          default: () => <Button label="Click to open dropdown"/>,
-          popper: () => <>
-            <DropdownOption label="选项一" val="tag-1" onClick={() => $message('click tag-1')}/>
-            <DropdownOption label="选项二" val="tag-2" onClick={() => $message('click tag-2')}/>
-            <DropdownOption label="选项三" val="tag-3" onClick={() => $message('click tag-3')}/>
-          </>
-        }}
-      </Dropdown>
-
-      <ButtonGroup style={{ display: 'inline-flex' }}>
-        <Button label="Export"/>
-        <Dropdown placement="bottom-end">
-          {{
-            default: () => <Button icon="pi-down"/>,
-            popper: () => <>
-              <DropdownOption label="export jpg" onClick={() => $message('click tag-1')}/>
-              <DropdownOption label="export pdf" onClick={() => $message('click tag-2')}/>
-              <DropdownOption label="export source file" onClick={() => $message('click tag-3')}/>
-            </>
-          }}
-        </Dropdown>
-      </ButtonGroup>
-    </DemoRow>
-  );
-});
-
-
-export const demo2 = designPage(() => {
-  return () => (
-    <DemoRow title="选项内容对其">
-      <Dropdown align="start">
-        {{
-          default: () => <Button label="Start"/>,
-          popper: () => <>
-            <DropdownOption label="hello" val="tag-1"/>
-            <DropdownOption label="hello world" val="tag-2"/>
-            <DropdownOption label="hello world, guys" val="tag-3"/>
-          </>
-        }}
-      </Dropdown>
-
-      <Dropdown align="center" placement="bottom-center">
-        {{
-          default: () => <Button label="Center"/>,
-          popper: () => <>
-            <DropdownOption label="hello" val="tag-1"/>
-            <DropdownOption label="hello world" val="tag-2"/>
-            <DropdownOption label="hello world, guys" val="tag-3"/>
-          </>
-        }}
-      </Dropdown>
-
-      <Dropdown align="end" placement="bottom-end">
-        {{
-          default: () => <Button label="End"/>,
-          popper: () => <>
-            <DropdownOption label="hello" val="tag-1"/>
-            <DropdownOption label="hello world" val="tag-2"/>
-            <DropdownOption label="hello world, guys" val="tag-3"/>
-          </>
-        }}
-      </Dropdown>
-
-    </DemoRow>
-  );
-});
-
-export const demo3 = designPage(() => {
-  return () => (
-    <DemoRow title="插槽">
-      <Dropdown align="start">
-        {{
-          default: () => <Button label="Start"/>,
-          popper: () => <>
-            <DropdownOption val="tag-1">
-              <div>1. hello</div>
-            </DropdownOption>
-            <DropdownOption val="tag-2">
-              <div>2. hello world</div>
-            </DropdownOption>
-            <DropdownOption val="tag-3">
-              <div>3. hello world, guys</div>
-            </DropdownOption>
-          </>
-        }}
-      </Dropdown>
-    </DemoRow>
-  );
-});
-
-
-export const demo4 = designPage(() => {
-  return () => (
-    <DemoRow title="滚动条">
-      <p>超过6个选项时会自动启用滚动条</p>
-      <Dropdown align="start">
-        {{
-          default: () => <Button label="Start"/>,
-          popper: () => <>
-            <DropdownOption>
-              <div>1. hello</div>
-            </DropdownOption>
-            <DropdownOption>
-              <div>2. hello world</div>
-            </DropdownOption>
-            <DropdownOption>
-              <div>3. hello world, guys</div>
-            </DropdownOption>
-            <DropdownOption>
-              <div>4. hello</div>
-            </DropdownOption>
-            <DropdownOption>
-              <div>5. hello world, guys</div>
-            </DropdownOption>
-            <DropdownOption>
-              <div>6. hello world, guys</div>
-            </DropdownOption>
-            <DropdownOption>
-              <div>7. hello world, guys</div>
-            </DropdownOption>
-            <DropdownOption>
-              <div>8. hello</div>
-            </DropdownOption>
-            <DropdownOption>
-              <div>9. hello world</div>
-            </DropdownOption>
-            <DropdownOption>
-              <div>10. hello world, guys</div>
-            </DropdownOption>
-          </>
-        }}
-      </Dropdown>
-    </DemoRow>
-  );
-});
-
-
-export const demo6 = designPage(() => {
-  return () => (
-    <DemoRow title="大小尺寸">
-      <Dropdown size="mini">
-        {{
-          default: () => <Button label="Mini" size="mini"/>,
-          popper: () => <>
-            <DropdownOption val="tag-1">
-              <div>1. hello</div>
-            </DropdownOption>
-            <DropdownOption val="tag-2">
-              <div>2. hello world</div>
-            </DropdownOption>
-            <DropdownOption val="tag-3">
-              <div>3. hello world, guys</div>
-            </DropdownOption>
-          </>
-        }}
-      </Dropdown>
-
-      <Dropdown align="start" size="small">
-        {{
-          default: () => <Button label="Small" size="small"/>,
-          popper: () => <>
-            <DropdownOption val="tag-1">
-              <div>1. hello</div>
-            </DropdownOption>
-            <DropdownOption val="tag-2">
-              <div>2. hello world</div>
-            </DropdownOption>
-            <DropdownOption val="tag-3">
-              <div>3. hello world, guys</div>
-            </DropdownOption>
-          </>
-        }}
-      </Dropdown>
-      <Dropdown align="start" size="normal">
-        {{
-          default: () => <Button label="Normal" size="normal"/>,
-          popper: () => <>
-            <DropdownOption val="tag-1">
-              <div>1. hello</div>
-            </DropdownOption>
-            <DropdownOption val="tag-2">
-              <div>2. hello world</div>
-            </DropdownOption>
-            <DropdownOption val="tag-3">
-              <div>3. hello world, guys</div>
-            </DropdownOption>
-          </>
-        }}
-      </Dropdown>
-      <Dropdown align="start" size="large">
-        {{
-          default: () => <Button label="Large" size="large"/>,
-          popper: () => <>
-            <DropdownOption val="tag-1">
-              <div>1. hello</div>
-            </DropdownOption>
-            <DropdownOption val="tag-2">
-              <div>2. hello world</div>
-            </DropdownOption>
-            <DropdownOption val="tag-3">
-              <div>3. hello world, guys</div>
-            </DropdownOption>
-          </>
-        }}
-      </Dropdown>
-    </DemoRow>
-  );
-});
-
-export const demoIcons = designPage(() => {
-  return () => (
-    <DemoRow title="选项图标">
-      <Dropdown>
-        {{
-          default: () => <Button label="option with icon"/>,
-          popper: () => <>
-            <DropdownOption icon="pi-alipay-circle">
-              <div>支付宝</div>
-            </DropdownOption>
-            <DropdownOption icon="pi-wechatpay" disabled>
-              <div>微信支付</div>
-            </DropdownOption>
-            <DropdownOption icon="pi-qq">
-              <div>财付通</div>
-            </DropdownOption>
-          </>
-        }}
-      </Dropdown>
-    </DemoRow>
-  );
-});
-
-export const demoDisabled = designPage(() => {
-  return () => (
-    <DemoRow title="禁用选项">
-      <Dropdown>
-        {{
-          default: () => <Button label="disable option"/>,
-          popper: () => <>
-            <DropdownOption val="tag-1">
-              <div>1. hello</div>
-            </DropdownOption>
-            <DropdownOption val="tag-2" disabled>
-              <div>2. hello world</div>
-            </DropdownOption>
-            <DropdownOption val="tag-3">
-              <div>3. hello world, guys</div>
-            </DropdownOption>
-          </>
-        }}
-      </Dropdown>
-    </DemoRow>
-  );
-});
-
-export const demoGroups = designPage(() => {
-  return () => (
-    <DemoRow title="选项分组">
-      <Dropdown>
-        {{
-          default: () => <Button label="group option"/>,
-          popper: () => <>
-            <DropdownGroup title="分组一"/>
-            <DropdownOption label="选项1"/>
-            <DropdownGroup title="分组二"/>
-            <DropdownOption label="选项2-1" disabled/>
-            <DropdownOption label="选项2-2"/>
-            <DropdownGroup title="分组三"/>
-            <DropdownOption label="选项3-1"/>
-            <DropdownOption label="选项3-2"/>
-            <DropdownOption label="选项3-3"/>
-          </>
-        }}
-      </Dropdown>
-    </DemoRow>
-  );
-});
-
-
-export const demoIndicateIcon = designPage(() => {
-  return () => (
-    <DemoRow title="指示图标">
-      <ButtonGroup>
-        <Button label="Button(hover)"/>
-        <Dropdown placement="bottom-end" trigger="hover">
-          {{
-            reference: ({ open }: { open?: boolean }) => <Button icon={open ? 'pi-up' : 'pi-down'}/>,
-            popper: () => <>
-              <DropdownOption label="hello"/>
-              <DropdownOption label="hello world"/>
-              <DropdownOption label="hello world, guys"/>
-            </>
-          }}
-        </Dropdown>
-      </ButtonGroup>
-    </DemoRow>
-  );
-});
-
-
-export const demoCascade = designPage(() => {
-
-  const renderCascadeDropdownOption = (item: { name: string, id: string, children?: any[] }) => {
-    const slots = !item.children ? {} : { content: () => item.children!.map(child => renderCascadeDropdownOption(child)) };
-    return (
-      <DropdownOption label={item.name} key={item.id} onClick={() => $message(item.name)}>
-        {slots}
-      </DropdownOption>
-    );
-  };
-
-  return () => (
-    <DemoRow title="级联选项">
-      <Dropdown>
-        {{
-          default: () => <Button label="Reference"/>,
-          popper: () => <>
-            <DropdownOption onClick={() => $message('option-1')} label="option-1"/>
-            <DropdownOption onClick={() => $message('option-2')}>
-              {{
-                default: () => "option-2",
-                content: () => <>
-                  <DropdownOption onClick={() => $message('option-4')} label="option-4"/>
-                  <DropdownOption onClick={() => $message('option-5')}>
-                    {{
-                      default: () => "option-5",
-                      content: () => <>
-                        <DropdownOption onClick={() => $message('option-7')} label="option-7"/>
-                        <DropdownOption onClick={() => $message('option-8')} label="option-8"/>
-                      </>
-                    }}
-                  </DropdownOption>
-                  <DropdownOption onClick={() => $message('option-6')} label="option-6"/>
-                </>,
-              }}
-            </DropdownOption>
-            <DropdownOption onClick={() => $message('option-3')} label="option-3">
-              {{
-                content: () => <>
-                  <DropdownOption onClick={() => $message('option-9')} label="option-9"/>
-                </>
-              }}
-            </DropdownOption>
-          </>
-        }}
-      </Dropdown>
-
-      <Dropdown>
-        {{
-          default: () => <Button label="pick address"/>,
-          popper: () => <>
-            {AddressData.map(item => (renderCascadeDropdownOption(item)))}
-          </>
-        }}
-      </Dropdown>
-
-      <Dropdown placement="bottom-end">
-        {{
-          default: () => <Button label="pick address(align end)"/>,
-          popper: () => <>
-            {AddressData.map(item => (renderCascadeDropdownOption(item)))}
-          </>
-        }}
-      </Dropdown>
-
-      <Dropdown trigger="hover">
-        {{
-          default: () => <Button label="pick address(hover trigger)"/>,
-          popper: () => <>
-            {AddressData.map(item => (renderCascadeDropdownOption(item)))}
-          </>
-        }}
-      </Dropdown>
-    </DemoRow>
-  );
-});
-
-
-export const demoOptionWidth = designPage(() => {
-  return () => (
-    <DemoRow title="给每个option限制宽度">
-      <Dropdown optionWidth="120px">
-        {{
-          reference: () => <Button label="Button"/>,
-          popper: () => <>
-            <DropdownOption label="hello"/>
-            <DropdownOption label="hello world"/>
-            <DropdownOption label="hello world, guys"/>
-          </>
-        }}
-      </Dropdown>
-    </DemoRow>
-  );
-});
-
-export const demoDropdownScroll = designPage(() => {
-  return () => (
-    <DemoRow title="如果手动渲染了Scroll组件，则不会自动加上Scroll组件">
-      <Dropdown>
-        {{
-          reference: () => <Button label="Button"/>,
-          popper: () => <>
-            <div style={{ width: '200px', height: '200px' }}>
-              <Scroll>
-                <DropdownOption label="hello"/>
-                <DropdownOption label="hello world"/>
-                <DropdownOption label="hello world, guys"/>
-                <DropdownOption label="hello world, guys"/>
-                <DropdownOption label="hello world, guys"/>
-                <DropdownOption label="hello world, guys"/>
-                <DropdownOption label="hello world, guys"/>
-                <DropdownOption label="hello world, guys"/>
-              </Scroll>
-            </div>
-          </>
-        }}
-      </Dropdown>
-    </DemoRow>
-  );
-});
-
-
-export const demoDropdownVirtualList = designPage(() => {
-
-  const options = new Array(10000).fill({});
-
-  return () => (
-    <DemoRow title="虚拟滚动，长列表">
-      <Dropdown>
-        {{
-          reference: () => <Button label="Button"/>,
-          popper: () => <>
-            <div style={{ width: '120px', height: '200px' }}>
-              <VirtualList data={options} size={32}>
-                {{
-                  default: (data: any) => {
-                    return (
-                      <DropdownOption
-                        key={data.index}
-                        label={`option-${data.index}`}
-                        data-vid={data.index}
-                        onClick={() => $message(`option-${data.index}`)}
-                      />);
-                  }
-                }}
-              </VirtualList>
-            </div>
-          </>
-        }}
-      </Dropdown>
-    </DemoRow>
-  );
-});

package/src/pages/index/components/normal/DemoGrid.scss

@@ -1,26 +0,0 @@
-.demo-layout {
-  .demo-row .demo-row-body > * {
-    margin-right: 0 !important;
-  }
-
-  .ct-cls {
-    background-color: plv('gray-2');
-    height: 36px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  @include prefix(grid-row) {
-
-    margin-bottom: 8px !important;
-
-    @include prefix(grid-col) {
-      &:nth-child(odd) {
-        .ct-cls {
-          background-color: plv('gray-3');
-        }
-      }
-    }
-  }
-}

package/src/pages/index/components/normal/DemoGrid.tsx

@@ -1,181 +0,0 @@
-import './DemoGrid.scss';
-import {designPage} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {GridCol, GridRow} from "../../../../packages";
-
-export default designPage(() => {
-
-  const xs = [4, 8, 12, 8];
-  return () => (
-    <div className={'demo-layout'}>
-      <DemoRow title="基本用法，一共24格">
-        <GridRow>
-          <GridCol span="12">
-            <div className="ct-cls">col-12</div>
-          </GridCol>
-          <GridCol span="12">
-            <div className="ct-cls">col-12</div>
-          </GridCol>
-        </GridRow>
-        <GridRow>
-          <GridCol span="2">
-            <div className="ct-cls">col-2</div>
-          </GridCol>
-          <GridCol span="4">
-            <div className="ct-cls">col-4</div>
-          </GridCol>
-          <GridCol span="6">
-            <div className="ct-cls">col-6</div>
-          </GridCol>
-          <GridCol span="8">
-            <div className="ct-cls">col-8</div>
-          </GridCol>
-          <GridCol span="4">
-            <div className="ct-cls">col-4</div>
-          </GridCol>
-        </GridRow>
-      </DemoRow>
-      <DemoRow title="列间隔gutter(单位px)">
-        <GridRow gutter="8">
-          <GridCol span="24">
-            <div className="ct-cls">col-24</div>
-          </GridCol>
-        </GridRow>
-        <GridRow gutter="8">
-          <GridCol span="12">
-            <div className="ct-cls">col-12</div>
-          </GridCol>
-          <GridCol span="12">
-            <div className="ct-cls">col-12</div>
-          </GridCol>
-        </GridRow>
-        <GridRow gutter="8">
-          <GridCol span="2">
-            <div className="ct-cls">col-2</div>
-          </GridCol>
-          <GridCol span="4">
-            <div className="ct-cls">col-4</div>
-          </GridCol>
-          <GridCol span="6">
-            <div className="ct-cls">col-6</div>
-          </GridCol>
-          <GridCol span="8">
-            <div className="ct-cls">col-8</div>
-          </GridCol>
-          <GridCol span="4">
-            <div className="ct-cls">col-4</div>
-          </GridCol>
-        </GridRow>
-      </DemoRow>
-
-      <DemoRow title="flex布局的栅格">
-        <GridRow type="flex" align="middle">
-          <GridCol span="2">
-            <div className="ct-cls">col-2</div>
-          </GridCol>
-          <GridCol span="4">
-            <div className="ct-cls" style={{ height: "48px" }}>col-4</div>
-          </GridCol>
-          <GridCol span="6">
-            <div className="ct-cls" style={{ height: "56px" }}>col-6</div>
-          </GridCol>
-          <GridCol span="8">
-            <div className="ct-cls" style={{ height: "48px" }}>col-8</div>
-          </GridCol>
-          <GridCol span="4">
-            <div className="ct-cls" style={{ height: "36px" }}>col-4</div>
-          </GridCol>
-        </GridRow>
-        <GridRow type="flex" justify="space-between">
-          <GridCol span="2">
-            <div className="ct-cls">col-2</div>
-          </GridCol>
-          <GridCol span="4">
-            <div className="ct-cls" style={{ height: "48px" }}>col-4</div>
-          </GridCol>
-          <GridCol span="6">
-            <div className="ct-cls" style={{ height: "56px" }}>col-6</div>
-          </GridCol>
-          <GridCol span="4">
-            <div className="ct-cls">col-4</div>
-          </GridCol>
-        </GridRow>
-        <GridRow type="flex" justify="start">
-          <GridCol span="2">
-            <div className="ct-cls">col-2</div>
-          </GridCol>
-          <GridCol span="4">
-            <div className="ct-cls" style={{ height: "48px" }}>col-4</div>
-          </GridCol>
-          <GridCol span="6">
-            <div className="ct-cls" style={{ height: "56px" }}>col-6</div>
-          </GridCol>
-          <GridCol span="4">
-            <div className="ct-cls">col-4</div>
-          </GridCol>
-        </GridRow>
-        <GridRow type="flex" align="bottom" justify="end">
-          <GridCol span="2">
-            <div className="ct-cls">col-2</div>
-          </GridCol>
-          <GridCol span="4">
-            <div className="ct-cls" style={{ height: "48px" }}>col-4</div>
-          </GridCol>
-          <GridCol span="6">
-            <div className="ct-cls" style={{ height: "56px" }}>col-6</div>
-          </GridCol>
-          <GridCol span="4">
-            <div className="ct-cls">col-4</div>
-          </GridCol>
-        </GridRow>
-      </DemoRow>
-      <DemoRow title="当使用flex布局时，可以使用order属性排序">
-        <GridRow type="flex" align="middle" gutter="8">
-          <GridCol span="2" order="1">
-            <div className="ct-cls">col-2</div>
-          </GridCol>
-          <GridCol span="4" order="2">
-            <div className="ct-cls">col-4</div>
-          </GridCol>
-          <GridCol span="6" order="4">
-            <div className="ct-cls">col-6</div>
-          </GridCol>
-          <GridCol span="8" order="3">
-            <div className="ct-cls">col-8</div>
-          </GridCol>
-          <GridCol span="4" order="5">
-            <div className="ct-cls">col-4</div>
-          </GridCol>
-        </GridRow>
-      </DemoRow>
-
-      <DemoRow title="当使用浮动布局时，可以使用pull以及push属性排序">
-        <GridRow gutter="8">
-          <GridCol span="2" push="10" xs={xs[0]}>
-            <div className="ct-cls">col-2</div>
-          </GridCol>
-          <GridCol span="4" pull="2" xs={xs[1]}>
-            <div className="ct-cls">col-4</div>
-          </GridCol>
-          <GridCol span="6" pull="2" xs={xs[2]}>
-            <div className="ct-cls">col-6</div>
-          </GridCol>
-        </GridRow>
-      </DemoRow>
-
-      <DemoRow title="响应式布局，可以用chrome把客户端变成移动端模式，当为普通模式时，分别占2,4,6格，当为移动端时，分别占4,8,12格">
-        <GridRow gutter="8">
-          <GridCol span="2" xs={xs[0]}>
-            <div className="ct-cls">col-2</div>
-          </GridCol>
-          <GridCol span="4" xs={xs[1]}>
-            <div className="ct-cls">col-4</div>
-          </GridCol>
-          <GridCol span="6" xs={xs[2]}>
-            <div className="ct-cls">col-6</div>
-          </GridCol>
-        </GridRow>
-      </DemoRow>
-    </div>
-  );
-});