feat(md-enhance): remove some customization with vue playground

BREAKING CHANGE: remvoe showCode option in vueplayground, update layout default value closed 2811
vuepress-theme-hope · Feb 20, 2023 · 916792a · 916792a
1 parent 1549e51
commit 916792a
Show file tree

Hide file tree

Showing 10 changed files with 25 additions and 190 deletions.
diff --git a/docs/md-enhance/src/config.md b/docs/md-enhance/src/config.md
@@ -477,13 +477,6 @@ Playground options.
 
   ```ts
   interface VuePlaygroundOptions {
-    /**
-     * Whether to show code in playground
-     *
-     * @default false
-     */
-    showCode?: boolean;
-
     /**
      * specify the version of vue
      */
@@ -534,9 +527,9 @@ Playground options.
     /**
      * Layout
      *
-     * @default 'vertical'
+     * @default 'horizontal'
      */
-    layout?: "vertical" | "horizontal";
+    layout?: "vertical" |layout?: "horizontal" | "vertical";
 
     /**
      * Options to configure the `vue/compiler-sfc`

diff --git a/docs/md-enhance/src/zh/config.md b/docs/md-enhance/src/zh/config.md
@@ -481,13 +481,6 @@ interface TaskListOptions {
 
   ```ts
   interface VuePlaygroundOptions {
-    /**
-     * 是否在交互演示中显示代码
-     *
-     * @default false
-     */
-    showCode?: boolean;
-
     /**
      * 指定 vue 版本
      */
@@ -538,9 +531,9 @@ interface TaskListOptions {
     /**
      * 布局
      *
-     * @default 'vertical'
+     * @default 'horizontal'
      */
-    layout?: "vertical" | "horizontal";
+    layout?: "vertical" |layout?: "horizontal" | "vertical";
 
     /**
      * `vue/compiler-sfc` 配置项

diff --git a/docs/theme/src/config/plugins/md-enhance.md b/docs/theme/src/config/plugins/md-enhance.md
@@ -411,13 +411,6 @@ Playground options.
 
   ```ts
   interface VuePlaygroundOptions {
-    /**
-     * Whether to show code in playground
-     *
-     * @default false
-     */
-    showCode?: boolean;
-
     /**
      * specify the version of vue
      */
@@ -468,9 +461,9 @@ Playground options.
     /**
      * Layout
      *
-     * @default 'vertical'
+     * @default 'horizontal'
      */
-    layout?: "vertical" | "horizontal";
+    layout?: "vertical" |layout?: "horizontal" | "vertical";
 
     /**
      * Options to configure the `vue/compiler-sfc`

diff --git a/docs/theme/src/ru/config/plugins/md-enhance.md b/docs/theme/src/ru/config/plugins/md-enhance.md
@@ -412,13 +412,6 @@ interface TaskListOptions {
 
   ```ts
   interface VuePlaygroundOptions {
-    /**
-     * Whether to show code in playground
-     *
-     * @default false
-     */
-    showCode?: boolean;
-
     /**
      * specify the version of vue
      */
@@ -469,9 +462,9 @@ interface TaskListOptions {
     /**
      * Layout
      *
-     * @default 'vertical'
+     * @default 'horizontal'
      */
-    layout?: "vertical" | "horizontal";
+    layout?: "vertical" |layout?: "horizontal" | "vertical";
 
     /**
      * Options to configure the `vue/compiler-sfc`

diff --git a/docs/theme/src/zh/config/plugins/md-enhance.md b/docs/theme/src/zh/config/plugins/md-enhance.md
@@ -415,13 +415,6 @@ interface TaskListOptions {
 
   ```ts
   interface VuePlaygroundOptions {
-    /**
-     * 是否在交互演示中显示代码
-     *
-     * @default false
-     */
-    showCode?: boolean;
-
     /**
      * 指定 vue 版本
      */
@@ -472,9 +465,9 @@ interface TaskListOptions {
     /**
      * 布局
      *
-     * @default 'vertical'
+     * @default 'horizontal'
      */
-    layout?: "vertical" | "horizontal";
+    layout?: "horizontal" | "vertical";
 
     /**
      * `vue/compiler-sfc` 配置项

diff --git a/packages/md-enhance/src/client/components/VuePlayground.ts b/packages/md-enhance/src/client/components/VuePlayground.ts
@@ -10,7 +10,6 @@ import {
 } from "vue";
 import { LoadingIcon } from "vuepress-shared/client";
 
-import { CODE_SVG } from "./icons.js";
 import { getVuePlaygroundSettings } from "../utils/playground.js";
 
 import "@vue/repl/style.css";
@@ -54,9 +53,6 @@ export default defineComponent({
       getVuePlaygroundSettings(props.settings)
     );
 
-    // eslint-disable-next-line vue/no-ref-object-destructure
-    const showCode = ref(playgroundOptions.value.showCode || false);
-
     const setupRepl = async (): Promise<void> => {
       const { ReplStore, Repl } = await import(
         /* webpackChunkName: "vue-repl" */ "@vue/repl"
@@ -65,7 +61,6 @@ export default defineComponent({
       component.value = Repl;
       store.value = new ReplStore({
         serializedState: decodeURIComponent(props.files),
-        showOutput: true,
       });
 
       if (playgroundOptions.value.vueVersion)
@@ -79,27 +74,13 @@ export default defineComponent({
 
     return (): (VNode | null)[] => [
       h("div", { class: "vue-playground-wrapper" }, [
-        h("div", { class: "title-wrapper" }, [
-          props.title
-            ? h("div", { class: "title" }, decodeURIComponent(props.title))
-            : null,
-          h("div", { class: "actions" }, [
-            h("button", {
-              class: "action",
-              innerHTML: CODE_SVG,
-              onClick: () => {
-                showCode.value = !showCode.value;
-              },
-            }),
-          ]),
-        ]),
+        props.title
+          ? h("div", { class: "header" }, decodeURIComponent(props.title))
+          : null,
         h(
           "div",
           {
-            class: [
-              "repl-container",
-              showCode.value ? "show-code" : "hide-code",
-            ],
+            class: "repl-container",
           },
           [
             loading.value
@@ -108,7 +89,9 @@ export default defineComponent({
             component.value
               ? h(component.value, <ReplProps>{
                   store: store.value,
+                  autoResize: true,
                   ...playgroundOptions.value,
+                  layout: "horizontal",
                 })
               : null,
           ]

diff --git a/packages/md-enhance/src/client/components/icons.ts b/packages/md-enhance/src/client/components/icons.ts
@@ -22,5 +22,3 @@ export const JSFIDDLE_SVG =
   '<svg class="jsfiddle-icon" viewBox="0 0 1170 1024" xmlns="http://www.w3.org/2000/svg"><path d="M1028.571 441.143q63.429 26.286 102.572 83.143t39.143 126.571q0 93.714-67.429 160.286T940 877.714q-2.286 0-6.571-.285t-6-.286H232q-97.143-5.714-164.571-71.714T0 645.143q0-62.857 31.429-116t84-84q-6.858-22.286-6.858-46.857 0-65.715 46.858-112T269.143 240q54.286 0 98.286 33.143 42.857-88 127.142-141.714t186.572-53.715q94.857 0 174.857 46t126.571 124.857 46.572 172q0 3.429-.286 10.286t-.286 10.286zm-761.142 152q0 69.714 48 110.286T434.286 744q78.285 0 137.143-56.571-9.143-11.429-27.143-32.286t-24.857-28.857q-38.286 37.143-82.286 37.143-31.429 0-53.429-19.143t-22-50q0-30.286 22-49.715T436 525.143q25.143 0 48.286 12T526 568.57t37.143 42.858 39.428 46.857 44 42.857T702 732.57t69.429 12q69.142 0 116.857-40.857T936 594.857q0-69.143-48-109.714T769.714 444.57Q688 444.571 632 500l53.143 61.714q37.714-36.571 81.143-36.571 29.714 0 52.571 18.857t22.857 48q0 32.571-21.143 52.286T766.857 664q-24.571 0-47.143-12t-41.143-31.429-37.428-42.857-39.714-46.857T557.143 488 502 456.571t-67.714-12q-69.715 0-118.286 40.286t-48.571 108.286z"/></svg>';
 
 export const PLAY_SVG = `<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M512 74.667C270.933 74.667 74.667 270.933 74.667 512S270.933 949.333 512 949.333 949.333 753.067 949.333 512 753.067 74.667 512 74.667zm0 810.666C307.2 885.333 138.667 716.8 138.667 512S307.2 138.667 512 138.667 885.333 307.2 885.333 512 716.8 885.333 512 885.333z"/><path d="M708.267 465.067 473.6 330.667c-8.533-4.267-17.067-6.4-25.6-6.4-29.867 0-53.333 23.466-53.333 53.333v268.8c0 8.533 2.133 19.2 6.4 25.6 10.666 17.067 27.733 27.733 46.933 27.733 8.533 0 17.067-2.133 25.6-6.4l234.667-134.4c8.533-4.266 14.933-10.666 19.2-19.2 6.4-12.8 8.533-27.733 4.266-40.533-2.133-14.933-10.666-25.6-23.466-34.133zM458.667 627.2V396.8L661.333 512 458.667 627.2z"/></svg>`;
-
-export const CODE_SVG = `<svg class="icon" viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg"><path d="M240.496 272c-13.504 0-25.664 5.632-34.384 14.608l-.048-.048-189.216 189.2A47.664 47.664 0 0 0 0 512c0 13.504 5.616 25.664 14.592 34.368l-.032.064 192 192 .048-.064A47.68 47.68 0 0 0 240 752a48 48 0 0 0 48-48c0-12.992-5.216-24.752-13.616-33.392l.048-.048-158.304-158.32 157.808-157.808-.048-.048A47.808 47.808 0 0 0 288.496 320a48 48 0 0 0-48-48zm784 240c0-14.56-6.608-27.44-16.848-36.24l-189.216-189.2-.032.048A47.872 47.872 0 0 0 784 272a48 48 0 0 0-48 48c0 13.504 5.632 25.664 14.608 34.384l-.048.048L908.368 512.24l-158.32 158.32.048.048A47.808 47.808 0 0 0 736.48 704a48 48 0 0 0 48 48c12.992 0 24.752-5.216 33.408-13.632l.048.064 192-192-.048-.064A47.68 47.68 0 0 0 1024.496 512zM640 128c-20.8 0-38.496 13.232-45.168 31.712L339.2 830.784a48 48 0 0 0 89.968 33.504L684.8 193.216A48 48 0 0 0 640 128z"/></svg>`;
diff --git a/packages/md-enhance/src/client/styles/vue-playground.scss b/packages/md-enhance/src/client/styles/vue-playground.scss
@@ -62,52 +62,20 @@
   border: 1px solid var(--vp-brc);
   border-radius: 6px;
 
-  .title-wrapper {
-    display: flex;
-    flex-flow: row wrap;
-
-    padding: 8px 10px;
+  .header {
+    padding: 0.5rem 0.75rem;
     border-bottom: 1px solid var(--vp-brc);
 
     background: var(--playground-header-bg-color, #eee);
 
     font-weight: 500;
+    font-size: 1.1rem;
+    line-height: 1.5;
+    overflow-wrap: break-word;
 
     transition: background var(--vp-ct) border-color var(--vp-ct);
   }
 
-  .title {
-    flex: 1;
-
-    overflow: hidden;
-
-    font-size: 1.25rem;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-  }
-
-  .actions {
-    display: flex;
-    align-items: center;
-  }
-
-  .icon {
-    width: 1.5rem;
-    height: 1.5rem;
-    fill: #777;
-  }
-
-  .action {
-    @include reset.button;
-
-    display: inline-flex;
-    margin-inline-start: 10px;
-
-    @media (max-width: hope-config.$tablet) {
-      display: none;
-    }
-  }
-
   .preview-loading {
     color: var(--vp-tc);
   }
@@ -138,75 +106,8 @@
       page-break-inside: avoid;
     }
 
-    @media (max-width: hope-config.$tablet) {
-      &.show-code {
-        .vue-repl {
-          .split-pane.show-output {
-            .left {
-              display: none !important;
-            }
-          }
-
-          .split-pane:not(.show-output) {
-            .left {
-              display: block !important;
-            }
-          }
-        }
-      }
-
-      &.hide-code {
-        .vue-repl {
-          .split-pane.show-output {
-            .left {
-              display: none !important;
-            }
-          }
-
-          .split-pane:not(.show-output) {
-            .left {
-              display: block !important;
-            }
-          }
-        }
-      }
-    }
-
-    iframe {
-      display: block;
-      width: 100%;
-      height: 100%;
-      border: none;
-    }
-
     .vue-repl {
-      .split-pane {
-        .left {
-          .editor-container {
-            height: 100% !important;
-          }
-        }
-      }
-    }
-
-    &.show-code {
-      .vue-repl {
-        .split-pane {
-          .left {
-            display: block !important;
-          }
-        }
-      }
-    }
-
-    &.hide-code {
-      .vue-repl {
-        .split-pane {
-          .left {
-            display: none !important;
-          }
-        }
-      }
+      height: 300px;
     }
 
     // reset pre

diff --git a/packages/md-enhance/src/node/markdown-it/vuePlayground.ts b/packages/md-enhance/src/node/markdown-it/vuePlayground.ts
@@ -6,14 +6,11 @@ import { type VuePlaygroundOptions } from "../../shared/index.js";
 import { type PlaygroundData } from "../typings/index.js";
 
 export const DEFAULT_VUE_PLAYGROUND_OPTIONS: VuePlaygroundOptions = {
-  autoResize: true,
-  showCode: false,
   showCompileOutput: false,
-  showImportMap: true,
   clearConsole: false,
-  layout: "vertical",
   ssr: false,
 };
+
 const VUE_SUPPORTED_EXTENSIONS = [
   "html",
   "js",

diff --git a/packages/md-enhance/src/shared/vuePlayground.ts b/packages/md-enhance/src/shared/vuePlayground.ts
@@ -10,15 +10,6 @@ import { type SFCOptions } from "@vue/repl";
  * @description Vue playground 使用 [`@vue/repl`](https://github.com/vuejs/repl)
  */
 export interface VuePlaygroundOptions {
-  /**
-   * Whether to show code in playground
-   *
-   * 是否在交互演示中显示代码
-   *
-   * @default false
-   */
-  showCode?: boolean;
-
   /**
    * specify the version of vue
    *
@@ -85,9 +76,9 @@ export interface VuePlaygroundOptions {
    *
    * 布局
    *
-   * @default "vertical"
+   * @default "horizontal"
    */
-  layout?: "vertical" | "horizontal";
+  layout?: "horizontal" | "vertical";
 
   /**
    * Options to configure the `vue/compiler-sfc`