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

package/src/pages/index/components/form/DemoFormBlur.tsx

@@ -1,204 +0,0 @@
-import {designPage, reactive, useRefs} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$message, Button, ColorPicker, DatePicker, Form, FormItem, Icon, Input, InputNumber, Select, SelectOption, TimePicker, Toggle, Tooltip} from "../../../../packages";
-
-/*export const demoArrayjson = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    form: Form,
-  });
-
-  const state = reactive({
-    formData: {
-      enterpriseName: '',
-    } as any,
-    showAddress: true,
-    rules: {
-      legalName: { required: true },
-    },
-  });
-
-  const submit = async () => {
-    await refs.form?.validate();
-    $message('校验通过');
-  };
-
-  return () => (
-    <DemoRow title="校验arrayjson">
-      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
-        <FormItem label="所在地">
-          <Checkbox v-model={state.showAddress} label="所在地"/>
-        </FormItem>
-        <FormItem label="FormItem.required" required field="enterpriseName" rules={{ type: 'arrayjson', min: 3, max: 5, trigger: 'blur' }}>
-          <Select multiple valueType="arrayjson" v-model={state.formData.enterpriseName} placeholder="array,min:3,max:5">
-            <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>
-        </FormItem>
-        <div style={{ textAlign: 'right' }}>
-          {typeof state.formData.enterpriseName}{"->"}{JSON.stringify(state.formData.enterpriseName)}
-        </div>
-        {!!state.showAddress && (
-          <FormItem label="FormItem.rules[0].required" rules={[{ required: true }, { pattern: /\d/ }]} field="address">
-            <Input v-model={state.formData.address} placeholder="所在地"/>
-          </FormItem>
-        )}
-        <FormItem label="Form.rules->field" field="legalName">
-          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
-        </FormItem>
-        <FormItem colon={false}>
-          <Button label="Clear" onClick={() => refs.form?.clearValidate()} style={{ marginRight: '4px' }}/>
-          <Button label="Commit" onClick={submit} mode="fill"/>
-        </FormItem>
-      </Form>
-    </DemoRow>
-  );
-});*/
-
-
-export const demo2 = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    form: Form
-  });
-
-  const state = reactive({
-    formData: {} as any,
-    disabled: undefined as undefined | boolean,
-  });
-
-  const { formData } = state;
-
-  const levelData = [
-    { levelName: '一级', code: '1' },
-    { levelName: '二级', code: '2' },
-    { levelName: '三级', code: '3' },
-  ];
-
-  const treeData = [
-    {
-      id: '1',
-      name: '一级 1',
-      subs: [
-        ...([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(index => ({
-          id: '1-' + index,
-          name: '二级 1-' + index,
-          subs: [{
-            id: `1-${index}-1`,
-            name: `三级 1-${index}-1`
-          }]
-        })))
-      ]
-    }, {
-      id: '2',
-      name: '一级 2',
-      subs: [
-        ...([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(index => ({
-          id: '2-' + index,
-          name: '二级 2-' + index,
-          subs: [{
-            id: `2-${index}-1`,
-            name: `三级 2-${index}-1`
-          }]
-        })))
-      ]
-    }, {
-      id: '3',
-      name: '一级 3',
-      subs: [{
-        id: '3-1',
-        name: '二级 3-1',
-        subs: [{
-          id: '3-1-1',
-          name: '三级 3-1-1'
-        }, {
-          id: '3-1-2',
-          name: '三级 3-1-2'
-        }]
-      }, {
-        id: '3-2',
-        name: '二级 3-2',
-        subs: [{
-          id: '3-2-1',
-          name: '三级 3-2-1'
-        }]
-      }]
-    }];
-
-  async function saveValidate() {
-    await refs.form!.validate();
-    $message.success('校验通过');
-  }
-
-  return () => (
-    <div>
-      <DemoRow title={'blur校验'}>
-        <Form ref={onRef.form} modelValue={formData} disabled={state.disabled}>
-          <FormItem label={'普通文本框'} field={'field1'} rules={{ required: true, trigger: 'blur' }}>
-            <Input v-model={formData.field1}/>
-          </FormItem>
-          <FormItem label={'普通文本域'} field={'field2'} rules={{ required: true, trigger: 'blur' }}>
-            <Input v-model={formData.field2} textarea/>
-          </FormItem>
-          <FormItem label={'数字框'} field={'field3'} rules={{ required: true, trigger: 'blur' }}>
-            {{
-              default: () => <InputNumber v-model={formData.field3}/>,
-              append: () => <Tooltip message={'提示'}><Icon icon={'el-icon-question'}/></Tooltip>,
-            }}
-          </FormItem>
-          <FormItem label={'下拉选项'} field={'field6'} rules={{ required: true, trigger: 'blur' }}>
-            <Select v-model={formData.field6}>
-              {levelData.map(item => <SelectOption label={item.levelName} val={item.code} key={item.code}/>)}
-            </Select>
-          </FormItem>
-          {/*<FormItem label={'级联选择'} field={'field61'} rules={{ required: true, trigger: 'blur' }}>
-            <Cascade
-              v-model={formData.field61}
-              data={treeData}
-              labelField={'name'}
-              keyField={'id'}
-              childrenField={'subs'}
-            />
-          </FormItem>*/}
-          <FormItem label={'开关按钮'} field={'field10'} rules={{ required: true, trigger: 'blur' }}>
-            <Toggle v-model={formData.field10}/>
-          </FormItem>
-          <FormItem label={'颜色选择器'} field={'field14'} rules={{ required: true, trigger: 'blur' }}>
-            <ColorPicker v-model={formData.field14}/>
-          </FormItem>
-          <FormItem label={'时间选择'} field={'field15'} rules={{ required: true, trigger: 'blur' }}>
-            <TimePicker v-model={formData.field15}/>
-          </FormItem>
-          <FormItem label={'时间范围选择'} rules={[
-            { field: 'field17', required: true, trigger: 'blur' },
-            { field: 'field18', required: true, trigger: 'blur' },
-          ]}>
-            <TimePicker v-model:start={formData.field17} v-model:end={formData.field18} range/>
-          </FormItem>
-          <FormItem label={'日期时间选择'} field={'field19'} rules={{ required: true, trigger: 'blur' }}>
-            <DatePicker v-model={formData.field19} datetime/>
-          </FormItem>
-          <FormItem label={'日期时间范围选择'} rules={[
-            { field: 'field20', required: true, trigger: 'blur' },
-            { field: 'field21', required: true, trigger: 'blur' },
-          ]}>
-            <DatePicker v-model:start={formData.field20} v-model:end={formData.field21} range datetime/>
-          </FormItem>
-          <FormItem colon={false}>
-            <Button label={'校验'} onClick={saveValidate}/>
-            <Button label={'清空校验'} onClick={() => refs.form!.clearValidate()}/>
-          </FormItem>
-          <FormItem colon={false}>
-            <Button label={state.disabled ? '启用' : '禁用'} onClick={() => state.disabled = !state.disabled} disabled={false}/>
-          </FormItem>
-        </Form>
-      </DemoRow>
-    </div>
-  );
-});

package/src/pages/index/components/form/DemoFormDynamicFields.tsx

@@ -1,54 +0,0 @@
-import {designPage, reactive, useRefs} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$message, Button, Form, FormItem, Input} from "../../../../packages";
-
-export default designPage(() => {
-
-  const { formData } = reactive({
-    formData: {
-      email: '111@aa.com',
-      addressList: [
-        { addr: '' }
-      ],
-    },
-  });
-  const { refs, onRef } = useRefs({ form: Form });
-
-  async function save() {
-    await refs.form!.validate();
-    $message('校验通过');
-  }
-
-  return () => (
-    <div>
-      <DemoRow title={'动态增减表单项'}>
-        <Form ref={onRef.form} modelValue={formData}>
-          <FormItem label={'收件箱'} field={'email'} rules={{
-            type: 'email',
-            // pattern: /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/,
-            // message: '请输入正确的邮箱',
-            required: true,
-            // trigger: 'blur',
-          }}>
-            <Input v-model={formData.email}/>
-          </FormItem>
-          {formData.addressList.map((item, index) => (
-            <FormItem label={`收件人地址${index + 1}`} field={`addressList.${index}.addr`} key={index} rules={{
-              required: true,
-              // trigger: 'blur'
-            }}>
-              <div style={{ display: 'flex' }}>
-                <Input v-model={item.addr}/>
-                <Button icon={'pi-close'} style={{ marginLeft: '4px' }} status="secondary" onClick={() => {formData.addressList.splice(index, 1);}}/>
-              </div>
-            </FormItem>
-          ))}
-          <FormItem colon={false}>
-            <Button label={'保存'} onClick={save}/>
-            <Button label={'新增收件地址'} onClick={() => formData.addressList.push({ addr: '' })}/>
-          </FormItem>
-        </Form>
-      </DemoRow>
-    </div>
-  );
-});

package/src/pages/index/components/form/DemoFormEditControl.tsx

@@ -1,164 +0,0 @@
-import {computed, designPage, reactive} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {Button, Checkbox, CheckboxGroup, Form, FormItem, Icon, Input, InputNumber, Radio, RadioGroup, Select, SelectOption, Tooltip} from "../../../../packages";
-
-export const demo1 = designPage(() => {
-
-  const state = reactive({
-    formData: {} as any,
-    formDisabledFields: [] as string[],
-    flag: {
-      disabled: undefined as undefined | boolean,
-      readonly: undefined as undefined | boolean,
-    },
-  });
-
-  const { formData, flag } = state;
-
-  const levelData = [
-    { levelName: '一级', code: '1' },
-    { levelName: '二级', code: '2' },
-    { levelName: '三级', code: '3' },
-  ];
-
-  return () => (
-    <DemoRow title={'父子disabled以及readonly设置'}>
-      <Form modelValue={formData} disabled={flag.disabled} readonly={flag.readonly}>
-        <FormItem colon={false}>
-          <Checkbox v-model={flag.disabled} label={'禁用'} style={{ marginRight: '8px' }} disabled={false} readonly={false}/>
-          <Checkbox v-model={flag.readonly} label={'只读'} disabled={false} readonly={false}/>
-        </FormItem>
-        <FormItem label={'客户名称'} field={'name'}>
-          <Input v-model={formData.name}/>
-        </FormItem>
-        <FormItem label={'客户员工数量'} field={'type'}>
-          {{
-            default: () => <InputNumber v-model={formData.type}/>,
-            append: () => <Tooltip message="整数"><Icon icon="pi-info-circle-fill"/></Tooltip>
-          }}
-        </FormItem>
-        <FormItem label={'客户加入时间'} field={'joinTime'} disabled={false}>
-          <Input v-model={formData.joinTime}/>
-          <span>&nbsp;至&nbsp;</span>
-          <Input v-model={formData.name}/>
-        </FormItem>
-        <FormItem label={'是否老客户'} field={'oldFlag'} disabled={false}>
-          <RadioGroup v-model={formData.oldFlag} itemWidth={'50%'}>
-            <Radio label={'老客户'} val={'Y'} disabled/>
-            <Radio label={'非老客户'} val={'N'}/>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label={'客户性质'} field={'properties'}>
-          <CheckboxGroup v-model={formData.properties} itemWidth={'50%'}>
-            <Checkbox label={'大客户'} val={'large'}/>
-            <Checkbox label={'潜在客户'} val={'potential'}/>
-            <Checkbox label={'长久客户'} val={'long'}/>
-            <Checkbox label={'赢单客户'} val={'order'}/>
-          </CheckboxGroup>
-        </FormItem>
-        <FormItem label={'客户级别'} field={'level'}>
-          <Select v-model={formData.level}>
-            {levelData.map(item => <SelectOption label={item.levelName} val={item.code} key={item.code}/>)}
-          </Select>
-        </FormItem>
-        <FormItem label={'备注'} field={'comments'}>
-          <Input textarea v-model={formData.comments}/>
-        </FormItem>
-        <FormItem colon={false} contentAlign={'center'} block>
-          <Button label={'取消'} style={{ marginRight: '4px' }}/>
-          <Button mode="fill" label={'提交'}/>
-        </FormItem>
-      </Form>
-    </DemoRow>
-  );
-});
-
-export const demo2 = designPage(() => {
-
-  const state = reactive({
-    formData: {} as any,
-    formDisabledFields: [] as string[],
-    flag: {
-      disabled: undefined as undefined | boolean,
-      readonly: undefined as undefined | boolean,
-    },
-  });
-
-  const { formData, flag } = state;
-
-  const levelData = [
-    { levelName: '一级', code: '1' },
-    { levelName: '二级', code: '2' },
-    { levelName: '三级', code: '3' },
-  ];
-
-  const targetFormDisabledFields = computed(() => {
-    return state.formDisabledFields.reduce((ret, item) => {
-      ret[item] = true;
-      return ret;
-    }, {} as any);
-  });
-
-  return () => (
-    <DemoRow title={'通过disabledFields控制禁用'}>
-      <CheckboxGroup v-model={state.formDisabledFields}>
-        <Checkbox checkboxForAll label="全部"/>
-        <Checkbox label="客户名称" val="name"/>
-        <Checkbox label="客户员工数量" val="type"/>
-        <Checkbox label="客户加入时间" val="joinTime"/>
-        <Checkbox label="是否老客户" val="oldFlag"/>
-        <Checkbox label="客户性质" val="properties"/>
-        <Checkbox label="客户级别" val="level"/>
-        <Checkbox label="备注" val="comments"/>
-        <Checkbox label="禁用操作按钮" val="button"/>
-      </CheckboxGroup>
-      <br/>
-      <div>
-        {JSON.stringify(state.formDisabledFields)}
-      </div>
-      <br/>
-      <Form modelValue={formData} disabledFields={targetFormDisabledFields.value}>
-        <FormItem label={'客户名称'} field={'name'}>
-          <Input v-model={formData.name}/>
-        </FormItem>
-        <FormItem label={'客户员工数量'} field={'type'}>
-          {{
-            default: () => <InputNumber v-model={formData.type}/>,
-            append: () => <Tooltip message="整数"><Icon icon="pi-info-circle-fill"/></Tooltip>
-          }}
-        </FormItem>
-        <FormItem label={'客户加入时间'} field={'joinTime'} disabled={false}>
-          <Input v-model={formData.joinTime}/>
-          <span>&nbsp;至&nbsp;</span>
-          <Input v-model={formData.name}/>
-        </FormItem>
-        <FormItem label={'是否老客户'} field={'oldFlag'} disabled={false}>
-          <RadioGroup v-model={formData.oldFlag} itemWidth={'50%'}>
-            <Radio label={'老客户'} val={'Y'} disabled/>
-            <Radio label={'非老客户'} val={'N'}/>
-          </RadioGroup>
-        </FormItem>
-        <FormItem label={'客户性质'} field={'properties'}>
-          <CheckboxGroup v-model={formData.properties} itemWidth={'50%'}>
-            <Checkbox label={'大客户'} val={'large'}/>
-            <Checkbox label={'潜在客户'} val={'potential'}/>
-            <Checkbox label={'长久客户'} val={'long'}/>
-            <Checkbox label={'赢单客户'} val={'order'}/>
-          </CheckboxGroup>
-        </FormItem>
-        <FormItem label={'客户级别'} field={'level'}>
-          <Select v-model={formData.level}>
-            {levelData.map(item => <SelectOption label={item.levelName} val={item.code} key={item.code}/>)}
-          </Select>
-        </FormItem>
-        <FormItem label={'备注'} field={'comments'}>
-          <Input textarea v-model={formData.comments}/>
-        </FormItem>
-        <FormItem colon={false} contentAlign={'center'} block field="button">
-          <Button label={'取消'} style={{ marginRight: '4px' }}/>
-          <Button mode="fill" label={'提交'}/>
-        </FormItem>
-      </Form>
-    </DemoRow>
-  );
-});

package/src/pages/index/components/form/DemoFormElement.tsx

@@ -1,207 +0,0 @@
-import {designPage, reactive, useRefs} from "plain-design-composition";
-import {$message, Button, Checkbox, CheckboxGroup, ColorPicker, DatePicker, Form, FormItem, Icon, Input, InputNumber, Radio, RadioGroup, Rate, Segment, SegmentGroup, Select, SelectOption, Slider, TimePicker, Toggle, Tooltip} from "../../../../packages";
-import {DemoRow} from "../../Demo/DemoRow";
-
-export default designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    form: Form
-  });
-
-  const state = reactive({
-    formData: {
-      field1: '111',
-      field2: '222',
-      field11: 25,
-    } as any,
-    disabled: undefined as undefined | boolean,
-    showFlag: true,
-    size: 'small' as any,
-  });
-
-  const { formData } = state;
-
-  const levelData = [
-    { levelName: '一级', code: '1' },
-    { levelName: '二级', code: '2' },
-    { levelName: '三级', code: '3' },
-  ];
-
-  const treeData = [
-    {
-      id: '1',
-      name: '一级 1',
-      subs: [
-        ...([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(index => ({
-          id: '1-' + index,
-          name: '二级 1-' + index,
-          subs: [{
-            id: `1-${index}-1`,
-            name: `三级 1-${index}-1`
-          }]
-        })))
-      ]
-    }, {
-      id: '2',
-      name: '一级 2',
-      subs: [
-        ...([1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map(index => ({
-          id: '2-' + index,
-          name: '二级 2-' + index,
-          subs: [{
-            id: `2-${index}-1`,
-            name: `三级 2-${index}-1`
-          }]
-        })))
-      ]
-    }, {
-      id: '3',
-      name: '一级 3',
-      subs: [{
-        id: '3-1',
-        name: '二级 3-1',
-        subs: [{
-          id: '3-1-1',
-          name: '三级 3-1-1'
-        }, {
-          id: '3-1-2',
-          name: '三级 3-1-2'
-        }]
-      }, {
-        id: '3-2',
-        name: '二级 3-2',
-        subs: [{
-          id: '3-2-1',
-          name: '三级 3-2-1'
-        }]
-      }]
-    }];
-
-  async function saveValidate() {
-    await refs.form!.validate();
-    $message.success('校验通过');
-  }
-
-  return () => (
-    <div>
-      <DemoRow title={'表单组件'}>
-        <div>
-          <Form ref={onRef.form} modelValue={formData} disabled={state.disabled} singleColumnCenter size={state.size}>
-            <FormItem label="大小尺寸">
-              <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>
-            </FormItem>
-            <FormItem label={'普通文本框'} field={'field1'} required>
-              <Input v-model={formData.field1} placeholder={'请输入文本'}/>
-            </FormItem>
-            <FormItem label={'普通文本框'} field={'field2'} required>
-              <Input v-model={formData.field2} placeholder={'请输入文本'}/>
-            </FormItem>
-            <FormItem label={'普通文本域'} field={'field2'} required>
-              <Input v-model={formData.field2} textarea placeholder={'请输入文本域'}/>
-            </FormItem>
-            <FormItem label={'数字框'} field={'field3'} rules={{ type: 'number', max: 100, message: '最大值100' }} required>
-              {{
-                default: () => <InputNumber v-model={formData.field3} placeholder={'请输入数字'}/>,
-                append: () => <Tooltip message={'提示'}><Icon icon={'el-icon-question'}/></Tooltip>,
-              }}
-            </FormItem>
-            <FormItem label={'复选框'} field={'field5'} rules={{ min: 1, max: 3, type: 'array', message: '1-3个元素' }} required>
-              <CheckboxGroup v-model={formData.field5} itemWidth={'50%'}>
-                <Checkbox checkboxForAll label="全部"/>
-                <Checkbox label="大客户" val="large"/>
-                <Checkbox label="潜在客户" val="potential"/>
-                <Checkbox label="长久客户" val="long"/>
-                <Checkbox label="赢单客户" val="order"/>
-              </CheckboxGroup>
-            </FormItem>
-            <FormItem label={'下拉选项'} field={'field6'} required rules={{ message: '只能选择二级', enum: ['2'] }}>
-              <Select v-model={formData.field6} placeholder={'请选择'}>
-                {levelData.map(item => <SelectOption label={item.levelName} val={item.code} key={item.code}/>)}
-              </Select>
-            </FormItem>
-            <FormItem label={'下拉选项（多选）'} field={'field62'} required rules={{ required: true, type: 'array', min: 1, message: '最少选择一项' }}>
-              <Select v-model={formData.field62} placeholder={'请选择'} multiple>
-                {levelData.map(item => <SelectOption label={item.levelName} val={item.code} key={item.code}/>)}
-              </Select>
-            </FormItem>
-            {/*<FormItem label={'级联选择'} field={'field61'} rules={{ required: true, message: '不能为空' }}>
-            <Cascade
-              placeholder={'请选择'}
-              v-model={formData.field61}
-              data={treeData}
-              labelField={'name'}
-              keyField={'id'}
-              childrenField={'subs'}
-            />
-          </FormItem>*/}
-            <FormItem label={'单选按钮'} field={'field9'} required>
-              <RadioGroup v-model={formData.field9} itemWidth="33%">
-                <Radio label="是" val="Y"/>
-                <Radio label="否" val="N"/>
-                <Radio label="未知" val="NO"/>
-              </RadioGroup>
-            </FormItem>
-            <FormItem label={'开关按钮'} field={'field10'} rules={{ message: '请阅读并同意使用协议', enum: [true] }}>
-              <Toggle v-model={formData.field10}/>
-            </FormItem>
-            <FormItem label={'滑块'} field={'field11'} required rules={{ min: 50, type: 'number', message: '最小值50' }}>
-              <Slider v-model={formData.field11}/>
-            </FormItem>
-            <FormItem label={'标签输入框'} field={'field12'} required rules={[{ min: 3, type: 'array', message: '最少输入3个标签' }, { max: 5, type: 'array', message: '最多5个标签' }]}>
-              <Input multiple v-model={formData.field12} placeholder={'请选择'}/>
-            </FormItem>
-            <FormItem label={'评分'} field={'field13'} required rules={{ min: 1, type: 'number', message: '最低1分' }}>
-              <Rate v-model={formData.field13}/>
-            </FormItem>
-            <FormItem label={'颜色选择器'} field={'field14'} rules={{ required: true, message: '颜色不能为空' }}>
-              <ColorPicker v-model={formData.field14} placeholder={'请选择'}/>
-            </FormItem>
-            <FormItem label={'时间选择'} field={'field15'} required>
-              <TimePicker v-model={formData.field15} placeholder={'请选择'}/>
-            </FormItem>
-            <FormItem label={'时间范围选择'} rules={[
-              { field: 'field17', required: true },
-              { field: 'field18', required: true },
-            ]}>
-              <TimePicker v-model:start={formData.field17} v-model:end={formData.field18} range/>
-            </FormItem>
-            <FormItem label={'日期时间选择'} field={'field19'} required>
-              <DatePicker v-model={formData.field19} datetime placeholder={'请选择'}/>
-            </FormItem>
-
-            <FormItem label="state.showFlag">
-              <Toggle v-model={state.showFlag}/>
-            </FormItem>
-            {!!state.showFlag && (
-              <FormItem label={'日期时间范围选择_2'} rules={[
-                { field: 'field20', required: true },
-                { field: 'field21', required: true },
-              ]}>
-                <DatePicker separate v-model:start={formData.field20} v-model:end={formData.field21} range datetime/>
-              </FormItem>
-            )}
-            <FormItem label={'日期时间范围选择_1'}>
-              <DatePicker v-model:start={formData.field22} v-model:end={formData.field23} range datetime/>
-            </FormItem>
-
-            <FormItem label="文本域" field="field22" required>
-              <Input textarea v-model={formData.field22}/>
-            </FormItem>
-            <FormItem colon={false}>
-              <Button label={'校验'} onClick={saveValidate}/>
-              <Button label={'清空校验'} onClick={() => refs.form!.clearValidate()}/>
-            </FormItem>
-            <FormItem colon={false}>
-              <Button label={state.disabled ? '启用' : '禁用'} onClick={() => state.disabled = !state.disabled} disabled={false}/>
-            </FormItem>
-          </Form>
-        </div>
-      </DemoRow>
-    </div>
-  );
-});

package/src/pages/index/components/form/DemoFormLayout.scss

@@ -1,7 +0,0 @@
-.p-form {
-  display: table;
-
-  .p-form-label, .p-form-content {
-    display: table-cell;
-  }
-}