@cloudbase/weda-ui 1.0.24 → 2.0.8

package/src/configs/components/scrollVeiw.json

@@ -13,7 +13,8 @@
             "condition": "{{ $self.value }}"
           }
         ],
-        "x-category": "基础属性"
+        "x-category": "基础属性",
+        "remarks": "开启后，将开启纵向滚动条，组件支持上下滚动"
       },
       "scrollX": {
         "title": "允许横向滚动",
@@ -26,7 +27,8 @@
             "condition": "{{ $self.value }}"
           }
         ],
-        "x-category": "基础属性"
+        "x-category": "基础属性",
+        "remarks": "开启后，将开启横向滚动条，组件支持左右滚动"
       },
       "upperThreshold": {
         "title": "距顶部/左边多远时，触发scrolltoupper事件",
@@ -43,17 +45,20 @@
       "scrollTop": {
         "title": "竖向滚动条位置",
         "type": "number",
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks": "输入默认值，竖向滚动条将默认移动到该位置"
       },
       "scrollLeft": {
         "title": "横向滚动条位置",
         "type": "number",
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks": "输入默认值，横向滚动条将默认移动到该位置"
       },
       "scrollIntoView": {
         "title": "滚到的元素ID",
         "type": "string",
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks": "将当前的元素滚动到浏览器窗口的可视区域内"
       },
       "scrollWithAnimation": {
         "title": "在设置滚动条位置时使用动画过渡",
@@ -62,7 +67,8 @@
         "x-platforms": [
           "MP"
         ],
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks": "开启滚动条动画"
       },
       "enableBackToTop": {
         "title": "iOS点击顶部状态栏、安卓双击标题栏时，滚动条返回顶部，只支持竖向",
@@ -71,7 +77,8 @@
         "x-platforms": [
           "MP"
         ],
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks": "开启后当执行对应操作后滚动条将自动返回顶部"
       },
       "enableFlex": {
         "title": "启用 flexbox 布局",
@@ -80,7 +87,8 @@
         "x-platforms": [
           "MP"
         ],
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks": "开启flexbox布局"
       },
       "scrollAnchoring": {
         "title": "开启 scroll anchoring 特性",
@@ -89,7 +97,8 @@
         "x-platforms": [
           "MP"
         ],
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks": "开启scroll-anchoring特性"
       },
       "refresherEnabled": {
         "title": "开启自定义下拉刷新",
@@ -105,7 +114,8 @@
         "x-platforms": [
           "MP"
         ],
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks": "开启后可自定义对下拉刷新进行相关配置"
       },
       "refresherThreshold": {
         "title": "设置自定义下拉刷新阈值",
@@ -172,7 +182,8 @@
         "x-platforms": [
           "MP"
         ],
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks": "开启scroll-view增强特性 "
       },
       "bounces": {
         "title": "iOS 下 scroll-view 边界弹性控制",
@@ -190,7 +201,8 @@
         "x-platforms": [
           "MP"
         ],
-        "x-category": "基础属性"
+        "x-category": "基础属性",
+        "remarks": "控制滚动条是否显示/隐藏"
       },
       "pagingEnabled": {
         "title": "分页滑动效果",

package/src/configs/components/swiper.json

@@ -6,57 +6,66 @@
         "title": "自动切换",
         "default": true,
         "type": "boolean",
-        "x-category": "基础属性"
+        "x-category": "基础属性",
+        "remarks":"开启后，轮播图将会自动根据配置的时间间隔进行自动滚动，关闭后则轮播图仅支持通过点击锚点的方式进行切换"
       },
       "indicatorDots": {
         "title": "导航锚点",
         "default": true,
         "type": "boolean",
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks":"开启/关闭轮播图锚点"
       },
       "current": {
         "title": "当前所在滑块的 index",
         "default": 0,
         "type": "number",
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks":"更改轮播图的默认展示位置，0为默认展示第一张轮播图，以此类推"
       },
       "interval": {
         "title": "自动切换时间间隔",
         "default": 5000,
         "type": "number",
-        "x-category": "基础属性"
+        "x-category": "基础属性",
+        "remarks":"配置轮播图滚动的时间间隔，时间单位为ms"
       },
       "duration": {
         "title": "滑动动画时长",
         "default": 500,
         "type": "number",
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks":"更改轮播图切换时的滑动动画时长"
       },
       "circular": {
         "title": "衔接滑动",
         "default": true,
         "type": "boolean",
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks":"更改轮播图切换时动画的滑动方式"
       },
       "vertical": {
         "title": "纵向轮播",
         "default": false,
         "type": "boolean",
-        "x-category": "基础属性"
+        "x-category": "基础属性",
+        "remarks":"开启后，轮播的滚动方式将会由横向滚动变更为纵向滚动"
       },
       "indicatorColor": {
         "title": "锚点颜色",
         "type": "string",
         "x-component": "color",
         "default": "rgba(200, 200, 200, 0.9)",
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks":"更改锚点普通状态下的颜色"
       },
       "indicatorActiveColor": {
         "title": "锚点激活色",
         "type": "string",
         "x-component": "color",
         "default": "rgba(0, 0, 0, 0.9)",
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks":"更改锚点选中时的颜色"
       }
     }
   },

package/src/configs/components/tabs.json

@@ -79,7 +79,8 @@
             }
           }
         ],
-        "x-component": "list-bind-switch"
+        "x-component": "list-bind-switch",
+        "remarks": "更改选项卡标签的标题"
       },
       "selectedIndex": {
         "title": "选中标签",
@@ -87,7 +88,8 @@
         "default": 0,
         "x-index": 30,
         "x-category": "基础属性",
-        "x-component": "select"
+        "x-component": "select",
+        "remarks": "更改默认选中的选项卡标签"
       },
       "panel": {
         "title": "面板1",

package/src/configs/components/text.json

@@ -8,7 +8,8 @@
         "x-component": "textarea",
         "default": "文本内容",
         "x-category": "基础属性",
-        "x-index": 1
+        "x-index": 1,
+        "remarks": "更改显示的文本内容"
       },
       "level": {
         "enum": [
@@ -45,7 +46,8 @@
         "title": "文本格式",
         "default": "0",
         "x-index": 2,
-        "description": "标题级别，H1 - H6"
+        "description": "标题级别，H1 - H6",
+        "remarks": "更改文本的展示级别"
       },
       "maxLines": {
         "title": "最大行数",
@@ -53,21 +55,24 @@
         "description": "应用发布为小程序时，该属性不生效",
         "default": 2,
         "x-index": 5,
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks": "更改文本支持展示的最大行数，若最大行数无法承载当前文本内容，则会将超出内容用省略号来替代"
       },
       "space": {
         "title": "连续空格",
         "type": "boolean",
         "description": "是否显示连续空格",
         "default": false,
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks": "开启后文本组件将支持识别多个空格字符，关闭后文本组件仅支持识别单个空格字符(多空格字符会自动转换成单个空格字符)"
       },
       "userSelect": {
         "title": "是否可选中",
         "type": "boolean",
         "description": "是否可选中文本",
         "default": true,
-        "x-category": "高级属性"
+        "x-category": "高级属性",
+        "remarks": "关闭后文本将不支持进行选中，无法进行复制等常见文本操作"
       }
     }
   },

package/src/docs/common/format.tsx

@@ -0,0 +1,112 @@
+export interface ICompsConfig {
+  type: String;
+  name: string;
+  title: string;
+  description: string;
+  'x-platforms': string[];
+  default: string;
+  platforms: string;
+  'x-index': number;
+}
+export type TCompsConfig = ICompsConfig;
+
+export const sortBy = (props) => {
+  return function (a, b) {
+    return a[props] - b[props];
+  };
+};
+
+export const objFormat = (args: any, type, origin) => {
+  //判断属性title值是否为拓展写法
+  const uuidReg = /(?<=text)\('(.*)(?=',)/;
+  let transformData: any = [];
+  for (let i in args) {
+    if (type && type == 'event') {
+      transformData.push({
+        name: origin == 'lowCode' ? args[i]?.name : args[i]?.title,
+        title: origin == 'lowCode' ? args[i]?.eventName : args[i]?.name,
+        description: args[i]?.remarks || '-',
+        platforms: args[i]['x-platforms']
+          ? args[i]['x-platforms'].indexOf('MP') > -1
+            ? '小程序端'
+            : args[i]['x-platforms'].indexOf('WEB') > -1
+            ? 'web端'
+            : '兼容三端'
+          : '兼容三端',
+      });
+    } else if (type && type == 'attribute' && args[i].type != 'slot') {
+      if (
+        args[i]?.display == false ||
+        args[i]?.isReactNode == true ||
+        args[i]['x-component'] == 'sub-category-title' ||
+        args[i]['x-component'] == 'Divider'
+      ) {
+        continue;
+      }
+      transformData.push({
+        code: i,
+        title: args[i].title.indexOf('{{')!=-1?args[i]?.title.match(uuidReg)[1]:args[i]?.title,
+        description: args[i]?.remarks || '-',
+        type: args[i]?.type || '-',
+        default: JSON.stringify(args[i]?.default) || '-',
+        'x-index': args[i]['x-index'] ? args[i]['x-index'] : 999999,
+        'x-category': args[i]['x-category']
+          ? args[i]['x-category']
+          : '基础属性',
+      });
+    } else if (type && type == 'slot' && args[i].type == 'slot') {
+      transformData.push({
+        code: i,
+        title: args[i]?.title,
+        description: args[i]?.description || '-',
+      });
+    }
+  }
+
+  if (type && type == 'attribute') transformData.sort(sortBy('x-index'));
+
+  if (type && type == 'attribute') {
+    transformData = groupByType(transformData, 'x-category');
+  }
+  return transformData;
+};
+function groupByType(arr, param) {
+  var map = {};
+  var dest = [];
+  var structureMap = [];
+  var storgeType = [];
+  for (var i = 0; i < arr.length; i++) {
+    var ai = arr[i];
+    if (ai[param] && !map[ai[param]]) {
+      dest.push({
+        name: ai[param],
+        data: [ai],
+      });
+      map[ai[param]] = ai;
+    } else if (!ai[param]) {
+      dest.push({
+        name: '基础属性',
+        data: [ai],
+      });
+      map[ai[param]] = ai;
+    } else {
+      for (var j = 0; j < dest.length; j++) {
+        var dj = dest[j];
+        if (dj.name == ai[param]) {
+          dj.data.push(ai);
+          break;
+        }
+      }
+    }
+  }
+  for (var k = 0; k < dest.length; k++) {
+    if (k == 0 && dest[k]?.name != '基础属性') {
+      storgeType = storgeType.concat(dest[k]?.data);
+      continue;
+    }
+    structureMap = structureMap.concat(dest[k]?.data);
+  }
+
+  storgeType.length != 0 ? structureMap.push(...storgeType) : null;
+  return structureMap;
+}

package/src/docs/common/tableView.css

@@ -0,0 +1,164 @@
+.tableview {
+  width: 700px;
+  table-layout: fixed;
+}
+.tr-width-1 {
+  width: 100px;
+}
+.tr-width-2 {
+  width: 200px;
+}
+.tr-width-3 {
+  width: 300px;
+}
+.tr-width-4 {
+  width: 400px;
+}
+.tr-width-6 {
+  width: 600px;
+}
+.tr-width-7 {
+  width: 700px;
+}
+.custom-table--body-wrapper.is-fixed {
+  overflow-y: hidden;
+}
+
+.custom-table--fixed-wrapper {
+  box-shadow: 4px 0px 4px rgba(0, 0, 0, 0.1);
+
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: 800px;
+  background-color: #fff;
+}
+
+.custom-table td,
+.custom-table th {
+  white-space: nowrap;
+  overflow: hidden;
+  height: 42px;
+  padding: 2px !important;
+}
+.custom-table .table {
+  table-layout: fixed;
+  margin-bottom: 0;
+}
+/** 底部边框 */
+.custom-table::after {
+  content: '';
+  display: block;
+  height: 0px;
+  position: relative;
+  top: -1px;
+  border-bottom: 1px solid #ddd;
+}
+/** 右侧边框 */
+.custom-table::before {
+  content: '';
+  display: block;
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  border-right: 1px solid #ddd;
+}
+.custom-table th.gutter {
+  width: 15px;
+  padding: 0;
+}
+.tea-table__header {
+  overflow: hidden;
+  margin-bottom: -18px;
+}
+.tea-table__box {
+  border-collapse: collapse;
+  table-layout: fixed;
+  width: 100%;
+  position: relative;
+  border-spacing: 0px;
+}
+.tea-text-overflow,
+.tea-text-truncate {
+  display: flex;
+  vertical-align: middle;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  overflow: hidden;
+}
+.tea-table__header thead {
+  background-color: transparent;
+  border-width: 0px;
+  border-style: initial;
+  border-color: initial;
+  border-image: initial;
+}
+colgroup {
+  display: table-column-group;
+}
+.tea-table__box tr {
+  outline: none 0px;
+  transition: background-color 0.1s linear 0s;
+}
+.tea-table__box th {
+  position: relative;
+  padding: 10px;
+  border-bottom: 1px solid rgb(231, 234, 239);
+}
+.tea-table__box th > div {
+  position: relative;
+  color: rgb(0 0 0 / 77%);
+  padding: 0px;
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 16px;
+  width: 100%;
+  overflow-wrap: break-word;
+  word-break: break-word;
+}
+.tea-table__box tr > td {
+  color: rgb(0 0 0);
+  padding: 10px;
+  vertical-align: middle;
+  font-size: 16px;
+  vertical-align: top;
+}
+.tea-table__box tr > td > code {
+  color: #c7254e;
+  font-size: 85%;
+  border: none;
+}
+.tea-text-overflow,
+.tea-text-truncate {
+  display: flex;
+  vertical-align: middle;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: 100%;
+  overflow: hidden;
+}
+table {
+  display: table;
+  border-collapse: separate;
+  box-sizing: border-box;
+  text-indent: initial;
+  border-spacing: 2px;
+  border-color: grey;
+}
+.tea-table__body {
+  border-bottom: 1px solid rgb(207, 213, 222);
+  overflow: auto;
+}
+colgroup {
+  display: table-column-group;
+}
+col {
+  display: table-column;
+}
+.hash-link{
+  opacity: 0;
+    padding-left: 0.5rem;
+    transition: opacity var(--ifm-transition-fast);
+}