feat: update veui and import number font

Author: Justineo

assets/styles/post.styl

@@ -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

nuxt.config.js

@@ -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']

one/docs/en-US/getting-started/index.md

@@ -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.
+:::

one/docs/getting-started/index.md

@@ -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` 只被引入一次，在多个组件中重复引入将导致内容重复输出。
+:::

package-lock.json

@@ -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",