@mijadesign/nut-mcp 1.0.0-alpha.0

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

@@ -0,0 +1,295 @@
+---
+order: 22
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/dentry/pages/selector/index'
+group:
+    title: 数据录入
+    order: 5
+---
+
+# Selector 选择组 <Badge>2.0.0</Badge>
+
+
+在一组选项中选择一个或多个。
+
+## 引入
+
+```tsx
+import { Selector } from '@mijadesign/mjui-react-taro';
+```
+
+## 示例代码
+
+### 基础单选用法
+默认单选
+
+
+```tsx
+import { Selector } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo1 = () => {
+  return (
+    <Selector
+      selectedIcon={false}
+      defaultValue={0}
+      options={[
+        { label: '未出险', value: 0 },
+        { label: '疾病', value: 1 },
+        { label: '意外', value: 2 },
+        { label: '交通事故', value: 3 },
+      ]}
+    />
+  )
+}
+export default Demo1
+
+```
+    
+### 多选用法
+
+
+```tsx
+import { Selector } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo2 = () => {
+  return (
+    <Selector
+      defaultValue={[0]}
+      multiple
+      options={[
+        { label: '未出险', value: 0 },
+        { label: '疾病', value: 1 },
+        { label: '意外', value: 2 },
+        { label: '交通事故', value: 3 },
+      ]}
+    />
+  )
+}
+export default Demo2
+
+```
+    
+### 禁选用法
+
+
+```tsx
+import { Selector } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo2 = () => {
+  return (
+    <Selector
+      defaultValue={[0]}
+      disabled
+      options={[
+        { label: '疾病', value: 0 },
+        { label: '疾病', value: 1 },
+      ]}
+    />
+  )
+}
+export default Demo2
+
+```
+    
+### 大小
+
+默认36px
+
+
+```tsx
+import { Selector } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo4 = () => {
+  return (
+    <div style={{ display: 'inline-flex', gap: '12px' }}>
+      <Selector defaultValue={0} size="large" options={[{ label: '疾病', value: 0 }]} />
+      <Selector defaultValue={0} size="default" options={[{ label: '疾病', value: 0 }]} />
+      <Selector defaultValue={0} size="small" options={[{ label: '疾病', value: 0 }]} />
+    </div>
+  )
+}
+export default Demo4
+
+```
+    
+### 选择组布局
+均分时需要传入 `span`属性，固定边距时不需要传span，默认固定边距
+换行通过 `wrap`属性，默认为true
+
+
+```tsx
+import { Selector } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo5 = () => {
+  return (
+    <div>
+      <div
+        style={{ display: 'inline-flex', flexDirection: 'column', gap: '12px', width: '100%', marginBottom: '40px' }}
+      >
+        <div style={{ fontWeight: 600 }}>1、均分</div>
+        <Selector
+          defaultValue={0}
+          span={2}
+          options={[
+            { label: '未出险', value: 0 },
+            { label: '疾病', value: 1 },
+          ]}
+        />
+        <Selector
+          defaultValue={0}
+          span={3}
+          options={[
+            { label: '未出险', value: 0 },
+            { label: '疾病', value: 1 },
+            { label: '意外', value: 2 },
+          ]}
+        />
+        <Selector
+          defaultValue={0}
+          span={4}
+          options={[
+            { label: '未出险', value: 0 },
+            { label: '疾病', value: 1 },
+            { label: '意外', value: 2 },
+            { label: '交通事故', value: 3 },
+          ]}
+        />
+      </div>
+
+      <div style={{ display: 'inline-flex', flexDirection: 'column', gap: '12px', width: '100%' }}>
+        <div style={{ fontWeight: 600 }}>2、固定边距</div>
+        <div style={{ fontWeight: 600, fontSize: '13px', color: '#666' }}>2.1、左右滑动</div>
+        <Selector
+          defaultValue={0}
+          wrap={false}
+          options={[
+            { label: '未出险', value: 0 },
+            { label: '疾病', value: 1 },
+            { label: '意外', value: 2 },
+            { label: '交通事故', value: 3 },
+            { label: '交通事故', value: 4 },
+            { label: '交通事故', value: 5 },
+          ]}
+        />
+
+        <div style={{ fontWeight: 600, fontSize: '13px', color: '#666' }}>2.2、换行</div>
+        <Selector
+          defaultValue={0}
+          wrap
+          options={[
+            { label: '未出险', value: 0 },
+            { label: '疾病', value: 1 },
+            { label: '意外', value: 2 },
+            { label: '交通事故', value: 3 },
+            { label: '交通事故', value: 4 },
+            { label: '交通事故', value: 5 },
+          ]}
+        />
+      </div>
+    </div>
+  )
+}
+export default Demo5
+
+```
+    
+### 支持受控
+`Selector` 的 `onChange` 可获取输入的内容。
+
+
+```tsx
+import { Selector, SelectorValue } from '@mijadesign/mjui-react-taro'
+import React, { useState } from 'react'
+
+const Demo6 = () => {
+  const [value, setValue] = useState<SelectorValue>(0)
+  const [mulValue, setMulValue] = useState<SelectorValue>([0, 1])
+
+  return (
+    <div style={{ display: 'inline-flex', flexDirection: 'column', gap: '12px' }}>
+      <div style={{ fontWeight: 600 }}>单选</div>
+      <Selector
+        value={value}
+        onChange={(v) => {
+          setValue(v)
+        }}
+        options={[
+          { label: '未出险', value: 0 },
+          { label: '疾病', value: 1 },
+          { label: '意外', value: 2 },
+          { label: '交通事故', value: 3 },
+        ]}
+      />
+
+      <div style={{ fontWeight: 600 }}>多选</div>
+      <Selector
+        value={mulValue}
+        multiple
+        onChange={(v) => {
+          setMulValue(v)
+        }}
+        options={[
+          { label: '未出险', value: 0 },
+          { label: '疾病', value: 1 },
+          { label: '意外', value: 2 },
+          { label: '交通事故', value: 3 },
+        ]}
+      />
+    </div>
+  )
+}
+export default Demo6
+
+```
+    
+
+## Selector
+
+### Props
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| value | 当前输入的值，支持非受控 | `string` \|`number` \| `Array<string \| number>` | `-` |
+| defaultValue | 当前默认值 | `string` \|`number` \| `Array<string \| number>` | `-` |
+| disabled | 是否全部禁止选中 | `boolean` | `false` |
+| multiple | 是否支持多选 | `boolean` | `false` |
+| wrap | 是否需要换行，不换行则滚动展示 | `boolean` | `true` |
+| span | 展示列数 | `number` | `-` |
+| size | 选择器大小 | `SelectorOption[]` | `[]` |
+| options | 可选项 | `small` \|`default` \|  `large` | `default` |
+| onChange | 输入内容时触发 | `(value: any, item?: SelectorOption) => void` | `-` |
+
+
+#### SelectorOption
+
+| 属性 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| label | 展示的文本 | `ReactNode` | `-` |
+| value | 选中的值 | `string \| number` | `-` |
+| disabled | 是否全部禁止选中 | `boolean` | `-` |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-selector-gap | 选择组之间的间距 | `$spacing-2` |
+| \--nutui-selector-columns | 选择组列数 | `-` |
+| \--nutui-selector-item-font-size | 字体大小 | `$font-size-2` |
+| \--nutui-selector-item-radius | 选择组圆角大小 | `$radius-1` |
+| \--nutui-selector-item-background-color | 选择项默认背景色 | `$color-background` |
+| \--nutui-selector-item-color | 选择项默认字体颜色 | `$color-title` |
+| \--nutui-selector-item-active-border-color | 选中项的边框颜色 | `$color-primary` |
+| \--nutui-selector-item-active-background-color | 选中项的背景颜色 | `$color-primary-background` |
+| \--nutui-selector-item-active-color | 选中项字体颜色 | `$color-primary` |
+| \--nutui-selector-item-active-icon-size | 选择组icon大小 | `$icon-font-size` |
+| \--nutui-selector-item-small-height | size为small高度 | `32px` |
+| \--nutui-selector-item-default-height| size为default的高度 | `36px` |
+| \--nutui-selector-item-large-height| size为large的高度 | `40px` |

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

@@ -0,0 +1,300 @@
+---
+order: 25
+demoUrl: 'https://frontend.mishudata.com/mobile/demo/#/dentry/pages/switch/index'
+group:
+    title: 数据录入
+    order: 5
+---
+
+# Switch 开关 <Badge>2.0.0</Badge>
+
+用来打开或关闭选项。
+
+## 引入
+
+```tsx
+import { Switch } from '@mijadesign/mjui-react-taro';
+```
+
+## 示例代码
+
+### 基础用法
+
+
+```tsx
+import React from 'react'
+import { Cell, Switch } from '@mijadesign/mjui-react-taro'
+
+const Demo1 = () => {
+  return (
+    <Cell>
+      <Switch defaultChecked />
+    </Cell>
+  )
+}
+export default Demo1
+
+```
+    
+### 禁用状态
+
+
+```tsx
+import { Space, Switch, Cell } from '@mijadesign/mjui-react-taro'
+import React from 'react'
+
+const Demo3 = () => {
+  return (
+    <Cell>
+      <Space>
+        <Switch defaultChecked disabled />
+        <Switch disabled />
+      </Space>
+    </Cell>
+  )
+}
+export default Demo3
+
+```
+    
+### 支持文字
+
+
+```tsx
+import React from 'react'
+import { Cell, Space, Switch } from '@mijadesign/mjui-react-taro'
+
+const Demo4 = () => {
+  return (
+    <Cell>
+      <Space>
+        <Switch defaultChecked activeText="开" inactiveText="关" />
+        <Switch defaultChecked activeText="开" inactiveText="关" disabled />
+        <Switch activeText="开" inactiveText="关" />
+        <Switch activeText="开" inactiveText="关" disabled />
+      </Space>
+    </Cell>
+  )
+}
+export default Demo4
+
+```
+    
+### 自定义颜色
+
+
+```tsx
+import React from 'react'
+import { Cell, Switch } from '@mijadesign/mjui-react-taro'
+
+const Demo7 = () => {
+  return (
+    <Cell>
+      <Switch
+        defaultChecked
+        style={{
+          '--nutui-switch-active-background-color': '#FF4949',
+          '--nutui-switch-inactive-line-background-color': '#ebebeb',
+        }}
+      />
+    </Cell>
+  )
+}
+export default Demo7
+
+```
+    
+### 受控
+
+
+```tsx
+import React, { useState } from 'react'
+import { Cell, Switch, Toast } from '@mijadesign/mjui-react-taro'
+
+const Demo2 = () => {
+  const [checkedAsync, setCheckedAsync] = useState(true)
+  const [value, setValue] = useState(false)
+  const [showToast, setShowToast] = useState(false)
+
+  const onChangeAsync = async (value: boolean) => {
+    setValue(value)
+    setShowToast(true)
+    const res = await new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(true)
+      }, 2000)
+    })
+    if (!res) {
+      // 主动抛出一个错误对象，用于中断组件 loading 态
+      throw new Error()
+    } else {
+      setCheckedAsync(value)
+    }
+  }
+  return (
+    <>
+      <Cell>
+        <Switch checked={checkedAsync} onChange={(value) => onChangeAsync(value)} />
+      </Cell>
+      <Toast
+        content={`2秒后异步触发 ${value}`}
+        visible={showToast}
+        onClose={() => {
+          setShowToast(false)
+        }}
+      />
+    </>
+  )
+}
+export default Demo2
+
+```
+    
+### loading 态受控
+
+
+```tsx
+import React, { useState } from 'react'
+import { Cell, Switch, Toast } from '@mijadesign/mjui-react-taro'
+
+const Demo8 = () => {
+  const [checkedAsync, setCheckedAsync] = useState(true)
+  const [value, setValue] = useState(false)
+  const [showToast, setShowToast] = useState(false)
+  const [externalLoading, setExternalLoading] = useState(false)
+  const mockRequest = (): Promise<void> => {
+    return new Promise((resolve) => {
+      setTimeout(() => {
+        resolve()
+      }, 2000)
+    })
+  }
+
+  const onChangeAsync = async (value: boolean) => {
+    setValue(value)
+    setShowToast(true)
+    await mockRequest()
+    setCheckedAsync(value)
+    // setExternalLoading(false)
+  }
+  return (
+    <>
+      <Cell>
+        <Switch
+          loading={externalLoading}
+          onLoadingChange={async (loading: boolean) => {
+            setExternalLoading(loading)
+          }}
+          checked={checkedAsync}
+          onChange={(value) => onChangeAsync(value)}
+        />
+      </Cell>
+      <Toast
+        content={`2秒后异步触发 ${value}`}
+        visible={showToast}
+        onClose={() => {
+          setShowToast(false)
+        }}
+      />
+    </>
+  )
+}
+export default Demo8
+
+```
+    
+### 支持 Icon
+
+
+```tsx
+import React from 'react'
+import { Cell, Space, Switch } from '@mijadesign/mjui-react-taro'
+import { Close, Selected } from '@mijadesign/mobile-icons'
+
+const Demo5 = () => {
+  return (
+    <Cell>
+      <Space>
+        <Switch defaultChecked activeText={<Selected />} inactiveText={<Close />} />
+        <Switch defaultChecked activeText={<Selected />} inactiveText={<Close />} disabled />
+        <Switch activeText={<Selected />} inactiveText={<Selected />} disabled />
+      </Space>
+    </Cell>
+  )
+}
+export default Demo5
+
+```
+    
+### onChange事件
+
+
+```tsx
+import React, { useState } from 'react'
+import { Cell, Switch, Toast } from '@mijadesign/mjui-react-taro'
+
+const Demo6 = () => {
+  const [value, setValue] = useState(false)
+  const [showToast, setShowToast] = useState(false)
+  const onChange = (value: boolean) => {
+    setValue(value)
+    setShowToast(true)
+  }
+  return (
+    <>
+      <Cell>
+        <Switch defaultChecked onChange={(value) => onChange(value)} />
+      </Cell>
+      <Toast
+        content={`触发了onChange事件，开关状态：${value}`}
+        visible={showToast}
+        onClose={() => {
+          setShowToast(false)
+        }}
+      />
+    </>
+  )
+}
+export default Demo6
+
+```
+    
+## Switch
+
+### Props
+
+| 属性            | 说明                                          | 类型                               | 默认值         |
+| --------------- | --------------------------------------------- | ---------------------------------- | -------------- |
+| defaultChecked  | 开关状态，非受控                              | `boolean`                          | `false`        |
+| checked         | 开关状态，受控                                | `boolean`                          | `false`        |
+| disabled        | 禁用状态                                      | `boolean`                          | `false`        |
+| activeText      | 打开时文字描述                                | `ReactNode`                        | `-`            |
+| inactiveText    | 关闭时文字描述                                | `ReactNode`                        | `-`            |
+| loadingIcon     | 控制加载状态的图标，传入空值时禁用 loading 态 | `ReactNode`                        | `<Loading1 />` |
+| loading         | loading 态，受控                              | `boolean`                          | `-`            |
+| onLoadingChange | 切换 loading 态时触发                         | `onLoadingChange:(value: boolean)` | `-`            |
+| onChange        | 切换开关时触发                                | `onChange:(value: boolean)`        | `-`            |
+
+## 主题定制
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](#/zh-CN/component/configprovider)。
+
+| 名称 | 说明 | 默认值 |
+| --- | --- | --- |
+| \--nutui-switch-active-background-color | 开关打开状态背景颜色 | `$color-primary` |
+| \--nutui-switch-inactive-background-color | 开关关闭状态背景颜色 | `$color-text-disabled` |
+| \--nutui-switch-active-disabled-background-color | 开关打开状态禁用的背景颜色 | `$color-primary-disabled-special` |
+| \--nutui-switch-inactive-disabled-background-color | 开关关闭状态禁用的背景颜色 | `$color-background` |
+| \--nutui-switch-inactive-line-bg-color | 开关关闭状态内部按钮线条颜色 | `#ffffff` |
+| \--nutui-switch-width | 开关宽度 | `46px` |
+| \--nutui-switch-height | 开关高度 | `28px` |
+| \--nutui-switch-line-height | 开关行高 | `28px` |
+| \--nutui-switch-border-radius | 开关圆角大小 | `$radius-circle` |
+| \--nutui-switch-border-width | 开关边框宽度 | `2px` |
+| \--nutui-switch-inside-border-radius | 开关内部按钮圆角大小 | `$radius-full` |
+| \--nutui-switch-inside-box-shadow | 开关内部按钮阴影 | `0px 2px 6px 0px rgba(0, 0, 0, 0.4)` |
+| \--nutui-switch-label-text-color | 开关内部文字颜色 | `$color-primary-text` |
+| \--nutui-switch-label-font-size | 开关内部文字大小 | `$font-size-s` |
+| \--nutui-switch-inactive-disabled-label-text-color | 开关关闭禁用内部文字颜色 | `$color-text-disabled` |