taolin/docs_vue2
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

feat: update veui and import number font

Browse Source
This commit is contained in:
Justineo 2022-05-26 01:58:05 +08:00
parent 714d2a4a0d
commit 682d3c28c6
No known key found for this signature in database
GPG Key ID: B73F0979CF18A0EA
6 changed files with 118 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
assets/styles/post.styl
View File

@ -64,17 +64,17 @@ margin-y($top, $bottom = $top)
h4
h4&
margin-y(1.15em, 1.1em)
margin-y(1.4em, 1.2em)
font-size 18px
h5
h5&
margin-y(1.05em)
margin-y(1.5em)
font-size 14px
h6
h6&
margin-y(1em)
margin-y(1.3em)
font-size 12px
h1
@ -384,6 +384,7 @@ margin-y($top, $bottom = $top)
h4
h4&
font-size 16px
h5
h5&
font-size 14px

22
nuxt.config.js
View File

@ -30,12 +30,11 @@ module.exports = {
content: 'Website for VEUI: an enterprise component library for Vue.js.'
},
{
name: 'theme-color', content: '#0052cc'
name: 'theme-color',
content: '#0052cc'
}
],
link: [
{ rel: 'shortcut icon', href: 'https://www.baidu.com/favicon.ico' }
]
link: [{ rel: 'shortcut icon', href: 'https://www.baidu.com/favicon.ico' }]
},
/**
* Customize the progress bar color
@ -46,7 +45,12 @@ module.exports = {
css: false
},
css: ['veui-theme-dls/common.less', '@/assets/styles/global.styl', 'veui-theme-dls/'],
css: [
'veui-theme-dls/common.less',
'veui-theme-dls/typography.less',
'@/assets/styles/global.styl',
'veui-theme-dls/'
],
plugins: [
{ src: '~plugins/hm.js', ssr: false },
@ -64,7 +68,13 @@ module.exports = {
parallel: true,
transpile: ['veui', 'vue-awesome', 'resize-detector', 'less-plugin-dls', 'dls-graphics'],
transpile: [
'veui',
'vue-awesome',
'resize-detector',
'less-plugin-dls',
'dls-graphics'
],
babel: {
plugins: ['veui']

24
one/docs/en-US/getting-started/index.md
View File

@ -82,3 +82,27 @@ Import from JavaScript:
```js
import 'veui-theme-dls/common.less'
```
#### The number font
[[ demo src="/demo/style/number.vue" ]]
The default theme `veui-theme-dls` comes with a display type number font “Baidu Number”, but it is not included in the global style by default because the web font will be loaded automatically. If you need to use it, please import it manually in your project:
```js
import 'veui-theme-dls/typography.less'
```
Once imported, you can use a font named `"Baidu Number"` in your CSS. For scenarios envolving dynamic numbers, we may want fixed width numbers to ensure layout stability. You can set `font-variant-numeric: tabular-nums` to enable the corresponding Open Type feature which comes with this font.
```css
.heading-numbers {
font-family: "Baidu Number", sans-serif;
font-variant-numeric: tabular-nums; /* Fixed-width numbers */
}
```
:::warning
Please make sure that `veui-theme-dls/common.less` and `veui-theme-dls/typography.less` are only introduced once, importing them in multiple components' `<style>` blocks will result in duplicate content output.
:::

25
one/docs/getting-started/index.md
View File

@ -76,10 +76,33 @@ VEUI 采取了样式主题与组件代码分离的开发、发布方式。组件
### 全局样式
在使用 `veui-theme-dls` 时，需要先全局引入基础样式以及，包括样式的 normalize 及一些基本元素的样式。
在使用默认主题 `veui-theme-dls` 时，需要先全局引入基础样式以及，包括样式的 normalize 及一些基本元素的样式。
从 JavaScript 引入：
```js
import 'veui-theme-dls/common.less'
```
#### 数字字体
[[ demo src="/demo/style/number.vue" ]]
默认主题 `veui-theme-dls` 自带一款展示型的数字字体“Baidu Number”，但由于启用后会自动加载 Web 字体，故默认未包含在全局样式中。需要使用时请在项目中手动引入：
```js
import 'veui-theme-dls/typography.less'
```
引入后可在 CSS 中使用名为 `"Baidu Number"` 的字体。同时在动态数字场景下，往往需要数字等宽以保证布局的相对稳定，此时可以设置 `font-variant-numeric: tabular-nums` 以开启字体中的对应 Open Type 功能。
```css
.heading-numbers {
font-family: "Baidu Number", sans-serif;
font-variant-numeric: tabular-nums; /* 等宽场景 */
}
```
:::warning
请确保 `veui-theme-dls/common.less` 及 `veui-theme-dls/typography.less` 只被引入一次，在多个组件中重复引入将导致内容重复输出。
:::

90
package-lock.json generated
View File

@ -18,7 +18,7 @@
"@vue/runtime-dom": "^3.2.31",
"babel-eslint": "^10.1.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-veui": "^2.6.5",
"babel-plugin-veui": "^2.7.0",
"cheerio": "^1.0.0-rc.10",
"dls-graphics": "^1.0.0-alpha.3",
"dls-icons-vue": "^2.6.0",
@ -77,10 +77,10 @@
"typescript": "^4.6.2",
"unist-util-remove": "^1.0.1",
"unist-util-visit": "^1.4.0",
"veui": "^2.6.5",
"veui-loader": "^2.6.5",
"veui-theme-dls": "^2.6.5",
"veui-theme-dls-icons": "^2.6.5",
"veui": "^2.7.0",
"veui-loader": "^2.7.0",
"veui-theme-dls": "^2.7.0",
"veui-theme-dls-icons": "^2.7.0",
"vue-awesome": "^4.5.0",
"vue-frag": "^1.4.0",
"vue-i18n": "^8.16.0",
@ -5347,9 +5347,9 @@
}
},
"node_modules/babel-plugin-veui": {
"version": "2.6.5",
"resolved": "https://registry.npmjs.org/babel-plugin-veui/-/babel-plugin-veui-2.6.5.tgz",
"integrity": "sha512-fN2/NldiMWTtS35sHlM665JH7yiSMGBtb16fiugVWxGWFIS092DQOZTmRRx6Z66Ezqg6mO0wzMcPSsgM9ZpTMg==",
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/babel-plugin-veui/-/babel-plugin-veui-2.7.0.tgz",
"integrity": "sha512-62B5cu6bmoTv3+bPwHPCDEVafrwq9sJpnQoKCdAhPe3YErBPhw+tdCICYDFa+fHiFa/UKU4Naf06mqvl6LMKeA==",
"dev": true,
"peerDependencies": {
"veui": "*"
@ -12231,9 +12231,9 @@
}
},
"node_modules/less-plugin-dls": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/less-plugin-dls/-/less-plugin-dls-7.1.2.tgz",
"integrity": "sha512-Xn8eHlVG9yE89riO1o791HToNJaoBVW+LDdxQ2BKk+1sWg8LKEb2Hmw0f2EmnAcPObMHz3jWnRKI3xc6lkwNRQ==",
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/less-plugin-dls/-/less-plugin-dls-8.0.1.tgz",
"integrity": "sha512-A7iB5sWcc0Xp1i9zibYDU+E8hq9QvrHWcAsnihsmTLk4RkS7O9pJKIv2BX2owxFMIWVcVjUWE+r7jPRtWNfWgQ==",
"dev": true,
"dependencies": {
"arg": "^4.1.3",
@ -21895,9 +21895,9 @@
}
},
"node_modules/veui": {
"version": "2.6.5",
"resolved": "https://registry.npmjs.org/veui/-/veui-2.6.5.tgz",
"integrity": "sha512-5bq5mZNjEH+6grk52UbaueuGPTyoP7xuKxZ4LLSgUMofzvaXIYrEAgvZ+W6b6LO2HP3ZvXi93vg7lwYM2H+OKA==",
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/veui/-/veui-2.7.0.tgz",
"integrity": "sha512-FGlmD0tz1EBExk9c7Ty6y9l11yTstnuwCro1aaAwdz2hAkNBC4PiEtu/UhpzolqQJnZWrOZsVK2RvLvuQKHvTQ==",
"dev": true,
"dependencies": {
"bytes": "^3.1.2",
@ -21922,9 +21922,9 @@
}
},
"node_modules/veui-loader": {
"version": "2.6.5",
"resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.6.5.tgz",
"integrity": "sha512-r+E9VHeMaG3LJQzuU5Vpuj3cy6I1OQnn4AxZR7Nco72a6mEpI+EThPaDLWLDnl/1Kkum0CEspgGNsn7df/QVpg==",
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.7.0.tgz",
"integrity": "sha512-LwJ2Urnpj7UBc1p1eS1GDo6Vm15e4D0/o4173wvfXHZ6zaBsCk9mL8HO3sFz/hs6I/C216BWukjRN/6quKvVtg==",
"dev": true,
"dependencies": {
"loader-utils": "^2.0.2",
@ -22048,31 +22048,31 @@
}
},
"node_modules/veui-theme-dls": {
"version": "2.6.5",
"resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.6.5.tgz",
"integrity": "sha512-5vmftxqOw8rd7c5SxafeKJYyndUHJ/bioSBjvWcoVFXRhhKIGfbglmtD4zCLQh6pzhECfuZ1p+kq0uIBDxgv8g==",
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.7.0.tgz",
"integrity": "sha512-66UKtGNW2oqQlNCopAtJT916C660RE6WAEkA/X8m4ykQAaiMahS3stAdBjK85fxVIgK18bLQmLXJSvp+o+2/AQ==",
"dev": true,
"dependencies": {
"classlist-polyfill": "^1.2.0",
"dls-icons-vue": "~2.6.0",
"focus-visible": "^4.1.5",
"less-plugin-dls": "^7.1.2",
"less-plugin-dls": "^8.0.1",
"less-plugin-est": "^3.0.1"
},
"peerDependencies": {
"veui": "2.6.5"
"veui": "2.7.0"
}
},
"node_modules/veui-theme-dls-icons": {
"version": "2.6.5",
"resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.6.5.tgz",
"integrity": "sha512-jS76R4CyPvKr5pMhWzBNQwmFFbsPq6vv9vYMOZdTReiuD+8GCjZanPitmfEKb/KXY0OsNrFqG1Xjzbb8TBwKhQ==",
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.7.0.tgz",
"integrity": "sha512-3KOstkrz/ajWycto0t5jueDTiCd5g0R8gstSVgCxe/P0nFpnk2wy/gukExf2R3qHHGv2V0E4gFL/vTi1KqrtyA==",
"dev": true,
"dependencies": {
"dls-icons-vue": "~2.6.0"
},
"peerDependencies": {
"veui": "2.6.5"
"veui": "2.7.0"
}
},
"node_modules/veui/node_modules/bytes": {
@ -27959,9 +27959,9 @@
}
},
"babel-plugin-veui": {
"version": "2.6.5",
"resolved": "https://registry.npmjs.org/babel-plugin-veui/-/babel-plugin-veui-2.6.5.tgz",
"integrity": "sha512-fN2/NldiMWTtS35sHlM665JH7yiSMGBtb16fiugVWxGWFIS092DQOZTmRRx6Z66Ezqg6mO0wzMcPSsgM9ZpTMg==",
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/babel-plugin-veui/-/babel-plugin-veui-2.7.0.tgz",
"integrity": "sha512-62B5cu6bmoTv3+bPwHPCDEVafrwq9sJpnQoKCdAhPe3YErBPhw+tdCICYDFa+fHiFa/UKU4Naf06mqvl6LMKeA==",
"dev": true,
"requires": {}
},
@ -33419,9 +33419,9 @@
}
},
"less-plugin-dls": {
"version": "7.1.2",
"resolved": "https://registry.npmjs.org/less-plugin-dls/-/less-plugin-dls-7.1.2.tgz",
"integrity": "sha512-Xn8eHlVG9yE89riO1o791HToNJaoBVW+LDdxQ2BKk+1sWg8LKEb2Hmw0f2EmnAcPObMHz3jWnRKI3xc6lkwNRQ==",
"version": "8.0.1",
"resolved": "https://registry.npmjs.org/less-plugin-dls/-/less-plugin-dls-8.0.1.tgz",
"integrity": "sha512-A7iB5sWcc0Xp1i9zibYDU+E8hq9QvrHWcAsnihsmTLk4RkS7O9pJKIv2BX2owxFMIWVcVjUWE+r7jPRtWNfWgQ==",
"dev": true,
"requires": {
"arg": "^4.1.3",
@ -41077,9 +41077,9 @@
"dev": true
},
"veui": {
"version": "2.6.5",
"resolved": "https://registry.npmjs.org/veui/-/veui-2.6.5.tgz",
"integrity": "sha512-5bq5mZNjEH+6grk52UbaueuGPTyoP7xuKxZ4LLSgUMofzvaXIYrEAgvZ+W6b6LO2HP3ZvXi93vg7lwYM2H+OKA==",
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/veui/-/veui-2.7.0.tgz",
"integrity": "sha512-FGlmD0tz1EBExk9c7Ty6y9l11yTstnuwCro1aaAwdz2hAkNBC4PiEtu/UhpzolqQJnZWrOZsVK2RvLvuQKHvTQ==",
"dev": true,
"requires": {
"bytes": "^3.1.2",
@ -41109,9 +41109,9 @@
}
},
"veui-loader": {
"version": "2.6.5",
"resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.6.5.tgz",
"integrity": "sha512-r+E9VHeMaG3LJQzuU5Vpuj3cy6I1OQnn4AxZR7Nco72a6mEpI+EThPaDLWLDnl/1Kkum0CEspgGNsn7df/QVpg==",
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/veui-loader/-/veui-loader-2.7.0.tgz",
"integrity": "sha512-LwJ2Urnpj7UBc1p1eS1GDo6Vm15e4D0/o4173wvfXHZ6zaBsCk9mL8HO3sFz/hs6I/C216BWukjRN/6quKvVtg==",
"dev": true,
"requires": {
"loader-utils": "^2.0.2",
@ -41201,22 +41201,22 @@
}
},
"veui-theme-dls": {
"version": "2.6.5",
"resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.6.5.tgz",
"integrity": "sha512-5vmftxqOw8rd7c5SxafeKJYyndUHJ/bioSBjvWcoVFXRhhKIGfbglmtD4zCLQh6pzhECfuZ1p+kq0uIBDxgv8g==",
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/veui-theme-dls/-/veui-theme-dls-2.7.0.tgz",
"integrity": "sha512-66UKtGNW2oqQlNCopAtJT916C660RE6WAEkA/X8m4ykQAaiMahS3stAdBjK85fxVIgK18bLQmLXJSvp+o+2/AQ==",
"dev": true,
"requires": {
"classlist-polyfill": "^1.2.0",
"dls-icons-vue": "~2.6.0",
"focus-visible": "^4.1.5",
"less-plugin-dls": "^7.1.2",
"less-plugin-dls": "^8.0.1",
"less-plugin-est": "^3.0.1"
}
},
"veui-theme-dls-icons": {
"version": "2.6.5",
"resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.6.5.tgz",
"integrity": "sha512-jS76R4CyPvKr5pMhWzBNQwmFFbsPq6vv9vYMOZdTReiuD+8GCjZanPitmfEKb/KXY0OsNrFqG1Xjzbb8TBwKhQ==",
"version": "2.7.0",
"resolved": "https://registry.npmjs.org/veui-theme-dls-icons/-/veui-theme-dls-icons-2.7.0.tgz",
"integrity": "sha512-3KOstkrz/ajWycto0t5jueDTiCd5g0R8gstSVgCxe/P0nFpnk2wy/gukExf2R3qHHGv2V0E4gFL/vTi1KqrtyA==",
"dev": true,
"requires": {
"dls-icons-vue": "~2.6.0"

10
package.json
View File

@ -27,7 +27,7 @@
"@vue/runtime-dom": "^3.2.31",
"babel-eslint": "^10.1.0",
"babel-plugin-lodash": "^3.3.4",
"babel-plugin-veui": "^2.6.5",
"babel-plugin-veui": "^2.7.0",
"cheerio": "^1.0.0-rc.10",
"dls-graphics": "^1.0.0-alpha.3",
"dls-icons-vue": "^2.6.0",
@ -86,10 +86,10 @@
"typescript": "^4.6.2",
"unist-util-remove": "^1.0.1",
"unist-util-visit": "^1.4.0",
"veui": "^2.6.5",
"veui-loader": "^2.6.5",
"veui-theme-dls": "^2.6.5",
"veui-theme-dls-icons": "^2.6.5",
"veui": "^2.7.0",
"veui-loader": "^2.7.0",
"veui-theme-dls": "^2.7.0",
"veui-theme-dls-icons": "^2.7.0",
"vue-awesome": "^4.5.0",
"vue-frag": "^1.4.0",
"vue-i18n": "^8.16.0",