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

package/packages/popover/README.en.md

@@ -1,243 +0,0 @@
----
-category: Feedback
-new: true
-version: v2.3.0
----
-
-# Popover Popup Prompt
-
-### Introduction
-
-Introduced after version v2.3.0, this popup container is used to display lightweight content such as popups and information prompts.
-
-### Import
-
-Introduce the component in `app.json` or `index.json`. For detailed instructions, see [Getting Started](/material/smartui?comId=help-getting-started&appType=miniapp).
-
-```json
-"usingComponents": {
-  "smart-popover": "@tuya-miniapp/smart-ui/lib/popover/index"
-}
-```
-
-## Code Examples
-
-### Basic Usage
-
-```html
-<smart-popover show="{{show}}" placement="bottomLeft">
-  <smart-button>Bottom Left Pop</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>Bottom Pop</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>Bottom Right Pop</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>Top Pop</smart-button>
-  <view slot="overlay">
-    tip
-  </view>
-</smart-popover>
-<smart-popover placement="left">
-  <smart-button>Left Pop</smart-button>
-  <view slot="overlay">
-    tip
-  </view>
-</smart-popover>
-<smart-popover placement="right">
-  <smart-button>Right Pop</smart-button>
-  <view slot="overlay">
-    tip
-  </view>
-</smart-popover>
-<smart-popover placement="bottom">
-  <smart-button>Bottom Pop</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: {
-    onClose() {
-      this.setData({ show: false });
-    },
-  },
-});
-```
-
-### Controlled Usage
-
-Control whether the popup is displayed using the `show` attribute.
-
-```html
-<smart-popover show="{{show}}" placement="top" bind:close="onClose" bind:show-change=“onShow”>
-  <smart-button>Top Pop</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 });
-    }
-  },
-});
-```
-
-### Popup Position
-
-Set the popup position using the `position` attribute. The default is to pop to the right, but it can be set to `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"
-/>
-```
-
-## API
-
-### Props
-| Parameter        | Description                                                                                                                                                           | Type      | Default  |
-| ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | -------- |
-| custom-style     | Custom popup style                                                                                                                                                    | _string_  | `''`     |
-| duration         | Delay time for closing (ms)                                                                                                                                          | number    | `3000`   |
-| placement        | Position of the popup, supported values: `top`, `topLeft`, `topRight`, `bottom`, `bottomLeft`, `bottomRight`, `left`, `leftTop`, `leftBottom`, `right`, `rightTop`, `rightBottom` | _string_  | `right`  |
-| show             | Controls whether the popup is displayed and listens for state changes, updating `currentShow` when the value changes                                                  | _boolean_ | `false`  |
-
-### Events
-
-| Event Name       | Description             | Parameters |
-| ---------------- | ----------------------- | ---------- |
-| bind:close       | Triggered on close      | -          |
-| bind:show-change | Triggered on show/hide  | -          |
-
-### Popover Slot
-
-| Name    | Description       |
-| ------------ | ------------ |
-| overlay    | Popup content |
-
-### External Styles
-
-| Class Name      | Description        |
-| --------------- | ------------------ |
-| custom-class    | Root node style class |
-
-### Style Variables
-
-The component provides the following CSS variables for custom styling. For usage, see [ConfigProvider Component](/material/smartui?comId=config-provider&appType=miniapp).
-
-| Name                       | Default Value                          | Description  |
-| -------------------------- | -------------------------------------- | ------------ |
-| --popover-background-color | #fff                                   | Popup background color |
-| --popover-border-radius    | 12px                                   | Popup border radius    |
-| --popover-box-shadow       | 0px 6px 12px 0px rgba(0, 0, 0, 0.1)    | Popup box shadow       |
-| --popover-padding          | 12px                                   | Popup padding          |

package/packages/popover/README.md

@@ -1,245 +0,0 @@
----
-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 show="{{show}}" placement="bottomLeft">
-  <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: {
-    onClose() {
-      this.setData({ show: false });
-    },
-  },
-});
-```
-
-### 受控用法
-
-通过`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_  | `''`    |
-| duration    | 延迟关闭的时间(ms)                                                                                                                                             | number    | `3000`  |
-| placement   | 弹出层的位置，支持值：`top`、`topLeft`、`topRight`、`bottom`、`bottomLeft`、`bottomRight`、`left`、`leftTop`、`leftBottom`、`right`、`rightTop`、`rightBottom` | _string_  | `right` |
-| show        | 控制弹出层是否显示，并监听状态变化，值变更时更新 `currentShow`                                                                                                 | _boolean_ | `false` |
-
-### 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-padding          | 12px                                | 弹出层内边距 |
-

package/packages/popover/demo/index.json

@@ -1,12 +0,0 @@
-{
-  "component": true,
-  "usingComponents": {
-    "smart-popup": "../../popup/index",
-    "smart-popover": "../../popover/index",
-    "smart-cell-group": "../../cell-group/index",
-    "smart-cell": "../../cell/index",
-    "smart-button": "../../button/index",
-    "smart-icon": "../../icon/index",
-    "demo-block": "../../../example/components/demo-block/index"
-  }
-}

package/packages/popover/demo/index.ts

@@ -1,15 +0,0 @@
-import { SmartComponent } from '../../common/component';
-import Sun from '@tuya-miniapp/icons/dist/svg/Sun';
-
-SmartComponent({
-  data: {
-    sunMaxFill: Sun,
-    show: true,
-  },
-
-  methods: {
-    onClose(e) {
-      this.setData({ show: false });
-    },
-  },
-});

package/packages/popover/demo/index.wxml

@@ -1,134 +0,0 @@
-<view>
-
-<demo-block title="{{I18n.t('basicUsage')}}">
-  <view style="padding: 10vh;padding-top:0px;padding-left:8px">
-    <smart-popover show="{{show}}" bind:close="onClose" placement="bottomLeft" custom-style="padding: 0px;width:200px;">
-      <smart-button>{{I18n.t('popupOnTheLowerLeft')}}</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>
-  </view>
-  <view style="padding: 10vh;padding-top:0px;padding-left:20vw">
-    <smart-popover placement="bottom" custom-style="padding: 0px;width:200px;">
-      <smart-button>{{I18n.t('popUpInTheMiddle')}}</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>
-  </view>
-  <view style="padding: 10vh;padding-top:0px;padding-left:60vw">
-    <smart-popover placement="bottomRight" custom-style="padding: 0px;width:200px;">
-      <smart-button>{{I18n.t('popUpAtTheBottomRight')}}</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>
-  </view>
-  <view style="padding-left: 8px;">
-    <smart-popover placement="top">
-      <smart-button>{{I18n.t('popOutFromTheTop')}}</smart-button>
-      <view slot="overlay">
-        tip
-      </view>
-    </smart-popover>
-  </view>
-  <view style="padding-left: 20vw;padding-top: 10vh;">
-    <smart-popover placement="left">
-      <smart-button>{{I18n.t('popOutFromTheLeft')}}</smart-button>
-      <view slot="overlay">
-        tip
-      </view>
-    </smart-popover>
-  </view>
-  <view style="padding-left: 8px;padding-top: 10vh;">
-    <smart-popover placement="right">
-      <smart-button>{{I18n.t('popUpOnTheRightSide')}}</smart-button>
-      <view slot="overlay">
-        tip
-      </view>
-    </smart-popover>
-  </view>
-  <view style="padding-left: 8px;padding-top: 10vh;">
-    <smart-popover placement="bottom">
-      <smart-button>{{I18n.t('popUpInTheMiddle')}}</smart-button>
-      <view slot="overlay">
-        tip
-      </view>
-    </smart-popover>
-  </view>
-</demo-block>
-
-</view>

package/packages/popover/index.json

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

package/packages/popover/index.less

@@ -1,28 +0,0 @@
-@import '../common/style/var.less';
-
-.smart-popover {
-  position: relative;
-  --overlay-background-color: transparent;
-  display: inline-block;
-  --icon-color: var(--popover-background-color, @popover-background-color);
-
-  &-button {
-    display: inline-block;
-  }
-
-  &-overlay {
-    position: absolute;
-    z-index: 102;
-    background-color: var(--popover-background-color, @popover-background-color);
-    box-shadow: var(--popover-box-shadow, @popover-box-shadow);
-    padding: var(--popover-padding, @popover-padding);
-    border-radius: var(--popover-border-radius, @popover-border-radius);
-    opacity: 0;
-    transition: opacity ease-in-out 0.3s;
-    &-arrow {
-      position: absolute;
-      background-position: center;
-      background-repeat: no-repeat;
-    }
-  }
-}