plain-design 1.0.0-beta.4 → 1.0.0-beta.41

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

@@ -1,128 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Button, Checkbox, Slider} from "../../../../packages";
-import {DemoLine} from "../../Demo/DemoLine";
-
-export const demo1 = designPage(() => {
-  const state = reactive({
-    val: 20,
-  });
-  return () => (
-    <DemoRow title={'基本用法'}>
-      <Slider v-model={state.val}/>
-      {state.val}
-    </DemoRow>
-  );
-});
-
-export const demo2 = designPage(() => {
-  const state = reactive({
-    val: 20,
-  });
-  return () => (
-    <DemoRow title={'横向纵向，以及对齐方式'}>
-      <Slider vertical v-model={state.val} style={{ margin: '0 20px' }}/>
-      <Slider vertical alignEnd v-model={state.val} onChange={(val: any) => console.log('change', val)} style={{ margin: '0 20px' }}/>
-      <Slider v-model={state.val} style={{ margin: '0 20px' }}/>
-      <Slider v-model={state.val} alignEnd style={{ margin: '0 20px' }}/>
-    </DemoRow>
-  );
-});
-
-export const demo3 = designPage(() => {
-  const state = reactive({
-    val: 20,
-  });
-  return () => (
-    <DemoRow title={'状态'}>
-      <Slider v-model={state.val} status={'primary'}/>
-      <Slider v-model={state.val} status={'success'}/>
-      <Slider v-model={state.val} status={'warn'}/>
-      <Slider v-model={state.val} status={'error'}/>
-      <Slider v-model={state.val} status={'secondary'}/>
-    </DemoRow>
-  );
-});
-
-export const demo4 = designPage(() => {
-  const state = reactive({
-    val: 20,
-  });
-  return () => (
-    <DemoRow title={'设置总数'}>
-      <Slider v-model={state.val} total={1000}/>
-    </DemoRow>
-  );
-});
-
-export const demo5 = designPage(() => {
-  const state = reactive({
-    val: 20,
-  });
-  return () => (
-    <DemoRow title={'设置宽度'}>
-      <Slider v-model={state.val} width={'100px'}/>
-      <Slider v-model={state.val} width={'200px'}/>
-      <Slider v-model={state.val} width={'300px'}/>
-      <Slider v-model={state.val} full/>
-    </DemoRow>
-  );
-});
-
-export const demo6 = designPage(() => {
-  const state = reactive({
-    start: 20,
-    end: 80,
-  });
-  return () => (
-    <DemoRow title={'范围选择'}>
-      <Slider range v-model:start={state.start} v-model:end={state.end} total={200} width={'300px'}/>
-      <Button>start:{state.start}</Button>
-      <Button>end:{state.end}</Button>
-    </DemoRow>
-  );
-});
-export const demo7 = designPage(() => {
-  return () => (
-    <DemoRow title={'禁用tooltip'}>
-      <Slider tooltip={false}/>
-    </DemoRow>
-  );
-});
-export const demo8 = designPage(() => {
-  return () => (
-    <DemoRow title={'格式化tooltip'}>
-      <Slider tooltipFormatter={val => `${val}%`}/>
-    </DemoRow>
-  );
-});
-export const demo9 = designPage(() => {
-  return () => (
-    <DemoRow title={'设置最大最小值'}>
-      <Slider modelValue={50} max={80} min={20}/>
-      <Slider range max={150} min={50} start={60} end={120} total={200}/>
-    </DemoRow>
-  );
-});
-export const demo10 = designPage(() => {
-  return () => (
-    <DemoRow title={'步骤分块'}>
-      <Slider modelValue={50} step={10}/>
-      <Slider range start={60} end={120} total={200} step={10}/>
-    </DemoRow>
-  );
-});
-export const demo11 = designPage(() => {
-  const state = reactive({
-    val: true,
-  });
-  return () => (
-    <DemoRow title={'禁用与只读'}>
-      <DemoLine><Checkbox label={'禁用/只读'} v-model={state.val}/></DemoLine>
-      <DemoLine>
-        <Slider modelValue={50} disabled={state.val}/>
-        <Slider modelValue={50} readonly={state.val}/>
-      </DemoLine>
-    </DemoRow>
-  );
-});

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

@@ -1,18 +0,0 @@
-.demo-step {
-  width: 1060px;
-
-  .demo-line {
-    display: flex;
-
-    .demo-line-content {
-      flex: 1;
-    }
-  }
-
-  .custom-content-slot {
-    @include prefix(icon) {
-      margin-right: 6px;
-      font-size: 1.2em;
-    }
-  }
-}

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

@@ -1,291 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {$message, ArrowStep, ArrowStepGroup, Button, ButtonGroup, Checkbox, Icon, InputNumber, Step, StepGroup, Tooltip} from "../../../../packages";
-import {DemoRow} from "../../Demo/DemoRow";
-import {DemoLine} from "../../Demo/DemoLine";
-import './DemoStep.scss';
-
-export default designPage(() => {
-
-  const state = reactive({
-    val: {
-      1: {
-        index: 1,
-        vertical: false,
-        mini: true,
-        titleAlignBottom: true,
-      },
-      2: {
-        index: 1,
-        vertical: false,
-        mini: true,
-        titleAlignBottom: true,
-      },
-      3: {
-        index: 1,
-        vertical: false,
-        mini: true,
-        titleAlignBottom: true,
-      },
-      4: {
-        index: 1,
-        vertical: false,
-        mini: true,
-        titleAlignBottom: true,
-      },
-      5: {
-        index: 2,
-      },
-      6: {
-        index: 1,
-      },
-    },
-    showFlag: true,
-    val1: {
-      0: 1,
-      1: 2,
-      3: 'step1',
-    },
-  });
-
-  return () => {
-    return (
-      <div className={'demo-step'}>
-        <DemoRow title={'基本用法'}>
-          <DemoLine title={'当前步骤索引'}>
-            <InputNumber width="120" v-model={state.val[1].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
-            <Checkbox label={'迷你尺寸'} v-model={state.val[1].mini}/>
-            <Checkbox label={'纵向步骤条'} v-model={state.val[1].vertical}/>
-            <Checkbox label={'标题放在图标下方'} v-model={state.val[1].titleAlignBottom}/>
-            <Checkbox label={'显示[创建二维码]'} v-model={state.showFlag}/>
-          </DemoLine>
-          <DemoLine>
-            <StepGroup
-              current={state.val[1].index}
-              vertical={state.val[1].vertical}
-              mini={state.val[1].mini}
-              titleAlignBottom={state.val[1].titleAlignBottom}
-              currentStatus={state.val[1].index === 5 ? 'finish' : undefined}
-            >
-              <Step title="获取token" message="调用接口，获取token" onClick={() => $message('获取token')}/>
-              <Step title="上传logo" message="使用token上传logo图片" onClick={() => $message('上传logo')}/>
-              <Step title="创建卡券" message="调用接口创建卡券信息" onClick={() => $message('创建卡券')}/>
-              {state.showFlag && <Step title="创建二维码" message="调用接口创建二维码" onClick={() => $message('创建二维码')}/>}
-              <Step title="显示二维码" message="在应用中显示二维码" onClick={() => $message('显示二维码')}/>
-            </StepGroup>
-          </DemoLine>
-        </DemoRow>
-
-        <DemoRow title={'步骤图标'}>
-          <DemoLine title={'当前步骤索引'}>
-            <InputNumber width="120" v-model={state.val[2].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
-            <Checkbox label={'迷你尺寸'} v-model={state.val[2].mini}/>
-            <Checkbox label={'纵向步骤条'} v-model={state.val[2].vertical}/>
-            <Checkbox label={'标题放在图标下方'} v-model={state.val[2].titleAlignBottom}/>
-            <Checkbox label={'显示[创建二维码]'} v-model={state.showFlag}/>
-          </DemoLine>
-          <DemoLine>
-            <StepGroup
-              current={state.val[2].index}
-              vertical={state.val[2].vertical}
-              mini={state.val[2].mini}
-              titleAlignBottom={state.val[2].titleAlignBottom}
-              currentStatus={state.val[2].index === 5 ? 'finish' : undefined}
-            >
-              <Step icon="pi-safe" title="获取token" message="调用接口，获取token" onClick={() => $message('获取token')}/>
-              <Step icon="pi-schedule" title="上传logo" message="使用token上传logo图片" onClick={() => $message('上传logo')}/>
-              <Step icon="pi-shake" title="创建卡券" message="调用接口创建卡券信息" onClick={() => $message('创建卡券')}/>
-              {state.showFlag && <Step icon="pi-home" title="创建二维码" message="调用接口创建二维码" onClick={() => $message('创建二维码')}/>}
-              <Step icon="pi-skin" title="显示二维码" message="在应用中显示二维码" onClick={() => $message('显示二维码')}/>
-            </StepGroup>
-          </DemoLine>
-        </DemoRow>
-
-        <DemoRow title={'小圆点'}>
-          <DemoLine title={'当前步骤索引'}>
-            <InputNumber width="120" v-model={state.val[3].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
-            <Checkbox label={'迷你尺寸'} v-model={state.val[3].mini}/>
-            <Checkbox label={'纵向步骤条'} v-model={state.val[3].vertical}/>
-            <Checkbox label={'标题放在图标下方'} v-model={state.val[3].titleAlignBottom}/>
-            <Checkbox label={'显示[创建二维码]'} v-model={state.showFlag}/>
-          </DemoLine>
-          <DemoLine>
-            <StepGroup
-              current={state.val[3].index}
-              vertical={state.val[3].vertical}
-              mini={state.val[3].mini}
-              titleAlignBottom={state.val[3].titleAlignBottom}
-              currentStatus={state.val[3].index === 5 ? 'finish' : undefined}
-              dotIcon
-            >
-              <Step title="获取token" message="调用接口，获取token" onClick={() => $message('获取token')}/>
-              <Step title="上传logo" message="使用token上传logo图片" onClick={() => $message('上传logo')}/>
-              <Step title="创建卡券" message="调用接口创建卡券信息" onClick={() => $message('创建卡券')}/>
-              {state.showFlag && <Step title="创建二维码" message="调用接口创建二维码" onClick={() => $message('创建二维码')}/>}
-              <Step title="显示二维码" message="在应用中显示二维码" onClick={() => $message('显示二维码')}/>
-            </StepGroup>
-          </DemoLine>
-        </DemoRow>
-        <DemoRow title={'步骤状态'}>
-          <DemoLine>
-            <StepGroup dotIcon>
-              <Step title="Finish" message="This step is finish" status="finish"/>
-              <Step title="Process" message="This step is processing..." status="process"/>
-              <Step title="error" message="This step is error!" status="error"/>
-              <Step title="Wait" message="This step is not start." status="wait"/>
-            </StepGroup>
-          </DemoLine>
-          <DemoLine>
-            <StepGroup>
-              <Step title="Finish" message="This step is finish" status="finish" icon="pi-check"/>
-              <Step title="Process" message="This step is processing..." status="process" icon="pi-info-circle-fill"/>
-              <Step title="error" message="This step is error!" status="error" icon="pi-close"/>
-              <Step title="Wait" message="This step is not start." status="wait" icon="pi-thunderbolt"/>
-            </StepGroup>
-          </DemoLine>
-          <DemoLine>
-            <StepGroup vertical>
-              <Step title="Finish" message="This step is finish" status="finish"/>
-              <Step title="Process" message="This step is processing..." status="process"/>
-              <Step title="error" message="This step is error!" status="error"/>
-              <Step title="Wait" message="This step is not start." status="wait"/>
-            </StepGroup>
-          </DemoLine>
-          <DemoLine>
-            <StepGroup dotIcon vertical>
-              <Step title="Finish" message="This step is finish" status="finish"/>
-              <Step title="Process" message="This step is processing..." status="process"/>
-              <Step title="error" message="This step is error!" status="error"/>
-              <Step title="Wait" message="This step is not start." status="wait"/>
-            </StepGroup>
-          </DemoLine>
-        </DemoRow>
-        <DemoRow title={'通过绑定val切换步骤'}>
-          <DemoLine title={'当前步骤索引'}>
-            <ButtonGroup>
-              <Button label={'step1'} onClick={() => state.val1[3] = 'step1'} active={state.val1[3] === 'step1'}/>
-              <Button label={'step2'} onClick={() => state.val1[3] = 'step2'} active={state.val1[3] === 'step2'}/>
-              <Button label={'step3'} onClick={() => state.val1[3] = 'step3'} active={state.val1[3] === 'step3'}/>
-              <Button label={'step4'} onClick={() => state.val1[3] = 'step4'} active={state.val1[3] === 'step4'}/>
-              <Button label={'step5'} onClick={() => state.val1[3] = 'step5'} active={state.val1[3] === 'step5'}/>
-            </ButtonGroup>
-          </DemoLine>
-          <StepGroup current={state.val1[3]} currentStatus={state.val1[3] === 'step5' ? 'finish' : undefined}>
-            <Step title="获取token" message="调用接口，获取token" val={'step1'}/>
-            <Step title="上传logo" message="使用token上传logo图片" val={'step2'}/>
-            <Step title="创建卡券" message="调用接口创建卡券信息" val={'step3'}/>
-            <Step title="创建二维码" message="调用接口创建二维码" val={'step4'}/>
-            <Step title="显示二维码" message="在应用中显示二维码" val={'step5'}/>
-          </StepGroup>
-          <div style={{
-            height: '100px',
-            display: 'flex',
-            alignItems: 'center',
-            justifyContent: 'center',
-            border: 'dashed 1px #e1e1e1'
-          }}>
-            <h1 style={{ display: state.val1[3] === 'step1' ? '' : 'none' }}>Step 1</h1>
-            <h1 style={{ display: state.val1[3] === 'step2' ? '' : 'none' }}>Step 2</h1>
-            <h1 style={{ display: state.val1[3] === 'step3' ? '' : 'none' }}>Step 3</h1>
-            <h1 style={{ display: state.val1[3] === 'step4' ? '' : 'none' }}>Step 4</h1>
-            <h1 style={{ display: state.val1[3] === 'step5' ? '' : 'none' }}>Step 5</h1>
-          </div>
-        </DemoRow>
-        <DemoRow title={'自定义标题以及文本内容'}>
-          <DemoLine title={'当前步骤索引'}>
-            <InputNumber width="120" v-model={state.val[4].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
-            <Checkbox label={'迷你尺寸'} v-model={state.val[4].mini}/>
-            <Checkbox label={'纵向步骤条'} v-model={state.val[4].vertical}/>
-            <Checkbox label={'标题放在图标下方'} v-model={state.val[4].titleAlignBottom}/>
-          </DemoLine>
-          <DemoLine>
-            <StepGroup
-              current={state.val[4].index}
-              vertical={state.val[4].vertical}
-              mini={state.val[4].mini}
-              titleAlignBottom={state.val[4].titleAlignBottom}
-              currentStatus={state.val[4].index === 5 ? 'finish' : undefined}
-            >
-              <Step>
-                {{
-                  head: () => (<Tooltip message="获取token"><span>获取token</span></Tooltip>),
-                  content: () => (<span>1、调用接口，获取token</span>)
-                }}
-              </Step>
-              <Step>
-                {{
-                  head: () => (<Tooltip message="上传logo"><span>上传logo</span></Tooltip>),
-                  content: () => (<span>2、使用token上传logo图片</span>)
-                }}
-              </Step>
-              <Step>
-                {{
-                  head: () => (<Tooltip message="创建卡券"><span>创建卡券</span></Tooltip>),
-                  content: () => (<span>3、调用接口创建卡券信息</span>)
-                }}
-              </Step>
-              <Step>
-                {{
-                  head: () => (<Tooltip message="创建二维码"><span>创建二维码</span></Tooltip>),
-                  content: () => (<span>4、调用接口创建二维码</span>)
-                }}
-              </Step>
-              <Step>
-                {{
-                  head: () => (<Tooltip message="显示二维码"><span>显示二维码</span></Tooltip>),
-                  content: () => (<span>5、在应用中显示二维码</span>)
-                }}
-              </Step>
-            </StepGroup>
-          </DemoLine>
-        </DemoRow>
-        <DemoRow title={'箭头步骤条'}>
-          <DemoLine title={'当前步骤条索引'}>
-            <InputNumber width="120" v-model={state.val[5].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
-          </DemoLine>
-          <ArrowStepGroup current={state.val[5].index}>
-            <ArrowStep title={'获取token'} onClick={() => $message('获取token')}/>
-            <ArrowStep title={'上传logo'} onClick={() => $message('上传logo')}/>
-            <ArrowStep title={'创建卡券'} onClick={() => $message('创建卡券')}/>
-            <ArrowStep title={'创建二维码'} onClick={() => $message('创建二维码')}/>
-            <ArrowStep title={'显示二维码'} onClick={() => $message('显示二维码')}/>
-          </ArrowStepGroup>
-        </DemoRow>
-        <DemoRow title={'箭头步骤条：状态'}>
-          <ArrowStepGroup>
-            <ArrowStep title="Finish" status="finish"/>
-            <ArrowStep title="Process" status="process"/>
-            <ArrowStep title="error" status="error"/>
-            <ArrowStep title="Wait" status="wait"/>
-          </ArrowStepGroup>
-        </DemoRow>
-        <DemoRow title={'箭头步骤条：自定义内容'}>
-          <DemoLine title={'当前步骤索引'}>
-            <InputNumber width="120" v-model={state.val[6].index} button="button" addIcon="pi-right" subIcon="pi-left" align="center"/>
-          </DemoLine>
-          <ArrowStepGroup current={state.val[6].index} className={'custom-content-slot'}>
-            <ArrowStep hideIndex>
-              <Icon icon={'pi-safe'}/>
-              <span>获取token</span>
-            </ArrowStep>
-            <ArrowStep hideIndex>
-              <Icon icon={'pi-schedule'}/>
-              <span>上传logo</span>
-            </ArrowStep>
-            <ArrowStep hideIndex>
-              <Icon icon={'pi-shake'}/>
-              <span>创建卡券</span>
-            </ArrowStep>
-            <ArrowStep hideIndex>
-              <Icon icon={'pi-home'}/>
-              <span>创建二维码</span>
-            </ArrowStep>
-            <ArrowStep hideIndex>
-              <Icon icon={'pi-skin'}/>
-              <span>显示二维码</span>
-            </ArrowStep>
-          </ArrowStepGroup>
-        </DemoRow>
-      </div>
-    );
-  };
-});