fix(ui/popup): 重写example

affects: @varlet/cli, @varlet/ui

packages/varlet-cli/src/compiler/compileTemplateHighlight.ts

@@ -60,7 +60,7 @@ export function compileTable(md: string, titleRe: RegExp): string {
 
 export function compileTags(table: Record<string, any>, tags: Record<string, any>, componentName: string) {
   tags[componentName] = {
-    attributes: table.attributesTable.map((row: any) => row[0]),
+    attributes: table.attributesTable.map((row: any) => row[0].replace(/`/g, '')),
   }
 }
 
@@ -69,7 +69,7 @@ export function compileAttributes(table: Record<string, any>, attributes: Record
     const attrNamespace = `${get(varletConfig, 'namespace')}-${componentName}/${row[0]}`
     attributes[attrNamespace] = {
       type: row[2].replace(/_/g, ''),
-      description: `${row[1]} 默认值：${row[3]}`,
+      description: `${row[1]} 默认值：${row[3].replace(/`/g, '')}`,
     }
   })
 }
@@ -78,22 +78,22 @@ export function compileWebTypes(table: Record<string, any>, webTypes: Record<str
   const { attributesTable, eventsTable, slotsTable } = table
 
   const attributes = attributesTable.map((row: any) => ({
-    name: row[0],
+    name: row[0].replace(/`/g, ''),
     description: row[1],
-    default: row[3],
+    default: row[3].replace(/`/g, ''),
     value: {
       type: row[2].replace(/_/g, ''),
       kind: 'expression',
     },
   }))
 
   const events = eventsTable.map((row: any) => ({
-    name: row[0],
+    name: row[0].replace(/`/g, ''),
     description: row[1],
   }))
 
   const slots = slotsTable.map((row: any) => ({
-    name: row[0],
+    name: row[0].replace(/`/g, ''),
     description: row[1],
   }))
 

packages/varlet-ui/src/button/button.less

@@ -33,6 +33,7 @@
   will-change: box-shadow;
   transition: 0.3s cubic-bezier(0.25, 0.8, 0.5, 1);
   cursor: pointer;
+  font-family: inherit;
 
   &:active {
     box-shadow: 0 3px 3px -2px @shadow-key-umbra-opacity, 0 3px 4px 0 @shadow-key-penumbra-opacity,

packages/varlet-ui/src/button/docs/en-US.md

@@ -156,7 +156,7 @@ export default {
 ### Theme Variables
 #### The following LESS variables can be overridden at build time to modify the theme style
 
-| 变量名 | 默认值 |
+| Variable | Default |
 | --- | --- |
 | `@button-default-color` | `#f5f5f5` |
 | `@button-primary-color` | `@color-primary` |

packages/varlet-ui/src/popup/Popup.vue

@@ -1,18 +1,12 @@
 <template>
   <teleport :to="teleport" :disabled="disabled">
     <transition name="var-fade" @after-enter="onOpened" @after-leave="onClosed">
-      <div
-        class="var--box var-popup"
-        :style="{
-          'z-index': zIndex,
-        }"
-        v-show="show"
-      >
+      <div class="var--box var-popup" :style="{ zIndex: zIndex - 2 }" v-show="show">
         <div
           class="var-popup__overlay"
           :class="[overlayClass]"
           :style="{
-            'z-index': zIndex + 1,
+            zIndex: zIndex - 1,
             ...overlayStyle,
           }"
           v-if="overlay"
@@ -22,9 +16,7 @@
         <transition name="var-pop-center">
           <div
             class="var-popup__center var-elevation--3"
-            :style="{
-              'z-index': zIndex + 2,
-            }"
+            :style="{ zIndex }"
             v-bind="$attrs"
             v-if="position === 'center'"
             v-show="show"
@@ -36,9 +28,7 @@
         <transition name="var-pop-up">
           <div
             class="var-popup__bottom var-elevation--3"
-            :style="{
-              'z-index': zIndex + 2,
-            }"
+            :style="{ zIndex }"
             v-bind="$attrs"
             v-if="position === 'bottom'"
             v-show="show"
@@ -50,9 +40,7 @@
         <transition name="var-pop-down">
           <div
             class="var-popup__top var-elevation--3"
-            :style="{
-              'z-index': zIndex + 2,
-            }"
+            :style="{ zIndex }"
             v-bind="$attrs"
             v-if="position === 'top'"
             v-show="show"
@@ -64,9 +52,7 @@
         <transition name="var-pop-right">
           <div
             class="var-popup__left var-elevation--3"
-            :style="{
-              'z-index': zIndex + 2,
-            }"
+            :style="{ zIndex }"
             v-bind="$attrs"
             v-if="position === 'left'"
             v-show="show"
@@ -78,9 +64,7 @@
         <transition name="var-pop-left">
           <div
             class="var-popup__right var-elevation--3"
-            :style="{
-              'z-index': zIndex + 2,
-            }"
+            :style="{ zIndex }"
             v-bind="$attrs"
             v-if="position === 'right'"
             v-show="show"
@@ -97,38 +81,40 @@
 import { defineComponent, watch } from 'vue'
 import { props } from './props'
 import { useLock } from '../context/lock'
-import { useTeleport } from '../utils/teleport'
 import { useZIndex } from '../context/zIndex'
-import { addRouteListener } from '../utils/components'
+import { addRouteListener, useTeleport } from '../utils/components'
 
 export default defineComponent({
   name: 'VarPopup',
   inheritAttrs: false,
   props,
   setup(props) {
-    // context
-    const { disabled } = useTeleport()
     const { zIndex } = useZIndex(props, 'show', 3)
-    useLock(props, 'show', 'lockScroll')
-    // events open close
-    watch(
-      () => props.show,
-      (newValue: boolean) => {
-        newValue ? props.onOpen?.() : props.onClose?.()
-      }
-    )
+    const { disabled } = useTeleport()
 
     const hidePopup = () => {
-      props.onClickOverlay?.()
-      if (props.closeOnClickOverlay === false) {
+      const { closeOnClickOverlay, onClickOverlay } = props
+
+      onClickOverlay?.()
+
+      if (!closeOnClickOverlay) {
         return
       }
+
       props['onUpdate:show']?.(false)
     }
 
-    addRouteListener(() => {
-      props.onRouteChange?.()
-    })
+    useLock(props, 'show', 'lockScroll')
+
+    watch(
+      () => props.show,
+      (newValue: boolean) => {
+        const { onOpen, onClose } = props
+        newValue ? onOpen?.() : onClose?.()
+      }
+    )
+
+    addRouteListener(() => props.onRouteChange?.())
 
     return {
       zIndex,