Merge branch 'develop'

CHANGELOG.md

@@ -5,6 +5,54 @@ toc: false
 docClass: timeline
 ---
 
+## 🌈 0.32.0 `2022-12-27` 
+### ❗ Breaking Changes
+- 全局修正插槽名称，保持和文档一致，使用 kebab-case @LeeJim ([#1277](https://github.com/Tencent/tdesign-miniprogram/pull/1277))
+- `ButtonGroup`: 移除该组件 @LeeJim ([#1289](https://github.com/Tencent/tdesign-miniprogram/pull/1289))
+- `DropdownMenu`: 调整外部样式类命名、DOM @LeeJim ([#1259](https://github.com/Tencent/tdesign-miniprogram/pull/1259))
+- `DropdownMenu`: 废弃 optionsLayout 属性，移除 tree 相关逻辑，独立出 treeSelect 组件 @LeeJim ([#1265](https://github.com/Tencent/tdesign-miniprogram/pull/1265))
+- `DropdownMenu`:  变更外部样式类命名 @LeeJim ([#1265](https://github.com/Tencent/tdesign-miniprogram/pull/1265))
+- `Indexes`: 不再依赖 Cell ，独立出锚点组件，可自定义内容 @LeeJim ([#1267](https://github.com/Tencent/tdesign-miniprogram/pull/1267))
+- `Indexes`: 移除 height 属性 @LeeJim ([#1271](https://github.com/Tencent/tdesign-miniprogram/pull/1271))
+- `Indexes`: 移除 scroll-view，使用全局滚动 @LeeJim ([#1271](https://github.com/Tencent/tdesign-miniprogram/pull/1271))
+- `CheckTag`: 移除 closable、shape 属性，以及 close 事件 @LeeJim ([#1274](https://github.com/Tencent/tdesign-miniprogram/pull/1274))
+- `Swiper`: 基于原生 swiper 组件改造，移除 t-swiper-item 组件，新增 list 属性。 @LeeJim ([#1282](https://github.com/Tencent/tdesign-miniprogram/pull/1282))
+- `SwiperNav`: 属性 show-nav-btn 更名为 show-controls @LeeJim ([#1282](https://github.com/Tencent/tdesign-miniprogram/pull/1282))
+- `Input`: 移除聚焦相关样式 @anlyyao ([#1247](https://github.com/Tencent/tdesign-miniprogram/pull/1247))
+
+### 🚀 Features
+- `Link`: 新增链接组件 @anlyyao ([#1236](https://github.com/Tencent/tdesign-miniprogram/pull/1236))
+- `TreeSelect`: 新增树形选择组件 @LeeJim ([#1262](https://github.com/Tencent/tdesign-miniprogram/pull/1262))
+- `IndexesAnchor`: 新增索引锚点组件 @LeeJim ([#1267](https://github.com/Tencent/tdesign-miniprogram/pull/1267))
+- `DropdownMenu`: 视觉升级 @LeeJim ([#1259](https://github.com/Tencent/tdesign-miniprogram/pull/1259))
+- `Indexes`: 视觉升级 @LeeJim ([#1267](https://github.com/Tencent/tdesign-miniprogram/pull/1267))
+- `Calendar`: 支持 CSS Variables，可自定义主题 @LeeJim ([#1252](https://github.com/Tencent/tdesign-miniprogram/pull/1252))
+- `Collapse`: 支持 CSS Variables，可自定义主题 @LeeJim ([#1273](https://github.com/Tencent/tdesign-miniprogram/pull/1273))
+- `Swiper`: 支持 CSS Variables，可自定义主题 @LeeJim ([#1282](https://github.com/Tencent/tdesign-miniprogram/pull/1282))
+- `Overlay`: 支持 CSS Variables，可自定义主题 @LeeJim ([#1258](https://github.com/Tencent/tdesign-miniprogram/pull/1258))
+- `DropdownMenu`: 支持 CSS Variables，可自定义主题 @LeeJim ([#1259](https://github.com/Tencent/tdesign-miniprogram/pull/1259))
+- `Calendar`: 新增 usePopup 属性，支持不使用弹出层用法 @LeeJim ([#1252](https://github.com/Tencent/tdesign-miniprogram/pull/1252))
+- `DropdownMenu`: 可通过 value 和 options 自动切换 label @LeeJim ([#1265](https://github.com/Tencent/tdesign-miniprogram/pull/1265))
+- `CheckTag`: 新增 click 事件 @LeeJim ([#1274](https://github.com/Tencent/tdesign-miniprogram/pull/1274))
+- `Input`: 新增 click 事件 @anlyyao ([#1247](https://github.com/Tencent/tdesign-miniprogram/pull/1247))
+- `Popup`: 支持无障碍访问 @zhangpaopao0609 ([#1189](https://github.com/Tencent/tdesign-miniprogram/pull/1189))
+- `Input`: 支持无障碍访问 @szu-bee ([#1246](https://github.com/Tencent/tdesign-miniprogram/pull/1246))
+- `Empty`: 支持无障碍访问 @huaiyinfeilong ([#1187](https://github.com/Tencent/tdesign-miniprogram/pull/1187))
+- `Tag`: 支持无障碍访问 @huaiyinfeilong ([#1220](https://github.com/Tencent/tdesign-miniprogram/pull/1220))
+- `Link`: 支持无障碍访问 @byq1213 ([#1263](https://github.com/Tencent/tdesign-miniprogram/pull/1263))
+
+### 🐞 Bug Fixes
+- `Popup`: 修复 placement 不支持响应式的问题 @LeeJim ([#1257](https://github.com/Tencent/tdesign-miniprogram/pull/1257))
+- `Checkbox`: 修复图标右侧显示时 border 样式错误的问题 @LeeJim ([#1259](https://github.com/Tencent/tdesign-miniprogram/pull/1259))
+- `Radio`: 修复图标右侧显示时 border 样式错误的问题 @LeeJim ([#1259](https://github.com/Tencent/tdesign-miniprogram/pull/1259))
+- `Search`: 修复 CSS Variables 命名错误的问题 @LeeJim ([#1272](https://github.com/Tencent/tdesign-miniprogram/pull/1272))
+- `Radio`: 修复 icon = line 时，图标错误的问题 @LeeJim ([#1284](https://github.com/Tencent/tdesign-miniprogram/pull/1284))
+- `Checkbox`: 修复 icon = line 时，图标错误的问题 @LeeJim ([#1284](https://github.com/Tencent/tdesign-miniprogram/pull/1284))
+- `Textarea`: 支持 value 变更时更新字符长度 @anlyyao ([#1280](https://github.com/Tencent/tdesign-miniprogram/pull/1280))
+- `Textarea`: 修复 less 变量使用错误 @anlyyao ([#1280](https://github.com/Tencent/tdesign-miniprogram/pull/1280))
+- `NoticeBar`: 修复右侧额外信息行高不正确问题 @anlyyao ([#1281](https://github.com/Tencent/tdesign-miniprogram/pull/1281))
+- `Message`: 修复间距、颜色样式错误问题 @anlyyao ([#1286](https://github.com/Tencent/tdesign-miniprogram/pull/1286))
+
 ## 🌈 0.31.0 `2022-12-19` 
 ### ❗ BREAKING CHANGES
 - `Input`: 移除 clearableIconProps、prefixIconProps、suffixIconProps 属性 @anlyyao ([#1188](https://github.com/Tencent/tdesign-miniprogram/pull/1188))

example/app.json

@@ -1,15 +1,11 @@
 {
   "pages": [
     "pages/home/home",
-    "pages/picker/picker",
     "pages/button/button",
-    "pages/button-group/button-group",
-    "pages/dialog/dialog",
     "pages/tabs/tabs",
     "pages/icon/icon",
     "pages/loading/loading",
     "pages/loading/loadingProgress/index",
-    "pages/rate/rate",
     "pages/progress/progress",
     "pages/cascader/cascader",
     "pages/cell/cell",
@@ -23,8 +19,6 @@
     "pages/stepper/stepper",
     "pages/slider/slider",
     "pages/radio/radio",
-    "pages/swipe-cell/swipe-cell",
-    "pages/swiper/swiper",
     "pages/switch/switch",
     "pages/sticky/sticky",
     "pages/tag/tag",
@@ -34,8 +28,6 @@
     "pages/tab-bar/tab-bar",
     "pages/transition/transition",
     "pages/popup/popup",
-    "pages/indexes/indexes",
-    "pages/indexes/display/index",
     "pages/steps/steps",
     "pages/dropdown-menu/dropdown-menu",
     "pages/drawer/drawer",
@@ -58,7 +50,8 @@
     "pages/notice-bar/notice-bar",
     "pages/image-viewer/image-viewer",
     "pages/result/result",
-    "pages/result/result-page"
+    "pages/result/result-page",
+    "pages/link/link"
   ],
   "subpackages": [
     {
@@ -76,6 +69,34 @@
     {
       "root": "pages/calendar/",
       "pages": ["calendar"]
+    },
+    {
+      "root": "pages/dialog/",
+      "pages": ["dialog"]
+    },
+    {
+      "root": "pages/picker/",
+      "pages": ["picker"]
+    },
+    {
+      "root": "pages/rate/",
+      "pages": ["rate"]
+    },
+    {
+      "root": "pages/swiper/",
+      "pages": ["swiper"]
+    },
+    {
+      "root": "pages/swipe-cell/",
+      "pages": ["swipe-cell"]
+    },
+    {
+      "root": "pages/tree-select/",
+      "pages": ["tree-select"]
+    },
+    {
+      "root": "pages/indexes/",
+      "pages": ["indexes", "base/index", "custom/index"]
     }
   ],
   "usingComponents": {
@@ -88,11 +109,9 @@
     "t-cell-group": "tdesign-miniprogram/cell-group/cell-group",
     "t-collapse": "tdesign-miniprogram/collapse/collapse",
     "t-collapse-panel": "tdesign-miniprogram/collapse/collapse-panel",
-    "t-dialog": "tdesign-miniprogram/dialog/dialog",
     "t-tabs": "tdesign-miniprogram/tabs/tabs",
     "t-tab-panel": "tdesign-miniprogram/tabs/tab-panel",
     "t-loading": "tdesign-miniprogram/loading/loading",
-    "t-button-group": "tdesign-miniprogram/button-group/button-group",
     "t-icon": "tdesign-miniprogram/icon/icon",
     "t-rate": "tdesign-miniprogram/rate/rate",
     "t-progress": "tdesign-miniprogram/progress/progress",
@@ -107,9 +126,6 @@
     "t-checkbox": "tdesign-miniprogram/checkbox/checkbox",
     "t-checkbox-group": "tdesign-miniprogram/checkbox-group/checkbox-group",
     "t-swipe-cell": "tdesign-miniprogram/swipe-cell/swipe-cell",
-    "t-swiper": "tdesign-miniprogram/swiper/swiper",
-    "t-swiper-item": "tdesign-miniprogram/swiper/swiper-item",
-    "t-swiper-nav": "tdesign-miniprogram/swiper/swiper-nav",
     "t-sticky": "tdesign-miniprogram/sticky/sticky",
     "t-fab": "tdesign-miniprogram/fab/fab",
     "t-tab-bar": "tdesign-miniprogram/tab-bar/tab-bar",
@@ -132,7 +148,8 @@
     "t-navbar": "tdesign-miniprogram/navbar/navbar",
     "t-date-time-picker": "tdesign-miniprogram/date-time-picker/date-time-picker",
     "t-action-sheet": "tdesign-miniprogram/action-sheet/action-sheet",
-    "t-image-viewer": "tdesign-miniprogram/image-viewer/image-viewer"
+    "t-image-viewer": "tdesign-miniprogram/image-viewer/image-viewer",
+    "t-link": "tdesign-miniprogram/link/link"
   },
   "window": {
     "backgroundTextStyle": "light",

example/pages/home/data/base.ts

@@ -18,6 +18,10 @@ const base = {
       name: 'Button',
       label: '按钮',
     },
+    {
+      name: 'Divider',
+      label: '分割线',
+    },
     {
       name: 'Fab',
       label: '悬浮按钮',
@@ -26,6 +30,10 @@ const base = {
       name: 'Icon',
       label: '图标',
     },
+    {
+      name: 'Link',
+      label: '链接',
+    },
     // {
     //   name: 'Layout',
     //   label: '布局',

example/pages/home/data/display.ts

@@ -14,6 +14,10 @@ const display = {
     //   name: 'CanvasPoster',
     //   label: '海报分享',
     // },
+    {
+      name: 'Cell',
+      label: '单元格',
+    },
     {
       name: 'Collapse',
       label: '折叠面板',
@@ -34,6 +38,10 @@ const display = {
       name: 'Footer',
       label: '页脚',
     },
+    {
+      name: 'Grid',
+      label: '宫格',
+    },
     {
       name: 'Image',
       label: '图片',
@@ -50,14 +58,18 @@ const display = {
       name: 'Result',
       label: '结果',
     },
-    {
-      name: 'Swiper',
-      label: '轮播图',
-    },
     {
       name: 'Skeleton',
       label: '骨架屏',
     },
+    {
+      name: 'Sticky',
+      label: '吸顶容器',
+    },
+    {
+      name: 'Swiper',
+      label: '轮播图',
+    },
     {
       name: 'Tag',
       label: '标签',

example/pages/home/data/form.ts

@@ -54,6 +54,10 @@ const form = {
       name: 'Textarea',
       label: '多行输入框',
     },
+    {
+      name: 'TreeSelect',
+      label: '树形选择',
+    },
     // {
     //   name: 'PeriodSelector',
     //   label: '时间段选择器',

example/pages/home/data/index.ts

@@ -3,6 +3,5 @@ import nav from './nav';
 import display from './display';
 import form from './form';
 import ux from './ux';
-import layout from './layout';
 
-export default [base, layout, nav, form, display, ux];
+export default [base, nav, form, display, ux];

example/pages/home/data/nav.ts

@@ -26,10 +26,6 @@ const nav = {
       name: 'Steps',
       label: '步骤条',
     },
-    {
-      name: 'Sticky',
-      label: '吸顶',
-    },
     {
       name: 'TabBar',
       label: '标签栏',

package.json

@@ -1,7 +1,7 @@
 {
   "name": "tdesign-miniprogram",
   "purename": "tdesign",
-  "version": "0.31.0",
+  "version": "0.32.0",
   "description": "tdesign-miniprogram",
   "title": "tdesign-miniprogram",
   "main": "miniprogram_dist/index.js",
@@ -112,7 +112,7 @@
     }
   },
   "lint-staged": {
-    "{src,example,script}/**/*.{js,ts,wxml,html,json,wxs,less}": [
+    "{src,example,script}/**/*.{js,ts,wxml,html,json,less}": [
       "prettier --write"
     ],
     "{src,example}/**/*.{js,ts}": [

site/docs/custom-theme.md

@@ -6,42 +6,45 @@ spline: explain
 
 组件库通用的 Design Token 均使用 CSS Variables 声明，你可以在自己的项目中声明同名变量来覆盖他们的值。
 
-但在 **小程序需要特殊处理**。
+## 全局自定义
 
-在 TDesign 小程序里，CSS Variables 均在 `page` 上声明，以 `Rate` 举例：
+小程序的 CSS Variables 全部定义考验在这里看到: [_variables.less](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/style/_variables.less)
+
+如果你想改变主题色，主要改变这几个变量即可：
 
 ```css
-page {
-  --td-rate-selected-color: #ed7b2f; /* 选中的颜色 */
-  --td-rate-unselected-color: #e3e6eb; /* 未选中的颜色 */
-}
+@primary-color: var(--td-primary-color, #0052d9); // 主题色
+@success-color: var(--td-success-color, #00a870); // 成功
+@warning-color: var(--td-warning-color, #ed7b2f); // 警告
+@error-color: var(--td-error-color, #e34d59); // 失败
 ```
 
-此时如果你要修改对应的颜色，不能在 `page` 上声明，因为可能**权重不够**：
+在 `app.css` 文件添加下行代码即可：
 
-![css-specific](/miniprogram/css-specific.png)
+```css
+page {
+  --td-primary-color: navy; // 任何你想要的主题色
+}
+```
 
-比较妥当的做法是，在使用组件的外层元素修改同名变量，假设 `WXML` 是这样的：
+> 当然，[_variables.less](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/common/style/_variables.less) 里面都是通用的全局变量，都可以修改
 
-```html
-<view class="wrapper">
-  <rate default-value="2" />
-</view>
-```
+## 局部自定义
 
-那么 `CSS` 可以这么定义:
+在 TDesign 小程序里，你也可以只给某个组件修改主题，下面以 `Rate` 举例：
 
 ```css
-.wrapper {
-  --td-rate-selected-color: navy;
+page {
+  --td-rate-selected-color: #ed7b2f; /* 选中的颜色 */
+  --td-rate-unselected-color: #e3e6eb; /* 未选中的颜色 */
 }
 ```
 
 ## 自定义 TabBar
 
 当然，有些组件可能不会被包裹在 `page` 里，比如自定义 `tab-bar`。
 
-此时，可以通过给组件增加 `class` 来实现自定义主题：
+此时，可以通过给组件增加 `class` 来实现：
 
 ```html
 <t-tab-bar class="custom-tab-bar">
@@ -57,4 +60,4 @@ page {
 }
 ```
 
-> 目前仅有部分组件支持自定义主题，支持的组件在其文档有陈列对应的 CSS Varialbes，如 [TabBar](https://tdesign.tencent.com/miniprogram/components/tab-bar)
+> 目前仅有部分组件支持自定义主题，支持的组件在其文档有陈列对应的 CSS Varialbes，可以访问 [tab-bar-item.less](https://github.com/Tencent/tdesign-miniprogram/blob/develop/src/tab-bar/tab-bar-item.less)