feat: add form doc

Author: tangjinzhou

components/form/demo/advanced-search.md renamed to components/form/demo/advanced-search.vue

@@ -10,7 +10,7 @@ Three columns layout is often used for advanced searching of data table.
 Because the width of label is not fixed, you may need to adjust it by customizing its style.
 </us>
 
-```html
+
 <script>
 import { Form } from 'vue-antd-ui'
 
@@ -128,7 +128,7 @@ export default {
   padding-top: 80px;
 }
 </style>
-```
+
 
 
 

components/form/demo/coordinated.md renamed to components/form/demo/coordinated.vue

@@ -8,7 +8,7 @@
 Use `setFieldsValue` to set other control's value programmaticly.
 </us>
 
-```html
+
 <script>
 import { Form } from 'vue-antd-ui'
 
@@ -76,7 +76,7 @@ const CoordinatedForm = {
 
 export default Form.create()(CoordinatedForm)
 </script>
-```
+
 
 
 

components/form/demo/customized-form-controls.md renamed to components/form/demo/customized-form-controls.vue

@@ -14,7 +14,7 @@ Customized or third-party form controls can be used in Form, too. Controls must
 > * It must be a class component.
 </us>
 
-```html
+
 <script>
 import { Form } from 'vue-antd-ui'
 
@@ -123,7 +123,7 @@ const Demo = {
 
 export default Form.create()(Demo)
 </script>
-```
+
 
 
 

components/form/demo/dynamic-form-item.md renamed to components/form/demo/dynamic-form-item.vue

@@ -8,7 +8,7 @@
 Add or remove form items dynamically.
 </us>
 
-```html
+
 <script>
 import { Form } from 'vue-antd-ui'
 
@@ -138,7 +138,7 @@ export default Form.create()(DynamicFieldSet)
 }
 </style>
 
-```
+
 
 
 

components/form/demo/dynamic-rule.md renamed to components/form/demo/dynamic-rule.vue

@@ -8,7 +8,7 @@
 Perform different check rules according to different situations.
 </us>
 
-```html
+
 <script>
 import { Form } from 'vue-antd-ui'
 
@@ -88,7 +88,7 @@ const DynamicRule = {
 
 export default Form.create()(DynamicRule)
 </script>
-```
+
 
 
 

components/form/demo/form-in-modal.md renamed to components/form/demo/form-in-modal.vue

@@ -8,7 +8,7 @@
 When user visit a page with a list of items, and want to create a new item. The page can popup a form in Modal, then let user fill in the form to create an item.
 </us>
 
-```html
+
 <script>
 import { Form } from 'vue-antd-ui'
 
@@ -99,7 +99,7 @@ export default {
   },
 }
 </script>
-```
+
 
 
 

components/form/demo/global-state.md renamed to components/form/demo/global-state.vue

@@ -9,12 +9,12 @@
 <us>
 #### Store Form Data into Upper Component
 We can store form data into upper component.
-**Note:** 
+**Note:**
 You must wrap field data with `Form.createFormField` in `mapPropsToFields`.
 The properties passed by the upper component must be declared in the props of `Form.create({ props: ...})`.
 </us>
 
-```html
+
 <script>
 import { Form } from 'vue-antd-ui'
 
@@ -86,7 +86,7 @@ export default {
   margin-top: 24px;
 }
 </style>
-```
+
 
 
 

components/form/demo/horizontal-login.md renamed to components/form/demo/horizontal-login.vue

@@ -8,7 +8,7 @@
 Horizontal login form is often used in navigation bar.
 </us>
 
-```html
+
 <script>
 import { Form } from 'vue-antd-ui'
 
@@ -76,7 +76,7 @@ const HorizontalLoginForm = {
 
 export default Form.create()(HorizontalLoginForm)
 </script>
-```
+
 
 
 

components/form/demo/index.vue

@@ -1,25 +1,37 @@
 <script>
-
-// import AdvancedSearch from './advanced-search'
-// import Coordinated from './coordinated'
-// import CustomizedFormControls from './customized-form-controls'
-// import DynamicFormItem from './dynamic-form-item'
-// import DynamicRule from './dynamic-rule'
-// import FormInModal from './form-in-modal'
-// import GlobalState from './global-state'
-// import HorizontalLogin from './horizontal-login'
-// import Layout from './layout'
-// import NormalLogin from './normal-login'
-// import Register from './register'
-// import TimeRelatedControls from './time-related-controls'
-// import ValidateOther from './validate-other'
-// import ValidateStatic from './validate-static'
-// import WithoutFormCreate from './without-form-create'
-import Test from './test'
-import TestString from '!raw-loader!./test'
-
-import CN from './../index.zh-CN'
-import US from './../index.en-US'
+import AdvancedSearch from './advanced-search'
+import AdvancedSearchString from '!raw-loader!./advanced-search'
+import Coordinated from './coordinated'
+import CoordinatedString from '!raw-loader!./coordinated'
+import CustomizedFormControls from './customized-form-controls'
+import CustomizedFormControlsString from '!raw-loader!./customized-form-controls'
+import DynamicFormItem from './dynamic-form-item'
+import DynamicFormItemString from '!raw-loader!./dynamic-form-item'
+import DynamicRule from './dynamic-rule'
+import DynamicRuleString from '!raw-loader!./dynamic-rule'
+import FormInModal from './form-in-modal'
+import FormInModalString from '!raw-loader!./form-in-modal'
+import GlobalState from './global-state'
+import GlobalStateString from '!raw-loader!./global-state'
+import HorizontalLogin from './horizontal-login'
+import HorizontalLoginString from '!raw-loader!./horizontal-login'
+import Layout from './layout'
+import LayoutString from '!raw-loader!./layout'
+import NormalLogin from './normal-login'
+import NormalLoginString from '!raw-loader!./normal-login'
+import Register from './register'
+import RegisterString from '!raw-loader!./register'
+import TimeRelatedControls from './time-related-controls'
+import TimeRelatedControlsString from '!raw-loader!./time-related-controls'
+import ValidateOther from './validate-other'
+import ValidateOtherString from '!raw-loader!./validate-other'
+import ValidateStatic from './validate-static'
+import ValidateStaticString from '!raw-loader!./validate-static'
+import WithoutFormCreate from './without-form-create'
+import WithoutFormCreateString from '!raw-loader!./without-form-create'
+
+import CN from '../index.zh-CN'
+import US from '../index.en-US'
 
 const md = {
   cn: `# Form 表单
@@ -70,27 +82,54 @@ export default {
   cols: 1,
   title: 'Form',
   render () {
-    console.log(TestString)
     return (
       <div>
         <md cn={md.cn} us={md.us} />
-        <Test />
-        {/* <AdvancedSearch />
-        <Coordinated />
-        <CustomizedFormControls />
-        <DynamicFormItem />
-        <DynamicRule />
-        <FormInModal />
-        <GlobalState />
-        <HorizontalLogin />
-        <Layout />
-        <NormalLogin />
-        <Register />
-        <TimeRelatedControls />
-        <ValidateStatic />
-        <WithoutFormCreate />
-        <ValidateOther />
-        */}
+        <demo-container code={AdvancedSearchString}>
+          <AdvancedSearch />
+        </demo-container>
+        <demo-container code={CoordinatedString}>
+          <Coordinated />
+        </demo-container>
+        <demo-container code={CustomizedFormControlsString}>
+          <CustomizedFormControls />
+        </demo-container>
+        <demo-container code={DynamicFormItemString}>
+          <DynamicFormItem />
+        </demo-container>
+        <demo-container code={DynamicRuleString}>
+          <DynamicRule />
+        </demo-container>
+        <demo-container code={FormInModalString}>
+          <FormInModal />
+        </demo-container>
+        <demo-container code={GlobalStateString}>
+          <GlobalState />
+        </demo-container>
+        <demo-container code={HorizontalLoginString}>
+          <HorizontalLogin />
+        </demo-container>
+        <demo-container code={LayoutString}>
+          <Layout />
+        </demo-container>
+        <demo-container code={NormalLoginString}>
+          <NormalLogin />
+        </demo-container>
+        <demo-container code={RegisterString}>
+          <Register />
+        </demo-container>
+        <demo-container code={TimeRelatedControlsString}>
+          <TimeRelatedControls />
+        </demo-container>
+        <demo-container code={ValidateStaticString}>
+          <ValidateStatic />
+        </demo-container>
+        <demo-container code={WithoutFormCreateString}>
+          <WithoutFormCreate />
+        </demo-container>
+        <demo-container code={ValidateOtherString}>
+          <ValidateOther />
+        </demo-container>
         <api>
           <CN slot='cn' />
           <US />
@@ -100,3 +139,8 @@ export default {
   },
 }
 </script>
+<style>
+.code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
+  max-width: 600px;
+}
+</style>

components/form/demo/layout.md renamed to components/form/demo/layout.vue

@@ -8,7 +8,7 @@
 There are three layout for form: `horizontal`, `vertical`, `inline`.
 </us>
 
-```html
+
 <template>
 <div>
   <a-form :layout="formLayout">
@@ -43,7 +43,7 @@ There are three layout for form: `horizontal`, `vertical`, `inline`.
       <a-button type='primary'>Submit</a-button>
     </a-form-item>
   </a-form>
-</div>  
+</div>
 </template>
 
 <script>
@@ -75,7 +75,7 @@ export default {
   },
 }
 </script>
-```
+