plain-design 0.0.97 → 1.0.0-beta.10

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

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