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

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

@@ -0,0 +1,11 @@
+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/grid-item/index.json

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

package/packages/grid-item/index.less

@@ -0,0 +1,94 @@
+@import '../common/style/var.less';
+
+.smart-grid-item {
+  position: relative;
+  float: left;
+  box-sizing: border-box;
+
+  &--square {
+    height: 0;
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    box-sizing: border-box;
+    height: 100%;
+    padding: var(--grid-item-content-padding, @grid-item-content-padding);
+    background-color: var(
+      --grid-item-content-background-color,
+      @grid-item-content-background-color
+    );
+
+    &::after {
+      z-index: 1;
+      border-width: 0 @border-width-base @border-width-base 0;
+    }
+
+    &--surround {
+      &::after {
+        border-width: @border-width-base;
+      }
+    }
+
+    &--center {
+      align-items: center;
+      justify-content: center;
+    }
+
+    &--square {
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+    }
+
+    &--horizontal {
+      flex-direction: row;
+
+      .smart-grid-item__text {
+        margin: 0 0 0 @padding-xs;
+      }
+    }
+
+    &--reverse {
+      flex-direction: column-reverse;
+
+      .smart-grid-item__text {
+        margin: 0 0 @padding-xs;
+      }
+    }
+
+    &--horizontal&--reverse {
+      flex-direction: row-reverse;
+
+      .smart-grid-item__text {
+        margin: 0 @padding-xs 0 0;
+      }
+    }
+
+    &--clickable:active {
+      background-color: var(
+        --grid-item-content-active-color,
+        @grid-item-content-active-color
+      );
+    }
+  }
+
+  &__icon {
+    display: flex;
+    align-items: center;
+    font-size: var(--grid-item-icon-size, @grid-item-icon-size);
+    height: var(--grid-item-icon-size, @grid-item-icon-size);
+  }
+
+  &__text {
+    word-wrap: break-word;
+    color: var(--grid-item-text-color, @grid-item-text-color);
+    font-size: var(--grid-item-text-font-size, @grid-item-text-font-size);
+  }
+
+  &__icon + &__text {
+    margin-top: 8px;
+  }
+}

package/packages/grid-item/index.ts

@@ -0,0 +1,63 @@
+import { SmartComponent } from '../common/component';
+import { useParent } from '../common/relation';
+import { link } from '../mixins/link';
+
+SmartComponent({
+  relation: useParent('grid'),
+
+  classes: ['content-class', 'icon-class', 'text-class'],
+
+  mixins: [link],
+
+  props: {
+    icon: String,
+    iconColor: String,
+    iconPrefix: {
+      type: String,
+      value: 'smart-icon',
+    },
+    dot: Boolean,
+    info: null,
+    badge: null,
+    text: String,
+    useSlot: Boolean,
+  },
+
+  data: {
+    viewStyle: '',
+  },
+
+  mounted() {
+    this.updateStyle();
+  },
+
+  methods: {
+    updateStyle() {
+      if (!this.parent) {
+        return;
+      }
+
+      const { data, children } = this.parent;
+      const { columnNum, border, square, gutter, clickable, center, direction, reverse, iconSize } =
+        data;
+
+      this.setData({
+        center,
+        border,
+        square,
+        gutter,
+        clickable,
+        direction,
+        reverse,
+        iconSize,
+        index: children.indexOf(this),
+        columnNum,
+      });
+    },
+
+    onClick() {
+      this.$emit('click');
+      this.jumpLink();
+    },
+  },
+});

package/packages/grid-item/index.wxml

@@ -0,0 +1,27 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  class="custom-class {{ utils.bem('grid-item', { square }) }}"
+  style="{{ computed.wrapperStyle({ square, gutter, columnNum, index }) }}"
+  bindtap="onClick"
+>
+  <view
+    class="content-class {{ utils.bem('grid-item__content', [direction, { center, square, reverse, clickable, surround: border && gutter }]) }} {{ border ? 'smart-hairline--surround' : '' }}"
+    style="{{ computed.contentStyle({ square, gutter }) }}"
+  >
+    <block wx:if="{{ useSlot }}">
+      <slot />
+    </block>
+    <block wx:else>
+      <view class="smart-grid-item__icon icon-class">
+        <smart-icon wx:if="{{ icon }}" name="{{ icon }}" color="{{ iconColor }}" class-prefix="{{ iconPrefix }}" dot="{{ dot }}" info="{{ badge || info }}" size="{{ iconSize }}" />
+        <slot wx:else name="icon"></slot>
+      </view>
+      <view class="smart-grid-item__text text-class">
+        <text wx:if="{{ text }}">{{ text }}</text>
+        <slot wx:else name="text"></slot>
+      </view>
+    </block>
+  </view>
+</view>

package/packages/grid-item/index.wxs

@@ -0,0 +1,32 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function wrapperStyle(data) {
+  var width = 100 / data.columnNum + '%';
+
+  return style({
+    width: width,
+    'padding-top': data.square ? width : null,
+    'padding-right': addUnit(data.gutter),
+    'margin-top':
+      data.index >= data.columnNum && !data.square
+        ? addUnit(data.gutter)
+        : null,
+  });
+}
+
+function contentStyle(data) {
+  return data.square
+    ? style({
+        right: addUnit(data.gutter),
+        bottom: addUnit(data.gutter),
+        height: 'auto',
+      })
+    : '';
+}
+
+module.exports = {
+  wrapperStyle: wrapperStyle,
+  contentStyle: contentStyle,
+};

package/packages/icon/README.en.md

@@ -0,0 +1,142 @@
+---
+category: Display
+---
+
+# Icon
+
+### Introduction
+
+A set of font-based icons that can be used with the Icon component or referenced through the icon attribute in other components.
+
+### Import
+
+Introduce the component in `app.json` or `index.json`, for more details see [Quick Start](/material/smartui?comId=help-getting-started&appType=miniapp).
+
+```json
+"usingComponents": {
+  "smart-icon": "@tuya-miniapp/smart-ui/lib/icon/index"
+}
+```
+
+Import icon svg in `index.ts`
+
+```js
+import warningIcon from '@tuya-miniapp/icons/dist/svg/Warning';
+```
+
+## Code Examples
+
+### Basic Usage
+
+The `name` attribute of `Icon` supports passing icon names or image URLs.
+
+```html
+<smart-icon name="{{ warningIcon }}" />
+<smart-icon name="https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo-small.png" />
+```
+
+### Notification
+
+When the `dot` attribute is set, a small red dot will appear at the top-right corner of the icon. When the `info` attribute is set, a corresponding badge will display at the top-right corner of the icon.
+
+```html
+<smart-icon name="{{ warningIcon }}" dot />
+<smart-icon name="{{ warningIcon }}" info="9" />
+<smart-icon name="{{ warningIcon }}" info="99+" />
+```
+
+### Icon Color
+
+Use the `color` attribute to control the icon color.
+
+```html
+<smart-icon name="{{ warningIcon }}" color="red" />
+```
+
+### Icon Size
+
+Use the `size` attribute to control the icon size.
+
+```html
+<smart-icon name="{{ warningIcon }}" size="50px" />
+```
+
+### Custom Icons
+
+If you need more icons based on existing ones, you can import third-party icon fonts and corresponding CSS files, and then use them directly in the Icon component. For example, you can import them in the `app.wxss` file.
+
+```css
+/* Import third-party or custom icon font styles */
+@font-face {
+  font-family: 'my-icon';
+  src: url('./my-icon.ttf') format('truetype');
+}
+
+.my-icon {
+  font-family: 'my-icon';
+}
+
+.my-icon-extra::before {
+  content: '\e626';
+}
+```
+
+```html
+<!-- Specify the classname prefix as my-icon through class-prefix -->
+<smart-icon class-prefix="my-icon" name="extra" />
+```
+
+### Svg Path `v2.3.3`
+
+Components now also support rendering by passing the path.
+
+```html
+<smart-icon 
+  name="M192 448C192 624.736 335.264 768 512 768s320-143.264 320-320a319.872 319.872 0 0 0-160-277.184V160a64 64 0 0 0-64-64h-192a64 64 0 0 0-64 64v10.816A319.872 319.872 0 0 0 192 448z m224-384h192a32 32 0 0 0 0-64h-192a32 32 0 0 0 0 64z" 
+  size="36"
+  color="#1989fa"
+/>
+```
+
+## API
+
+### Props
+
+| Parameter     | Description                              | Type               | Default    |
+| ------------- | ---------------------------------------- | ------------------ | ---------- |
+| class-prefix  | Class name prefix                        | _string_           | `smart-icon` |
+| color         | Icon color                               | _string_           | `inherit`  |
+| custom-style  | Custom styles                            | _string_           | -          |
+| dot           | Show a small red dot at the top-right corner of the icon | _boolean_          | `false`    |
+| info          | Text notification at the top-right corner of the icon | _string \| number_ | -          |
+| name          | Icon name, Svg URL, or image link        | _string_           | -          |
+| size          | Icon size, such as `20px`, `2em`, default unit is `px` | _string \| number_ | `inherit`  |
+
+### Events
+
+| Event Name  | Description      | Parameters |
+| ----------- | ---------------- | ---------- |
+| bind:click  | Triggered when the icon is clicked | -          |
+
+### External Style Classes
+
+| Class Name     | Description           |
+| -------------- | --------------------- |
+| custom-class   | Root element style class |
+| info-class     | Text style class at the top-right corner of the icon |
+
+
+### 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 |
+| ----------------------------- | ----------------------------------------- | ----------- |
+| --icon-color | _var(--app-B4-N2, rgba(0, 0, 0, 0.7))_ | icon color |
+
+
+## FAQs
+
+### What does the Failed to load font error in the developer tools mean?
+
+This is an issue with the developer tools themselves and can be ignored. For more details, see [WeChat Mini Program Documentation](https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html) - Note 5.

package/packages/icon/README.md

@@ -0,0 +1,141 @@
+---
+category: 展示
+---
+
+# Icon 图标
+
+### 介绍
+
+基于字体的图标集，可以通过 Icon 组件使用，也可以在其他组件中通过 icon 属性引用。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-icon": "@tuya-miniapp/smart-ui/lib/icon/index"
+}
+```
+
+在`index.ts`中引入 icon svg
+
+```js
+import warningIcon from '@tuya-miniapp/icons/dist/svg/Warning';
+```
+
+## 代码演示
+
+### 基础用法
+
+`Icon`的`name`属性支持传入图标名称或图片链接。
+
+```html
+<smart-icon name="{{ warningIcon }}" />
+<smart-icon name="https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo-small.png" />
+```
+
+### 提示信息
+
+设置`dot`属性后，会在图标右上角展示一个小红点。设置`info`属性后，会在图标右上角展示相应的徽标。
+
+```html
+<smart-icon name="{{ warningIcon }}" dot />
+<smart-icon name="{{ warningIcon }}" info="9" />
+<smart-icon name="{{ warningIcon }}" info="99+" />
+```
+
+### 图标颜色
+
+设置`color`属性来控制图标颜色。
+
+```html
+<smart-icon name="{{ warningIcon }}" color="red" />
+```
+
+### 图标大小
+
+设置`size`属性来控制图标大小。
+
+```html
+<smart-icon name="{{ warningIcon }}" size="50px" />
+```
+
+### 自定义图标
+
+如果需要在现有 Icon 的基础上使用更多图标，可以引入第三方 iconfont 对应的字体文件和 CSS 文件，之后就可以在 Icon 组件中直接使用。例如，可以在 `app.wxss` 文件中引入。
+
+```css
+/* 引入第三方或自定义的字体图标样式 */
+@font-face {
+  font-family: 'my-icon';
+  src: url('./my-icon.ttf') format('truetype');
+}
+
+.my-icon {
+  font-family: 'my-icon';
+}
+
+.my-icon-extra::before {
+  content: '\e626';
+}
+```
+
+```html
+<!-- 通过 class-prefix 指定类名为 my-icon -->
+<smart-icon class-prefix="my-icon" name="extra" />
+```
+
+### Svg Path `v2.3.3`
+
+组件现在也支持传入path的方式渲染
+```html
+<smart-icon 
+  name="M192 448C192 624.736 335.264 768 512 768s320-143.264 320-320a319.872 319.872 0 0 0-160-277.184V160a64 64 0 0 0-64-64h-192a64 64 0 0 0-64 64v10.816A319.872 319.872 0 0 0 192 448z m224-384h192a32 32 0 0 0 0-64h-192a32 32 0 0 0 0 64z" 
+  size="36"
+  color="#1989fa"
+/>
+```
+
+
+## API
+
+### Props
+
+| 参数         | 说明                                       | 类型               | 默认值       |
+| ------------ | ------------------------------------------ | ------------------ | ------------ |
+| class-prefix | 类名前缀                                   | _string_           | `smart-icon` |
+| color        | 图标颜色                                   | _string_           | `inherit`    |
+| custom-style | 自定义样式                                 | _string_           | -            |
+| dot          | 是否显示图标右上角小红点                   | _boolean_          | `false`      |
+| info         | 图标右上角文字提示                         | _string \| number_ | -            |
+| name         | 图标名称或 Svg URL 或图片链接              | _string_           | -            |
+| size         | 图标大小，如 `20px`，`2em`，默认单位为`px` | _string \| number_ | `inherit`    |
+
+### Events
+
+| 事件名     | 说明           | 参数 |
+| ---------- | -------------- | ---- |
+| bind:click | 点击图标时触发 | -    |
+
+### 外部样式类
+
+| 类名         | 说明                 |
+| ------------ | -------------------- |
+| custom-class | 根节点样式类         |
+| info-class   | 图标右上角文字样式类 |
+
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --icon-color | _var(--app-B4-N2, rgba(0, 0, 0, 0.7))_ | 图标颜色 |
+
+## 常见问题
+
+### 开发者工具上提示 Failed to load font 是什么情况？
+
+这个是开发者工具本身的问题，可以忽略，具体可以查看[微信小程序文档](https://developers.weixin.qq.com/miniprogram/dev/api/ui/font/wx.loadFontFace.html) - 注意事项第 5 条。

package/packages/icon/demo/index.json

@@ -0,0 +1,10 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-col": "../../col/index",
+    "smart-tab": "../../tab/index",
+    "smart-tabs": "../../tabs/index",
+    "smart-icon": "../../icon/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}

package/packages/icon/demo/index.less

@@ -0,0 +1,29 @@
+.col {
+  display: inline-block;
+  float: none;
+  text-align: center;
+  vertical-align: middle;
+}
+
+.icon {
+  margin: 16px 0;
+  color: #323233;
+}
+
+.text {
+  display: block;
+  height: 36px;
+  margin: -4px 0 4px;
+  padding: 0 5px;
+  color: #646566;
+  font-size: 12px;
+  line-height: 18px;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.demo-tab-pane {
+  margin: 20px;
+  background-color: #fff;
+}

package/packages/icon/demo/index.ts

@@ -0,0 +1,37 @@
+import * as icons from '@tuya-miniapp/icons';
+import iconsConfig from '@tuya-miniapp/icons/dist/config';
+import { SmartComponent } from '../../common/component';
+
+function kebabCase(name: string) {
+  const currName = name.replace(
+    /[A-Z]/g,
+    (word) => '-' + word.toLocaleLowerCase()
+  );
+  return currName.slice(1);
+}
+const svgPath =
+  "M192 448C192 624.736 335.264 768 512 768s320-143.264 320-320a319.872 319.872 0 0 0-160-277.184V160a64 64 0 0 0-64-64h-192a64 64 0 0 0-64 64v10.816A319.872 319.872 0 0 0 192 448z m224-384h192a32 32 0 0 0 0-64h-192a32 32 0 0 0 0 64z";
+
+
+const iconsArr = iconsConfig.map((name) => ({
+  name: kebabCase(name),
+  value: icons[name],
+}));
+
+SmartComponent({
+  data: {
+    active: 0,
+    icons: iconsArr,
+    iconWarning: icons.Warning,
+    iconAlarm: icons.Alarm,
+    svgPath,
+  },
+
+  methods: {
+    onSwitch(event) {
+      this.setData({
+        active: event.detail.index,
+      });
+    },
+  },
+});