chore: add css variables content for api docs (#2182)

* fix: resolved some spelling mistake * chore: add css variables content for api docs
Tencent · Jul 13, 2023 · be7cf15 · be7cf15
1 parent 13b8261
commit be7cf15
Show file tree

Hide file tree

Showing 121 changed files with 2,088 additions and 32 deletions.
diff --git a/script/generate-changelog.js b/script/generate-changelog.js
@@ -18,7 +18,7 @@ function updateVersion() {
     rl.on('line', (input) => {
       let newVersion = '';
       if (!input) {
-        newVersion = pkg.version.replace(/(\d+\.\d+\.)(\d+)/, (verion, $1, $2) => $1 + (Number($2) + 1));
+        newVersion = pkg.version.replace(/(\d+\.\d+\.)(\d+)/, (version, $1, $2) => $1 + (Number($2) + 1));
       } else if (!VERSION_REG.test(input)) {
         console.log('\x1B[31m%s\x1B[0m', '\n⚡ 不要搞事年轻人，请输入正确版本号格式!\n');
         rl.prompt();

diff --git a/script/generate-css-vars.js b/script/generate-css-vars.js
@@ -0,0 +1,69 @@
+const fs = require('fs');
+const path = require('path');
+
+const combine = {
+  avatar: ['avatar-group', 'avatar'],
+  cell: ['cell-group', 'cell'],
+  collapse: ['collapse', 'collapse-panel'],
+  'dropdown-menu': ['dropdown-menu', 'dropdown-item'],
+  tag: ['tag', 'check-tag'],
+  checkbox: ['checkbox-group', 'checkbox'],
+  indexes: ['indexes', 'indexes-anchor'],
+  picker: ['picker', 'picker-item'],
+  radio: ['radio-group', 'radio'],
+  'side-bar': ['side-bar', 'side-bar-item'],
+  steps: ['steps', 'step-item'],
+  swiper: ['swiper', 'swiper-nav'],
+  tabs: ['tabs', 'tab-panel'],
+  'tab-bar': ['tab-bar', 'tab-bar-item'],
+  grid: ['grid', 'grid-item'],
+};
+
+function resolveCwd(...args) {
+  args.unshift(process.cwd());
+  return path.join(...args);
+}
+
+const COMPONENT_NAME = process.argv[process.argv.indexOf('--NAME') + 1]; // 在 --NAME 后面
+
+// eslint-disable-next-line
+const matchReg = /(?<=var).*?(?=\;)/g;
+
+// 使用 v2 文件夹下 _var.less 文件
+const lessPath = [];
+if (combine[COMPONENT_NAME]) {
+  combine[COMPONENT_NAME].forEach((item) => {
+    lessPath.push(resolveCwd(`src/${item}/${item}.less`));
+  });
+} else {
+  lessPath.push(resolveCwd(`src/${COMPONENT_NAME}/${COMPONENT_NAME}.less`));
+}
+
+// 追加到文件
+const cssVariableHeadContent = `\n\n### CSS 变量\n组件提供了下列 CSS 变量，可用于自定义样式。\n名称 | 默认值 | 描述 \n-- | -- | --\n`;
+const cssVariableHeadContentEn = `\n\n### CSS Variables\nThe component provides the following CSS variables, which can be used to customize styles.\nName | Default Value | Description \n-- | -- | --\n`;
+
+fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/README.md`), cssVariableHeadContent);
+fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/README.en-US.md`), cssVariableHeadContentEn);
+
+// 读取 less 文件内容
+lessPath.forEach((item) => {
+  if (fs.existsSync(item)) {
+    fs.readFile(item, 'utf8', (err, file) => {
+      if (err) {
+        console.log('please execute npm run update:css first!', err);
+        return;
+      }
+      const list = file.match(matchReg)?.sort();
+      let cssVariableBodyContent = '';
+      list?.forEach((item) => {
+        cssVariableBodyContent += `${item.slice(1, item.indexOf(','))} | ${item.slice(
+          item.indexOf(',') + 2,
+          item.length - 1,
+        )} | - \n`;
+      });
+      fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/README.md`), cssVariableBodyContent);
+      fs.appendFileSync(resolveCwd(`src/${COMPONENT_NAME}/README.en-US.md`), cssVariableBodyContent);
+    });
+  }
+});
diff --git a/script/prerender.mjs b/script/prerender.mjs
@@ -16,15 +16,15 @@ function initPageList() {
     });
   });
 
-  console.log(pageList)
+  console.log(pageList);
 
   return pageList;
 }
 
 async function initPreviewServer() {
   const previewServer = await preview({
     preview: { port: 9999, open: false },
-    build: { outDir: './_site' }
+    build: { outDir: './_site' },
   });
 
   previewServer.printUrls();
@@ -41,7 +41,7 @@ async function initPreviewServer() {
     fs.mkdirSync(spiderPath);
   } catch {}
 
-  for (let url of pageList) {
+  for (const url of pageList) {
     const [, pathName] = url.split(prefix);
     const filePath = `${spiderPath}${pathName || '/index'}.html`;
 
@@ -54,7 +54,7 @@ async function initPreviewServer() {
       fs.mkdirSync(path.dirname(filePath));
     } catch {}
 
-    console.log('\x1b[32m', `writting ${url}... \n`);
+    console.log('\x1b[32m', `writing ${url}... \n`);
     fs.writeFileSync(filePath, html);
   }
 

diff --git a/script/test/transform.js b/script/test/transform.js
@@ -1,4 +1,4 @@
-// 由于开启 vritualHost=true 之后，selectComponent 无法获取，暂时在单测关闭 virtualHost
+// 由于开启 virtualHost=true 之后，selectComponent 无法获取，暂时在单测关闭 virtualHost
 const path = require('path');
 const babelJest = require('babel-jest');
 

diff --git a/src/action-sheet/README.en-US.md b/src/action-sheet/README.en-US.md
@@ -22,3 +22,18 @@ name | params | description
 cancel | \- | \-
 close | `(trigger: TriggerSource)` | [see more ts definition](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
 selected | `(selected: ActionSheetItem \| string, index: number)` | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-action-sheet-border-color | @gray-color-1 | - 
+--td-action-sheet-border-radius | @radius-extra-large | - 
+--td-action-sheet-cancel-color | @font-gray-1 | - 
+--td-action-sheet-cancel-height | 96rpx | - 
+--td-action-sheet-color | @font-gray-1 | - 
+--td-action-sheet-description-color | @font-gray-3 | - 
+--td-action-sheet-list-item-disabled-color | @font-gray-4 | - 
+--td-action-sheet-list-item-height | 112rpx | - 
+--td-action-sheet-text-align | center | - 
diff --git a/src/action-sheet/README.md b/src/action-sheet/README.md
@@ -105,3 +105,18 @@ external-classes | Array | - | 组件类名，用于设置组件外层元素类
 cancel | \- | 点击取消按钮时触发
 close | `(trigger: TriggerSource)` | 关闭时触发。[详细类型定义](https://github.com/Tencent/tdesign-miniprogram/tree/develop/src/action-sheet/type.ts)。<br/>`type TriggerSource = 'overlay' \| 'command' \| 'select' `<br/>
 selected | `(selected: ActionSheetItem \| string, index: number)` | 选择菜单项时触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-action-sheet-border-color | @gray-color-1 | - 
+--td-action-sheet-border-radius | @radius-extra-large | - 
+--td-action-sheet-cancel-color | @font-gray-1 | - 
+--td-action-sheet-cancel-height | 96rpx | - 
+--td-action-sheet-color | @font-gray-1 | - 
+--td-action-sheet-description-color | @font-gray-3 | - 
+--td-action-sheet-list-item-disabled-color | @font-gray-4 | - 
+--td-action-sheet-list-item-height | 112rpx | - 
+--td-action-sheet-text-align | center | - 
diff --git a/src/avatar/README.en-US.md b/src/avatar/README.en-US.md
@@ -31,3 +31,30 @@ collapse-avatar | String / Slot | - | \- | N
 external-classes | Array | - | `['t-class', 't-class-image', 't-class-content']` | N
 max | Number | - | \- | N
 size | String | medium | size | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-avatar-group-margin-left-large | -8px | - 
+--td-avatar-group-margin-left-medium | -6px | - 
+--td-avatar-group-margin-left-small | -4px | - 
+--td-avatar-bg-color | @brand-color-light-active | - 
+--td-avatar-border-color | #fff | - 
+--td-avatar-border-width-large | 8rpx | - 
+--td-avatar-border-width-medium | 6rpx | - 
+--td-avatar-border-width-small | 4rpx | - 
+--td-avatar-circle-border-radius | @radius-circle | - 
+--td-avatar-content-color | @brand-color | - 
+--td-avatar-icon-large-font-size | 64rpx | - 
+--td-avatar-icon-medium-font-size | 48rpx | - 
+--td-avatar-icon-small-font-size | 40rpx | - 
+--td-avatar-large-width | 128rpx | - 
+--td-avatar-margin-left | 0 | - 
+--td-avatar-medium-width | 96rpx | - 
+--td-avatar-round-border-radius | @radius-default | - 
+--td-avatar-small-width | 80rpx | - 
+--td-avatar-text-large-font-size | 16px | - 
+--td-avatar-text-medium-font-size | @font-size-base | - 
+--td-avatar-text-small-font-size | @font-size-s | - 
diff --git a/src/avatar/README.md b/src/avatar/README.md
@@ -85,3 +85,30 @@ collapse-avatar | String / Slot | - | 头像数量超出时，会出现一个头
 external-classes | Array | - | 组件类名，用于设置组件外层元素类名。`['t-class', 't-class-image', 't-class-content']` | N
 max | Number | - | 能够同时显示的最多头像数量 | N
 size | String | medium | 尺寸，示例值：small/medium/large/24px/38px 等。优先级低于 Avatar.size | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-avatar-group-margin-left-large | -8px | - 
+--td-avatar-group-margin-left-medium | -6px | - 
+--td-avatar-group-margin-left-small | -4px | - 
+--td-avatar-bg-color | @brand-color-light-active | - 
+--td-avatar-border-color | #fff | - 
+--td-avatar-border-width-large | 8rpx | - 
+--td-avatar-border-width-medium | 6rpx | - 
+--td-avatar-border-width-small | 4rpx | - 
+--td-avatar-circle-border-radius | @radius-circle | - 
+--td-avatar-content-color | @brand-color | - 
+--td-avatar-icon-large-font-size | 64rpx | - 
+--td-avatar-icon-medium-font-size | 48rpx | - 
+--td-avatar-icon-small-font-size | 40rpx | - 
+--td-avatar-large-width | 128rpx | - 
+--td-avatar-margin-left | 0 | - 
+--td-avatar-medium-width | 96rpx | - 
+--td-avatar-round-border-radius | @radius-default | - 
+--td-avatar-small-width | 80rpx | - 
+--td-avatar-text-large-font-size | 16px | - 
+--td-avatar-text-medium-font-size | @font-size-base | - 
+--td-avatar-text-small-font-size | @font-size-s | - 
diff --git a/src/back-top/README.en-US.md b/src/back-top/README.en-US.md
@@ -17,3 +17,15 @@ theme | String | round | options：round/half-round/round-dark/half-round-dark |
 name | params | description
 -- | -- | --
 to-top | \- | \-
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-back-top-round-bg-color | @font-white-1 | - 
+--td-back-top-round-border-color | @component-border | - 
+--td-back-top-round-border-radius | @radius-circle | - 
+--td-back-top-round-color | @font-gray-1 | - 
+--td-back-top-round-dark-bg-color | @gray-color-14 | - 
+--td-back-top-round-dark-color | @font-white-1 | - 
diff --git a/src/back-top/README.md b/src/back-top/README.md
@@ -40,3 +40,15 @@ theme | String | round | 预设的样式类型。可选项：round/half-round/ro
 名称 | 参数 | 描述
 -- | -- | --
 to-top | \- | 点击触发
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-back-top-round-bg-color | @font-white-1 | - 
+--td-back-top-round-border-color | @component-border | - 
+--td-back-top-round-border-radius | @radius-circle | - 
+--td-back-top-round-color | @font-gray-1 | - 
+--td-back-top-round-dark-bg-color | @gray-color-14 | - 
+--td-back-top-round-dark-color | @font-white-1 | - 
diff --git a/src/badge/README.en-US.md b/src/badge/README.en-US.md
@@ -15,3 +15,22 @@ offset | Array | - | Typescript：`Array<string \| number>` | N
 shape | String | circle | options：circle/square/bubble/ribbon | N
 show-zero | Boolean | false | \- | N
 size | String | medium | options：medium/large | N
+
+
+### CSS Variables
+The component provides the following CSS variables, which can be used to customize styles.
+Name | Default Value | Description 
+-- | -- | --
+--td-badge-basic-height | 32rpx | - 
+--td-badge-basic-padding | 8rpx | - 
+--td-badge-basic-width | 32rpx | - 
+--td-badge-bg-color | @error-color | - 
+--td-badge-border-radius | 4rpx | - 
+--td-badge-bubble-border-radius | 20rpx 20rpx 20rpx 1px | - 
+--td-badge-dot-size | 16rpx | - 
+--td-badge-font-size | @font-size-xs | - 
+--td-badge-font-weight | 600 | - 
+--td-badge-large-font-size | @font-size-s | - 
+--td-badge-large-height | 40rpx | - 
+--td-badge-large-padding | 10rpx | - 
+--td-badge-text-color | @font-white-1 | - 
diff --git a/src/badge/README.md b/src/badge/README.md
@@ -45,3 +45,22 @@ offset | Array | - | 设置状态点的位置偏移，示例：[-10, 20] 或 ['1
 shape | String | circle | 形状。可选项：circle/square/bubble/ribbon | N
 show-zero | Boolean | false | 当数值为 0 时，是否展示徽标 | N
 size | String | medium | 尺寸。可选项：medium/large | N
+
+
+### CSS 变量
+组件提供了下列 CSS 变量，可用于自定义样式。
+名称 | 默认值 | 描述 
+-- | -- | --
+--td-badge-basic-height | 32rpx | - 
+--td-badge-basic-padding | 8rpx | - 
+--td-badge-basic-width | 32rpx | - 
+--td-badge-bg-color | @error-color | - 
+--td-badge-border-radius | 4rpx | - 
+--td-badge-bubble-border-radius | 20rpx 20rpx 20rpx 1px | - 
+--td-badge-dot-size | 16rpx | - 
+--td-badge-font-size | @font-size-xs | - 
+--td-badge-font-weight | 600 | - 
+--td-badge-large-font-size | @font-size-s | - 
+--td-badge-large-height | 40rpx | - 
+--td-badge-large-padding | 10rpx | - 
+--td-badge-text-color | @font-white-1 | -