@tuya-miniapp/smart-ui 2.3.8-beta-5 → 2.3.8

package/packages/radio/README.en.md

@@ -1,305 +0,0 @@
----
-category: Data Entry
----
-
-# Radio
-
-### Introduction
-
-Single selection from a group of options.
-
-### Import
-
-Import the component in `app.json` or `index.json`, as detailed in [Quick Start](/material/smartui?comId=help-getting-started&appType=miniapp).
-
-```json
-"usingComponents": {
-  "smart-radio": "@tuya-miniapp/smart-ui/lib/radio/index",
-  "smart-radio-group": "@tuya-miniapp/smart-ui/lib/radio-group/index"
-}
-```
-
-## Code Examples
-
-### Basic Usage
-
-Bind the current selected item's name with `value`.
-
-```html
-<smart-radio-group value="{{ radio }}" bind:change="onChange">
-  <smart-radio name="1" custom-class="demo-radio-inline" />
-  <smart-radio name="2" custom-class="demo-radio-inline" />
-</smart-radio-group>
-```
-
-```css
-.demo-radio-inline {
-  margin: 10px 0 0 20px;
-  display: inline-block !important;
-}
-```
-
-```js
-Page({
-  data: {
-    radio: '1',
-  },
-
-  onChange(event) {
-    this.setData({
-      radio: event.detail,
-    });
-  },
-});
-```
-
-### Disabled State
-
-Use the `disabled` attribute to disable switching options. Setting `disabled` on `Radio` disables individual options.
-
-```html
-<smart-radio-group value="{{ radio }}" disabled bind:change="onChange">
-  <smart-radio name="1" custom-class="demo-radio-inline" />
-  <smart-radio name="2" custom-class="demo-radio-inline" />
-</smart-radio-group>
-```
-
-### Custom Shape
-
-Set the `shape` attribute to `square` to change the radio shape to a square.
-
-```html
-<smart-radio-group value="{{ radio }}" bind:change="onChange">
-  <smart-radio name="1" shape="square" custom-class="demo-radio-inline" />
-  <smart-radio name="2" shape="square" custom-class="demo-radio-inline" />
-</smart-radio-group>
-```
-
-### Custom Color
-
-Set the color of the icon in the checked state using the `checked-color` attribute.
-
-```html
-<smart-radio-group value="{{ radio }}" bind:change="onChange">
-  <smart-radio name="1" custom-class="demo-radio-inline" checked-color="#10D0D0" />
-  <smart-radio name="2" custom-class="demo-radio-inline" checked-color="#10D0D0" />
-</smart-radio-group>
-```
-
-### Custom Size
-
-Customize the icon size using the `icon-size` attribute.
-
-```html
-<smart-radio-group value="{{ radio }}" bind:change="onChange">
-  <smart-radio name="1" icon-size="28px" custom-class="demo-radio-inline" />
-  <smart-radio name="2" icon-size="28px" custom-class="demo-radio-inline" />
-</smart-radio-group>
-```
-
-### Custom Text
-
-Customize the text content through the slot child nodes.
-
-```html
-<smart-radio-group value="{{ radio }}" bind:change="onChange">
-  <smart-radio name="1">Radio 1</smart-radio>
-  <smart-radio name="2">Radio 2</smart-radio>
-</smart-radio-group>
-```
-
-### Horizontal Arrangement
-
-
-Set the `direction` attribute to `horizontal` to change the radio group to a horizontal arrangement.
-
-```html
-<smart-radio-group
-  value="{{ radio }}"
-  bind:change="onChange"
-  direction="horizontal"
->
-  <smart-radio name="1">Radio 1</smart-radio>
-  <smart-radio name="2">Radio 2</smart-radio>
-</smart-radio-group>
-```
-
-### Custom Icons
-
-Customize the icon through the `icon` slot, and set the `use-icon-slot` attribute.
-
-```html
-<smart-radio-group value="{{ radio }}" bind:change="onChange">
-  <smart-radio use-icon-slot value="{{ radio }}" name="1">
-    Custom Icon
-    <image slot="icon" src="{{ radio === '1' ? icon.active : icon.normal }}" />
-  </smart-radio>
-  <smart-radio use-icon-slot value="{{ radio }}" name="2">
-    Custom Icon
-    <image slot="icon" src="{{ radio === '2' ? icon.active : icon.normal }}" />
-  </smart-radio>
-</smart-radio-group>
-```
-
-```js
-Page({
-  data: {
-    radio: true,
-    icon: {
-      normal: 'https://images.tuyacn.com/content-platform/hestia/1729664215ebd89f13e54.png',
-      active: 'https://images.tuyacn.com/content-platform/hestia/1730877912e76cbdb7563.png',
-    },
-  },
-  onChange(event) {
-    this.setData({
-      radio: event.detail,
-    });
-  },
-});
-```
-
-### Disable Text Click
-
-Disable radio text click by setting the `label-disabled` attribute.
-
-```html
-<smart-radio-group value="{{ radio }}" bind:change="onChange">
-  <smart-radio name="1" label-disabled>Radio 1</smart-radio>
-  <smart-radio name="2" label-disabled>Radio 2</smart-radio>
-</smart-radio-group>
-```
-
-### Using With Cell Component
-
-In this case, you need to import the `Cell` and `CellGroup` components.
-
-```html
-<smart-radio-group value="{{ radio }}" bind:change="onChange">
-  <smart-cell-group>
-    <smart-cell title="Radio 1" clickable data-name="1" bind:click="onClick">
-      <smart-radio slot="right-icon" name="1" />
-    </smart-cell>
-    <smart-cell title="Radio 2" clickable data-name="2" bind:click="onClick">
-      <smart-radio slot="right-icon" name="2" />
-    </smart-cell>
-  </smart-cell-group>
-</smart-radio-group>
-```
-
-```js
-Page({
-  data: {
-    radio: '1',
-  },
-
-  onChange(event) {
-    this.setData({
-      radio: event.detail,
-    });
-  },
-
-  onClick(event) {
-    const { name } = event.currentTarget.dataset;
-    this.setData({
-      radio: name,
-    });
-  },
-});
-```
-
-
-
-### prevent default UI Action
-
-if `UI Update` Need Custom Action, you can set `prevent-default` with it!
-
-```html
-<smart-radio-group prevent-default value="{{ radio }}" bind:change="onChange">
-    <smart-radio name="1">1</smart-radio>
-    <smart-radio name="2">2</smart-radio>
-  </smart-radio-group>
-```
-
-```js
-Page({
-  data: {
-    radio: '1',
-  },
-
-  onChange(event) {
-    ty.showModal({
-      content: `onChange name: ${event.detail}`,
-      showCancel: true,
-      success: (res) => {
-        if (res.confirm) {
-          this.setData({
-            radio: event.detail
-          })
-        }
-      }
-    })
-  },
-});
-```
-
-## API
-
-### RadioGroup Props
-
-| Attribute              | Description                             | Type      | Default   |
-| ---------------------- | --------------------------------------- | --------- | ---------- |
-| direction     | Arrangement direction, optional `horizontal` | _string_  | `vertical` |
-| disabled               | Whether to disable all radios           | _boolean_ | `false`    |
-| name                   | Identifier for submission in a form      | _string_  | -          |
-| value                  | Identifier for the currently selected item | _any_     | -          |
-| prevent-default `v2.3.8` | prevent default ui update |_boolean_|`false`    |
-
-### Radio Props
-
-| Attribute          | Description                    | Type               | Default    |
-| ------------------ | -----------------------------  | ------------------ | ---------  |
-| checked-color      | Checked state color            | _string_           | `#1989fa`  |
-| disabled           | Whether it is in disabled state | _boolean_          | `false`    |
-| icon-size          | Icon size, default unit is `px` | _string \| number_ | `24px`     |
-| label-disabled     | Whether to disable text click   | _boolean_          | `false`    |
-| label-position     | Text position, optional `left`  | _string_           | `right`    |
-| name               | Identifier                     | _string_           | -          |
-| shape              | Shape, optional `square`       | _string_           | `round`    |
-| use-icon-slot      | Whether to use icon slot       | _boolean_          | `false`    |
-
-### Radio Event
-
-| Event Name   | Description                       | Callback Parameters   |
-| ------------ | --------------------------------- | --------------------- |
-| bind:change  | Event triggered when the bound value changes | Name of the currently selected item |
-
-### Radio External Style Class
-
-| Class Name   | Description                       |
-| ------------ | --------------------------------- |
-| custom-class | Root Node Style Class             |
-| icon-class   | Icon Style Class                  |
-| label-class  | Description Information Style Class |
-
-### RadioGroup Event
-
-| Event Name   | Description                       | Callback Parameters   |
-| ------------ | --------------------------------- | --------------------- |
-| bind:change  | Event triggered when the bound value changes | Name of the currently selected item |
-
-### Style Variables
-
-The component offers the following CSS variables for custom styles. For usage, please refer to the [ConfigProvider component](/material/smartui?comId=config-provider&appType=miniapp).
-
-| Name                          | Default Value                            | Description |
-| ----------------------------- | ---------------------------------------- | ----------- |
-| --radio-size | 24px | Size of the radio button |
-| --radio-border-color | var(--app-B6-N6, rgba(0, 0, 0, 0.2)) | Border color of the radio button |
-| --radio-border-radius | 4px | Border radius of the radio button |
-| --radio-transition-duration | 0.2s | Transition duration of the radio button |
-| --radio-label-size | 12px | Font size of the radio button label |
-| --radio-label-margin | 10px | Margin of the radio button label |
-| --radio-label-color | var(--app-B6-N1, rgba(0, 0, 0, 1)) | Font color of the radio button label |
-| --radio-checked-icon-color | var(--app-M4, #1989fa) | Icon color when the radio button is checked |
-| --radio-disabled-label-color | var(--app-B6-N5, rgba(0, 0, 0, 0.3)) | Label color when the radio button is disabled |
-| --radio-disabled-opacity | 0.3 | Opacity when the radio button is disabled |

package/packages/radio/README.md

@@ -1,303 +0,0 @@
----
-category: 数据录入
----
-
-# Radio 单选框
-
-### 介绍
-
-在一组备选项中进行单选。
-
-### 引入
-
-在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
-
-```json
-"usingComponents": {
-  "smart-radio": "@tuya-miniapp/smart-ui/lib/radio/index",
-  "smart-radio-group": "@tuya-miniapp/smart-ui/lib/radio-group/index"
-}
-```
-
-## 代码演示
-
-### 基础用法
-
-通过`value`绑定值当前选中项的 name 。
-
-```html
-<smart-radio-group value="{{ radio }}" bind:change="onChange">
-  <smart-radio name="1" custom-class="demo-radio-inline" />
-  <smart-radio name="2" custom-class="demo-radio-inline" />
-</smart-radio-group>
-```
-
-```css
-.demo-radio-inline {
-  margin: 10px 0 0 20px;
-  display: inline-block !important;
-}
-```
-
-```js
-Page({
-  data: {
-    radio: '1',
-  },
-
-  onChange(event) {
-    this.setData({
-      radio: event.detail,
-    });
-  },
-});
-```
-
-### 禁用状态
-
-通过`disabled`属性禁止选项切换，在`Radio`上设置`diabled`可以禁用单个选项。
-
-```html
-<smart-radio-group value="{{ radio }}" disabled bind:change="onChange">
-  <smart-radio name="1" custom-class="demo-radio-inline" />
-  <smart-radio name="2" custom-class="demo-radio-inline" />
-</smart-radio-group>
-```
-
-### 自定义形状
-
-将 `shape` 属性设置为 `square`，单选框的形状会变成方形。
-
-```html
-<smart-radio-group value="{{ radio }}" bind:change="onChange">
-  <smart-radio name="1" shape="square" custom-class="demo-radio-inline" />
-  <smart-radio name="2" shape="square" custom-class="demo-radio-inline" />
-</smart-radio-group>
-```
-
-### 自定义颜色
-
-通过 `checked-color` 属性设置选中状态的图标颜色。
-
-```html
-<smart-radio-group value="{{ radio }}" bind:change="onChange">
-  <smart-radio name="1" custom-class="demo-radio-inline" checked-color="#10D0D0" />
-  <smart-radio name="2" custom-class="demo-radio-inline" checked-color="#10D0D0" />
-</smart-radio-group>
-```
-
-### 自定义大小
-
-通过 `icon-size` 属性可以自定义图标的大小。
-
-```html
-<smart-radio-group value="{{ radio }}" bind:change="onChange">
-  <smart-radio name="1" icon-size="28px" custom-class="demo-radio-inline" />
-  <smart-radio name="2" icon-size="28px" custom-class="demo-radio-inline" />
-</smart-radio-group>
-```
-
-### 自定义文本
-
-通过 slot 插槽子节点可以自定义文本内容。
-
-```html
-<smart-radio-group value="{{ radio }}" bind:change="onChange">
-  <smart-radio name="1">Radio 单选框 1</smart-radio>
-  <smart-radio name="2">Radio 单选框 2</smart-radio>
-</smart-radio-group>
-```
-
-### 水平排列
-
-将`direction`属性设置为`horizontal`后，单选框组会变成水平排列。
-
-```html
-<smart-radio-group
-  value="{{ radio }}"
-  bind:change="onChange"
-  direction="horizontal"
->
-  <smart-radio name="1">Radio 单选框 1</smart-radio>
-  <smart-radio name="2">Radio 单选框 2</smart-radio>
-</smart-radio-group>
-```
-
-### 自定义图标
-
-通过 `icon` 插槽自定义图标，需要设置 `use-icon-slot` 属性。
-
-```html
-<smart-radio-group value="{{ radio }}" bind:change="onChange">
-  <smart-radio use-icon-slot value="{{ radio }}" name="1">
-    自定义图标
-    <image slot="icon" src="{{ radio === '1' ? icon.active : icon.normal }}" />
-  </smart-radio>
-  <smart-radio use-icon-slot value="{{ radio }}" name="2">
-    自定义图标
-    <image slot="icon" src="{{ radio === '2' ? icon.active : icon.normal }}" />
-  </smart-radio>
-</smart-radio-group>
-```
-
-```js
-Page({
-  data: {
-    radio: true,
-    icon: {
-      normal: 'https://images.tuyacn.com/content-platform/hestia/1729664215ebd89f13e54.png',
-      active: 'https://images.tuyacn.com/content-platform/hestia/1730877912e76cbdb7563.png',
-    },
-  },
-  onChange(event) {
-    this.setData({
-      radio: event.detail,
-    });
-  },
-});
-```
-
-### 禁用文本点击
-
-通过设置`label-disabled`属性可以禁用单选框文本点击。
-
-```html
-<smart-radio-group value="{{ radio }}" bind:change="onChange">
-  <smart-radio name="1" label-disabled>单选框 1</smart-radio>
-  <smart-radio name="2" label-disabled>单选框 2</smart-radio>
-</smart-radio-group>
-```
-
-### 与 Cell 组件一起使用
-
-此时你需要再引入`Cell`和`CellGroup`组件。
-
-```html
-<smart-radio-group value="{{ radio }}" bind:change="onChange">
-  <smart-cell-group>
-    <smart-cell title="单选框 1" clickable data-name="1" bind:click="onClick">
-      <smart-radio slot="right-icon" name="1" />
-    </smart-cell>
-    <smart-cell title="单选框 2" clickable data-name="2" bind:click="onClick">
-      <smart-radio slot="right-icon" name="2" />
-    </smart-cell>
-  </smart-cell-group>
-</smart-radio-group>
-```
-
-```js
-Page({
-  data: {
-    radio: '1',
-  },
-
-  onChange(event) {
-    this.setData({
-      radio: event.detail,
-    });
-  },
-
-  onClick(event) {
-    const { name } = event.currentTarget.dataset;
-    this.setData({
-      radio: name,
-    });
-  },
-});
-```
-
-
-### 阻止默认的UI更新行为
-
-假如你的 `UI更新` 需要在特定情况下才允许更新，如 确认框/接口行为等才允许更新，可以开启 `prevent-default` 这个选项。
-
-```html
-<smart-radio-group prevent-default value="{{ radio }}" bind:change="onChange">
-    <smart-radio name="1">1</smart-radio>
-    <smart-radio name="2">2</smart-radio>
-  </smart-radio-group>
-```
-
-```js
-Page({
-  data: {
-    radio: '1',
-  },
-
-  onChange(event) {
-    ty.showModal({
-      content: `onChange name: ${event.detail}`,
-      showCancel: true,
-      success: (res) => {
-        if (res.confirm) {
-          this.setData({
-            radio: event.detail
-          })
-        }
-      }
-    })
-  },
-});
-```
-
-## API
-
-### RadioGroup Props
-
-| 参数               | 说明                            | 类型      | 默认值     |
-| ------------------ | ------------------------------- | --------- | ---------- |
-| direction | 排列方向，可选值为 `horizontal` | _string_  | `vertical` |
-| disabled           | 是否禁用所有单选框              | _boolean_ | `false`    |
-| name               | 在表单内提交时的标识符          | _string_  | -          |
-| value              | 当前选中项的标识符              | _any_     | -          |
-| prevent-default `v2.3.8`| 阻止默认的UI更新行为|_boolean_|`false`    |
-
-### Radio Props
-
-| 参数           | 说明                      | 类型               | 默认值    |
-| -------------- | ------------------------- | ------------------ | --------- |
-| checked-color  | 选中状态颜色              | _string_           | `#1989fa` |
-| disabled       | 是否为禁用状态            | _boolean_          | `false`   |
-| icon-size      | 图标大小，默认单位为`px`  | _string \| number_ | `24px`    |
-| label-disabled | 是否禁用文本内容点击      | _boolean_          | `false`   |
-| label-position | 文本位置，可选值为 `left` | _string_           | `right`   |
-| name           | 标识符                    | _string_           | -         |
-| shape          | 形状，可选值为 `square`   | _string_           | `round`   |
-| use-icon-slot  | 是否使用 icon 插槽        | _boolean_          | `false`   |
-
-### Radio Event
-
-| 事件名      | 说明                     | 回调参数          |
-| ----------- | ------------------------ | ----------------- |
-| bind:change | 当绑定值变化时触发的事件 | 当前选中项的 name |
-
-### Radio 外部样式类
-
-| 类名         | 说明           |
-| ------------ | -------------- |
-| custom-class | 根节点样式类   |
-| icon-class   | 图标样式类     |
-| label-class  | 描述信息样式类 |
-
-### RadioGroup Event
-
-| 事件名      | 说明                     | 回调参数          |
-| ----------- | ------------------------ | ----------------- |
-| bind:change | 当绑定值变化时触发的事件 | 当前选中项的 name |
-
-### 样式变量
-
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
-
-| 名称                          | 默认值                                 | 描述 |
-| ----------------------------- | -------------------------------------- | ---- |
-| --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/packages/radio/demo/index.json

@@ -1,10 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {
-    "smart-radio": "../../radio/index",
-    "smart-radio-group": "../../radio-group/index",
-    "smart-cell": "../../cell/index",
-    "smart-cell-group": "../../cell-group/index",
-    "demo-block": "../../../example/components/demo-block/index"
-  }
-}

package/packages/radio/demo/index.less

@@ -1,12 +0,0 @@
-.demo-radio {
-  margin: 10px 0 0 20px;
-}
-
-.demo-radio-inline {
-  margin: 10px 0 0 20px;
-  display: inline-block !important;
-}
-
-.icon {
-  width: 20px;
-}

package/packages/radio/demo/index.ts

@@ -1,51 +0,0 @@
-import { SmartComponent } from '../../common/component';
-
-SmartComponent({
-  data: {
-    radioBasic: '1',
-    radioDisabled: '2',
-    radioColor: '1',
-    radioText: '1',
-    radioHoriz: '1',
-    radioIcon: '1',
-    radioSize: '1',
-    radioLabel: '1',
-    radioShape: '1',
-    radioCell: '1',
-    radioPreventDefault: "1",
-    icon: {
-      normal:
-        'https://images.tuyacn.com/content-platform/hestia/1729664215ebd89f13e54.png',
-      active:
-        'https://images.tuyacn.com/content-platform/hestia/1730877912e76cbdb7563.png',
-    },
-  },
-
-  methods: {
-    onChange(event) {
-      const { key } = event.currentTarget.dataset;
-      this.setData({ [key]: event.detail });
-    },
-
-    onClick(event) {
-      const { name } = event.currentTarget.dataset;
-      this.setData({
-        radioCell: name,
-      });
-    },
-    onPreventDefaultChange(event) {
-      wx.showModal({
-        content: `onChange name: ${event.detail}`,
-        showCancel: true,
-        success: (res) => {
-          if (res.confirm) {
-            this.setData({
-              radioPreventDefault: event.detail
-            })
-          }
-        }
-      })
-
-    }
-  },
-});