@cloudbase/weda-ui 2.0.12 → 2.0.28

package/src/docs/compsdocs/grid/Container.mdx

@@ -1,41 +0,0 @@
-# 普通容器
-
-<TableLayoutView
-  componentKey="Container"
-  type="description"
-  origin="sourceCode"
-></TableLayoutView>
-
-## 使用说明
-
-普通容器存在多种使用场景，对于应用的搭建有着重要的作用
-
-### 使用普通容器进行组件样式的统一控制
-
-普通容器常被作为其他组件的父级节点进行使用，当普通容器的样式属性修改时，其子节点的组件也会随之进行修改
-
-![](https://qcloudimg.tencent-cloud.cn/raw/6789641ff7a752b2cb2fe77c94fdeb3a.png)
-
-### 使用普通容器进行组件的循环遍历展示
-
-我们可以将普通容器绑定循环后，实现其子节点组件的循环展示，如下图所示，具体操作方式可参考文档: [组件循环说明](https://cloud.tencent.com/document/product/1301/58434)
-
-![](https://qcloudimg.tencent-cloud.cn/raw/9cdb80ecd07ea73cbdb0c644cb788208.png)
-
-## 属性介绍
-
-import TableLayoutView from '../../common/tableView';
-
-<TableLayoutView
-  componentKey="Container"
-  type="attribute"
-  origin="sourceCode"
-></TableLayoutView>
-
-## 事件介绍
-
-<TableLayoutView
-  componentKey="Container"
-  type="event"
-  origin="sourceCode"
-></TableLayoutView>

package/src/docs/compsdocs/grid/Footer.mdx

@@ -1,31 +0,0 @@
-# 页脚容器
-
-<TableLayoutView
-  componentKey="Footer"
-  type="description"
-  origin="lowCode"
-></TableLayoutView>
-
-## 使用说明
-
-当组件放置在页脚容器中时，组件位置便会固定展示在页面的底部。
-
-![](https://qcloudimg.tencent-cloud.cn/raw/2f2c5df2b1072ded515e033fde785f19.png)
-
-## 属性介绍
-
-import TableLayoutView from '../../common/tableView';
-
-<TableLayoutView
-  componentKey="Footer"
-  type="attribute"
-  origin="lowCode"
-></TableLayoutView>
-
-## 事件介绍
-
-<TableLayoutView
-  componentKey="Footer"
-  type="event"
-  origin="lowCode"
-></TableLayoutView>

package/src/docs/compsdocs/grid/GridLayout.mdx

@@ -1,31 +0,0 @@
-# 网格布局
-
-<TableLayoutView
-  componentKey="GridLayout"
-  type="description"
-  origin="lowCode"
-></TableLayoutView>
-
-## 使用说明
-
-网格布局组件可以通过配置区生成对应比例的插槽，用于帮助更好的实现横向的排列效果。
-
-![](https://qcloudimg.tencent-cloud.cn/raw/6ed4e14bb69eede45c745c845f6f6675.png)
-
-## 属性介绍
-
-import TableLayoutView from '../../common/tableView';
-
-<TableLayoutView
-  componentKey="GridLayout"
-  type="attribute"
-  origin="lowCode"
-></TableLayoutView>
-
-## 事件介绍
-
-<TableLayoutView
-  componentKey="GridLayout"
-  type="event"
-  origin="lowCode"
-></TableLayoutView>

package/src/docs/compsdocs/grid/Header.mdx

@@ -1,31 +0,0 @@
-# 页头容器
-
-<TableLayoutView
-  componentKey="Header"
-  type="description"
-  origin="lowCode"
-></TableLayoutView>
-
-## 使用说明
-
-当组件放置在页头容器中时，组件位置便会固定展示在页面的顶部，常用于展示标题。
-
-![](https://qcloudimg.tencent-cloud.cn/raw/91fcc54d14e1440773fb68ec294bcfc1.png)
-
-## 属性介绍
-
-import TableLayoutView from '../../common/tableView';
-
-<TableLayoutView
-  componentKey="Header"
-  type="attribute"
-  origin="lowCode"
-></TableLayoutView>
-
-## 事件介绍
-
-<TableLayoutView
-  componentKey="Header"
-  type="event"
-  origin="lowCode"
-></TableLayoutView>

package/src/docs/compsdocs/grid/Layout.mdx

@@ -1,25 +0,0 @@
-# 垂直布局
-
-<TableLayoutView
-  componentKey="Layout"
-  type="description"
-  origin="lowCode"
-></TableLayoutView>
-
-## 属性介绍
-
-import TableLayoutView from '../../common/tableView';
-
-<TableLayoutView
-  componentKey="Layout"
-  type="attribute"
-  origin="lowCode"
-></TableLayoutView>
-
-## 事件介绍
-
-<TableLayoutView
-  componentKey="Layout"
-  type="event"
-  origin="lowCode"
-></TableLayoutView>

package/src/docs/compsdocs/grid/List.mdx

@@ -1,31 +0,0 @@
-# 分组列表容器
-
-<TableLayoutView
-  componentKey="List"
-  type="description"
-  origin="lowCode"
-></TableLayoutView>
-
-## 使用说明
-
-使用分组列表容器的自带插槽即可快速的实现列表的分组效果，常与**列表项**组件配合使用。
-
-![](https://qcloudimg.tencent-cloud.cn/raw/f0ada7b2b47704710b9d14b0e009a9a3.png)
-
-## 属性介绍
-
-import TableLayoutView from '../../common/tableView';
-
-<TableLayoutView
-  componentKey="List"
-  type="attribute"
-  origin="lowCode"
-></TableLayoutView>
-
-## 事件介绍
-
-<TableLayoutView
-  componentKey="List"
-  type="event"
-  origin="lowCode"
-></TableLayoutView>

package/src/docs/compsdocs/grid/ScrollView.mdx

@@ -1,37 +0,0 @@
-# 滚动容器
-
-<TableLayoutView
-  componentKey="ScrollView"
-  type="description"
-  origin="sourceCode"
-></TableLayoutView>
-
-## 使用说明
-
-滚动容器可以实现页面或功能模块的滚动效果，当滚动容器内组件内容占用的总宽度/高度大于滚动容器本身的宽度/高度时，便会出现滚动条，通过滑动滚动条滑动来查看容器内的全部内容，示例如下:
-
-1. 拖入一个滚动容器组件，将高度设置为 300
-
-![](https://qcloudimg.tencent-cloud.cn/raw/15e8ca4864efeda01609b062fc867675.png)
-
-2. 在滚动容器中添加三个图片组件，每个图片组件的高度设为 200，这样容器内的组件高度便大于了容器本身的高度，滚动条出现。
-
-![](https://qcloudimg.tencent-cloud.cn/raw/aca40c58815769adad57f551b994a8fe.png)
-
-## 属性介绍
-
-import TableLayoutView from '../../common/tableView';
-
-<TableLayoutView
-  componentKey="ScrollView"
-  type="attribute"
-  origin="sourceCode"
-></TableLayoutView>
-
-## 事件介绍
-
-<TableLayoutView
-  componentKey="ScrollView"
-  type="event"
-  origin="sourceCode"
-></TableLayoutView>

package/src/docs/compsdocs/grid/Swiper.mdx

@@ -1,57 +0,0 @@
-# 轮播容器
-
-<TableLayoutView
-  componentKey="Swiper"
-  type="description"
-  origin="sourceCode"
-></TableLayoutView>
-
-## 使用方法
-
-### 通过数据源数据/变量控制对轮播图的展示内容进行控制
-
-当存在需要使用数据进行轮播图内容管理的场景下，我们可以使用轮播容器组件实现，操作方式如下:
-
-1. 在编辑区中添加一个轮播容器组件，并将图片组件添加轮播容器的子节点下
-
-![](https://qcloudimg.tencent-cloud.cn/raw/a21ba8b333eea0ca66a89e395c772edc.png)
-
-2. 为图片组件通过绑定循环功能，绑定用来控制轮播图内容的循环/普通变量，绑定完成后轮播图即可根据变量中的数据进行渲染
-
-![](https://qcloudimg.tencent-cloud.cn/raw/e713f95b5ae74eb7b55a1ac7c683a1e3.png)
-
-### 使用轮播容器实现高级的轮播场景
-
-我们可以使用轮播容器实现更为复杂的轮播场景，如下图所示:
-
-![](https://qcloudimg.tencent-cloud.cn/raw/3e8f4b15877539b0fb8a6e49fd5ccf5b.png)
-
-1. 为轮播容器的子节点下添加普通容器组件，并在普通容器组件的子节点下添加图片以及按钮组件
-
-![](https://qcloudimg.tencent-cloud.cn/raw/06b7e81713821bf352763ef9ceda52b5.png)
-
-2. 设置按钮组件的定位模式为**固定**，并进行位置的调整后即可实现类似的复杂轮播场景。
-
-![](https://qcloudimg.tencent-cloud.cn/raw/293a179b0b2ed580c97d4e0ba9dcc5a3.png)
-
-## 属性介绍
-
-import TableLayoutView from '../../common/tableView';
-
-<TableLayoutView
-  componentKey="Swiper"
-  type="attribute"
-  origin="sourceCode"
-></TableLayoutView>
-
-## 事件介绍
-
-<TableLayoutView
-  componentKey="Swiper"
-  type="event"
-  origin="sourceCode"
-></TableLayoutView>
-
-## 组件使用限制
-
-需注意，由于小程序端样式限制问题，轮播容器中的图片高度不得设置为 auto，否则将无法渲染。

package/src/docs/compsdocs/grid/_category_.json

@@ -1 +0,0 @@
-{ "label": "布局容器", "position": 40 }

package/src/docs/compsdocs/media/Icon.mdx

@@ -1,31 +0,0 @@
-# 图标
-
-<TableLayoutView
-  componentKey="Icon"
-  type="description"
-  origin="lowCode"
-></TableLayoutView>
-
-## 使用说明
-
-可以通过在图标组件的配置区中选择微搭提供的内置 icon 实现图标的展示效果并调整图标颜色等参数，同时图标组件也支持用户对图标进行自定义的上传。
-
-![](https://qcloudimg.tencent-cloud.cn/raw/5cd6ab3affb14dc404ddcd939aa6a220.png)
-
-## 属性介绍
-
-import TableLayoutView from '../../common/tableView';
-
-<TableLayoutView
-  componentKey="Icon"
-  type="attribute"
-  origin="lowCode"
-></TableLayoutView>
-
-## 事件介绍
-
-<TableLayoutView
-  componentKey="Icon"
-  type="event"
-  origin="lowCode"
-></TableLayoutView>

package/src/docs/compsdocs/media/Image.mdx

@@ -1,55 +0,0 @@
-# 图片
-
-<TableLayoutView
-  componentKey="Image"
-  type="description"
-  origin="sourceCode"
-></TableLayoutView>
-
-## 使用说明
-
-### 展示微搭素材中心图片
-
-在图片组件的配置区中点击 icon，即可调起微搭的素材中心，在素材中心上传或选择对应的图片素材后便可以在页面中进行图片的展示。
-
-![](https://qcloudimg.tencent-cloud.cn/raw/e8f7807bf68597e6f61d7a7fe8517109.png)
-
-### 展示 url 图片
-
-图片组件同样支持对图片 url 进行渲染展示，仅需在配置区中输入对应的图片 url 便可以完成图片的渲染。
-
-![](https://qcloudimg.tencent-cloud.cn/raw/d41b668fd07f55df539507474569dbdb.png)
-
-### 绑定变量实现图片展示
-
-当变量内容为图片 url 的时候，图片组件支持绑定变量并对其进行渲染,示例如下:
-
-1. 创建一个普通变量，并将其初始值填写为图片的 url
-
-![](https://qcloudimg.tencent-cloud.cn/raw/bccd4aff2ae2b17b229b9dbec37e24d4.png)
-
-2. 点击图片组件配置区的绑定按钮，并绑定该变量，可以看到图片已经被正常渲染
-
-![](https://qcloudimg.tencent-cloud.cn/raw/dd90f11577ff88d15db608dfc57817c4.png)
-
-## 属性介绍
-
-import TableLayoutView from '../../common/tableView';
-
-<TableLayoutView
-  componentKey="Image"
-  type="attribute"
-  origin="sourceCode"
-></TableLayoutView>
-
-## 事件介绍
-
-<TableLayoutView
-  componentKey="Image"
-  type="event"
-  origin="sourceCode"
-></TableLayoutView>
-
-## 组件使用限制
-
-需注意，由于小程序端样式限制问题，图片组件的高度不得设置为 auto，否则将无法渲染。

package/src/docs/compsdocs/media/_category_.json

@@ -1 +0,0 @@
-{ "label": "多媒体", "position": 50 }

package/src/docs/compsdocs/model/ModelCreate.mdx

@@ -1,44 +0,0 @@
-# 新增组件
-
-## 适用场景
-
-用于新增单条数据
-
-## 使用说明
-
-在创建模型应用、模型页面时，会自动在数据的新增页面生成该组件，并与数据的更新/查看/管理表格页面构建关联关系，实现对应的页面跳转逻辑
-
-## 属性介绍
-
-| 属性名     | 类型     | 属性分组 | 默认值 | 说明               |
-| ---------- | -------- | -------- | ------ | ------------------ |
-| 绑定数据源 | `object` | 基础属性 | -      | 展示数据的数据来源 |
-| 按钮       | `array`  | 按钮配置 | -      | 设置组件中的按钮   |
-
-## 事件介绍
-
-无
-
-## 自定义按钮介绍
-
-新增组件对应的按钮支持自定义能力，可根据场景灵活配置按钮的属性及对应调用的事件。具体使用方法可参考模型表格组件。
-
-#### 按钮动作
-
-| 按钮动作 | 类型   | 说明                       |
-| -------- | ------ | -------------------------- |
-| 提交     | 内置   | 提交表单                   |
-| 取消     | 内置   | 取消并返回                 |
-| 自定义   | 自定义 | 此时该按钮的自定义事件生效 |
-
-#### 新增组件按钮触发返回的 event 对象如下：
-
-> 新增组件
->
-> ```javascript
-> export default function ({ event, data }) {
->   const {
->     data: formValues, // 当前表单的values
->   } = event.detail.value;
-> }
-> ```

package/src/docs/compsdocs/model/ModelDetail.mdx

@@ -1,44 +0,0 @@
-# 详情组件
-
-## 适用场景
-
-用于查看数据详情
-
-## 使用说明
-
-在创建模型应用、模型页面时，会自动在数据的查看页面生成该组件，并与数据的新增/更新/管理表格页面构建关联关系，实现对应的页面跳转逻辑
-
-## 属性介绍
-
-| 属性名     | 类型     | 属性分组 | 默认值 | 说明               |
-| ---------- | -------- | -------- | ------ | ------------------ |
-| 绑定数据源 | `object` | 基础属性 | -      | 展示数据的数据来源 |
-| 按钮       | `array`  | 按钮配置 | -      | 设置组件中的按钮   |
-
-## 事件介绍
-
-无
-
-## 自定义按钮介绍
-
-详情组件对应的按钮支持自定义能力，可根据场景灵活配置按钮的属性及对应调用的事件。具体使用方法可参考模型表格组件。
-
-#### 按钮动作
-
-| 按钮动作 | 类型   | 说明                       |
-| -------- | ------ | -------------------------- |
-| 编辑     | 内置   | 编辑该条记录               |
-| 删除     | 内置   | 删除该条记录并返回         |
-| 自定义   | 自定义 | 此时该按钮的自定义事件生效 |
-
-#### 详情组件按钮触发返回的 event 对象如下：
-
-> 详情组件
->
-> ```javascript
-> export default function ({ event, data }) {
->   const {
->     record, // 当前页面的记录
->   } = event.detail.value;
-> }
-> ```

package/src/docs/compsdocs/model/ModelTable.mdx

@@ -1,156 +0,0 @@
-# 表格组件
-
-## 适用场景
-
-用于以表格形式展示列表数据
-
-## 使用说明
-
-在创建模型应用、模型页面时，会自动在数据的管理表格页面生成该组件，并与数据的新增/更新/查看页面构建关联关系，实现对应的页面跳转逻辑![](https://qcloudimg.tencent-cloud.cn/raw/d42cd232d5f05c47544286a46bcab537.png)
-
-## 属性介绍
-
-| 属性名     | 类型     | 属性分组       | 默认值      | 说明               |
-| ---------- | -------- | -------------- | ----------- | ------------------ |
-| 绑定数据源 | `object` | 基础属性       | -           | 展示数据的数据来源 |
-| 搜索方式   | -        | 基础属性       | "searchbox" |                    |
-| 筛选字段   | -        | 基础属性       | -           |                    |
-| 按钮       | `array`  | 顶部按钮配置   | -           | 设置组件中的按钮   |
-| 按钮       | `array`  | 操作列按钮配置 | -           | 设置组件中的按钮   |
-
-## 事件介绍
-
-无
-
-## 组件自定义按钮介绍
-
-表格组件对应的按钮支持自定义能力，可根据场景灵活配置按钮的属性及对应调用的事件。具有这种自定义能力的按钮定义为按钮选区。
-
-- 选中**表格组件**以后，右侧属性**按钮配置**里可以支持添加、删除表格顶部以及操作列的按钮，并且自定义按钮的属性。
-
-  ![表格组件](https://qcloudimg.tencent-cloud.cn/raw/dba6efb2352afb2448ad8091e8cf133f.png)
-  ![表格组件](https://qcloudimg.tencent-cloud.cn/raw/009eedc320fe69d7bf11cba07baa7d56.png)
-
-- 其中按钮动作包含内置和自定义两种，新建按钮时默认为“自定义”，详情见下表：
-
-  #### 顶部按钮动作
-
-  | 按钮动作 | 类型   | 说明                       |
-  | -------- | ------ | -------------------------- |
-  | 新建     | 内置   | 新建数据                   |
-  | 删除     | 内置   | 删除所选数据               |
-  | 导出     | 内置   | 导出所选数据               |
-  | 自定义   | 自定义 | 此时该按钮的自定义事件生效 |
-
-  #### 操作列按钮动作
-
-  | 按钮动作 | 类型   | 说明                       |
-  | -------- | ------ | -------------------------- |
-  | 查看     | 内置   | 查看当前行                 |
-  | 编辑     | 内置   | 编辑当前行                 |
-  | 删除     | 内置   | 删除当前行                 |
-  | 自定义   | 自定义 | 此时该按钮的自定义事件生效 |
-
-- 若按钮的动作设置为“自定义”，则需要设置该按钮的自定义事件。方法是鼠标选中该按钮，在右侧的“选区属性”面板中设置 tap（点击时）事件。在执行动作中可以使用平台提供的方法，也可以自定义方法。
-
-![表格组件](https://qcloudimg.tencent-cloud.cn/raw/849d9c57d6c4337ea8ec1a2d947f4cec.png)
-
-- 按钮选区触发条件被触发时会返回该触发条件的 **event** 对象
-
-  ```javascript
-  export default function ({ event, data }) {
-    // event为条件被触发时返回的event对象
-    console.log(event);
-  }
-  ```
-
-  其中，表格组件按钮选区触发返回的 event 对象如下：
-
-  > 顶部按钮的自定义方法
-  >
-  > ```javascript
-  > export default function ({ event, data }) {
-  >   const {
-  >     selectedKeys, // 已选记录的keys
-  >     records, // 查询列表记录
-  >   } = event.detail.value;
-  > }
-  > ```
-  >
-  > 表格操作列的自定义方法
-  >
-  > ```javascript
-  > export default function ({ event, data }) {
-  >   const {
-  >     record, // 当前行的数据
-  >     recordKey, // 当前行的key
-  >   } = event.detail.value;
-  > }
-  > ```
-
----
-
-## 选区案例参考
-
-![案例demo](https://qcloudimg.tencent-cloud.cn/raw/d29c296609ace6420bc3d89d16c7cc1a.png)
-![案例demo](https://qcloudimg.tencent-cloud.cn/raw/a1a655823a0d98e60017c1271e41eef8.png)
-
-## 选区其他事项
-
-- 选区按钮如需绑定变量，变量值可以参考如下：
-
-```javascript
-[
-  {
-    text: '新建',
-    tooltip: '',
-    type: 'primary',
-    htmlType: 'button',
-    action: 'create',
-    show: true,
-    loading: false,
-    disabled: false,
-  },
-  {
-    text: '删除',
-    tooltip: '',
-    type: 'weak',
-    htmlType: 'button',
-    action: 'del',
-    show: true,
-    loading: false,
-    disabled: false,
-  },
-  {
-    text: '导出',
-    tooltip: '',
-    type: 'weak',
-    htmlType: 'button',
-    action: 'export',
-    show: true,
-    loading: false,
-    disabled: false,
-  },
-  {
-    text: '自定义按钮',
-    tooltip: '',
-    type: 'weak',
-    htmlType: 'button',
-    action: 'custom', // 使用自定义动作时，设置为“custom”
-    show: true,
-    loading: false,
-    disabled: false,
-    selectableBlock: {
-      listenerInstances: [
-        {
-          key: '',
-          trigger: 'tap',
-          instanceFunction: function ({ event, data }) {
-            return app.showModal(); // 选区按钮对应的方法代码，可以使用平台的方法，或者自定义方法 $page.handler.xxx({ event, data })
-          },
-        },
-      ],
-    },
-  },
-];
-```

package/src/docs/compsdocs/model/ModelUpdate.mdx

@@ -1,44 +0,0 @@
-# 更新组件
-
-## 适用场景
-
-用于更新现有单条数据
-
-## 使用说明
-
-在创建模型应用、模型页面时，会自动在数据的更新页面生成该组件，并与数据的新增/查看/管理表格页面构建关联关系，实现对应的页面跳转逻辑
-
-## 属性介绍
-
-| 属性名     | 类型     | 属性分组 | 默认值 | 说明               |
-| ---------- | -------- | -------- | ------ | ------------------ |
-| 绑定数据源 | `object` | 基础属性 | -      | 展示数据的数据来源 |
-| 按钮       | `array`  | 按钮配置 | -      | 设置组件中的按钮   |
-
-## 事件介绍
-
-无
-
-## 自定义按钮介绍
-
-更新组件对应的按钮支持自定义能力，可根据场景灵活配置按钮的属性及对应调用的事件。具体使用方法可参考模型表格组件。
-
-#### 按钮动作
-
-| 按钮动作 | 类型   | 说明                       |
-| -------- | ------ | -------------------------- |
-| 提交     | 内置   | 提交表单                   |
-| 取消     | 内置   | 取消并返回                 |
-| 自定义   | 自定义 | 此时该按钮的自定义事件生效 |
-
-#### 更新组件按钮触发返回的 event 对象如下：
-
-> 更新组件
->
-> ```javascript
-> export default function ({ event, data }) {
->   const {
->     data: formValues, // 当前表单的values
->   } = event.detail.value;
-> }
-> ```