@mijadesign/nut-mcp 1.0.0-alpha.0

package/docs/docs/components/dentry/form/index.md

@@ -0,0 +1,457 @@
+---
+order: 9
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/dentry/pages/form/index'
+group:
+    title: 数据录入
+    order: 5
+---
+
+# Form 表单 <Badge>2.0.0</Badge>
+
+
+用于数据录入、校验，支持输入框、单选框、复选框等类型。
+
+## 引入
+
+```tsx
+import { Form } from '@mijadesign/mjui-react-taro'
+```
+
+## 示例代码
+
+### 基础样式
+
+
+```tsx
+import React from 'react'
+import { Form, Input } from '@mijadesign/mjui-react-taro'
+
+const Demo1 = () => {
+  return (
+    <Form>
+      <Form.Item label="文本标签" name="text" rules={[{ required: true, message: '请输入用户名' }]}>
+        <Input align="right" placeholder="请输入" />
+      </Form.Item>
+    </Form>
+  )
+}
+
+export default Demo1
+
+```
+    
+### 带图标样式
+
+
+```tsx
+import React from 'react';
+import { Form, Input } from '@mijadesign/mjui-react-taro';
+import { Information } from '@mijadesign/mobile-icons';
+
+const Demo2 = () => {
+  return (
+    <>
+      <Form>
+        <Form.Item
+          label='文本标签'
+          labelExtra={<Information style={{ color: '#999' }} />}
+          name='username'
+          rules={[{ required: true, message: '请输入' }]}
+        >
+          <Input align='right' placeholder='请输入' type='text' />
+        </Form.Item>
+      </Form>
+    </>
+  );
+};
+
+export default Demo2;
+
+```
+    ### 布局方式
+
+
+```tsx
+import React from 'react';
+import { Form, Input, TextArea } from '@mijadesign/mjui-react-taro';
+
+const Demo3 = () => {
+  return (
+    <>
+      <Form>
+        <Form.Item label='水平布局' name='username' rules={[{ required: true }]}>
+          <Input placeholder='请输入' type='text' align='right' />
+        </Form.Item>
+        <Form.Item label='垂直布局' name='age' layout='vertical' rules={[{ required: true }]}>
+          <TextArea align='left' placeholder='请输入' maxLength={30} showCount />
+        </Form.Item>
+      </Form>
+    </>
+  );
+};
+
+export default Demo3;
+
+```
+    ### 关联展示
+
+
+```tsx
+import React from 'react';
+import { Form, Input, TextArea, type FormInstance } from '@mijadesign/mjui-react-taro';
+
+const Demo4 = () => {
+  return (
+    <>
+      <Form>
+        <Form.Item label='文本标签' name='username' rules={[{ required: true }]}>
+          <Input align='right' placeholder='请输入' type='text' />
+        </Form.Item>
+        <Form.Item shouldUpdate noStyle>
+          {({ getFieldValue }: FormInstance) => {
+            const value = getFieldValue('username');
+            if (!value) return null;
+            return (
+              <Form.Item label='文本标签' name='age' rules={[{ required: true }]}>
+                <TextArea autoSize placeholder='请输入' maxLength={100} />
+              </Form.Item>
+            );
+          }}
+        </Form.Item>
+      </Form>
+    </>
+  );
+};
+
+export default Demo4;
+
+```
+    
+### Form.useForm 对表单数据域进行交互。
+
+
+```tsx
+import React from 'react';
+import { Form, Input, Radio } from '@mijadesign/mjui-react-taro';
+import Taro from '@tarojs/taro';
+
+const Demo5 = () => {
+  const [form] = Form.useForm();
+  const submitFailed = (error: any) => {
+    Taro.showToast({ title: JSON.stringify(error), icon: 'error' });
+  };
+
+  const submitSucceed = (values: any) => {
+    Taro.showToast({ title: JSON.stringify(values), icon: 'success' });
+  };
+
+  const onMenuChange = (value: string | number | boolean) => {
+    switch (value) {
+      case 'male':
+        form.setFieldsValue({ note: '👨' });
+        break;
+      case 'female':
+        form.setFieldsValue({ note: '👩' });
+        break;
+      default:
+    }
+  };
+  return (
+    <>
+      <Form
+        form={form}
+        onFinish={(values) => submitSucceed(values)}
+        onFinishFailed={(values, errors) => submitFailed(errors)}
+      >
+        <Form.Item label='文本标签' name='username' rules={[{ required: true, message: '请输入' }]}>
+          <Input align='right' placeholder='请输入' type='text' />
+        </Form.Item>
+        <Form.Item label='标注' name='note'>
+          <Input align='right' placeholder='请输入' type='string' />
+        </Form.Item>
+        <Form.Item label='标注关联字段' name='gender'>
+          <Radio.Group direction='horizontal' style={{ justifyContent: 'flex-end' }} onChange={onMenuChange}>
+            <Radio value='male'>A</Radio>
+            <Radio value='female'>B</Radio>
+          </Radio.Group>
+        </Form.Item>
+      </Form>
+    </>
+  );
+};
+
+export default Demo5;
+
+```
+    
+### 校验触发时机
+
+
+```tsx
+import React from 'react';
+import { Form, Input } from '@mijadesign/mjui-react-taro';
+
+const Demo6 = () => {
+  return (
+    <>
+      <Form>
+        <Form.Item
+          label='文本标签'
+          name='username'
+          required
+          validateTrigger='onBlur'
+          rules={[{ required: true, message: '请输入' }]}
+        >
+          <Input align='right' placeholder='请输入' type='text' />
+        </Form.Item>
+      </Form>
+    </>
+  );
+};
+
+export default Demo6;
+
+```
+    
+### 表单校验
+
+
+```tsx
+import React from 'react'
+import { Button, Form, Input, Toast, type FormItemRuleWithoutValidator } from '@mijadesign/mjui-react-taro'
+
+const Demo7 = () => {
+  const submitFailed = (error: any) => {
+    Toast.show('toast', {
+      content: error?.[0]?.message,
+    })
+  }
+
+  const submitSucceed = (values: any) => {
+    Toast.show('toast', {
+      content: JSON.stringify(values),
+    })
+  }
+
+  // 函数校验
+  const customValidator = (rule: FormItemRuleWithoutValidator, value: string) => {
+    return /^\d+$/.test(value)
+  }
+
+  const valueRangeValidator = (rule: FormItemRuleWithoutValidator, value: string) => {
+    return /^(\d{1,2}|1\d{2}|200)$/.test(value)
+  }
+  return (
+    <>
+      <Form
+        toastId="toast"
+        onFinish={(values) => submitSucceed(values)}
+        onFinishFailed={(values, errors) => submitFailed(errors)}
+        footer={
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              width: '100%',
+            }}
+          >
+            <Button formType="reset" type="default" style={{ marginRight: '12px', flex: 1 }}>
+              重置
+            </Button>
+            <Button formType="submit" type="primary" style={{ flex: 1 }}>
+              提交
+            </Button>
+          </div>
+        }
+      >
+        <Form.Item label="文本标签" name="username" rules={[{ required: true, message: '请输入' }]}>
+          <Input align="right" placeholder="请输入" type="text" />
+        </Form.Item>
+        <Form.Item
+          label="文本标签"
+          name="age"
+          rules={[
+            { required: true, message: '请输入' },
+            { validator: customValidator, message: '必须输入数字' },
+            { validator: valueRangeValidator, message: '必须输入0-200区间' },
+          ]}
+        >
+          <Input align="right" placeholder="请输入" type="text" />
+        </Form.Item>
+        <Form.Item label="文本标签" name="tel" rules={[{ required: true, max: 13, message: '请输入' }]}>
+          <Input align="right" placeholder="请输入" type="number" />
+        </Form.Item>
+        <Form.Item label="文本标签" name="address" rules={[{ required: true, message: '请输入' }]}>
+          <Input align="right" placeholder="请输入" type="text" />
+        </Form.Item>
+      </Form>
+      <Toast id="toast" />
+    </>
+  )
+}
+
+export default Demo7
+
+```
+    
+### Form.useWatch 对表单数据域进行交互。
+
+
+```tsx
+import React from 'react';
+import { Form, Input, Radio } from '@mijadesign/mjui-react-taro';
+import { View } from '@tarojs/components';
+
+const Demo8 = () => {
+  const [form] = Form.useForm();
+  const account = Form.useWatch('account', form);
+  const loginMethod = Form.useWatch('loginMethod', form);
+
+  return (
+    <Form
+      form={form}
+      initialValues={{ loginMethod: 'mobile', account: '123' }}
+      footer={
+        <>
+          <View
+            style={{
+              width: '100%',
+            }}
+          >
+            <View
+              style={{
+                fontSize: '12px',
+                textAlign: 'center',
+                marginBottom: '20px',
+              }}
+            >
+              你将使用{loginMethod === 'mobile' ? '手机号' : '电子邮箱'}
+              {account}登录
+            </View>
+          </View>
+        </>
+      }
+    >
+      <Form.Item name='loginMethod' label='登录方式'>
+        <Radio.Group direction='horizontal' style={{ justifyContent: 'flex-end' }}>
+          <Radio value='mobile'>手机号</Radio>
+          <Radio value='email'>电子邮箱</Radio>
+        </Radio.Group>
+      </Form.Item>
+
+      <>
+        {loginMethod === 'mobile' && (
+          <Form.Item name='account' label='手机号'>
+            <Input align='right' placeholder='请输入手机号' />
+          </Form.Item>
+        )}
+        {loginMethod === 'email' && (
+          <Form.Item name='account' label='电子邮箱'>
+            <Input align='right' placeholder='请输入邮箱' />
+          </Form.Item>
+        )}
+      </>
+    </Form>
+  );
+};
+
+export default Demo8;
+
+```
+    
+
+
+## Form
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| form | 经 Form.useForm() 创建的 form 控制实例，不提供时会自动创建 | `FormInstance` | `-` |
+| footer | 表单底部区域，一般放置确认和重置按钮 | `ReactNode` | `null` |
+| initialValues | 表单初始值 | `any` | `-` |
+| name | 表单名称 | `any` | `-` |
+| labelPosition | 表单项 label 的位置 | \`\`'top' | 'left'\` | \`'left'\`\` |
+| starPosition | 必填表单项 label 的红色星标位置 | `left` \| `right` | `right` |
+| divider | 分割线 | `boolean` | `true` |
+| requiredTipType | 触发校验形式 | `toast` \| `default` \| `none` | `toast` |
+| validateTrigger | 统一设置字段触发验证的时机 | `string` \| `string[]`\| `false` | `onChange` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| onFinish | 校验成功后触发 | `(values: any) => void` | `-` |
+| onFinishFailed | 任一表单项被校验失败后触发 | `(values: any, errorFields: any) => void` | `-` |
+
+## Form.Item
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| required | 必填表单项 label 的红色星标,仅用于控制样式 | `boolean` | `false` |
+| name | 在使用表单校验功能的情况下，该属性是必填的 | `string` | `-` |
+| label | 标签名 | `ReactNode` | `-` |
+| labelExtra | 标签额外内容 | `ReactNode` | `-` |
+| layout | 布局形式 | `vertical` \| `horizontal` | `horizontal` |
+| errorMessageAlign | 错误提示文案对齐方式 | `center` \| `right` \| `left` | `left` |
+| initialValue | 设置子元素默认值 | `any` | `-` |
+| noStyle | 不使用样式，只使用字段管理 | `boolean` | `false` |
+| shouldUpdate | 更新逻辑 | `boolean` | `false` |
+| trigger | 设置收集字段值变更的时机 | `string` | `-` |
+| align | 对齐方式 | `flex-start` \| `center` \| `flex-end` | `flex-start` |
+| valuePropName | 子节点的值的属性，如 Checkbox 的是 'checked' | `string` | `-` |
+| getValueFromEvent | 设置如何将 event 的值转换成字段值 | `(...args: any) => any` | `-` |
+| validateTrigger | 统一设置字段触发验证的时机 | `string \| string[]` | `onChange` |
+| onClick | 点击事件并收集子组件 Ref | `(event: React.MouseEvent, componentRef: React.MutableRefObject<any>) => void` | `-` |
+
+### Form.Item Rule
+
+规则校验处理基于[async-validator](https://github.com/yiminghe/async-validator) 更多规则配置可查看 async-validator 文档。 使用 Form.Item 的`rules`属性可以定义校验规则，可选属性如下:
+
+| 属性 | 说明 | 类型 |
+| --- | --- | --- |
+| required | 是否为必选字段 | `boolean` |
+| message | 错误提示文案 | `string` |
+| len | string 类型时为字符串长度；number 类型时为确定数字； array 类型时为数组长度 | `number` |
+| max | 必须设置 type：string 类型为字符串最大长度；number 类型时为最大值；array 类型时为数组最大长度 | `number` |
+| min | 必须设置 type：string 类型为字符串最小长度；number 类型时为最小值；array 类型时为数组最小长度 | `number` |
+| pattern | 正则表达式匹配 | `RegExp` |
+| transform | 将字段值转换成目标值后进行校验 | `(value) => any` |
+| validator | 自定义校验，接收 Promise 作为返回值 | `(rule, value) => Promise` |
+
+### FormInstance
+
+`Form.useForm()`创建 Form 实例，用于管理所有数据状态。
+
+| 属性 | 说明 | 类型 |
+| --- | --- | --- |
+| getFieldValue | 获取对应字段名的值 | `(name: NamePath) => any` |
+| getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回。默认返回现存字段值，当调用 getFieldsValue(true) 时返回所有值 | `(name: NamePath \| boolean) => any` |
+| setFieldsValue | 设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入） | `(values) => void` |
+| setFieldValue | 设置对应字段名的值 | `<T>(name: NamePath, value: T) => void` |
+| resetFields | 重置表单提示状态 | `(namePaths?: NamePath[]) => void` |
+| submit | 提交表单进行校验的方法 | `Promise` |
+
+`Form.useWatch()`此方法将监视指定的输入并返回其值。它对于呈现输入值和确定根据条件呈现的内容很有用。
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-form-item-body-font-size | 表单容器的字号 | `$font-size-2` |
+| \--nutui-form-item-body-input-text-align | 表单项输入框的文本对齐方式 | `left` |
+| \--nutui-form-item-body-slots-text-align | 表单项文本对齐方式 | `left` |
+| \--nutui-form-item-error-line-color | 错误信息边框颜色 | `$color-error` |
+| \--nutui-form-item-error-message-color | 错误信息的文本颜色 | `$color-error` |
+| \--nutui-form-item-label-font-size | label 字号 | `$font-size-2` |
+| \--nutui-form-item-label-margin-right | label 右外边距 | `$spacing-3` |
+| \--nutui-form-item-label-text-align | label 文本对齐方式 | `left` |
+| \--nutui-form-item-label-width | label 宽度 | `90px` |
+| \--nutui-form-item-required-color | 必选标识的字体颜色 | `$color-error` |
+| \--nutui-form-item-required-margin-left |  | `$spacing-0` |
+| \--nutui-form-item-required-margin-right | label 必选的右外边距 | `4px` |
+| \--nutui-form-item-tip-font-size | 错误信息的字号 | `$font-size-1` |
+| \--nutui-form-item-tip-text-align | 错误信息的文本对齐方式 | `left` |
+| \--nutui-form-item-vertical-gap | 垂直布局间距 | `$spacing-1` |

package/docs/docs/components/dentry/input/index.md

@@ -0,0 +1,257 @@
+---
+order: 11
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/dentry/pages/input/index'
+group:
+    title: 数据录入
+    order: 5
+---
+
+# Input 输入框 <Badge>2.0.0</Badge>
+
+
+用户可以在文本框里输入内容。
+
+## 引入
+
+```tsx
+import { Input } from '@mijadesign/mjui-react-taro';
+
+```
+
+## 示例代码
+
+### 基本用法
+
+
+```tsx
+import React from 'react'
+import { Input, Space } from '@mijadesign/mjui-react-taro'
+
+const Demo1 = () => {
+  return (
+    <>
+      <Space style={{ padding: '0 16px' }} direction="vertical">
+        <Input underLine placeholder="请输入文本" />
+      </Space>
+    </>
+  )
+}
+export default Demo1
+
+```
+    
+### 自定义类型
+
+
+```tsx
+import React from 'react'
+import { Input } from '@mijadesign/mjui-react-taro'
+
+const Demo1 = () => {
+  return (
+    <div style={{ padding: '0 12px' }}>
+      <h4>01 仅支持数字</h4>
+      <Input underLine placeholder="请输入数字" type="digit" />
+      <h4>02 密码 - 支持密码可见</h4>
+      <Input underLine placeholder="请输入密码" type="password" />
+      <h4>03 整数</h4>
+      <Input underLine placeholder="请输入整数" type="number" />
+    </div>
+  )
+}
+export default Demo1
+
+```
+    
+### 组件状态
+
+
+```tsx
+import React from 'react'
+import { Input, Space } from '@mijadesign/mjui-react-taro'
+
+const Demo1 = () => {
+  return (
+    <>
+      <Space style={{ padding: '0 16px' }} direction="vertical">
+        <Input underLine value="只读状态" placeholder="只读状态" readOnly />
+        <Input underLine placeholder="禁用状态" disabled />
+      </Space>
+    </>
+  )
+}
+export default Demo1
+
+```
+    
+### 显示清空图标
+
+
+```tsx
+import React from 'react'
+import { Input, Space } from '@mijadesign/mjui-react-taro'
+
+const Demo4 = () => {
+  return (
+    <Space style={{ padding: '0 16px' }} direction="vertical">
+      <Input underLine placeholder="请输入文本" clearable />
+    </Space>
+  )
+}
+export default Demo4
+
+```
+    
+### 字数统计
+
+
+```tsx
+import React from 'react'
+import { Input, Space } from '@mijadesign/mjui-react-taro'
+
+const Demo5 = () => {
+  return (
+    <Space style={{ padding: '0 16px' }} direction="vertical">
+      <Input underLine placeholder="请输入文本" maxLength={20} showMaxCount />
+    </Space>
+  )
+}
+export default Demo5
+
+```
+    
+### 对齐方式
+
+
+```tsx
+import React from 'react'
+import { Input, Space } from '@mijadesign/mjui-react-taro'
+
+const Demo1 = () => {
+  return (
+    <Space style={{ padding: '0 16px' }} direction="vertical">
+      <Input underLine placeholder="请输入文本" />
+      <Input underLine placeholder="请输入文本" align="center" />
+      <Input underLine placeholder="请输入文本" align="right" />
+    </Space>
+  )
+}
+export default Demo1
+
+```
+    
+### 操作配置
+
+
+```tsx
+import React from 'react'
+import { Input, Space } from '@mijadesign/mjui-react-taro'
+import { Bankcard } from '@mijadesign/mobile-icons'
+
+const Demo15 = () => {
+  return (
+    <Space style={{ padding: '0 16px' }} direction="vertical">
+      <Input underLine align="right" placeholder="支持配置右侧图标" extra={<Bankcard size={20} color="#006DFC" />} />
+    </Space>
+  )
+}
+export default Demo15
+
+```
+    
+### 自定义边框
+
+
+```tsx
+import React from 'react'
+import { Input, Space } from '@mijadesign/mjui-react-taro'
+
+const Demo5 = () => {
+  return (
+    <Space style={{ padding: '0 16px' }} direction="vertical">
+      <Input style={{ '--nutui-input-border-bottom-width': '1px' }} placeholder="边框" />
+    </Space>
+  )
+}
+export default Demo5
+
+```
+    
+### 带按钮的输入
+
+
+```tsx
+import React, { useState } from 'react'
+import { Input, Button, Space } from '@mijadesign/mjui-react-taro'
+
+const Demo5 = () => {
+  const [value, setValue] = useState<string>('')
+  return (
+    <Space style={{ padding: '0 16px' }} direction="vertical">
+      <Input
+        placeholder="请输入验证码"
+        underLine
+        value={value}
+        onChange={(val) => setValue(val)}
+        extra={
+          <Button size="small" onClick={() => setValue('123451')}>
+            获取验证码
+          </Button>
+        }
+      />
+    </Space>
+  )
+}
+export default Demo5
+
+```
+    
+## Input
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| defaultValue | 初始默认值 | `string` | `-` |
+| value | 初始默认值 | `string` | `-` |
+| type | 输入框类型，支持原生 `input` 标签的所有 `type` 属性，另外还支持 `number` `digit` | `string` | `text` |
+| name | 组件名字，用于表单提交获取数据 | `string` | `-` |
+| placeholder | 输入框为空时占位符 | `string` | `-` |
+| align | 输入框内容对齐方式，可选值 `left`、`center`、`right` | `string` | `right` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| readOnly | 是否只读 | `boolean` | `false` |
+| autoFocus | 是否自动获得焦点，iOS 系统不支持该属性 | `boolean` | `false` |
+| maxLength | 限制最长输入字符 | `string`  \|  `number` | `-` |
+| clearable | 展示清除 Icon | `boolean` | `false` |
+| clearIcon | 清除图标 Icon <a href="#/icon">可参考 Icon </a> | `ReactNode` | `MaskClose` |
+| confirmType | 键盘右下角按钮的文字，仅在type='text'时生效,可选值 send：发送、search：搜索、next：下一个、go：前往、done：完成 | `string` | `done` |
+| formatter | 输入内容格式化函数 | `(val: string) => string` | `-` |
+| formatTrigger | 格式化函数触发的时机，可选值为 `onChange`、`onBlur` | `string` | `-` |
+| showPassword | 是否展示密码标识 | `boolean` | `true` |
+| showMaxCount | 是否展示字数 | `boolean` | `false` |
+| extra | 额外展示 | `ReactNode` | `-` |
+| underLine | 是否展示底部分割线 | `boolean` | `false` |
+| onChange | 输入框内容变化时触发 | `(value: string) => void` | `-` |
+| onBlur | 失去焦点后触发 | `(value: string) => void` | `-` |
+| onFocus | 获得焦点后触发 | `(value: string) => void` | `-` |
+| onClear | 点击清空按钮时触发 | `(value: string) => void` | `-` |
+| onClick | 点击 input 容器触发 | `(value: MouseEvent<HTMLDivElement>) => void` | `-` |
+
+此外还支持 Taro 中的 [Input 属性](https://docs.taro.zone/docs/components/forms/input/)
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-input-border-bottom | 边框颜色 | `$color-border` |
+| \--nutui-input-border-bottom-width | 边框宽度 | `0px` |
+| \--nutui-input-color | 文本颜色 | `$color-title` |
+| \--nutui-input-disabled-color | 禁用的文本颜色 | `$color-text-disabled` |
+| \--nutui-input-background-color | 输入框背景颜色 | `$color-white` |
+| \--nutui-input-border-radius | 输入框圆角 | `8` |
+| \--nutui-input-font-size | 文本字号 | `$font-size-2` |
+| \--nutui-input-padding | 输入框容器的内边距 | `16px` |