feat: support edit in playground

docs/.vitepress/components/demo-block/src/index.vue

@@ -1,4 +1,7 @@
 <script lang='ts' setup name="demo-block">
+import { computed } from 'vue'
+import { isClient, useClipboard, useToggle } from '@vueuse/core'
+import { usePlayground } from './playground'
 import { demoProps } from './index'
 
 const props = defineProps(demoProps)
@@ -8,6 +11,15 @@ const decodedHighlightedCode = computed(() =>
 )
 const { copy, copied } = useClipboard({ source: decodeURIComponent(props.code) })
 const [value, toggle] = useToggle()
+
+const editOnPlayground = () => {
+  if (props.code) {
+    const { link } = usePlayground(decodeURIComponent(props.code))
+    if (!isClient)
+      return
+    window.open(link)
+  }
+}
 </script>
 
 <template>
@@ -18,10 +30,10 @@ const [value, toggle] = useToggle()
       </div>
       <div class="relative">
         <div class="o-demo_actions">
-          <a class="o-demo_action_item" group :href="codeSandBox" target="_blank">
+          <a class="o-demo_action_item" group @click="editOnPlayground">
             <div class="o-demo_action_icon i-carbon:chemistry" />
             <div class="o-demo_tooltip" group-hover:opacity-100>
-              Open on Playground(WIP)
+              Edit in Playground
             </div>
           </a>
           <a class="o-demo_action_item" group :href="github" target="_blank">
@@ -48,11 +60,3 @@ const [value, toggle] = useToggle()
     </div>
   </ClientOnly>
 </template>
-
-<!-- <style scoped>
-.bg {
-      /* background-color: #1c1f24; */
-      background: conic-gradient(from 192deg at 46.5% 42.58%, #FA8792 -54.94deg, #561BBE 28.29deg,
-          #70E6FB 157.82deg, #FBF8B3 220.83deg, #FA8792 305.06deg, #561BBE 388.29deg);
-    }
-</style> -->

docs/.vitepress/components/demo-block/src/playground.ts

@@ -0,0 +1,21 @@
+const playgroundUrl = (import.meta as any).env.DEV ? 'http://localhost:5173/play/' : 'https://onu.zyob.top/play/'
+
+function utoa(data: string) {
+  return btoa(unescape(encodeURIComponent(data)))
+}
+
+const MAIN_FILE_NAME = 'App.vue'
+
+export const usePlayground = (source: string) => {
+  const code = decodeURIComponent(source)
+  const originCode = {
+    [MAIN_FILE_NAME]: code,
+  }
+
+  const encoded = utoa(JSON.stringify(originCode))
+  const link = `${playgroundUrl}#${encoded}`
+  return {
+    encoded,
+    link,
+  }
+}

docs/.vitepress/components/tsconfig.json

@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
     "baseUrl": ".",
+    "module": "ESNext",
     "types": [
       "../../../volar",
       "../../auto-imports"

packages/preset/src/shortcuts/button.ts

@@ -1,6 +1,6 @@
 export const buttonShortcuts: Record<string, string> = {
   // button
-  'o-button-base': 'fcc gap-1 inline-flex cursor-pointer rounded leading-none text-baseText border border-baseBorder  font-medium whitespace-nowrap text-center box-border o-transition select-none  !focus:outline-none',
+  'o-button-base': 'fcc gap-1 inline-flex cursor-pointer rounded leading-none bg-transparent text-baseText border border-baseBorder  font-medium whitespace-nowrap text-center box-border o-transition select-none  !focus:outline-none',
   'o-hover-active-base': 'hover-border-[var(--onu-theme-primaryLight)] hover-text-primaryBase hover-bg-[var(--onu-theme-primaryLight)] active-border-primaryBorder active-text-primaryBase',
   'o-button-light': 'o-light',
   'o-button-light-disable': 'o-light-simple',

playground/src/components/Header.vue

@@ -58,10 +58,12 @@ async function handleSetVersion(key: VersionKey, v: any) {
   versions[key].active = v
 }
 
+const domain = `${document.location.origin}/play/`
+
 // 分享连接
 async function copyLink() {
   const loc = document.location
-  const link = `${`${loc.origin}/play`}?${playConfig.compLibShort}=${
+  const link = `${`${domain}`}?${playConfig.compLibShort}=${
     store.versions[playConfig.compLibShort]
   }&vue=${store.versions.vue}${loc.hash}`
   await navigator.clipboard.writeText(link)
@@ -75,7 +77,7 @@ async function copyLink() {
 
 <template>
   <nav class="header-nav" border-b-cyan-500 border-b shadow>
-    <div flex items-center m-2>
+    <a flex items-center m-2 cursor-pointer :href="domain">
       <img
         w-8
         h-8
@@ -88,11 +90,11 @@ async function copyLink() {
       <div ml-12px dark-text-gray-300>
         Playground
       </div>
-    </div>
+    </a>
 
     <div flex items-center m-2>
       <div v-for="(v, key) of versions" :key="key" flex items-center>
-        <span dark-text-gray-300 font-bold>{{ v.text }} Version:</span>
+        <span dark-text-gray-300 font-bold text-base>{{ v.text }} Version:</span>
         <o-popup
           position="bottom"
           :content-style="{ paddingLeft: 0, paddingRight: 0 }"
@@ -107,7 +109,7 @@ async function copyLink() {
             flex
             items-center
           >
-            <span>{{ v.active }}</span>
+            <span text-base>{{ v.active }}</span>
             <o-icon name="i-carbon-chevron-down" ml-2 />
           </div>
           <template #content>

playground/src/main.ts

@@ -1,10 +1,10 @@
 import { createApp } from 'vue'
+import onuUI from 'onu-ui'
+import App from './App.vue'
 import '@vue/repl/dist/style.css'
-import 'onu-ui/dist/style.css'
 import '@unocss/reset/tailwind.css'
+import 'onu-ui/dist/style.css'
 import 'uno.css'
-import onuUI from 'onu-ui'
-import App from './App.vue'
 
 // @ts-expect-error Custom window property
 window.VUE_DEVTOOLS_CONFIG = {

playground/src/template/welcome.vue

@@ -47,7 +47,7 @@ const toggleTheme = () => {
           Primary
         </o-button>
       </o-badge>
-      <o-button type="success" @click="open">
+      <o-button @click="open">
         Show Message
       </o-button>
     </div>

playground/unocss.config.ts

@@ -23,4 +23,7 @@ export default defineConfig({
     presetOnu(),
   ],
   transformers: [transformerVariantGroup(), transformerDirectives()],
+  shortcuts: [{
+    fscw: 'flex justify-start items-center flex-wrap w-full',
+  }],
 })