@tuya/miniapp-smart-ui 2.13.5-beta-0

package/dist/search/index.js

@@ -0,0 +1,100 @@
+import { SmartComponent } from '../common/component';
+import { canIUseModel } from '../common/version';
+import SearchIcon from '@tuya-miniapp/icons/dist/svg/Search';
+import CloseIcon from '@tuya-miniapp/icons/dist/svg/Close';
+SmartComponent({
+    field: true,
+    classes: ['field-class', 'input-class', 'cancel-class'],
+    props: {
+        value: {
+            type: String,
+            value: '',
+        },
+        label: String,
+        focus: Boolean,
+        error: Boolean,
+        disabled: Boolean,
+        readonly: Boolean,
+        inputAlign: {
+            type: String,
+            value: 'left',
+        },
+        showAction: Boolean,
+        useActionSlot: Boolean,
+        useLeftIconSlot: Boolean,
+        useRightIconSlot: Boolean,
+        leftIcon: {
+            type: String,
+            value: SearchIcon,
+        },
+        rightIcon: String,
+        placeholder: String,
+        placeholderStyle: String,
+        searchText: String,
+        background: String,
+        actionText: {
+            type: String,
+            value: 'Cancel',
+        },
+        maxlength: {
+            type: Number,
+            value: -1,
+        },
+        shape: {
+            type: String,
+            value: 'square',
+        },
+        clearable: {
+            type: Boolean,
+            value: true,
+        },
+        clearTrigger: {
+            type: String,
+            value: 'focus',
+        },
+        clearIcon: {
+            type: String,
+            value: CloseIcon,
+        },
+        cursorSpacing: {
+            type: Number,
+            value: 0,
+        },
+    },
+    methods: {
+        onChange(event) {
+            this.setData({ value: event.detail });
+            this.$emit('change', event.detail);
+        },
+        onCancel() {
+            /**
+             * 修复修改输入框值时，输入框失焦和赋值同时触发，赋值失效
+             */
+            setTimeout(() => {
+                if (canIUseModel()) {
+                    this.setData({ value: '' });
+                }
+                this.$emit('cancel');
+                this.$emit('change', '');
+            }, 200);
+        },
+        onSearch(event) {
+            this.$emit('search', event.detail);
+        },
+        goSearch() {
+            this.$emit('search', this.data.value);
+        },
+        onFocus(event) {
+            this.$emit('focus', event.detail);
+        },
+        onBlur(event) {
+            this.$emit('blur', event.detail);
+        },
+        onClear(event) {
+            this.$emit('clear', event.detail);
+        },
+        onClickInput(event) {
+            this.$emit('click-input', event.detail);
+        },
+    },
+});

package/dist/search/index.json

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

package/dist/search/index.wxml

@@ -0,0 +1,57 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view
+  class="{{ utils.bem('search', { withaction: showAction || useActionSlot }) }} custom-class"
+  style="background: {{ background }}"
+>  
+
+  <view class="{{ utils.bem('search__content', [shape]) }}">
+    <view class="smart-search__label" wx:if="{{ label }}">{{ label }}</view>
+    <slot wx:else name="label" />
+
+    <smart-field
+      type="search"
+      right-icon="{{ !useRightIconSlot ? rightIcon : '' }}"
+      focus="{{ focus }}"
+      error="{{ error }}"
+      border="{{ false }}"
+      confirm-type="search"
+      class="smart-search__field field-class"
+      value="{{ value }}"
+      disabled="{{ disabled }}"
+      readonly="{{ readonly }}"
+      clearable="{{ clearable }}"
+      clear-trigger="{{ clearTrigger }}"
+      clear-icon="{{ clearIcon }}"
+      maxlength="{{ maxlength }}"
+      input-align="{{ inputAlign }}"
+      input-class="smart-search__input input-class"
+      placeholder="{{ placeholder }}"
+      placeholder-style="{{ placeholderStyle }}"
+      cursor-spacing="{{ cursorSpacing }}"
+      custom-style="padding: 0; background-color: transparent;"
+      bind:blur="onBlur"
+      bind:focus="onFocus"
+      bind:change="onChange"
+      bind:confirm="onSearch"
+      bind:clear="onClear"
+      bind:click-input="onClickInput"
+    >
+      <smart-icon wx:if="{{ !useLeftIconSlot && leftIcon }}" size="18" name="{{ leftIcon }}" custom-class="smart-search__field__left-icon" slot="left-icon" />
+      <slot wx:if="{{ useLeftIconSlot }}" name="left-icon" slot="left-icon" />
+      <slot wx:if="{{ useRightIconSlot }}" name="right-icon" slot="right-icon" />
+      <view wx:if="{{ searchText }}" hover-class="smart-search__hover" bind:tap="goSearch" class="smart-search__submit" slot="button" >{{ searchText }}</view>
+      <slot name="search-button" slot="button" />
+    </smart-field>
+  </view>
+
+  <view
+    wx:if="{{ showAction || useActionSlot }}"
+    class="smart-search__action"
+    hover-class="smart-search__action--hover"
+    hover-stay-time="70"
+  >
+    <slot wx:if="{{ useActionSlot }}" name="action" />
+    <view wx:else bind:tap="onCancel" class="smart-search__action-button cancel-class">{{ actionText }}</view>
+  </view>
+</view>

package/dist/search/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-search{--field-left-icon-margin-right:4px;--field-left-body-padding-right:0;align-items:center;background-color:var(--search-background-color,var(--app-B3,#fff));box-sizing:border-box;display:flex;padding:var(--search-padding,12px 16px)}.smart-search__content{align-items:center;background-color:var(--search-body-background-color,var(--app-B4-N9,rgba(0,0,0,.05)));color:var(--search-label-color,var(--app-B4-N1,#000));display:flex;flex:1;flex-direction:row;padding:12px 16px}.smart-search__content--round{border-radius:999px}.smart-search__label{color:var(--search-label-color,var(--app-B4-N1,#000));font-size:var(--search-label-font-size,14px);line-height:var(--search-input-height,24px);padding:var(--search-label-padding,0 5px)}.smart-search__field{flex:1}.smart-search__field__left-icon{--icon-color:var(--search-left-icon-color,var(--app-B4-N4,rgba(0,0,0,.4)));margin-left:2px}.smart-search__input{font-size:var(--search-value-font-size,14px)}.smart-search--withaction{padding-right:0}.smart-search__action{color:var(--search-action-text-color,var(--app-B4-N3,rgba(0,0,0,.5)));font-size:var(--search-action-font-size,14px);line-height:var(--search-input-height,24px)}.smart-search__action--hover{background-color:var(--app-B4-N9,rgba(0,0,0,.05));opacity:var(--search-btn-hover-opacity,.4)}.smart-search__action-button{padding:var(--search-action-padding,0 16px 0 12px)}.smart-search__hover{background-color:var(--app-B4-N9,rgba(0,0,0,.05));opacity:var(--search-btn-hover-opacity,.4)}.smart-search__submit{align-items:center;color:var(--search-submit-color,var(--app-M1,#3678e3));display:flex;flex-direction:row;font-size:var(--search-submit-font-size,14px)}.smart-search__submit:before{background-color:var(--search-submit-color,var(--app-M1,#3678e3));content:"";display:block;height:var(--search-submit-line-height,12px);margin-right:12px;width:var(--search-submit-line-width,1px)}

package/dist/sidebar/README.md

@@ -0,0 +1,160 @@
+---
+category: 导航
+---
+
+# Sidebar 侧边导航
+
+### 介绍
+
+垂直展示的导航栏，用于在不同的内容区域之间进行切换。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-sidebar": "@tuya/miniapp-smart-ui/lib/sidebar/index",
+  "smart-sidebar-item": "@tuya/miniapp-smart-ui/lib/sidebar-item/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+通过在`smart-sidebar`上设置`activeKey`属性来控制选中项。
+
+```html
+<smart-sidebar active-key="{{ activeKey }}">
+  <smart-sidebar-item title="标签名" />
+  <smart-sidebar-item title="标签名" />
+  <smart-sidebar-item title="标签名" />
+</smart-sidebar>
+```
+
+```javascript
+Page({
+  data: {
+    activeKey: 0,
+  },
+});
+```
+
+### 徽标提示
+
+设置`dot`属性后，会在右上角展示一个小红点。设置`badge`属性后，会在右上角展示相应的徽标。
+
+```html
+<smart-sidebar active-key="{{ activeKey }}">
+  <smart-sidebar-item title="标签名" dot />
+  <smart-sidebar-item title="标签名" badge="5" />
+  <smart-sidebar-item title="标签名" badge="99+" />
+</smart-sidebar>
+```
+
+### 禁用选项
+
+通过`disabled`属性禁用选项。
+
+```html
+<smart-sidebar active-key="{{ activeKey }}">
+  <smart-sidebar-item title="标签名" />
+  <smart-sidebar-item title="标签名" disabled />
+  <smart-sidebar-item title="标签名" />
+</smart-sidebar>
+```
+
+### 监听切换事件
+
+设置`change`方法来监听切换导航项时的事件。
+
+```html
+<smart-sidebar active-key="{{ activeKey }}" bind:change="onChange">
+  <smart-sidebar-item title="标签名 1" />
+  <smart-sidebar-item title="标签名 2" />
+  <smart-sidebar-item title="标签名 3" />
+</smart-sidebar>
+
+<smart-notify id="smart-notify" />
+```
+
+```js
+import Notify from '@tuya/miniapp-smart-ui/notify/notify';
+
+Page({
+  data: {
+    activeKey: 0,
+  },
+
+  onChange(event) {
+    Notify({ type: 'primary', message: event.detail });
+  },
+});
+```
+
+## API
+
+### Sidebar Props
+
+| 参数      | 说明         | 类型               | 默认值 |
+| --------- | ------------ | ------------------ | ------ |
+| activeKey | 选中项的索引 | _string \| number_ | `0`    |
+
+### Sidebar Event
+
+| 事件名 | 说明           | 参数               |
+| ------ | -------------- | ------------------ |
+| change | 切换徽章时触发 | 当前选中徽章的索引 |
+
+### Sidebar 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+
+### SidebarItem Props
+
+| 参数  | 说明                 | 类型      | 默认值  |
+| ----- | -------------------- | --------- | ------- |
+| dot   | 是否显示右上角小红点 | _boolean_ | `false` |
+| title | 内容                 | _string_  | `''`    |
+| badge | 图标右上角徽标的内容 | _string \| number_ | `''` |
+| disabled | 是否禁用该项 | _boolean_ | `false` |
+
+### SidebarItem Slot
+
+| 名称  | 说明                                        |
+| ----- | ------------------------------------------- |
+| title | 自定义标题栏，如果设置了`title`属性则不生效 |
+
+### SidebarItem Event
+
+| 事件名 | 说明           | 参数                            |
+| ------ | -------------- | ------------------------------- |
+| click  | 点击徽章时触发 | `event.detail` 为当前徽章的索引 |
+
+### SidebarItem 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --sidebar-width               | _80px_                                 | 侧边栏宽度          |
+| --sidebar-font-size           | _14px_                                 | 侧边栏字体大小      |
+| --sidebar-line-height         | _20px_                                 | 侧边栏行高          |
+| --sidebar-text-color          | _var(--app-B6-N1, rgba(0, 0, 0, 1))_   | 侧边栏文本颜色      |
+| --sidebar-disabled-text-color | _var(--app-B6-N5, rgba(0, 0, 0, 0.3))_ | 禁用状态文本颜色    |
+| --sidebar-padding             | _20px @padding-sm 20px @padding-xs_    | 侧边栏内边距        |
+| --sidebar-active-color        | _var(--app-B6, #fff)_                  | 活动状态颜色        |
+| --sidebar-background-color    | _var(--app-B1, #f6f7fb)_               | 侧边栏背景颜色      |
+| --sidebar-selected-font-weight| _500_                                  | 选中状态字体粗细    |
+| --sidebar-selected-text-color | _var(--app-B6-N1, rgba(0, 0, 0, 1))_   | 选中状态文本颜色    |
+| --sidebar-selected-border-color| _#ee0a24_                             | 选中状态边框颜色    |
+| --sidebar-selected-background-color| _var(--app-B6, #fff)_             | 选中状态背景颜色    |

package/dist/sidebar/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-sidebar{width:var(--sidebar-width,80px)}

package/dist/sidebar/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/sidebar/index.js

@@ -0,0 +1,34 @@
+import { SmartComponent } from '../common/component';
+import { useChildren } from '../common/relation';
+SmartComponent({
+    relation: useChildren('sidebar-item', function () {
+        this.setActive(this.data.activeKey);
+    }),
+    props: {
+        activeKey: {
+            type: Number,
+            value: 0,
+            observer: 'setActive',
+        },
+    },
+    beforeCreate() {
+        this.currentActive = -1;
+    },
+    methods: {
+        setActive(activeKey) {
+            const { children, currentActive } = this;
+            if (!children.length) {
+                return Promise.resolve();
+            }
+            this.currentActive = activeKey;
+            const stack = [];
+            if (currentActive !== activeKey && children[currentActive]) {
+                stack.push(children[currentActive].setActive(false));
+            }
+            if (children[activeKey]) {
+                stack.push(children[activeKey].setActive(true));
+            }
+            return Promise.all(stack);
+        },
+    },
+});

package/dist/sidebar/index.json

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

package/dist/sidebar/index.wxml

@@ -0,0 +1,3 @@
+<view class="smart-sidebar custom-class">
+  <slot />
+</view>

package/dist/sidebar/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-sidebar{width:var(--sidebar-width,80px)}

package/dist/sidebar-item/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-sidebar-item{background-color:var(--sidebar-background-color,var(--app-B1,#f6f7fb));border-left:3px solid transparent;box-sizing:border-box;color:var(--sidebar-text-color,var(--app-B6-N1,#000));display:block;font-size:var(--sidebar-font-size,14px);line-height:var(--sidebar-line-height,20px);overflow:hidden;padding:var(--sidebar-padding,20px 12px 20px 8px);-webkit-user-select:none;user-select:none}.smart-sidebar-item__text{display:inline-block;position:relative;word-break:break-all}.smart-sidebar-item--hover:not(.smart-sidebar-item--disabled){background-color:var(--sidebar-active-color,var(--app-B6,#fff))}.smart-sidebar-item:after{border-bottom-width:1px}.smart-sidebar-item--selected{border-color:var(--sidebar-selected-border-color,#ee0a24);color:var(--sidebar-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--sidebar-selected-font-weight,500)}.smart-sidebar-item--selected:after{border-right-width:1px}.smart-sidebar-item--selected,.smart-sidebar-item--selected.smart-sidebar-item--hover{background-color:var(--sidebar-selected-background-color,var(--app-B6,#fff))}.smart-sidebar-item--disabled{color:var(--sidebar-disabled-text-color,var(--app-B6-N5,rgba(0,0,0,.3)))}

package/dist/sidebar-item/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/sidebar-item/index.js

@@ -0,0 +1,29 @@
+import { SmartComponent } from '../common/component';
+import { useParent } from '../common/relation';
+SmartComponent({
+    classes: ['active-class', 'disabled-class'],
+    relation: useParent('sidebar'),
+    props: {
+        dot: Boolean,
+        badge: null,
+        info: null,
+        title: String,
+        disabled: Boolean,
+    },
+    methods: {
+        onClick() {
+            const { parent } = this;
+            if (!parent || this.data.disabled) {
+                return;
+            }
+            const index = parent.children.indexOf(this);
+            parent.setActive(index).then(() => {
+                this.$emit('click', index);
+                parent.$emit('change', index);
+            });
+        },
+        setActive(selected) {
+            return this.setData({ selected });
+        },
+    },
+});

package/dist/sidebar-item/index.json

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

package/dist/sidebar-item/index.wxml

@@ -0,0 +1,18 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view
+  class="{{ utils.bem('sidebar-item', { selected, disabled }) }} {{ selected ? 'active-class' : '' }} {{ disabled ? 'disabled-class' : '' }} custom-class"
+  hover-class="smart-sidebar-item--hover"
+  hover-stay-time="70"
+  bind:tap="onClick"
+>
+  <view class="smart-sidebar-item__text">
+    <smart-info
+      wx:if="{{ badge != null || info !== null || dot }}"
+      dot="{{ dot }}"
+      info="{{ badge != null ? badge : info }}"
+    />
+    <view wx:if="{{ title }}">{{ title }}</view>
+    <slot wx:else name="title" />
+  </view>
+</view>

package/dist/sidebar-item/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-sidebar-item{background-color:var(--sidebar-background-color,var(--app-B1,#f6f7fb));border-left:3px solid transparent;box-sizing:border-box;color:var(--sidebar-text-color,var(--app-B6-N1,#000));display:block;font-size:var(--sidebar-font-size,14px);line-height:var(--sidebar-line-height,20px);overflow:hidden;padding:var(--sidebar-padding,20px 12px 20px 8px);-webkit-user-select:none;user-select:none}.smart-sidebar-item__text{display:inline-block;position:relative;word-break:break-all}.smart-sidebar-item--hover:not(.smart-sidebar-item--disabled){background-color:var(--sidebar-active-color,var(--app-B6,#fff))}.smart-sidebar-item:after{border-bottom-width:1px}.smart-sidebar-item--selected{border-color:var(--sidebar-selected-border-color,#ee0a24);color:var(--sidebar-selected-text-color,var(--app-B6-N1,#000));font-weight:var(--sidebar-selected-font-weight,500)}.smart-sidebar-item--selected:after{border-right-width:1px}.smart-sidebar-item--selected,.smart-sidebar-item--selected.smart-sidebar-item--hover{background-color:var(--sidebar-selected-background-color,var(--app-B6,#fff))}.smart-sidebar-item--disabled{color:var(--sidebar-disabled-text-color,var(--app-B6-N5,rgba(0,0,0,.3)))}

package/dist/skeleton/README.md

@@ -0,0 +1,98 @@
+---
+category: 展示
+---
+
+# Skeleton 骨架屏
+
+### 介绍
+
+用于在内容加载过程中展示一组占位图形。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-skeleton": "@tuya/miniapp-smart-ui/lib/skeleton/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+通过`title`属性显示标题占位图，通过`row`属性配置占位段落行数。
+
+```html
+<smart-skeleton title row="3" />
+```
+
+### 显示头像
+
+通过`avatar`属性显示头像占位图。
+
+```html
+<smart-skeleton title avatar row="3" />
+```
+
+### 展示子组件
+
+将`loading`属性设置成`false`表示内容加载完成，此时会隐藏占位图，并显示`Skeleton`的子组件。
+
+```html
+<smart-skeleton title avatar row="3" loading="{{ loading }}">
+  <view>实际内容</view>
+</smart-skeleton>
+```
+
+```js
+Page({
+  data: {
+    loading: true,
+  },
+  onReady() {
+    this.setData({
+      loading: false,
+    });
+  },
+});
+```
+
+## API
+
+### Props
+
+| 参数         | 说明                                        | 类型                 | 默认值  |
+| ------------ | ------------------------------------------- | -------------------- | ------- |
+| animate      | 是否开启动画                                | _boolean_            | `true`  |
+| avatar       | 是否显示头像占位图                          | _boolean_            | `false` |
+| avatar-shape | 头像占位图形状，可选值为`square`            | _string_             | `round` |
+| avatar-size  | 头像占位图大小                              | _string \| number_   | `32px`  |
+| loading      | 是否显示占位图，传`false`时会展示子组件内容 | _boolean_            | `true`  |
+| row          | 段落占位图行数                              | _number_             | `0`     |
+| row-width    | 段落占位图宽度，可传数组来设置每一行的宽度  | _string \| string[]_ | `100%`  |
+| title        | 是否显示标题占位图                          | _boolean_            | `false` |
+| title-width  | 标题占位图宽度                              | _string \| number_   | `40%`   |
+
+### 外部样式类
+
+| 类名         | 说明           |
+| ------------ | -------------- |
+| avatar-class | 头像占位样式类 |
+| custom-class | 根节点样式类   |
+| row-class    | 段落占位样式类 |
+| title-class  | 标题占位样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --skeleton-padding            | _0 @padding-md_                        | 骨架屏内边距         |
+| --skeleton-row-height         | _16px_                                 | 骨架屏行高           |
+| --skeleton-row-background-color | _var(--app-B3, #ffffff)_             | 骨架屏行背景颜色     |
+| --skeleton-row-margin-top     | _12px_                                 | 骨架屏行上边距       |
+| --skeleton-avatar-background-color | _var(--app-B3, #ffffff)_          | 骨架屏头像背景颜色   |
+| --skeleton-animation-duration | _1.2s_                                 | 动画持续时间         |

package/dist/skeleton/index.css

@@ -0,0 +1 @@
+@import '../common/index.css';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-skeleton{box-sizing:border-box;display:flex;padding:var(--skeleton-padding,0 16px);width:100%}.smart-skeleton__avatar{background-color:var(--skeleton-avatar-background-color,var(--app-B3,#fff));flex-shrink:0;margin-right:var(--padding-md,16px)}.smart-skeleton__avatar--round{border-radius:100%}.smart-skeleton__content{flex:1}.smart-skeleton__avatar+.smart-skeleton__content{padding-top:var(--padding-xs,8px)}.smart-skeleton__row,.smart-skeleton__title{background-color:var(--skeleton-row-background-color,var(--app-B3,#fff));height:var(--skeleton-row-height,16px)}.smart-skeleton__title{margin:0}.smart-skeleton__row:not(:first-child){margin-top:var(--skeleton-row-margin-top,12px)}.smart-skeleton__title+.smart-skeleton__row{margin-top:20px}.smart-skeleton--animate{animation:smart-skeleton-blink 1.2s ease-in-out infinite}@keyframes smart-skeleton-blink{0%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}

package/dist/skeleton/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/skeleton/index.js

@@ -0,0 +1,46 @@
+import { SmartComponent } from '../common/component';
+SmartComponent({
+    classes: ['avatar-class', 'title-class', 'row-class'],
+    props: {
+        row: {
+            type: Number,
+            value: 0,
+            observer(value) {
+                this.setData({ rowArray: Array.from({ length: value }) });
+            },
+        },
+        title: Boolean,
+        avatar: Boolean,
+        loading: {
+            type: Boolean,
+            value: true,
+        },
+        animate: {
+            type: Boolean,
+            value: true,
+        },
+        avatarSize: {
+            type: String,
+            value: '32px',
+        },
+        avatarShape: {
+            type: String,
+            value: 'round',
+        },
+        titleWidth: {
+            type: String,
+            value: '40%',
+        },
+        rowWidth: {
+            type: null,
+            value: '100%',
+            observer(val) {
+                this.setData({ isArray: val instanceof Array });
+            },
+        },
+    },
+    data: {
+        isArray: false,
+        rowArray: [],
+    },
+});

package/dist/skeleton/index.json

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

package/dist/skeleton/index.wxml

@@ -0,0 +1,29 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view
+  wx:if="{{ loading }}"
+  class="custom-class {{ utils.bem('skeleton', [{animate}]) }}"
+>
+  <view
+    wx:if="{{ avatar }}"
+    class="avatar-class {{ utils.bem('skeleton__avatar', [avatarShape])}}"
+    style="{{ 'width:' + avatarSize + ';height:' + avatarSize }}"
+  />
+  <view class="{{ utils.bem('skeleton__content')}}">
+    <view
+      wx:if="{{ title }}"
+      class="title-class {{ utils.bem('skeleton__title') }}"
+      style="{{ 'width:' + titleWidth }}"
+    />
+    <view
+      wx:for="{{ rowArray }}"
+      wx:key="index"
+      wx:for-index="index"
+      class="row-class {{ utils.bem('skeleton__row') }}"
+      style="{{ 'width:' + (isArray ? rowWidth[index] : rowWidth) }}"
+    />
+  </view>
+</view>
+<view wx:else class="{{ utils.bem('skeleton__content')}}">
+  <slot />
+</view>

package/dist/skeleton/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';:root{--smart-ui-overlay:rgba(0,0,0,.4);--smart-ui-bottom-sheet-dragger-node-background:rgba(0,0,0,.3);--smart-ui-dialog-background:var(--app-B4,#fff);--smart-ui-border-image:linear-gradient(90deg,transparent,rgba(0,0,0,.3),transparent);--smart-ui-battery-body-base-background:rgba(0,0,0,.25);--smart-ui-battery-text-color:rgba(0,0,0,.6);--smart-ui-battery-slash-border-color:#fff;--smart-ui-toast-background:#5c5c5c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 4px 12px rgba(0,0,0,.1),0 16px 32px rgba(0,0,0,.12);--smart-ui-overlay-blur-background:rgba(40,44,53,.22)}:root[theme=dark]{--smart-ui-overlay:rgba(0,0,0,.7);--smart-ui-bottom-sheet-dragger-node-background:hsla(0,0%,100%,.3);--smart-ui-dialog-background:linear-gradient(0deg,var(--app-B4-N6),var(--app-B4-N6)),var(--app-B1);--smart-ui-border-image:linear-gradient(90deg,hsla(0,0%,100%,0),hsla(0,0%,100%,.3),hsla(0,0%,100%,0));--smart-ui-battery-body-base-background:hsla(0,0%,100%,.4);--smart-ui-battery-text-color:#fff;--smart-ui-battery-slash-border-color:#000;--smart-ui-toast-background:#3c3c3c;--smart-ui-toast-border:1px solid hsla(0,0%,100%,.05);--smart-ui-toast-box-shadow:0 8px 24px 0 rgba(0,0,0,.15);--smart-ui-overlay-blur-background:rgba(0,0,0,.6)}.smart-manrope{font-family:Manrope,sans-serif}.smart-skeleton{box-sizing:border-box;display:flex;padding:var(--skeleton-padding,0 16px);width:100%}.smart-skeleton__avatar{background-color:var(--skeleton-avatar-background-color,var(--app-B3,#fff));flex-shrink:0;margin-right:var(--padding-md,16px)}.smart-skeleton__avatar--round{border-radius:100%}.smart-skeleton__content{flex:1}.smart-skeleton__avatar+.smart-skeleton__content{padding-top:var(--padding-xs,8px)}.smart-skeleton__row,.smart-skeleton__title{background-color:var(--skeleton-row-background-color,var(--app-B3,#fff));height:var(--skeleton-row-height,16px)}.smart-skeleton__title{margin:0}.smart-skeleton__row:not(:first-child){margin-top:var(--skeleton-row-margin-top,12px)}.smart-skeleton__title+.smart-skeleton__row{margin-top:20px}.smart-skeleton--animate{animation:smart-skeleton-blink 1.2s ease-in-out infinite}@keyframes smart-skeleton-blink{0%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}