@varlet/cli 1.26.1 → 1.26.4

package/lib/config/vite.config.js

@@ -65,6 +65,7 @@ function getBuildConfig(varletConfig) {
             outDir: constant_1.SITE_OUTPUT_PATH,
             brotliSize: false,
             emptyOutDir: true,
+            cssTarget: 'chrome61',
             rollupOptions: {
                 input: {
                     main: (0, path_1.resolve)(constant_1.SITE_DIR, 'index.html'),

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/cli",
-  "version": "1.26.1",
+  "version": "1.26.4",
   "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.4",
+    "@varlet/markdown-vite-plugin": "1.26.4",
+    "@varlet/touch-emulator": "1.26.4",
     "@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.4",
     "@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,6 +1,16 @@
 .var-site-code-example {
-  margin-top: 12px;
+  margin-top: 16px;
+  margin-bottom: 4px;
   position: relative;
+  border: thin solid var(--site-config-color-hl-border);
+  border-radius: 4px;
+  transition: border .25s;
+
+  &:hover {
+    .var-site-code-example__toolbar {
+      opacity: 1;
+    }
+  }
 
   &__toolbar {
     display: flex;
@@ -8,10 +18,12 @@
     position: absolute;
     z-index: 1;
     right: 10px;
-    top: 20px;
+    top: 10px;
+    opacity: 0;
+    transition: .25s all;
 
     button {
-      color: white !important;
+      color: var(--site-config-color-hl-code) !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,9 +129,49 @@ export default defineComponent({
 
 <style>
 .hljs {
-  background: #202020 !important;
+  background: var(--site-config-color-hl-background) !important;
   padding: 0 !important;
-  border-radius: 4px;
+  transition: all .25s
+}
+
+.hljs code {
+  line-height: 31px;
+}
+
+.hljs-comment, .hljs-meta, .hljs-quote {
+  color: var(--site-config-color-hl-group-a)
+}
+
+.hljs-keyword, .hljs-name, .hljs-selector-tag, .hljs-tag {
+  color: var(--site-config-color-hl-group-b)
+}
+
+.hljs-attribute, .hljs-selector-id {
+  color: var(--site-config-color-hl-group-c)
+}
+
+.hljs-addition, .hljs-selector-attr, .hljs-selector-pseudo, .hljs-string {
+  color: var(--site-config-color-hl-group-d)
+}
+
+.hljs-subst {
+  color: var(--site-config-color-hl-group-e)
+}
+
+.hljs-link, .hljs-regexp {
+  color: var(--site-config-color-hl-group-f)
+}
+
+.hljs-doctag, .hljs-section, .hljs-title, .hljs-type {
+  color: var(--site-config-color-hl-group-g)
+}
+
+.hljs-bullet, .hljs-literal, .hljs-symbol, .hljs-template-variable, .hljs-variable {
+  color: var(--site-config-color-hl-group-h)
+}
+
+.hljs-deletion, .hljs-number {
+  color: var(--site-config-color-hl-group-i)
 }
 </style>
 
@@ -139,7 +179,7 @@ export default defineComponent({
 @doc-active: {
   display: inline;
   font-family: inherit;
-  padding: 0 4px;
+  padding: 0;
   white-space: pre-wrap;
 }
 
@@ -174,7 +214,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 +307,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,10 +340,9 @@ 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;
+        color: var(--site-config-color-hl-code);
       }
 
       p code,
@@ -321,7 +365,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 +373,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 +399,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: {
@@ -80,6 +80,18 @@ module.exports = {
     'color-pc-language-active-background': '#edf5ff',
     'color-mobile-language-active': '#3a7afe',
     'color-mobile-language-active-background': '#edf5ff',
+    'color-hl-background': '#fafafa',
+    'color-hl-code': '#58727e',
+    'color-hl-border': '#f3f3f3',
+    'color-hl-group-a': '#7c7c7c',
+    'color-hl-group-b': '#2196f3',
+    'color-hl-group-c': '#ff9422',
+    'color-hl-group-d': '#58c193',
+    'color-hl-group-e': '#ff9422',
+    'color-hl-group-f': '#ff9422',
+    'color-hl-group-g': '#ff9422',
+    'color-hl-group-h': '#06a6e9',
+    'color-hl-group-i': '#f23733',
   },
   darkThemes: {
     'color-body': '#121212',
@@ -90,9 +102,9 @@ module.exports = {
     'color-border': '#333',
     'color-shadow': '#121212',
     'color-introduce-border': '#555',
-    'color-primary': '#5580f8',
-    'color-link': '#10c48f',
-    'color-type': '#10c48f',
+    'color-primary': '#96cbfe',
+    'color-link': '#A8FFC4',
+    'color-type': '#A8FFC4',
     'color-progress': '#5580f8',
     'color-progress-track': '#202020',
     'color-side-bar': '#4a7afe',
@@ -104,5 +116,17 @@ module.exports = {
     'color-pc-language-active-background': '#4a7afe20',
     'color-mobile-language-active': '#4a7afe',
     'color-mobile-language-active-background': '#4a7afe20',
+    'color-hl-background': '#272727',
+    'color-hl-code': '#fff',
+    'color-hl-border': '#272727',
+    'color-hl-group-a': '#7c7c7c',
+    'color-hl-group-b': '#96cbfe',
+    'color-hl-group-c': '#ff7b1e',
+    'color-hl-group-d': '#A8FFC4',
+    'color-hl-group-e': '#ff7b1e',
+    'color-hl-group-f': '#ff7b1e',
+    'color-hl-group-g': '#ff7b1e',
+    'color-hl-group-h': '#14a6e9',
+    'color-hl-group-i': '#ed4648',
   },
 }