plain-design 1.0.0-beta.10 → 1.0.0-beta.101

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

@@ -1,516 +0,0 @@
-import {designPage, reactive, useRefs} from "plain-design-composition";
-import {DemoRow} from "../../Demo/DemoRow";
-import {$message, Button, Checkbox, DatePicker, Form, FormItem, Input, Select, SelectOption, TimePicker} from "../../../../packages";
-import {PlainObject} from "plain-utils/utils/event";
-
-export const demoRequired = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    form: Form,
-  });
-
-  const state = reactive({
-    formData: {} as any,
-    showAddress: true,
-    rules: {
-      legalName: { required: true },
-      registryCapital: { label: 'Form.rules->label', required: true },
-    },
-  });
-
-  const dynamicRequired = (formData: PlainObject | undefined) => {
-    return !!formData!.enterpriseName;
-  };
-
-  const submit = async () => {
-    await refs.form?.validate();
-    $message('校验通过');
-  };
-
-  return () => (
-    <DemoRow title="基本用法">
-      <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">
-          <Input v-model={state.formData.enterpriseName} placeholder="企业名称"/>
-        </FormItem>
-        {/*{!!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 label="Form.rules->label" field="registryCapital">
-          <Input v-model={state.formData.registryCapital} placeholder="注册资本"/>
-        </FormItem>
-        <FormItem label="FormItem.required有值时必填required有值时必填" required={dynamicRequired} field="businessNature">
-          <Input v-model={state.formData.businessNature} 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 demoString = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    form: Form,
-  });
-
-  const state = reactive({
-    formData: {} as any,
-    showAddress: true,
-    rules: {
-      legalName: { required: true },
-    },
-  });
-
-  const submit = async () => {
-    await refs.form?.validate();
-    $message('校验通过');
-  };
-
-  return () => (
-    <DemoRow title="校验string">
-      <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: 'string', min: 3, max: 5, message: '最少3个字符，最多5个字符' }}>
-          <Input v-model={state.formData.enterpriseName} placeholder="string,min:3,max:5"/>
-        </FormItem>
-        {!!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 demoNumber = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    form: Form,
-  });
-
-  const state = reactive({
-    formData: {} as any,
-    showAddress: true,
-    rules: {
-      legalName: { required: true },
-    },
-  });
-
-  const submit = async () => {
-    await refs.form?.validate();
-    $message('校验通过');
-  };
-
-  return () => (
-    <DemoRow title="校验number">
-      <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: 'number', min: 3, max: 5 }}>
-          <Input v-model={state.formData.enterpriseName} placeholder="number,min:3,max:5"/>
-        </FormItem>
-        {!!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 demoDate = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    form: Form,
-  });
-
-  const state = reactive({
-    formData: {} as any,
-    showAddress: true,
-    rules: {
-      legalName: { required: true },
-    },
-  });
-
-  const submit = async () => {
-    await refs.form?.validate();
-    $message('校验通过');
-  };
-
-  return () => (
-    <DemoRow title="校验date">
-      <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: 'date', min: '2022-09-04', max: '2022-10-05' }}>
-          <DatePicker v-model={state.formData.enterpriseName} placeholder="date,min:2022-09-04,max:2022-10-05"/>
-        </FormItem>
-        {!!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 demoTime = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    form: Form,
-  });
-
-  const state = reactive({
-    formData: {} as any,
-    showAddress: true,
-    rules: {
-      legalName: { required: true },
-    },
-  });
-
-  const submit = async () => {
-    await refs.form?.validate();
-    $message('校验通过');
-  };
-
-  return () => (
-    <DemoRow title="校验time">
-      <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: 'time', min: '20:00:00', max: '22:30:00' }}>
-          <TimePicker v-model={state.formData.enterpriseName} placeholder="time,min:20:00:00,max:22:30:00"/>
-        </FormItem>
-        {!!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 demoDatetime = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    form: Form,
-  });
-
-  const state = reactive({
-    formData: {} as any,
-    showAddress: true,
-    rules: {
-      legalName: { required: true },
-    },
-  });
-
-  const submit = async () => {
-    await refs.form?.validate();
-    $message('校验通过');
-  };
-
-  return () => (
-    <DemoRow title="校验datetime">
-      <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: 'datetime', min: '2022-09-04 20:00:00', max: '2022-10-05 22:30:00' }}>
-          <DatePicker datetime v-model={state.formData.enterpriseName} placeholder="datetime,min:2022-09-04 20:00:00,max:2022-10-05 22:30:00"/>
-        </FormItem>
-        {!!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 demoArray = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    form: Form,
-  });
-
-  const state = reactive({
-    formData: {} as any,
-    showAddress: true,
-    rules: {
-      legalName: { required: true },
-    },
-  });
-
-  const submit = async () => {
-    await refs.form?.validate();
-    $message('校验通过');
-  };
-
-  return () => (
-    <DemoRow title="校验array">
-      <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: 'array', min: 3, max: 5 }}>
-          <Select multiple 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 demoArraystring = 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="校验arraystring">
-      <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: 'arraystring', min: 3, max: 5 }}>
-          <Select multiple valueType="arraystring" 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 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 }}>
-          <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 demoFormRules = designPage(() => {
-
-  const { refs, onRef } = useRefs({
-    form: Form,
-  });
-
-  const state = reactive({
-    formData: {} as any,
-    rules: {
-      legalName: { required: true },
-      registryCapital: { required: true },
-    },
-  });
-
-  const dynamicRequired = (formData: PlainObject | null | undefined) => {
-    return !!formData!.enterpriseName;
-  };
-
-  const submit = async () => {
-    await refs.form?.validate();
-    $message('校验通过');
-  };
-
-  return () => (
-    <DemoRow title="统一设置校验规则">
-      <Form rules={state.rules} v-model={state.formData} ref={onRef.form}>
-        <FormItem label="FormItem.required" required field="enterpriseName">
-          <Input v-model={state.formData.enterpriseName} placeholder="企业名称"/>
-        </FormItem>
-        <FormItem label="Form.rules->field" field="legalName">
-          <Input v-model={state.formData.legalName} placeholder="法人代表"/>
-        </FormItem>
-        <FormItem label="Form.rules->label" field="registryCapital">
-          <Input v-model={state.formData.registryCapital} placeholder="注册资本"/>
-        </FormItem>
-        <FormItem label="FormItem.required有值时必填required有值时必填" required={dynamicRequired} field="businessNature">
-          <Input v-model={state.formData.businessNature} 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>
-  );
-});