plain-design 1.0.0-beta.21 → 1.0.0-beta.23

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

@@ -1,790 +1,790 @@
-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>
-  );
-});
+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>
+  );
+});