feat(vue-playground): add style for editor

Author: 2214962083

packages/doc-site/.vuepress/plugins/vuepress-plugin-demo/client/playground/components/preview.vue

@@ -21,7 +21,8 @@ import {Preview, PreviewProxy} from '../../core/'
 import {CLEAR_CONSOLE_INJECT_KEY, STORE_INJECT_KEY} from '../constants'
 
 const store = inject(STORE_INJECT_KEY)!
-const clearConsole = computed(() => unref(inject(CLEAR_CONSOLE_INJECT_KEY)))
+const _clearConsole = inject(CLEAR_CONSOLE_INJECT_KEY)!
+const clearConsole = computed(() => unref(_clearConsole))
 const container = ref<HTMLElement>()
 const runtimeError = ref()
 const runtimeWarning = ref()

packages/vue-playground/src/playground/components/editor.vue

@@ -10,7 +10,7 @@ import {debounce, File} from '../../core'
 import {STORE_INJECT_KEY} from '../constants'
 import {useMonaco} from '../hooks/useMonaco'
 import {EditorExpose, PlaygroundLifeCycle} from '../utils/types-helper'
-import FileManageBar from './file-manage-bar.vue'
+import FileManagerBar from './file-manager-bar.vue'
 import Message from './message.vue'
 
 const props = defineProps({
@@ -58,19 +58,36 @@ onChange(handleChange)
 </script>
 
 <template>
-  <div>
-    <FileManageBar />
-    <div class="editor-container">
-      <div ref="editorEl" style="width: 100%; height: 600px"></div>
+  <div class="vue-playground-editor">
+    <FileManagerBar />
+    <div class="vue-playground-editor-container">
+      <div ref="editorEl" class="vue-playground-editor-monaco"></div>
       <Message :err="store.state.errors[0]" />
     </div>
   </div>
 </template>
 
 <style scoped>
-.editor-container {
+.vue-playground-editor {
   position: relative;
-  height: calc(100% - var(--header-height));
+  flex: 1;
+  width: 100%;
+  height: 50%;
+  min-height: 320px;
+  border-top: 1px solid #e5e7eb;
+}
+
+.vue-playground-editor-container {
+  position: absolute;
+  top: 40px;
+  flex: 1;
+  width: 100%;
+  height: calc(100% - 40px);
   overflow: hidden;
 }
+.vue-playground-editor-monaco {
+  top: 0;
+  width: 100%;
+  height: 100%;
+}
 </style>

packages/vue-playground/src/playground/components/file-manage-bar.vue renamed to packages/vue-playground/src/playground/components/file-manager-bar.vue

@@ -45,10 +45,10 @@ function doneAddFile() {
   pendingFilename.value = DEFAULT_FILE_NAME
 }
 
-const fileSel = ref(null)
+const fileManagerBarRef = ref(null)
 function horizontalScroll(e: WheelEvent) {
   e.preventDefault()
-  const el = fileSel.value! as HTMLElement
+  const el = fileManagerBarRef.value! as HTMLElement
   const direction = Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY
   const distance = 30 * (direction > 0 ? 1 : -1)
   el.scrollTo({
@@ -58,23 +58,30 @@ function horizontalScroll(e: WheelEvent) {
 </script>
 
 <template>
-  <div ref="fileSel" class="file-selector" :class="{'has-import-map': showImportMap}" @wheel="horizontalScroll">
+  <div
+    ref="fileManagerBarRef"
+    class="vue-playground-file-manager-bar"
+    :class="{'vue-playground-file-manager-bar-has-import-map': showImportMap}"
+    @wheel="horizontalScroll"
+  >
     <div
       v-for="(fileName, i) in fileNames"
       :key="i"
-      class="file"
-      :class="{active: store.state.activeFile.filename === fileName}"
+      class="vue-playground-file-manager-bar-file"
+      :class="{'vue-playground-file-manager-bar-file-active': store.state.activeFile.filename === fileName}"
       @click="store.setActive(fileName)"
     >
-      <span class="label">{{ fileName === importMapFile ? 'Import Map' : fileName }}</span>
-      <span v-if="i > 0" class="remove" @click.stop="store.deleteFile(fileName)">
-        <svg class="icon" width="12" height="12" viewBox="0 0 24 24">
+      <span class="vue-playground-file-manager-bar-file-filename">{{
+        fileName === importMapFile ? 'Import Map' : fileName
+      }}</span>
+      <span v-if="i > 0" class="vue-playground-file-manager-bar-file-remove" @click.stop="store.deleteFile(fileName)">
+        <svg class="vue-playground-file-manager-bar-file-remove-icon" width="12" height="12" viewBox="0 0 24 24">
           <line stroke="#999" x1="18" y1="6" x2="6" y2="18"></line>
           <line stroke="#999" x1="6" y1="6" x2="18" y2="18"></line>
         </svg>
       </span>
     </div>
-    <div v-if="pending" class="file pending">
+    <div v-if="pending" class="vue-playground-file-manager-bar-pending">
       <input
         v-model="pendingFilename"
         spellcheck="false"
@@ -84,112 +91,141 @@ function horizontalScroll(e: WheelEvent) {
         @vnodeMounted="focus"
       />
     </div>
-    <button class="add" @click="startAddFile">+</button>
 
-    <div v-if="showImportMap" class="import-map-wrapper">
+    <div class="vue-playground-file-manager-bar-create-btn" @click="startAddFile">+</div>
+
+    <div v-if="showImportMap" class="vue-playground-file-manager-bar-import-map-wrapper">
       <div
-        class="file import-map"
+        class="vue-playground-file-manager-bar-import-map"
         :class="{active: store.state.activeFile.filename === importMapFile}"
         @click="store.setActive(importMapFile)"
       >
-        <span class="label">Import Map</span>
+        <span class="vue-playground-file-manager-bar-import-map-name">Import Map</span>
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
-.file-selector {
+.vue-playground-file-manager-bar {
   position: relative;
   box-sizing: border-box;
   display: flex;
-  height: var(--header-height);
+  flex-shrink: 0;
+  width: 100%;
+  height: 40px;
   overflow-x: auto;
   overflow-y: hidden;
   white-space: nowrap;
-  background-color: var(--bg);
-  border-bottom: 1px solid var(--border);
+  background-color: #fff;
+  border-bottom: 1px solid #e5e7eb;
 }
 
-.file-selector::-webkit-scrollbar {
+.vue-playground-file-manager-bar::-webkit-scrollbar {
   height: 1px;
 }
 
-.file-selector::-webkit-scrollbar-track {
-  background-color: var(--border);
+.vue-playground-file-manager-bar::-webkit-scrollbar-track {
+  background-color: #e5e7eb;
 }
 
-.file-selector::-webkit-scrollbar-thumb {
-  background-color: var(--color-branding);
+.vue-playground-file-manager-bar::-webkit-scrollbar-thumb {
+  background-color: #584984;
 }
 
-.file-selector.has-import-map .add {
+.vue-playground-file-manager-bar-has-import-map .vue-playground-file-manager-bar-create-btn {
   margin-right: 10px;
 }
 
-.file {
+.vue-playground-file-manager-bar-file {
   box-sizing: border-box;
-  display: inline-block;
-  font-family: var(--font-code);
-  font-size: 13px;
-  color: var(--text-light);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 8px;
+  margin: 2px 2px 0;
+  font-size: 12px;
+  font-weight: 600;
+  color: #94a3b8;
   cursor: pointer;
+  user-select: none;
+  border-bottom: 3px solid transparent;
 }
-.file.active {
-  color: var(--color-branding);
+
+.vue-playground-file-manager-bar-file-active {
+  color: #584984;
   cursor: text;
-  border-bottom: 3px solid var(--color-branding);
+  border-bottom: 3px solid #584984;
 }
-.file span {
-  display: inline-block;
+
+.vue-playground-file-manager-bar-file span {
+  display: flex;
   padding: 8px 10px 6px;
   line-height: 20px;
 }
-.file.pending input {
+
+.vue-playground-file-manager-bar-file-remove {
+  display: flex;
+  padding-left: 0;
+  line-height: 12px;
+  vertical-align: middle;
+  cursor: pointer;
+}
+
+.vue-playground-file-manager-bar-file-remove-icon {
+  margin-top: -1px;
+}
+
+.vue-playground-file-manager-bar-pending {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.vue-playground-file-manager-bar-pending input {
   width: 90px;
   height: 30px;
   padding: 0 0 0 10px;
   margin-top: 2px;
   margin-left: 6px;
-  font-family: var(--font-code);
   font-size: 12px;
   line-height: 30px;
-  border: 1px solid var(--border);
+  color: #584984;
+  border: 1px solid #584984;
   border-radius: 4px;
   outline: none;
 }
-.file .remove {
-  display: inline-block;
-  padding-left: 0;
-  line-height: 12px;
-  vertical-align: middle;
-  cursor: pointer;
-}
-.add {
-  position: relative;
-  top: -1px;
+
+.vue-playground-file-manager-bar-create-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
   margin-left: 6px;
-  font-family: var(--font-code);
   font-size: 18px;
-  color: #999;
-  vertical-align: middle;
-}
-.add:hover {
-  color: var(--color-branding);
+  color: #94a3b8;
+  cursor: pointer;
 }
-.icon {
-  margin-top: -1px;
+
+.vue-playground-file-manager-bar-create-btn:hover {
+  color: #584984;
 }
-.import-map-wrapper {
+
+.vue-playground-file-manager-bar-import-map-wrapper {
   position: sticky;
   top: 0;
   right: 0;
-  padding-left: 30px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 0 15px;
   margin-left: auto;
+  font-size: 12px;
+  color: #94a3b8;
+  cursor: pointer;
   background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 25%);
-  background-color: var(--bg);
 }
-.dark .import-map-wrapper {
+
+.vue-playground-dark .vue-playground-file-manager-bar-import-map-wrapper {
   background: linear-gradient(90deg, rgba(26, 26, 26, 0) 0%, rgba(26, 26, 26, 1) 25%);
 }
 </style>

packages/vue-playground/src/playground/components/preview.vue

@@ -22,7 +22,8 @@ import {CLEAR_CONSOLE_INJECT_KEY, STORE_INJECT_KEY} from '../constants'
 import {PreviewExpose} from '../utils/types-helper'
 
 const store = inject(STORE_INJECT_KEY)!
-const clearConsole = computed(() => unref(inject(CLEAR_CONSOLE_INJECT_KEY)))
+const _clearConsole = inject(CLEAR_CONSOLE_INJECT_KEY, false)
+const clearConsole = computed(() => unref(_clearConsole))
 const container = ref<HTMLElement>()
 const runtimeError = ref()
 const runtimeWarning = ref()

packages/vue-playground/src/playground/playground.vue

@@ -38,10 +38,20 @@ defineExpose({
 } as PlaygroundExpose)
 </script>
 <template>
-  <div>
+  <div class="vue-playground">
     vue playground
-    <preview></preview>
-    <editor ref="editorRef" :life-cycle="options.lifeCycle"></editor>
+    <Preview></Preview>
+    <Editor ref="EditorRef" :life-cycle="options.lifeCycle"></Editor>
   </div>
 </template>
-<style lang="scss" scoped></style>
+<style scoped>
+.vue-playground {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  background-color: #fff;
+  border: 1px solid #e5e7eb;
+  border-radius: 8px;
+}
+</style>

packages/vuepress-plugin-sandbox/src/enhanceAppFile.ts

@@ -3,17 +3,12 @@ import {defineClientAppEnhance} from '@vuepress/client'
 import {ConcreteComponent, DefineComponent, h, resolveComponent} from 'vue'
 import * as base64 from 'js-base64'
 import {SANDBOX_COMPONENT_NAME} from './constants'
-import css from '../node_modules/vue-playground/dist/style.css'
+import 'vue-playground/dist/style.css'
 
 export default defineClientAppEnhance(async ({app}) => {
   let Playground: DefineComponent<{}, {}, any> | undefined
 
   if (!__VUEPRESS_SSR__) {
-    // add playground styles to global
-    const styleEl = document.createElement('style')
-    styleEl.innerHTML = css
-    document.head.appendChild(styleEl)
-
     // load playground
     const VuePlayground = await import('vue-playground')
     Playground = VuePlayground.Playground