@cloudbase/weda-ui 2.0.12 → 2.0.26

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;
-> }
-> ```

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

@@ -1,21 +0,0 @@
-# 布局组件
-
-## 适用场景
-
-用于构建带有顶部导航的页面布局
-
-## 使用说明
-
-组件顶部区域标题可自定义，中间内容插槽区域中可放入其他组件用于构建页面内容
-
-![](https://qcloudimg.tencent-cloud.cn/raw/5f6380288d48e9b12f7d906358965f11.png)
-
-## 属性介绍
-
-| 属性名   | 类型     | 属性分组 | 默认值   | 说明                   |
-| -------- | -------- | -------- | -------- | ---------------------- |
-| 页面标题 | `string` | 基础属性 | 页面标题 | 组件顶部显示的标题内容 |
-
-## 事件介绍
-
-无

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

@@ -1 +0,0 @@
-{ "label": "模型组件", "position": 75 }

package/src/docs/compsdocs/navmenu/Classification.mdx

@@ -1,37 +0,0 @@
-# 侧边导航面板
-
-<TableLayoutView
-  componentKey="Classification"
-  type="description"
-  origin="lowCode"
-></TableLayoutView>
-
-## 使用说明
-
-使用侧边导航面板组件可以实现页面的左侧 Tab 切换效果，当在组件配置区点击新增标签时，在大纲树中会生成对应的**内容插槽**，我们可以通过在内容插槽中放置对应组件实现不同 Tab 的的内容构建，以下文为例:
-
-1. 在侧边导航面板组件的两个内容插槽中分别添加两个文本组件，并为两个文本组件设置不同的内容
-
-![](https://qcloudimg.tencent-cloud.cn/raw/0b5640a94e57826585ea975d66b1b56d.png)
-
-2. 可以看到，当进行 Tab 切换时，不同的 Tab 便呈现出了不同的文本组件内容
-
-![](https://qcloudimg.tencent-cloud.cn/raw/3b40f7e41c7e4b42c143119937e24996.png)
-
-## 属性介绍
-
-import TableLayoutView from '../../common/tableView';
-
-<TableLayoutView
-  componentKey="Classification"
-  type="attribute"
-  origin="lowCode"
-></TableLayoutView>
-
-## 事件介绍
-
-<TableLayoutView
-  componentKey="Classification"
-  type="event"
-  origin="lowCode"
-></TableLayoutView>

package/src/docs/compsdocs/navmenu/NavBar.mdx

@@ -1,52 +0,0 @@
-# 顶部导航
-
-<TableLayoutView
-  componentKey="NavBar"
-  type="description"
-  origin="lowCode"
-></TableLayoutView>
-
-## 使用说明
-
-通过配置区进行简单的配置即可快速实现页面的顶部导航效果，同时该组件提供了返回上级页面与返回主页的功能，当在组件区开启对应配置时该组件便会渲染出对应的按钮，点击后即可实现对应的页面跳转。
-
-![](https://qcloudimg.tencent-cloud.cn/raw/d96f3fbe60300da2c1eead0d6abbe4b6.png)
-
-## 属性介绍
-
-import TableLayoutView from '../../common/tableView';
-
-<TableLayoutView
-  componentKey="NavBar"
-  type="attribute"
-  origin="lowCode"
-></TableLayoutView>
-
-## 事件介绍
-
-<TableLayoutView
-  componentKey="NavBar"
-  type="event"
-  origin="lowCode"
-></TableLayoutView>
-
-## 限制说明
-
-1. 小程序使用时，需在页面设置-页面样式-小程序导航中奖导航栏样式切换为「自定义样式」，否则小程序页面上方会显示出 2 个导航栏，同时导航栏中间会留有不可消除的空白间距
-
-   <img
-     src="https://qcloudimg.tencent-cloud.cn/raw/4a22f88657f801a794fdbba6f9e515bc.png"
-     width="50%"
-   />
-
-   <img
-     src="https://qcloudimg.tencent-cloud.cn/raw/2d6075e2a9941a9cb8964c925253422d.png"
-     width="35%"
-   />
-
-2. 如需在小程序顶部额外附加一个样式合理的导航栏，或者小程序/H5 想实现更灵活的导航样式，推荐使用「页头容器」组件来进行导航栏的自定义
-
-   <img
-     src="https://qcloudimg.tencent-cloud.cn/raw/fac09e42ed3a833d5ee364c78d01fc44.png"
-     width="50%"
-   />

package/src/docs/compsdocs/navmenu/NavLayout.mdx

@@ -1,29 +0,0 @@
-# 宫格导航
-
-<TableLayoutView
-  componentKey="NavLayout"
-  type="description"
-  origin="sourceCode"
-></TableLayoutView>
-
-## 使用说明
-
-支持灵活定义各个导航项目的图标文字内容、跳转交互、PC/移动多端列数和各项细致完备的样式属性![](https://qcloudimg.tencent-cloud.cn/raw/85be8cc619042f1e16f58e4015ee0e67.png)
-
-## 属性介绍
-
-import TableLayoutView from '../../common/tableView';
-
-<TableLayoutView
-  componentKey="NavLayout"
-  type="attribute"
-  origin="sourceCode"
-></TableLayoutView>
-
-## 事件介绍
-
-<TableLayoutView
-  componentKey="NavLayout"
-  type="event"
-  origin="sourceCode"
-></TableLayoutView>

package/src/docs/compsdocs/navmenu/TabBar.mdx

@@ -1,43 +0,0 @@
-# Tab 栏
-
-<TableLayoutView
-  componentKey="TabBar"
-  type="description"
-  origin="lowCode"
-></TableLayoutView>
-
-## 使用说明
-
-通过组件配置区即可快速实现 Tab 栏的实现，Tab 栏除了基础的标题、图标配置外也可以通过配置区快速的实现页面跳转逻辑。
-
-### 设置选中页面
-
-1. 首先在配置区中进行选中页面的设置，以首页为例
-
-![](https://qcloudimg.tencent-cloud.cn/raw/291b8e10bd0efd58add639e2aae6d700.png)
-
-2. 随后为第一个 Tab 进行跳转页面-首页的相关配置
-
-![](https://qcloudimg.tencent-cloud.cn/raw/904e0f94800150671ac0bc7fc149f3d5.png)
-
-3. 可以看到，因为 Tab 的跳转页面与步骤 1 中设置的选中页面相同，该 Tab 的标题与图标便会变为激活状态。
-
-![](https://qcloudimg.tencent-cloud.cn/raw/a2b7c6f347ab8889bdcefdb7a80702fa.png)
-
-## 属性介绍
-
-import TableLayoutView from '../../common/tableView';
-
-<TableLayoutView
-  componentKey="TabBar"
-  type="attribute"
-  origin="lowCode"
-></TableLayoutView>
-
-## 事件介绍
-
-<TableLayoutView
-  componentKey="TabBar"
-  type="event"
-  origin="lowCode"
-></TableLayoutView>

package/src/docs/compsdocs/navmenu/TabBarItem.mdx

@@ -1,29 +0,0 @@
-# Tab 元素
-
-<TableLayoutView
-  componentKey="TabBarItem"
-  type="description"
-  origin="lowCode"
-></TableLayoutView>
-
-## 使用说明
-
-用于放置于 Tab 栏组件的插槽中使用
-
-## 属性介绍
-
-import TableLayoutView from '../../common/tableView';
-
-<TableLayoutView
-  componentKey="TabBarItem"
-  type="attribute"
-  origin="lowCode"
-></TableLayoutView>
-
-## 事件介绍
-
-<TableLayoutView
-  componentKey="TabBarItem"
-  type="event"
-  origin="lowCode"
-></TableLayoutView>

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

@@ -1 +0,0 @@
-{ "label": "导航菜单", "position": 60 }

package/src/docs/compsdocs/senior/Lottery.mdx

@@ -1,45 +0,0 @@
-# 九宫格抽奖
-
-<TableLayoutView
-  componentKey="Lottery"
-  type="description"
-  origin="sourceCode"
-></TableLayoutView>
-
-## 使用说明
-
-1. 奖品配置，支持手动配置和数据源配置，最多支持 8 个奖品，不足 8 个奖品会有占位图显示，超过 8 个的无效。
-
-手动配置：
-
-![https://qcloudimg.tencent-cloud.cn/raw/3f5eb1b837c60c1b65f2a50ce19a5786.png](https://qcloudimg.tencent-cloud.cn/raw/3f5eb1b837c60c1b65f2a50ce19a5786.png)
-
-绑定数据源配置：
-
-![https://qcloudimg.tencent-cloud.cn/raw/d93012934fbb222dbafbf7e3bb981260.png](https://qcloudimg.tencent-cloud.cn/raw/d93012934fbb222dbafbf7e3bb981260.png)
-
-2. 设置启动抽奖为开始开关，如果设置为关闭则不会触发抽奖动作，抽奖过程成如果绑定数据源返回 false，立马停止。
-
-3. 设置抽奖希望的结果，支持 1-8，从左上角第一个奖品位置开始为 1，2，3……的奖品顺序，
-
-4. 点击开始抽奖页面，触发抽奖动画，开始后收到绑定数据抽奖的结果后动画逐渐停止，并且显示中奖的位置，如果收不到则超时后自动停止动画。
-
-![https://qcloudimg.tencent-cloud.cn/raw/a3e11d2daa54950a69b2c3d9862c57bb.png](https://qcloudimg.tencent-cloud.cn/raw/a3e11d2daa54950a69b2c3d9862c57bb.png)
-
-## 属性介绍
-
-import TableLayoutView from '../../common/tableView';
-
-<TableLayoutView
-  componentKey="Lottery"
-  type="attribute"
-  origin="sourceCode"
-></TableLayoutView>
-
-## 事件
-
-<TableLayoutView
-  componentKey="Lottery"
-  type="event"
-  origin="sourceCode"
-></TableLayoutView>