plain-design 1.0.0-beta.10 → 1.0.0-beta.101

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

@@ -1,133 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {DemoLine} from "../../Demo/DemoLine";
-import ProgressBar from "../../../../packages/components/ProgressBar";
-import {Icon, ProgressCircle, ProgressMini, Slider} from "../../../../packages";
-
-
-export default designPage(() => {
-
-  const state = reactive({
-    val: {
-      2: 10,
-      3: 73,
-    } as any
-  });
-
-  return () => (
-    <div>
-      <DemoRow title={'条形进度条'}>
-        <DemoLine title={'基本用法'}>
-          <ProgressBar modelValue={65}/>
-        </DemoLine>
-        <DemoLine title={'宽高'}>
-          <ProgressBar modelValue={65} width={'100px'} height={'3px'}/>
-        </DemoLine>
-        <DemoLine title={'颜色'}>
-          <ProgressBar modelValue={65} innerColor={'blueviolet'} outerColor={'#dddddd'}/>
-        </DemoLine>
-        <DemoLine title={'状态'}>
-          <ProgressBar modelValue={65} status={'success'}/>
-          <ProgressBar modelValue={65} status={'error'}/>
-        </DemoLine>
-        <DemoLine title={'状态颜色'}>
-          <ProgressBar modelValue={65} status={'success'} successColor={'green'}/>
-          <ProgressBar modelValue={65} status={'error'} errorColor={'red'}/>
-        </DemoLine>
-      </DemoRow>
-      <DemoRow title={'条形进度条：内联文字'}>
-        <DemoLine title={'基本用法'}>
-          <ProgressBar modelValue={65} inlineText/>
-        </DemoLine>
-        <DemoLine title={'宽高（高度不可修改）'}>
-          <ProgressBar modelValue={65} width={'100px'} inlineText/>
-        </DemoLine>
-        <DemoLine title={'颜色'}>
-          <ProgressBar modelValue={65} innerColor={'blueviolet'} outerColor={'#ddd'} inlineText/>
-        </DemoLine>
-        <DemoLine title={'状态'}>
-          <ProgressBar modelValue={65} status={'success'} inlineText/>
-          <ProgressBar modelValue={65} status={'error'} inlineText/>
-        </DemoLine>
-        <DemoLine title={'状态颜色'}>
-          <ProgressBar modelValue={65} status={'success'} successColor={'green'} inlineText/>
-          <ProgressBar modelValue={65} status={'error'} errorColor={'red'} inlineText/>
-        </DemoLine>
-      </DemoRow>
-      <DemoRow title={'环形进度条'}>
-        <DemoLine title={'基本用法'}>
-          <ProgressCircle modelValue={65}/>
-        </DemoLine>
-        <DemoLine title={'大小'}>
-          <ProgressCircle modelValue={65} size={80}/>
-        </DemoLine>
-        <DemoLine title={'线宽'}>
-          <ProgressCircle modelValue={65} lineSize={3}/>
-        </DemoLine>
-        <DemoLine title={'起始角度（并且逆时针）'}>
-          <ProgressCircle modelValue={65} startAngle={180} antiClockwise/>
-        </DemoLine>
-        <DemoLine title={'颜色'}>
-          <ProgressCircle modelValue={65} innerColor={'blueviolet'} outerColor={'#ddd'}/>
-        </DemoLine>
-        <DemoLine title={'状态'}>
-          <ProgressCircle modelValue={65} status={'success'}/>
-          <ProgressCircle modelValue={65} status={'error'}/>
-        </DemoLine>
-        <DemoLine title={'状态颜色'}>
-          <ProgressCircle modelValue={65} status={'success'} successColor={'green'}/>
-          <ProgressCircle modelValue={65} status={'error'} errorColor={'red'}/>
-        </DemoLine>
-        <DemoLine title={'加载状态'}>
-          <ProgressCircle loading>
-            <Icon icon={'el-icon-upload'} status={'primary'}/>
-          </ProgressCircle>
-        </DemoLine>
-      </DemoRow>
-
-      <DemoRow title={'迷你进度条'}>
-        <DemoLine title={'进度值'}>
-          <Slider v-model={state.val[2]}/>
-        </DemoLine>
-        <DemoLine title={'基本用法'}>
-          <ProgressMini modelValue={state.val[2]}/>
-        </DemoLine>
-        <DemoLine title={'大小'}>
-          <ProgressMini modelValue={state.val[2]} size={80}/>
-        </DemoLine>
-        <DemoLine title={'颜色'}>
-          <ProgressMini modelValue={state.val[2]} innerColor={'blueviolet'} outerColor={'#ddd'}/>
-        </DemoLine>
-        <DemoLine title={'状态'}>
-          <ProgressMini modelValue={state.val[2]} status={'success'}/>
-          <ProgressMini modelValue={state.val[2]} status={'error'}/>
-        </DemoLine>
-        <DemoLine title={'状态颜色'}>
-          <ProgressMini modelValue={state.val[2]} status={'success'} successColor={'green'}/>
-          <ProgressMini modelValue={state.val[2]} status={'error'} errorColor={'red'}/>
-        </DemoLine>
-        <DemoLine title={'圆形mini进度条'}>
-          <ProgressMini modelValue={state.val[2]} round/>
-        </DemoLine>
-      </DemoRow>
-      <DemoRow title={'数据绑定'}>
-        <DemoLine title={'数据绑定值'}>
-          <Slider v-model={state.val[3]}/>
-          {state.val[3]}
-        </DemoLine>
-        <DemoLine>
-          <ProgressBar modelValue={state.val[3]}/>
-        </DemoLine>
-        <DemoLine>
-          <ProgressBar modelValue={state.val[3]} inlineText/>
-        </DemoLine>
-        <DemoLine>
-          <ProgressCircle modelValue={state.val[3]}/>
-        </DemoLine>
-        <DemoLine>
-          <ProgressMini modelValue={state.val[3]}/>
-        </DemoLine>
-      </DemoRow>
-    </div>
-  );
-});

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

@@ -1,16 +0,0 @@
-.demo-radio-block {
-  width: 120px;
-  height: 80px;
-  border: solid 1px plv(border-color);
-  border-radius: plv(box-size-normal-border-radius);
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  transition: all 300ms ease;
-}
-
-.demo-radio-block-is-active {
-  background-color: plv(primary-1);
-  border-color: plv(primary-6);
-}

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

@@ -1,188 +0,0 @@
-import {classnames, designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Radio, RadioGroup} from "../../../../packages";
-import './DemoRadio.scss';
-
-export const demo1 = designPage(() => {
-
-  const state = reactive({ flag: undefined });
-
-  return () => (
-    <DemoRow title="基本用法">
-      <Radio v-model={state.flag} label="Radio Label"/>
-      <div>{String(state.flag)}</div>
-    </DemoRow>
-  );
-});
-export const demo2 = designPage(() => {
-
-  const state = reactive({ flag: true });
-
-  return () => (
-    <DemoRow title="状态">
-      <Radio v-model={state.flag} label="Primary" status="primary"/>
-      <Radio v-model={state.flag} label="Success" status="success"/>
-      <Radio v-model={state.flag} label="Warn" status="warn"/>
-      <Radio v-model={state.flag} label="Error" status="error"/>
-    </DemoRow>
-  );
-});
-
-export const demo3 = designPage(() => {
-
-  const state = reactive({ flag: 'TRUE' });
-
-  return () => (
-    <DemoRow title="真假值">
-      <Radio v-model={state.flag} label="Radio Label" trueValue="TRUE" falseValue="FALSE"/>
-      <div>{String(state.flag)}</div>
-    </DemoRow>
-  );
-});
-
-export const demo4 = designPage(() => {
-
-  const state = reactive({ flag: true });
-
-  return () => (
-    <DemoRow title="禁用">
-      <Radio v-model={state.flag} label="Primary" status="primary" disabled/>
-      <Radio v-model={state.flag} label="Success" status="success" disabled/>
-      <Radio v-model={state.flag} label="Warn" status="warn" disabled/>
-      <Radio v-model={state.flag} label="Error" status="error" disabled/>
-      <Radio label="Radio label" disabled/>
-    </DemoRow>
-  );
-});
-
-export const demo5 = designPage(() => {
-
-  const state = reactive({ flag: true });
-
-  return () => (
-    <DemoRow title="大小">
-      <Radio v-model={state.flag} label="mini" size="mini"/>
-      <Radio v-model={state.flag} label="small" size="small"/>
-      <Radio v-model={state.flag} label="normal" size="normal"/>
-      <Radio v-model={state.flag} label="large" size="large"/>
-      <Radio v-model={state.flag} label="32px" style={{ fontSize: '32px' }}/>
-    </DemoRow>
-  );
-});
-export const demo6 = designPage(() => {
-
-  const state = reactive({ val: undefined });
-
-  return () => (
-    <DemoRow title={'单选按钮组'}>
-      <RadioGroup v-model={state.val}>
-        <Radio label={'标签一'} val={'tag1'}/>
-        <Radio label={'标签二'} val={'tag2'}/>
-        <Radio label={'标签三'} val={'tag3'}/>
-      </RadioGroup>
-      {state.val}
-    </DemoRow>
-  );
-});
-
-
-export const demo7 = designPage(() => {
-
-  const state = reactive({ val: undefined });
-
-  return () => (
-    <DemoRow title={'单选按钮组：状态大小'}>
-      <RadioGroup v-model={state.val} size={'mini'} status={'warn'}>
-        <Radio label={'标签一'} val={'tag1'}/>
-        <Radio label={'标签二'} val={'tag2'}/>
-        <Radio label={'标签三'} val={'tag3'}/>
-      </RadioGroup>
-      {state.val}
-    </DemoRow>
-  );
-});
-export const demo8 = designPage(() => {
-
-  const state = reactive({ val: 'tag2' });
-
-  return () => (
-    <DemoRow title={'单选按钮组：禁用以及只读'}>
-      <RadioGroup v-model={state.val} disabled>
-        <Radio label={'标签一'} val={'tag1'}/>
-        <Radio label={'标签二'} val={'tag2'}/>
-        <Radio label={'标签三'} val={'tag3'}/>
-      </RadioGroup>
-      <br/>
-      <RadioGroup v-model={state.val} readonly>
-        <Radio label={'标签一'} val={'tag1'}/>
-        <Radio label={'标签二'} val={'tag2'}/>
-        <Radio label={'标签三'} val={'tag3'}/>
-      </RadioGroup>
-    </DemoRow>
-  );
-});
-export const demo9 = designPage(() => {
-
-  const state = reactive({ val: 'tag2' });
-
-  return () => (
-    <DemoRow title={'自定义内容'}>
-      <RadioGroup v-model={state.val}>
-        <Radio val={'tag1'} v-slots={{
-          default: ({ checked, click }) => (
-            <span className={classnames((['demo-radio-block', { 'demo-radio-block-is-active': checked }]))} onClick={click}>
-                标签一
-            </span>
-          )
-        }}/>
-        <Radio val={'tag2'} v-slots={{
-          default: ({ checked, click }) => (
-            <span className={classnames((['demo-radio-block', { 'demo-radio-block-is-active': checked }]))} onClick={click}>
-                标签二
-            </span>
-          )
-        }}/>
-        <Radio val={'tag3'} v-slots={{
-          default: ({ checked, click }) => (
-            <span className={classnames((['demo-radio-block', { 'demo-radio-block-is-active': checked }]))} onClick={click}>
-                标签三
-            </span>
-          )
-        }}/>
-      </RadioGroup>
-    </DemoRow>
-  );
-});
-
-
-export const demo10 = designPage(() => {
-
-  const options = [
-    { name: '支付宝', code: 'alipay', version: '1' },
-    { name: '微信支付', code: 'wechat_pay', version: '1' },
-    { name: '财付通', code: 'qq_pay', version: '1' },
-    { name: '快支付', code: 'fast_pay', version: '1' },
-    { name: '云闪付', code: 'cloud_pay', version: '1' },
-    { name: '网银支付', code: 'net_pay', version: '1' },
-    { name: '快捷支付', code: 'convince_pay', version: '1' },
-    { name: 'paypal', code: 'paypal', version: '1' },
-  ] as any[];
-
-  const state = reactive({
-    val: { name: '支付宝', code: 'alipay', version: '2' },
-  });
-
-  const isMatch = ({ value, option }: any) => !!value && !!option && (value.code == option.code);
-
-  return () => (
-    <DemoRow title={'单选按钮组：绑定值为对象'}>
-      <RadioGroup v-model={state.val} isMatch={isMatch}>
-        {options.map(option => (
-          <Radio label={option.name} val={option} key={option.code}/>
-        ))}
-      </RadioGroup>
-      <br/>
-      {JSON.stringify(state.val)}
-    </DemoRow>
-  );
-});

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

@@ -1,77 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Checkbox, Rate} from "../../../../packages";
-import {DemoLine} from "../../Demo/DemoLine";
-
-export default designPage(() => {
-
-  const state = reactive({
-    val: {
-      2: 3,
-      20: true,
-      21: 3,
-      11: 2.5,
-    } as any
-  });
-
-  return () => (
-    <div>
-      <DemoRow title={'基本用法'}>
-        <Rate v-model={state.val[0]}/>
-        <Rate v-model={state.val[0]}/>
-        {state.val[0]}
-      </DemoRow>
-      <DemoRow title={'总分 total 为10分'}>
-        <Rate v-model={state.val[11]} total={10}/>
-        {state.val[11]}
-      </DemoRow>
-      <DemoRow title={'设置星星个数 count'}>
-        <Rate v-model={state.val[11]} total={10} count={10}/>
-        {state.val[11]}
-      </DemoRow>
-      <DemoRow title={'模式'}>
-        <DemoLine title={'普通模式'}>
-          <Rate mode={'normal'} modelValue={2.4}/>
-        </DemoLine>
-        <DemoLine title={'半星模式'}>
-          <Rate mode={'half'} modelValue={5}/>
-        </DemoLine>
-        <DemoLine title={'整星模式'}>
-          <Rate mode={'all'} modelValue={2}/>
-        </DemoLine>
-      </DemoRow>
-      <DemoRow title={'状态颜色'}>
-        <DemoLine title={'预定义颜色'}>
-          <Rate status={'primary'} modelValue={3}/>
-          <Rate status={'success'} modelValue={3}/>
-          <Rate status={'warn'} modelValue={3}/>
-          <Rate status={'error'} modelValue={3}/>
-        </DemoLine>
-        <DemoLine title={'自定义颜色'}>
-          <Rate modelValue={3} style={{ color: 'rebeccapurple' }}/>
-        </DemoLine>
-      </DemoRow>
-      <DemoRow title={'大小'}>
-        <DemoLine title={'预定义大小'}>
-          <Rate size={'mini'} modelValue={3}/>
-          <Rate size={'small'} modelValue={3}/>
-          <Rate size={'normal'} modelValue={3}/>
-          <Rate size={'large'} modelValue={3}/>
-        </DemoLine>
-        <DemoLine title={'自定义大小'}>
-          <Rate modelValue={3} style={{ fontSize: '24px' }}/>
-        </DemoLine>
-      </DemoRow>
-      <DemoRow title={'设置激活icon与未激活icon'}>
-        <Rate modelValue={3} icon={'pi-heart-fill'} status={'error'}/>
-      </DemoRow>
-      <DemoRow title={'禁用与只读'}>
-        <Checkbox label={'禁用/只读'} v-model={state.val[20]}/>
-        <DemoLine>
-          <Rate v-model={state.val[21]} disabled={state.val[20]}/>
-          <Rate v-model={state.val[21]} readonly={state.val[20]}/>
-        </DemoLine>
-      </DemoRow>
-    </div>
-  );
-});

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

@@ -1,22 +0,0 @@
-.demo-scroll {
-  .demo-scroll-wrapper {
-    background-color: plv(secondary-2);
-    height: 198px;
-    width: 91px;
-    display: inline-block;
-  }
-
-  .demo-scroll-content {
-    height: 400px;
-    width: 400px;
-    display: inline-block;
-  }
-
-  .demo-scroll-label {
-    /*margin: 50px 0;*/
-    padding: 8px 16px;
-    border-bottom: solid 1px plv(secondary-3);
-    font-size: 12px;
-    box-sizing: border-box;
-  }
-}