@tuya-miniapp/smart-ui 2.3.8-beta-4 → 2.3.8-beta-5

package/packages/popover/index.ts

@@ -0,0 +1,236 @@
+/* eslint-disable prefer-destructuring */
+import { SmartComponent } from '../common/component';
+
+const IconSrc = () =>
+  `<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
+  <path d="M 10 90 L 90 90 L 50 30 Z" fill="currentColor" stroke="purple" stroke-width="1"/>
+</svg>`;
+
+function createSvgIcon(svg) {
+  return `data:image/svg+xml,${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">${svg}`
+  )}`;
+}
+
+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(value) {
+        if (this.data.cancel_timer) {
+          clearTimeout(this.data.cancel_timer);
+          this.data.cancel_timer = null as any;
+        }
+
+        if (value !== this.data.currentShow) {
+          if (value) {
+            this.onOpen();
+          } else {
+            this.onClose();
+          }
+        }
+      },
+    },
+    customStyle: {
+      type: String,
+      value: '',
+    },
+    zIndex: {
+      type: Number,
+      value: 101,
+    },
+    duration: {
+      type: Number,
+      value: 20000,
+    },
+  },
+
+  data: { currentShow: false, showStyle: '', cancel_timer: null as any },
+
+  mounted() {},
+
+  created() {},
+
+  methods: {
+    getButtonPosition() {
+      const placement = this.data.placement;
+
+      let params = {
+        // left: rect.left,
+        // top: rect.top,
+        transform: '',
+        iconPos: '',
+        iconPosVal: 0,
+        iconSrc: createSvgIcon(IconSrc()),
+        iconRotate: '0deg',
+        iconWidth: '18px',
+        iconHeight: '6px',
+        iconStyle: '',
+      } as any;
+
+      if (placement.startsWith('left')) {
+        let iconAlignPos = '';
+        let 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 = {
+          ...params,
+          transform,
+          iconSrc: createSvgIcon(IconSrc()),
+          iconStyle: `right:8px;transform:translate(100%, -50%) rotate(90deg);width:18px;height:18px;background-size: 18px 18px;${iconAlignPos}`,
+        };
+      }
+      if (placement.startsWith('top')) {
+        let iconAlignPos = '';
+        let 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 = {
+          ...params,
+          transform,
+          iconSrc: createSvgIcon(IconSrc()),
+          iconRotate: '0deg',
+          iconStyle: `bottom:0px;transform:translate(-50%, 100%) rotate(180deg);width:18px;height:6px;background-size: 18px 6px;${iconAlignPos}`,
+        };
+      }
+      if (placement.startsWith('right')) {
+        let iconAlignPos = '';
+        let 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 = {
+          ...params,
+          transform,
+          iconSrc: createSvgIcon(IconSrc()),
+          iconRotate: '90deg',
+          iconStyle: `left:-10px;transform:translate(0%, -50%) rotate(-90deg);width:18px;height:18px;background-size: 18px 18px;${iconAlignPos};`,
+        };
+      }
+      if (placement.startsWith('bottom')) {
+        let iconAlignPos = '';
+        let 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 = {
+          ...params,
+          transform,
+          iconSrc: createSvgIcon(IconSrc()),
+          iconRotate: '180deg',
+          iconStyle: `top:0px;transform:translate(-50%, -100%) rotate(0deg);width:18px;height:6px;background-size: 18px 6px;${iconAlignPos}`,
+        };
+      }
+
+      this.setData(params);
+    },
+    onClick() {
+      this.onOpen();
+    },
+    noop() {},
+
+    onOpen() {
+      this.getButtonPosition();
+      this.setData({
+        currentShow: true,
+      });
+
+      setTimeout(() => {
+        this.setData({
+          showStyle: 'opacity: 1;',
+        });
+      }, 100);
+
+      this.$emit('show-change', true);
+      if (this.data.duration) {
+        this.data.cancel_timer = setTimeout(() => {
+          this.onClose();
+        }, this.data.duration);
+      }
+    },
+    onClose() {
+      this.setData({
+        showStyle: 'opacity: 0;',
+      });
+
+      setTimeout(() => {
+        this.setData({
+          currentShow: false,
+        });
+        this.$emit('show-change', false);
+        this.$emit('close', false);
+      }, 300);
+    },
+  },
+});

package/packages/popover/index.wxml

@@ -0,0 +1,23 @@
+<view class="smart-popover">
+
+  <smart-overlay
+    show="{{ currentShow }}"
+    z-index="{{ zIndex }}"
+    bind:click="onClose"
+    transition="{{ transition }}"
+    close-on-click-overlay
+    bind:close="onClose"
+    z-index="{{zIndex}}"
+  >
+   
+  </smart-overlay>
+
+  <view 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/packages/popup/README.en.md

@@ -0,0 +1,165 @@
+---
+category: Feedback
+---
+
+# Popup
+
+### Introduction
+
+Popup container for displaying popups, information prompts, etc., supporting multiple layered displays.
+
+### Import
+
+Import the component in `app.json` or `index.json`. For details, see [Quick Start](/material/smartui?comId=help-getting-started&appType=miniapp).
+
+```json
+"usingComponents": {
+  "smart-popup": "@tuya-miniapp/smart-ui/lib/popup/index"
+}
+```
+
+## Code Examples
+
+### Basic Usage
+
+Control the display of the popup using the `show` property.
+
+```html
+<smart-cell title="Show Popup" is-link bind:click="showPopup" />
+
+<smart-popup show="{{ show }}" bind:close="onClose">Content</smart-popup>
+```
+
+```javascript
+Page({
+  data: {
+    show: false,
+  },
+
+  showPopup() {
+    this.setData({ show: true });
+  },
+
+  onClose() {
+    this.setData({ show: false });
+  },
+});
+```
+
+### Popup Position
+
+Set the popup position using the `position` property. The default is centered. It can be set to `top`, `bottom`, `left`, or `right`.
+
+```html
+<smart-popup
+  show="{{ show }}"
+  position="top"
+  custom-style="height: 20%;"
+  bind:close="onClose"
+/>
+```
+
+### Close Icon
+
+After setting the `closeable` property, a close icon will appear in the upper right corner of the popup. You can customize the icon with the `close-icon` property and set the icon position using `close-icon-position`.
+
+```html
+<smart-popup
+  show="{{ show }}"
+  closeable
+  position="bottom"
+  custom-style="height: 20%"
+  bind:close="onClose"
+/>
+
+<!-- Custom Icon -->
+<smart-popup
+  show="{{ show }}"
+  closeable
+  close-icon="close"
+  position="bottom"
+  custom-style="height: 20%"
+  bind:close="onClose"
+/>
+
+<!-- Icon Position -->
+<smart-popup
+  show="{{ show }}"
+  closeable
+  close-icon-position="top-left"
+  position="bottom"
+  custom-style="height: 20%"
+  bind:close="onClose"
+/>
+```
+
+### Rounded Corners
+
+Setting the `round` property adds different rounded corner styles based on the popup position.
+
+```html
+<smart-popup
+  show="{{ show }}"
+  round
+  position="bottom"
+  custom-style="height: 20%"
+  bind:close="onClose"
+/>
+```
+
+## API
+
+### Props
+
+| Parameter                          | Description                                                                                                                                             | Type               | Default     |
+| ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------- |
+| close-icon                         | Name or URL of the close icon             | _string_           | `cross`     |
+| close-icon-position                | Close icon position, options: `top-left`, `bottom-left`, `bottom-right`          | _string_           | `top-right` |
+| close-on-click-overlay             | Whether to close when clicking the overlay      | _boolean_          | `true`      |
+| closeable                          | Whether to show the close icon             | _boolean_          | `false`     |
+| custom-style                       | Custom popup style           | _string_           | `''`        |
+| duration                           | Animation duration in milliseconds        | _number \| object_ | `300`       |
+| lock-scroll                        | Whether to lock background scrolling          | _boolean_          | `true`      |
+| overlay                            | Whether to show overlay   | _boolean_          | `true`      |
+| overlay-style                      | Custom overlay style          | _string_           | `''`        |
+| position                           | Popup position, options: `top`, `bottom`, `right`, `left`         | _string_           | `center`    |
+| round                              | Whether to display rounded corners          | _boolean_          | `false`     |
+| safe-area-inset-bottom             | Whether to reserve bottom safe area for iPhoneX        | _boolean_          | `true`      |
+| safe-area-inset-bottom-min `v1.1.0` | Whether to reserve a minimum bottom safe area to be added when the safeArea bottom is 0, effective when safeAreaInsetBottom is true                      | _number_           | `0`         |
+| safe-area-inset-top                | Whether to reserve top safe distance (status bar height)       | _boolean_          | `false`     |
+| safe-area-tab-bar                  | Whether to reserve bottom tabbar safe distance (when using tabbar component & custom tabbar in mini-programs, the popup cannot cover the tabbar)        | _boolean_          | `false`     |
+| show                               | Whether to display the popup       | _boolean_          | `false`     |
+| z-index                            | z-index level           | _number_           | `100`       |
+| native-disabled `v2.3.8` | Disable local gestures during the activation of the popup | _boolean_ | `false` |
+
+### Events
+
+| Event Name         | Description                 | Parameters |
+| ------------------ | --------------------------- | ---------- |
+| bind:after-enter   | Triggered after entering    | -          |
+| bind:after-leave   | Triggered after leaving     | -          |
+| bind:before-enter  | Triggered before entering   | -          |
+| bind:before-leave  | Triggered before leaving    | -          |
+| bind:click-overlay | Triggered when clicking overlay | -      |
+| bind:close         | Triggered when closing popup | -         |
+| bind:enter         | Triggered during entering   | -          |
+| bind:leave         | Triggered during leaving    | -          |
+
+### External Style Classes
+
+| Class Name    | Description   |
+| ------------- | ------------- |
+| custom-class  | Root node style class |
+
+### Style Variables
+
+The component provides the following CSS variables that can be used for custom styles. For usage, refer to the [ConfigProvider Component](/material/smartui?comId=config-provider&appType=miniapp).
+
+| Name                          | Default Value                           | Description              |
+| ----------------------------- | ---------------------------------------- | ------------------------ |
+| --popup-background-color      | _var(--app-B4, #ffffff)_                 | Popup background color   |
+| --popup-round-border-radius   | _16px_                                   | Round border radius      |
+| --popup-close-icon-size       | _24px_                                   | Close icon size          |
+| --popup-close-icon-color      | _#969799_                                | Close icon color         |
+| --popup-close-icon-margin     | _12px_                                   | Close icon margin        |
+| --popup-close-icon-z-index    | _1_                                      | Close icon z-index       |

package/packages/popup/README.md

@@ -0,0 +1,165 @@
+---
+category: 反馈
+---
+
+# Popup 弹出层
+
+### 介绍
+
+弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。
+
+### 引入
+
+在`app.json`或`index.json`中引入组件，详细介绍见[快速上手](/material/smartui?comId=help-getting-started&appType=miniapp)。
+
+```json
+"usingComponents": {
+  "smart-popup": "@tuya-miniapp/smart-ui/lib/popup/index"
+}
+```
+
+## 代码演示
+
+### 基础用法
+
+通过`show`属性控制弹出层是否展示。
+
+```html
+<smart-cell title="展示弹出层" is-link bind:click="showPopup" />
+
+<smart-popup show="{{ show }}" bind:close="onClose">内容</smart-popup>
+```
+
+```javascript
+Page({
+  data: {
+    show: false,
+  },
+
+  showPopup() {
+    this.setData({ show: true });
+  },
+
+  onClose() {
+    this.setData({ show: false });
+  },
+});
+```
+
+### 弹出位置
+
+通过`position`属性设置弹出位置，默认居中弹出，可以设置为`top`、`bottom`、`left`、`right`。
+
+```html
+<smart-popup
+  show="{{ show }}"
+  position="top"
+  custom-style="height: 20%;"
+  bind:close="onClose"
+/>
+```
+
+### 关闭图标
+
+设置`closeable`属性后，会在弹出层的右上角显示关闭图标，并且可以通过`close-icon`属性自定义图标，使用`close-icon-position`属性可以自定义图标位置。
+
+```html
+<smart-popup
+  show="{{ show }}"
+  closeable
+  position="bottom"
+  custom-style="height: 20%"
+  bind:close="onClose"
+/>
+
+<!-- 自定义图标 -->
+<smart-popup
+  show="{{ show }}"
+  closeable
+  close-icon="close"
+  position="bottom"
+  custom-style="height: 20%"
+  bind:close="onClose"
+/>
+
+<!-- 图标位置 -->
+<smart-popup
+  show="{{ show }}"
+  closeable
+  close-icon-position="top-left"
+  position="bottom"
+  custom-style="height: 20%"
+  bind:close="onClose"
+/>
+```
+
+### 圆角弹窗
+
+设置`round`属性后，弹窗会根据弹出位置添加不同的圆角样式。
+
+```html
+<smart-popup
+  show="{{ show }}"
+  round
+  position="bottom"
+  custom-style="height: 20%"
+  bind:close="onClose"
+/>
+```
+
+## API
+
+### Props
+
+| 参数                               | 说明                                                                                                                 | 类型               | 默认值      |
+| ---------------------------------- | -------------------------------------------------------------------------------------------------------------------- | ------------------ | ----------- |
+| close-icon                         | 关闭图标名称或图片链接                                                                                               | _string_           | `cross`     | safeAreaInsetBottomMin |
+| close-icon-position                | 关闭图标位置，可选值为 `top-left`<br>`bottom-left` `bottom-right`                                                    | _string_           | `top-right` |
+| close-on-click-overlay             | 是否在点击遮罩层后关闭                                                                                               | _boolean_          | `true`      |
+| closeable                          | 是否显示关闭图标                 | _boolean_          | `false`     |
+| custom-style                       | 自定义弹出层样式               | _string_           | `''`        |
+| duration                           | 动画时长，单位为毫秒          | _number \| object_ | `300`       |
+| lock-scroll                        | 是否锁定背景滚动            | _boolean_          | `true`      |
+| overlay                            | 是否显示遮罩层               | _boolean_          | `true`      |
+| overlay-style                      | 自定义遮罩层样式       | _string_           | `''`        |
+| position                           | 弹出位置，可选值为 `top` `bottom` `right` `left`                                                                     | _string_           | `center`    |
+| round         | 是否显示圆角        | _boolean_          | `false`     |
+| safe-area-inset-bottom             | 是否为 iPhoneX 留出底部安全距离          | _boolean_          | `true`      |
+| safe-area-inset-bottom-min `v1.1.0` | 是否需要预留出一个最小的底部安全距离，用于在 safeArea 底部为 0 时进行追加，需要在 safeAreaInsetBottom 为 true 时生效 | _number_           | `0`         |
+| safe-area-inset-top                | 是否留出顶部安全距离（状态栏高度）      | _boolean_          | `false`     |
+| safe-area-tab-bar                  | 是否留出底部 tabbar 安全距离（在使用 tabbar 组件 & 小程序自定义 tabbar 时，popup 组件层级无法盖住 tabbar）           | _boolean_          | `false`     |
+| show                               | 是否显示弹出层       | _boolean_          | `false`     |
+| z-index   | z-index 层级           | _number_           | `100`       |
+| native-disabled `v2.3.8` | 开启弹框期间是否禁用本地手势 | _boolean_ | `false` |
+
+### Events
+
+| 事件名             | 说明             | 参数 |
+| ------------------ | ---------------- | ---- |
+| bind:after-enter   | 进入后触发       | -    |
+| bind:after-leave   | 离开后触发       | -    |
+| bind:before-enter  | 进入前触发       | -    |
+| bind:before-leave  | 离开前触发       | -    |
+| bind:click-overlay | 点击遮罩层时触发 | -    |
+| bind:close         | 关闭弹出层时触发 | -    |
+| bind:enter         | 进入中触发       | -    |
+| bind:leave         | 离开中触发       | -    |
+
+### 外部样式类
+
+| 类名         | 说明         |
+| ------------ | ------------ |
+| custom-class | 根节点样式类 |
+
+### 样式变量
+
+组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 [ConfigProvider 组件](/material/smartui?comId=config-provider&appType=miniapp)。
+
+| 名称                          | 默认值                                 | 描述 |
+| ----------------------------- | -------------------------------------- | ---- |
+| --popup-background-color | _var(--app-B4, #ffffff)_ | 弹窗背景颜色 |
+| --popup-round-border-radius | _16px_ | 圆形边框半径 |
+| --popup-close-icon-size | _24px_ | 关闭图标大小 |
+| --popup-close-icon-color | _#969799_ | 关闭图标颜色 |
+| --popup-close-icon-margin | _12px_ | 关闭图标边距 |
+| --popup-close-icon-z-index | _1_ | 关闭图标层级 |

package/packages/popup/demo/index.json

@@ -0,0 +1,8 @@
+{
+  "component": true,
+  "usingComponents": {
+    "smart-cell": "../../cell/index",
+    "smart-popup": "../../popup/index",
+    "demo-block": "../../../example/components/demo-block/index"
+  }
+}