refactor(docs): improve style and fix typo (#7094)

* refactor(docs): improve style and fix typo

* fix(docs): dark

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

@@ -1,8 +1,8 @@
 {
   "view-source": "View source",
   "hide-source": "Hide source",
-  "edit-in-editor": "Edit in PlayGround",
-  "edit-on-github": "Edit on Github",
+  "edit-in-editor": "Edit in Playground",
+  "edit-on-github": "Edit on GitHub",
   "edit-in-codepen": "Edit in Codepen.io",
   "copy-code": "Copy code",
   "switch-button-option-text": "Switch to Options API",

docs/.vitepress/env.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="vite/client" />
+
+export {}

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

@@ -21,7 +21,7 @@ defineProps({
 
 <style lang="scss" scoped>
 .example-showcase {
-  padding: 1.5rem;
+  padding: 0.8rem;
   margin: 0.5px;
   background-color: var(--bg-color);
 }

docs/.vitepress/vitepress/components/globals/contributors.vue

@@ -12,14 +12,14 @@ const contributors = computed(() => _contributors[props.id])
   <div class="mb-4">
     <div class="flex flex-wrap gap-4 pt-2">
       <div v-for="c of contributors" :key="c.hash">
-        <VpLink
+        <vp-link
           :href="`https://github.com/${c.login}`"
           class="flex gap-2 items-center link"
           no-icon
         >
           <img :src="c.avatar" class="w-8 h-8 rounded-full" />
           {{ c.name }}
-        </VpLink>
+        </vp-link>
       </div>
     </div>
   </div>

docs/.vitepress/vitepress/components/navbar/vp-theme-toggler.vue

@@ -5,7 +5,7 @@ import CommonThemeToggler from '../common/vp-theme-toggler.vue'
 
 <template>
   <div class="theme-toggler-content">
-    <CommonThemeToggler @click="toggleDark()" />
+    <CommonThemeToggler @click="() => toggleDark()" />
   </div>
 </template>
 

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

@@ -4,7 +4,7 @@ import { isClient, useClipboard, useToggle } from '@vueuse/core'
 import { CaretTop } from '@element-plus/icons-vue'
 import { useLang } from '../composables/lang'
 import { useSourceCode } from '../composables/source-code'
-import { usePlayGround } from '../composables/use-playground'
+import { usePlayground } from '../composables/use-playground'
 
 import demoBlockLocale from '../../i18n/component/demo-block.json'
 
@@ -26,7 +26,7 @@ const { copy, isSupported } = useClipboard({
   read: false,
 })
 
-const [sourceVisible, setSourceVisible] = useToggle()
+const [sourceVisible, toggleSourceVisible] = useToggle()
 const lang = useLang()
 const demoSourceUrl = useSourceCode(toRef(props, 'path'))
 
@@ -46,8 +46,8 @@ const decodedDescription = computed(() =>
   decodeURIComponent(props.description!)
 )
 
-const onPlaygroundClicked = () => {
-  const { link } = usePlayGround(props.rawSource)
+const onPlaygroundClick = () => {
+  const { link } = usePlayground(props.rawSource)
   if (!isClient) return
   window.open(link)
 }
@@ -70,16 +70,21 @@ const copyCode = async () => {
   <ClientOnly>
     <!-- danger here DO NOT USE INLINE SCRIPT TAG -->
     <p text="sm" v-html="decodedDescription" />
+
     <div class="example">
+      <Example :file="path" :demo="formatPathDemos[path]" />
+
+      <ElDivider class="m-0" />
+
       <div class="op-btns">
         <ElTooltip :content="locale['edit-in-editor']" :show-arrow="false">
-          <ElIcon :size="20" class="op-btn">
-            <i-ri-play-circle-line @click="onPlaygroundClicked" />
+          <ElIcon :size="16" class="op-btn">
+            <i-ri-flask-line @click="onPlaygroundClick" />
           </ElIcon>
         </ElTooltip>
         <ElTooltip :content="locale['edit-on-github']" :show-arrow="false">
           <ElIcon
-            :size="20"
+            :size="16"
             class="op-btn github"
             style="color: var(--text-color-light)"
           >
@@ -89,35 +94,33 @@ const copyCode = async () => {
           </ElIcon>
         </ElTooltip>
         <ElTooltip :content="locale['copy-code']" :show-arrow="false">
-          <ElIcon :size="20" class="op-btn" @click="copyCode">
-            <!-- <CopyIcon /> -->
-            <i-ri-file-copy-2-line />
+          <ElIcon :size="16" class="op-btn" @click="copyCode">
+            <i-ri-file-copy-line />
           </ElIcon>
         </ElTooltip>
         <ElTooltip :content="locale['view-source']" :show-arrow="false">
-          <ElIcon :size="20" class="op-btn" @click="setSourceVisible">
-            <!-- <SourceCodeIcon /> -->
+          <ElIcon :size="16" class="op-btn" @click="toggleSourceVisible()">
             <i-ri-code-line />
           </ElIcon>
         </ElTooltip>
       </div>
-      <ElDivider class="m-0" />
-      <Example :file="path" :demo="formatPathDemos[path]" />
-      <el-collapse-transition>
+
+      <ElCollapseTransition>
         <SourceCode v-show="sourceVisible" :source="source" />
-      </el-collapse-transition>
-      <transition name="el-fade-in-linear">
+      </ElCollapseTransition>
+
+      <Transition name="el-fade-in-linear">
         <div
           v-show="sourceVisible"
           class="example-float-control"
-          @click="setSourceVisible(false)"
+          @click="toggleSourceVisible(false)"
         >
           <ElIcon :size="16">
             <CaretTop />
           </ElIcon>
           <span>{{ locale['hide-source'] }}</span>
         </div>
-      </transition>
+      </Transition>
     </div>
   </ClientOnly>
 </template>
@@ -128,12 +131,11 @@ const copyCode = async () => {
   border-radius: var(--el-border-radius-base);
 
   .op-btns {
-    padding: 0.5rem;
+    padding: 0.3rem;
     display: flex;
     align-items: center;
     justify-content: flex-end;
-    height: 3rem;
-    line-height: 3rem;
+    height: 2rem;
 
     .el-icon {
       &:hover {

docs/.vitepress/vitepress/composables/dark.ts

@@ -1,10 +1,12 @@
 import { useDark, useToggle } from '@vueuse/core'
 
-export const isDark =
-  // @ts-expect-error when PROD is true, do not useDark
-  import.meta.env.DEV &&
-  useDark({
-    storageKey: 'el-theme-appearance',
-  })
-// remove as boolean when dark mode is ok
-export const toggleDark = useToggle(isDark as boolean)
+export const isDark = useDark({
+  storageKey: 'el-theme-appearance',
+})
+
+// TODO: remove when dark mode is ready
+if (!import.meta.env.DEV) {
+  isDark.value = false
+}
+
+export const toggleDark = useToggle(isDark)

docs/.vitepress/vitepress/composables/feature-flag.ts

@@ -1,10 +1,16 @@
-import { computed } from 'vue'
+import { computed, unref } from 'vue'
 import { useData } from 'vitepress'
+import { useBrowserLocation } from '@vueuse/core'
+import type { MaybeRef } from '@vueuse/core'
 
-export const useFeatureFlag = (flag: string) => {
+const location = useBrowserLocation()
+
+export const useFeatureFlag = (flag: MaybeRef<string>) => {
   const { theme } = useData()
 
   return computed(() => {
-    return (theme.value.features || {})[flag]
+    const _flag = unref(flag)
+    const params = new URLSearchParams(location.value.search)
+    return params.get(`feature:${_flag}`) || (theme.value.features || {})[_flag]
   })
 }

docs/.vitepress/vitepress/composables/use-playground.ts

@@ -2,7 +2,7 @@ import { utoa } from '../utils'
 
 const MAIN_FILE_NAME = 'App.vue'
 
-export const usePlayGround = (source: string) => {
+export const usePlayground = (source: string) => {
   const code = decodeURIComponent(source)
   const originCode = {
     [MAIN_FILE_NAME]: code,

docs/components.d.ts

@@ -6,9 +6,9 @@ declare module 'vue' {
   export interface GlobalComponents {
     IRiCodeLine: typeof import('~icons/ri/code-line')['default']
     IRiExternalLinkLine: typeof import('~icons/ri/external-link-line')['default']
-    IRiFileCopy2Line: typeof import('~icons/ri/file-copy2-line')['default']
+    IRiFileCopyLine: typeof import('~icons/ri/file-copy-line')['default']
+    IRiFlaskLine: typeof import('~icons/ri/flask-line')['default']
     IRiGithubLine: typeof import('~icons/ri/github-line')['default']
-    IRiPlayCircleLine: typeof import('~icons/ri/play-circle-line')['default']
     IRiTranslate2: typeof import('~icons/ri/translate2')['default']
   }
 }