[doc]v0.4.0

any-tdf · Nov 3, 2023 · 75c1268 · 75c1268
1 parent 360d564
commit 75c1268
Show file tree

Hide file tree

Showing 22 changed files with 692 additions and 138 deletions.
diff --git a/doc/components/avatar/api.md b/doc/components/avatar/api.md
@@ -17,3 +17,23 @@
 | 名称  | 参数 | 描述       |
 | ----- | ---- | ---------- |
 | click | -    | 点击触发。 |
+
+## Avatars Props
+
+| 属性      | 类型    | 默认值 | 可选值                                | 必传 | 说明                             |
+| --------- | ------- | ------ | ------------------------------------- | ---- | -------------------------------- |
+| data      | Array   | []     | -                                     | N    | 由 Avatar Props 组成的头像数据。 |
+| radius    | String  | 'full' | 'none'/'base'/'xl'/'2xl'/'3xl'/'full' | N    | 圆角风格。                       |
+| size      | String  | 'md'   | 'xs'/'sm'/'base'/'md'/'lg'/'xl'       | N    | 头像框大小。                     |
+| compact   | Number  | 5      | 1-10                                  | N    | 紧凑程度，越大越紧凑。           |
+| lineWidth | String  | 3      | '0'/'1'/'2'/'3'/'4'/'8'               | N    | 边框粗细。                       |
+| reverse   | Boolean | false  | true/false                            | N    | 是否反向。                       |
+| max       | Number  | 10     | -                                     | N    | 最大最大显示数量。               |
+| top       | String  | 0      | 'totle'/'add'/'none'/Slot             | N    | 顶层内容。                       |
+| injClass  | String  | ''     | Class                                 | N    | 注入 CSS 名称。                  |
+
+## Avatars Events
+
+| 名称       | 参数 | 描述             |
+| ---------- | ---- | ---------------- |
+| clickgroup | -    | 点击头像组触发。 |
diff --git a/doc/components/avatar/api_en.md b/doc/components/avatar/api_en.md
@@ -17,3 +17,23 @@
 | Name  | Parameter | Description       |
 | ----- | --------- | ----------------- |
 | click | -         | Click to trigger. |
+
+## Avatars Props
+
+| Properties | Type    | Default value | Optional value                        | required | Description                               |
+| ---------- | ------- | ------------- | ------------------------------------- | -------- | ----------------------------------------- |
+| data       | Array   | []            | -                                     | N        | The avatar data composed of Avatar Props. |
+| radius     | String  | 'full'        | 'none'/'base'/'xl'/'2xl'/'3xl'/'full' | N        | Round -corner style.                      |
+| size       | String  | 'md'          | 'xs'/'sm'/'base'/'md'/'lg'/'xl'       | N        | The size of the avatar box.               |
+| compact    | Number  | 5             | 1-10                                  | N        | Compactness, the larger the more compact. |
+| lineWidth  | String  | 3             | '0'/'1'/'2'/'3'/'4'/'8'               | N        | Border thickness.                         |
+| reverse    | Boolean | false         | true/false                            | N        | Whether to reverse.                       |
+| max        | Number  | 10            | -                                     | N        | Maximum maximum display quantity.         |
+| top        | String  | 0             | 'totle'/'add'/'none'/Slot             | N        | Top content.                              |
+| injClass   | String  | ''            | Class                                 | N        | Inject the CSS name.                      |
+
+## Avatars Events
+
+| Name       | Parameter | Description                    |
+| ---------- | --------- | ------------------------------ |
+| clickgroup | -         | Click avatar group to trigger. |
diff --git a/doc/components/avatar/guide.md b/doc/components/avatar/guide.md
@@ -17,3 +17,11 @@ image > alt > icon。
 通过 injClass 参数可以向组件内部 button 元素注入 CSS 名称（不仅限于 Tailwind CSS），这将使组件样式有更多自定义可能性，示例中通过 injClass 实现了自定义背景色和边框颜色。
 
 若注入的 class 没生效，请在注入的 class 名称前添加“!” ，可参考 [Tailwind Important modifier](https://tailwindcss.com/docs/configuration#important-modifier)。
+
+## 头像组
+
+v0.4.0 开始支持头像组，头像组的使用场景是在头像框内部显示多个头像，例如群聊头像、评论头像等。传入由 Avatar Props 组成的数组即可，头像组有自己的 Props 用于控制不同样式。
+
+默认顶层显示头像总数，可通过 top 参数控制顶层显示内容，可选值有 totle（显示头像总数）、add（新增头像 Icon）、none（不显示）、Slot（自定义顶层内容）。
+
+头像组 Props 自己也有一个 injClass，可为头像组注入 Class 名称，一般用于当默认边框颜色与背景色不统一时传入传入 ring 的颜色使其统一。
diff --git a/doc/components/avatar/guide_en.md b/doc/components/avatar/guide_en.md
@@ -17,3 +17,11 @@ This parameter determines the proportion of the avatar frame that the image insi
 The `injClass` parameter can be used to inject custom CSS class names (not limited to Tailwind CSS) into the `button` element inside the component. This allows for further customization of the component's appearance, as demonstrated in the example using `injClass` to customize the background and border colors.
 
 If the injected class name does not take effect, add a `!` before the class name, as demonstrated in the [Tailwind Important Modifier](https://tailwindcss.com/docs/configuration#important-modifier).
+
+## Avatar Group
+
+Starting with v0.4.0, the `Avatar` component supports avatar groups, which can be used to display multiple avatars inside an avatar frame, such as group chat avatars, comment avatars, etc. Simply pass in an array of `Avatar Props` to use. The avatar group has its own props for controlling different styles.
+
+By default, the total number of avatars is displayed at the top level, and the `top` parameter can be used to control what is displayed at the top level, with the following optional values: `totle` (displays the total number of avatars), `add` (displays an icon for adding avatars), `none` (does not display anything), and `Slot` (allows for custom content at the top level).
+
+The avatar group props also have an `injClass` that can be used to insert a class name into the avatar group, which is generally used to unify the background and border colors when the default border color does not match the background color. Note that the `ring` color must be passed in.
diff --git a/doc/components/avatar/version.md b/doc/components/avatar/version.md
@@ -0,0 +1,5 @@
+## 0.4.0
+
+- [!tag|A|0|]新增头像组用法。
+
+<font size=1>2023-11-03</font>
diff --git a/doc/components/avatar/version_en.md b/doc/components/avatar/version_en.md
@@ -0,0 +1,5 @@
+## 0.4.0
+
+- [!tag|A|0|] Add avatar component.
+
+<font size=1>2023-11-03</font>
diff --git a/doc/components/icon/guide.md b/doc/components/icon/guide.md
@@ -25,6 +25,7 @@ STDF 部分组件内使用的图标源自 [Remix Icon 图标库](https://remixic
 | 图标名称                      | 所属组件         |
 | ----------------------------- | ---------------- |
 | ri-user-3-line                | Avatar           |
+| ri-user-add-line              | Avatars          |
 | ri-arrow-right-s-line         | Cell / NoticeBar |
 | ri-checkbox-fill              | Checkbox         |
 | ri-checkbox-line              | Checkbox         |
@@ -49,8 +50,6 @@ STDF 部分组件内使用的图标源自 [Remix Icon 图标库](https://remixic
 | ri-error-warning-line         | Toast            |
 | ri-information-line           | Toast            |
 
-可到 `node_modules/stdf/assets/fonts/stdf.remixicon.symbol.svg` 查看由这些图标组成的 SVG Sprites。
-
 可到 `node_modules/stdf/assets/svg_base/` 查看这些图标的 SVG 源文件。
 
 ## 图标名称

diff --git a/doc/components/icon/guide_en.md b/doc/components/icon/guide_en.md
@@ -25,6 +25,7 @@ Here are the icons and their corresponding components:
 | Icon Name                     | Component        |
 | ----------------------------- | ---------------- |
 | ri-user-3-line                | Avatar           |
+| ri-user-add-line              | Avatars          |
 | ri-arrow-right-s-line         | Cell / NoticeBar |
 | ri-checkbox-fill              | Checkbox         |
 | ri-checkbox-line              | Checkbox         |
@@ -49,8 +50,6 @@ Here are the icons and their corresponding components:
 | ri-error-warning-line         | Toast            |
 | ri-information-line           | Toast            |
 
-You can find the SVG Sprites composed of these icons in `node_modules/stdf/assets/fonts/stdf.remixicon.symbol.svg`.
-
 You can find the SVG source files for these icons in `node_modules/stdf/assets/svg_base/`.
 
 ## Icon Name

diff --git a/doc/guide/changelog.md b/doc/guide/changelog.md
@@ -1,3 +1,9 @@
+## 0.4.0
+
+- 新增支持多主题配置，请参考 [主题配置](https://stdf.design/#/guide?nav=theme)、[色彩](https://stdf.design/#/guide?nav=color)、[主题生成器](https://stdf.design/#/guide?nav=generator)。
+- 按照 Tailwind 命名规则统一将灰色由 `gray5` 改为 `gray-500` 写法，请注意升级后更改写法。详见 [色彩](https://stdf.design/#/guide?nav=color)。
+- Avatar 组件新增头像组用法，详见 [Avatar](https://stdf.design/#/components?nav=avatar&tab=4)。
+
 ## 0.3.2
 
 - 修复 Input 组件，详见 [Input](https://stdf.design/#/components?nav=input&tab=4)。

diff --git a/doc/guide/changelog_en.md b/doc/guide/changelog_en.md
@@ -1,3 +1,9 @@
+## 0.4.0
+
+- Added support for multi-theme configuration, please refer to [Theme Configuration](https://stdf.design/#/guide?nav=theme), [Color](https://stdf.design/#/guide?nav=color), [Theme Generator](https://stdf.design/#/guide?nav=generator).
+- In accordance with the Tailwind naming rules, the gray color has been uniformly changed from `gray5` to `gray-500` writing method. Please note that the writing method should be changed after the upgrade. See [Color](https://stdf.design/#/guide?nav=color) for details.
+- The Avatar component adds the usage of the avatar group, please see [Avatar](https://stdf.design/#/components?nav=avatar&tab=4).
+
 ## 0.3.2
 
 - Fix Input, please see [Input](https://stdf.design/#/components?nav=input&tab=4).

diff --git a/doc/guide/future.md b/doc/guide/future.md
@@ -1,6 +1,6 @@
 ## 新增 💪
 
-- [ ] 按照 Tailwind CSS 变量规则，实现自定义主题色。
+- [x] 按照 Tailwind CSS 变量规则，实现自定义主题色。
 - [ ] 新增 SecurityCode-安全码组件，一般用于输入短信或邮件收到的数字校验码。
 - [x] 开发一款 Vite/Rollup 插件，支持将指定目录下的所有 svg 合并为 SVG symbol。
 - [x] 开发一款 VS Code 插件，支持光标悬浮显示 STDF 组件 API 等功能。

diff --git a/doc/guide/future_en.md b/doc/guide/future_en.md
@@ -1,6 +1,6 @@
 ## New Features 💪
 
-- [ ] Implement custom theme colors according to Tailwind CSS variable rules.
+- [x] Implement custom theme colors according to Tailwind CSS variable rules.
 - [ ] Add SecurityCode component, which is generally used for entering numeric verification codes received via SMS or email.
 - [x] Develop a Vite/Rollup plugin that supports merging all SVGs in a specified directory into an SVG symbol.
 - [x] Develop a VS Code plugin that supports displaying STDF component API and other functions when hovering over the cursor.

diff --git a/doc/guide/icon.md b/doc/guide/icon.md
@@ -25,6 +25,7 @@ STDF 部分组件内使用的图标源自 [Remix Icon 图标库](https://remixic
 | 图标名称                      | 所属组件         |
 | ----------------------------- | ---------------- |
 | ri-user-3-line                | Avatar           |
+| ri-user-add-line              | Avatars          |
 | ri-arrow-right-s-line         | Cell / NoticeBar |
 | ri-checkbox-fill              | Checkbox         |
 | ri-checkbox-line              | Checkbox         |
@@ -49,6 +50,4 @@ STDF 部分组件内使用的图标源自 [Remix Icon 图标库](https://remixic
 | ri-error-warning-line         | Toast            |
 | ri-information-line           | Toast            |
 
-可到 `node_modules/stdf/assets/fonts/stdf.remixicon.symbol.svg` 查看由这些图标组成的 SVG Sprites。
-
 可到 `node_modules/stdf/assets/svg_base/` 查看这些图标的 SVG 源文件。
diff --git a/doc/guide/icon_en.md b/doc/guide/icon_en.md
@@ -25,6 +25,7 @@ Here are the icons and their corresponding components:
 | Icon Name                     | Component        |
 | ----------------------------- | ---------------- |
 | ri-user-3-line                | Avatar           |
+| ri-user-add-line              | Avatars          |
 | ri-arrow-right-s-line         | Cell / NoticeBar |
 | ri-checkbox-fill              | Checkbox         |
 | ri-checkbox-line              | Checkbox         |
@@ -49,6 +50,4 @@ Here are the icons and their corresponding components:
 | ri-error-warning-line         | Toast            |
 | ri-information-line           | Toast            |
 
-You can find the SVG Sprites composed of these icons in `node_modules/stdf/assets/fonts/stdf.remixicon.symbol.svg`.
-
 You can find the SVG source files for these icons in `node_modules/stdf/assets/svg_base/`.
diff --git a/doc/guide/internation.md b/doc/guide/internation.md
@@ -87,7 +87,7 @@ STDF 组件使用 Svelte 的 [Context](https://svelte.dev/docs#run-time-svelte-s
 | 繁体中文（中国香港） | zh_HK  |
 | 繁体中文（中国台湾） | zh_TW  |
 
-多语言文件由机器翻译，如果有不准确的地方，请提交 PR 进行修正。
+> 多语言文件由机器翻译，如果有不准确的地方，请提交 PR 进行修正。
 
 ## 增加语言包
 

diff --git a/doc/guide/internation_en.md b/doc/guide/internation_en.md
@@ -87,7 +87,7 @@ Currently supported languages:
 | Traditional Chinese (China Hong Kong) | zh_HK  |
 | Traditional Chinese (China Taiwan)    | zh_TW  |
 
-The multilingual files are translated by machine. If there are any inaccuracies, please submit a PR for correction.
+> The multilingual files are translated by machine. If there are any inaccuracies, please submit a PR for correction.
 
 ## Adding a Language Pack
 

diff --git a/doc/guide/milestone.md b/doc/guide/milestone.md
@@ -1,3 +1,7 @@
+## 2023-11-03
+
+支持多主题配置 @0.4.0 。
+
 ## 2023-08-24
 
 完成 STDF 配套的模板脚手架 [create-stdf](https://www.npmjs.com/package/create-stdf)，Vite/Rollup 插件 [rollup-plugin-stdf-icon](https://www.npmjs.com/package/rollup-plugin-stdf-icon)，VS Code 插件 [STDF for VS Code](https://marketplace.visualstudio.com/items?itemName=STDF.stdf-vscode-extension)。

diff --git a/doc/guide/milestone_en.md b/doc/guide/milestone_en.md
@@ -1,3 +1,7 @@
+## 2023-11-03
+
+Support multi-theme configuration @0.4.0.
+
 ## 2023-08-24
 
 Completed the template scaffolding tool [create-stdf](https://www.npmjs.com/package/create-stdf), Vite/Rollup plugin [rollup-plugin-stdf-icon](https://www.npmjs.com/package/rollup-plugin-stdf-icon), and VS Code plugin [STDF for VS Code](https://marketplace.visualstudio.com/items?itemName=STDF.stdf-vscode-extension) for STDF.

diff --git a/doc/guide/quickStart.md b/doc/guide/quickStart.md
@@ -68,43 +68,73 @@ npx tailwindcss init -p
 
 ```javascript
 /** @type {import('tailwindcss').Config} */
-module.exports = {
+export default {
 	// ...
-	content: ['./index.html', './src/**/*.svelte', './node_modules/stdf/**/*.svelte'],
+	content: ['./src/**/*.{html,js,svelte,ts}', './node_modules/stdf/**/*.svelte'],
 	theme: {
 		colors: {
 			// 主题色
-			primary: '#0B24FB',
-			dark: '#FFC043',
-			blue: '#0B24FB', // primary 别名
-			yellow: '#FFC043', // dark 别名
-
-			// 扩展色
-			purple: '#7356BF',
-			green: '#05944F',
-			orange: '#FF6937',
+			primary: {
+				50: 'rgba(var(--theme-color-primary-50), <alpha-value>)',
+				100: 'rgba(var(--theme-color-primary-100), <alpha-value>)',
+				200: 'rgba(var(--theme-color-primary-200), <alpha-value>)',
+				300: 'rgba(var(--theme-color-primary-300), <alpha-value>)',
+				400: 'rgba(var(--theme-color-primary-400), <alpha-value>)',
+				500: 'rgba(var(--theme-color-primary-500), <alpha-value>)',
+				DEFAULT: 'rgba(var(--theme-color-primary), <alpha-value>)',
+				700: 'rgba(var(--theme-color-primary-700), <alpha-value>)',
+				800: 'rgba(var(--theme-color-primary-800), <alpha-value>)',
+				900: 'rgba(var(--theme-color-primary-900), <alpha-value>)',
+				950: 'rgba(var(--theme-color-primary-950), <alpha-value>)',
+			},
+			dark: {
+				50: 'rgba(var(--theme-color-dark-50), <alpha-value>)',
+				100: 'rgba(var(--theme-color-dark-100), <alpha-value>)',
+				200: 'rgba(var(--theme-color-dark-200), <alpha-value>)',
+				300: 'rgba(var(--theme-color-dark-300), <alpha-value>)',
+				400: 'rgba(var(--theme-color-dark-400), <alpha-value>)',
+				500: 'rgba(var(--theme-color-dark-500), <alpha-value>)',
+				DEFAULT: 'rgba(var(--theme-color-dark), <alpha-value>)',
+				700: 'rgba(var(--theme-color-dark-700), <alpha-value>)',
+				800: 'rgba(var(--theme-color-dark-800), <alpha-value>)',
+				900: 'rgba(var(--theme-color-dark-900), <alpha-value>)',
+				950: 'rgba(var(--theme-color-dark-950), <alpha-value>)',
+			},
+			primaryBlack: 'rgba(var(--theme-color-primaryBlack), <alpha-value>)',
+			primaryWhite: 'rgba(var(--theme-color-primaryWhite), <alpha-value>)',
+			darkBlack: 'rgba(var(--theme-color-darkBlack), <alpha-value>)',
+			darkWhite: 'rgba(var(--theme-color-darkWhite), <alpha-value>)',
 
 			// 功能色
-			success: '#11BB8D',
-			warning: '#B95000',
-			error: '#DA1414',
-			info: '#2E5AAC',
+			success: 'rgba(var(--theme-color-functional-success), <alpha-value>)',
+			warning: 'rgba(var(--theme-color-functional-warning), <alpha-value>)',
+			error: 'rgba(var(--theme-color-functional-error), <alpha-value>)',
+			info: 'rgba(var(--theme-color-functional-info), <alpha-value>)',
+
+			// 扩展色
+			extend0: 'rgba(var(--theme-color-extend0), <alpha-value>)',
+			extend1: 'rgba(var(--theme-color-extend1), <alpha-value>)',
+			extend2: 'rgba(var(--theme-color-extend2), <alpha-value>)',
 
 			// 中性色
 			black: '#000000',
-			white: '#fff',
-			gray1: '#23262B',
-			gray2: '#2A2B2F',
-			gray3: '#303239',
-			gray4: '#373940',
-			gray5: '#414249',
-			gray6: '#747B84',
-			gray7: '#DADEE3',
-			gray8: '#EBEEF2',
-			gray9: '#F4F6F9',
-			gray10: '#FAFAFB',
+			white: '#ffffff',
+			gray: {
+				50: '#f2f2f2',
+				100: '#e6e6e6',
+				200: '#cccccc',
+				300: '#b3b3b3',
+				400: '#999999',
+				500: '#808080',
+				600: '#666666',
+				700: '#4D4D4D',
+				800: '#333333',
+				900: '#1A1A1A',
+				950: '#0D0D0D',
+			},
 			transparent: 'transparent',
 		},
+		// ...
 	},
 	darkMode: 'class',
 	// ...