plain-design 1.0.0-beta.1 → 1.0.0-beta.100

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

@@ -1,403 +0,0 @@
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Button, Checkbox, Segment, SegmentGroup, TimePicker} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-
-  const state = reactive({ value: '12:30:00' });
-
-  return () => (
-    <DemoRow title="基本用法">
-      <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value}/>
-      <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value}/>
-      {state.value}
-    </DemoRow>
-  );
-});
-
-export const demo2 = designPage(() => {
-
-  const state = reactive({ start: '12:30:00', end: '18:30:00' });
-
-  return () => (
-    <DemoRow title="时间范围">
-      <TimePicker
-        style={{ width: '400px' }}
-        range
-        v-model:start={state.start} v-model:end={state.end}
-        startPlaceholder="开始时间"
-        endPlaceholder="结束时间"
-      />
-      <TimePicker
-        style={{ width: '400px', display: 'flex', margin: '8px 0' }}
-        range
-        v-model:start={state.start} v-model:end={state.end}
-        startPlaceholder="开始时间"
-        endPlaceholder="结束时间"
-      />
-      {state.start} / {state.end}
-    </DemoRow>
-  );
-});
-
-export const demoSeparate = designPage(() => {
-
-  const state = reactive({ start: '12:30:00', end: '18:30:00' });
-
-  return () => (
-    <DemoRow title="时间范围分开选择">
-      <div>1、分开选择开始时间与结束时间</div>
-      <div>2、可以在input中清空某个时间，非separate模式下不可以清空某个时间，要么都清空，要么清空无效</div>
-      <div>3、选择时间的时候，不会自动补全另一个时间，非separate模式下，选中一个时间，另一个时间没有值得时候会以defaultTime的值作为默认值更新</div>
-      <div>4、这种模式下适用于设置筛选条件，比如对表格中的某个时间类型的字段进行筛选，那么此时可以没有开始时间或者没有结束时间</div>
-      <TimePicker
-        style={{ width: '400px' }}
-        separate
-        v-model:start={state.start} v-model:end={state.end}
-        startPlaceholder="开始时间"
-        endPlaceholder="结束时间"
-      />
-      <TimePicker
-        style={{ width: '400px', display: 'flex', margin: '8px 0' }}
-        separate
-        v-model:start={state.start} v-model:end={state.end}
-        startPlaceholder="开始时间"
-        endPlaceholder="结束时间"
-      />
-      {state.start} / {state.end}
-    </DemoRow>
-  );
-});
-
-
-export const demoFormatter = designPage(() => {
-
-  const state = reactive({
-    value: '121500',
-    start: '121500',
-    end: '183000',
-  });
-
-  return () => (
-    <DemoRow title="格式化值以及显示值">
-      <div>
-        <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value} displayFormat="HH时mm分ss秒" valueFormat="HHmmss"/>
-        {state.value}
-      </div>
-      <div style={{ margin: '8px 0' }}>
-        <TimePicker
-          range
-          style={{ width: '400px', display: 'inline-flex' }}
-          displayFormat="HH时mm分ss秒" valueFormat="HHmmss"
-          v-model:start={state.start} v-model:end={state.end}/>
-        {state.start} / {state.end}
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demoFoot = designPage(() => {
-
-  const state = reactive({
-    value: '121500',
-    start: '121500',
-    end: '183000',
-  });
-
-  const setSingleValue = () => {
-    state.value = TimePicker.plainDate.today('HH::mm:ss', 'HHmmss').getValue();
-  };
-  const setRangeValue = () => {
-    state.start = '000000';
-    state.end = '235959';
-  };
-
-  return () => (
-    <DemoRow title="额外内容">
-      <div>
-        <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value} displayFormat="HH时mm分ss秒" valueFormat="HHmmss">
-          {{ foot: () => <><Button label="现在" onClick={setSingleValue} mode="text" size="mini"/></> }}
-        </TimePicker>
-        {state.value}
-      </div>
-      <div style={{ margin: '8px 0' }}>
-        <TimePicker
-          range
-          style={{ width: '400px', display: 'inline-flex' }}
-          displayFormat="HH时mm分ss秒" valueFormat="HHmmss"
-          v-model:start={state.start} v-model:end={state.end}>
-          {{ foot: () => <><Button label="今天" onClick={setRangeValue} mode="text" size="mini"/></> }}
-        </TimePicker>
-        {state.start} / {state.end}
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demoDefaultTime = designPage(() => {
-
-  const state = reactive({
-    value: '12:15:00',
-    start: '12:15:00',
-    end: '18:30:00',
-  });
-
-  return () => (
-    <DemoRow title="格式化值以及显示值">
-      <div>
-        <div>defaultTime=12:30:00</div>
-        <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value} defaultTime="12:30:00"/>
-        {state.value}
-      </div>
-      <div style={{ margin: '8px 0' }}>
-        <div>defaultStartTime=12:30:00, defaultEndTime=18:30:0</div>
-        <TimePicker
-          range
-          style={{ width: '400px', display: 'inline-flex' }}
-          defaultStartTime="12:30:00"
-          defaultEndTime="18:30:00"
-          v-model:start={state.start} v-model:end={state.end}/>
-        {state.start} / {state.end}
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demoMaxMin = designPage(() => {
-
-  const state = reactive({
-    value: '12:15:00',
-    start: '12:15:00',
-    end: '18:30:00',
-
-    max: '12:12:12',
-    min: '04:04:04',
-  });
-
-  return () => (
-    <DemoRow title="最大最小时间">
-      <div>max=12:12:12 min=04:04:04</div>
-      <div>
-        <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value} max={state.max} min={state.min}/>
-        {state.value}
-      </div>
-      <div style={{ margin: '8px 0' }}>
-        <div>defaultStartTime=12:30:00, defaultEndTime=18:30:0</div>
-        <TimePicker
-          range
-          style={{ width: '400px', display: 'inline-flex' }}
-          max={state.max} min={state.min}
-          defaultStartTime="12:30:00"
-          defaultEndTime="18:30:00"
-          v-model:start={state.start} v-model:end={state.end}/>
-        {state.start} / {state.end}
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demoView = designPage(() => {
-  const state = reactive({
-    h: null as any,
-    hm: null as any,
-    hms: null as any,
-    ms: null as any,
-  });
-  return () => <>
-    <DemoRow title="视图类型">
-      <h4>时</h4>
-      <TimePicker style={{ width: '200px', display: 'inline-flex', marginRight: '8px' }} v-model={state.h} valueFormat="HH" displayFormat="HH时" layout={['h']}/>
-      <span>{state.h}</span>
-      <h4>时分</h4>
-      <TimePicker style={{ width: '200px', display: 'inline-flex', marginRight: '8px' }} v-model={state.hm} valueFormat="HHmm" displayFormat="HH时mm分" layout={['h', 'm']}/>
-      <span>{state.hm}</span>
-      <h4>时分秒</h4>
-      <TimePicker style={{ width: '200px', display: 'inline-flex', marginRight: '8px' }} v-model={state.hms} valueFormat="HHmmss" displayFormat="HH时mm分ss秒"/>
-      <span>{state.hms}</span>
-      <h4>分秒</h4>
-      <TimePicker style={{ width: '200px', display: 'inline-flex', marginRight: '8px' }} v-model={state.ms} valueFormat="mmss" displayFormat="mm分ss秒" layout={['m', 's']}/>
-      <span>{state.ms}</span>
-    </DemoRow>
-  </>;
-});
-
-
-export const demoNotEditable = designPage(() => {
-
-  const state = reactive({
-    value: '12:15:00',
-    start: '12:15:00',
-    end: '18:30:00',
-
-    disabled: true,
-    readonly: true,
-  });
-
-  return () => (
-    <DemoRow title="禁用只读">
-      <div>
-        <Checkbox v-model={state.disabled} label="禁用"/>
-        &nbsp;
-        <Checkbox v-model={state.readonly} label="只读"/>
-      </div>
-      <div>
-        <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value} disabled={state.disabled} readonly={state.readonly}/>
-        &nbsp;
-        {state.value}
-      </div>
-      <div style={{ margin: '8px 0' }}>
-        <TimePicker
-          range
-          style={{ width: '400px', display: 'inline-flex' }}
-          disabled={state.disabled} readonly={state.readonly}
-          defaultStartTime="12:30:00"
-          defaultEndTime="18:30:00"
-          v-model:start={state.start} v-model:end={state.end}/>
-        &nbsp;
-        {state.start} / {state.end}
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demoPlaceholder = designPage(() => {
-
-  const state = reactive({
-    value: null as any,
-    start: null as any,
-    end: null as any,
-
-  });
-
-  return () => (
-    <DemoRow title="空值占位符">
-      <div>max=12:12:12 min=04:04:04</div>
-      <div>
-        <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value} placeholder="配送时间"/>
-        {state.value}
-      </div>
-      <div style={{ margin: '8px 0' }}>
-        <div>defaultStartTime=12:30:00, defaultEndTime=18:30:0</div>
-        <TimePicker
-          range
-          style={{ width: '400px', display: 'inline-flex' }}
-          startPlaceholder="下单时间"
-          endPlaceholder="送达时间"
-          defaultStartTime="12:30:00"
-          defaultEndTime="18:30:00"
-          v-model:start={state.start} v-model:end={state.end}/>
-        {state.start} / {state.end}
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demoTimePickType = designPage(() => {
-
-  const state = reactive({
-    value: null as any,
-    start: null as any,
-    end: null as any,
-    type: 'single' as 'single' | 'range' | 'separate',
-  });
-
-  return () => (
-    <DemoRow title="类型切换">
-      <div>在使用v-if或者动态组件渲染内容的时候，如果此时刚好复用Time组件，但是类型（single，range，separate）不一致，即使不用设置key，Time依然能够正常工作，并且会销毁不用的popper</div>
-      <SegmentGroup v-model={state.type} style={{ marginBottom: '8px' }}>
-        <Segment label="single" val="single"/>
-        <Segment label="range" val="range"/>
-        <Segment label="separate" val="separate"/>
-      </SegmentGroup>
-      {state.type === 'single' && (
-        <div>
-          <TimePicker style={{ width: '200px', display: 'inline-flex' }} v-model={state.value} placeholder="配送时间"/>
-          &nbsp;{state.value}
-        </div>
-      )}
-      {state.type === 'range' && (
-        <div>
-          <TimePicker
-            range
-            style={{ width: '400px', display: 'inline-flex' }}
-            startPlaceholder="下单时间"
-            endPlaceholder="送达时间"
-            defaultStartTime="12:30:00"
-            defaultEndTime="18:30:00"
-            v-model:start={state.start} v-model:end={state.end}/>
-          &nbsp;{state.start} / {state.end}
-        </div>
-      )}
-      {state.type === 'separate' && (
-        <div>
-          <TimePicker
-            range
-            style={{ width: '400px', display: 'inline-flex' }}
-            startPlaceholder="下单时间"
-            endPlaceholder="送达时间"
-            defaultStartTime="12:30:00"
-            defaultEndTime="18:30:00"
-            separate
-            v-model:start={state.start} v-model:end={state.end}/>
-          &nbsp;{state.start} / {state.end}
-        </div>
-      )}
-    </DemoRow>
-  );
-});
-
-export const demoCustom = designPage(() => {
-  const state = reactive({ val: null as any });
-
-  const custom = (layout: string, value: { hour: number, minute: number, second: number }): number[] => {
-
-    let five = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55];
-    let ten = [0, 10, 20, 30, 40, 50];
-
-    if (layout === 'h') {
-      return [8, 9, 10, 11, 13, 15, 17];
-    }
-    if (layout === 'm') {
-      if (!value) {
-        return [];
-      }
-      return value.hour > 12 ? ten : five;
-    }
-
-    return [];
-  };
-
-  return () => <>
-    <DemoRow title="自定义可选时间点">
-      <div>时只能选择 8, 9, 10, 11, 13, 15, 17</div>
-      <div>分依据时而定，如果时大于12，则可选项为 0, 10, 20, 30, 40, 50</div>
-      <div>否则可选项为 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55</div>
-      <TimePicker style={{ width: '200px' }} v-model={state.val} valueFormat="HHmm" displayFormat="HH时mm分" layout={['h', 'm']} custom={custom}/>
-      <span>value:{state.val}</span>
-    </DemoRow>
-  </>;
-});
-
-
-export const demoReference = designPage(() => {
-
-  const state = reactive({
-    value: '12:30:00',
-    start: '12:30:00',
-    end: '18:59:59',
-  });
-
-  return () => (
-    <DemoRow title="自定义触发元素">
-      <TimePicker v-model={state.value}>
-        <Button label={state.value || '选择时间'}/>
-      </TimePicker>
-      <TimePicker v-model:start={state.start} v-model:end={state.end} range>
-        <Button label={[state.start, state.end].filter(Boolean).join(',') || '选择时间'}/>
-      </TimePicker>
-    </DemoRow>
-  );
-});

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

@@ -1,56 +0,0 @@
-import {Checkbox, Toggle} from "../../../../packages";
-import {designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {DemoLine} from "../../Demo/DemoLine";
-
-export default designPage(() => {
-
-  const state = reactive({
-    val: {
-      1: '',
-    } as any,
-  });
-
-  return () => (
-    <div>
-      <DemoRow title={'基本用法'}>
-        <Toggle v-model={state.val[0]}/>
-        <Toggle v-model={state.val[0]}/>
-        {String(state.val[0])}
-      </DemoRow>
-      <DemoRow title={'真假值'}>
-        <Toggle v-model={state.val[1]} trueValue={10} falseValue={20}/>
-        {state.val[1]}
-      </DemoRow>
-      <DemoRow title={'状态'}>
-        <Toggle modelValue={true} status={'primary'}/>
-        <Toggle modelValue={true} status={'success'}/>
-        <Toggle modelValue={true} status={'warn'}/>
-        <Toggle modelValue={true} status={'error'}/>
-      </DemoRow>
-      <DemoRow title={'方形'}>
-        <Toggle modelValue={true} status={'primary'} square/>
-        <Toggle modelValue={true} status={'success'} square/>
-        <Toggle modelValue={true} status={'warn'} square/>
-        <Toggle modelValue={true} status={'error'} square/>
-      </DemoRow>
-      <DemoRow title={'大小'}>
-        <Toggle modelValue={true} size={'large'}/>
-        <Toggle modelValue={true} size={'normal'}/>
-        <Toggle modelValue={true} size={'small'}/>
-        <Toggle modelValue={true} size={'mini'}/>
-      </DemoRow>
-      <DemoRow title={'只读与禁用'}>
-        <Checkbox v-model={state.val[2]} label={'禁用/只读'}/>
-        <DemoLine title={'禁用'}>
-          <Toggle modelValue={true} disabled={state.val[2]}/>
-          <Toggle disabled={state.val[2]}/>
-        </DemoLine>
-        <DemoLine title={'只读'}>
-          <Toggle modelValue={true} readonly={state.val[2]}/>
-          <Toggle readonly={state.val[2]}/>
-        </DemoLine>
-      </DemoRow>
-    </div>
-  );
-});

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

@@ -1,120 +0,0 @@
-import {designPage, reactive, useRefs} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Button, Icon, Input, Tooltip, useTooltip} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-  return () => (
-    <DemoRow title="基本用法">
-      <Tooltip message="Tooltip message">
-        <Button label="Button"/>
-      </Tooltip>
-      <Tooltip message="Tooltip message">
-        <span>Text</span>
-      </Tooltip>
-      <Tooltip message="Favorite">
-        <Icon icon="pi-star"/>
-      </Tooltip>
-    </DemoRow>
-  );
-});
-
-export const demoOverflowTooltip = designPage(() => {
-
-  const state = reactive({
-    tooltipText: '文本长度溢出时tooltip显示文本',
-  });
-
-  return () => (
-    <DemoRow title="溢出时tooltip显示">
-      <Input v-model={state.tooltipText}/>
-      <Tooltip message="Tooltip文本" overflowTooltip>
-        <div style={{ display: 'inline-block', width: '100px', }}>
-          {state.tooltipText}
-        </div>
-      </Tooltip>
-    </DemoRow>
-  );
-});
-
-export const demo2 = designPage(() => {
-  return () => (
-    <DemoRow title="白色主题">
-      <Tooltip message="Tooltip message" dark={false}>
-        <Button label="Button"/>
-      </Tooltip>
-    </DemoRow>
-  );
-});
-
-export const demoUseTooltip = designPage(() => {
-
-  const { refs, onRef } = useRefs({ el: HTMLElement });
-
-  const state = reactive({
-    message: '123' as any
-  });
-
-  useTooltip({
-    ignoreEmptyMessage: true,
-    tooltip: () => ({
-      reference: refs.el,
-      message: state.message,
-    })
-  });
-
-  return () => (
-    <DemoRow title="useTooltip ==>> ignoreEmptyMessage:true">
-      <Input v-model={state.message} width={300}/>
-      <span ref={onRef.el}>reference</span>
-    </DemoRow>
-  );
-});
-
-export const demoUseTooltip2 = designPage(() => {
-
-  const { refs, onRef } = useRefs({ el: HTMLElement });
-
-  const state = reactive({
-    message: '123' as any
-  });
-
-  useTooltip({
-    ignoreEmptyMessage: false,
-    tooltip: () => ({
-      reference: refs.el,
-      message: state.message,
-    })
-  });
-
-  return () => (
-    <DemoRow title="useTooltip ==>> ignoreEmptyMessage:false">
-      <Input v-model={state.message} width={300}/>
-      <span ref={onRef.el}>reference</span>
-    </DemoRow>
-  );
-});
-
-export const demoUseTooltipOverflow = designPage(() => {
-
-  const { refs, onRef } = useRefs({ el: HTMLElement });
-
-  const state = reactive({
-    message: '货拉拉拉不拉拉布拉多取决于拉布拉多在货拉拉上拉的多不多' as any
-  });
-
-  useTooltip({
-    overflow: true,
-    tooltip: () => ({
-      reference: refs.el,
-      message: state.message,
-      status: 'error',
-    }),
-  });
-
-  return () => (
-    <DemoRow title="useTooltip(overflow)">
-      <Input v-model={state.message} width={300}/>
-      <div ref={onRef.el} style={{ display: 'inline-block', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap', width: '100px', height: '22px' }}>{state.message}</div>
-    </DemoRow>
-  );
-});