plain-design 1.0.0-beta.33 → 1.0.0-beta.35

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

@@ -1,82 +0,0 @@
-import {designComponent, reactive} from "plain-design-composition";
-import React from "react";
-import './DemoList.scss';
-import {shuffle} from "plain-utils/object/shuffle";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Button, ButtonGroup, List} from "../../../../packages";
-
-export default designComponent({
-  setup() {
-
-    let count = 0;
-
-    const animations = [
-      'elevator',
-      'fade',
-      'accordionVertical',
-      'accordionHorizontal',
-      'none',
-      undefined,
-    ] as any[];
-
-    const state = reactive({
-      cities: [
-        { id: '广州市', name: '广州市' },
-        { id: '上海市', name: '上海市' },
-        { id: '北京市', name: '北京市' },
-        { id: '深圳市', name: '深圳市' },
-        { id: '长沙市', name: '长沙市' },
-        { id: '南京市', name: '南京市' },
-      ],
-      animations: animations[0],
-    });
-
-    const handler = {
-      add: (index: number) => {
-        const item = state.cities[index];
-        if (!item) return;
-        state.cities.splice(index + 1, 0, {
-          id: `count_${count++}`,
-          name: `${item.id}_${count}`,
-        });
-      },
-      remove: (index: number) => {
-        state.cities.splice(index, 1);
-      },
-    };
-
-    return () => (
-      <div className={'demo-list'}>
-        <DemoRow title={'基本用法，设置动画'}>
-          <ButtonGroup>
-            <Button onClick={() => handler.add(0)}>add</Button>
-            <Button onClick={() => handler.remove(0)}>remove</Button>
-            <Button onClick={() => state.cities = shuffle(state.cities)}>shuffle</Button>
-          </ButtonGroup>
-        </DemoRow>
-        <DemoRow title={'动画'}>
-          {animations.map(ani => (
-            <Button label={String(ani)} active={state.animations === ani} key={String(ani)} onClick={() => state.animations = ani}/>
-          ))}
-        </DemoRow>
-        <DemoRow>
-          <List enterAnimation={state.animations} leaveAnimation={state.animations}>
-            {state.cities.map((city, index) => (
-              <div className={"test-item"} key={city.name}>
-                <span>{city.name}</span>
-                <div style={{ position: 'absolute', right: '8px', bottom: '8px' }}>
-                  <Button label={'add'} status={'success'} size={'mini'} style={{ marginRight: '8px' }}
-                          onClick={() => handler.add(index)}
-                  />
-                  <Button label={'remove'} status={'success'} size={'mini'}
-                          onClick={() => handler.remove(index)}
-                  />
-                </div>
-              </div>)
-            )}
-          </List>
-        </DemoRow>
-      </div>
-    );
-  },
-});

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

@@ -1,86 +0,0 @@
-import {designPage, getComponentCls, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Button, Checkbox, Loading, LoadingMask} from "../../../../packages";
-import {PlainLogo} from 'plain-icons/src/packages/component/logo/react';
-
-export const demo1 = designPage(() => () => (
-  <DemoRow title="基本用法">
-    <Loading/> <span>loading...</span>
-  </DemoRow>
-));
-export const demo2 = designPage(() => () => (
-  <DemoRow title="类型">
-    <Loading type="alpha"/>
-    <Loading type="beta"/>
-    <Loading type="delta"/>
-    <Loading type="gamma"/>
-    <Loading type="epsilon"/>
-    <Loading type="zeta"/>
-    <Loading type="eta"/>
-    <Loading type="thet"/>
-    <Loading type="iot"/>
-    <Loading type="kappa"/>
-    <PlainLogo loading/>
-  </DemoRow>
-));
-export const demo3 = designPage(() => () => (
-  <DemoRow title="控制字体大小">
-    <Loading type="alpha" style={{ fontSize: '32px' }}/>
-    <Loading type="beta" style={{ fontSize: '32px' }}/>
-    <Loading type="gamma" style={{ fontSize: '32px' }}/>
-    <Loading type="delta" style={{ fontSize: '32px' }}/>
-    <Loading type="epsilon" style={{ fontSize: '32px' }}/>
-    <Loading type="zeta" style={{ fontSize: '32px' }}/>
-    <Loading type="eta" style={{ fontSize: '32px' }}/>
-    <Loading type="thet" style={{ fontSize: '32px' }}/>
-    <Loading type="iot" style={{ fontSize: '32px' }}/>
-    <Loading type="kappa" style={{ fontSize: '32px' }}/>
-    <PlainLogo loading style={{ fontSize: '32px' }}/>
-  </DemoRow>
-));
-export const demo4 = designPage(() => () => (
-  <DemoRow title="控制字体颜色">
-    <Loading type="alpha" style={{ color: '#511f9b' }}/>
-    <Loading type="beta" style={{ color: '#511f9b' }}/>
-    <Loading type="gamma" style={{ color: '#511f9b' }}/>
-    <Loading type="delta" style={{ color: '#511f9b' }}/>
-    <Loading type="epsilon" style={{ color: '#511f9b' }}/>
-    <Loading type="zeta" style={{ color: '#511f9b' }}/>
-    <Loading type="eta" style={{ color: '#511f9b' }}/>
-    <Loading type="thet" style={{ color: '#511f9b' }}/>
-    <Loading type="iot" style={{ color: '#511f9b' }}/>
-    <Loading type="kappa" style={{ color: '#511f9b' }}/>
-  </DemoRow>
-));
-export const demo5 = designPage(() => () => (
-  <DemoRow title="预定义颜色">
-    <Loading status="secondary"/>
-    <Loading status="primary"/>
-    <Loading status="success"/>
-    <Loading status="warn"/>
-    <Loading status="error"/>
-  </DemoRow>
-));
-export const demo6 = designPage(() => {
-
-  const state = reactive({
-    flag1: {
-      loading: true,
-      init: true,
-    },
-  });
-
-  return () => (
-    <DemoRow title={"组件调用loading-mask"}>
-      <Checkbox label="init content" v-model={state.flag1.init}/>
-      <Checkbox label="open mask" v-model={state.flag1.loading}/>
-      <p>如果父节点的position不为fixed、relative、absolute，loading-mask会自动将父节点的样式设置为 relative</p>
-      {!!state.flag1.init && (
-        <div style={{ height: '300px', width: '300px', backgroundColor: `var(--${getComponentCls('secondary-1')})` }}>
-          <Button label={'this is button'}/>
-          <LoadingMask v-model={state.flag1.loading} message={'loading...'}/>
-        </div>
-      )}
-    </DemoRow>
-  );
-});

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

@@ -1,269 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Checkbox, InputNumber} from "../../../../packages";
-import {DemoLine} from "../../Demo/DemoLine";
-
-export const demo1 = designPage(() => {
-  const state = reactive({
-    val: {} as any
-  });
-  return () => (
-    <DemoRow title={'基本用法'}>
-      <InputNumber width="200" v-model={state.val[0]}/>
-      <InputNumber width="200" v-model={state.val[0]}/>
-      {state.val[0]}
-    </DemoRow>
-  );
-});
-
-export const demo2 = designPage(() => {
-  const state = reactive({
-    val: {} as any
-  });
-  return () => (
-    <DemoRow title={'最大最小值'}>
-      <DemoLine title={'max：10'}>
-        <InputNumber width="200" v-model={state.val[1]} max={10}/>
-        {state.val[1]}
-      </DemoLine>
-      <DemoLine title={'min：1'}>
-        <InputNumber width="200" v-model={state.val[2]} min={1}/>
-        {state.val[2]}
-      </DemoLine>
-      <DemoLine title={'max：10, min：1'}>
-        <InputNumber width="200" v-model={state.val[3]} max={10} min={1}/>
-        {state.val[3]}
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-export const demo3 = designPage(() => {
-  const state = reactive({
-    val: {} as any
-  });
-  return () => (
-    <DemoRow title={'计步器步长 step:10'}>
-      <InputNumber width="200" v-model={state.val[4]} step={10}/>
-      {state.val[4]}
-    </DemoRow>
-  );
-});
-
-export const demo4 = designPage(() => {
-  const state = reactive({
-    val: {} as any
-  });
-  return () => (
-    <DemoRow title={'stepStrictly，step=10; 限制只能输入计步器步长的倍数'}>
-      <InputNumber width="200" v-model={state.val[5]} step={10} stepStrictly/>
-      {state.val[5]}
-    </DemoRow>
-  );
-});
-
-export const demo5 = designPage(() => {
-  const state = reactive({
-    val: {} as any
-  });
-  return () => (
-    <DemoRow title={'精度'}>
-      <DemoLine title={'整数：precision=0'}>
-        <InputNumber width="200" v-model={state.val[6]} precision={0}/>
-        {state.val[6]}
-      </DemoLine>
-      <DemoLine title={'一位小数:precision = 1'}>
-        <InputNumber width="200" v-model={state.val[6]} precision={1}/>
-        {state.val[6]}
-      </DemoLine>
-      <DemoLine title={'两位小数:precision = 2'}>
-        <InputNumber width="200" v-model={state.val[6]} precision={2}/>
-        {state.val[6]}
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-export const demo6 = designPage(() => {
-  const state = reactive({
-    val: {} as any
-  });
-  return () => (
-    <DemoRow title={'按钮类型'}>
-      <InputNumber width="200" v-model={state.val[7]} button="right"/>
-      <br/>
-      <br/>
-      <InputNumber width="200" v-model={state.val[7]} button="button"/>
-      <br/>
-      <br/>
-      <InputNumber width="120" v-model={state.val[7]} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
-      <br/>
-      <br/>
-      <InputNumber width="200" v-model={state.val[7]} button="resize"/>
-      <br/>
-      <br/>
-      <InputNumber width="200" v-model={state.val[7]} button={null}/>
-      <br/>
-      <br/>
-      {state.val[7]}
-    </DemoRow>
-  );
-});
-
-export const demo7 = designPage(() => {
-  const state = reactive({
-    val: {} as any
-  });
-  return () => (
-    <DemoRow title={'前后插槽'}>
-      <InputNumber align="right" width="200" v-model={state.val[7]} button="right">
-        {{
-          prefix: () => <span>距离</span>,
-          suffix: () => <span>%</span>,
-        }}
-      </InputNumber>
-      <br/>
-      <br/>
-      <InputNumber align="right" width="200" v-model={state.val[7]} button="button">
-        {{
-          prefix: () => <span>距离</span>,
-          suffix: () => <span>%</span>,
-        }}
-      </InputNumber>
-      <br/>
-      <br/>
-      <InputNumber align="right" width="200" v-model={state.val[7]} button={null}>
-        {{
-          prefix: () => <span>距离</span>,
-          suffix: () => <span>%</span>,
-        }}
-      </InputNumber>
-      <br/>
-      <br/>
-      {state.val[7]}
-    </DemoRow>
-  );
-});
-
-export const demo8 = designPage(() => {
-  const state = reactive({
-    val: {} as any
-  });
-  return () => (
-    <DemoRow title={'禁用与只读'}>
-      <Checkbox label={'开关'} v-model={state.val[8]}/>
-      <DemoLine title={'禁用'}>
-        <InputNumber width="200" disabled={state.val[8]} v-model={state.val[9]}/>
-        {state.val[9]}
-      </DemoLine>
-      <DemoLine title={'只读'}>
-        <InputNumber width="200" readonly={state.val[8]} v-model={state.val[10]}/>
-        {state.val[10]}
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-export const demo9 = designPage(() => {
-  const state = reactive({
-    val: {} as any
-  });
-  return () => (
-    <DemoRow title={'大小，形状以及状态'}>
-      <InputNumber width="120" size={'mini'} status={'primary'}/>
-      <InputNumber width="120" size={'small'} status={'success'}/>
-      <InputNumber width="120" size={'normal'} status={'warn'}/>
-      <InputNumber width="120" size={'large'} status={'error'}/>
-    </DemoRow>
-  );
-});
-
-export const demo10 = designPage(() => {
-  const state = reactive({
-    val: {} as any
-  });
-  return () => (
-    <DemoRow title={'允许输入单位'}>
-      <p>允许输入单位px，em以及%</p>
-      <InputNumber width="200" button="resize" placeholder="px,em,%" v-model={state.val[12]} availableUnits={['px', 'em', '%']}/>{state.val[12]}
-      <br/>
-      <br/>
-      <p>没有值的时候，点击add或者sub的默认单位为px</p>
-      <InputNumber width="200" placeholder="px,em,%; defaultUnit=px" defaultUnit="px" v-model={state.val[12]} availableUnits={['px', 'em', '%']}/>
-      <InputNumber width="200" v-model={state.val[12]} button="resize" placeholder="px,em,%; defaultUnit=px" defaultUnit="px" availableUnits={['px', 'em', '%']}/>{state.val[12]}
-      <p>必须带单位，否则视输入值无效，注意需要设置默认单位</p>
-      <InputNumber width="200" placeholder="px,em,%; defaultUnit=px" defaultUnit="px" v-model={state.val[12]} availableUnits={['px', 'em', '%']} requireUnit/>
-      <p>手动判断输入的值是否有效，比如以2开头的值就无效</p>
-      <InputNumber width="200" placeholder="px,em,%; defaultUnit=px" defaultUnit="px" v-model={state.val[12]} availableUnits={['px', 'em', '%']} requireUnit isValueEffective={(val) => val == null || String(val).charAt(0) !== '2'}/>
-    </DemoRow>
-  );
-});
-
-export const demo11 = designPage(() => {
-  const state = reactive({
-    val: {} as any
-  });
-  return () => (
-    <DemoRow title={'多值'}>
-      <InputNumber width="300" v-model={state.val[0]} multiple/>
-      <InputNumber width="300" v-model={state.val[0]} multiple inputAttrs={{ tagsWrap: true }}/>
-      {JSON.stringify(state.val[0])}
-    </DemoRow>
-  );
-});
-
-
-export const demo12 = designPage(() => {
-  const state = reactive({
-    val: {} as any
-  });
-  return () => (
-    <DemoRow title={'多值:arraystring'}>
-      <InputNumber width="300" v-model={state.val[0]} multiple valueType="arraystring"/>
-      <InputNumber width="300" v-model={state.val[0]} multiple valueType="arraystring" inputAttrs={{ tagsWrap: true }}/>
-      {JSON.stringify(state.val[0])}
-    </DemoRow>
-  );
-});
-export const demo13 = designPage(() => {
-  const state = reactive({
-    val: {} as any
-  });
-  return () => (
-    <DemoRow title={'多值:arrayjson'}>
-      <InputNumber width="300" v-model={state.val[0]} multiple valueType="arrayjson"/>
-      <InputNumber width="300" v-model={state.val[0]} multiple valueType="arrayjson" inputAttrs={{ tagsWrap: true }}/>
-      {JSON.stringify(state.val[0])}
-    </DemoRow>
-  );
-});
-
-export const demo14 = designPage(() => {
-  const state = reactive({
-    val: {} as any
-  });
-  return () => (
-    <DemoRow title={'多值:带单位'}>
-      <InputNumber
-        width="300"
-        v-model={state.val[0]}
-        multiple
-        button="resize"
-        placeholder="px,em,%; defaultUnit=px"
-        defaultUnit="px"
-        availableUnits={['px', 'em', '%']}
-      />
-      <InputNumber
-        width="300"
-        v-model={state.val[0]}
-        multiple
-        inputAttrs={{ tagsWrap: true }}
-        button="resize"
-        placeholder="px,em,%; defaultUnit=px"
-        defaultUnit="px"
-        availableUnits={['px', 'em', '%']}
-      />
-      {JSON.stringify(state.val[0])}
-    </DemoRow>
-  );
-});

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

@@ -1,164 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Pagination} from "../../../../packages";
-import {DemoLine} from "../../Demo/DemoLine";
-
-export default designPage(() => {
-
-  const val = reactive({
-    val: (() => {
-      let val = [];
-      for (let i = 0; i < 40; i++) {
-        val.push({
-          current: 1,
-          size: 20,
-        });
-      }
-      val[5].current = 7;
-      val[6].current = 3;
-      val[7].current = 10;
-      return val;
-    })() as any
-  }).val;
-
-  return () => (
-    <div>
-      <DemoRow title={'基本用法'}>
-        <Pagination
-          total={20000}
-          pageSize={val[0].size}
-          currentPage={val[0].current}
-          onCurrentChange={page => val[0].current = page}
-          onJump={page => val[0].current = page}
-          onSizeChange={size => val[0].size = size}
-        />
-        <div>{JSON.stringify(val[0])}</div>
-      </DemoRow>
-      <DemoRow title={'大小尺寸'}>
-        <DemoLine title={'large'}/>
-        <Pagination
-          total={200}
-          pageSize={val[1].size}
-          currentPage={val[1].current}
-          onCurrentChange={page => val[1].current = page}
-          onJump={page => val[1].current = page}
-          onSizeChange={size => val[1].size = size}
-          size={'large'}
-        />
-        <DemoLine title={'normal'}/>
-        <Pagination
-          total={200}
-          pageSize={val[2].size}
-          currentPage={val[2].current}
-          onCurrentChange={page => val[2].current = page}
-          onJump={page => val[2].current = page}
-          onSizeChange={size => val[2].size = size}
-          size={'normal'}
-        />
-        <DemoLine title={'small'}/>
-        <Pagination
-          total={200}
-          pageSize={val[3].size}
-          currentPage={val[3].current}
-          onCurrentChange={page => val[3].current = page}
-          onJump={page => val[3].current = page}
-          onSizeChange={size => val[3].size = size}
-          size={'small'}
-        />
-        <DemoLine title={'mini'}/>
-        <Pagination
-          total={200}
-          pageSize={val[31].size}
-          currentPage={val[31].current}
-          onCurrentChange={page => val[31].current = page}
-          onJump={page => val[31].current = page}
-          onSizeChange={size => val[31].size = size}
-          size={'mini'}
-        />
-      </DemoRow>
-      <DemoRow title={'页码折叠形式'}>
-        <DemoLine title={'前后不折叠(总页数小于等于页码按钮个数)'}/>
-        <Pagination
-          totalPage={7}
-          pageSize={val[4].size}
-          currentPage={val[4].current}
-          onCurrentChange={page => val[4].current = page}
-          onJump={page => val[4].current = page}
-          onSizeChange={size => val[4].size = size}
-        />
-        <DemoLine title={'前页折叠，当前页接近尾部位置'}/>
-        <Pagination
-          total={200}
-          pageSize={val[5].size}
-          currentPage={val[5].current}
-          onCurrentChange={page => val[5].current = page}
-          onJump={page => val[5].current = page}
-          onSizeChange={size => val[5].size = size}
-        />
-        <DemoLine title={'后页折叠，当前页接近起始位置'}/>
-        <Pagination
-          total={200}
-          pageSize={val[6].size}
-          currentPage={val[6].current}
-          onCurrentChange={page => val[6].current = page}
-          onJump={page => val[6].current = page}
-          onSizeChange={size => val[6].size = size}
-        />
-        <DemoLine title={'前后页折叠，当前页在中间位置'}/>
-        <Pagination
-          total={400}
-          pageSize={val[7].size}
-          currentPage={val[7].current}
-          onCurrentChange={page => val[7].current = page}
-          onJump={page => val[7].current = page}
-          onSizeChange={size => val[7].size = size}
-        />
-      </DemoRow>
-      <DemoRow title={'自定义布局'}>
-        <Pagination
-          total={400}
-          pageSize={val[8].size}
-          currentPage={val[8].current}
-          onCurrentChange={page => val[8].current = page}
-          onJump={page => val[8].current = page}
-          onSizeChange={size => val[8].size = size}
-          layout="sizes,jumper,prev,next,pager,loading,blank,total,slot"
-        />
-      </DemoRow>
-      <DemoRow title={'上下页文本'}>
-        <Pagination
-          total={400}
-          pageSize={val[8].size}
-          currentPage={val[8].current}
-          onCurrentChange={page => val[8].current = page}
-          onJump={page => val[8].current = page}
-          onSizeChange={size => val[8].size = size}
-          prevText={'上一页'}
-          nextText={'下一页'}
-        />
-      </DemoRow>
-      <DemoRow title={'加载状态'}>
-        <Pagination
-          total={400}
-          pageSize={val[8].size}
-          currentPage={val[8].current}
-          onCurrentChange={page => val[8].current = page}
-          onJump={page => val[8].current = page}
-          onSizeChange={size => val[8].size = size}
-          loading
-        />
-      </DemoRow>
-      <DemoRow title={'禁用'}>
-        <Pagination
-          total={400}
-          pageSize={val[8].size}
-          currentPage={val[8].current}
-          onCurrentChange={page => val[8].current = page}
-          onJump={page => val[8].current = page}
-          onSizeChange={size => val[8].size = size}
-          disabled
-        />
-      </DemoRow>
-    </div>
-  );
-});