add primevue splitter

package-lock.json

@@ -12,6 +12,7 @@
         "@codemirror/theme-one-dark": "^6.1.0",
         "codemirror": "^6.0.1",
         "normalize.css": "^8.0.1",
+        "primevue": "^3.18.0",
         "vue": "^3.2.41",
         "vue-codemirror": "^6.1.1",
         "vue-router": "^4.1.5"
@@ -1505,6 +1506,21 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/primeicons": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-6.0.1.tgz",
+      "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA==",
+      "peer": true
+    },
+    "node_modules/primevue": {
+      "version": "3.18.0",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.18.0.tgz",
+      "integrity": "sha512-7E3BTQRlvdVMh8OXIKqDVHFvF6UrrKacd80drTwiTHgjO98NLWtpDthxByM2z2yooGURx8JJ7GeFoMj8kKrScg==",
+      "peerDependencies": {
+        "primeicons": "^5.0.0 || ^6.0.0",
+        "vue": "^3.0.0"
+      }
+    },
     "node_modules/punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
@@ -3158,6 +3174,18 @@
       "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
       "dev": true
     },
+    "primeicons": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/primeicons/-/primeicons-6.0.1.tgz",
+      "integrity": "sha512-KDeO94CbWI4pKsPnYpA1FPjo79EsY9I+M8ywoPBSf9XMXoe/0crjbUK7jcQEDHuc0ZMRIZsxH3TYLv4TUtHmAA==",
+      "peer": true
+    },
+    "primevue": {
+      "version": "3.18.0",
+      "resolved": "https://registry.npmjs.org/primevue/-/primevue-3.18.0.tgz",
+      "integrity": "sha512-7E3BTQRlvdVMh8OXIKqDVHFvF6UrrKacd80drTwiTHgjO98NLWtpDthxByM2z2yooGURx8JJ7GeFoMj8kKrScg==",
+      "requires": {}
+    },
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",

package.json

@@ -12,6 +12,7 @@
     "@codemirror/theme-one-dark": "^6.1.0",
     "codemirror": "^6.0.1",
     "normalize.css": "^8.0.1",
+    "primevue": "^3.18.0",
     "vue": "^3.2.41",
     "vue-codemirror": "^6.1.1",
     "vue-router": "^4.1.5"

src/assets/main.css

@@ -1,7 +1,11 @@
 @import 'normalize.css';
+/*@import 'primevue/resources/primevue.min.css';*/
+/*@import 'primevue/resources/themes/saga-blue/theme.css';*/
+@import 'primevue/resources/themes/bootstrap4-dark-blue/theme.css';
 
 html, body {
-  height:  100%;
+  height: 100%;
+  overflow: hidden;
 }
 
 #app {

src/main.js

@@ -4,8 +4,11 @@ import router from './router'
 
 import './assets/main.css'
 
+import PrimeVue from 'primevue/config';
+
 const app = createApp(App)
 
 app.use(router)
+app.use(PrimeVue);
 
 app.mount('#app')

src/views/HomeView.vue

@@ -5,6 +5,9 @@ const worker = new Worker();
 
 // const lodash = await fetch('https://registry.npmjs.org/lodash');
 
+import Splitter from 'primevue/splitter';
+import SplitterPanel from 'primevue/splitterpanel';
+
 import { defineComponent, shallowRef } from 'vue'
 import { Codemirror } from 'vue-codemirror'
 import { javascript } from '@codemirror/lang-javascript'
@@ -12,7 +15,8 @@ import { oneDark } from '@codemirror/theme-one-dark'
 
 export default defineComponent({
   components: {
-    Codemirror
+    Codemirror,
+    Splitter, SplitterPanel,
   },
   setup() {
     const code = `console.log('Hello, world!')`;
@@ -53,20 +57,33 @@ main {
 }
 </style>
 
+<style>
+.p-splitter-gutter-handle:focus {
+  box-shadow: none !important;
+}
+</style>
+
 <template>
   <main>
-    <codemirror
-      v-model="code"
-      placeholder="Code goes here..."
-      :style="{ height: '100%' }"
-      :autofocus="true"
-      :indent-with-tab="true"
-      :tab-size="2"
-      :extensions="extensions"
-      @ready="handleReady"
-      @change="log('change', $event)"
-      @focus="log('focus', $event)"
-      @blur="log('blur', $event)"
-    />
+    <Splitter style="height: 100%" :step="50" :gutterSize="8" layout="horizontal">
+      <SplitterPanel>
+        <codemirror
+          v-model="code"
+          placeholder="Code goes here..."
+          :style="{ height: '100%' }"
+          :autofocus="true"
+          :indent-with-tab="true"
+          :tab-size="2"
+          :extensions="extensions"
+          @ready="handleReady"
+          @change="log('change', $event)"
+          @focus="log('focus', $event)"
+          @blur="log('blur', $event)"
+        />
+      </SplitterPanel>
+      <SplitterPanel>
+        Right Pane
+      </SplitterPanel>
+    </Splitter>
   </main>
 </template>