@ray-js/smart-ui 2.13.2-beta-0 → 2.13.2-beta-1

package/lib/radio/README.md

@@ -0,0 +1,423 @@
+---
+category: 数据录入
+---
+
+# Radio 单选框
+
+### 介绍
+
+在一组备选项中进行单选。
+
+### 引入
+
+```jsx
+import { Radio, RadioGroup } from '@ray-js/smart-ui';
+```
+
+## 代码演示
+
+### 基础用法
+
+通过`value`绑定值当前选中项的 name 。
+
+```jsx
+import { Radio, RadioGroup } from '@ray-js/smart-ui';
+import React, { useState } from 'react';
+
+export default function Demo() {
+  const [radio, setRadio] = useState('1');
+
+  const onChange = event => {
+    setRadio(event.detail);
+  };
+
+  return (
+    <RadioGroup value={radio} onChange={onChange}>
+      <Radio name="1" customClass="demo-radio-inline" />
+      <Radio name="2" customClass="demo-radio-inline" />
+    </RadioGroup>
+  );
+}
+```
+
+```css
+.demo-radio-inline {
+  margin: 10px 0 0 20px;
+  display: inline-block !important;
+}
+```
+
+### 禁用状态
+
+通过`disabled`属性禁止选项切换，在`Radio`上设置`disabled`可以禁用单个选项。
+
+```jsx
+import { Radio, RadioGroup } from '@ray-js/smart-ui';
+import React, { useState } from 'react';
+
+export default function Demo() {
+  const [radio, setRadio] = useState('1');
+
+  const onChange = event => {
+    setRadio(event.detail);
+  };
+
+  return (
+    <RadioGroup disabled value={radio} onChange={onChange}>
+      <Radio name="1" customClass="demo-radio-inline" />
+      <Radio name="2" customClass="demo-radio-inline" />
+    </RadioGroup>
+  );
+}
+```
+
+### 自定义形状
+
+将`shape`属性设置为`square`，单选框的形状会变成方形。
+
+```jsx
+import { Radio, RadioGroup } from '@ray-js/smart-ui';
+import React, { useState } from 'react';
+
+export default function Demo() {
+  const [radio, setRadio] = useState('1');
+
+  const onChange = event => {
+    setRadio(event.detail);
+  };
+
+  return (
+    <RadioGroup value={radio} onChange={onChange}>
+      <Radio name="1" shape="square" customClass="demo-radio-inline" />
+      <Radio name="2" shape="square" customClass="demo-radio-inline" />
+    </RadioGroup>
+  );
+}
+```
+
+### 自定义颜色
+
+通过`checkedColor`属性设置选中状态的图标颜色。
+
+```jsx
+import { Radio, RadioGroup } from '@ray-js/smart-ui';
+import React, { useState } from 'react';
+
+export default function Demo() {
+  const [radio, setRadio] = useState('1');
+
+  const onChange = event => {
+    setRadio(event.detail);
+  };
+
+  return (
+    <RadioGroup value={radio} onChange={onChange}>
+      <Radio name="1" customClass="demo-radio-inline" checkedColor="#10D0D0" />
+      <Radio name="2" customClass="demo-radio-inline" checkedColor="#10D0D0" />
+    </RadioGroup>
+  );
+}
+```
+
+### 自定义大小
+
+通过`iconSize`属性可以自定义图标的大小。
+
+```jsx
+import { Radio, RadioGroup } from '@ray-js/smart-ui';
+import React, { useState } from 'react';
+
+export default function Demo() {
+  const [radio, setRadio] = useState('1');
+
+  const onChange = event => {
+    setRadio(event.detail);
+  };
+
+  return (
+    <RadioGroup value={radio} onChange={onChange}>
+      <Radio name="1" iconSize="28px" customClass="demo-radio-inline" />
+      <Radio name="2" iconSize="28px" customClass="demo-radio-inline" />
+    </RadioGroup>
+  );
+}
+```
+
+### 自定义文本
+
+通过 children 子节点可以自定义文本内容。
+
+```jsx
+import { Radio, RadioGroup } from '@ray-js/smart-ui';
+import React, { useState } from 'react';
+
+export default function Demo() {
+  const [radio, setRadio] = useState('1');
+
+  const onChange = event => {
+    setRadio(event.detail);
+  };
+
+  return (
+    <RadioGroup value={radio} onChange={onChange}>
+      <Radio name="1">Radio 单选框 1</Radio>
+      <Radio name="2">Radio 单选框 2</Radio>
+    </RadioGroup>
+  );
+}
+```
+
+### 水平排列
+
+将`direction`属性设置为`horizontal`后，单选框组会变成水平排列。
+
+```jsx
+import { Radio, RadioGroup } from '@ray-js/smart-ui';
+import React, { useState } from 'react';
+
+export default function Demo() {
+  const [radio, setRadio] = useState('1');
+
+  const onChange = event => {
+    setRadio(event.detail);
+  };
+
+  return (
+    <RadioGroup value={radio} onChange={onChange} direction="horizontal">
+      <Radio name="1" customClass="demo-radio">单选框 1</Radio>
+      <Radio name="2" customClass="demo-radio">单选框 2</Radio>
+    </RadioGroup>
+  );
+}
+```
+
+```css
+.demo-radio {
+  margin: 10px 0 0 20px;
+}
+```
+
+### 自定义图标
+
+通过`icon`插槽自定义图标，需要设置`useIconSlot`属性。
+
+```jsx
+import { Radio, RadioGroup, Image } from '@ray-js/smart-ui';
+import React, { useState } from 'react';
+
+const icon = {
+  normal: 'https://images.tuyacn.com/content-platform/hestia/1729664215ebd89f13e54.png',
+  active: 'https://images.tuyacn.com/content-platform/hestia/1730877912e76cbdb7563.png',
+};
+
+export default function Demo() {
+  const [radio, setRadio] = useState('1');
+
+  const onChange = event => {
+    setRadio(event.detail);
+  };
+
+  return (
+    <RadioGroup value={radio} onChange={onChange}>
+      <Radio
+        name="1"
+        customClass="demo-radio"
+        useIconSlot
+        slot={{
+          icon: (
+            <Image
+              src={radio === '1' ? icon.active : icon.normal}
+              width="20px"
+              height="20px"
+              fit="cover"
+            />
+          ),
+        }}
+      >
+        自定义 Icon
+      </Radio>
+      <Radio
+        name="2"
+        customClass="demo-radio"
+        useIconSlot
+        slot={{
+          icon: (
+            <Image
+              src={radio === '2' ? icon.active : icon.normal}
+              width="20px"
+              height="20px"
+              fit="cover"
+            />
+          ),
+        }}
+      >
+        自定义 Icon
+      </Radio>
+    </RadioGroup>
+  );
+}
+```
+
+### 禁用文本点击
+
+通过设置`labelDisabled`属性可以禁用单选框文本点击。
+
+```jsx
+import { Radio, RadioGroup } from '@ray-js/smart-ui';
+import React, { useState } from 'react';
+
+export default function Demo() {
+  const [radioLabel, setRadio] = useState('1');
+
+  const onChange = event => {
+    setRadio(event.detail);
+  };
+
+  return (
+    <RadioGroup value={radioLabel} onChange={onChange}>
+      <Radio labelDisabled name="1">
+        单选框 1
+      </Radio>
+      <Radio label-disabled name="2">
+        单选框 2
+      </Radio>
+    </RadioGroup>
+  );
+}
+```
+
+### 与Cell组件一起使用
+
+此时你需要再引入`Cell`和`CellGroup`组件。
+
+```jsx
+import { Radio, RadioGroup, CellGroup, Cell } from '@ray-js/smart-ui';
+import React, { useState } from 'react';
+
+export default function Demo() {
+  const [radio, setRadio] = useState('1');
+
+  const onClick = event => {
+    const { name } = event.currentTarget.dataset;
+    setRadio(name);
+  };
+
+  return (
+    <RadioGroup value={radio}>
+      <CellGroup>
+        <Cell
+          title="Radio 1"
+          clickable
+          data-name="1"
+          slot={{ rightIcon: <Radio name="1" /> }}
+          onClick={onClick}
+        />
+        <Cell
+          title="Radio 2"
+          clickable
+          data-name="2"
+          slot={{ rightIcon: <Radio name="2" /> }}
+          onClick={onChange}
+        />
+      </CellGroup>
+    </RadioGroup>
+  );
+}
+```
+
+
+### 阻止默认的UI更新行为
+
+假如你的 `UI更新` 需要在特定情况下才允许更新，如 确认框/接口行为等才允许更新，可以开启这个选项。
+
+```jsx
+import { Radio, RadioGroup } from '@ray-js/smart-ui';
+import React, { useState } from 'react';
+import { showModal } from '@ray-js/ray';
+
+export default function Demo() {
+  const [radio, setRadio] = useState('1');
+
+    const onPreventDefaultChange = event => {
+    const value = event.detail;
+    showModal({
+      content: `onChange name: ${value}`,
+      showCancel: true,
+      success: (res) => {
+        if (res.confirm) {
+          setRadioPreventDefault(value);
+        }
+      }
+    })
+  }
+
+  return (
+    <RadioGroup value={radio} preventDefault onChange={}>
+      <Radio name="1">Radio 单选框 1</Radio>
+      <Radio name="2">Radio 单选框 2</Radio>
+    </RadioGroup>
+  );
+}
+```
+
+## API
+
+### RadioGroup Props
+
+| 参数               | 说明                            | 类型      | 默认值     |
+| ------------------ | ------------------------------- | --------- | ---------- |
+| direction | 排列方向，可选值为 `horizontal` | _string_ | `vertical` |
+| disabled | 是否禁用所有单选框 | _boolean_ | `false` |
+| name | 在表单内提交时的标识符 | _string_ | - |
+| value | 当前选中项的标识符 | _any_ | - |
+| preventDefault `v2.3.8` | 阻止默认的UI更新行为 | _boolean_ | `false` |
+
+### Radio Props
+
+| 参数           | 说明                      | 类型               | 默认值    |
+| -------------- | ------------------------- | ------------------ | --------- |
+| checkedColor | 选中状态颜色 | _string_ | `#1989fa` |
+| disabled | 是否为禁用状态 | _boolean_ | `false` |
+| iconSize | 图标大小，默认单位为`px` | _string \| number_ | `24px` |
+| labelDisabled | 是否禁用文本内容点击 | _boolean_ | `false` |
+| labelPosition | 文本位置，可选值为 `left` | _string_ | `right` |
+| name | 标识符 | _string_ | - |
+| shape | 形状，可选值为 `square` | _string_ | `round` |
+| useIconSlot | 是否使用 icon 插槽 | _boolean_ | `false` |
+
+### Radio Event
+
+| 事件名      | 说明                     | 回调参数          |
+| ----------- | ------------------------ | ----------------- |
+| onChange | 当绑定值变化时触发的事件 | 当前选中项的 name |
+
+### Radio 外部样式类
+
+| 类名         | 说明           |
+| ------------ | -------------- |
+| customClass | 根节点样式类 |
+| iconClass | 图标样式类 |
+| labelClass | 描述信息样式类 |
+
+### RadioGroup Event
+
+| 事件名      | 说明                     | 回调参数          |
+| ----------- | ------------------------ | ----------------- |
+| onChange | 当绑定值变化时触发的事件 | 当前选中项的 name |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --radio-size                  | _24px_                                 | 单选框的大小 |
+| --radio-border-color          | _var(--app-B6-N6, rgba(0, 0, 0, 0.2))_ | 单选框的边框颜色 |
+| --radio-border-radius         | _4px_                                  | 单选框的边框圆角 |
+| --radio-transition-duration   | _0.2s_                                 | 单选框的过渡持续时间 |
+| --radio-label-size            | _12px_                                 | 单选框标签的字体大小 |
+| --radio-label-margin          | _10px_                                 | 单选框标签的外边距 |
+| --radio-label-color           | _var(--app-B6-N1, rgba(0, 0, 0, 1))_   | 单选框标签的字体颜色 |
+| --radio-checked-icon-color    | _var(--app-M4, #1989fa)_               | 单选框选中状态的图标颜色 |
+| --radio-disabled-label-color  | _var(--app-B6-N5, rgba(0, 0, 0, 0.3))_ | 单选框禁用状态的标签颜色 |
+| --radio-disabled-opacity      | _0.3_                                  | 单选框禁用状态的透明度 |

package/lib/rate/README.md

@@ -0,0 +1,248 @@
+---
+category: 数据录入
+---
+
+# Rate 评分
+
+### 介绍
+
+用于对事物进行评级操作。
+
+### 引入
+
+```jsx
+import { Rate } from '@ray-js/smart-ui';
+```
+
+## 代码演示
+
+### 基础用法
+
+```jsx
+import { showToast } from '@ray-js/ray';
+import { Rate } from '@ray-js/smart-ui';
+import React from 'react';
+
+export default function Demo() {
+  const [value, setValue] = React.useState(3);
+  const onChange = event => {
+    setValue(event.detail);
+    showToast({
+      icon: 'none',
+      title: `当前值：${event.detail}`,
+    });
+  };
+
+  return <Rate value={value} onChange={onChange} />;
+}
+```
+
+### 自定义图标
+
+```jsx
+import { showToast } from '@ray-js/ray';
+import { Rate } from '@ray-js/smart-ui';
+import React, { useState } from 'react';
+
+import IcloudIcon from '@tuya-miniapp/icons/dist/svg/Icloud';
+import XmarkIcloudIcon from '@tuya-miniapp/icons/dist/svg/XmarkIcloud';
+
+const icon = IcloudIcon;
+const voidIcon = XmarkIcloudIcon;
+
+export default function Demo() {
+  const [value, setValue] = useState(3);
+  const onChange = event => {
+    setValue(event.detail);
+    showToast({
+      icon: 'none',
+      title: `当前值：${event.detail}`,
+    });
+  };
+
+  return <Rate value={value} icon={icon} voidIcon={voidIcon} onChange={onChange} />;
+}
+```
+
+### 自定义样式
+
+```jsx
+import { showToast } from '@ray-js/ray';
+import { Rate } from '@ray-js/smart-ui';
+import React from 'react';
+
+export default function Demo() {
+  const [value, setValue] = React.useState(3);
+  const onChange = event => {
+    setValue(event.detail);
+    showToast({
+      icon: 'none',
+      title: `当前值：${event.detail}`,
+    });
+  };
+
+  return <Rate value={value} size={25} color="#ffd21e" voidColor="#eee" onChange={onChange} />
+}
+```
+
+### 半星
+
+```jsx
+import { showToast } from '@ray-js/ray';
+import { Rate } from '@ray-js/smart-ui';
+import React, { useState } from 'react';
+
+import IcloudIcon from '@tuya-miniapp/icons/dist/svg/Icloud';
+import XmarkIcloudIcon from '@tuya-miniapp/icons/dist/svg/XmarkIcloud';
+
+const icon = IcloudIcon;
+const voidIcon = XmarkIcloudIcon;
+
+export default function Demo() {
+  const [value, setValue] = useState(2.5);
+
+  const onChange = event => {
+    setValue(event.detail);
+    showToast({
+      icon: 'none',
+      title: `当前值：${event.detail}`,
+    });
+  };
+
+  return <Rate value={value} allowHalf voidIcon={voidIcon} voidColor="#eee" onChange={onChange} />;
+}
+```
+
+### 自定义数量
+
+```jsx
+import { showToast } from '@ray-js/ray';
+import { Rate } from '@ray-js/smart-ui';
+import React from 'react';
+
+export default function Demo() {
+  const [value, setValue] = React.useState(3);
+  const onChange = event => {
+    setValue(event.detail);
+    showToast({
+      icon: 'none',
+      title: `当前值：${event.detail}`,
+    });
+  };
+
+  return <Rate value={value} count={6} onChange={onChange} />
+}
+```
+
+### 禁用状态
+
+```jsx
+import { showToast } from '@ray-js/ray';
+import { Rate } from '@ray-js/smart-ui';
+import React from 'react';
+
+export default function Demo() {
+  const [value, setValue] = React.useState(3);
+  const onChange = event => {
+    setValue(event.detail);
+    showToast({
+      icon: 'none',
+      title: `当前值：${event.detail}`,
+    });
+  };
+
+  return <Rate disabled value={value} onChange={onChange} />
+}
+```
+
+### 只读状态
+
+```jsx
+import { showToast } from '@ray-js/ray';
+import { Rate } from '@ray-js/smart-ui';
+import React from 'react';
+
+export default function Demo() {
+  const [value, setValue] = React.useState(3);
+  const onChange = event => {
+    setValue(event.detail);
+    showToast({
+      icon: 'none',
+      title: `当前值：${event.detail}`,
+    });
+  };
+
+  return <Rate readonly value={value} onChange={onChange} />
+}
+```
+
+### 监听 change 事件
+
+评分变化时，会触发 `change` 事件。
+
+```jsx
+import { showToast } from '@ray-js/ray';
+import { Rate } from '@ray-js/smart-ui';
+import React, { useState } from 'react';
+
+export default function Demo() {
+  const [value, setValue] = useState(2);
+
+  const onChange = event => {
+    setValue(event.detail);
+    showToast({
+      icon: 'none',
+      title: `当前值：${event.detail}`,
+    });
+  };
+
+  return <Rate value={value} onChange={onChange} />;
+}
+```
+
+## API
+
+### Props
+
+| 参数           | 说明                                                       | 类型               | 默认值                |
+| -------------- | ---------------------------------------------------------- | ------------------ | --------------------- |
+| allowHalf | 是否允许半选 | _boolean_ | `false` |
+| color | 选中时的颜色 | _string_ | `#ffd21e` |
+| count | 图标总数 | _number_ | `5` |
+| disabled | 是否禁用评分 | _boolean_ | `false` |
+| disabledColor | 禁用时的颜色 | _string_ | `#bdbdbd` |
+| gutter | 图标间距，默认单位为 `px` | _string \| number_ | `4px` |
+| icon | 选中时的图标svg值或图片链接，可选值见 [Icon 组件](/material/smartui?comId=icon) | _string_ | `CheckmarkCircle` |
+| name | 在表单内提交时的标识符 | _string_ | - |
+| readonly | 是否为只读状态 | _boolean_ | `false` |
+| size | 图标大小，默认单位为 `px` | _string \| number_ | `20px` |
+| touchable | 是否可以通过滑动手势选择评分 | _boolean_ | `true` |
+| value | 当前分值 | _number_ | - |
+| voidColor | 未选中时的颜色 | _string_ | `#c7c7c7` |
+| voidIcon | 未选中时的图标svg值或图片链接，可选值见 [Icon 组件](/material/smartui?comId=icon) | _string_ | `CheckmarkCircleVoid` |
+
+### Events
+
+| 事件名称    | 说明                     | 回调参数              |
+| ----------- | ------------------------ | --------------------- |
+| onChange | 当前分值变化时触发的事件 | event.detail:当前分值 |
+
+### 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| customClass | 根节点样式类 |
+| iconClass | 图标样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --rate-horizontal-padding     | _2px_                                  | 评价图标水平内边距 |
+| --rate-icon-size              | _20px_                                 | 评价图标大小         |
+| --rate-icon-void-color        | _#c8c9cc_                              | 空状态图标颜色      |
+| --rate-icon-full-color        | _#ee0a24_                              | 满状态图标颜色      |
+| --rate-icon-disabled-color    | _#c8c9cc_                              | 禁用状态图标颜色    |
+| --rate-icon-gutter            | _4px_                                  | 图标间距             |