@varlet/cli 1.26.1 → 1.26.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "1.26.1",
+  "version": "1.26.2",
   "description": "cli of varlet",
   "bin": {
     "varlet-cli": "./lib/index.js"
@@ -33,9 +33,9 @@
     "@babel/helper-plugin-utils": "^7.14.5",
     "@babel/preset-env": "^7.14.8",
     "@babel/preset-typescript": "^7.14.5",
-    "@varlet/icons": "1.26.1",
-    "@varlet/markdown-vite-plugin": "1.26.1",
-    "@varlet/touch-emulator": "1.26.1",
+    "@varlet/icons": "1.26.2",
+    "@varlet/markdown-vite-plugin": "1.26.2",
+    "@varlet/touch-emulator": "1.26.2",
     "@vitejs/plugin-vue": "2.2.0",
     "@vitejs/plugin-vue-jsx": "1.3.5",
     "@vue/babel-plugin-jsx": "1.1.1",
@@ -75,7 +75,7 @@
     "@types/semver": "^7.3.9"
   },
   "peerDependencies": {
-    "@varlet/touch-emulator": "1.26.1",
+    "@varlet/touch-emulator": "1.26.2",
     "@vue/test-utils": "^2.0.0-rc.6",
     "clipboard": "^2.0.6",
     "live-server": "^1.2.1",

package/site/components/code-example/CodeExample.vue

@@ -57,6 +57,7 @@ export default defineComponent({
     const disabledFold: Ref<boolean> = ref(false)
     const clipboard: Ref = ref(get(config, 'pc.clipboard', {}))
     const height: Ref<number> = ref(-1)
+    let timer: any = null
 
     const toggle = async () => {
       const foldHeight = fold.value.foldHeight
@@ -68,7 +69,15 @@ export default defineComponent({
         height.value = foldHeight
         await doubleRaf()
         height.value = offsetHeight
+
+        timer = setTimeout(() => {
+          height.value = -1
+        }, 250)
       } else {
+        clearTimeout(timer)
+        const { offsetHeight } = code.value as HTMLElement
+        height.value = offsetHeight
+        await doubleRaf()
         height.value = foldHeight
       }
     }
@@ -82,7 +91,7 @@ export default defineComponent({
 
       const { offsetHeight } = code.value as HTMLElement
       disabledFold.value = offsetHeight - fold.value.foldHeight < offset
-      height.value = fold.value?.defaultFold ? fold.value?.foldHeight : offsetHeight
+      height.value = fold.value?.defaultFold ? fold.value?.foldHeight : -1
     })
 
     return {

package/site/components/code-example/codeExample.less

@@ -1,5 +1,6 @@
 .var-site-code-example {
-  margin-top: 12px;
+  margin-top: 16px;
+  margin-bottom: 4px;
   position: relative;
 
   &__toolbar {
@@ -8,7 +9,7 @@
     position: absolute;
     z-index: 1;
     right: 10px;
-    top: 20px;
+    top: 10px;
 
     button {
       color: white !important;

package/site/mobile/main.ts

@@ -1,6 +1,4 @@
-// @ts-ignore
 import routes from '@mobile-routes'
-// @ts-ignore
 import config from '@config'
 import App from './App.vue'
 import '@varlet/touch-emulator'

package/site/pc/App.vue

@@ -129,17 +129,21 @@ export default defineComponent({
 
 <style>
 .hljs {
-  background: #202020 !important;
+  background: #272727 !important;
   padding: 0 !important;
   border-radius: 4px;
 }
+
+.hljs code {
+  line-height: 31px;
+}
 </style>
 
 <style lang="less">
 @doc-active: {
   display: inline;
   font-family: inherit;
-  padding: 0 4px;
+  padding: 0;
   white-space: pre-wrap;
 }
 
@@ -174,7 +178,7 @@ iframe {
     display: flex;
     flex-direction: column;
     align-items: center;
-    margin: 20px 4px 20px;
+    margin: 20px 0;
     padding: 90px 40px;
     border-top: 6px solid var(--site-config-color-introduce-border);
     border-radius: 2px;
@@ -267,25 +271,30 @@ iframe {
       }
 
       h3 {
-        margin-bottom: 16px;
         font-size: 18px;
+        margin: 0;
+      }
+
+      h4 {
+        margin: 18px 0 0;
       }
 
       p,
-      ul {
+      ul,
+      ol {
         -webkit-font-smoothing: antialiased;
         color: var(--site-config-color-text);
         font-size: 15px;
         line-height: 26px;
-        padding: 16px;
         border-radius: 4px;
         background: var(--site-config-color-bar);
-        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
         list-style: none;
+        margin: 14px 0 0;
+        padding: 0;
       }
 
       pre {
-        margin: 10px 0 0;
+        margin: 0;
       }
 
       code {
@@ -295,7 +304,6 @@ iframe {
         overflow-x: auto;
         font-size: 13px;
         font-family: Consolas, Monaco, monospace;
-        line-height: 31px;
         white-space: pre-wrap;
         word-wrap: break-word;
         color: #fff;
@@ -321,7 +329,6 @@ iframe {
         line-height: 28px;
         border-collapse: collapse;
         border-radius: 4px;
-        box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14), 0 1px 3px 0 rgba(0, 0, 0, 0.12);
 
         th {
           padding: 8px 16px;
@@ -330,11 +337,12 @@ iframe {
           color: var(--site-config-color-sub-text);
           font-size: 13px;
           -webkit-font-smoothing: antialiased;
+          border-bottom: 1px solid var(--site-config-color-border);
         }
 
         td {
           padding: 8px 16px;
-          border-top: 1px solid var(--site-config-color-border);
+          border-bottom: 1px solid var(--site-config-color-border);
           color: var(--site-config-color-text);
           font-family: Consolas, Monaco, monospace;
 
@@ -355,7 +363,11 @@ iframe {
       }
 
       .card {
-        margin-bottom: 24px;
+        border-radius: 4px;
+        background: var(--site-config-color-bar);
+        padding: 20px;
+        margin-bottom: 30px;
+        box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
       }
     }
   }

package/site/useProgress.ts

@@ -1,8 +1,6 @@
 import Progress from './components/progress'
 import { reactive } from 'vue'
-// @ts-ignore
 import config from '@config'
-// @ts-ignore
 import { getBrowserThemes, mountInstance, watchThemes } from './utils'
 import { get } from 'lodash-es'
 

package/varlet.default.config.js

@@ -39,7 +39,7 @@ module.exports = {
     },
     fold: {
       defaultFold: false,
-      foldHeight: 60,
+      foldHeight: 50,
     },
   },
   mobile: {