<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'

const md = {
  cn: `# Form 表单
           具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。

## 表单

我们为 \`form\` 提供了以下三种排列方式：

- 水平排列：标签和表单控件水平排列；（默认）
- 垂直排列：标签和表单控件上下垂直排列；
- 行内排列：表单项水平行内排列。

## 表单域

表单一定会包含表单域，表单域可以是输入控件，标准表单域，标签，下拉菜单，文本域等。

这里我们封装了表单域 \`<Form.Item />\` 。

**注意：** 如果使用 \`Form.create\` 处理表单使其具有自动收集数据并校验的功能，建议使用\`jsx\`
## 代码演示
        `,
  us: `# Form
           Form is used to collect, validate, and submit the user input, usually contains various form items including checkbox, radio, input, select, and etc.

## Form

You can align the controls of a \`form\` using the \`layout\` prop：

- \`horizontal\`：to horizontally align the \`label\`s and controls of the fields. (Default)
- \`vertical\`：to vertically align the \`label\`s and controls of the fields.
- \`inline\`：to render form fields in one line.

## Form fields

A form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more.
A form field is defined using \`<Form.Item />\`.

**Note:** If you use \`Form.create\` to process forms with automatic data collection and validation, we recommend using \`jsx\`
## Examples
        `,
}

export default {
  category: 'Components',
  subtitle: '表单',
  type: 'Data Entry',
  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 />
        */}
        <api>
          <CN slot='cn' />
          <US />
        </api>
      </div>
    )
  },
}
</script>
