feat(vue-playground): supports change layout, fullscreen, show or hide code

Author: 2214962083

.eslintrc.js

@@ -103,6 +103,7 @@ module.exports = /** @type { import('eslint').Linter.Config } */ ({
     'vue/no-unused-vars': 'warn',
     'vue/multi-word-component-names': 'off',
     'vue/one-component-per-file': 'off',
+    'vue/no-v-model-argument': 'off',
     'vue/comment-directive': [
       'warn',
       {

packages/vue-playground/src/playground/components/control-button.vue

@@ -0,0 +1,49 @@
+<script lang="ts">
+export default defineComponent({
+  name: 'ControlButton'
+})
+</script>
+<script setup lang="ts">
+import {defineComponent} from 'vue'
+
+defineProps({
+  title: {
+    type: String
+  },
+  active: {
+    type: Boolean,
+    default: false
+  }
+})
+</script>
+<template>
+  <div
+    role="button"
+    :title="title"
+    class="vue-playground-control-btn"
+    :class="{'vue-playground-toolbar-direction-active': active}"
+  >
+    <slot></slot>
+  </div>
+</template>
+<style scoped>
+.vue-playground-control-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  font-size: 12px;
+  color: #656666;
+  cursor: pointer;
+  background-color: #fff;
+  border: 1px solid #c5c7c8;
+  border-radius: 4px;
+  box-shadow: 0 4px 6px -1px rgb(0, 0, 0, 0.1), 0 2px 4px -2px rgb(0, 0, 0, 0.1);
+}
+
+.vue-playground-control-btn.vue-playground-toolbar-direction-active {
+  color: #584984;
+  border: 1px solid #584984;
+}
+</style>

packages/vue-playground/src/playground/components/icon.tsx

@@ -0,0 +1,89 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {defineComponent, VNode} from 'vue'
+
+const createComponent = (name: string, render: (props: Record<string, any>) => VNode) =>
+  defineComponent({
+    name,
+    render() {
+      const props = {...this.$props, ...this.$attrs}
+      return render(props)
+    }
+  })
+
+export const EditorLeftPreviewRightIcon = createComponent('EditorLeftPreviewRightIcon', props => (
+  <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+    <path
+      d="M12 5v14h7V5h-7zM4 3h16a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1z"
+      fill="currentColor"
+    ></path>
+  </svg>
+))
+
+export const EditorTopPreviewBottomIcon = createComponent('EditorTopPreviewBottomIcon', props => (
+  <EditorLeftPreviewRightIcon {...props} style={{transform: 'rotate(90deg)'}} />
+))
+
+export const EditorRightPreviewLeftIcon = createComponent('EditorRightPreviewLeftIcon', props => (
+  <EditorLeftPreviewRightIcon {...props} style={{transform: 'rotate(180deg)'}} />
+))
+
+export const EditorBottomPreviewTopIcon = createComponent('EditorBottomPreviewTopIcon', props => (
+  <EditorLeftPreviewRightIcon {...props} style={{transform: 'rotate(270deg)'}} />
+))
+
+export const ErrorIcon = createComponent('ErrorIcon', props => (
+  <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+    <path
+      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"
+      fill="currentColor"
+    ></path>
+  </svg>
+))
+
+export const FullscreenIcon = createComponent('FullscreenIcon', props => (
+  <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+    <path d="M5 5h5v2H7v3H5V5m9 0h5v5h-2V7h-3V5m3 9h2v5h-5v-2h3v-3m-7 3v2H5v-5h2v3h3z" fill="currentColor"></path>
+  </svg>
+))
+
+export const ExitFullscreenIcon = createComponent('ExitFullscreenIcon', props => (
+  <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+    <path d="M14 14h5v2h-3v3h-2v-5m-9 0h5v5H8v-3H5v-2m3-9h2v5H5V8h3V5m11 3v2h-5V5h2v3h3z" fill="currentColor"></path>
+  </svg>
+))
+
+export const ShowCodeIcon = createComponent('ShowCodeIcon', props => (
+  <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+    <path
+      d="M8.7 15.9L4.8 12l3.9-3.9a.984.984 0 0 0 0-1.4a.984.984 0 0 0-1.4 0l-4.59 4.59a.996.996 0 0 0 0 1.41l4.59 4.6c.39.39 1.01.39 1.4 0a.984.984 0 0 0 0-1.4zm6.6 0l3.9-3.9l-3.9-3.9a.984.984 0 0 1 0-1.4a.984.984 0 0 1 1.4 0l4.59 4.59c.39.39.39 1.02 0 1.41l-4.59 4.6a.984.984 0 0 1-1.4 0a.984.984 0 0 1 0-1.4z"
+      fill="currentColor"
+    ></path>
+  </svg>
+))
+
+export const HideCodeIcon = createComponent('HideCodeIcon', props => (
+  <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+    <path
+      d="M19.17 12l-3.88-3.88a.996.996 0 1 1 1.41-1.41l4.59 4.59c.39.39.39 1.02 0 1.41l-2.88 2.88L17 14.17L19.17 12zM2.1 4.93l3.49 3.49l-2.88 2.88a.996.996 0 0 0 0 1.41L7.3 17.3a.996.996 0 1 0 1.41-1.41L4.83 12L7 9.83L19.07 21.9a.996.996 0 1 0 1.41-1.41L3.51 3.51a.996.996 0 0 0-1.41 0c-.39.4-.39 1.03 0 1.42z"
+      fill="currentColor"
+    ></path>
+  </svg>
+))
+
+export const DisconnectedIcon = createComponent('DisconnectedIcon', props => (
+  <svg width="1em" height="1em" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      d="M21.707 3.707a1 1 0 0 0-1.414-1.414L18.496 4.09a4.252 4.252 0 0 0-5.251.604l-1.068 1.069a1.75 1.75 0 0 0 0 2.474l3.585 3.586a1.75 1.75 0 0 0 2.475 0l1.068-1.068a4.252 4.252 0 0 0 .605-5.25l1.797-1.798Zm-11 8a1 1 0 0 0-1.414-1.414l-1.47 1.47l-.293-.293a.75.75 0 0 0-1.06 0l-1.775 1.775a4.252 4.252 0 0 0-.605 5.25l-1.797 1.798a1 1 0 1 0 1.414 1.414l1.798-1.797a4.252 4.252 0 0 0 5.25-.605l1.775-1.775a.75.75 0 0 0 0-1.06l-.293-.293l1.47-1.47a1 1 0 0 0-1.414-1.414l-1.47 1.47l-1.586-1.586l1.47-1.47Z"
+    />
+  </svg>
+))
+
+export const ConnectedIcon = createComponent('ConnectedIcon', props => (
+  <svg width="1em" height="1em" viewBox="0 0 20 20" {...props}>
+    <path
+      fill="currentColor"
+      d="M17.78 3.28a.75.75 0 0 0-1.06-1.06l-2.446 2.445a4.037 4.037 0 0 0-5.128.481l-.3.3a1.49 1.49 0 0 0 0 2.108l3.6 3.6a1.49 1.49 0 0 0 2.107 0l.3-.3a4.037 4.037 0 0 0 .482-5.128L17.78 3.28ZM7.554 8.846a1.49 1.49 0 0 0-2.107 0l-.3.3a4.037 4.037 0 0 0-.481 5.128L2.22 16.72a.75.75 0 1 0 1.06 1.06l2.446-2.446a4.037 4.037 0 0 0 5.128-.48l.3-.3a1.49 1.49 0 0 0 0-2.108l-3.6-3.6Z"
+    />
+  </svg>
+))

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

@@ -37,15 +37,19 @@ function formatMessage(err: string | Error): string {
 
 <template>
   <Transition name="fade">
-    <div v-if="!dismissed && (err || warn)" class="msg" :class="err ? 'err' : 'warn'">
+    <div
+      v-if="!dismissed && (err || warn)"
+      class="vue-playground-msg"
+      :class="err ? 'vue-playground-msg-err' : 'vue-playground-msg-warn'"
+    >
       <pre>{{ formatMessage(err || warn) }}</pre>
-      <button class="dismiss" @click="dismissed = true">✕</button>
+      <button class="vue-playground-dismiss" @click="dismissed = true">✕</button>
     </div>
   </Transition>
 </template>
 
 <style scoped>
-.msg {
+.vue-playground-msg {
   position: absolute;
   right: 8px;
   bottom: 0;
@@ -61,12 +65,14 @@ function formatMessage(err: string | Error): string {
   border: 2px solid transparent;
   border-radius: 6px;
 }
-pre {
+
+.vue-playground-msg pre {
   padding: 12px 20px;
   margin: 0;
   overflow: scroll;
 }
-.dismiss {
+
+.vue-playground-dismiss {
   position: absolute;
   top: 2px;
   right: 2px;
@@ -81,27 +87,31 @@ pre {
   background-color: red;
   border-radius: 9px;
 }
+
 @media (max-width: 720px) {
-  .dismiss {
+  .vue-playground-dismiss {
     top: -9px;
     right: -9px;
   }
-  .msg {
+  .vue-playground-msg {
     bottom: 50px;
   }
 }
-.msg.err {
+
+.vue-playground-msg-err {
   color: red;
   background-color: #ffd7d7;
   border-color: red;
 }
-.msg.warn {
+
+.vue-playground-msg-warn {
   --color: rgb(105, 95, 27);
   color: var(--color);
   background-color: rgb(247, 240, 205);
   border-color: var(--color);
 }
-.msg.warn .dismiss {
+
+.vue-playground-msg-warn .vue-playground-dismiss {
   background-color: var(--color);
 }
 .fade-enter-active,

packages/vue-playground/src/playground/components/portal.ts

@@ -0,0 +1,24 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import {defineComponent, h, Teleport} from 'vue'
+
+const vm = defineComponent({
+  name: 'Portal',
+  props: {
+    to: {
+      type: String
+    }
+  },
+  render() {
+    const {to} = this
+    if (!to) return this.$slots.default?.()
+    return h(
+      Teleport as any,
+      {
+        to
+      },
+      this.$slots.default?.()
+    )
+  }
+})
+
+export default vm

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

@@ -17,7 +17,7 @@ import {
   computed,
   unref
 } from 'vue'
-import {Preview, PreviewProxy} from '../../core/'
+import {Preview} from '../../core/'
 import {CLEAR_CONSOLE_INJECT_KEY, STORE_INJECT_KEY} from '../constants'
 import {PreviewExpose} from '../utils/types-helper'
 
@@ -28,8 +28,6 @@ const container = ref<HTMLElement>()
 const runtimeError = ref()
 const runtimeWarning = ref()
 
-let proxy: PreviewProxy
-
 let stopUpdateWatcher: WatchStopHandle | undefined
 
 const preview = new Preview({
@@ -85,7 +83,7 @@ watch(
 )
 
 onUnmounted(() => {
-  proxy.destroy()
+  preview.destroy()
 })
 
 defineExpose({
@@ -95,16 +93,22 @@ defineExpose({
 </script>
 
 <template>
-  <div class="preview">
-    <div ref="container" class="iframe-container"></div>
+  <div class="vue-playground-preview">
+    <div ref="container" class="vue-playground-preview-iframe-container"></div>
     <Message :err="runtimeError" />
     <Message v-if="!runtimeError" :warn="runtimeWarning" />
   </div>
 </template>
 
 <style scoped>
-.iframe-container,
-.iframe-container :deep(iframe) {
+.vue-playground-preview {
+  box-sizing: border-box;
+  flex: 1;
+  width: 100%;
+  overflow: hidden;
+}
+.vue-playground-preview-iframe-container,
+.vue-playground-preview-iframe-container :deep(iframe) {
   width: 100%;
   height: 100%;
   background-color: #fff;