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

package/lib/col/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var relation_1 = require("../common/relation");
+var component_1 = require("../common/component");
+(0, component_1.SmartComponent)({
+    relation: (0, relation_1.useParent)('row'),
+    props: {
+        span: Number,
+        offset: Number,
+    },
+});

package/lib/col/index.json

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

package/lib/col/index.wxml

@@ -0,0 +1,9 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  class="custom-class {{ utils.bem('col', [span]) }} {{ offset ? 'smart-col--offset-' + offset : '' }}"
+  style="{{ computed.rootStyle({ gutter }) }}"
+>
+  <slot />
+</view>

package/lib/col/index.wxs

@@ -0,0 +1,18 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  if (!data.gutter) {
+    return '';
+  }
+
+  return style({
+    'padding-right': addUnit(data.gutter / 2),
+    'padding-left': addUnit(data.gutter / 2),
+  });
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+};

package/lib/col/index.wxss

@@ -0,0 +1 @@
+@import '../common/index.wxss';.smart-col{box-sizing:border-box;float:left}.smart-col--1{width:4.16666667%}.smart-col--offset-1{margin-left:4.16666667%}.smart-col--2{width:8.33333333%}.smart-col--offset-2{margin-left:8.33333333%}.smart-col--3{width:12.5%}.smart-col--offset-3{margin-left:12.5%}.smart-col--4{width:16.66666667%}.smart-col--offset-4{margin-left:16.66666667%}.smart-col--5{width:20.83333333%}.smart-col--offset-5{margin-left:20.83333333%}.smart-col--6{width:25%}.smart-col--offset-6{margin-left:25%}.smart-col--7{width:29.16666667%}.smart-col--offset-7{margin-left:29.16666667%}.smart-col--8{width:33.33333333%}.smart-col--offset-8{margin-left:33.33333333%}.smart-col--9{width:37.5%}.smart-col--offset-9{margin-left:37.5%}.smart-col--10{width:41.66666667%}.smart-col--offset-10{margin-left:41.66666667%}.smart-col--11{width:45.83333333%}.smart-col--offset-11{margin-left:45.83333333%}.smart-col--12{width:50%}.smart-col--offset-12{margin-left:50%}.smart-col--13{width:54.16666667%}.smart-col--offset-13{margin-left:54.16666667%}.smart-col--14{width:58.33333333%}.smart-col--offset-14{margin-left:58.33333333%}.smart-col--15{width:62.5%}.smart-col--offset-15{margin-left:62.5%}.smart-col--16{width:66.66666667%}.smart-col--offset-16{margin-left:66.66666667%}.smart-col--17{width:70.83333333%}.smart-col--offset-17{margin-left:70.83333333%}.smart-col--18{width:75%}.smart-col--offset-18{margin-left:75%}.smart-col--19{width:79.16666667%}.smart-col--offset-19{margin-left:79.16666667%}.smart-col--20{width:83.33333333%}.smart-col--offset-20{margin-left:83.33333333%}.smart-col--21{width:87.5%}.smart-col--offset-21{margin-left:87.5%}.smart-col--22{width:91.66666667%}.smart-col--offset-22{margin-left:91.66666667%}.smart-col--23{width:95.83333333%}.smart-col--offset-23{margin-left:95.83333333%}.smart-col--24{width:100%}.smart-col--offset-24{margin-left:100%}

package/lib/collapse/README.md

@@ -0,0 +1,223 @@
+---
+category: 展示
+---
+
+# Collapse 折叠面板
+
+### 介绍
+
+将一组内容放置在多个折叠面板中，点击面板的标题可以展开或收缩其内容。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-collapse": "@tuya/miniapp-smart-ui/lib/collapse/index",
+  "smart-collapse-item": "@tuya/miniapp-smart-ui/lib/collapse-item/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+通过`value`控制展开的面板列表，`activeNames`为数组格式。
+
+```html
+<smart-collapse value="{{ activeNames }}" bind:change="onChange">
+  <smart-collapse-item title="标题1" name="1">
+    代码是写出来给人看的，附带能在机器上运行
+  </smart-collapse-item>
+  <smart-collapse-item title="标题2" name="2">
+    代码是写出来给人看的，附带能在机器上运行
+  </smart-collapse-item>
+  <smart-collapse-item title="标题3" name="3" disabled>
+    代码是写出来给人看的，附带能在机器上运行
+  </smart-collapse-item>
+</smart-collapse>
+```
+
+```javascript
+Page({
+  data: {
+    activeNames: ['1'],
+  },
+  onChange(event) {
+    this.setData({
+      activeNames: event.detail,
+    });
+  },
+});
+```
+
+### 手风琴
+
+通过`accordion`可以设置为手风琴模式，最多展开一个面板，此时`activeName`为字符串格式。
+
+```html
+<smart-collapse accordion value="{{ activeName }}" bind:change="onChange">
+  <smart-collapse-item title="标题1" name="1">
+    代码是写出来给人看的，附带能在机器上运行
+  </smart-collapse-item>
+  <smart-collapse-item title="标题2" name="2">
+    代码是写出来给人看的，附带能在机器上运行
+  </smart-collapse-item>
+  <smart-collapse-item title="标题3" name="3">
+    代码是写出来给人看的，附带能在机器上运行
+  </smart-collapse-item>
+</smart-collapse>
+```
+
+```javascript
+Page({
+  data: {
+    activeName: '1',
+  },
+  onChange(event) {
+    this.setData({
+      activeName: event.detail,
+    });
+  },
+});
+```
+
+### 事件监听
+
+`smart-collapse` 提供了 `change`, `open` 和 `close` 事件。`change` 事件在面板切换时触发，`open` 事件在面板展开时触发，`close` 事件在面板关闭时触发。
+
+```html
+<smart-collapse
+  value="{{ activeNames }}"
+  bind:change="onChange"
+  bind:open="onOpen"
+  bind:close="onClose"
+>
+  <smart-collapse-item title="标题1" name="1">
+    代码是写出来给人看的，附带能在机器上运行
+  </smart-collapse-item>
+  <smart-collapse-item title="标题2" name="2">
+    代码是写出来给人看的，附带能在机器上运行
+  </smart-collapse-item>
+  <smart-collapse-item title="标题3" name="3">
+    代码是写出来给人看的，附带能在机器上运行
+  </smart-collapse-item>
+</smart-collapse>
+```
+
+```javascript
+Page({
+  data: {
+    activeNames: ['1'],
+  },
+  onChange(event) {
+    this.setData({
+      activeNames: event.detail,
+    });
+  },
+  onOpen(event) {
+    Toast(`展开: ${event.detail}`);
+  },
+  onClose(event) {
+    Toast(`关闭: ${event.detail}`);
+  },
+});
+```
+
+### 自定义标题内容
+
+```html
+<smart-collapse value="{{ activeNames }}" bind:change="onChange">
+  <smart-collapse-item name="1">
+    <view slot="title">标题1<smart-icon name="question-o" /></view>
+    代码是写出来给人看的，附带能在机器上运行
+  </smart-collapse-item>
+  <smart-collapse-item title="标题2" name="2" icon="shop-o">
+    代码是写出来给人看的，附带能在机器上运行
+  </smart-collapse-item>
+</smart-collapse>
+```
+
+```javascript
+Page({
+  data: {
+    activeNames: ['1'],
+  },
+  onChange(event) {
+    this.setData({
+      activeNames: event.detail,
+    });
+  },
+});
+```
+
+## API
+
+### Collapse Props
+
+| 参数      | 说明                | 类型                                                                   | 默认值  |
+| --------- | ------------------- | ---------------------------------------------------------------------- | ------- |
+| accordion | 是否开启手风琴模式  | _boolean_                                                              | `false` |
+| border    | 是否显示外边框      | _boolean_                                                              | `true`  |
+| value     | 当前展开面板的 name | 非手风琴模式：_(string \| number)[]_<br>手风琴模式：_string \| number_ | -       |
+
+### Collapse Event
+
+| 事件名 | 说明           | 参数                            |
+| ------ | -------------- | ------------------------------- |
+| change | 切换面板时触发 | activeNames: _string \| Array_  |
+| close  | 关闭面板时触发 | currentName: _string \| number_ |
+| open   | 展开面板时触发 | currentName: _string \| number_ |
+
+### CollapseItem Props
+
+| 参数      | 说明                                                       | 类型               | 默认值  |
+| --------- | ---------------------------------------------------------- | ------------------ | ------- |
+| border    | 是否显示内边框                                             | _boolean_          | `true`  |
+| clickable | 是否开启点击反馈                                           | _boolean_          | `false` |
+| disabled  | 是否禁用面板                                               | _boolean_          | `false` |
+| icon      | 标题栏左侧图标svg值或图片链接，可选值见 [Icon 组件](/material/smartui?comId=icon&appType=miniapp) | _string_           | -       |
+| is-link   | 是否展示标题栏右侧箭头并开启点击反馈                       | _boolean_          | `true`  |
+| label     | 标题栏描述信息                                             | _string_           | -       |
+| name      | 唯一标识符，默认为索引值                                   | _string \| number_ | `index` |
+| size      | 标题栏大小，可选值为`large`                                | _string_           | -       |
+| title     | 标题栏左侧内容                                             | _string \| number_ | -       |
+| value     | 标题栏右侧内容                                             | _string \| number_ | -       |
+
+### CollapseItem Slot
+
+| 名称       | 说明                                                                     |
+| ---------- | ------------------------------------------------------------------------ |
+| -          | 面板内容                                                                 |
+| icon       | 自定义`icon`                                                             |
+| right-icon | 自定义右侧按钮，默认是`arrow`, 需要将 `is-link` 设置为 `false`, 才会生效 |
+| title      | 自定义`title`                                                            |
+| value      | 自定义显示内容                                                           |
+
+### Collapse 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+
+### CollapseItem 外部样式类
+
+| 类名          | 说明         |
+| ------------- | ------------ |
+| content-class | 内容样式类   |
+| custom-class  | 根节点样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                                          | 默认值                                       | 描述                                       |
+| --------------------------------------------- | -------------------------------------------- | ------------------------------------------ |
+| --collapse-item-transition-duration           | _0.3s_                                       | 折叠项过渡持续时间                         |
+| --collapse-item-content-padding               | _15px_                                       | 折叠项内容内边距                           |
+| --collapse-item-content-font-size             | _13px_                                       | 折叠项内容字体大小                         |
+| --collapse-item-content-line-height           | _1.5_                                        | 折叠项内容行高                             |
+| --collapse-item-content-text-color            | _#969799_                                    | 折叠项内容文本颜色                         |
+| --collapse-item-content-background-color      | _var(--app-B6, #fff)_                        | 折叠项内容背景颜色                         |
+| --collapse-item-title-disabled-color          | _#c8c9cc_                                    | 折叠项标题禁用状态颜色                     |

package/lib/collapse/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}

package/lib/collapse/index.d.ts

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

package/lib/collapse/index.js

@@ -0,0 +1,48 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var relation_1 = require("../common/relation");
+(0, component_1.SmartComponent)({
+    relation: (0, relation_1.useChildren)('collapse-item'),
+    props: {
+        value: {
+            type: null,
+            observer: 'updateExpanded',
+        },
+        accordion: {
+            type: Boolean,
+            observer: 'updateExpanded',
+        },
+        border: {
+            type: Boolean,
+            value: true,
+        },
+    },
+    methods: {
+        updateExpanded: function () {
+            this.children.forEach(function (child) {
+                child.updateExpanded();
+            });
+        },
+        switch: function (name, expanded) {
+            var _a = this.data, accordion = _a.accordion, value = _a.value;
+            var changeItem = name;
+            if (!accordion) {
+                name = expanded
+                    ? (value || []).concat(name)
+                    : (value || []).filter(function (activeName) { return activeName !== name; });
+            }
+            else {
+                name = expanded ? name : '';
+            }
+            if (expanded) {
+                this.$emit('open', changeItem);
+            }
+            else {
+                this.$emit('close', changeItem);
+            }
+            this.$emit('change', name);
+            this.$emit('input', name);
+        },
+    },
+});

package/lib/collapse/index.json

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

package/lib/collapse/index.wxml

@@ -0,0 +1,3 @@
+<view class="custom-class smart-collapse {{ border ? 'smart-hairline--top-bottom' : '' }}">
+  <slot />
+</view>

package/lib/collapse/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}

package/lib/collapse-item/animate.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="miniprogram-api-typings" />
+export declare function setContentAnimate(context: WechatMiniprogram.Component.TrivialInstance, expanded: boolean, mounted: boolean): void;

package/lib/collapse-item/animate.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.setContentAnimate = void 0;
+var utils_1 = require("../common/utils");
+function useAnimation(context, expanded, mounted, height) {
+    var animation = wx.createAnimation({
+        duration: 0,
+        timingFunction: 'ease-in-out',
+    });
+    if (expanded) {
+        if (height === 0) {
+            animation.height('auto').top(1).step();
+        }
+        else {
+            animation
+                .height(height)
+                .top(1)
+                .step({
+                duration: mounted ? 300 : 1,
+            })
+                .height('auto')
+                .step();
+        }
+        context.setData({
+            animation: animation.export(),
+        });
+        return;
+    }
+    animation.height(height).top(0).step({ duration: 1 }).height(0).step({
+        duration: 300,
+    });
+    context.setData({
+        animation: animation.export(),
+    });
+}
+function setContentAnimate(context, expanded, mounted) {
+    (0, utils_1.getRect)(context, '.smart-collapse-item__content')
+        .then(function (rect) { return rect.height; })
+        .then(function (height) {
+        useAnimation(context, expanded, mounted, height);
+    });
+}
+exports.setContentAnimate = setContentAnimate;

package/lib/collapse-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-collapse-item__title .smart-cell__right-icon{transform:rotate(90deg);transition:transform var(--collapse-item-transition-duration,.3s)}.smart-collapse-item__title--expanded .smart-cell__right-icon{transform:rotate(-90deg)}.smart-collapse-item__title--disabled .smart-cell,.smart-collapse-item__title--disabled .smart-cell__right-icon{color:var(--collapse-item-title-disabled-color,#c8c9cc)!important}.smart-collapse-item__title--disabled .smart-cell--hover{background-color:#fff!important}.smart-collapse-item__wrapper{overflow:hidden}.smart-collapse-item__content{background-color:var(--collapse-item-content-background-color,var(--app-B6,#fff));color:var(--collapse-item-content-text-color,#969799);font-size:var(--collapse-item-content-font-size,13px);line-height:var(--collapse-item-content-line-height,1.5);padding:var(--collapse-item-content-padding,15px)}

package/lib/collapse-item/index.d.ts

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

package/lib/collapse-item/index.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var relation_1 = require("../common/relation");
+var animate_1 = require("./animate");
+(0, component_1.SmartComponent)({
+    classes: ['title-class', 'content-class'],
+    relation: (0, relation_1.useParent)('collapse'),
+    props: {
+        size: String,
+        name: null,
+        title: null,
+        value: null,
+        icon: String,
+        label: String,
+        disabled: Boolean,
+        clickable: Boolean,
+        border: {
+            type: Boolean,
+            value: true,
+        },
+        isLink: {
+            type: Boolean,
+            value: true,
+        },
+    },
+    data: {
+        expanded: false,
+    },
+    mounted: function () {
+        this.updateExpanded();
+        this.mounted = true;
+    },
+    methods: {
+        updateExpanded: function () {
+            if (!this.parent) {
+                return;
+            }
+            var _a = this.parent.data, value = _a.value, accordion = _a.accordion;
+            var _b = this.parent.children, children = _b === void 0 ? [] : _b;
+            var name = this.data.name;
+            var index = children.indexOf(this);
+            var currentName = name == null ? index : name;
+            var expanded = accordion
+                ? value === currentName
+                : (value || []).some(function (name) { return name === currentName; });
+            // 执行动画前清除其他折叠块的动画
+            this.setData({ animation: null });
+            if (expanded !== this.data.expanded) {
+                (0, animate_1.setContentAnimate)(this, expanded, this.mounted);
+            }
+            this.setData({ index: index, expanded: expanded });
+        },
+        onClick: function () {
+            if (this.data.disabled) {
+                return;
+            }
+            var _a = this.data, name = _a.name, expanded = _a.expanded;
+            var index = this.parent.children.indexOf(this);
+            var currentName = name == null ? index : name;
+            this.parent.switch(currentName, !expanded);
+        },
+    },
+});

package/lib/collapse-item/index.json

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

package/lib/collapse-item/index.wxml

@@ -0,0 +1,45 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+
+<view class="smart-collapse-item custom-class {{ index !== 0 ? 'smart-hairline--top' : '' }}">
+  <smart-cell
+    size="{{ size }}"
+    title="{{ title }}"
+    title-class="title-class"
+    icon="{{ icon }}"
+    value="{{ value }}"
+    label="{{ label }}"
+    is-link="{{ isLink }}"
+    clickable="{{ clickable }}"
+    border="{{ border && expanded }}"
+    class="{{ utils.bem('collapse-item__title', { disabled, expanded }) }}"
+    right-icon-class="smart-cell__right-icon"
+    custom-class="smart-cell"
+    hover-class="smart-cell--hover"
+    bind:click="onClick"
+  >
+    <slot
+      name="title"
+      slot="title"
+    />
+    <slot
+      name="icon"
+      slot="icon"
+    />
+    <slot name="value" />
+    <slot
+      name="right-icon"
+      slot="right-icon"
+    />
+  </smart-cell>
+  <view
+    class="{{ utils.bem('collapse-item__wrapper') }}"
+    style="height: 0;"
+    animation="{{ animation }}"
+  >
+    <view
+      class="smart-collapse-item__content content-class"
+    >
+      <slot />
+    </view>
+  </view>
+</view>

package/lib/collapse-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-collapse-item__title .smart-cell__right-icon{transform:rotate(90deg);transition:transform var(--collapse-item-transition-duration,.3s)}.smart-collapse-item__title--expanded .smart-cell__right-icon{transform:rotate(-90deg)}.smart-collapse-item__title--disabled .smart-cell,.smart-collapse-item__title--disabled .smart-cell__right-icon{color:var(--collapse-item-title-disabled-color,#c8c9cc)!important}.smart-collapse-item__title--disabled .smart-cell--hover{background-color:#fff!important}.smart-collapse-item__wrapper{overflow:hidden}.smart-collapse-item__content{background-color:var(--collapse-item-content-background-color,var(--app-B6,#fff));color:var(--collapse-item-content-text-color,#969799);font-size:var(--collapse-item-content-font-size,13px);line-height:var(--collapse-item-content-line-height,1.5);padding:var(--collapse-item-content-padding,15px)}

package/lib/common/README.md

@@ -0,0 +1,71 @@
+# 内置样式
+
+### 介绍
+
+Smart UI 中默认包含了一些常用样式，可以直接通过 className 的方式使用。
+
+### 引入
+
+在 app.wxss 中引入内置样式。
+
+```css
+@import '@tuya/miniapp-smart-ui/common/index.wxss';
+```
+
+## 代码演示
+
+### 文字省略
+
+当文本内容长度超过容器最大宽度时，自动省略多余的文本。
+
+```xml
+<view class="smart-ellipsis">
+  这是一段宽度限制 250px 的文字，后面的内容会省略。
+</view>
+
+<!-- 最多显示两行 -->
+<view class="smart-multi-ellipsis--l2">
+  这是一段最多显示两行的文字，后面的内容会省略。
+</view>
+
+<!-- 最多显示三行 -->
+<view class="smart-multi-ellipsis--l3">
+  这是一段最多显示三行的文字，后面的内容会省略。
+</view>
+```
+
+### 1px 边框
+
+为元素添加 Retina 屏幕下的 1px 边框（即 hairline），基于伪类 transform 实现。
+
+```xml
+<!-- 上边框 -->
+<view class="smart-hairline--top"></view>
+
+<!-- 下边框 -->
+<view class="smart-hairline--bottom"></view>
+
+<!-- 左边框 -->
+<view class="smart-hairline--left"></view>
+
+<!-- 右边框 -->
+<view class="smart-hairline--right"></view>
+
+<!-- 上下边框 -->
+<view class="smart-hairline--top-bottom"></view>
+
+<!-- 全边框 -->
+<view class="smart-hairline--surround"></view>
+```
+
+### 全局字体
+
+推荐在 app.wxss 中设置以下全局字体，以保证在不同设备上提供最佳的视觉体验。
+
+```css
+page {
+  font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica,
+    Segoe UI, Arial, Roboto, 'PingFang SC', 'miui', 'Hiragino Sans GB', 'Microsoft Yahei',
+    sans-serif;
+}
+```

package/lib/common/appLog.d.ts

@@ -0,0 +1,10 @@
+export declare const init: (tag: string) => any;
+export declare const info: (data: any, devId?: string) => void;
+export declare const warn: (data: any, devId?: string) => void;
+export declare const error: (data: any, devId?: string) => void;
+declare const _default: {
+    info: (data: any, devId?: string | undefined) => void;
+    warn: (data: any, devId?: string | undefined) => void;
+    error: (data: any, devId?: string | undefined) => void;
+};
+export default _default;