fix(ui/*): 解决组件依赖css优先级问题优化所有组件文档排版

affects: @varlet/cli, @varlet/ui
varletjs · Apr 7, 2021 · 3791438 · 3791438
1 parent 3c080dd
commit 3791438
Show file tree

Hide file tree

Showing 63 changed files with 495 additions and 581 deletions.
diff --git a/packages/varlet-cli/site/site.config.json b/packages/varlet-cli/site/site.config.json
diff --git a/packages/varlet-cli/src/compiler/compileTemplateHighlight.ts b/packages/varlet-cli/src/compiler/compileTemplateHighlight.ts
@@ -172,6 +172,7 @@ export async function compileTemplateHighlight() {
     contributions: {
       html: {
         tags: [],
+        'types-syntax': 'typescript',
       },
     },
   }

diff --git a/packages/varlet-ui/src/checkbox-group/docs/en-US.md b/packages/varlet-ui/src/checkbox-group/docs/en-US.md
@@ -85,10 +85,8 @@ export default {
 
 ### CheckboxGroup/Actions
 
-```html
-In the checkbox group, you must set the checked-value to identify the checkbox,
+In the checkbox group, you must set the `checked-value` to identify the `checkbox`,
 The checkbox group collects all checked identifiers.
-```
 
 ```html
 <var-checkbox-group ref="group" v-model="value">

diff --git a/packages/varlet-ui/src/checkbox-group/docs/zh-CN.md b/packages/varlet-ui/src/checkbox-group/docs/zh-CN.md
@@ -85,10 +85,8 @@ export default {
 
 ### 复选框组/复选框操作
 
-```html
-在复选框组中, 必须给checkbox设置checked-value用来标识，
+在复选框组中, 必须给`checkbox`设置`checked-value`用来标识，
 复选框组会收集所有选择的标识。
-```
 
 ```html
 <var-checkbox-group ref="group" v-model="value">

diff --git a/packages/varlet-ui/src/checkbox/Checkbox.vue b/packages/varlet-ui/src/checkbox/Checkbox.vue
@@ -12,10 +12,10 @@
         v-ripple="{ disabled: formReadonly || readonly || formDisabled || disabled || !ripple }"
       >
         <slot name="checked-icon" v-if="checked">
-          <var-icon class="var-checkbox__icon" name="checkbox-marked" :size="iconSize" />
+          <var-icon class="var-checkbox__icon" name="checkbox-marked" :size="iconSize" var-checkbox-cover />
         </slot>
         <slot name="unchecked-icon" v-else>
-          <var-icon class="var-checkbox__icon" name="checkbox-blank-outline" :size="iconSize" />
+          <var-icon class="var-checkbox__icon" name="checkbox-blank-outline" :size="iconSize" var-checkbox-cover />
         </slot>
       </div>
 

diff --git a/packages/varlet-ui/src/checkbox/checkbox.less b/packages/varlet-ui/src/checkbox/checkbox.less
@@ -27,7 +27,7 @@
     border-radius: 50%;
   }
 
-  &__icon {
+  &__icon[var-checkbox-cover] {
     display: block;
     font-size: @checkbox-icon-size;
   }

diff --git a/packages/varlet-ui/src/counter/Counter.vue b/packages/varlet-ui/src/counter/Counter.vue
@@ -8,6 +8,7 @@
     >
       <var-icon
         class="var-counter__decrement-button"
+        var-counter-cover
         name="minus"
         :class="[!decrementButton ? 'var-counter--hidden' : null]"
         :style="{
@@ -35,6 +36,7 @@
       />
       <var-icon
         class="var-counter__increment-button"
+        var-counter-cover
         name="plus"
         :class="[!incrementButton ? 'var-counter--hidden' : null]"
         :style="{

diff --git a/packages/varlet-ui/src/counter/counter.less b/packages/varlet-ui/src/counter/counter.less
@@ -26,7 +26,7 @@
     background: @counter-background;
   }
 
-  &__decrement-button {
+  &__decrement-button[var-counter-cover] {
     width: @counter-button-size;
     height: @counter-button-size;
     font-size: @counter-button-icon-size;
@@ -51,7 +51,7 @@
     }
   }
 
-  &__increment-button {
+  &__increment-button[var-counter-cover] {
     width: @counter-button-size;
     height: @counter-button-size;
     font-size: @counter-button-icon-size;

diff --git a/packages/varlet-ui/src/counter/docs/en-US.md b/packages/varlet-ui/src/counter/docs/en-US.md
@@ -68,11 +68,9 @@ export default {
 
 ### Asynchronous change
 
-```html
 In some scenarios, you may need to wait for the server to return successfully before making changes.
-Lazy-change prevents binding value updates on the component itself.
-Register before-change events for manual updates.
-```
+`lazy-change` prevents binding value updates on the component itself.
+Register `before-change` events for manual updates.
 
 ```html
 <var-counter
@@ -101,10 +99,8 @@ export default {
 
 ### Validate
 
-```html
-The values are validated by passing in an array of validators，If the validator returns true, the validation passes。
-Other values are converted to text as a user prompt。
-```
+The values are validated by passing in an array of validators，If the validator returns `true`, the validation passes。
+Other values are converted to text as a user prompt.
 
 ```html
 <var-counter

diff --git a/packages/varlet-ui/src/counter/docs/zh-CN.md b/packages/varlet-ui/src/counter/docs/zh-CN.md
@@ -68,11 +68,9 @@ export default {
 
 ### 异步变更
 
-```html
 在某些场景下需要等待服务器返回成功之后再执行变更。
-设置lazy-change后会阻止组件本身的绑定值更新操作。
-并注册before-change事件进行手动更新。
-```
+设置`lazy-change`后会阻止组件本身的绑定值更新操作。
+并注册`before-change`事件进行手动更新。
 
 ```html
 <var-counter
@@ -101,10 +99,8 @@ export default {
 
 ### 字段校验
 
-```html
-通过传入一个校验器数组可以对值进行校验，校验器返回true则为校验通过。
+通过传入一个校验器数组可以对值进行校验，校验器返回`true`则为校验通过。
 以外的值将转换为文本作为用户提示。
-```
 
 ```html
 <var-counter

diff --git a/packages/varlet-ui/src/dialog/docs/en-US.md b/packages/varlet-ui/src/dialog/docs/en-US.md
@@ -1,10 +1,8 @@
 # Dialog
 
 ### Intro
-```html
 A dialog pops up to display the content and handle the user interaction
-Dialog have provided functional and component usage, and there is no essential difference between the two usage effects and parameters
-```
+`Dialog` have provided functional and component usage, and there is no essential difference between the two usage effects and parameters
 
 ### Install
 
@@ -43,10 +41,8 @@ Dialog({
 
 #### Handling user behavior
 
-```html
-You can get user behavior from the method's return value, which is a Promise.
-Includes confirm, cancel, and close(click the overlay to trigger closure).
-```
+You can get user behavior from the method's return value, which is a `Promise`.
+Includes `confirm`, `cancel`, and `close(click the overlay to trigger closure)`.
 
 ```js
 import { Snackbar } from '@varlet/ui'
@@ -62,9 +58,7 @@ actions[await Dialog('Don\'t Wanna See No Blood, Don\'t Be A Macho Man')]()
 
 ### Asynchronous closing
 
-```html
-You can use onBeforeClose to intercept before closing, and you can get the user behavior from the parameters and the callback function that triggers the shutdown
-```
+You can use `onBeforeClose` to intercept before closing, and you can get the user behavior from the parameters, and the callback function that triggers the shutdown
 
 ```js
 import { Snackbar } from '@varlet/ui'
@@ -95,7 +89,7 @@ Dialog({
 #### Basic Use
 
 ```html
-<var-button block @click="show = true">Basic Use</var-button>
+<var-button type="primary" block @click="show = true">Basic Use</var-button>
 <var-dialog
   title="Beat It"
   message="Don't Wanna See No Blood, Don't Be A Macho Man"
@@ -124,7 +118,7 @@ export default {
 #### Asynchronous closing
 
 ```html
-<var-button block @click="show = true">Asynchronous closing</var-button>
+<var-button type="primary" block @click="show = true">Asynchronous closing</var-button>
 <var-dialog
   title="Beat It"
   message="Don't Wanna See No Blood, Don't Be A Macho Man"
@@ -167,7 +161,7 @@ export default {
 #### Custom Slots
 
 ```html
-<var-button block @click="show = true">Custom Slots</var-button>
+<var-button type="primary" block @click="show = true">Custom Slots</var-button>
 <var-dialog v-model:show="show">
   <template #title>
     <var-icon name="information" color="#2979ff" />

diff --git a/packages/varlet-ui/src/dialog/docs/zh-CN.md b/packages/varlet-ui/src/dialog/docs/zh-CN.md
@@ -1,10 +1,8 @@
 # 对话框
 
 ### 介绍
-```html
 弹出一个对话框展示内容并处理用户交互。
-Dialog提供了函数式和组件式两种使用方式, 两种使用效果和参数并没有本质区别。
-```
+`Dialog`提供了函数式和组件式两种使用方式, 两种使用效果和参数并没有本质区别。
 
 ### 引入
 
@@ -43,10 +41,8 @@ Dialog({
 
 #### 处理用户行为
 
-```html
-可以通过Dialog方法的返回值获取用户行为, 返回值是一个promise。
-包含confirm(确认), cancel(取消), close(通过点击遮罩层触发关闭)三种状态。
-```
+可以通过`Dialog`方法的返回值获取用户行为, 返回值是一个`promise`。
+包含`confirm(确认)`, `cancel(取消)`, `close(通过点击遮罩层触发关闭)`三种状态。
 
 ```js
 import { Snackbar } from '@varlet/ui'
@@ -62,9 +58,7 @@ actions[await Dialog('兰亭临帖 行书如行云流水')]()
 
 ### 异步关闭
 
-```html
-Dialog可以通过onBeforeClose进行关闭前的拦截, 可以从参数中得到用户行为和触发关闭的回调函数。
-```
+`Dialog`可以通过`onBeforeClose`进行关闭前的拦截, 可以从参数中得到用户行为和触发关闭的回调函数。
 
 ```js
 import { Snackbar } from '@varlet/ui'
@@ -95,7 +89,7 @@ Dialog({
 #### 基本使用
 
 ```html
-<var-button block @click="show = true">基本使用</var-button>
+<var-button type="primary" block @click="show = true">基本使用</var-button>
 <var-dialog
   title="兰亭序"
   message="兰亭临帖 行书如行云流水"
@@ -124,7 +118,7 @@ export default {
 #### 异步关闭
 
 ```html
-<var-button block @click="show = true">异步关闭</var-button>
+<var-button type="primary" block @click="show = true">异步关闭</var-button>
 <var-dialog
   title="兰亭序"
   message="兰亭临帖 行书如行云流水"
@@ -167,7 +161,7 @@ export default {
 #### 自定义插槽
 
 ```html
-<var-button block @click="show = true">自定义插槽</var-button>
+<var-button type="primary" block @click="show = true">自定义插槽</var-button>
 <var-dialog v-model:show="show">
   <template #title>
     <var-icon name="information" color="#2979ff" />

diff --git a/packages/varlet-ui/src/dialog/example/index.vue b/packages/varlet-ui/src/dialog/example/index.vue
@@ -1,13 +1,13 @@
 <template>
   <app-type>{{ pack.functionCall }}</app-type>
-  <var-button block @click="createBasic">{{ pack.basicUsage }}</var-button>
-  <var-button block @click="modifyTitle">{{ pack.modifyTitle }}</var-button>
-  <var-button block @click="hideButton">{{ pack.hideButton }}</var-button>
-  <var-button block @click="createAction">{{ pack.handleUserBehavior }}</var-button>
-  <var-button block @click="asyncClose">{{ pack.asyncClose }}</var-button>
+  <var-button type="primary" block @click="createBasic">{{ pack.basicUsage }}</var-button>
+  <var-button type="primary" block @click="modifyTitle">{{ pack.modifyTitle }}</var-button>
+  <var-button type="primary" block @click="hideButton">{{ pack.hideButton }}</var-button>
+  <var-button type="primary" block @click="createAction">{{ pack.handleUserBehavior }}</var-button>
+  <var-button type="primary" block @click="asyncClose">{{ pack.asyncClose }}</var-button>
 
   <app-type>{{ pack.componentCall }}</app-type>
-  <var-button block @click="show = true">{{ pack.basicUsage }}</var-button>
+  <var-button type="primary" block @click="show = true">{{ pack.basicUsage }}</var-button>
   <var-dialog
     v-model:show="show"
     :title="pack.title"
@@ -17,10 +17,10 @@
     @closed="() => Snackbar.info('closed')"
   />
 
-  <var-button block @click="show1 = true">{{ pack.asyncClose }}</var-button>
+  <var-button type="primary" block @click="show1 = true">{{ pack.asyncClose }}</var-button>
   <var-dialog v-model:show="show1" :title="pack.title" :message="pack.message" @before-close="onBeforeClose" />
 
-  <var-button block @click="show2 = true">{{ pack.customSlots }}</var-button>
+  <var-button type="primary" block @click="show2 = true">{{ pack.customSlots }}</var-button>
   <var-dialog v-model:show="show2">
     <template #title>
       <var-icon name="information" color="#2979ff" />

diff --git a/packages/varlet-ui/src/form/docs/en-US.md b/packages/varlet-ui/src/form/docs/en-US.md
@@ -2,9 +2,7 @@
 
 ### Intro
 
-```html
 Provides the ability to control all form components.
-```
 
 ### Install
 

diff --git a/packages/varlet-ui/src/form/docs/zh-CN.md b/packages/varlet-ui/src/form/docs/zh-CN.md
@@ -2,9 +2,7 @@
 
 ### 介绍
 
-```html
 提供了对所有表单组件进行控制的能力。
-```
 
 ### 引入
 

diff --git a/packages/varlet-ui/src/form/example/index.vue b/packages/varlet-ui/src/form/example/index.vue
@@ -44,7 +44,7 @@
       <var-checkbox :checked-value="2">{{ pack.sleep }}</var-checkbox>
       <var-checkbox :checked-value="3">{{ pack.play }}</var-checkbox>
     </var-checkbox-group>
-    <var-rate :rules="[(v) => v >= 3 || pack.rateMessage]" v-model="formData.score" />
+    <var-rate class="mb" :rules="[(v) => v >= 3 || pack.rateMessage]" v-model="formData.score" />
     <div class="row mb">
       <var-switch :rules="[(v) => !!v || pack.licenseMessage]" v-model="formData.license" />
     </div>

diff --git a/packages/varlet-ui/src/icon/docs/en-US.md b/packages/varlet-ui/src/icon/docs/en-US.md
@@ -1,9 +1,7 @@
 # Icon
 
 ### Intro
-```html
 Font based icon library, also support web images.
-```
 Font icons are from [Material Design Icon](https://materialdesignicons.com/)
 
 ### Install
@@ -31,10 +29,8 @@ createApp().use(Icon)
 
 ### Use Image
 
-```html
-When the name passed in is a URL the img tag is displayed in cover mode. 
-Size is the width and height of the image.
-```
+When the name passed in is a URL the `img` tag is displayed in `cover` mode.
+`size` is the width and height of the image.
 
 ```html
 <var-icon name="https://varlet.gitee.io/varlet-ui/cat.jpg" :size="32" />
@@ -62,9 +58,7 @@ export default {
 
 ### Icon Animation
 
-```html
-When Transition (MS) is set and the icon is toggled by its name, trigger a toggle animation。
-```
+When `transition (ms)` is set, and the icon is toggled by its `name`, trigger a toggle animation。
 
 ```html
 <var-icon color="#2979ff" :name="name" :transition="300" :size="30" />
@@ -90,10 +84,9 @@ export default {
 ```
 
 ### Custom Icons
-```html
+
 First you need to set up your own font and install it into your project.
-Let's assume that we extend a font named my-icons.
-```
+Let's assume that we extend a font named `my-icons`.
 
 ```css
 /* Set the font */
@@ -125,10 +118,11 @@ Let's assume that we extend a font named my-icons.
 }
 ```
 
-```html
 Here you have successfully extended your icon library.
-So my-icon is your font namespace.
+So `my-icon` is your font `namespace`.
 You can use it this way:
+
+```html
 <var-icon namespace="my-icon" name="hot" />
 ```
-Original file line number
+Diff line change
@@ Expand Up / @@ -172,6 +172,7 @@ export async function compileTemplateHighlight() { @@
         contributions: {
           html: {
             tags: [],
+            'types-syntax': 'typescript',
           },
         },
       }
@@ Expand Down @@