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

package/lib/popover/README.md

@@ -0,0 +1,249 @@
+---
+category: 反馈
+new: true
+version: v2.3.0
+---
+
+# Popover 弹出提示
+
+### 介绍
+
+v2.3.0 版本后开始加入，弹出层容器，用于展示弹窗、信息提示等轻量内容。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-popover": "@tuya/miniapp-smart-ui/lib/popover/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<smart-popover placement="bottomLeft" show="{{show}}" bind:show-change="onShow">
+  <smart-button>下左弹出</smart-button>
+  <view slot="overlay">
+    <smart-cell-group inset>
+      <smart-cell
+        title="Title"
+      >
+        <smart-icon
+          class="cell-icon"
+          slot="icon"
+          name="{{ sunMaxFill }}"
+          size="24px"
+          color="#3678E3"
+        />
+      </smart-cell>
+      <smart-cell
+        title="Title"
+        border="{{ false }}"
+      >
+        <smart-icon
+          class="cell-icon"
+          slot="icon"
+          name="{{ sunMaxFill }}"
+          size="24px"
+          color="#3678E3"
+        />
+      </smart-cell>
+    </smart-cell-group>
+  </view>
+</smart-popover>
+
+<smart-popover placement="bottom">
+  <smart-button>下方弹出</smart-button>
+  <view slot="overlay">
+    <smart-cell-group inset>
+      <smart-cell
+        title="Title"
+      >
+        <smart-icon
+          class="cell-icon"
+          slot="icon"
+          name="{{ sunMaxFill }}"
+          size="24px"
+          color="#3678E3"
+        />
+      </smart-cell>
+      <smart-cell
+        title="Title"
+        border="{{ false }}"
+      >
+        <smart-icon
+          class="cell-icon"
+          slot="icon"
+          name="{{ sunMaxFill }}"
+          size="24px"
+          color="#3678E3"
+        />
+      </smart-cell>
+    </smart-cell-group>
+  </view>
+</smart-popover>
+
+<smart-popover placement="bottomRight">
+  <smart-button>下右弹出</smart-button>
+  <view slot="overlay">
+    <smart-cell-group inset>
+      <smart-cell
+        title="Title"
+      >
+        <smart-icon
+          class="cell-icon"
+          slot="icon"
+          name="{{ sunMaxFill }}"
+          size="24px"
+          color="#3678E3"
+        />
+      </smart-cell>
+      <smart-cell
+        title="Title"
+        border="{{ false }}"
+      >
+        <smart-icon
+          class="cell-icon"
+          slot="icon"
+          name="{{ sunMaxFill }}"
+          size="24px"
+          color="#3678E3"
+        />
+      </smart-cell>
+    </smart-cell-group>
+  </view>
+</smart-popover>
+
+<smart-popover placement="top">
+  <smart-button>上方弹出</smart-button>
+  <view slot="overlay">
+    tip
+  </view>
+</smart-popover>
+<smart-popover placement="left">
+  <smart-button>左侧弹出</smart-button>
+  <view slot="overlay">
+    tip
+  </view>
+</smart-popover>
+<smart-popover placement="right">
+  <smart-button>右侧弹出</smart-button>
+  <view slot="overlay">
+    tip
+  </view>
+</smart-popover>
+<smart-popover placement="bottom">
+  <smart-button>下方弹出</smart-button>
+  <view slot="overlay">
+    tip
+  </view>
+</smart-popover>
+```
+
+```javascript
+import Sun from '@tuya-miniapp/icons/dist/svg/Sun';
+
+Page({
+  data: {
+    show: false,
+    sunMaxFill: Sun,
+  },
+  methods: {
+    onShow(e) {
+      this.setData({ show: e.detail });
+    },
+  },
+});
+```
+
+### 受控用法
+
+通过`show`属性控制弹出层是否展示。
+
+```html
+<smart-popover show="{{show}}" placement="top" bind:close="onClose">
+  <smart-button>上方弹出</smart-button>
+  <view slot="overlay">
+    tip
+  </view>
+</smart-popover>
+```
+
+```js
+Page({
+  data: {
+    show: false,
+  },
+  methods: {
+    onClose() {
+      this.setData({ show: false });
+    },
+    onShow(e) {
+      this.setData({ show: e.detail });
+    }
+  },
+});
+```
+
+### 弹出位置
+
+通过`position`属性设置弹出位置，默认居右弹出，可以设置为`top`、`topLeft`、`topRight`、`bottom`、`bottomLeft`、`bottomRight`、`left`、`leftTop`、`leftBottom`、`right`、`rightTop`、`rightBottom`。
+
+```html
+<smart-popover
+  show="{{ show }}"
+  position="top"
+  custom-style="height: 20%;"
+  bind:close="onClose"
+  bind:show-change=“onShow”
+/>
+```
+
+## API
+
+### Props
+| 参数             | 说明                                                                                                                                                           | 类型      | 默认值  |
+| ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- |
+| custom-style     | 自定义弹出层样式                                                                                                                                               | _string_  | `''`    |
+| overlay-style `v2.13.1` | 自定义遮罩层样式，透传至内部 `smart-overlay` 的 `custom-style`                                                                                          | _string_  | `''`    |
+| duration         | 延迟关闭的时间(ms)                                                                                                                                             | number    | `3000`  |
+| placement        | 弹出层的位置，支持值：`top`、`topLeft`、`topRight`、`bottom`、`bottomLeft`、`bottomRight`、`left`、`leftTop`、`leftBottom`、`right`、`rightTop`、`rightBottom` | _string_  | `right` |
+| show             | 控制弹出层是否显示，并监听状态变化，值变更时更新 `currentShow`                                                                                                 | _boolean_ | `false` |
+| trigger `v2.5.0` | 控制弹出层触发方式，支持 `tap`、`longpress`                                                                                                                    | _string_  | `tap`   |
+
+### Events
+
+| 事件名           | 说明            | 参数 |
+| ---------------- | --------------- | ---- |
+| bind:close       | 关闭时触发      | -    |
+| bind:show-change | 显示/隐藏时触发 | -    |
+
+### Popover Slot
+
+| 名称    | 说明     |
+| ------- | -------- |
+| overlay | 弹窗内容 |
+
+### 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                             | 默认值                              | 描述             |
+| -------------------------------- | ----------------------------------- | ---------------- |
+| --popover-background-color       | #fff                                | 弹出层背景色     |
+| --popover-border-radius          | 12px                                | 弹出层圆角       |
+| --popover-box-shadow             | 0px 6px 12px 0px rgba(0, 0, 0, 0.1) | 弹出层阴影       |
+| --popover-overlay-color `v2.8.0` | var(--app-B1-N1, rgba(0, 0, 0, 1))  | 遮照插槽文字颜色 |
+| --popover-padding                | 12px                                | 弹出层内边距     |
+
+

package/lib/popover/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-popover{--overlay-background-color:transparent;--icon-color:var(--popover-background-color,var(--app-B4,#fff));position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,var(--app-B4,#fff));border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));color:var(--popover-overlay-color,var(--app-B1-N1,rgba(0,0,0,.9)));opacity:0;padding:var(--popover-padding,12px);position:absolute;transition:opacity .3s ease-in-out;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}

package/lib/popover/index.d.ts

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

package/lib/popover/index.js

@@ -0,0 +1,228 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+/* eslint-disable prefer-destructuring */
+var component_1 = require("../common/component");
+var IconSrc = function () {
+    return "<svg width=\"100\" height=\"100\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M 10 90 L 90 90 L 50 30 Z\" fill=\"currentColor\" stroke=\"purple\" stroke-width=\"1\"/>\n</svg>";
+};
+function createSvgIcon(svg) {
+    return "data:image/svg+xml,".concat(encodeURIComponent("<?xml version=\"1.0\" standalone=\"no\"?><!DOCTYPE svg PUBLIC \"-//W3C//DTD SVG 1.1//EN\" \"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd\">".concat(svg)));
+}
+(0, component_1.SmartComponent)({
+    classes: [
+        'enter-class',
+        'enter-active-class',
+        'enter-to-class',
+        'leave-class',
+        'leave-active-class',
+        'leave-to-class',
+        'close-icon-class',
+    ],
+    props: {
+        // `top`、`topLeft`、`topRight`、`bottom`、`bottomLeft`、`bottomRight`、`left`、`leftTop`、`leftBottom`、`right`、`rightTop`、`rightBottom`
+        placement: {
+            type: String,
+            value: 'right',
+        },
+        show: {
+            type: Boolean,
+            observer: function (value) {
+                if (this.data.cancel_timer) {
+                    clearTimeout(this.data.cancel_timer);
+                    this.data.cancel_timer = null;
+                }
+                if (value !== this.data.currentShow) {
+                    if (value) {
+                        this.onOpen();
+                    }
+                    else {
+                        this.onClose();
+                    }
+                }
+            },
+        },
+        customStyle: {
+            type: String,
+            value: '',
+        },
+        overlayStyle: {
+            type: String,
+            value: '',
+        },
+        trigger: {
+            type: String,
+            // tap | longpress
+            value: 'tap',
+        },
+        zIndex: {
+            type: Number,
+            value: 101,
+        },
+        duration: {
+            type: Number,
+            value: 3000,
+        },
+    },
+    data: { currentShow: false, showStyle: '', cancel_timer: null },
+    mounted: function () { },
+    created: function () { },
+    methods: {
+        getButtonPosition: function () {
+            var placement = this.data.placement;
+            var params = {
+                // left: rect.left,
+                // top: rect.top,
+                transform: '',
+                iconPos: '',
+                iconPosVal: 0,
+                iconSrc: createSvgIcon(IconSrc()),
+                iconRotate: '0deg',
+                iconWidth: '18px',
+                iconHeight: '6px',
+                iconStyle: '',
+            };
+            if (placement.startsWith('left')) {
+                var iconAlignPos = '';
+                var transform = 'translate(-100%,-50%)';
+                if (placement === 'leftTop') {
+                    iconAlignPos = 'top: calc(0% + 16px)';
+                    transform = 'translate(-100%, 0)';
+                    params.top = '0px';
+                    params.left = '-8px';
+                }
+                else if (placement === 'leftBottom') {
+                    iconAlignPos = 'bottom: calc(0% - 6px)';
+                    transform = 'translate(-100%, -100%)';
+                    params.left = '-9px';
+                }
+                else {
+                    transform = 'translate(-100%, -50%)';
+                    params.left = '-9px';
+                    params.top = '50%';
+                    iconAlignPos = 'top: 50%';
+                }
+                params = __assign(__assign({}, params), { transform: transform, iconSrc: createSvgIcon(IconSrc()), iconStyle: "right:8px;transform:translate(100%, -50%) rotate(90deg);width:18px;height:18px;background-size: 18px 18px;".concat(iconAlignPos) });
+            }
+            if (placement.startsWith('top')) {
+                var iconAlignPos = '';
+                var transform = 'translate(-50%, -100%)';
+                if (placement === 'topLeft') {
+                    iconAlignPos = 'left: calc(0% + 16px);';
+                    transform = 'translate(calc(0% - 16px), -100%)';
+                    params.top = '-12px';
+                    params.left = '16px';
+                }
+                else if (placement === 'topRight') {
+                    iconAlignPos = 'left: calc(100% - 16px);';
+                    transform = 'translate(0, -100%)';
+                    params.top = '-12px';
+                    params.right = '2px';
+                }
+                else {
+                    iconAlignPos = 'left: 50%';
+                    transform = 'translate(-50%, -100%)';
+                    params.top = '-12px';
+                    params.left = '50%';
+                }
+                params = __assign(__assign({}, params), { transform: transform, iconSrc: createSvgIcon(IconSrc()), iconRotate: '0deg', iconStyle: "bottom:0px;transform:translate(-50%, 100%) rotate(180deg);width:18px;height:6px;background-size: 18px 6px;".concat(iconAlignPos) });
+            }
+            if (placement.startsWith('right')) {
+                var iconAlignPos = '';
+                var transform = 'translateY(-50%)';
+                if (placement === 'rightTop') {
+                    iconAlignPos = 'top: calc(0% + 16px)';
+                    transform = "translate(0%,0)";
+                    params.left = 'calc(100% + 8px)';
+                    params.top = '2px';
+                }
+                else if (placement === 'rightBottom') {
+                    iconAlignPos = 'top: calc(100% - 12px)';
+                    transform = "translate(0%,0)";
+                    params.left = 'calc(100% + 8px)';
+                    params.bottom = '2px';
+                }
+                else {
+                    iconAlignPos = 'top: 50%';
+                    transform = "translate(0%, -50%)";
+                    params.left = 'calc(100% + 8px)';
+                    params.top = '50%';
+                }
+                params = __assign(__assign({}, params), { transform: transform, iconSrc: createSvgIcon(IconSrc()), iconRotate: '90deg', iconStyle: "left:-10px;transform:translate(0%, -50%) rotate(-90deg);width:18px;height:18px;background-size: 18px 18px;".concat(iconAlignPos, ";") });
+            }
+            if (placement.startsWith('bottom')) {
+                var iconAlignPos = '';
+                var transform = 'translateX(-50%)';
+                if (placement === 'bottomLeft') {
+                    iconAlignPos = 'left: calc(0% + 16px);';
+                    transform = 'translate(calc(0% - 16px), 100%)';
+                    params.bottom = '-10px';
+                    params.left = '18px';
+                }
+                else if (placement === 'bottomRight') {
+                    iconAlignPos = 'left: calc(100% - 16px);';
+                    transform = 'translate(0, 100%)';
+                    params.bottom = '-10px';
+                    params.right = '2px';
+                }
+                else {
+                    iconAlignPos = 'left: 50%';
+                    transform = 'translate(-50%, 100%)';
+                    params.bottom = '-10px';
+                    params.left = '50%';
+                }
+                params = __assign(__assign({}, params), { transform: transform, iconSrc: createSvgIcon(IconSrc()), iconRotate: '180deg', iconStyle: "top:0px;transform:translate(-50%, -100%) rotate(0deg);width:18px;height:6px;background-size: 18px 6px;".concat(iconAlignPos) });
+            }
+            this.setData(params);
+        },
+        onClick: function () {
+            this.onOpen();
+        },
+        noop: function () { },
+        onOpen: function () {
+            var _this = this;
+            this.getButtonPosition();
+            this.setData({
+                currentShow: true,
+            });
+            setTimeout(function () {
+                _this.setData({
+                    showStyle: 'opacity: 1;',
+                });
+            }, 100);
+            this.$emit('show-change', true);
+            if (this.data.duration) {
+                this.data.cancel_timer = setTimeout(function () {
+                    _this.onClose();
+                }, this.data.duration);
+            }
+        },
+        onClose: function () {
+            var _this = this;
+            if (this.data.cancel_timer) {
+                clearTimeout(this.data.cancel_timer);
+                this.data.cancel_timer = null;
+            }
+            this.setData({
+                showStyle: 'opacity: 0;',
+            });
+            setTimeout(function () {
+                _this.setData({
+                    currentShow: false,
+                });
+                _this.$emit('show-change', false);
+                _this.$emit('close', false);
+            }, 300);
+        },
+    },
+});

package/lib/popover/index.json

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

package/lib/popover/index.wxml

@@ -0,0 +1,31 @@
+<view class="smart-popover custom-class">
+
+  <smart-overlay
+    show="{{ currentShow }}"
+    z-index="{{ zIndex }}"
+    custom-style="{{ overlayStyle }}"
+    bind:click="onClose"
+    duration="{{ 1 }}"
+    close-on-click-overlay
+    bind:close="onClose"
+  >
+   
+  </smart-overlay>
+
+  <view wx:if="{{trigger === 'longpress'}}" class="smart-popover-button" catch:longpress="onClick">
+    <slot />
+    <view catch:tap="noop" wx:if="{{currentShow}}" class="smart-popover-overlay" style="left: {{left}};top: {{top}}; bottom:{{bottom}};right:{{right}}; transform:{{transform}}; {{customStyle}}; {{showStyle}}">
+      <slot name="overlay" />
+      <smart-icon class="smart-popover-overlay-arrow" name="{{iconSrc}}" style=" transform: {{iconTransform}}; {{iconPos}}: {{iconPosVal}}px;background-size: {{iconWidth}} {{iconHeight}};{{iconStyle}}"></smart-icon>
+    </view>
+  </view>
+
+  <view wx:else class="smart-popover-button" catch:tap="onClick">
+    <slot />
+    <view catch:tap="noop" wx:if="{{currentShow}}" class="smart-popover-overlay" style="left: {{left}};top: {{top}}; bottom:{{bottom}};right:{{right}}; transform:{{transform}}; {{customStyle}}; {{showStyle}}">
+      <slot name="overlay" />
+      <smart-icon class="smart-popover-overlay-arrow" name="{{iconSrc}}" style=" transform: {{iconTransform}}; {{iconPos}}: {{iconPosVal}}px;background-size: {{iconWidth}} {{iconHeight}};{{iconStyle}}"></smart-icon>
+    </view>
+  </view>
+
+</view>

package/lib/popover/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-popover{--overlay-background-color:transparent;--icon-color:var(--popover-background-color,var(--app-B4,#fff));position:relative}.smart-popover,.smart-popover-button{display:inline-block}.smart-popover-overlay{background-color:var(--popover-background-color,var(--app-B4,#fff));border-radius:var(--popover-border-radius,12px);box-shadow:var(--popover-box-shadow,0 6px 12px 0 rgba(0,0,0,.1));color:var(--popover-overlay-color,var(--app-B1-N1,rgba(0,0,0,.9)));opacity:0;padding:var(--popover-padding,12px);position:absolute;transition:opacity .3s ease-in-out;z-index:102}.smart-popover-overlay-arrow{background-position:50%;background-repeat:no-repeat;position:absolute}