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

package/packages/radio/test/demo.spec.ts

@@ -1,11 +0,0 @@
-import path from 'path';
-import simulate from 'miniprogram-simulate';
-
-test('should render demo and match snapshot', () => {
-  const id = simulate.load(path.resolve(__dirname, '../demo/index'), {
-    rootPath: path.resolve(__dirname, '../../'),
-  });
-  const comp = simulate.render(id);
-  comp.attach(document.createElement('parent-wrapper'));
-  expect(comp.toJSON()).toMatchSnapshot();
-});

package/packages/radio-group/index.json

@@ -1,3 +0,0 @@
-{
-  "component": true
-}

package/packages/radio-group/index.less

@@ -1,6 +0,0 @@
-.smart-radio-group {
-  &--horizontal {
-    display: flex;
-    flex-wrap: wrap;
-  }
-}

package/packages/radio-group/index.ts

@@ -1,31 +0,0 @@
-import { SmartComponent } from '../common/component';
-import { useChildren } from '../common/relation';
-
-SmartComponent({
-  field: true,
-
-  relation: useChildren('radio'),
-
-  props: {
-    value: {
-      type: null,
-      observer: 'updateChildren',
-    },
-    preventDefault: {
-      type: Boolean,
-      value: false,
-      observer: 'updateChildren',
-    },
-    direction: String,
-    disabled: {
-      type: Boolean,
-      observer: 'updateChildren',
-    },
-  },
-
-  methods: {
-    updateChildren() {
-      this.children.forEach(child => child.updateFromParent());
-    },
-  },
-});

package/packages/radio-group/index.wxml

@@ -1,5 +0,0 @@
-<wxs src="../wxs/utils.wxs" module="utils" />
-
-<view class="{{ utils.bem('radio-group', [direction]) }}">
-  <slot></slot>
-</view>

package/packages/rate/README.en.md

@@ -1,176 +0,0 @@
----
-category: Data Entry
----
-
-# Rate
-
-### Introduction
-
-Used for rating items.
-
-### Import
-
-Introduce the component in `app.json` or `index.json`, see [Quick Start](/material/smartui?comId=help-getting-started&appType=miniapp) for details.
-
-```json
-"usingComponents": {
-  "smart-rate": "@tuya-miniapp/smart-ui/lib/rate/index"
-}
-```
-
-## Code Examples
-
-### Basic Usage
-
-```html
-<smart-rate value="{{ value }}" bind:change="onChange" />
-```
-
-```javascript
-Page({
-  data: {
-    value: 3,
-  },
-
-  onChange(event) {
-    this.setData({
-      value: event.detail,
-    });
-  },
-});
-```
-
-### Custom Icon
-
-```html
-<smart-rate
-  value="{{ value }}"
-  icon="like"
-  void-icon="like-o"
-  bind:change="onChange"
-/>
-```
-
-### Custom Style
-
-```html
-<smart-rate
-  value="{{ value }}"
-  size="{{ 25 }}"
-  color="#ffd21e"
-  void-icon="star"
-  void-color="#eee"
-  bind:change="onChange"
-/>
-```
-
-### Half Star
-
-```html
-<smart-rate
-  value="{{ value }}"
-  allow-half
-  void-icon="star"
-  void-color="#eee"
-  bind:change="onChange"
-/>
-```
-
-```javascript
-Page({
-  data: {
-    value: 2.5,
-  },
-
-  onChange(event) {
-    this.setData({
-      value: event.detail,
-    });
-  },
-});
-```
-
-### Custom Count
-
-```html
-<smart-rate value="{{ value }}" count="{{ 6 }}" bind:change="onChange" />
-```
-
-### Disabled State
-
-```html
-<smart-rate disabled value="{{ value }}" bind:change="onChange" />
-```
-
-### Read-Only State
-
-```html
-<smart-rate readonly value="{{ value }}" bind:change="onChange" />
-```
-
-### Listen to Change Event
-
-A `change` event is triggered when the rating changes.
-
-```html
-<smart-rate value="{{ value }}" bind:change="onChange" />
-```
-
-```javascript
-Page({
-  data: {
-    value: 2,
-  },
-
-  onChange(event) {
-    Toast('Current value: ' + event.detail);
-  },
-});
-```
-
-## API
-
-### Props
-
-| Parameter      | Description                                               | Type               | Default              |
-| -------------- | ---------------------------------------------------------- | ------------------ | --------------------- |
-| allow-half     | Whether to allow half selection                            | _boolean_          | `false`               |
-| color          | Color when selected                                        | _string_           | `#ffd21e`             |
-| count          | Total number of icons                                      | _number_           | `5`                   |
-| disabled       | Whether to disable rating                                  | _boolean_          | `false`               |
-| disabled-color | Color when disabled                                        | _string_           | `#bdbdbd`             |
-| gutter         | Icon spacing, default unit is `px`                         | _string \| number_ | `4px`                 |
-| icon           | Icon svg value or image link when selected, see [Icon Component](/material/smartui?comId=icon&appType=miniapp) for options | _string_           | `CheckmarkCircle`     |
-| name           | Identifier for form submission                             | _string_           | -                     |
-| readonly       | Whether it is in read-only state                           | _boolean_          | `false`               |
-| size           | Icon size, default unit is `px`                            | _string \| number_ | `20px`                |
-| touchable      | Whether selection can be made via swipe gesture            | _boolean_          | `true`                |
-| value          | Current rating value                                       | _number_           | -                     |
-| void-color     | Color when not selected                                    | _string_           | `#c7c7c7`             |
-| void-icon      | Icon svg value or image link when not selected, see [Icon Component](/material/smartui?comId=icon&appType=miniapp) for options | _string_           | `CheckmarkCircleVoid` |
-
-### Events
-
-| Event Name   | Description                | Callback Parameters  |
-| ------------ | -------------------------- | --------------------- |
-| bind:change  | Event triggered when the rating value changes | event.detail: Current rating value |
-
-### External Style Classes
-
-| Class Name    | Description       |
-| ------------- | ----------------- |
-| custom-class  | Root node style class |
-| icon-class    | Icon style class  |
-### Style Variables
-
-The component provides the following CSS variables that can be used for custom styles. For usage, refer to the [ConfigProvider Component](/material/smartui?comId=config-provider&appType=miniapp).
-
-| Name                          | Default Value                           | Description              |
-| ----------------------------- | ---------------------------------------- | ------------------------ |
-| --rate-horizontal-padding     | _2px_                                    | Rating icon horizontal padding |
-| --rate-icon-size              | _20px_                                   | Rating icon size         |
-| --rate-icon-void-color        | _#c8c9cc_                                | Void state icon color    |
-| --rate-icon-full-color        | _#ee0a24_                                | Full state icon color    |
-| --rate-icon-disabled-color    | _#c8c9cc_                                | Disabled state icon color|
-| --rate-icon-gutter            | _4px_                                    | Icon spacing             |
-

package/packages/rate/README.md

@@ -1,176 +0,0 @@
----
-category: 数据录入
----
-
-# Rate 评分
-
-### 介绍
-
-用于对事物进行评级操作。
-
-### 引入
-
-在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
-
-```json
-"usingComponents": {
-  "smart-rate": "@tuya-miniapp/smart-ui/lib/rate/index"
-}
-```
-
-## 代码演示
-
-### 基础用法
-
-```html
-<smart-rate value="{{ value }}" bind:change="onChange" />
-```
-
-```javascript
-Page({
-  data: {
-    value: 3,
-  },
-
-  onChange(event) {
-    this.setData({
-      value: event.detail,
-    });
-  },
-});
-```
-
-### 自定义图标
-
-```html
-<smart-rate
-  value="{{ value }}"
-  icon="like"
-  void-icon="like-o"
-  bind:change="onChange"
-/>
-```
-
-### 自定义样式
-
-```html
-<smart-rate
-  value="{{ value }}"
-  size="{{ 25 }}"
-  color="#ffd21e"
-  void-icon="star"
-  void-color="#eee"
-  bind:change="onChange"
-/>
-```
-
-### 半星
-
-```html
-<smart-rate
-  value="{{ value }}"
-  allow-half
-  void-icon="star"
-  void-color="#eee"
-  bind:change="onChange"
-/>
-```
-
-```javascript
-Page({
-  data: {
-    value: 2.5,
-  },
-
-  onChange(event) {
-    this.setData({
-      value: event.detail,
-    });
-  },
-});
-```
-
-### 自定义数量
-
-```html
-<smart-rate value="{{ value }}" count="{{ 6 }}" bind:change="onChange" />
-```
-
-### 禁用状态
-
-```html
-<smart-rate disabled value="{{ value }}" bind:change="onChange" />
-```
-
-### 只读状态
-
-```html
-<smart-rate readonly value="{{ value }}" bind:change="onChange" />
-```
-
-### 监听 change 事件
-
-评分变化时，会触发 `change` 事件。
-
-```html
-<smart-rate value="{{ value }}" bind:change="onChange" />
-```
-
-```javascript
-Page({
-  data: {
-    value: 2,
-  },
-
-  onChange(event) {
-    Toast('当前值：' + event.detail);
-  },
-});
-```
-
-## API
-
-### Props
-
-| 参数           | 说明                                                       | 类型               | 默认值                |
-| -------------- | ---------------------------------------------------------- | ------------------ | --------------------- |
-| allow-half     | 是否允许半选                                               | _boolean_          | `false`               |
-| color          | 选中时的颜色                                               | _string_           | `#ffd21e`             |
-| count          | 图标总数                                                   | _number_           | `5`                   |
-| disabled       | 是否禁用评分                                               | _boolean_          | `false`               |
-| disabled-color | 禁用时的颜色                                               | _string_           | `#bdbdbd`             |
-| gutter         | 图标间距，默认单位为 `px`                                  | _string \| number_ | `4px`                 |
-| icon           | 选中时的图标svg值或图片链接，可选值见 [Icon 组件](/material/smartui?comId=icon&appType=miniapp)   | _string_           | `CheckmarkCircle`     |
-| name           | 在表单内提交时的标识符                                     | _string_           | -                     |
-| readonly       | 是否为只读状态                                             | _boolean_          | `false`               |
-| size           | 图标大小，默认单位为 `px`                                  | _string \| number_ | `20px`                |
-| touchable      | 是否可以通过滑动手势选择评分                               | _boolean_          | `true`                |
-| value          | 当前分值                                                   | _number_           | -                     |
-| void-color     | 未选中时的颜色                                             | _string_           | `#c7c7c7`             |
-| void-icon      | 未选中时的图标svg值或图片链接，可选值见 [Icon 组件](/material/smartui?comId=icon&appType=miniapp) | _string_           | `CheckmarkCircleVoid` |
-
-### Events
-
-| 事件名称    | 说明                     | 回调参数              |
-| ----------- | ------------------------ | --------------------- |
-| bind:change | 当前分值变化时触发的事件 | event.detail:当前分值 |
-
-### 外部样式类
-
-| 类名         | 说明         |
-| ------------ | ------------ |
-| custom-class | 根节点样式类 |
-| icon-class   | 图标样式类   |
-
-### 样式变量
-
-组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
-
-| 名称                          | 默认值                                 | 描述 |
-| ----------------------------- | -------------------------------------- | ---- |
-| --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_                                  | 图标间距             |

package/packages/rate/demo/index.json

@@ -1,8 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {
-    "smart-rate": "../../rate/index",
-    "smart-toast": "../../toast/index",
-    "demo-block": "../../../example/components/demo-block/index"
-  }
-}

package/packages/rate/demo/index.less

@@ -1,3 +0,0 @@
-.rate-position {
-  margin-left: 15px;
-}

package/packages/rate/demo/index.ts

@@ -1,28 +0,0 @@
-import Icloud from '@tuya-miniapp/icons/dist/svg/Icloud';
-import XmarkIcloud from '@tuya-miniapp/icons/dist/svg/XmarkIcloud';
-import { SmartComponent } from '../../common/component';
-import Toast from '../../toast/toast';
-
-SmartComponent({
-  data: {
-    value1: 3,
-    value2: 3,
-    value3: 3,
-    value4: 2.5,
-    value5: 4,
-    value6: 3,
-    value8: 2,
-    icon: Icloud,
-    voidIcon: XmarkIcloud,
-  },
-
-  methods: {
-    onChange(event) {
-      Toast({
-        selector: '#smart-toast-rate',
-        context: this,
-        message: I18n.t('currentValue') + event.detail,
-      });
-    },
-  },
-});

package/packages/rate/demo/index.wxml

@@ -1,68 +0,0 @@
-<demo-block title="{{I18n.t('basicUsage')}}">
-  <smart-rate
-    custom-class="rate-position"
-    model:value="{{ value1 }}"
-  />
-</demo-block>
-
-<demo-block title="{{I18n.t('customIcon')}}">
-  <smart-rate
-    custom-class="rate-position"
-    icon="{{icon}}"
-    void-icon="{{voidIcon}}"
-    model:value="{{ value2 }}"
-  />
-</demo-block>
-
-<demo-block title="{{I18n.t('customStyle')}}">
-  <smart-rate
-    custom-class="rate-position"
-    model:value="{{ value3 }}"
-    size="{{ 25 }}"
-    color="#ffd21e"
-    void-color="#eee"
-  />
-</demo-block>
-
-<demo-block title="{{I18n.t('halfStar')}}">
-  <smart-rate
-    custom-class="rate-position"
-    model:value="{{ value4 }}"
-    allow-half
-    void-color="#eee"
-  />
-</demo-block>
-
-<demo-block title="{{I18n.t('customQuantity')}}">
-  <smart-rate
-    custom-class="rate-position"
-    model:value="{{ value5 }}"
-    count="{{ 6 }}"
-  />
-</demo-block>
-
-<demo-block title="{{I18n.t('disabledState')}}">
-  <smart-rate
-    custom-class="rate-position"
-    value="{{ value6 }}"
-    disabled
-  />
-</demo-block>
-
-<demo-block title="{{I18n.t('readOnlyState')}}">
-  <smart-rate
-    custom-class="rate-position"
-    value="{{ value6 }}"
-    readonly
-  />
-</demo-block>
-
-<demo-block title="{{I18n.t('listenToChangeEvent')}}">
-  <smart-rate
-    custom-class="rate-position"
-    value="{{ value8 }}"
-    bind:change="onChange"
-  />
-</demo-block>
-
-<smart-toast id="smart-toast-rate" />

package/packages/rate/index.json

@@ -1,6 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {
-    "smart-icon": "../icon/index"
-  }
-}

package/packages/rate/index.less

@@ -1,39 +0,0 @@
-@import '../common/style/var.less';
-
-.smart-rate {
-  display: inline-flex;
-  user-select: none;
-
-  &__item {
-    position: relative;
-    padding: 0 var(--rate-horizontal-padding, @rate-horizontal-padding);
-
-    &:not(:last-child) {
-      padding-right: var(--rate-icon-gutter, @rate-icon-gutter);
-    }
-  }
-
-  &__icon {
-    display: block;
-    height: 100%;
-    color: var(--rate-icon-void-color, @rate-icon-void-color);
-    font-size: var(--rate-icon-size, @rate-icon-size);
-
-    &--half {
-      position: absolute;
-      top: 0;
-      width: 0.5em;
-      overflow: hidden;
-      left: var(--rate-horizontal-padding, @rate-horizontal-padding);
-      color: var(--rate-icon-full-color, @rate-icon-full-color);
-    }
-
-    &--full {
-      color: var(--rate-icon-full-color, @rate-icon-full-color);
-    }
-
-    &--disabled {
-      color: var(--rate-icon-disabled-color, @rate-icon-disabled-color);
-    }
-  }
-}

package/packages/rate/index.ts

@@ -1,102 +0,0 @@
-import CheckmarkCircle from '@tuya-miniapp/icons/dist/svg/CheckmarkCircle';
-import CheckmarkCircleVoid from '@tuya-miniapp/icons/dist/svg/CheckmarkCircleVoid';
-import { getAllRect } from '../common/utils';
-import { SmartComponent } from '../common/component';
-import { canIUseModel } from '../common/version';
-
-SmartComponent({
-  field: true,
-
-  classes: ['icon-class'],
-
-  props: {
-    value: {
-      type: Number,
-      observer(value: number) {
-        if (value !== this.data.innerValue) {
-          this.setData({ innerValue: value });
-        }
-      },
-    },
-    readonly: Boolean,
-    disabled: Boolean,
-    allowHalf: Boolean,
-    size: null,
-    icon: {
-      type: String,
-      value: CheckmarkCircle,
-    },
-    voidIcon: {
-      type: String,
-      value: CheckmarkCircleVoid,
-    },
-    color: {
-      type: String,
-      value: 'var(--app-M4)',
-    },
-    voidColor: {
-      type: String,
-      value: 'var(--app-B3-N7)',
-    },
-    disabledColor: {
-      type: String,
-      value: 'var(--app-B3-N7)',
-    },
-    count: {
-      type: Number,
-      value: 5,
-      observer(value: number) {
-        this.setData({ innerCountArray: Array.from({ length: value }) });
-      },
-    },
-    gutter: null,
-    touchable: {
-      type: Boolean,
-      value: true,
-    },
-  },
-
-  data: {
-    innerValue: 0,
-    innerCountArray: Array.from({ length: 5 }),
-  },
-
-  methods: {
-    onSelect(event: WechatMiniprogram.CustomEvent) {
-      const { data } = this;
-      const { score } = event.currentTarget.dataset;
-      if (!data.disabled && !data.readonly) {
-        this.setData({ innerValue: score + 1 });
-
-        if (canIUseModel()) {
-          this.setData({ value: score + 1 });
-        }
-
-        wx.nextTick(() => {
-          this.$emit('input', score + 1);
-          this.$emit('change', score + 1);
-        });
-      }
-    },
-
-    onTouchMove(event: WechatMiniprogram.TouchEvent) {
-      const { touchable } = this.data;
-      if (!touchable) return;
-
-      const { clientX } = event.touches[0];
-
-      getAllRect(this, '.smart-rate__icon').then(list => {
-        const target = list
-          .sort((cur, next) => cur.dataset.score - next.dataset.score)
-          .find(item => clientX >= item.left && clientX <= item.right);
-
-        if (target != null) {
-          this.onSelect({
-            ...event,
-            currentTarget: target as unknown as WechatMiniprogram.Target,
-          });
-        }
-      });
-    },
-  },
-});