@mijadesign/nut-mcp 1.0.0-alpha.0

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

@@ -0,0 +1,364 @@
+---
+order: 17
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/dentry/pages/radio/index'
+group:
+    title: 数据录入
+    order: 5
+---
+
+# Radio 单选按钮 <Badge>2.0.0</Badge>
+
+
+用于在一组备选项中进行单选
+
+## 引入
+
+```tsx
+import { Radio } from '@mijadesign/mjui-react-taro';
+
+```
+
+## 示例代码
+
+### 基础单选
+
+
+```tsx
+import React from 'react'
+import { Radio } from '@mijadesign/mjui-react-taro'
+
+const Demo1 = () => {
+  return (
+    <div style={{ padding: '16px 0 0 0' }}>
+      <Radio defaultChecked>选项一</Radio>
+    </div>
+  )
+}
+export default Demo1
+
+```
+    
+## 横向单选
+
+
+```tsx
+import { Radio } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo6 = () => {
+  return (
+    <Radio.Group defaultValue="1" direction="horizontal" style={{ margin: '16px 0' }}>
+      <Radio value="1">选项一</Radio>
+      <Radio value="2">选项一</Radio>
+      <Radio value="3">选项一</Radio>
+    </Radio.Group>
+  )
+}
+export default Demo6
+
+```
+    
+## 单选状态
+
+
+```tsx
+import React from 'react'
+import { Radio } from '@mijadesign/mjui-react-taro'
+
+const Demo13 = () => {
+  return (
+    <>
+      <Radio.Group defaultValue="3">
+        <Radio value="1">选项1</Radio>
+        <Radio value="2" disabled>
+          选项1
+        </Radio>
+        <Radio value="3">选项1</Radio>
+      </Radio.Group>
+      <Radio.Group defaultValue="4">
+        <Radio value="4" disabled>
+          选项1
+        </Radio>
+      </Radio.Group>
+    </>
+  )
+}
+export default Demo13
+
+```
+    
+## 单选位置
+
+
+```tsx
+import React from 'react'
+import { Cell, Radio } from '@mijadesign/mjui-react-taro'
+
+const Demo14 = () => {
+  return (
+    <Cell.Group>
+      <Cell>
+        <Radio value="1">Icon位置在左侧</Radio>
+      </Cell>
+      <Cell>
+        <Radio value="2" labelPosition="left" style={{ width: '100%' }}>
+          Icon位置在右侧
+        </Radio>
+      </Cell>
+    </Cell.Group>
+  )
+}
+export default Demo14
+
+```
+    
+### Group 模式下禁用某一项
+
+
+```tsx
+import { Radio } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo2 = () => {
+  return (
+    <Radio.Group defaultValue="1">
+      <Radio disabled value="1">
+        选项1
+      </Radio>
+      <Radio value="2">选项2</Radio>
+      <Radio value="3">选项3</Radio>
+    </Radio.Group>
+  )
+}
+export default Demo2
+
+```
+    
+### Group 模式下禁用全部选项
+
+
+```tsx
+import React from 'react'
+import { Radio } from '@mijadesign/mjui-react-taro'
+
+const Demo3 = () => {
+  return (
+    <Radio.Group disabled defaultValue="1">
+      <Radio value="1">选项1</Radio>
+      <Radio value="2">选项2</Radio>
+      <Radio value="3">选项3</Radio>
+    </Radio.Group>
+  )
+}
+export default Demo3
+
+```
+    
+### 自定义图标
+
+
+```tsx
+import { Selected } from '@mijadesign/mobile-icons'
+import { Radio } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo8 = () => {
+  return (
+    <div style={{ padding: '16px 0 0 0' }}>
+      <Radio icon={<Selected />} activeIcon={<Selected />}>
+        自定义图标
+      </Radio>
+    </div>
+  )
+}
+export default Demo8
+
+```
+    
+### 自定义图标，通过Group实现列表形式
+
+
+```tsx
+import { Selected } from '@mijadesign/mobile-icons'
+import { Radio } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo9 = () => {
+  return (
+    <Radio.Group defaultValue="1" labelPosition="left" style={{ width: '100%' }}>
+      <Radio icon={<Selected />} activeIcon={<Selected />} value="1">
+        自定义图标
+      </Radio>
+      <Radio icon={<Selected />} activeIcon={<Selected />} value="2">
+        自定义图标
+      </Radio>
+    </Radio.Group>
+  )
+}
+export default Demo9
+
+```
+    
+### 触发事件
+
+
+```tsx
+import React, { useState } from 'react'
+import { Radio } from '@mijadesign/mjui-react-taro'
+import Taro from '@tarojs/taro'
+
+const Demo10 = () => {
+  const [checkedValue] = useState(1)
+  return (
+    <>
+      <Radio.Group
+        defaultValue={checkedValue}
+        onChange={(value) =>
+          Taro.showToast({
+            icon: 'none',
+            title: value.toString(),
+          })
+        }
+      >
+        <Radio value={1}>触发事件</Radio>
+        <Radio value={2}>触发事件</Radio>
+      </Radio.Group>
+    </>
+  )
+}
+export default Demo10
+
+```
+    
+## 自定义图标
+
+建议 `icon` `activeIcon` 一起修改
+
+
+```tsx
+import { Selected } from '@mijadesign/mobile-icons'
+import { Radio } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo8 = () => {
+  return (
+    <div style={{ padding: '16px 0 0 0' }}>
+      <Radio icon={<Selected />} activeIcon={<Selected />}>
+        自定义图标
+      </Radio>
+    </div>
+  )
+}
+export default Demo8
+
+```
+    
+## 自定义图标，通过Group实现列表形式
+
+建议 `icon` `activeIcon` 一起修改
+
+
+```tsx
+import { Selected } from '@mijadesign/mobile-icons'
+import { Radio } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo9 = () => {
+  return (
+    <Radio.Group defaultValue="1" labelPosition="left" style={{ width: '100%' }}>
+      <Radio icon={<Selected />} activeIcon={<Selected />} value="1">
+        自定义图标
+      </Radio>
+      <Radio icon={<Selected />} activeIcon={<Selected />} value="2">
+        自定义图标
+      </Radio>
+    </Radio.Group>
+  )
+}
+export default Demo9
+
+```
+    
+## 触发事件
+
+
+```tsx
+import React, { useState } from 'react'
+import { Radio } from '@mijadesign/mjui-react-taro'
+import Taro from '@tarojs/taro'
+
+const Demo10 = () => {
+  const [checkedValue] = useState(1)
+  return (
+    <>
+      <Radio.Group
+        defaultValue={checkedValue}
+        onChange={(value) =>
+          Taro.showToast({
+            icon: 'none',
+            title: value.toString(),
+          })
+        }
+      >
+        <Radio value={1}>触发事件</Radio>
+        <Radio value={2}>触发事件</Radio>
+      </Radio.Group>
+    </>
+  )
+}
+export default Demo10
+
+```
+    
+
+## Radio
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| checked | 指定当前是否选中 | `boolean` | `-` |
+| defaultChecked | 初始是否选中 | `boolean` | `-` |
+| disabled | 是否禁用选择 | `boolean` | `false` |
+| value | 携带的标识值，用于 Group 模式 | `string`  \|  `number` | `-` |
+| labelPosition | 文本所在的位置 | `left` \| `right` | `right` |
+| icon | <a href="#/icon">图标名称</a>，选中前(建议和`activeIcon`一起修改) | `ReactNode` | `'CheckNormal'` |
+| activeIcon | <a href="#/icon">图标名称</a>，选中后(建议和`icon`一起修改) | `ReactNode` | `'CheckChecked'` |
+| shape | 形状 | `button` \| `round` |`round` |
+| onChange | 选中态变化时触发 | `(checked: boolean) => void` | `-` |
+
+## Radio.Group
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | 当前选中项的标识符 | `string`  \|  `number` | `-` |
+| labelPosition | 文本所在的位置 | `left` \| `right` | `right` |
+| disabled | 是否禁用 | `boolean` | `false` |
+| shape | 形状 | `button` \| `round` |`-` |
+| direction | 使用横纵方向 | `horizontal` \| `vertical` | `vertical` |
+| options | 配置 options 渲染单选按钮 | `Array<{ label: string value: string disabled?: boolean }>`  | `-` |
+| onChange | 值变化时触发 | `(value: string \| number) => void` | `-` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-radio-icon-font-size | icon字号 | `20px` |
+| \--nutui-radio-label-font-size | 字号 | `$font-size-2` |
+| \--nutui-radio-label-color | 字体颜色 | `$color-title` |
+| \--nutui-radio-label-margin-left | label 的左外边距 | `4px` |
+| \--nutui-radio-button-font-size | shape为button的字号 | `12px` |
+| \--nutui-radio-button-color | 字体颜色 | `$color-text` |
+| \--nutui-radio-button-background | shape为button的背景色 | `$color-background` |
+| \--nutui-radio-button-active-border | shape为button选中态的边框 | `1px solid $color-primary` |
+| \--nutui-radio-button-padding | shape为button的内边距 | `5px 18px` |
+| \--nutui-radio-button-border-radius | shape为button的圆角 | `15px` |
+| \--nutui-radiogroup-radio-margin | Group模式下每个 radio 的右侧边距 | `16px` |
+| \--nutui-radiogroup-radio-margin-bottom | Group模式下每个 radio 的底部边距 | `12px` |
+| \--nutui-radiogroup-radio-label-margin | Group模式下每个 radio 中的 label 外边距 | `0 4px 0 4px` |

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

@@ -0,0 +1,317 @@
+---
+order: 21
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/dentry/pages/searchbar/index'
+group:
+    title: 数据录入
+    order: 5
+---
+
+# SearchBar 搜索栏 <Badge>2.0.0</Badge>
+
+
+用于搜索场景的输入框组件。
+
+## 引入
+
+```tsx
+import { SearchBar } from '@mijadesign/mjui-react-taro';
+```
+
+## 示例代码
+
+### 基础用法
+
+`SearchBar` 的 `placeholder` 属性支持自定义。
+
+
+```tsx
+import { SearchBar } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo = () => {
+  return <SearchBar placeholder="搜索预设文案" />
+}
+export default Demo
+
+```
+    
+### 对齐方式
+
+
+```tsx
+import React, { useRef, useState } from 'react';
+import { SearchBar } from '@mijadesign/mjui-react-taro';
+import { Search } from '@mijadesign/mobile-icons';
+import classNames from 'classnames';
+import '../../demo.scss';
+
+const Demo2 = () => {
+  const [focus, setFocus] = useState(false);
+  const searchRef = useRef<any>(null);
+  return (
+    <>
+      <div style={{ marginBottom: '20px' }}>
+        <div style={{ marginBottom: '8px', fontSize: '13px' }}>默认态左对齐</div>
+        <SearchBar placeholder='搜索预设文案' />
+      </div>
+      <div>
+        <div style={{ marginBottom: '8px', fontSize: '13px' }}>居中对齐</div>
+        <SearchBar
+          searchRef={searchRef}
+          onClick={() => {
+            setFocus(true);
+            process.env.TARO_ENV === 'weapp' && searchRef?.current?.focus?.();
+          }}
+          onBlur={(value) => {
+            setFocus(!!value);
+          }}
+          leftIn={
+            !focus ? (
+              <div className='custom-searchbar-left-in'>
+                <Search />
+                <div>搜索</div>
+              </div>
+            ) : (
+              <Search />
+            )
+          }
+          // autoFocus={focus}
+          className={classNames('custom-searchbar', { 'custom-searchbar-focus': !!focus })}
+          placeholder='搜索'
+        />
+      </div>
+    </>
+  );
+};
+export default Demo2;
+
+```
+    
+### 搜索框形状
+
+`SearchBar` 的 `shape` 属性支持定义圆角直角，`maxLength` 可控制输入字符的最大长度。
+
+
+```tsx
+import { SearchBar } from '@mijadesign/mjui-react-taro'
+import React, { useState } from 'react'
+
+const Demo3 = () => {
+  const [show, SetShow] = useState(false)
+  const toastShow = () => {
+    SetShow(true)
+  }
+  return (
+    <>
+      <div style={{ marginBottom: '12px' }}>
+        <SearchBar placeholder="圆角8px" />
+      </div>
+      <div>
+        <SearchBar shape="round" placeholder="全圆角" />
+      </div>
+    </>
+  )
+}
+export default Demo3
+
+```
+    
+### 搜索框高度
+
+`SearchBar` 的 `shape` 属性支持定义圆角直角，`maxLength` 可控制输入字符的最大长度。
+
+
+```tsx
+import { SearchBar } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo8 = () => {
+  return (
+    <>
+      <div style={{ marginBottom: '12px' }}>
+        <SearchBar placeholder="高度32px" />
+      </div>
+      <div>
+        <SearchBar contentHeight={44} placeholder="高度44px" />
+      </div>
+    </>
+  )
+}
+export default Demo8
+
+```
+    
+### 支持返回
+
+点击返回，返回上一级页面，`SearchBar` 的 `left` 属性可以设置搜索框左侧内容，
+
+
+```tsx
+import { SearchBar } from '@mijadesign/mjui-react-taro'
+import { ArrowLeft } from '@mijadesign/mobile-icons'
+import React from 'react'
+
+const Demo4 = () => {
+  return <SearchBar left={<ArrowLeft size={20} onClick={() => console.log('点击返回')} />} placeholder="搜索预设文案" />
+}
+export default Demo4
+
+```
+    
+### 支持取消
+点击取消返回上一级页面， `SearchBar` 的`right` 属性可以设置搜索框右侧内容
+
+
+
+```tsx
+import { SearchBar } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo5 = () => {
+  return (
+    <>
+      <SearchBar right={<div onClick={() => console.log('click')}>取消</div>} />
+    </>
+  )
+}
+export default Demo5
+
+```
+    
+### 颜色自定义
+
+支持自定义搜索框颜色、描边色
+
+
+```tsx
+import { ConfigProvider, SearchBar } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo6 = () => {
+  return (
+    <>
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px', marginBottom: '20px' }}>
+        <div style={{ fontSize: '13px' }}>支持自定义搜索框颜色、描边色</div>
+        <ConfigProvider
+          theme={{
+            nutuiSearchbarContentBackground: '#E6F0FF',
+          }}
+        >
+          <SearchBar />
+        </ConfigProvider>
+        <ConfigProvider
+          theme={{
+            nutuiSearchbarContentBackground: '#fff',
+            nutuiSearchbarContentBorder: '1px solid #eee',
+          }}
+        >
+          <SearchBar border />
+        </ConfigProvider>
+      </div>
+
+      <div style={{ display: 'flex', flexDirection: 'column', gap: '8px' }}>
+        <div style={{ fontSize: '13px' }}>支持自定义搜索框外颜色</div>
+        <ConfigProvider
+          theme={{
+            nutuiSearchbarBackground: 'var(--nutui-color-primary)',
+            nutuiSearchbarContentBackground: '#fff',
+            nutuiSearchbarPadding: '6px 12px',
+          }}
+        >
+          <SearchBar />
+        </ConfigProvider>
+      </div>
+    </>
+  )
+}
+export default Demo6
+
+```
+    
+### 数据改变监听
+
+`SearchBar` 的 `onChange` 可获取输入的内容。
+
+
+```tsx
+import React, { useState } from 'react'
+import { SearchBar } from '@mijadesign/mjui-react-taro'
+
+const Demo7 = () => {
+  const [value, setValue] = useState('')
+  return (
+    <>
+      <SearchBar onChange={(val: string) => setValue(val)} maxLength={10} />
+      <div
+        style={{
+          height: '40px',
+          lineHeight: '40px',
+          color: '#666',
+          fontSize: '14px',
+        }}
+      >
+        {value}
+      </div>
+    </>
+  )
+}
+export default Demo7
+
+```
+    
+## SearchBar
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | 当前输入的值，受控 | `string` | `-` |
+| defaultValue | 当前默认值，支持通过','分割成多个 | `string` | `-` |
+| placeholder | 输入框默认暗纹 | `string` | `请输入` |
+| shape | 搜索框形状，可选值为 `round` | `string` | `square` |
+| disabled | 是否禁用输入框 | `boolean` | `false` |
+| readOnly | 输入框只读 | `boolean` | `false` |
+| maxLength | 最大输入长度 | `number` | `9999` |
+| clearable | 是否展示清除按钮 | `boolean` | `true` |
+| autoFocus | 是否自动聚焦 | `boolean` | `false` |
+| backable | 是否展示返回按钮 | `boolean` | `false` |
+| border | 是否展示边框 | `boolean` | `false` |
+| contentHeight | 输入框高度 | `number` | `32` |
+| left | 搜索框左侧区域 | `ReactNode` | `-` |
+| right | 搜搜框右侧区域 | `ReactNode` | `-` |
+| leftIn | 输入框内左侧区域 | `ReactNode` | `<Search />` |
+| rightIn | 输入框内右侧区域 | `ReactNode` | `-` |
+| onChange | 输入内容时触发 | `(value: string, event: ChangeEvent<HTMLInputElement>) => void` | `-` |
+| onFocus | 聚焦时触发 | `(value: string, event: FocusEvent<HTMLInputElement>) => void` | `-` |
+| onBlur | 失焦时触发 | `(value: string, event: FocusEvent<HTMLInputElement>) => void` | `-` |
+| onClear | 点击清空时触发 | `(event: MouseEvent<HTMLDivElement>) => void` | `-` |
+| onSearch | 确定搜索时触发 | `(val: string) => void` | `-` |
+| onInputClick | 点击输入区域时触发 | `(event: MouseEvent<HTMLInputElement>) => void` | `-` |
+| onItemClick | 点击默认值的x号触发 | `(value: string) => void` | `-` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-searchbar-background | 搜索框背景色 | `inherit` |
+| \--nutui-searchbar-color | 搜索框字色 | `$color-title` |
+| \--nutui-searchbar-content-background | 搜索框中间内容区的背景色 | `$color-background` |
+| \--nutui-searchbar-content-border | 搜索框内容区边框 | `1px solid $color-border` |
+| \--nutui-searchbar-content-border-radius | 搜索框内容区圆角 | `$radius-1` |
+| \--nutui-searchbar-content-round-border-radius | 搜索框内容区在round模式下的圆角 | `$radius-circle` |
+| \--nutui-searchbar-font-size | 搜索框字号 | `$font-size-2` |
+| \--nutui-searchbar-gap | 搜索框外部/大间距 | `$spacing-2` |
+| \--nutui-searchbar-icon-size | 搜索框icon字号 | `$icon-font-size` |
+| \--nutui-searchbar-inner-gap | 搜索框内部元素间的间距 | `$spacing-1` |
+| \--nutui-searchbar-input-curror-color | 搜索框输入区输入色 | `$color-text-disabled` |
+| \--nutui-searchbar-input-height | 搜索框输入区高度 | `32px` |
+| \--nutui-searchbar-input-padding | 搜索框输入区padding | `0 0 0 8px` |
+| \--nutui-searchbar-input-text-align | 搜索框输入区对齐方式 | `left` |
+| \--nutui-searchbar-input-text-color | 搜索框输入区字色 | `$color-title` |
+| \--nutui-searchbar-padding | 搜索框的padding值 | `0px 0px` |
+| \--nutui-searchbar-right-color | 搜索框右侧字色 | `$color-primary` |
+| \--nutui-searchbar-width | 搜索框的宽度 | `100%` |