plain-design 1.0.0-beta.8 → 1.0.0-beta.80

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

@@ -1,790 +0,0 @@
-import {computed, designComponent, designPage, PropType, reactive, useModel, useRefs, watch} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$message, $notice, Button, Checkbox, Dropdown, DropdownOption, Icon, Input, InputGroup, Loading, Segment, SegmentGroup, Tag} from "../../../../packages";
-import {DemoLine} from "../../Demo/DemoLine";
-import './DemoInput.scss';
-import {delay} from "plain-utils/utils/delay";
-import {FixInput} from "../../../../packages/utils/FixInput";
-
-export const demo1 = designPage(() => {
-
-  const state = reactive({
-    val: 'hello world'
-  });
-
-  return () => (
-    <DemoRow title="基本用法">
-      <Input v-model={state.val} width="200"/> {state.val}
-    </DemoRow>
-  );
-});
-
-
-export const demoSize = designPage(() => {
-
-  const state = reactive({
-    val: 'hello world'
-  });
-
-  return () => (
-    <DemoRow title="大小尺寸">
-      <DemoLine>
-        <div>
-          <Input v-model={state.val} size="mini" width="200px"/>
-          <Button label="提交" size="mini"/>
-        </div>
-      </DemoLine>
-      <DemoLine>
-        <div>
-          <Input v-model={state.val} size="small" width="200px"/>
-          <Button label="提交" size="small"/>
-        </div>
-      </DemoLine>
-      <DemoLine>
-        <div>
-          <Input v-model={state.val} size="normal" width="200px"/>
-          <Button label="提交" size="normal"/>
-        </div>
-      </DemoLine>
-      <DemoLine>
-        <div>
-          <Input v-model={state.val} size="large" width="200px"/>
-          <Button label="提交" size="large"/>
-        </div>
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-export const demoNoClear = designPage(() => {
-
-  const state = reactive({
-    val: 'hello world'
-  });
-
-  return () => (
-    <DemoRow title="去掉清空按钮">
-      <DemoLine>
-        <Input v-model={state.val} width="200" noClear/> noClear
-      </DemoLine>
-      <DemoLine>
-        <Input modelValue="桃花仙人种桃树，又摘桃花换酒钱" width="200" noClear/> noClear
-      </DemoLine>
-      <DemoLine>
-        <Input v-model={state.val} width="200"/>
-      </DemoLine>
-      <DemoLine>
-        <Input modelValue="桃花仙人种桃树，又摘桃花换酒钱" width="200"/>
-      </DemoLine>
-
-    </DemoRow>
-  );
-});
-
-
-export const demoIcon = designPage(() => {
-
-  const state = reactive({
-    val: 'hello world'
-  });
-
-  const handler = {
-    onClickPrefixIcon: () => $message.primary('prefix'),
-    onClickSuffixIcon: () => $message.warn('suffix'),
-    onClear: () => $message.error('clear')
-  };
-
-  return () => (
-    <DemoRow title="前置后置图标">
-      <DemoLine>
-        <Input v-model={state.val} width="200" prefixIcon="pi-search" {...handler}/> prefixIcon
-      </DemoLine>
-      <DemoLine>
-        <Input modelValue="桃花仙人种桃树，又摘桃花换酒钱" width="200" suffixIcon="pi-search" {...handler}/> suffixIcon
-      </DemoLine>
-      <DemoLine>
-        <Input v-model={state.val} width="200" prefixIcon="pi-search" noClear {...handler}/> prefixIcon no clear
-      </DemoLine>
-      <DemoLine>
-        <Input modelValue="桃花仙人种桃树，又摘桃花换酒钱" width="200" suffixIcon="pi-search" noClear {...handler}/> suffixIcon no
-        clear
-      </DemoLine>
-      <DemoLine>
-        <Input modelValue="桃花仙人种桃树，又摘桃花换酒钱" width="200" suffixIcon="pi-search"
-               prefixIcon="pi-search" {...handler}/> prefixIcon and suffixIcon
-      </DemoLine>
-
-    </DemoRow>
-  );
-});
-
-export const demoSuffix = designPage(() => {
-
-  const Selector = designComponent({
-    props: {
-      modelValue: { type: String },
-      options: { type: Array as PropType<{ label: string, icon: string }[]> },
-      placement: {},
-      size: {},
-    },
-    emits: {
-      onUpdateModelValue: (val?: string) => true,
-    },
-    setup({ props, event: { emit } }) {
-
-      const model = useModel(() => props.modelValue, emit.onUpdateModelValue);
-
-      return () => (
-        <Dropdown placement={props.placement as any || 'bottom-start'} size={props.size as any}>
-          {{
-            reference: ({ open }: { open?: boolean }) => <span
-              style={{ paddingLeft: '12px' }}>{props.options?.find(i => i.label === model.value)?.label} <Icon
-              icon={open ? 'pi-up' : 'pi-down'} style={{ marginLeft: '4px' }}/></span>,
-            popper: () => <>
-              {props.options?.map(option => (
-                <DropdownOption key={option.label} label={option.label} icon={option.icon}
-                                onClick={() => model.value = option.label}/>
-              ))}
-            </>
-          }}
-        </Dropdown>
-      );
-    }
-  });
-
-  const payOptions = [
-    { label: '微信支付', icon: 'pi-alipay-circle' },
-    { label: '支付宝', icon: 'pi-wechatpay' },
-    { label: '财付通', icon: 'pi-qq' },
-  ];
-
-  const state = reactive({
-    val: 'hello world',
-    size: 'normal' as any,
-  });
-
-  return () => (
-    <DemoRow title="前置后置内容" key={state.size}>
-      <DemoLine>
-        <SegmentGroup v-model={state.size}>
-          <Segment label="Mini" val="mini"/>
-          <Segment label="Small" val="small"/>
-          <Segment label="Normal" val="normal"/>
-          <Segment label="Large" val="large"/>
-        </SegmentGroup>
-      </DemoLine>
-      <DemoLine>
-        <Input v-model={state.val} width="300px" size={state.size}>
-          {{ prefix: () => (<span>汇款账户</span>) }}
-        </Input>
-        <span>prefix test</span>
-      </DemoLine>
-      <DemoLine>
-        <Input v-model={state.val} width="300px" size={state.size}>
-          {{ prefix: () => (<Selector options={payOptions} modelValue="支付宝" size={state.size}/>) }}
-        </Input>
-        <span>prefix dropdown</span>
-      </DemoLine>
-
-      <DemoLine>
-        <Input v-model={state.val} width="300px" size={state.size}>
-          {{ suffix: () => (<span>汇款账户</span>) }}
-        </Input>
-        <span>suffix test</span>
-      </DemoLine>
-      <DemoLine>
-        <Input v-model={state.val} width="300px" size={state.size}>
-          {{
-            suffix: () => (<Selector options={payOptions} modelValue="支付宝" placement="bottom-end" size={state.size}/>)
-          }}
-        </Input>
-        <span>suffix dropdown</span>
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-export const demoStatus = designPage(() => {
-
-  const state = reactive({
-    val: 'hello world'
-  });
-
-  return () => (
-    <DemoRow title="状态">
-      <Input v-model={state.val} width="200"/>
-      <Input v-model={state.val} status="primary" width="200"/>
-      <Input v-model={state.val} status="success" width="200"/>
-      <Input v-model={state.val} status="warn" width="200"/>
-      <Input v-model={state.val} status="error" width="200"/>
-    </DemoRow>
-  );
-});
-
-export const demoBlock = designPage(() => {
-
-  return () => (
-    <DemoRow title="宽度">
-      <div>
-        <Input placeholder="80px" width="80px" noClear/>
-        <br/>
-        <br/>
-        <Input placeholder="150" width="150px" noClear/>
-        <br/>
-        <br/>
-        <Input placeholder="300px" width="300px" noClear/>
-        <br/>
-        <br/>
-        <Input placeholder="Default" noClear/>
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demoThrottleEnter = designPage(() => {
-
-  return () => (
-    <DemoRow title="enter事件节流">
-      <div>
-        <Input placeholder="500ms" width="300" throttleEnter={500} onEnter={() => $message('enter')}/>
-        <br/>
-        <br/>
-        <Input placeholder="1s" width="300" throttleEnter onEnter={() => $message('enter')}/>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demoAsyncEnter = designPage(() => {
-
-  const asyncEnterHandler = async () => {
-    await delay(2000);
-    console.log('done');
-  };
-
-  return () => (
-    <DemoRow title="异步enter处理">
-      <p>使用asyncHandler来处理异步的enter事件，会自动开启loading事件</p>
-      <div>
-        <Input width="300" asyncHandler={asyncEnterHandler}/>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demoLoading = designPage(() => {
-
-  const state = reactive({
-    loading: false,
-  });
-
-  return () => (
-    <DemoRow title="加载状态">
-      <Checkbox label="open loading" v-model={state.loading}/>
-      <Input width="300" loading={state.loading}/>
-    </DemoRow>
-  );
-});
-
-export const demoPassword = designPage(() => {
-
-  const state = reactive({
-    visible: false,
-    text: '123456789',
-  });
-
-  return () => (
-    <DemoRow title="密码输入框">
-      <Input width="300" type={state.visible ? 'text' : 'password'} v-model={state.text} noClear>
-        {{
-          suffixIconContent: () => (
-            <Icon icon={state.visible ? 'pi-eye-invisible' : 'pi-eye'} onClick={() => state.visible = !state.visible}
-                  className="input-suffix-icon"/>
-          )
-        }}
-      </Input>
-    </DemoRow>
-  );
-});
-
-
-export const demoRange = designPage(() => {
-
-  const useFocusHandler = (elGetter: () => HTMLElement | null | undefined) => {
-    const state = reactive({
-      isFocus: false,
-      getEl: () => null as null | HTMLElement,
-    });
-    const handler = {
-      onFocus: () => {
-        state.isFocus = true;
-      },
-      onBlue: () => {
-        state.isFocus = false;
-      },
-    };
-    watch(() => elGetter(), (newEl) => {
-      const oldEl = state.getEl();
-      if (!!oldEl) {
-        oldEl.removeEventListener('focus', handler.onFocus);
-        oldEl.removeEventListener('blur', handler.onBlue);
-      }
-      if (!newEl) {
-        return;
-      }
-      state.getEl = () => newEl || null;
-      newEl.addEventListener('focus', handler.onFocus);
-      newEl.addEventListener('blur', handler.onBlue);
-    }, { immediate: true });
-    const methods = {
-      focus: () => state.getEl()?.focus(),
-      blur: () => state.getEl()?.blur(),
-    };
-    return {
-      state,
-      ...methods,
-    };
-  };
-
-  const { refs, onRef } = useRefs({ start: HTMLInputElement, end: HTMLInputElement });
-
-  const startInput = useFocusHandler(() => refs.start);
-  const endInput = useFocusHandler(() => refs.end);
-
-  return () => (
-    <DemoRow title="范围输入框">
-      <div>
-        <Input placeholder="300px" width="300px" isFocus={startInput.state.isFocus || endInput.state.isFocus}>
-          <div className="input-box input-fill">
-            <FixInput type="text" className="input-box input-fill" value="2022-05-01" style={{ textAlign: 'center' }}
-                      ref={onRef.start}/>
-            <span>/</span>
-            <FixInput type="text" className="input-box input-fill" value="2022-05-20" style={{ textAlign: 'center' }}
-                      ref={onRef.end}/>
-          </div>
-        </Input>
-      </div>
-    </DemoRow>
-  );
-});
-
-
-export const demoMultiple = designPage(() => {
-
-  const state = reactive({
-    size: 'normal' as any,
-    arrayStringValue: null,
-  });
-
-  return () => (
-    <DemoRow title="多值输入框">
-      <p>默认支持以空格，换行符中英文逗号分隔字符串。如果需要禁用这个行为，请设置 multipleSeparator 为 null</p>
-      <DemoLine>
-        <SegmentGroup v-model={state.size}>
-          <Segment label="Mini" val="mini"/>
-          <Segment label="Small" val="small"/>
-          <Segment label="Normal" val="normal"/>
-          <Segment label="Large" val="large"/>
-        </SegmentGroup>
-      </DemoLine>
-      <div>
-        <Input size={state.size} placeholder="normal input" width="300px"/><Button
-        size={state.size}><span>normal input</span></Button>
-        <br/>
-        <br/>
-        <Input size={state.size} modelValue={['标签001', '标签002', '标签003']} multiple width="300px"/><Button
-        size={state.size}><span>multiple input</span></Button>
-        <br/>
-        <br/>
-        <div><Input size={state.size} multiple width="300px"/><Button
-          size={state.size}><span>empty multiple input</span></Button></div>
-        <br/>
-        <br/>
-        <Input size={state.size} modelValue={['标签001', '标签002', '标签003', '标签004', '标签005', '标签006', '标签007']} multiple
-               width="300px" tagsWrap/>
-        <br/>
-        <br/>
-        <Input size={state.size} modelValue={['标签001', '标签002', '标签003', '标签004', '标签005', '标签006', '标签007']} multiple
-               width="300px"/>
-        <br/>
-        <br/>
-        <Input v-model={state.arrayStringValue} placeholder="绑定值类型为arraystring" valueType="arraystring" size={state.size} multiple width="300px"/>
-        {JSON.stringify(state.arrayStringValue)}
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demoBindMultipleText = designPage(() => {
-
-  const state = reactive({
-    val: ['hello world'],
-    inputText: '货拉拉拉不拉拉布拉多取决于拉布拉多在货拉拉上拉的多不多',
-  });
-
-  return () => (
-    <DemoRow title="多值的时候绑定实时输入的文本">
-      <Input v-model={state.val} width="200" multiple v-model:multipleText={state.inputText}
-             placeholder="请输入标签"/>
-      {state.val?.map((item, index) => <Tag key={index}>{item}</Tag>)}
-      <div>
-        <br/>
-        <Input textarea v-model={state.inputText}/>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const demoTextarea = designPage(() => {
-
-  const state = reactive({
-    val: 'hello world'
-  });
-
-  return () => (
-    <DemoRow title="文本域输入框">
-      <div><Input v-model={state.val} width="300"/><Button label="normal input"/></div>
-      <br/>
-      <br/>
-      <div>
-        <Input v-model={state.val} width="300" textarea/>
-        <Button label="textarea"/>
-      </div>
-      <br/>
-      <br/>
-      <div>
-        <Input v-model={state.val} width="300" textarea maxHeight="200"/>
-        <Button label="max height 200px"/>
-      </div>
-      <br/>
-      <br/>
-      <div>
-        <Input v-model={state.val} width="300" textarea height="200"/>
-        <Button label="height 200px"/>
-      </div>
-      <br/>
-      <br/>
-      <div>
-        <Input v-model={state.val} width="300" textarea minHeight="100"/>
-        <Button label="min height 100px"/>
-      </div>
-    </DemoRow>
-  );
-});
-
-export const DemoPlaceholder = designPage(() => () => (
-  <>
-    <DemoRow title="placeholder">
-      <div><Input placeholder="Placeholder"/></div>
-      <br/>
-      <br/>
-      <div><Input placeholder="Placeholder" multiple/></div>
-      <br/>
-      <br/>
-      <div><Input placeholder="Placeholder" textarea/></div>
-      <br/>
-      <br/>
-    </DemoRow>
-  </>
-));
-
-
-export const DemoMaxLength = designPage(() => () => (
-  <>
-    <DemoRow title="最大文本长度">
-      <div><Input placeholder="Placeholder" width="300" maxLength={100}/></div>
-      <br/>
-      <br/>
-      <div><Input placeholder="Placeholder" width="300" multiple maxLength={3}/></div>
-      <br/>
-      <br/>
-      <div><Input placeholder="Placeholder" width="300" textarea maxLength={100}/></div>
-      <br/>
-      <br/>
-    </DemoRow>
-  </>
-));
-
-
-export const DemoVerifyCode = designPage(() => {
-
-  const state = reactive({
-    code: null
-  });
-
-  const sendVerifyCodeRequest = async () => {
-    await delay(1000);
-    $notice.primary('已经发送验证码，请注意查收！');
-  };
-
-  const getVerifyCode = (() => {
-    const state = reactive({ count: null as number | null, loading: false });
-    return Object.assign(async () => {
-      if (!!state.loading || !!state.count) {
-        return;
-      }
-      state.loading = true;
-      await sendVerifyCodeRequest();
-      state.loading = false;
-      state.count = 60;
-      const timer = setInterval(() => {
-        if (!!state.count) {
-          state.count--;
-        }
-        if (state.count === 0) {
-          state.count = null;
-          clearInterval(timer);
-        }
-      }, 1000);
-    }, { state });
-  })();
-
-  return () => (
-    <>
-      <DemoRow title="验证码示例">
-        <Input v-model={state.code} placeholder="请输入验证码" width="300" maxLength={6}>
-          {{
-            suffix: () => (
-              <span onClick={getVerifyCode}>
-                {getVerifyCode.state.loading ? <Loading/> : (
-                  <span>{!!getVerifyCode.state.count ? getVerifyCode.state.count + 's' :
-                    <span style={{ cursor: 'pointer' }}>获取验证码</span>}</span>
-                )}
-              </span>
-            )
-          }}
-        </Input>
-      </DemoRow>
-    </>
-  );
-});
-
-export const DemoGroup = designPage(() => () => (
-  <DemoRow title="输入框组">
-    <InputGroup>
-      <Input placeholder="Placeholder" suffixIcon="pi-search" modelValue="hello world"/>
-      <Button label="Submit" mode="fill"/>
-    </InputGroup>
-    <br/>
-    <br/>
-    <InputGroup>
-      <Input placeholder="Placeholder" multiple suffixIcon="pi-search" modelValue={['hello', 'world']}/>
-      <Button label="Submit" mode="fill"/>
-    </InputGroup>
-    <br/>
-    <br/>
-    <InputGroup>
-      <Input placeholder="Placeholder" suffixIcon="pi-search" modelValue="hello world" fixedWidth width={120}/>
-      <Input placeholder="Placeholder" suffixIcon="pi-search" modelValue="hello world"/>
-      <Button label="Submit" mode="fill"/>
-    </InputGroup>
-  </DemoRow>
-));
-
-
-export const DemoNotEditable = designPage(() => {
-
-  return () => (
-    <DemoRow title="禁用">
-      <p>input</p>
-      <Input placeholder="Placeholder" disabled/>
-      <br/>
-      <br/>
-      <Input placeholder="Placeholder" disabled modelValue="hello world"/>
-      <br/>
-      <br/>
-
-      <p>multiple input</p>
-      <Input placeholder="Placeholder" multiple disabled/>
-      <br/>
-      <br/>
-      <Input placeholder="Placeholder" multiple disabled modelValue={['hello', 'world']}/>
-      <br/>
-      <br/>
-
-      <p>textarea</p>
-      <Input placeholder="Placeholder" disabled textarea/>
-      <br/>
-      <br/>
-      <Input placeholder="Placeholder" disabled modelValue="hello world" textarea/>
-      <br/>
-      <br/>
-
-      <p>input group</p>
-      <InputGroup disabled>
-        <Input placeholder="Placeholder" suffixIcon="pi-search" modelValue="hello world"/>
-        <Button label="Submit" mode="fill"/>
-      </InputGroup>
-    </DemoRow>
-  );
-});
-
-
-export const DemoReadonly = designPage(() => {
-
-  return () => (
-    <DemoRow title="只读">
-      <p>input</p>
-      <Input placeholder="Placeholder" readonly/>
-      <br/>
-      <br/>
-      <Input placeholder="Placeholder" readonly modelValue="hello world"/>
-      <br/>
-      <br/>
-
-      <p>multiple input</p>
-      <Input placeholder="Placeholder" multiple readonly/>
-      <br/>
-      <br/>
-      <Input placeholder="Placeholder" multiple readonly modelValue={['hello', 'world']}/>
-      <br/>
-      <br/>
-
-      <p>textarea</p>
-      <Input placeholder="Placeholder" readonly textarea/>
-      <br/>
-      <br/>
-      <Input placeholder="Placeholder" readonly modelValue="hello world" textarea/>
-      <br/>
-      <br/>
-
-      <p>input group</p>
-      <InputGroup readonly>
-        <Input placeholder="Placeholder" suffixIcon="pi-search" modelValue="hello world"/>
-        <Button label="Submit" mode="fill"/>
-      </InputGroup>
-    </DemoRow>
-  );
-});
-
-export const demoSwitchInputType = designPage(() => {
-
-  const state = reactive({
-    val: 'hello world' as any,
-    type: 'input',
-  });
-
-  return () => (
-    <DemoRow title="基本用法">
-      <SegmentGroup v-model={state.type} onUpdateModelValue={((val: any) => {
-        if (val === 'multiple') {
-          state.val = ['hello'];
-        } else {
-          state.val = 'hello world';
-        }
-      }) as any}>
-        <Segment label="input" val="input"/>
-        <Segment label="textarea" val="textarea"/>
-        <Segment label="multiple" val="multiple"/>
-      </SegmentGroup>
-      <Input v-model={state.val} width="200" textarea={state.type === 'textarea'} multiple={state.type === 'multiple'}/>
-      {JSON.stringify(state.val)}
-    </DemoRow>
-  );
-});
-
-export const demoSuggestion = designPage(() => {
-
-  const state = reactive({
-    val: null as any,
-    multipleValue: null as any,
-    multipleSearchText: null as any,
-    textarea: '',
-  });
-
-  const suggestion1 = computed(() => {
-    const val = state.val?.trim();
-    return !!val && !!val.length ? [
-      `${val}`,
-      `${val}${val}`,
-      `${val}${val}${val}`,
-    ] : [
-      '重庆小面',
-      '云南过桥米线',
-      '陕西肉夹馍',
-      '广东肠粉',
-      '柳州螺蛳粉',
-    ];
-  });
-
-  const suggestion2 = computed(() => {
-    const val = state.multipleSearchText?.trim();
-    return !!val && !!val.length ? [
-      `${val}`,
-      `${val}${val}`,
-      `${val}${val}${val}`,
-    ] : [
-      '重庆小面',
-      '云南过桥米线',
-      '陕西肉夹馍',
-      '广东肠粉',
-      '柳州螺蛳粉',
-    ];
-  });
-
-  const suggestion3 = computed(() => {
-    const val = state.textarea?.trim();
-    return !!val && !!val.length ? [
-      `${val}`,
-      `${val}${val}`,
-      `${val}${val}${val}`,
-    ] : [
-      '重庆小面',
-      '云南过桥米线',
-      '陕西肉夹馍',
-      '广东肠粉',
-      '柳州螺蛳粉',
-    ];
-  });
-
-  return () => (
-    <DemoRow title="推荐输入（自动补全）">
-      <DemoLine title="普通输入框">
-        <Input v-model={state.val} width="200" suggestion={suggestion1.value}/> {state.val}
-      </DemoLine>
-      <DemoLine title="多值输入框">
-        <Input v-model={state.multipleValue} width="200" suggestion={suggestion2.value} multiple v-model:multipleText={state.multipleSearchText}/> {state.multipleValue}
-      </DemoLine>
-      <DemoLine title="多行输入框">
-        <Input v-model={state.textarea} width="200" suggestion={suggestion3.value} textarea/> {state.textarea}
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-export const demoSuggestion2 = designPage(() => {
-  const state = reactive({
-    val: null as any,
-    multipleValue: null as any,
-    multipleSearchText: null as any,
-    textarea: '',
-  });
-
-  const suggestion1 = computed(() => {
-    let val = state.val?.trim();
-    if (!val) {
-      return [];
-    }
-    val = val.split('@')[0];
-    if (!val) {
-      return [];
-    }
-    return [
-      `${val}@gmail.com`,
-      `${val}@aliyun.com`,
-      `${val}@qq.com`,
-      `${val}@foxmail.com`,
-      `${val}@163.com`,
-    ];
-  });
-
-
-  return () => (
-    <DemoRow title="邮箱自动补全">
-      <DemoLine title="普通输入框">
-        <Input v-model={state.val} width="200" suggestion={suggestion1.value}/> {state.val}
-      </DemoLine>
-    </DemoRow>
-  );
-});