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

package/lib/notify/index.js

@@ -0,0 +1,80 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+var color_1 = require("../common/color");
+var utils_1 = require("../common/utils");
+var notify_1 = require("./notify");
+(0, component_1.SmartComponent)({
+    props: {
+        message: String,
+        background: String,
+        type: {
+            type: String,
+            value: 'danger',
+        },
+        color: {
+            type: String,
+            value: color_1.WHITE,
+        },
+        duration: {
+            type: Number,
+            value: 3000,
+        },
+        zIndex: {
+            type: Number,
+            value: 110,
+        },
+        safeAreaInsetTop: {
+            type: Boolean,
+            value: false,
+        },
+        useSlot: {
+            type: Boolean,
+            value: false,
+        },
+        transition: {
+            type: String,
+            value: 'slide-down',
+        },
+        top: null,
+    },
+    data: {
+        show: false,
+        onOpened: null,
+        onClose: null,
+        onClick: null,
+    },
+    created: function () {
+        var statusBarHeight = (0, utils_1.getSystemInfoSync)().statusBarHeight;
+        this.setData({ statusBarHeight: statusBarHeight });
+    },
+    mounted: function () {
+        notify_1.contextRef.value = (0, utils_1.getCurrentPage)();
+    },
+    methods: {
+        show: function () {
+            var _this = this;
+            var _a = this.data, duration = _a.duration, onOpened = _a.onOpened;
+            clearTimeout(this.timer);
+            this.setData({ show: true });
+            wx.nextTick(onOpened);
+            if (duration > 0 && duration !== Infinity) {
+                this.timer = setTimeout(function () {
+                    _this.hide();
+                }, duration);
+            }
+        },
+        hide: function () {
+            var onClose = this.data.onClose;
+            clearTimeout(this.timer);
+            this.setData({ show: false });
+            wx.nextTick(onClose);
+        },
+        onTap: function (event) {
+            var onClick = this.data.onClick;
+            if (onClick) {
+                onClick(event.detail);
+            }
+        },
+    },
+});

package/lib/notify/index.json

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

package/lib/notify/index.wxml

@@ -0,0 +1,22 @@
+<wxs src="../wxs/utils.wxs" module="utils" />
+<wxs src="./index.wxs" module="computed" />
+
+<smart-transition
+  name="{{ transition }}"
+  show="{{ show }}"
+  custom-class="smart-notify__container"
+  custom-style="{{ computed.rootStyle({ zIndex, top }) }}"
+  bind:tap="onTap"
+>
+  <view
+    class="smart-notify smart-notify--{{ type }}"
+    style="{{ computed.notifyStyle({ background, color }) }}"
+  >
+    <view
+      wx:if="{{ safeAreaInsetTop }}"
+      style="height: {{ statusBarHeight }}px"
+    />
+    <slot wx:if="{{ useSlot }}" />
+    <text wx:else>{{ message }}</text>
+  </view>
+</smart-transition>

package/lib/notify/index.wxs

@@ -0,0 +1,22 @@
+/* eslint-disable */
+var style = require('../wxs/style.wxs');
+var addUnit = require('../wxs/add-unit.wxs');
+
+function rootStyle(data) {
+  return style({
+    'z-index': data.zIndex,
+    top: addUnit(data.top),
+  });
+}
+
+function notifyStyle(data) {
+  return style({
+    background: data.background,
+    color: data.color,
+  });
+}
+
+module.exports = {
+  rootStyle: rootStyle,
+  notifyStyle: notifyStyle,
+};

package/lib/notify/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-notify{word-wrap:break-word;font-size:var(--notify-font-size,14px);line-height:var(--notify-line-height,20px);padding:var(--notify-padding,6px 15px);text-align:center}.smart-notify__container{box-sizing:border-box;left:0;position:fixed;top:0;width:100%}.smart-notify--primary{background-color:var(--notify-primary-background-color,#1989fa)}.smart-notify--success{background-color:var(--notify-success-background-color,#07c160)}.smart-notify--danger{background-color:var(--notify-danger-background-color,#ee0a24)}.smart-notify--warning{background-color:var(--notify-warning-background-color,#ff976a)}

package/lib/notify/notify.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="miniprogram-api-typings" />
+/// <reference types="miniprogram-api-typings" />
+type NotifyContext = WechatMiniprogram.Component.TrivialInstance | WechatMiniprogram.Page.TrivialInstance;
+interface NotifyOptions {
+    type?: 'primary' | 'success' | 'danger' | 'warning';
+    transition?: 'fade' | 'fade-up' | 'fade-down' | 'fade-left' | 'fade-right' | 'slide-up' | 'slide-down' | 'slide-left' | 'slide-right';
+    color?: string;
+    zIndex?: number;
+    top?: number;
+    message: string;
+    context?: any;
+    duration?: number;
+    selector?: string;
+    background?: string;
+    safeAreaInsetTop?: boolean;
+    onClick?: () => void;
+    onOpened?: () => void;
+    onClose?: () => void;
+}
+export declare const contextRef: {
+    value: NotifyContext | null;
+};
+declare function Notify(options: NotifyOptions | string): any;
+declare namespace Notify {
+    var clear: (options?: NotifyOptions | undefined) => void;
+    var setDefaultOptions: (options: NotifyOptions) => void;
+    var resetDefaultOptions: () => void;
+}
+export default Notify;

package/lib/notify/notify.js

@@ -0,0 +1,72 @@
+"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 });
+exports.contextRef = void 0;
+var utils_1 = require("../common/utils");
+var color_1 = require("../common/color");
+var defaultOptions = {
+    selector: '#smart-notify',
+    type: 'danger',
+    message: '',
+    background: '',
+    duration: 3000,
+    zIndex: 110,
+    top: 0,
+    color: color_1.WHITE,
+    safeAreaInsetTop: false,
+    onClick: function () { },
+    onOpened: function () { },
+    onClose: function () { },
+};
+var currentOptions = __assign({}, defaultOptions);
+function parseOptions(message) {
+    if (message == null) {
+        return {};
+    }
+    return typeof message === 'string' ? { message: message } : message;
+}
+exports.contextRef = {
+    value: null,
+};
+function Notify(options) {
+    options = __assign(__assign({}, currentOptions), parseOptions(options));
+    var context = (typeof options.context === 'function' ? options.context() : options.context) ||
+        exports.contextRef.value ||
+        (0, utils_1.getCurrentPage)();
+    var notify = context.selectComponent(options.selector);
+    delete options.context;
+    delete options.selector;
+    if (notify) {
+        notify.setData(options);
+        notify.show();
+        return notify;
+    }
+    console.warn('未找到 smart-notify 节点，请确认 selector 及 context 是否正确');
+}
+exports.default = Notify;
+Notify.clear = function (options) {
+    options = __assign(__assign({}, defaultOptions), parseOptions(options));
+    var context = (typeof options.context === 'function' ? options.context() : options.context) ||
+        exports.contextRef.value ||
+        (0, utils_1.getCurrentPage)();
+    var notify = context.selectComponent(options.selector);
+    if (notify) {
+        notify.hide();
+    }
+};
+Notify.setDefaultOptions = function (options) {
+    Object.assign(currentOptions, options);
+};
+Notify.resetDefaultOptions = function () {
+    currentOptions = __assign({}, defaultOptions);
+};

package/lib/overlay/README.md

@@ -0,0 +1,132 @@
+---
+category: 展示
+---
+
+# Overlay 遮罩层
+
+### 介绍
+
+创建一个遮罩层，用于强调特定的页面元素，并阻止用户进行其他操作。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-overlay": "@tuya/miniapp-smart-ui/lib/overlay/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+```html
+<smart-button type="primary" bind:click="onClickShow">显示遮罩层</smart-button>
+<smart-overlay show="{{ show }}" bind:click="onClickHide" />
+```
+
+```js
+Page({
+  data: {
+    show: false,
+  },
+
+  onClickShow() {
+    this.setData({ show: true });
+  },
+
+  onClickHide() {
+    this.setData({ show: false });
+  },
+});
+```
+
+### 嵌入内容
+
+通过默认插槽可以在遮罩层上嵌入任意内容。
+
+```html
+<smart-button type="primary" bind:click="onClickShow">嵌入内容</smart-button>
+<smart-overlay show="{{ show }}" bind:click="onClickHide">
+  <view class="wrapper">
+    <view class="block" catch:tap="noop" />
+  </view>
+</smart-overlay>
+```
+
+```js
+Page({
+  data: {
+    show: false,
+  },
+
+  onClickShow() {
+    this.setData({ show: true });
+  },
+
+  onClickHide() {
+    this.setData({ show: false });
+  },
+
+  noop() {},
+});
+```
+
+```css
+.wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
+
+.block {
+  width: 120px;
+  height: 120px;
+  background-color: #fff;
+}
+```
+
+## API
+
+### Props
+
+| 参数           | 说明                                             | 类型               | 默认值  |
+| -------------- | ------------------------------------------------ | ------------------ | ------- |
+| classmart-name | 自定义类名                                       | _string_           | -       |
+| custom-style   | 自定义样式                                       | _string_           | -       |
+| duration       | 动画时长，单位秒                                 | _string \| number_ | `0.3`   |
+| lock-scroll    | 是否锁定背景滚动，锁定时蒙层里的内容也将无法滚动 | _boolean_          | `true`  |
+| show           | 是否展示遮罩层                                   | _boolean_          | `false` |
+| z-index        | z-index 层级                                     | _string \| number_ | `1`     |
+
+### Events
+
+| 事件名     | 说明       | 回调参数 |
+| ---------- | ---------- | -------- |
+| bind:click | 点击时触发 | -        |
+
+### Slots
+
+| 名称 | 说明                               |
+| ---- | ---------------------------------- |
+| -    | 默认插槽，用于在遮罩层上方嵌入内容 |
+
+
+### 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+
+### 样式变量
+
+组件会根据设备是否支持 `backdrop-filter` 自动选择**毛玻璃遮罩**或**半透明遮罩**，以减轻 iOS 输入框聚焦时页面布局上移的跳动感；不支持模糊的机型（如部分 Android）使用半透明降级样式。
+
+| 名称                              | 默认值（浅色 / 深色）                    | 描述 |
+| --------------------------------- | ----------------------------------------- | ---- |
+| --overlay-background-color        | _rgba(0,0,0,0.4)_ / _rgba(0,0,0,0.7)_        | 直接指定遮罩背景色时使用，设置后不再使用毛玻璃/半透明变量 |
+| --overlay-blur-background  `v2.12.0`        | _rgba(40,44,53,0.22)_ / _rgba(0,0,0,0.6)_ | 支持模糊时的毛玻璃遮罩背景色 |
+| --overlay-blur-radius  `v2.12.0`            | _16px_      | 毛玻璃模糊半径 |

package/lib/overlay/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-overlay{background-color:var(--overlay-background-color,var(--smart-ui-overlay,rgba(0,0,0,.7)));height:100%;left:0;position:fixed;top:0;width:100%}@supports ((-webkit-backdrop-filter:blur(16px)) or (backdrop-filter:blur(16px))) or (-webkit-backdrop-filter:blur(16px)){.smart-overlay{backdrop-filter:blur(var(--overlay-blur-radius,16px));-webkit-backdrop-filter:blur(var(--overlay-blur-radius,16px));background-color:var(--overlay-blur-background,var(--smart-ui-overlay-blur-background,rgba(40,44,53,.22)))}}

package/lib/overlay/index.d.ts

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

package/lib/overlay/index.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+var component_1 = require("../common/component");
+(0, component_1.SmartComponent)({
+    props: {
+        show: Boolean,
+        customStyle: String,
+        duration: {
+            type: null,
+            value: 300,
+        },
+        zIndex: {
+            type: Number,
+            value: 1,
+        },
+        lockScroll: {
+            type: Boolean,
+            value: true,
+        },
+        rootPortal: {
+            type: Boolean,
+            value: false,
+        },
+    },
+    methods: {
+        onClick: function () {
+            this.$emit('click');
+        },
+        // for prevent touchmove
+        noop: function () { },
+    },
+});

package/lib/overlay/index.json

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

package/lib/overlay/index.wxml

@@ -0,0 +1,7 @@
+<import src="./overlay.wxml" />
+
+<root-portal wx:if="{{ rootPortal }}">
+  <include src="./overlay.wxml" />
+</root-portal>
+
+<include wx:else src="./overlay.wxml" />

package/lib/overlay/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-overlay{background-color:var(--overlay-background-color,var(--smart-ui-overlay,rgba(0,0,0,.7)));height:100%;left:0;position:fixed;top:0;width:100%}@supports ((-webkit-backdrop-filter:blur(16px)) or (backdrop-filter:blur(16px))) or (-webkit-backdrop-filter:blur(16px)){.smart-overlay{backdrop-filter:blur(var(--overlay-blur-radius,16px));-webkit-backdrop-filter:blur(var(--overlay-blur-radius,16px));background-color:var(--overlay-blur-background,var(--smart-ui-overlay-blur-background,rgba(40,44,53,.22)))}}

package/lib/overlay/overlay.wxml

@@ -0,0 +1,10 @@
+<smart-transition
+  show="{{ show }}"
+  custom-class="smart-overlay custom-class"
+  custom-style="z-index: {{ zIndex }}; {{ customStyle }}"
+  duration="{{ duration }}"
+  bind:tap="onClick"
+  catch:touchmove="{{ lockScroll ? 'noop' : ''}}"
+>
+  <slot></slot>
+</smart-transition>