From 6fd6c0c25008880469d5eda1aa06482a563a4bb8 Mon Sep 17 00:00:00 2001
From: pengzhanbo <volodymyr@foxmail.com>
Date: Sun, 30 Mar 2025 00:12:04 +0800
Subject: [PATCH] feat: improve `demo vue` scoped styles (#542)

---
 .../theme/guide/repl/demo/Counter.module.css  |   1 -
 docs/notes/theme/guide/repl/demo/Counter.vue  |   1 -
 docs/notes/theme/guide/repl/demo/Toggle.vue   |   1 -
 docs/notes/theme/guide/repl/frontend.md       |   2 -
 .../src/client/components/VPDemoBasic.vue     |  48 ++++++++-
 .../src/client/styles/demo.css                |  11 ++
 plugins/plugin-md-power/src/node/demo/vue.ts  |   2 +-
 theme/src/client/styles/normalize.css         | 102 +++++++++---------
 8 files changed, 108 insertions(+), 60 deletions(-)

diff --git a/docs/notes/theme/guide/repl/demo/Counter.module.css b/docs/notes/theme/guide/repl/demo/Counter.module.css
index b2d318e8..faf9eb2c 100644
--- a/docs/notes/theme/guide/repl/demo/Counter.module.css
+++ b/docs/notes/theme/guide/repl/demo/Counter.module.css
@@ -1,5 +1,4 @@
 .btn {
-  padding: 0 8px;
   border: 1px solid var(--vp-c-divider);
   border-radius: 4px;
 }
diff --git a/docs/notes/theme/guide/repl/demo/Counter.vue b/docs/notes/theme/guide/repl/demo/Counter.vue
index 8e11067c..1f509cdf 100644
--- a/docs/notes/theme/guide/repl/demo/Counter.vue
+++ b/docs/notes/theme/guide/repl/demo/Counter.vue
@@ -17,7 +17,6 @@ const count = ref(0)
 
 <style scoped>
 .btn {
-  padding: 0 8px;
   border: 1px solid var(--vp-c-divider);
   border-radius: 4px;
 }
diff --git a/docs/notes/theme/guide/repl/demo/Toggle.vue b/docs/notes/theme/guide/repl/demo/Toggle.vue
index 72cf4563..dbfd39a9 100644
--- a/docs/notes/theme/guide/repl/demo/Toggle.vue
+++ b/docs/notes/theme/guide/repl/demo/Toggle.vue
@@ -23,7 +23,6 @@ const [value, toggle] = useToggle()
 
 <style scoped>
 .btn {
-  padding: 0 8px;
   border: 1px solid var(--vp-c-divider);
   border-radius: 4px;
 }
diff --git a/docs/notes/theme/guide/repl/frontend.md b/docs/notes/theme/guide/repl/frontend.md
index 135c27e4..cd8afccc 100644
--- a/docs/notes/theme/guide/repl/frontend.md
+++ b/docs/notes/theme/guide/repl/frontend.md
@@ -330,7 +330,6 @@ const count = ref(0)
 
 <style scoped>
 .btn {
-  padding: 0 8px;
   border: 1px solid var(--vp-c-divider);
   border-radius: 4px;
 }
@@ -363,7 +362,6 @@ const count = ref(0)
 
 <style scoped>
 .btn {
-  padding: 0 8px;
   border: 1px solid var(--vp-c-divider);
   border-radius: 4px;
 }
diff --git a/plugins/plugin-md-power/src/client/components/VPDemoBasic.vue b/plugins/plugin-md-power/src/client/components/VPDemoBasic.vue
index 0c256783..9da098f4 100644
--- a/plugins/plugin-md-power/src/client/components/VPDemoBasic.vue
+++ b/plugins/plugin-md-power/src/client/components/VPDemoBasic.vue
@@ -1,4 +1,7 @@
 <script setup lang="ts">
+import { useResizeObserver } from '@vueuse/core'
+import { useTemplateRef, watch } from 'vue'
+import { ClientOnly, onContentUpdated } from 'vuepress/client'
 import { useExpand } from '../composables/demo.js'
 
 import '../styles/demo.css'
@@ -11,12 +14,51 @@ const props = defineProps<{
 }>()
 
 const [showCode, toggleCode] = useExpand(props.expanded)
+
+const draw = useTemplateRef<HTMLIFrameElement>('draw')
+const vueDraw = useTemplateRef<HTMLIFrameElement>('draw-vue')
+
+function resizeAndPositionVueDraw() {
+  if (!draw.value || !vueDraw.value)
+    return
+  const rect = draw.value.getBoundingClientRect()
+  const { scrollLeft, scrollTop } = document.documentElement
+  vueDraw.value.style.width = `${draw.value.offsetWidth - 48}px`
+  vueDraw.value.style.top = `${rect.top + scrollTop}px`
+  vueDraw.value.style.left = `${rect.x + scrollLeft}px`
+}
+
+if (props.type === 'vue' && !__VUEPRESS_SSR__) {
+  watch([draw, vueDraw], () => {
+    resizeAndPositionVueDraw()
+    if (draw.value && vueDraw.value) {
+      requestAnimationFrame(() => {
+        draw.value!.style.height = `${vueDraw.value!.offsetHeight}px`
+      })
+    }
+  }, { immediate: true })
+  useResizeObserver(draw, resizeAndPositionVueDraw)
+  useResizeObserver(() => document.body, resizeAndPositionVueDraw)
+  onContentUpdated(resizeAndPositionVueDraw)
+
+  useResizeObserver(vueDraw, () => {
+    if (draw.value && vueDraw.value)
+      draw.value.style.height = `${vueDraw.value.offsetHeight}px`
+  })
+}
 </script>
 
 <template>
-  <div class="vp-demo-wrapper">
-    <div class="demo-draw">
-      <slot />
+  <div class="vp-demo-wrapper" :class="{ type }">
+    <div ref="draw" class="demo-draw">
+      <slot v-if="type !== 'vue'" />
+      <ClientOnly v-else>
+        <Teleport to="body">
+          <div ref="draw-vue" class="demo-draw-vue">
+            <slot />
+          </div>
+        </Teleport>
+      </ClientOnly>
     </div>
     <div v-if="title || desc" class="demo-info">
       <p v-if="title" class="title">
diff --git a/plugins/plugin-md-power/src/client/styles/demo.css b/plugins/plugin-md-power/src/client/styles/demo.css
index 51cc06d6..da4161f5 100644
--- a/plugins/plugin-md-power/src/client/styles/demo.css
+++ b/plugins/plugin-md-power/src/client/styles/demo.css
@@ -147,6 +147,17 @@
   list-style: none;
 }
 
+.demo-draw-vue {
+  position: absolute;
+  top: -99999px;
+  left: -99999px;
+  z-index: 1;
+  padding: 24px;
+  overflow: hidden;
+  transform: translate3d(0, 0, 0);
+  will-change: top, left, width, height;
+}
+
 .vpi-demo-code {
   --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14.18 4.276a.75.75 0 0 1 .531.918l-3.973 14.83a.75.75 0 0 1-1.45-.389l3.974-14.83a.75.75 0 0 1 .919-.53m2.262 3.053a.75.75 0 0 1 1.059-.056l1.737 1.564c.737.662 1.347 1.212 1.767 1.71c.44.525.754 1.088.754 1.784c0 .695-.313 1.258-.754 1.782c-.42.499-1.03 1.049-1.767 1.711l-1.737 1.564a.75.75 0 0 1-1.004-1.115l1.697-1.527c.788-.709 1.319-1.19 1.663-1.598c.33-.393.402-.622.402-.818s-.072-.424-.402-.817c-.344-.409-.875-.89-1.663-1.598l-1.697-1.527a.75.75 0 0 1-.056-1.06m-8.94 1.06a.75.75 0 1 0-1.004-1.115L4.761 8.836c-.737.662-1.347 1.212-1.767 1.71c-.44.525-.754 1.088-.754 1.784c0 .695.313 1.258.754 1.782c.42.499 1.03 1.049 1.767 1.711l1.737 1.564a.75.75 0 0 0 1.004-1.115l-1.697-1.527c-.788-.709-1.319-1.19-1.663-1.598c-.33-.393-.402-.622-.402-.818s.072-.424.402-.817c.344-.409.875-.89 1.663-1.598z'/%3E%3C/svg%3E");
 }
diff --git a/plugins/plugin-md-power/src/node/demo/vue.ts b/plugins/plugin-md-power/src/node/demo/vue.ts
index 7bffbd2f..014be35f 100644
--- a/plugins/plugin-md-power/src/node/demo/vue.ts
+++ b/plugins/plugin-md-power/src/node/demo/vue.ts
@@ -101,7 +101,7 @@ export const vueContainerRender: DemoContainerRender = {
       }
     }
 
-    return `<VPDemoBasic${title ? ` title="${title}"` : ''}${desc ? ` desc="${desc}"` : ''}${expanded ? ' expanded' : ''}>
+    return `<VPDemoBasic type="vue"${title ? ` title="${title}"` : ''}${desc ? ` desc="${desc}"` : ''}${expanded ? ' expanded' : ''}>
     <${componentName} />
     <template #code>\n`
   },
diff --git a/theme/src/client/styles/normalize.css b/theme/src/client/styles/normalize.css
index a084dbc0..d92aef06 100644
--- a/theme/src/client/styles/normalize.css
+++ b/theme/src/client/styles/normalize.css
@@ -13,9 +13,9 @@
   }
 }
 
-*,
-::before,
-::after {
+:where(#app) *,
+:where(#app) ::before,
+:where(#app) ::after {
   box-sizing: border-box;
 }
 
@@ -78,24 +78,24 @@ main {
   display: block;
 }
 
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
+:where(#app) h1,
+:where(#app) h2,
+:where(#app) h3,
+:where(#app) h4,
+:where(#app) h5,
+:where(#app) h6 {
   margin: 0;
   font-size: 16px;
   font-weight: 400;
   line-height: 24px;
 }
 
-p {
+:where(#app) p {
   margin: 0;
 }
 
-strong,
-b {
+:where(#app) strong,
+:where(#app) b {
   font-weight: 600;
 }
 
@@ -131,8 +131,8 @@ a {
   text-decoration: inherit;
 }
 
-ol,
-ul {
+:where(#app) ol,
+:where(#app) ul {
   padding: 0;
   margin: 0;
   list-style: none;
@@ -142,19 +142,19 @@ blockquote {
   margin: 0;
 }
 
-pre,
-code,
-kbd,
-samp {
+:where(#app) pre,
+:where(#app) code,
+:where(#app) kbd,
+:where(#app) samp {
   font-family: var(--vp-font-family-mono);
 }
 
-img,
-svg,
+:where(#app) img,
+:where(#app) svg,
 video,
 canvas,
 audio,
-iframe,
+:where(#app) iframe,
 embed,
 object {
   display: block;
@@ -164,98 +164,98 @@ figure {
   margin: 0;
 }
 
-img,
-video {
+:where(#app) img,
+:where(#app) video {
   max-width: 100%;
   height: auto;
 }
 
-button,
-input,
-optgroup,
-select,
-textarea {
+:where(#app) button,
+:where(#app) input,
+:where(#app) optgroup,
+:where(#app) select,
+:where(#app) textarea {
   padding: 0;
   line-height: inherit;
   color: inherit;
   border: 0;
 }
 
-textarea {
+:where(#app) textarea {
   resize: vertical;
 }
 
-select {
+:where(#app) select {
   -webkit-appearance: none;
   appearance: none;
 }
 
-input {
+:where(#app) input {
   background-color: transparent;
 }
 
-button {
+:where(#app) button {
   padding: 0;
   font-family: inherit;
   background-color: transparent;
   background-image: none;
 }
 
-button:enabled,
-[role="button"]:enabled {
+:where(#app) button:enabled,
+:where(#app) [role="button"]:enabled {
   cursor: pointer;
 }
 
-button:focus,
-button:focus-visible {
+:where(#app) button:focus,
+:where(#app) button:focus-visible {
   outline: 1px dotted;
   outline: 4px auto -webkit-focus-ring-color;
 }
 
-button:focus:not(:focus-visible) {
+:where(#app) button:focus:not(:focus-visible) {
   outline: none !important;
 }
 
-input:focus,
-textarea:focus,
-select:focus {
+:where(#app) input:focus,
+:where(#app) textarea:focus,
+:where(#app) select:focus {
   outline: none;
 }
 
-table {
+:where(#app) table {
   border-collapse: collapse;
 }
 
-input:-ms-input-placeholder,
-textarea:-ms-input-placeholder {
+:where(#app) input:-ms-input-placeholder,
+:where(#app) textarea:-ms-input-placeholder {
   color: var(--vp-c-text-3);
   transition: color var(--vp-t-color);
 }
 
-input::-ms-input-placeholder,
-textarea::-ms-input-placeholder {
+:where(#app) input::-ms-input-placeholder,
+:where(#app) textarea::-ms-input-placeholder {
   color: var(--vp-c-text-3);
   transition: color var(--vp-t-color);
 }
 
-input::placeholder,
-textarea::placeholder {
+:where(#app) input::placeholder,
+:where(#app) textarea::placeholder {
   color: var(--vp-c-text-3);
   transition: color var(--vp-t-color);
 }
 
-input::-webkit-outer-spin-button,
-input::-webkit-inner-spin-button {
+:where(#app) input::-webkit-outer-spin-button,
+:where(#app) input::-webkit-inner-spin-button {
   margin: 0;
   -webkit-appearance: none;
 }
 
-input[type="number"] {
+:where(#app) input[type="number"] {
   -moz-appearance: textfield;
   appearance: textfield;
 }
 
-fieldset {
+:where(#app) fieldset {
   padding: 0;
   margin: 0;
 }