refactor(app): update playground

docs/docs/.vitepress/config.ts

@@ -12,7 +12,7 @@ export default defineConfig({
       { text: 'Guide', items: [] },
       { text: 'Components', items: [] },
       { text: 'Windi UI', items: []},
-      { text: 'Playground', link: '/play'},
+      { text: 'Playground', link: 'http://localhost:5173/play/#eyJBcHAudnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPVwidHNcIj5cbmltcG9ydCB7IHJlZiB9IGZyb20gXCJ2dWVcIjtcblxuY29uc3QgZ3JlZXRpbmcgPSByZWYoXCJXZWxjb21lIHRvIFdpbmRpIFVJJ3MgcGxheWdyb3VuZCFcIilcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxkaXYgY2xhc3M9XCJncmlkIHBsYWNlLWl0ZW1zLWNlbnRlciB3LWZ1bGwgbWluLWgtc2NyZWVuXCI+XG4gICAgPGgxIGNsYXNzPVwidGV4dC0yeGxcIj5cbiAgICAgIHt7IGdyZWV0aW5nIH19XG4gICAgPC9oMT5cbiAgPC9kaXY+XG48L3RlbXBsYXRlPlxuIiwiaW1wb3J0LW1hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge1xuICAgIFwidnVlXCI6IFwiaHR0cDovL2xvY2FsaG9zdDo1MTczL3BsYXkvc3JjL3Z1ZS1kZXYtcHJveHlcIixcbiAgICBcIkB2dWUvY29tcGlsZXItc2ZjXCI6IFwiaHR0cDovL2xvY2FsaG9zdDo1MTczL3BsYXkvc3JjL3Z1ZS1zZmMtZGV2LXByb3h5XCIsXG4gICAgXCJAdnVlL3NoYXJlZFwiOiBcImh0dHA6Ly9sb2NhbGhvc3Q6NTE3My9wbGF5L3NyYy92dWUtc2hhcmVkLWRldi1wcm94eVwiLFxuICAgIFwidnVlLXVpLW5leHRcIjogXCJodHRwOi8vbG9jYWxob3N0OjUxNzMvcGxheS9zcmMvdnVlLXVpLW5leHQtZGV2LXByb3h5XCJcbiAgfSxcbiAgXCJzY29wZXNcIjoge31cbn0iLCJsaWItaW5zdGFsbC5qcyI6ImltcG9ydCB7IGdldEN1cnJlbnRJbnN0YW5jZSB9IGZyb20gJ3Z1ZSdcbi8vIGltcG9ydCBVbm9VSSBmcm9tICdvbnUtdWknXG5pbXBvcnQgeyB1aSB9IGZyb20gXCJ2dWUtdWktbmV4dFwiO1xuXG5sZXQgaW5zdGFsbGVkID0gZmFsc2VcblxuZXhwb3J0IGZ1bmN0aW9uIGxpYkluc3RhbGwoKSB7XG4gIGlmIChpbnN0YWxsZWQpXG4gICAgcmV0dXJuXG4gIGNvbnN0IGluc3RhbmNlID0gZ2V0Q3VycmVudEluc3RhbmNlKClcbiAgLy8g5a6J6KOF57uE5Lu25bqT5YiwdnVlXG4gIGluc3RhbmNlLmFwcENvbnRleHQuYXBwLnVzZSh1aSlcbiAgaW5zdGFsbGVkID0gdHJ1ZVxufVxuXG5leHBvcnQgYXN5bmMgZnVuY3Rpb24gaW5pdCgpIHtcbiAgYXdhaXQgbG9hZFN0eWxlKClcbiAgYXdhaXQgY3JlYXRlSW5qZWN0VW5vY3NzKClcbn1cblxuZXhwb3J0IGZ1bmN0aW9uIGxvYWRTdHlsZSgpIHtcbiAgcmV0dXJuIG5ldyBQcm9taXNlKChyZXNvbHZlLCByZWplY3QpID0+IHtcbiAgICBjb25zdCBsaW5rID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnbGluaycpXG4gICAgbGluay5yZWwgPSAnc3R5bGVzaGVldCdcbiAgICBsaW5rLmhyZWYgPSAndW5kZWZpbmVkJ1xuICAgIGxpbmsuaWQgPSAnbGliX3N0eWxlJ1xuICAgIGxpbmsuYWRkRXZlbnRMaXN0ZW5lcignbG9hZCcsIHJlc29sdmUpXG4gICAgbGluay5hZGRFdmVudExpc3RlbmVyKCdlcnJvcicsIHJlamVjdClcbiAgICBkb2N1bWVudC5ib2R5LmFwcGVuZChsaW5rKVxuICB9KVxufVxuXG5leHBvcnQgZnVuY3Rpb24gY3JlYXRlSW5qZWN0VW5vY3NzKCkge1xuICByZXR1cm4gbmV3IFByb21pc2UoKHJlc29sdmUsIHJlamVjdCkgPT4ge1xuICAgIGNvbnN0IHN0eWxlID0gZG9jdW1lbnQuY3JlYXRlRWxlbWVudCgnc3R5bGUnKVxuICAgIHN0eWxlLmlkID0gJ3Vub2Nzc19zdHlsZSdcbiAgICBzdHlsZS5hZGRFdmVudExpc3RlbmVyKCdsb2FkJywgcmVzb2x2ZSlcbiAgICBzdHlsZS5hZGRFdmVudExpc3RlbmVyKCdlcnJvcicsIHJlamVjdClcbiAgICBkb2N1bWVudC5ib2R5LmFwcGVuZChzdHlsZSlcbiAgfSlcbn1cblxuLy8g5Y+R6YCBZG9t5L+h5oGv5YiwIOeItumhtemdolxuZXhwb3J0IGZ1bmN0aW9uIHNlbmRIdG1sKCkge1xuICBjb25zdCBkaXYgPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjYXBwJykuaW5uZXJIVE1MXG4gIHRvcC5wb3N0TWVzc2FnZShkaXYsIGxvY2F0aW9uLmFuY2VzdG9yT3JpZ2luc1swXSlcbn1cblxuLy8g5pS254i26aG16Z2i5Lyg5p2l5YiwIGNzc1xuZXhwb3J0IGZ1bmN0aW9uIGdldFVub2Nzc0NvbXBpbGVSZXMoKSB7XG4gIHdpbmRvdy5hZGRFdmVudExpc3RlbmVyKCdtZXNzYWdlJywgKGV2ZW50KSA9PiB7XG4gICAgY29uc3Qgc3R5bGVFbG0gPSBkb2N1bWVudC5xdWVyeVNlbGVjdG9yKCcjdW5vY3NzX3N0eWxlJylcbiAgICBpZiAoc3R5bGVFbG0pXG4gICAgICBzdHlsZUVsbS5pbm5lckhUTUwgPSBldmVudC5kYXRhXG4gIH0pXG59IiwiUGxheWdyb3VuZE1haW4udnVlIjoiPHNjcmlwdCBzZXR1cCBsYW5nPVwidHNcIj5cbmltcG9ydCB7IG9uTW91bnRlZCB9IGZyb20gJ3Z1ZSdcbi8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvYmFuLXRzLWNvbW1lbnRcbi8vIEB0cy1leHBlY3QtZXJyb3JcbmltcG9ydCBBcHAgZnJvbSAnLi9BcHAudnVlJ1xuaW1wb3J0IHsgZ2V0VW5vY3NzQ29tcGlsZVJlcywgaW5pdCwgbGliSW5zdGFsbCwgc2VuZEh0bWwgfSBmcm9tICcuL2xpYi1pbnN0YWxsLmpzJ1xuXG5saWJJbnN0YWxsKClcbm9uTW91bnRlZChhc3luYyAoKSA9PiB7XG4gIGF3YWl0IGluaXQoKVxuICBzZW5kSHRtbCgpXG4gIGdldFVub2Nzc0NvbXBpbGVSZXMoKVxufSlcbjwvc2NyaXB0PlxuXG48dGVtcGxhdGU+XG4gIDxBcHAgLz5cbjwvdGVtcGxhdGU+IiwiaW1wb3J0X21hcC5qc29uIjoie1xuICBcImltcG9ydHNcIjoge31cbn0iLCJfbyI6e319'},
       { text: "Showcase", link: ''},
       { text: `v${version}`, link: ''}
     ],

playground/index.html

@@ -5,6 +5,7 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta charset="UTF-8" />
+    <link rel="icon" href="./src/public/windi.png" type="image/x-icon">
     <title>Windi UI Playground</title>
     <script>
       // process shim for old versions of @vue/compiler-sfc dependency

playground/src/App.vue

@@ -1,7 +1,6 @@
 <script setup lang="ts">
-// import { OMessage as message } from 'onu-ui'
 import { Repl } from '@vue/repl'
-// import type { OMessageProps } from 'onu-ui'
+import { Icon } from "@iconify/vue";
 import playConfig from '../playground.config'
 import Header from '~/components/Header.vue'
 import { useStore } from '~/composables/store'
@@ -69,9 +68,10 @@ window.addEventListener(
             :show-import-map="store.userOptions.value.showHidden || false"
             @keydown="(event) => handleKeydown(event, store)" />
         <div v-if="loading" class="loading-wrapper" flex items-center justify-center flex-col>
-            <p text-lg>
-                loading the playground...... 🤣
-            </p>
+            <div flex items-center space-x-3>
+                <Icon icon="ph:spinner" class="text-2xl animate-spin" />
+                <p class="text-xl">Loading Windi UI playground</p>
+            </div>
         </div>
     </div>
 </template>

playground/src/components/Header.vue

@@ -1,8 +1,10 @@
 <script setup lang="ts">
 // import { OMessage as message } from 'onu-ui'
 import type { ComputedRef } from 'vue'
-// import type { OMessageProps } from 'onu-ui'
+import { UPopover, UIcon } from 'vue-ui-next'
+import Logo from "../public/windi.png";
 import { Icon } from "@iconify/vue";
+// import type { OMessageProps } from 'onu-ui'
 import playConfig from '../../playground.config'
 import { getSupportVersions } from '~/utils/versions'
 import type { ReplStore, VersionKey } from '~/composables/store'
@@ -17,7 +19,7 @@ interface Version {
     active: string
 }
 
-// 黑暗模式配置
+
 const appDark = useDark({
     selector: 'body',
     attribute: `${playConfig.compLibShort}-theme`,
@@ -51,7 +53,7 @@ const versions = reactive<Record<VersionKey, Version>>({
 })
 
 async function handleSetVersion(key: VersionKey, v: any) {
-    versions[key].active = 'loading...'
+    versions[key].active = 'Loading versions...'
     await store.setVersion(key, v, store.versions, store.compiler, store.state)
     versions[key].active = v
 }
@@ -68,23 +70,40 @@ async function copyLink() {
 
 <template>
     <nav class="header-nav" border-b-cyan-500 border-b shadow>
-        <a flex items-center m-2 cursor-pointer :href="domain">
+        <a flex items-center cursor-pointer :href="domain">
+            <Icon icon="ri:windy-fill" class="text-2xl text-[#059FFF] mx-2"/>
+            <!-- <img :src="Logo" alt="Windi UI Logo" px-2> -->
             <span text-lg font-bold dark-text-gray-100>{{ playConfig.title }}</span>
             <div ml-12px dark-text-gray-300>
                 Playground
             </div>
         </a>
 
         <div flex items-center justify-around m-2>
-            <div v-for="(v, key) of versions" :key="key" flex mx-10 items-center>
+            <div v-for="(v, key) of versions" :key="key" flex mx-6 items-center>
                 <span dark-text-gray-300 font-bold text-base>{{ v.text }} Version:</span>
+                <UPopover>
+                    <div px-12px text-lg cursor-pointer text-stone-600 dark-text-gray-100 flex items-center>
+                        <span text-base>{{ v.active }}</span>
+                        <UIcon name="material-symbols:keyboard-arrow-down" ml-2 />
+                    </div>
+                    <template #panel>
+                        <div h-50 class="version-content">
+                            <p v-for="(ver, index) of v.published" :key="index" cursor-pointer px="4" h-30px border-none leading-loose
+                                text-baseText
+                                @click="handleSetVersion(key, ver)">
+                                {{ ver }}
+                            </p>
+                        </div>
+                    </template>
+                </UPopover>
             </div>
 
-            <a href="https://staging-cn.vuejs.org/" target="_blank" class="header-a">
+            <a href="https://vuejs.org/" target="_blank" class="header-a">
                 <Icon h-5 w-5 mx-2 icon="logos:vue" />
             </a>
 
-            <a href="https://github.com/unocss/unocss" target="_blank" class="header-a">
+            <a href="https://tailwindcss.com" target="_blank" class="header-a">
                 <Icon h-5 w-5 mx-2 icon="logos:tailwindcss-icon" />
             </a>
 

playground/src/template/lib-install.js

@@ -8,8 +8,8 @@ export function libInstall() {
   if (installed)
     return
   const instance = getCurrentInstance()
-  // 安装组件库到vue
-  instance.appContext.app.use(ui)
+
+  // instance.appContext.app.use(ui)
   installed = true
 }
 

playground/src/template/welcome.vue

@@ -1,41 +1,9 @@
-<script setup lang="ts">
-import { ref, version as vueVersion } from 'vue'
-const msg = ref('Hello Onu UI!')
-// const checkVal = ref(true)
-// const mv = ref(true)
-// const avatarSrcs = 'https://github.com/selemondev.png'
-
-// const className = 'dark'
-// const isDark = ref(false)
-
-// const toggleTheme = () => {
-//   if (typeof window !== 'undefined') {
-//     const rootCls = document.documentElement.classList
-//     isDark.value = !isDark.value
-//     if (isDark.value)
-//       rootCls.add(className)
-//     else
-//       rootCls.remove(className)
-//   }
-// }
+<script setup lang='ts'>
+  
 </script>
 
 <template>
-  <div p-5 space-y-3>
-    <h1>{{ msg }}</h1>
-
-    <!-- <div fscw gap-2>
-      <img :src="avatarSrcs" h-10 w-10 />
-    </div> -->
+  <div>
 
-
-    <p text-black>Vue {{ vueVersion }}</p>
   </div>
-</template>
-
-<style>
-/* body {
-  color: var(--onu-colors-text);
-  background-color: var(--onu-colors-background);
-} */
-</style>
+</template>