plain-design 1.0.0-beta.11 → 1.0.0-beta.111

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

@@ -1,300 +0,0 @@
-import {classnames, designPage, reactive, useRefs} from "plain-design-composition";
-import './DemoScroll.scss';
-import {Button, ButtonGroup, Scroll, useAutoScrollUtils} from "../../../../packages";
-import {DemoRow} from "../../Demo/DemoRow";
-
-export const demo1 = designPage(() => {
-
-  const state = reactive({
-    list: (() => {
-      let ret = [];
-      let i = 0;
-      while (i < 40) {
-        ret.push(i++);
-      }
-      return ret;
-    })(),
-    checkboxValue: [] as string[],
-  });
-
-  const { refs, onRef } = useRefs({
-    scroll1: Scroll,
-    scroll2: Scroll,
-    autoScroll1: Scroll,
-    autoScroll2: Scroll,
-  });
-
-  function getClass(item: any) {
-    console.log('item', item);
-    return {};
-  }
-
-  return () => (
-    <div className={'demo-scroll'}>
-      <DemoRow title={'基本用法(检查滚动的时候会不会导致插槽的内容重新执行)'}>
-        <div className={'demo-scroll-wrapper'} style={{ display: 'inline-block', verticalAlign: 'top' }}>
-          <Scroll>
-            <div>
-              {state.list.map((item, index) => (
-                <div className={classnames(['demo-scroll-label', getClass(item),])} key={index}>
-                  {item}
-                </div>
-              ))}
-            </div>
-          </Scroll>
-        </div>
-        <ButtonGroup vertical>
-          <Button label={'添加'} icon={'pi-plus'} onClick={() => state.list.push(state.list.length + 1)}/>
-          <Button label={'删除'} icon={'pi-delete'} onClick={() => state.list.shift()}/>
-        </ButtonGroup>
-      </DemoRow>
-      <DemoRow title={'基本用法'}>
-        <div className="demo-scroll-wrapper">
-          <Scroll>
-            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
-              this is content
-            </div>
-          </Scroll>
-        </div>
-      </DemoRow>
-      {/*<DemoRow title={'基本用法(多选列表)'}>
-        <div className="demo-scroll-wrapper" style={{ display: 'inline-block', verticalAlign: 'top' }}>
-          <Scroll>
-            <CheckboxGroup v-model={state.checkboxValue}>
-              {state.list.map(item => (
-                <div className={'demo-scroll-label'} key={item}>
-                  <Checkbox val={item}/>、
-                  {item}
-                </div>
-              ))}
-            </CheckboxGroup>
-          </Scroll>
-        </div>
-        <ButtonGroup vertical>
-          <Button label={'添加'} icon={'el-icon-circle-plus-outline'} onClick={() => state.list.push(state.list.length + 1)}/>
-          <Button label={'删除'} icon={'el-icon-remove-outline'} onClick={() => state.list.shift()}/>
-        </ButtonGroup>
-        {JSON.stringify(state.checkboxValue)}
-      </DemoRow>*/}
-      <DemoRow title={'可以横向滚动'}>
-        <div className={'demo-scroll-wrapper'}>
-          <Scroll scrollX scrollAfterDragEnd>
-            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
-              this is content
-            </div>
-          </Scroll>
-        </div>
-      </DemoRow>
-      <DemoRow title={'只能横向滚动'}>
-        <div className={'demo-scroll-wrapper'}>
-          <Scroll scrollX scrollY={false}>
-            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
-              this is content
-            </div>
-          </Scroll>
-        </div>
-      </DemoRow>
-      <DemoRow title={'适配内容高度'}>
-        <div className={'demo-scroll-wrapper'} style={{ height: 'auto' }}>
-          <Scroll scrollX fitContentHeight>
-            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
-              this is content
-            </div>
-          </Scroll>
-        </div>
-      </DemoRow>
-      <DemoRow title={'适配内容宽度'}>
-        <div className={'demo-scroll-wrapper'} style={{ width: 'auto' }}>
-          <Scroll fitContentWidth>
-            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
-              this is content
-            </div>
-          </Scroll>
-        </div>
-      </DemoRow>
-      <DemoRow title={'适配host高度'}>
-        <div className={'demo-scroll-wrapper'}>
-          <Scroll fitContentWidth scrollX>
-            <div style={{ height: '100%', width: '400px' }} className={'demo-scroll-content'}>
-              this is content
-            </div>
-          </Scroll>
-        </div>
-      </DemoRow>
-      <DemoRow title={'适配host宽度'}>
-        <div className={'demo-scroll-wrapper'}>
-          <Scroll fitHostWidth>
-            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
-              this is content
-            </div>
-          </Scroll>
-        </div>
-      </DemoRow>
-
-      <DemoRow title={'滚动：纵向'}>
-        <div className="demo-scroll-wrapper">
-          <Scroll ref={onRef.scroll1} onScroll={() => console.log('vertical scroll')}>
-            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
-              this is content
-              <div>
-                <p><Button mode="fill" size={'mini'} label={'scroll'} onClick={() => refs.scroll1!.methods.scroll({ y: 100 }, 1000)}/></p>
-                <p><Button mode="fill" size={'mini'} label={'scroll(no emit)'} onClick={() => refs.scroll1!.methods.scroll({ y: 100 }, { time: 1000, noEmitScroll: true })}/></p>
-                <p><Button mode="fill" size={'mini'} label={'scrollEnd'} onClick={() => refs.scroll1!.methods.scrollEnd()}/></p>
-              </div>
-            </div>
-          </Scroll>
-        </div>
-      </DemoRow>
-      <DemoRow title={'滚动：横向'}>
-        <div className="demo-scroll-wrapper">
-          <Scroll ref={onRef.scroll2} scrollX onScroll={() => console.log('horizontal scroll')}>
-            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
-              this is content
-              <div>
-                <p><Button mode="fill" size={'mini'} label={'scroll'} onClick={() => refs.scroll2!.methods.scroll({ x: 100 }, 1000)}/></p>
-                <p><Button mode="fill" size={'mini'} label={'scroll(no emit)'} onClick={() => refs.scroll2!.methods.scroll({ x: 100 }, { time: 1000, noEmitScroll: true })}/></p>
-                <p><Button mode="fill" size={'mini'} label={'scrollEnd'} onClick={() => refs.scroll2!.methods.scrollEnd()}/></p>
-              </div>
-            </div>
-          </Scroll>
-        </div>
-      </DemoRow>
-      <DemoRow title={'自动滚动：纵向'}>
-        <div className={'demo-scroll-wrapper'} style={{ display: 'inline-block', verticalAlign: 'top' }}>
-          <Scroll ref={onRef.autoScroll1}>
-            <div>
-              {state.list.map((item, index) => (
-                <div className="demo-scroll-label" key={index}>
-                  {item}
-                </div>
-              ))}
-            </div>
-          </Scroll>
-        </div>
-        <div style={{ display: 'inline-block' }}>
-          <ButtonGroup>
-            <Button label={'向下滚动'} onClick={() => refs.autoScroll1!.methods.autoScrollBottom()}/>
-            <Button label={'向上滚动'} onClick={() => refs.autoScroll1!.methods.autoScrollTop()}/>
-            <Button label={'停止滚动'} onClick={() => refs.autoScroll1!.methods.stopAutoScroll()}/>
-          </ButtonGroup>
-        </div>
-      </DemoRow>
-      <DemoRow title={'自动滚动：横向'}>
-        <div className={'demo-scroll-wrapper'} style={{ display: 'inline-block', verticalAlign: 'top' }}>
-          <Scroll ref={onRef.autoScroll2} scrollX>
-            <div style={{ display: 'inline-block', whiteSpace: 'nowrap' }}>
-              {[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12].map((item, index) => (
-                <div className="demo-scroll-label" key={index} style={{ width: '30px', display: 'inline-block', marginRight: '10px' }}>
-                  {item}
-                </div>
-              ))}
-            </div>
-          </Scroll>
-        </div>
-        <div style={{ display: 'inline-block' }}>
-          <ButtonGroup>
-            <Button label={'向右滚动'} onClick={() => refs.autoScroll2!.methods.autoScrollRight()}/>
-            <Button label={'向左滚动'} onClick={() => refs.autoScroll2!.methods.autoScrollLeft()}/>
-            <Button label={'停止滚动'} onClick={() => refs.autoScroll2!.methods.stopAutoScroll()}/>
-          </ButtonGroup>
-        </div>
-      </DemoRow>
-      <DemoRow title={'拖拽结束之后滚动'}>
-        <div className={'demo-scroll-wrapper'}>
-          <Scroll scrollX scrollAfterDragEnd>
-            <div style={{ height: '400px', width: '400px' }} className={'demo-scroll-content'}>
-              this is content
-            </div>
-          </Scroll>
-        </div>
-      </DemoRow>
-    </div>
-  );
-});
-
-export const DemoUseAutoScrollUtilsVertical = designPage(() => {
-
-  const len = new Array(20).fill(null);
-
-  const { refs, onRef } = useRefs({ el: HTMLDivElement });
-
-  const autoScrollUtils = useAutoScrollUtils({
-    vertical: true,
-    scrollUtilsParameter: { getScrollElement: () => refs.el }
-  });
-
-  const onMousedown = () => {
-    autoScrollUtils.show();
-
-    const onMouseup = () => {
-      autoScrollUtils.hide();
-      document.body.removeEventListener('mouseup', onMouseup);
-    };
-    document.body.addEventListener('mouseup', onMouseup);
-  };
-
-  return () => (
-    <DemoRow title="DemoUseAutoScrollUtils: vertical">
-      <div style={{ width: '200px', height: '200px', overflow: 'auto' }} ref={onRef.el}>
-        <table>
-          <colgroup>
-            {len.map((i, index) => (<col key={index} width={150}/>))}
-          </colgroup>
-          <tbody>
-          {len.map((_, rowIndex) => (
-            <tr key={rowIndex}>
-              {len.map((_, colIndex) => (
-                <td key={colIndex} style={{ height: '36px' }} onMouseDown={onMousedown}>{rowIndex + 1}_{colIndex + 1}</td>
-              ))}
-            </tr>
-          ))}
-          </tbody>
-        </table>
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const DemoUseAutoScrollUtilsHorizontal = designPage(() => {
-
-  const len = new Array(20).fill(null);
-
-  const { refs, onRef } = useRefs({ el: HTMLDivElement });
-
-  const autoScrollUtils = useAutoScrollUtils({
-    vertical: false,
-    scrollUtilsParameter: { getScrollElement: () => refs.el }
-  });
-
-  const onMousedown = () => {
-    autoScrollUtils.show();
-
-    const onMouseup = () => {
-      autoScrollUtils.hide();
-      document.body.removeEventListener('mouseup', onMouseup);
-    };
-    document.body.addEventListener('mouseup', onMouseup);
-  };
-
-  return () => (
-    <DemoRow title="DemoUseAutoScrollUtils: horizontal">
-      <div style={{ width: '200px', height: '200px', overflow: 'auto' }} ref={onRef.el}>
-        <table>
-          <colgroup>
-            {len.map((i, index) => (<col key={index} width={150}/>))}
-          </colgroup>
-          <tbody>
-          {len.map((_, rowIndex) => (
-            <tr key={rowIndex}>
-              {len.map((_, colIndex) => (
-                <td key={colIndex} style={{ height: '36px' }} onMouseDown={onMousedown}>{rowIndex + 1}_{colIndex + 1}</td>
-              ))}
-            </tr>
-          ))}
-          </tbody>
-        </table>
-      </div>
-    </DemoRow>
-  );
-});

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

@@ -1,71 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Button, Segment, SegmentGroup} from "../../../../packages";
-import {DemoLine} from "../../Demo/DemoLine";
-
-export const demo1 = designPage(() => {
-
-  const state = reactive({
-    val: 'normal'
-  });
-
-  return () => (
-    <DemoRow title="基本用法">
-      <SegmentGroup v-model={state.val}>
-        <Segment label="Mini" val="mini"/>
-        <Segment label="Small" val="small"/>
-        <Segment label="Normal" val="normal"/>
-        <Segment label="Large" val="large"/>
-      </SegmentGroup>
-    </DemoRow>
-  );
-});
-
-
-export const demoSizes = designPage(() => {
-
-  const state = reactive({
-    val: 'normal'
-  });
-
-  return () => (
-    <DemoRow title="大小尺寸">
-      <DemoLine>
-        <SegmentGroup v-model={state.val} size="mini">
-          <Segment label="Mini" val="mini"/>
-          <Segment label="Small" val="small"/>
-          <Segment label="Normal" val="normal"/>
-          <Segment label="Large" val="large"/>
-        </SegmentGroup>
-        <Button label="Mini" size="mini"/>
-      </DemoLine>
-      <DemoLine>
-        <SegmentGroup v-model={state.val} size="small">
-          <Segment label="Mini" val="mini"/>
-          <Segment label="Small" val="small"/>
-          <Segment label="Normal" val="normal"/>
-          <Segment label="Large" val="large"/>
-        </SegmentGroup>
-        <Button label="Small" size="small"/>
-      </DemoLine>
-      <DemoLine>
-        <SegmentGroup v-model={state.val} size="normal">
-          <Segment label="Mini" val="mini"/>
-          <Segment label="Small" val="small"/>
-          <Segment label="Normal" val="normal"/>
-          <Segment label="Large" val="large"/>
-        </SegmentGroup>
-        <Button label="Normal" size="normal"/>
-      </DemoLine>
-      <DemoLine>
-        <SegmentGroup v-model={state.val} size="large">
-          <Segment label="Mini" val="mini"/>
-          <Segment label="Small" val="small"/>
-          <Segment label="Normal" val="normal"/>
-          <Segment label="Large" val="large"/>
-        </SegmentGroup>
-        <Button label="Large" size="large"/>
-      </DemoLine>
-    </DemoRow>
-  );
-});