chore(docs): website UI updates (#3477)

docs/.vitepress/crowdin/en-US/component/demo-block.json

@@ -2,7 +2,7 @@
   "view-source": "View source",
   "edit-on-github": "Edit on Github",
   "edit-in-codepen": "Edit in Codepen.io",
-  "copy-button-text": "Copy",
+  "copy-code": "Copy code",
   "switch-button-option-text": "Switch to Options API",
   "switch-button-setup-text": "Switch to Composition API",
   "copy-success": "Copied！",

docs/.vitepress/plugins.js

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
+const localMd = require('markdown-it')()
 const mdContainer = require('markdown-it-container')
 const path = require('path')
 const fs = require('fs')
@@ -19,8 +20,6 @@ module.exports = (md) => {
       const m = tokens[idx].info.trim().match(/^demo\s*(.*)$/)
       if (tokens[idx].nesting === 1) {
         const description = m && m.length > 1 ? m[1] : ''
-        const content =
-          tokens[idx + 1].type === 'fence' ? tokens[idx + 1].content : ''
 
         const sourceFileToken = tokens[idx + 2]
         let source = ''
@@ -47,16 +46,13 @@ const demos = import.meta.globEager('../../examples/${
         }
 
         if (!source) throw new Error(`Incorrect source file: ${sourceFile}`)
-
         const { html, js, css, cssPreProcessor, jsPreProcessor } =
           generateCodePenSnippet(source)
-
         return `<Demo :demos="demos" source="${encodeURIComponent(
           highlight(source, 'vue')
-        )}" path="${sourceFile}" html="${html}" js="${js}" css="${css}" css-pre-processor="${cssPreProcessor}" js-pre-processor="${jsPreProcessor}">
-        ${description ? `` : ''}
-        <!--element-demo: ${content}:element-demo-->
-        `
+        )}" path="${sourceFile}" html="${html}" js="${js}" css="${css}" css-pre-processor="${cssPreProcessor}" js-pre-processor="${jsPreProcessor}" raw-source="${encodeURIComponent(
+          source
+        )}" description="${encodeURIComponent(localMd.render(description))}">`
       }
 
       return '</Demo>'

docs/.vitepress/vitepress/components/globals/vp-demo.vue

@@ -1,147 +0,0 @@
-<script setup lang="ts">
-import { computed, shallowRef, watch, toRef, ref } from 'vue'
-import { useToggle } from '../composables/toggle'
-import { useLang } from '../composables/lang'
-import { useSourceCode } from '../composables/source-code'
-
-import GithubIcon from './icons/github.vue'
-import SourceCodeIcon from './icons/source-code.vue'
-import CodepenIcon from './icons/codepen.vue'
-
-import Example from './demo/vp-example.vue'
-import SourceCode from './demo/vp-source-code.vue'
-import Codepen from './demo/vp-codepen.vue'
-
-import demoBlockLocale from '../../i18n/component/demo-block.json'
-
-const props = defineProps({
-  // source is encoded via encodeURIComponent
-  source: {
-    type: String,
-    required: true,
-  },
-  path: {
-    type: String,
-    required: true,
-  },
-  css: {
-    type: String,
-    required: true,
-  },
-  cssPreProcessor: {
-    type: String,
-    required: true,
-  },
-  js: {
-    type: String,
-    required: true,
-  },
-  html: {
-    type: String,
-    required: true,
-  },
-  demos: {
-    type: Object,
-    required: true,
-  },
-})
-
-const formatPathDemos = computed(() => {
-  const demos = {}
-
-  Object.keys(props.demos).forEach((key) => {
-    demos[key.replace('../../examples/', '').replace('.vue', '')] =
-      props.demos[key].default
-  })
-
-  return demos
-})
-
-const loaded = shallowRef(false)
-const hasError = shallowRef(false)
-const dataOpt = shallowRef('')
-const setupScript = shallowRef('')
-const template = shallowRef('')
-const [sourceVisible, setSourceVisible] = useToggle()
-const hasSetup = computed(() => loaded.value && setupScript.value !== '')
-const lang = useLang()
-
-const locale = computed(() => demoBlockLocale[lang.value])
-
-const onDemoLoaded = (content) => {
-  loaded.value = true
-}
-
-const demoSourceUrl = useSourceCode(toRef(props, 'path'))
-const codepenRef = ref()
-
-const onCodepenClicked = () => {
-  codepenRef.value.submit?.()
-}
-</script>
-
-<template>
-  <div class="example">
-    <Codepen
-      :css="props.css"
-      :css-pre-processor="props.cssPreProcessor"
-      :html="props.html"
-      :js="props.js"
-      ref="codepenRef"
-    />
-    <div class="op-btns">
-      <ElTooltip :content="locale['edit-in-codepen']" :visible-arrow="false">
-        <ElIcon :size="20" class="op-btn">
-          <CodepenIcon @click="onCodepenClicked" />
-        </ElIcon>
-      </ElTooltip>
-      <ElTooltip :content="locale['edit-on-github']" :visible-arrow="false">
-        <ElIcon :size="20" class="op-btn github">
-          <a :href="demoSourceUrl" rel="noreferrer noopener" target="_blank">
-            <GithubIcon />
-          </a>
-        </ElIcon>
-      </ElTooltip>
-      <ElTooltip :content="locale['view-source']" :visible-arrow="false">
-        <ElIcon :size="20" class="op-btn" @click="setSourceVisible">
-          <SourceCodeIcon />
-        </ElIcon>
-      </ElTooltip>
-    </div>
-    <ElDivider />
-    <Example :file="path" :demo="formatPathDemos[path]" />
-    <ElDivider v-if="sourceVisible" />
-    <el-collapse-transition>
-      <SourceCode v-show="sourceVisible" :source="source" />
-    </el-collapse-transition>
-  </div>
-</template>
-
-<style scoped lang="scss">
-.example {
-  border: var(--el-border-base);
-  border-radius: var(--el-border-radius-base);
-
-  .op-btns {
-    padding: 0.5rem;
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    height: 3rem;
-    line-height: 3rem;
-
-    .op-btn {
-      margin: 0 0.5rem;
-      cursor: pointer;
-
-      &.github a {
-        color: var(--text-color-lighter);
-      }
-    }
-  }
-  .el-divider {
-    margin: 0;
-    background-color: var(--border-color);
-  }
-}
-</style>

docs/.vitepress/vitepress/components/icons/copy-icon.vue

@@ -0,0 +1,8 @@
+<template>
+  <svg viewBox="0 0 24 24">
+    <path
+      d="M7 6V3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v14a1 1 0 0 1-1 1h-3v3c0 .552-.45 1-1.007 1H4.007A1.001 1.001 0 0 1 3 21l.003-14c0-.552.45-1 1.007-1H7zm2 0h8v10h2V4H9v2zm-2 5v2h6v-2H7zm0 4v2h6v-2H7z"
+      fill="currentColor"
+    ></path>
+  </svg>
+</template>

docs/.vitepress/vitepress/components/vp-demo.vue

@@ -1,5 +1,13 @@
 <script setup lang="ts">
-import { computed, shallowRef, watch, toRef, ref } from 'vue'
+import {
+  computed,
+  shallowRef,
+  watch,
+  toRef,
+  ref,
+  getCurrentInstance,
+} from 'vue'
+import { useClipboard } from '@vueuse/core'
 import { useToggle } from '../composables/toggle'
 import { useLang } from '../composables/lang'
 import { useSourceCode } from '../composables/source-code'
@@ -7,6 +15,7 @@ import { useSourceCode } from '../composables/source-code'
 import GithubIcon from './icons/github.vue'
 import SourceCodeIcon from './icons/source-code.vue'
 import CodepenIcon from './icons/codepen.vue'
+import CopyIcon from './icons/copy-icon.vue'
 
 import Example from './demo/vp-example.vue'
 import SourceCode from './demo/vp-source-code.vue'
@@ -48,8 +57,26 @@ const props = defineProps({
     type: Object,
     required: true,
   },
+  rawSource: {
+    type: String,
+    required: true,
+  },
+  description: {
+    type: String,
+  },
 })
 
+const vm = getCurrentInstance()
+
+const { copy, copied, isSupported } = useClipboard({
+  source: decodeURIComponent(props.rawSource),
+  read: false,
+})
+
+const [sourceVisible, setSourceVisible] = useToggle()
+const lang = useLang()
+const demoSourceUrl = useSourceCode(toRef(props, 'path'))
+
 const formatPathDemos = computed(() => {
   const demos = {}
 
@@ -61,31 +88,32 @@ const formatPathDemos = computed(() => {
   return demos
 })
 
-const loaded = shallowRef(false)
-const hasError = shallowRef(false)
-const dataOpt = shallowRef('')
-const setupScript = shallowRef('')
-const template = shallowRef('')
-const [sourceVisible, setSourceVisible] = useToggle()
-const hasSetup = computed(() => loaded.value && setupScript.value !== '')
-const lang = useLang()
-
-const locale = computed(() => demoBlockLocale[lang.value])
-
-const onDemoLoaded = (content) => {
-  loaded.value = true
-}
-
-const demoSourceUrl = useSourceCode(toRef(props, 'path'))
 const codepenRef = ref()
+const locale = computed(() => demoBlockLocale[lang.value])
+const decodedDescription = computed(() => decodeURIComponent(props.description))
 
 const onCodepenClicked = () => {
   codepenRef.value.submit?.()
 }
+
+const copyCode = async () => {
+  const { $message } = vm.appContext.config.globalProperties
+  if (!isSupported) {
+    $message.error(locale.value['copy-error'])
+  }
+  try {
+    await copy()
+    $message.success(locale.value['copy-success'])
+  } catch (e: Error) {
+    $message.error(e.message)
+  }
+}
 </script>
 
 <template>
   <ClientOnly>
+    <!-- danger here DO NOT USE INLINE SCRIPT TAG -->
+    <p v-html="decodedDescription" class="example-description" />
     <div class="example">
       <Codepen
         ref="codepenRef"
@@ -108,6 +136,11 @@ const onCodepenClicked = () => {
             </a>
           </ElIcon>
         </ElTooltip>
+        <ElTooltip :content="locale['copy-code']" :visible-arrow="false">
+          <ElIcon :size="20" class="op-btn" @click="copyCode">
+            <CopyIcon />
+          </ElIcon>
+        </ElTooltip>
         <ElTooltip :content="locale['view-source']" :visible-arrow="false">
           <ElIcon :size="20" class="op-btn" @click="setSourceVisible">
             <SourceCodeIcon />
@@ -125,6 +158,9 @@ const onCodepenClicked = () => {
 </template>
 
 <style scoped lang="scss">
+.example-description {
+  font-size: 14px;
+}
 .example {
   border: 1px solid var(--border-color);
   border-radius: var(--el-border-radius-base);

docs/.vitepress/vitepress/utils.ts

@@ -50,15 +50,9 @@ export function createGitHubUrl(
   const base = isExternal(docsRepo)
     ? docsRepo
     : `https://github.com/${docsRepo}`
-  return (
-    base.replace(endingSlashRE, '') +
-    `/edit` +
-    `/${docsBranch}/` +
-    (docsDir ? docsDir.replace(endingSlashRE, '') + '/' : '') +
-    `${folder ? folder : ''}` +
-    path +
-    `${ext ? ext : ''}`
-  )
+  return `${base.replace(endingSlashRE, '')}/edit/${docsBranch}/${
+    docsDir ? `${docsDir.replace(endingSlashRE, '')}/` : ''
+  }${folder || ''}${path}${ext || ''}`
 }
 
 export const isServer = typeof window === 'undefined'