@cloudbase/weda-ui 1.0.21 → 2.0.9

package/src/docs/compsdocs/form/FormTime.mdx

@@ -0,0 +1,30 @@
+# 时间选择
+
+<TableLayoutView
+  componentKey="FormTime"
+  type="description"
+  origin="lowCode"
+></TableLayoutView>
+
+## 使用说明
+
+1. 放入「表单容器」组件后，可实现数据源数据的提交与显示
+2. 当父级表单容器组件已经绑定数据源后，利用「字段绑定」属性可绑定该数据源中的字段，实现新增/查看/更新对应字段的数据
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="FormTime"
+  type="attribute"
+  origin="lowCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="FormTime"
+  type="event"
+  origin="lowCode"
+></TableLayoutView>

package/src/docs/compsdocs/form/FormUploadFile.mdx

@@ -0,0 +1,30 @@
+# 文件上传
+
+<TableLayoutView
+  componentKey="FormUploadFile"
+  type="description"
+  origin="lowCode"
+></TableLayoutView>
+
+## 使用说明
+
+1. 放入「表单容器」组件后，可实现数据源数据的提交与显示
+2. 当父级表单容器组件已经绑定数据源后，利用「字段绑定」属性可绑定该数据源中的字段，实现新增/查看/更新对应字段的数据
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="FormUploadFile"
+  type="attribute"
+  origin="lowCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="FormUploadFile"
+  type="event"
+  origin="lowCode"
+></TableLayoutView>

package/src/docs/compsdocs/form/FormUrl.mdx

@@ -0,0 +1,30 @@
+# URL 地址
+
+<TableLayoutView
+  componentKey="FormUrl"
+  type="description"
+  origin="lowCode"
+></TableLayoutView>
+
+## 使用说明
+
+1. 放入「表单容器」组件后，可实现数据源数据的提交与显示
+2. 当父级表单容器组件已经绑定数据源后，利用「字段绑定」属性可绑定该数据源中的字段，实现新增/查看/更新对应字段的数据
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="FormUrl"
+  type="attribute"
+  origin="lowCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="FormUrl"
+  type="event"
+  origin="lowCode"
+></TableLayoutView>

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

@@ -0,0 +1 @@
+{ "label": "表单", "position": 20 }

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

@@ -0,0 +1,32 @@
+# 卡片布局
+
+<TableLayoutView
+  componentKey="Card"
+  type="description"
+  origin="lowCode"
+></TableLayoutView>
+
+## 使用说明
+
+垂直布局组件可以通过在其自带的插槽中插入组件，实现标准的纵向布局效果。
+
+![](https://qcloudimg.tencent-cloud.cn/raw/66af38eb338dab6a1d7ff9d2d48e48ff.png)
+
+
+## 属性介绍
+
+import TableLayoutView from '../../common/tableView';
+
+<TableLayoutView
+  componentKey="Card"
+  type="attribute"
+  origin="lowCode"
+></TableLayoutView>
+
+## 事件介绍
+
+<TableLayoutView
+  componentKey="Card"
+  type="event"
+  origin="lowCode"
+></TableLayoutView>

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

@@ -0,0 +1,42 @@
+# 普通容器
+
+<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

@@ -0,0 +1,31 @@
+# 页脚容器
+
+<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

@@ -0,0 +1,32 @@
+# 网格布局
+
+<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

@@ -0,0 +1,31 @@
+# 页头容器
+
+<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

@@ -0,0 +1,25 @@
+# 垂直布局
+
+<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

@@ -0,0 +1,31 @@
+# 分组列表容器
+
+<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

@@ -0,0 +1,37 @@
+# 滚动容器
+
+<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

@@ -0,0 +1,58 @@
+# 轮播容器
+
+<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

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

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

@@ -0,0 +1,31 @@
+# 图标
+
+<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

@@ -0,0 +1,55 @@
+# 图片
+
+<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

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

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

@@ -0,0 +1,20 @@
+# 新增组件
+
+## 适用场景
+
+用于新增单条数据
+
+## 使用说明
+
+在创建模型应用、模型页面时，会自动在数据的新增页面生成该组件，并与数据的更新/查看/管理表格页面构建关联关系，实现对应的页面跳转逻辑
+
+## 属性介绍
+
+| 属性名     | 类型     | 属性分组 | 默认值 | 说明               |
+| ---------- | -------- | -------- | ------ | ------------------ |
+| 绑定数据源 | `object` | 基础属性 | -      | 展示数据的数据来源 |
+| 按钮       | `array`  | 按钮配置 | -      | 设置组件中的按钮   |
+
+## 事件介绍
+
+无

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

@@ -0,0 +1,20 @@
+# 详情组件
+
+## 适用场景
+
+用于查看数据详情
+
+## 使用说明
+
+在创建模型应用、模型页面时，会自动在数据的查看页面生成该组件，并与数据的新增/更新/管理表格页面构建关联关系，实现对应的页面跳转逻辑
+
+## 属性介绍
+
+| 属性名     | 类型     | 属性分组 | 默认值 | 说明               |
+| ---------- | -------- | -------- | ------ | ------------------ |
+| 绑定数据源 | `object` | 基础属性 | -      | 展示数据的数据来源 |
+| 按钮       | `array`  | 按钮配置 | -      | 设置组件中的按钮   |
+
+## 事件介绍
+
+无

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

@@ -0,0 +1,24 @@
+# 表格组件
+
+## 适用场景
+
+用于以表格形式展示列表数据
+
+## 使用说明
+
+在创建模型应用、模型页面时，会自动在数据的管理表格页面生成该组件，并与数据的新增/更新/查看页面构建关联关系，实现对应的页面跳转逻辑![](https://qcloudimg.tencent-cloud.cn/raw/d42cd232d5f05c47544286a46bcab537.png)
+
+
+## 属性介绍
+
+| 属性名     | 类型     | 属性分组       | 默认值      | 说明               |
+| ---------- | -------- | -------------- | ----------- | ------------------ |
+| 绑定数据源 | `object` | 基础属性       | -           | 展示数据的数据来源 |
+| 搜索方式   | -        | 基础属性       | "searchbox" |                    |
+| 筛选字段   | -        | 基础属性       | -           |                    |
+| 按钮       | `array`  | 顶部按钮配置   | -           | 设置组件中的按钮   |
+| 按钮       | `array`  | 操作列按钮配置 | -           | 设置组件中的按钮   |
+
+## 事件介绍
+
+无

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

@@ -0,0 +1,21 @@
+# 更新组件
+
+## 适用场景
+
+用于更新现有单条数据
+
+## 使用说明
+
+在创建模型应用、模型页面时，会自动在数据的更新页面生成该组件，并与数据的新增/查看/管理表格页面构建关联关系，实现对应的页面跳转逻辑
+
+
+## 属性介绍
+
+| 属性名     | 类型     | 属性分组 | 默认值 | 说明               |
+| ---------- | -------- | -------- | ------ | ------------------ |
+| 绑定数据源 | `object` | 基础属性 | -      | 展示数据的数据来源 |
+| 按钮       | `array`  | 按钮配置 | -      | 设置组件中的按钮   |
+
+## 事件介绍
+
+无

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

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

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

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

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

@@ -0,0 +1,38 @@
+# 侧边导航面板
+
+<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>