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

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

@@ -1,819 +0,0 @@
-import {designPage, onMounted, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Button, ButtonGroup, Checkbox, DropdownGroup, GridRow, Select, SelectOption} from "../../../../packages";
-import {iSelectOptionProps} from "../../../../packages/components/Select/select.utils";
-import {DemoLine} from "../../Demo/DemoLine";
-
-export const DemoSelect = designPage(() => {
-
-  const state = reactive({
-    val: null,
-  });
-
-  return () => (
-    <DemoRow title="基本用法">
-      <Select v-model={state.val} style={{ width: '200px' }} placeholder="支付方式">
-        <SelectOption label="支付宝" val="alipay"/>
-        <SelectOption label="微信支付" val="wechat_pay"/>
-        <>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-        </>
-        <SelectOption label="云闪付" val="cloud_pay"/>
-        <SelectOption label="网银支付" val="net_pay"/>
-        <SelectOption label="快捷支付" val="convince_pay"/>
-        <SelectOption label="paypal" val="paypal"/>
-      </Select>
-      <Select v-model={state.val} style={{ width: '200px' }} placeholder="支付方式">
-        <SelectOption label="支付宝" val="alipay"/>
-        <SelectOption label="微信支付" val="wechat_pay"/>
-        <GridRow>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-        </GridRow>
-        <SelectOption label="云闪付" val="cloud_pay"/>
-        <SelectOption label="网银支付" val="net_pay"/>
-        <SelectOption label="快捷支付" val="convince_pay"/>
-        <SelectOption label="paypal" val="paypal"/>
-      </Select>
-      &nbsp;{state.val}
-    </DemoRow>
-  );
-});
-
-export const multipleDemo = designPage(() => {
-
-  const state = reactive({
-    val: null as any,
-  });
-
-  return () => (
-    <DemoRow title="多选">
-      <Select v-model={state.val} style={{ width: '200px' }} placeholder="支付方式" multiple>
-        <SelectOption label="支付宝" val="alipay"/>
-        <SelectOption label="微信支付" val="wechat_pay"/>
-        <>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-        </>
-        <SelectOption label="云闪付" val="cloud_pay"/>
-        <SelectOption label="网银支付" val="net_pay"/>
-        <SelectOption label="快捷支付" val="convince_pay"/>
-        <SelectOption label="paypal" val="paypal"/>
-      </Select>
-      <Select v-model={state.val} style={{ width: '200px' }} placeholder="支付方式" multiple>
-        <SelectOption label="支付宝" val="alipay"/>
-        <SelectOption label="微信支付" val="wechat_pay"/>
-        <>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-        </>
-        <SelectOption label="云闪付" val="cloud_pay"/>
-        <SelectOption label="网银支付" val="net_pay"/>
-        <SelectOption label="快捷支付" val="convince_pay"/>
-        <SelectOption label="paypal" val="paypal"/>
-      </Select>
-      <span>{state.val?.join(',')}</span>
-    </DemoRow>
-  );
-});
-
-
-export const multipleWrapDemo = designPage(() => {
-
-  const state = reactive({
-    val: null as any,
-  });
-
-  return () => (
-    <DemoRow title="多选：换行显示">
-      <Select v-model={state.val} style={{ width: '200px' }} placeholder="支付方式" multiple inputAttrs={{ tagsWrap: true }}>
-        <SelectOption label="支付宝" val="alipay"/>
-        <SelectOption label="微信支付" val="wechat_pay"/>
-        <>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-        </>
-        <SelectOption label="云闪付" val="cloud_pay"/>
-        <SelectOption label="网银支付" val="net_pay"/>
-        <SelectOption label="快捷支付" val="convince_pay"/>
-        <SelectOption label="paypal" val="paypal"/>
-      </Select>
-      <Select v-model={state.val} style={{ width: '200px' }} placeholder="支付方式" multiple inputAttrs={{ tagsWrap: true }}>
-        <SelectOption label="支付宝" val="alipay"/>
-        <SelectOption label="微信支付" val="wechat_pay"/>
-        <>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-        </>
-        <SelectOption label="云闪付" val="cloud_pay"/>
-        <SelectOption label="网银支付" val="net_pay"/>
-        <SelectOption label="快捷支付" val="convince_pay"/>
-        <SelectOption label="paypal" val="paypal"/>
-      </Select>
-      <span>{state.val?.join(',')}</span>
-    </DemoRow>
-  );
-});
-
-
-export const multipleObjectDemo = designPage(() => {
-
-  const options = [
-    { name: '支付宝', code: 'alipay', version: '1' },
-    { name: '微信支付', code: 'wechat_pay', version: '1' },
-    { name: '财付通', code: 'qq_pay', version: '1' },
-    { name: '快支付', code: 'fast_pay', version: '1' },
-    { name: '云闪付', code: 'cloud_pay', version: '1' },
-    { name: '网银支付', code: 'net_pay', version: '1' },
-    { name: '快捷支付', code: 'convince_pay', version: '1' },
-    { name: 'paypal', code: 'paypal', version: '1' },
-  ] as any[];
-
-  const state = reactive({
-    val: [
-      { name: '支付宝', code: 'alipay', version: '2' },
-      { name: '微信支付', code: 'wechat_pay', version: '2' },
-    ] as any[],
-  });
-
-  const isMatch = ({ value, option }: any) => !!value && !!option && (value.code == option.code);
-
-  return () => (
-    <DemoRow title="多选，绑定值为对象">
-      <Select v-model={state.val} style={{ width: '200px' }} placeholder="支付方式" multiple isMatch={isMatch}>
-        {options.map((option) => (
-          <SelectOption label={option.name} val={option} key={option.code}/>
-        ))}
-      </Select>
-      <span>{state.val?.map(i => i.name).join(',')}</span>
-    </DemoRow>
-  );
-});
-
-
-export const multipleArraystring = designPage(() => {
-
-  const options = [
-    { name: '支付宝', code: 'alipay', version: '1' },
-    { name: '微信支付', code: 'wechat_pay', version: '1' },
-    { name: '财付通', code: 'qq_pay', version: '1' },
-    { name: '快支付', code: 'fast_pay', version: '1' },
-    { name: '云闪付', code: 'cloud_pay', version: '1' },
-    { name: '网银支付', code: 'net_pay', version: '1' },
-    { name: '快捷支付', code: 'convince_pay', version: '1' },
-    { name: 'paypal', code: 'paypal', version: '1' },
-  ] as any[];
-
-  const state = reactive({
-    val: 'alipay,fast_pay',
-  });
-
-  return () => (
-    <DemoRow title="多选，绑定值为arraystring">
-      <Select v-model={state.val} style={{ width: '200px' }} placeholder="支付方式" multiple valueType="arraystring">
-        {options.map((option) => (
-          <SelectOption label={option.name} val={option.code} key={option.code}/>
-        ))}
-      </Select>
-      <span>{state.val}</span>
-    </DemoRow>
-  );
-});
-
-export const DemoDynamicSelect = designPage(() => {
-
-  const state = reactive({
-    val: null,
-    isShow: true,
-  });
-
-  onMounted(() => {
-    setInterval(() => {
-      state.isShow = !state.isShow;
-    }, 1000);
-  });
-
-  return () => (
-    <DemoRow title="动态选项">
-      <Select v-model={state.val} style={{ width: '200px' }} placeholder="支付方式">
-        {!!state.isShow && <SelectOption label="支付宝" val="alipay"/>}
-        <SelectOption label="微信支付" val="wechat_pay"/>
-        <>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-        </>
-        <SelectOption label="云闪付" val="cloud_pay"/>
-        <SelectOption label="网银支付" val="net_pay"/>
-        <SelectOption label="快捷支付" val="convince_pay"/>
-        <SelectOption label="paypal" val="paypal"/>
-      </Select>
-      <Select v-model={state.val} style={{ width: '200px' }} placeholder="支付方式">
-        {!!state.isShow && <SelectOption label="支付宝" val="alipay"/>}
-        <SelectOption label="微信支付" val="wechat_pay"/>
-        <GridRow>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-        </GridRow>
-        <SelectOption label="云闪付" val="cloud_pay"/>
-        <SelectOption label="网银支付" val="net_pay"/>
-        <SelectOption label="快捷支付" val="convince_pay"/>
-        <SelectOption label="paypal" val="paypal"/>
-      </Select>
-      &nbsp;{state.val}
-    </DemoRow>
-  );
-});
-
-export const VirtualDemo = designPage(() => {
-
-  const state = reactive({
-    val: null as any,
-    vals: null as any,
-  });
-
-  const options: iSelectOptionProps[] = (new Array(100)).fill(null).map((_, index) => ({ index, label: `选项_${index}`, val: `opt_${index}` }));
-
-  return () => (
-    <DemoRow title="虚拟列表">
-      <DemoLine title="单选">
-        <Select style={{ width: '200px' }} placeholder="虚拟选项" v-model={state.val} virtualData={options}/>
-        &nbsp; {state.val}
-      </DemoLine>
-      <DemoLine title="多选">
-        <Select style={{ width: '200px' }} placeholder="虚拟选项(多选)" v-model={state.vals} virtualData={options} multiple/>
-        &nbsp; {state.vals?.join(',')}
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-export const DisableDemo = designPage(() => {
-
-  const state = reactive({
-    val: 'fast_pay' as any,
-    vals: ['fast_pay'] as any,
-  });
-
-  return () => (
-    <DemoRow title="禁用选项">
-      <DemoLine title="单选">
-        <Select v-model={state.val} style={{ width: '200px' }}>
-          <SelectOption label="支付宝" val="alipay"/>
-          <SelectOption label="微信支付" val="wechat_pay"/>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay" disabled/>
-          <SelectOption label="云闪付" val="cloud_pay" disabled/>
-          <SelectOption label="网银支付" val="net_pay"/>
-          <SelectOption label="快捷支付" val="convince_pay"/>
-          <SelectOption label="paypal" val="paypal"/>
-        </Select>&nbsp;{state.val}
-      </DemoLine>
-      <DemoLine title="多选">
-        <Select v-model={state.vals} multiple style={{ width: '200px' }}>
-          <SelectOption label="支付宝" val="alipay"/>
-          <SelectOption label="微信支付" val="wechat_pay"/>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay" disabled/>
-          <SelectOption label="云闪付" val="cloud_pay" disabled/>
-          <SelectOption label="网银支付" val="net_pay"/>
-          <SelectOption label="快捷支付" val="convince_pay"/>
-          <SelectOption label="paypal" val="paypal"/>
-        </Select>&nbsp;{state.vals?.join(',')}
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-export const GroupDemo = designPage(() => {
-
-  const state = reactive({
-    val: 'fast_pay' as any,
-    vals: ['fast_pay'] as any,
-  });
-
-  return () => (
-    <DemoRow title="分组">
-      <DemoLine title="单选">
-        <Select v-model={state.val} style={{ width: '200px' }}>
-          <DropdownGroup title="分组一"/>
-          <SelectOption label="支付宝" val="alipay"/>
-          <SelectOption label="微信支付" val="wechat_pay"/>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <DropdownGroup title="分组二"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-          <SelectOption label="云闪付" val="cloud_pay"/>
-          <DropdownGroup title="分组三"/>
-          <SelectOption label="网银支付" val="net_pay"/>
-          <SelectOption label="快捷支付" val="convince_pay"/>
-          <SelectOption label="paypal" val="paypal"/>
-        </Select>&nbsp;{state.val}
-      </DemoLine>
-      <DemoLine title="多选">
-        <Select v-model={state.vals} multiple style={{ width: '200px' }}>
-          <DropdownGroup title="分组一"/>
-          <SelectOption label="支付宝" val="alipay"/>
-          <SelectOption label="微信支付" val="wechat_pay"/>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <DropdownGroup title="分组二"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-          <SelectOption label="云闪付" val="cloud_pay"/>
-          <DropdownGroup title="分组三"/>
-          <SelectOption label="网银支付" val="net_pay"/>
-          <SelectOption label="快捷支付" val="convince_pay"/>
-          <SelectOption label="paypal" val="paypal"/>
-        </Select>&nbsp;{state.vals?.join(',')}
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-export const IconDemo = designPage(() => {
-
-  const state = reactive({
-    val: 'fast_pay' as any,
-    vals: ['fast_pay'] as any,
-  });
-
-  return () => (
-    <DemoRow title="图标">
-      <DemoLine title="单选">
-        <Select v-model={state.val} style={{ width: '200px' }}>
-          <DropdownGroup title="分组一"/>
-          <SelectOption label="支付宝" val="alipay" icon="pi-alipay-circle"/>
-          <SelectOption label="微信支付" val="wechat_pay" icon="pi-wechatpay"/>
-          <SelectOption label="财付通" val="qq_pay" icon="pi-qq"/>
-          <DropdownGroup title="分组二"/>
-          <SelectOption label="快支付" val="fast_pay" icon="pi-alipay-circle"/>
-          <SelectOption label="云闪付" val="cloud_pay" icon="pi-wechatpay"/>
-          <DropdownGroup title="分组三"/>
-          <SelectOption label="网银支付" val="net_pay" icon="pi-qq"/>
-          <SelectOption label="快捷支付" val="convince_pay" icon="pi-alipay-circle"/>
-          <SelectOption label="paypal" val="paypal" icon="pi-wechatpay"/>
-        </Select>&nbsp;{state.val}
-      </DemoLine>
-      <DemoLine title="多选">
-        <Select v-model={state.vals} multiple style={{ width: '200px' }}>
-          <SelectOption label="支付宝" val="alipay" icon="pi-alipay-circle"/>
-          <SelectOption label="微信支付" val="wechat_pay" icon="pi-wechatpay"/>
-          <SelectOption label="财付通" val="qq_pay" icon="pi-qq"/>
-          <SelectOption label="快支付" val="fast_pay" icon="pi-alipay-circle"/>
-          <SelectOption label="云闪付" val="cloud_pay" icon="pi-wechatpay"/>
-          <SelectOption label="网银支付" val="net_pay" icon="pi-qq"/>
-          <SelectOption label="快捷支付" val="convince_pay" icon="pi-alipay-circle"/>
-          <SelectOption label="paypal" val="paypal" icon="pi-wechatpay"/>
-        </Select>&nbsp;{state.vals?.join(',')}
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-export const CustomDemo = designPage(() => {
-
-  const state = reactive({
-    val: 'fast_pay' as any,
-    vals: ['fast_pay'] as any,
-  });
-
-  return () => (
-    <DemoRow title="自定义选项内容">
-      <DemoLine title="单选">
-        <Select v-model={state.val} style={{ width: '200px' }}>
-          <DropdownGroup>
-            1 分组一
-          </DropdownGroup>
-          <SelectOption label="支付宝" val="alipay">
-            1.1 支付宝
-          </SelectOption>
-          <SelectOption label="微信支付" val="wechat_pay">
-            1.2 微信支付
-          </SelectOption>
-          <SelectOption label="财付通" val="qq_pay">
-            1.3 财付通
-          </SelectOption>
-          <DropdownGroup title="分组二">
-            2 分组二
-          </DropdownGroup>
-          <SelectOption label="快支付" val="fast_pay">
-            2.1 快支付
-          </SelectOption>
-          <SelectOption label="云闪付" val="cloud_pay">
-            2.2 云闪付
-          </SelectOption>
-          <DropdownGroup title="分组三">
-            3 分组三
-          </DropdownGroup>
-          <SelectOption label="网银支付" val="net_pay">
-            3.1 网银支付
-          </SelectOption>
-          <SelectOption label="快捷支付" val="convince_pay">
-            3.2 快捷支付
-          </SelectOption>
-          <SelectOption label="paypal" val="paypal">
-            3.3 paypal
-          </SelectOption>
-        </Select>&nbsp;{state.val}
-      </DemoLine>
-      <DemoLine title="多选">
-        <Select v-model={state.vals} multiple style={{ width: '200px' }}>
-          <DropdownGroup>
-            1 分组一
-          </DropdownGroup>
-          <SelectOption label="支付宝" val="alipay">
-            1.1 支付宝
-          </SelectOption>
-          <SelectOption label="微信支付" val="wechat_pay">
-            1.2 微信支付
-          </SelectOption>
-          <SelectOption label="财付通" val="qq_pay">
-            1.3 财付通
-          </SelectOption>
-          <DropdownGroup title="分组二">
-            2 分组二
-          </DropdownGroup>
-          <SelectOption label="快支付" val="fast_pay">
-            2.1 快支付
-          </SelectOption>
-          <SelectOption label="云闪付" val="cloud_pay">
-            2.2 云闪付
-          </SelectOption>
-          <DropdownGroup title="分组三">
-            3 分组三
-          </DropdownGroup>
-          <SelectOption label="网银支付" val="net_pay">
-            3.1 网银支付
-          </SelectOption>
-          <SelectOption label="快捷支付" val="convince_pay">
-            3.2 快捷支付
-          </SelectOption>
-          <SelectOption label="paypal" val="paypal">
-            3.3 paypal
-          </SelectOption>
-        </Select>&nbsp;{state.vals?.join(',')}
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-export const LoadingDemo = designPage(() => {
-
-  const state = reactive({
-    val: 'fast_pay' as any,
-    vals: ['fast_pay', 'cloud_pay'] as any,
-    loading: true,
-  });
-
-  return () => (
-    <DemoRow title="加载状态">
-      <DemoLine title="loading">
-        <Checkbox v-model={state.loading} label="loading"/>
-      </DemoLine>
-      <DemoLine title="单选">
-        <Select v-model={state.val} style={{ width: '200px' }} loading={state.loading}>
-          <SelectOption label="支付宝" val="alipay"/>
-          <SelectOption label="微信支付" val="wechat_pay"/>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-          <SelectOption label="云闪付" val="cloud_pay"/>
-          <SelectOption label="网银支付" val="net_pay"/>
-          <SelectOption label="快捷支付" val="convince_pay"/>
-          <SelectOption label="paypal" val="paypal"/>
-        </Select>&nbsp;{state.val}
-      </DemoLine>
-      <DemoLine title="多选">
-        <Select v-model={state.vals} multiple style={{ width: '200px' }} loading={state.loading}>
-          <SelectOption label="支付宝" val="alipay"/>
-          <SelectOption label="微信支付" val="wechat_pay"/>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-          <SelectOption label="云闪付" val="cloud_pay"/>
-          <SelectOption label="网银支付" val="net_pay"/>
-          <SelectOption label="快捷支付" val="convince_pay"/>
-          <SelectOption label="paypal" val="paypal"/>
-        </Select>&nbsp;{state.vals?.join(',')}
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-export const DisableFilterDemo = designPage(() => {
-
-  const state = reactive({
-    val: 'fast_pay' as any,
-    vals: ['fast_pay'] as any,
-  });
-
-  return () => (
-    <DemoRow title="禁用可输入筛选">
-      <DemoLine title="单选">
-        <Select v-model={state.val} style={{ width: '200px' }} disableFilter>
-          <SelectOption label="支付宝" val="alipay"/>
-          <SelectOption label="微信支付" val="wechat_pay"/>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-          <SelectOption label="云闪付" val="cloud_pay"/>
-          <SelectOption label="网银支付" val="net_pay"/>
-          <SelectOption label="快捷支付" val="convince_pay"/>
-          <SelectOption label="paypal" val="paypal"/>
-        </Select>&nbsp;{state.val}
-      </DemoLine>
-      <DemoLine title="多选">
-        <Select v-model={state.vals} multiple style={{ width: '200px' }} disableFilter>
-          <SelectOption label="支付宝" val="alipay"/>
-          <SelectOption label="微信支付" val="wechat_pay"/>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-          <SelectOption label="云闪付" val="cloud_pay"/>
-          <SelectOption label="网银支付" val="net_pay"/>
-          <SelectOption label="快捷支付" val="convince_pay"/>
-          <SelectOption label="paypal" val="paypal"/>
-        </Select>&nbsp;{state.vals?.join(',')}
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-export const ControlDemo = designPage(() => {
-
-  const state = reactive({
-    val: 'wechat_pay' as any,
-    vals: ['fast_pay', 'cloud_pay'] as any,
-    flag: true,
-  });
-
-  return () => (
-    <DemoRow title="禁用与只读">
-      <DemoLine title="禁用/只读">
-        <Checkbox v-model={state.flag} label="禁用/只读"/>
-      </DemoLine>
-      <DemoLine title="单选">
-        <Select v-model={state.val} style={{ width: '200px' }} disabled={state.flag} placeholder="禁用">
-          <SelectOption label="支付宝" val="alipay"/>
-          <SelectOption label="微信支付" val="wechat_pay"/>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-          <SelectOption label="云闪付" val="cloud_pay"/>
-          <SelectOption label="网银支付" val="net_pay"/>
-          <SelectOption label="快捷支付" val="convince_pay"/>
-          <SelectOption label="paypal" val="paypal"/>
-        </Select>&nbsp;{state.val}
-      </DemoLine>
-      <DemoLine title="多选">
-        <Select v-model={state.vals} multiple style={{ width: '200px' }} readonly={state.flag} placeholder="只读">
-          <SelectOption label="支付宝" val="alipay"/>
-          <SelectOption label="微信支付" val="wechat_pay"/>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-          <SelectOption label="云闪付" val="cloud_pay"/>
-          <SelectOption label="网银支付" val="net_pay"/>
-          <SelectOption label="快捷支付" val="convince_pay"/>
-          <SelectOption label="paypal" val="paypal"/>
-        </Select>&nbsp;{state.vals?.join(',')}
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-export const PopperDemo = designPage(() => {
-
-  const state = reactive({
-    val: 'fast_pay' as any,
-    vals: ['fast_pay'] as any,
-  });
-
-  return () => (
-    <DemoRow title="给Popper传递属性">
-      <DemoLine title="单选">
-        <Select v-model={state.val} style={{ width: '200px' }} popperAttrs={{ width: '300px', sizeEqual: false, }}>
-          <SelectOption label="支付宝" val="alipay"/>
-          <SelectOption label="微信支付" val="wechat_pay"/>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-          <SelectOption label="云闪付" val="cloud_pay"/>
-          <SelectOption label="网银支付" val="net_pay"/>
-          <SelectOption label="快捷支付" val="convince_pay"/>
-          <SelectOption label="paypal" val="paypal"/>
-        </Select>&nbsp;{state.val}
-      </DemoLine>
-      <DemoLine title="多选">
-        <Select v-model={state.vals} multiple style={{ width: '200px' }} popperAttrs={{ width: '300px', sizeEqual: false }}>
-          <SelectOption label="支付宝" val="alipay"/>
-          <SelectOption label="微信支付" val="wechat_pay"/>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-          <SelectOption label="云闪付" val="cloud_pay"/>
-          <SelectOption label="网银支付" val="net_pay"/>
-          <SelectOption label="快捷支付" val="convince_pay"/>
-          <SelectOption label="paypal" val="paypal"/>
-        </Select>&nbsp;{state.vals?.join(',')}
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-export const ScrollDemo = designPage(() => {
-
-  const state = reactive({
-    val: 'fast_pay' as any,
-    vals: ['fast_pay'] as any,
-  });
-
-  return () => (
-    <DemoRow title="设置滚动">
-      <p>最多4个元素就开始使用滚动条，滚动高度为100px</p>
-      <DemoLine title="单选">
-        <Select v-model={state.val} style={{ width: '200px' }} scrollNum={4} scrollHeight={100}>
-          <SelectOption label="支付宝" val="alipay"/>
-          <SelectOption label="微信支付" val="wechat_pay"/>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-          <SelectOption label="云闪付" val="cloud_pay"/>
-          <SelectOption label="网银支付" val="net_pay"/>
-          <SelectOption label="快捷支付" val="convince_pay"/>
-          <SelectOption label="paypal" val="paypal"/>
-        </Select>&nbsp;{state.val}
-      </DemoLine>
-      <DemoLine title="多选">
-        <Select v-model={state.vals} multiple style={{ width: '200px' }} scrollNum={4} scrollHeight={100}>
-          <SelectOption label="支付宝" val="alipay"/>
-          <SelectOption label="微信支付" val="wechat_pay"/>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-          <SelectOption label="云闪付" val="cloud_pay"/>
-          <SelectOption label="网银支付" val="net_pay"/>
-          <SelectOption label="快捷支付" val="convince_pay"/>
-          <SelectOption label="paypal" val="paypal"/>
-        </Select>&nbsp;{state.vals?.join(',')}
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-export const SizeDemo = designPage(() => {
-
-  const state = reactive({
-    val: 'fast_pay' as any,
-    vals: ['fast_pay'] as any,
-  });
-
-  return () => (
-    <DemoRow title="大小尺寸">
-      <p>最多4个元素就开始使用滚动条，滚动高度为100px</p>
-      <DemoLine title="多选">
-        <Select v-model={state.vals} multiple style={{ width: '200px' }} size="large">
-          <SelectOption label="支付宝" val="alipay"/>
-          <SelectOption label="微信支付" val="wechat_pay"/>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-          <SelectOption label="云闪付" val="cloud_pay"/>
-          <SelectOption label="网银支付" val="net_pay"/>
-          <SelectOption label="快捷支付" val="convince_pay"/>
-          <SelectOption label="paypal" val="paypal"/>
-        </Select>
-        <Select v-model={state.vals} multiple style={{ width: '200px' }} size="normal">
-          <SelectOption label="支付宝" val="alipay"/>
-          <SelectOption label="微信支付" val="wechat_pay"/>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-          <SelectOption label="云闪付" val="cloud_pay"/>
-          <SelectOption label="网银支付" val="net_pay"/>
-          <SelectOption label="快捷支付" val="convince_pay"/>
-          <SelectOption label="paypal" val="paypal"/>
-        </Select>
-        <Select v-model={state.vals} multiple style={{ width: '200px' }} size="small">
-          <SelectOption label="支付宝" val="alipay"/>
-          <SelectOption label="微信支付" val="wechat_pay"/>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-          <SelectOption label="云闪付" val="cloud_pay"/>
-          <SelectOption label="网银支付" val="net_pay"/>
-          <SelectOption label="快捷支付" val="convince_pay"/>
-          <SelectOption label="paypal" val="paypal"/>
-        </Select>
-        <Select v-model={state.vals} multiple style={{ width: '200px' }} size="mini">
-          <SelectOption label="支付宝" val="alipay"/>
-          <SelectOption label="微信支付" val="wechat_pay"/>
-          <SelectOption label="财付通" val="qq_pay"/>
-          <SelectOption label="快支付" val="fast_pay"/>
-          <SelectOption label="云闪付" val="cloud_pay"/>
-          <SelectOption label="网银支付" val="net_pay"/>
-          <SelectOption label="快捷支付" val="convince_pay"/>
-          <SelectOption label="paypal" val="paypal"/>
-        </Select>
-        &nbsp;{state.vals?.join(',')}
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-export const FilterDemo = designPage(() => {
-
-  const state = reactive({
-    val: 'fast_pay' as any,
-    vals: ['fast_pay'] as any,
-  });
-
-  const options = [
-    { label: '支付宝', pinyin: 'zhifubao', val: 'alipay', },
-    { label: '微信支付', pinyin: 'weixinzhifu', val: 'wechat_pay', },
-    { label: '财付通', pinyin: 'caifutong', val: 'qq_pay', },
-    { label: '快支付', pinyin: 'kuaizhifu', val: 'fast_pay', },
-    { label: '云闪付', pinyin: 'yunshanfu', val: 'cloud_pay', },
-    { label: '网银支付', pinyin: 'wangyinzhifu', val: 'net_pay', },
-    { label: '快捷支付', pinyin: 'kuaijiezhifu', val: 'convince_pay', },
-    { label: 'paypal', pinyin: 'paypal', val: 'paypal', },
-  ];
-
-  const isMatchSearch = (searchText: string, option: iSelectOptionProps) => {
-    return (!!option.label && option.label.indexOf(searchText) > -1) || (!!option.data && option.data.pinyin.indexOf(searchText) > -1);
-  };
-
-  return () => (
-    <DemoRow title="自定义过滤函数，支持拼音搜索">
-      <DemoLine title="单选">
-        <Select v-model={state.val} style={{ width: '200px' }} isMatchSearch={isMatchSearch}>
-          {options.map(opt => (
-            <SelectOption label={opt.label} val={opt.val} key={opt.val} data={opt}/>
-          ))}
-        </Select>&nbsp;{state.val}
-      </DemoLine>
-      <DemoLine title="多选">
-        <Select v-model={state.vals} multiple style={{ width: '200px' }} isMatchSearch={isMatchSearch}>
-          {options.map(opt => (
-            <SelectOption label={opt.label} val={opt.val} key={opt.val} data={opt}/>
-          ))}
-        </Select>&nbsp;{state.vals?.join(',')}
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-export const SlotDemo = designPage(() => {
-
-  const state = reactive({
-    val: null as any,
-    vals: null as any,
-  });
-
-  return () => (
-    <DemoRow title="插槽自定义内容">
-      <DemoLine title="单选">
-        <Select v-model={state.val} popperAttrs={{ width: '300px', sizeEqual: false, }}>
-          {{
-            default: () => <>
-              <SelectOption label="支付宝" val="alipay"/>
-              <SelectOption label="微信支付" val="wechat_pay"/>
-              <SelectOption label="财付通" val="qq_pay"/>
-              <SelectOption label="快支付" val="fast_pay"/>
-              <SelectOption label="云闪付" val="cloud_pay"/>
-              <SelectOption label="网银支付" val="net_pay"/>
-              <SelectOption label="快捷支付" val="convince_pay"/>
-              <SelectOption label="paypal" val="paypal"/>
-            </>,
-            reference: ({ checked }: { checked: iSelectOptionProps | iSelectOptionProps[] | null | undefined }) => <Button>{(checked as iSelectOptionProps)?.label || '请选择'}</Button>
-          }}
-        </Select>
-      </DemoLine>
-      <DemoLine title="多选">
-        <Select v-model={state.vals} multiple popperAttrs={{ width: '300px', sizeEqual: false }}>
-          {{
-            default: () => <>
-              <SelectOption label="支付宝" val="alipay"/>
-              <SelectOption label="微信支付" val="wechat_pay"/>
-              <SelectOption label="财付通" val="qq_pay"/>
-              <SelectOption label="快支付" val="fast_pay"/>
-              <SelectOption label="云闪付" val="cloud_pay"/>
-              <SelectOption label="网银支付" val="net_pay"/>
-              <SelectOption label="快捷支付" val="convince_pay"/>
-              <SelectOption label="paypal" val="paypal"/>
-            </>,
-            reference: ({ checked }: { checked: iSelectOptionProps | iSelectOptionProps[] | null | undefined }) => (
-              <ButtonGroup>
-                {!!checked && Array.isArray(checked) && checked.length > 0 ?
-                  <>
-                    {checked.map((i, index) => (<Button key={(i.val as any) || index}>{i.label}</Button>))}
-                  </> :
-                  <Button>请选择</Button>
-                }
-              </ButtonGroup>
-            )
-          }}
-        </Select>&nbsp;{state.vals?.join(',')}
-      </DemoLine>
-    </DemoRow>
-  );
-});
-
-export const DemoNoData = designPage(() => {
-
-  const state = reactive({
-    val: null,
-  });
-
-  return () => (
-    <DemoRow title="无选项">
-      <Select v-model={state.val} style={{ width: '200px' }} placeholder="支付方式"/>
-      &nbsp;{state.val}
-    </DemoRow>
-  );
-});