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

package/lib/cascader/index.js

@@ -0,0 +1,211 @@
+"use strict";
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var Xmark_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Xmark"));
+(0, component_1.SmartComponent)({
+    props: {
+        title: String,
+        value: {
+            type: String,
+        },
+        placeholder: {
+            type: String,
+            value: 'Please select',
+        },
+        activeColor: {
+            type: String,
+            value: '#1989fa',
+        },
+        options: {
+            type: Array,
+            value: [],
+        },
+        swipeable: {
+            type: Boolean,
+            value: false,
+        },
+        closeable: {
+            type: Boolean,
+            value: true,
+        },
+        ellipsis: {
+            type: Boolean,
+            value: true,
+        },
+        swipeThreshold: {
+            type: Number,
+            value: 5,
+        },
+        showHeader: {
+            type: Boolean,
+            value: true,
+        },
+        closeIcon: {
+            type: String,
+            value: Xmark_1.default,
+        },
+        closeIconAriaLabel: {
+            type: String,
+            value: '',
+        },
+        useTitleSlot: Boolean,
+    },
+    data: {
+        tabs: [],
+        activeTab: 0,
+        innerValue: '',
+    },
+    watch: {
+        options: function () {
+            this.updateTabs();
+        },
+        value: function (newVal) {
+            this.updateValue(newVal);
+        },
+    },
+    created: function () {
+        this.updateTabs();
+    },
+    methods: {
+        updateValue: function (val) {
+            if (val !== undefined) {
+                var values = this.data.tabs.map(function (tab) { return tab.selected && tab.selected.value; });
+                if (values.indexOf(val) > -1) {
+                    return;
+                }
+            }
+            this.innerValue = val;
+            this.updateTabs();
+        },
+        getSelectedOptionsByValue: function (options, value) {
+            for (var i = 0; i < options.length; i++) {
+                var option = options[i];
+                if (option.value === value) {
+                    return [option];
+                }
+                if (option.options) {
+                    var selectedOptions = this.getSelectedOptionsByValue(option.options, value);
+                    if (selectedOptions) {
+                        return __spreadArray([option], selectedOptions, true);
+                    }
+                }
+            }
+        },
+        updateTabs: function () {
+            var _this = this;
+            var options = this.data.options;
+            var innerValue = this.innerValue;
+            if (!options.length) {
+                return;
+            }
+            if (innerValue !== undefined) {
+                var selectedOptions = this.getSelectedOptionsByValue(options, innerValue);
+                if (selectedOptions) {
+                    var optionsCursor_1 = options;
+                    var tabs_1 = selectedOptions.map(function (option) {
+                        var tab = {
+                            options: optionsCursor_1,
+                            selected: option,
+                        };
+                        var next = optionsCursor_1.find(function (item) { return item.value === option.value; });
+                        if (next) {
+                            optionsCursor_1 = next.options;
+                        }
+                        return tab;
+                    });
+                    if (optionsCursor_1) {
+                        tabs_1.push({
+                            options: optionsCursor_1,
+                            selected: null,
+                        });
+                    }
+                    this.setData({
+                        tabs: tabs_1,
+                    });
+                    wx.nextTick(function () {
+                        _this.setData({
+                            activeTab: tabs_1.length - 1,
+                        });
+                    });
+                    return;
+                }
+            }
+            this.setData({
+                tabs: [
+                    {
+                        options: options,
+                        selected: null,
+                    },
+                ],
+                activeTab: 0,
+            });
+        },
+        onClose: function () {
+            this.$emit('close');
+        },
+        onClickTab: function (e) {
+            var _a = e.detail, tabIndex = _a.index, title = _a.title;
+            this.$emit('click-tab', { title: title, tabIndex: tabIndex });
+            this.setData({
+                activeTab: tabIndex,
+            });
+        },
+        // 选中
+        onSelect: function (e) {
+            var _this = this;
+            var _a = e.currentTarget.dataset, option = _a.option, tabIndex = _a.tabIndex;
+            if (option && option.disabled) {
+                return;
+            }
+            var tabs = this.data.tabs;
+            tabs[tabIndex].selected = option;
+            if (tabs.length > tabIndex + 1) {
+                tabs = tabs.slice(0, tabIndex + 1);
+            }
+            if (option.options) {
+                var nextTab = {
+                    options: option.options,
+                    selected: null,
+                };
+                if (tabs[tabIndex + 1]) {
+                    tabs[tabIndex + 1] = nextTab;
+                }
+                else {
+                    tabs.push(nextTab);
+                }
+                wx.nextTick(function () {
+                    _this.setData({
+                        activeTab: tabIndex + 1,
+                    });
+                });
+            }
+            this.setData({
+                tabs: tabs,
+            });
+            var selectedOptions = tabs.map(function (tab) { return tab.selected; }).filter(Boolean);
+            var value = option.value;
+            var params = {
+                value: value,
+                tabIndex: tabIndex,
+                selectedOptions: selectedOptions,
+            };
+            this.innerValue = value;
+            this.$emit('change', params);
+            if (!option.options) {
+                this.$emit('finish', params);
+            }
+        },
+    },
+});

package/lib/cascader/index.json

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

package/lib/cascader/index.wxml

@@ -0,0 +1,58 @@
+<wxs src="./index.wxs" module="utils" />
+
+<view wx:if="{{ showHeader }}" class="smart-cascader__header">
+  <slot name="title" wx:if="{{ useTitleSlot }}"></slot>
+  <text class="smart-cascader__title" wx:else>{{ title }}</text>
+  <smart-icon
+    wx:if="{{ closeable }}"
+    name="{{ closeIcon }}"
+    aria-role="button"
+    class="smart-cascader__close-icon"
+    aria-label="{{ closeIconAriaLabel }}"
+    bind:tap="onClose"
+  />
+</view>
+
+<smart-tabs
+  active="{{ activeTab }}"
+  custom-class="smart-cascader__tabs"
+  wrap-class="smart-cascader__tabs-wrap"
+  tab-class="smart-cascader__tab"
+  color="{{ activeColor }}"
+  border="{{ false }}"
+  swipeable="{{ swipeable }}"
+  ellipsis="{{ ellipsis }}"
+  swipe-threshold="{{ swipeThreshold }}"
+  bind:click="onClickTab"
+>
+  <smart-tab
+    wx:for="{{ tabs }}"
+    wx:for-item="tab"
+    wx:for-index="tabIndex"
+    wx:key="tabIndex"
+    title="{{ tab.selected ? tab.selected.text : placeholder }}"
+    style="width: 100%;"
+    title-style="{{ !tab.selected ? 'color: var(--cascader-tab-inactive-color, var(--app-B6-N5, rgba(0, 0, 0, 0.3)));font-weight:normal;' : '' }}"
+  >
+    <!-- 暂不支持 -->
+    <!-- <slot name="options-top"></slot> -->
+
+    <scroll-view class="smart-cascader__options" scroll-y>
+      <view
+        wx:for="{{ tab.options }}"
+        wx:for-item="option"
+        wx:key="index"
+        class="{{ option.className }} {{ utils.optionClass(tab, option) }}"
+        style="{{ utils.optionStyle({ tab, option, activeColor }) }}"
+        data-option="{{ option }}"
+        data-tab-index="{{ tabIndex }}"
+        bind:tap="onSelect"
+      >
+        <text>{{ option.text }}</text>
+        <smart-icon wx:if="{{ utils.isSelected(tab, option) }}" name="success" size="18" />
+      </view>
+    </scroll-view>
+    <!-- 暂不支持 -->
+    <!-- <slot name="options-bottom"></slot> -->
+  </smart-tab>
+</smart-tabs>

package/lib/cascader/index.wxs

@@ -0,0 +1,21 @@
+var utils = require('../wxs/utils.wxs');
+var style = require('../wxs/style.wxs');
+
+function isSelected(tab, option) {
+  return tab.selected && tab.selected.value === option.value;
+}
+
+function optionClass(tab, option) {
+  return utils.bem('cascader__option', { selected: isSelected(tab, option), disabled: option.disabled });
+}
+
+function optionStyle(data) {
+  var color = data.option.color || (isSelected(data.tab, data.option) ? data.activeColor : undefined);
+  return style({ color: color });
+}
+
+module.exports = {
+  isSelected: isSelected,
+  optionClass: optionClass,
+  optionStyle: optionStyle,
+};

package/lib/cascader/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-cascader__header{align-items:center;display:flex;height:48px;justify-content:space-between;padding:0 16px}.smart-cascader__title{font-size:16px;font-weight:600;line-height:20px}.smart-cascader__close-icon{color:#c8c9cc;font-size:22px;height:22px}.smart-cascader__tabs-wrap{height:48px!important;padding:0 8px}.smart-cascader__tab{--tabs-card-text-color:var(--cascader-tab-color,var(--app-B6-N1,#000));flex:none!important;font-weight:600!important;padding:0 8px!important}.smart-cascader__tab--unselected{color:#969799!important;font-weight:400!important}.smart-cascader__option{align-items:center;cursor:pointer;display:flex;font-size:14px;justify-content:space-between;line-height:20px;padding:10px 16px}.smart-cascader__option:active{background-color:var(--cascader-active-background-color,var(--app-B1,#f6f7fb))}.smart-cascader__option--selected{color:#1989fa;font-weight:600}.smart-cascader__option--disabled{color:#c8c9cc;cursor:not-allowed}.smart-cascader__option--disabled:active{background-color:initial}.smart-cascader__options{-webkit-overflow-scrolling:touch;box-sizing:border-box;height:384px;overflow-y:auto;padding-top:6px}

package/lib/cell/README.md

@@ -0,0 +1,243 @@
+---
+category: 展示
+---
+
+# Cell 单元格
+
+### 介绍
+
+单元格为列表中的单个展示项。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-cell": "@tuya/miniapp-smart-ui/lib/cell/index",
+  "smart-cell-group": "@tuya/miniapp-smart-ui/lib/cell-group/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+`Cell`可以单独使用，也可以与`CellGroup`搭配使用。`CellGroup`可以为`Cell`提供上下外边框。
+
+```html
+<smart-cell-group>
+  <smart-cell title="单元格" value="内容" is-link />
+  <smart-cell title="单元格" value="内容" label="描述信息" is-link />
+</smart-cell-group>
+```
+
+### 卡片风格
+
+通过 `CellGroup` 的 `inset` `v1.7.2` 属性，可以将单元格转换为圆角卡片风格, `inset-border-radius` `v2.6.2` 可以设置圆角的值。
+
+```html
+<smart-cell-group inset inset-border-radius="{{ 12 }}">
+  <smart-cell title="单元格" value="内容" is-link />
+  <smart-cell title="单元格" value="内容" label="描述信息" is-link />
+</smart-cell-group>
+```
+
+### 展示图标
+
+通过`icon`属性在标题左侧展示图标。
+
+```html
+<smart-cell-group>
+  <smart-cell title="单元格" value="内容" icon="{{ sunMaxFill }}" is-link />
+  <smart-cell title="自定义 Icon" value="内容" is-link>
+    <smart-icon class="cell-icon" slot="icon" name="{{ sunMaxFill }}" size="24px" color="#3678E3" />
+  </smart-cell>
+</smart-cell-group>
+```
+
+### 展示箭头
+
+设置`is-link`属性后会在单元格右侧显示箭头，并且可以通过`arrow-direction`属性控制箭头方向。
+
+```html
+<smart-cell-group>
+  <smart-cell title="单元格" is-link />
+  <smart-cell title="单元格" is-link value="内容" />
+  <smart-cell title="单元格" is-link value="内容" arrow-direction="down" />
+</smart-cell-group>
+```
+
+### 页面跳转
+
+可以通过`url`属性进行页面跳转，通过`link-type`属性控制跳转类型。
+
+```html
+<smart-cell-group>
+  <smart-cell title="URL跳转(navigateTo)" is-link url="/pages/dashboard/index" />
+  <smart-cell
+    title="URL重定向(redirectTo)"
+    is-link
+    url="/pages/dashboard/index"
+    link-type="redirectTo"
+  />
+  <smart-cell title="打开H5容器(openInnerH5)" is-link bind:click="onNavTo" />
+</smart-cell-group>
+```
+
+### 分组标题
+
+通过`CellGroup`的`title`属性可以指定分组标题。
+
+```html
+<smart-cell-group title="分组 1">
+  <smart-cell title="单元格" is-link />
+</smart-cell-group>
+<smart-cell-group title="分组 2">
+  <smart-cell title="单元格" is-link />
+</smart-cell-group>
+```
+
+### 其他类型
+
+也可配合其他组件进行展示
+
+```html
+<smart-cell-group>
+  <smart-cell title="Title">
+    <smart-switch checked="{{ true }}" size="24px" />
+  </smart-cell>
+  <smart-cell title="Title">
+    <smart-icon name="{{ checkMark }}" color="#3678E3" size="28px" />
+  </smart-cell>
+  <smart-cell title="Title">
+    <smart-checkbox value="{{ false }}" shape="square" />
+  </smart-cell>
+  <smart-cell title="Title">
+    <smart-checkbox value="{{ false }}" />
+  </smart-cell>
+  <smart-cell title="Title" label="Bedroom" is-link>
+    <smart-icon
+      class="cell-icon"
+      slot="icon"
+      name="https://static1.tuyacn.com/static/tuya-miniapp-doc/_next/static/images/logo-small.png"
+      size="50px"
+    />
+  </smart-cell>
+</smart-cell-group>
+```
+
+### 使用插槽
+
+如以上用法不能满足你的需求，可以使用插槽来自定义内容。
+
+```html
+<smart-cell-group>
+  <smart-cell value="内容" icon="{{ sunMaxFill }}" is-link>
+    <view slot="title">
+      <view class="title">单元格</view>
+      <smart-tag type="danger">标签</smart-tag>
+    </view>
+  </smart-cell>
+  <smart-cell title="单元格">
+    <smart-icon slot="right-icon" name="search" />
+  </smart-cell>
+</smart-cell-group>
+```
+
+## API
+
+### CellGroup Props
+
+| 参数                         | 说明                   | 类型               | 默认值  |
+| ---------------------------- | ---------------------- | ------------------ | ------- |
+| border                       | 是否显示外边框         | _boolean_          | `true`  |
+| inset                        | 是否展示为圆角卡片风格 | _boolean_          | `false` |
+| title                        | 分组标题               | _string_           | `-`     |
+| inset-border-radius `v2.6.2` | 圆角卡片风格时的圆角值 | _string \| number_ | `-`     |
+
+### CellGroup 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+
+### Cell Props
+
+| 参数            | 说明                                                                                                                                       | 类型               | 默认值       |
+| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------ | ------------ |
+| arrow-direction | 箭头方向，可选值为 `left` `up` `down`                                                                                                      | _string_           | -            |
+| border          | 是否显示下边框                                                                                                                             | _boolean_          | `true`       |
+| clickable       | 是否开启点击反馈                                                                                                                           | _boolean_          | `false`      |
+| icon            | 左侧图标 svg 值或图片链接，可选值见 [Icon 组件](/material/smartui?comId=icon&appType=miniapp)                                              | _string_           | -            |
+| is-link         | 是否展示右侧箭头并开启点击反馈                                                                                                             | _boolean_          | `false`      |
+| label           | 标题下方的描述信息                                                                                                                         | _string_           | -            |
+| link-type       | 链接跳转类型，可选值为 `redirectTo` [`switchTab`](https://developers.weixin.qq.com/miniprogram/dev/api/route/wx.switchTab.html) `reLaunch` | _string_           | `navigateTo` |
+| required        | 是否显示表单必填星号                                                                                                                       | _boolean_          | `false`      |
+| title           | 左侧标题                                                                                                                                   | _string \| number_ | -            |
+| title-style     | 标题样式                                                                                                                                   | _string_           | -            |
+| title-width     | 标题宽度，须包含单位                                                                                                                       | _string_           | -            |
+| url             | 点击后跳转的链接地址                                                                                                                       | _string_           | -            |
+| use-label-slot  | 是否使用 label slot                                                                                                                        | _boolean_          | `false`      |
+| value           | 右侧内容                                                                                                                                   | _string \| number_ | -            |
+
+### Cell Event
+
+| 事件名     | 说明             | 参数 |
+| ---------- | ---------------- | ---- |
+| bind:click | 点击单元格时触发 | -    |
+
+### Cell Slot
+
+| 名称       | 说明                                                           |
+| ---------- | -------------------------------------------------------------- |
+| -          | 自定义`value`显示内容，如果设置了`value`属性则不生效           |
+| icon       | 自定义`icon`显示内容，如果设置了`icon`属性则不生效             |
+| label      | 自定义`label`显示内容，需要设置 `use-label-slot`属性           |
+| right-icon | 自定义右侧按钮，默认是`arrow`，如果设置了`is-link`属性则不生效 |
+| title      | 自定义`title`显示内容，如果设置了`title`属性则不生效           |
+
+### Cell 外部样式类
+
+| 类名         | 说明           |
+| ------------ | -------------- |
+| custom-class | 根节点样式类   |
+| label-class  | 描述信息样式类 |
+| title-class  | 标题样式类     |
+| value-class  | 右侧内容样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                                  | 默认值                                            | 描述                     |
+| ------------------------------------- | ------------------------------------------------- | ------------------------ |
+| --cell-font-size                      | _16px_                                            | 单元格字体大小           |
+| --cell-line-height                    | _24px_                                            | 单元格行高               |
+| --cell-vertical-padding               | _16px_                                            | 单元格垂直内边距         |
+| --cell-horizontal-padding             | _16px_                                            | 单元格水平内边距         |
+| --cell-text-color                     | _var(--app-B6-N1, rgba(0, 0, 0, 1))_              | 单元格文字颜色           |
+| --cell-background-color               | _var(--app-B6, #fff)_                             | 单元格背景颜色           |
+| --cell-active-color                   | _var(--app-B1, #f6f7fb)_                          | 单元格激活颜色           |
+| --cell-required-color                 | _var(--app-M2, #f04c4c)_                          | 单元格必填项颜色         |
+| --cell-label-color                    | _var(--app-B6-N3, rgba(0, 0, 0, 0.5))_            | 单元格标签文字颜色       |
+| --cell-label-font-size                | _14px_                                            | 单元格标签字体大小       |
+| --cell-label-line-height              | _18px_                                            | 单元格标签行高           |
+| --cell-label-margin-top               | _3px_                                             | 单元格标签上边距         |
+| --cell-value-color                    | _var(--app-B6-N3, rgba(0, 0, 0, 0.5))_            | 单元格值文字颜色         |
+| --cell-value-max-width `v2.13.4`      | _none_                                            | 单元格值区域最大宽度，超出部分隐藏；默认不限制 |
+| --cell-value-margin-left `v2.13.4`    | _8px_                                             | 单元格值区域与标题的间距 |
+| --cell-value-flex `v2.13.5`           | _0 1 auto_                                        | 单元格值区域的 flex 行为；默认按内容宽度、不占据剩余空间，内容需撑满整行时设为 `1` |
+| --cell-icon-size                      | _24px_                                            | 单元格图标大小           |
+| --cell-right-icon-color               | _var(--app-B6-N6, rgba(0, 0, 0, 0.2))_            | 单元格右侧图标颜色       |
+| --cell-border-color `v2.1.4`          | _var(--app-B6-N7, rgba(0, 0, 0, 0.1))_            | 单元格边框颜色           |
+| --cell-border-left-position `v2.1.4`  | _16px_                                            | 单元格左边框位置         |
+| --cell-border-right-position `v2.1.4` | _16px_                                            | 单元格右边框位置         |
+| --cell-group-background-color         | _var(--app-B6, #fff)_                             | 单元格组背景颜色         |
+| --cell-group-title-color              | _var(--app-B6-N3, rgba(0, 0, 0, 0.5))_            | 单元格组标题颜色         |
+| --cell-group-title-padding            | _@padding-md @padding-md @padding-xs_             | 单元格组标题内边距       |
+| --cell-group-title-font-size          | _16px_                                            | 单元格组标题字体大小     |
+| --cell-group-title-line-height        | _16px_                                            | 单元格组标题行高         |
+| --cell-group-inset-padding            | _0 @padding-md_                                   | 单元格组嵌入内边距       |
+| --cell-group-inset-border-radius      | _16px_                                            | 单元格组嵌入边框圆角半径 |
+| --cell-group-inset-title-padding      | _@padding-md @padding-md @padding-xs @padding-xl_ | 单元格组嵌入标题内边距   |

package/lib/cell/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-cell{align-items:center;background-color:var(--cell-background-color,var(--app-B6,#fff));box-sizing:border-box;color:var(--cell-text-color,var(--app-B6-N1,#000));display:flex;font-size:var(--cell-font-size,16px);line-height:var(--cell-line-height,24px);padding:var(--cell-vertical-padding,16px) var(--cell-horizontal-padding,16px);position:relative;width:100%}.smart-cell:after{border-bottom:1px solid var(--cell-border-color,var(--app-B6-N7,rgba(0,0,0,.1)));bottom:0;box-sizing:border-box;content:" ";left:var(--cell-border-left-position,16px);pointer-events:none;position:absolute;right:var(--cell-border-right-position,16px);transform:scaleY(.5);transform-origin:center}.smart-cell--borderless:after{display:none}.smart-cell-group{background-color:var(--cell-background-color,var(--app-B6,#fff))}.smart-cell__label{color:var(--cell-label-color,var(--app-B6-N3,rgba(0,0,0,.5)));font-size:var(--cell-label-font-size,14px);line-height:var(--cell-label-line-height,18px);margin-top:var(--cell-label-margin-top,3px)}.smart-cell__title{align-items:flex-start;display:flex;flex:1;flex-direction:column;justify-content:center}.smart-cell__title:empty{display:none}.smart-cell__value{align-items:center;color:var(--cell-value-color,var(--app-B6-N3,rgba(0,0,0,.5)));display:flex;flex:var(--cell-value-flex,0 1 auto);justify-content:flex-end;margin-left:var(--cell-value-margin-left,8px);max-width:var(--cell-value-max-width,none);overflow:hidden;text-align:right;vertical-align:middle}.smart-cell__value:empty{display:none}.smart-cell__left-icon-wrap,.smart-cell__right-icon-wrap{align-items:center;display:flex;font-size:var(--cell-icon-size,24px);height:var(--cell-line-height,24px)}.smart-cell__left-icon-wrap{margin-right:var(--padding-base,4px)}.smart-cell__right-icon-wrap{color:var(--cell-right-icon-color,var(--app-B6-N6,rgba(0,0,0,.2)));margin-left:var(--padding-base,4px)}.smart-cell__left-icon{vertical-align:middle}.smart-cell__left-icon,.smart-cell__right-icon{line-height:var(--cell-line-height,24px)}.smart-cell__right-icon>view{background:var(--cell-right-icon-color,var(--app-B6-N6,rgba(0,0,0,.2)))}.smart-cell--clickable.smart-cell--hover{background-color:var(--cell-active-color,var(--app-B1,#f6f7fb))}.smart-cell--required{overflow:visible}.smart-cell--required:before{color:var(--cell-required-color,var(--app-M2,#f04c4c));content:"*";font-size:var(--cell-font-size,16px);left:var(--padding-xs,8px);position:absolute}

package/lib/cell/index.d.ts

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

package/lib/cell/index.js

@@ -0,0 +1,48 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+var Up_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Up"));
+var Down_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Down"));
+var Left_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Left"));
+var Right_1 = __importDefault(require("@tuya-miniapp/icons/dist/svg/Right"));
+var link_1 = require("../mixins/link");
+var component_1 = require("../common/component");
+(0, component_1.SmartComponent)({
+    classes: ['title-class', 'label-class', 'value-class', 'right-icon-class', 'hover-class'],
+    mixins: [link_1.link],
+    props: {
+        title: null,
+        value: null,
+        icon: String,
+        label: String,
+        isLink: Boolean,
+        required: Boolean,
+        clickable: Boolean,
+        titleWidth: String,
+        customStyle: String,
+        arrowDirection: String,
+        useLabelSlot: Boolean,
+        border: {
+            type: Boolean,
+            value: true,
+        },
+        titleStyle: String,
+    },
+    data: {
+        arrowIcons: {
+            up: Up_1.default,
+            down: Down_1.default,
+            left: Left_1.default,
+            right: Right_1.default,
+        },
+        arrowIcon: Right_1.default,
+    },
+    methods: {
+        onClick: function (event) {
+            this.$emit('click', event.detail);
+            this.jumpLink();
+        },
+    },
+});

package/lib/cell/index.json

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

package/lib/cell/index.wxml

@@ -0,0 +1,47 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<view
+  class="custom-class {{ utils.bem('cell', [{ required, borderless: !border, clickable: isLink || clickable }]) }}"
+  hover-class="smart-cell--hover hover-class"
+  hover-stay-time="70"
+  style="{{ customStyle }}"
+  bind:tap="onClick"
+>
+  <smart-icon
+    wx:if="{{ icon }}"
+    name="{{ icon }}"
+    class="smart-cell__left-icon-wrap"
+    custom-class="smart-cell__left-icon"
+  />
+  <slot wx:else name="icon" />
+
+  <view
+    style="{{ computed.titleStyle({ titleWidth, titleStyle }) }}"
+    class="smart-cell__title title-class"
+  >
+
+    <block wx:if="{{ title }}">{{ title }}</block>
+    <slot wx:else name="title" />
+
+    <view wx:if="{{ label || useLabelSlot }}" class="smart-cell__label label-class">
+      <slot wx:if="{{ useLabelSlot }}" name="label" />
+      <block wx:elif="{{ label }}">{{ label }}</block>
+    </view>
+  </view>
+
+  <view class="smart-cell__value value-class">
+    <block wx:if="{{ value || value === 0 }}">{{ value }}</block>
+    <slot wx:else />
+  </view>
+
+  <smart-icon
+    wx:if="{{ isLink }}"
+    name="{{ arrowDirection ? arrowIcons[arrowDirection] : arrowIcons.right }}"
+    class="smart-cell__right-icon-wrap right-icon-class"
+    custom-class="smart-cell__right-icon"
+  />
+  <slot wx:else name="right-icon" />
+
+  <slot name="extra" />
+</view>