feat(playground): responsiveness

docs/.vitepress/theme/Playground.vue

@@ -1,35 +1,48 @@
-<script>
-import Split from 'split.js';
-
-export default {
-  mounted() {
-    Split(['#editor', '#output']);
-  },
-};
-</script>
-
 <script setup>
 import Knex from 'knex';
-import { ref, watch } from 'vue';
 import * as sqlFormatter from 'sql-formatter';
+import Split from 'split.js';
+import { computed, onMounted, ref, shallowRef, watch } from 'vue';
+
+import { useBreakpoints } from './breakpoint';
 import { useDialect } from './dialect';
 
 const formatter = {
-  pg: 'postgresql',
-  pgnative: 'postgresql',
+  cockroachdb: 'postgresql',
+  mssql: 'tsql',
   mysql: 'mysql',
   mysql2: 'mysql',
-  cockroachdb: 'postgresql',
+  oracledb: 'plsql',
+  pg: 'postgresql',
+  pgnative: 'postgresql',
   redshift: 'redshift',
   sqlite3: 'sqlite',
-  oracledb: 'plsql',
-  mssql: 'tsql',
 };
 
 const { dialect } = useDialect();
+const { type } = useBreakpoints();
+const isVertical = computed(() => ['xs', 'sm'].includes(type.value));
+
+const split = shallowRef();
 const sql = ref('');
 const code = ref('');
 
+onMounted(() => {
+  split.value = Split(['#editor', '#output'], {
+    direction: isVertical.value ? 'vertical' : 'horizontal',
+    sizes: [50, 50],
+  });
+});
+
+watch(isVertical, () => {
+  split.value?.destroy(false, false);
+
+  split.value = Split(['#editor', '#output'], {
+    direction: isVertical.value ? 'vertical' : 'horizontal',
+    sizes: [50, 50],
+  });
+});
+
 const editorOptions = {
   scrollBeyondLastLine: false,
   wordWrap: 'on',
@@ -94,7 +107,7 @@ watch([code, dialect], () => {
     output = `--- ${err?.toString() ?? err}\n`;
   }
 
-  sql.value = output;
+  sql.value = `${output}\n`;
 
   window.history.replaceState(
     null,
@@ -105,7 +118,10 @@ watch([code, dialect], () => {
 </script>
 
 <template>
-  <div class="playground split">
+  <div
+    class="playground split"
+    :class="{ 'split-vertical': isVertical, 'split-horizontal': !isVertical }"
+  >
     <vue-monaco-editor
       id="editor"
       language="typescript"

docs/.vitepress/theme/breakpoint.js

@@ -0,0 +1,28 @@
+import { computed, onMounted, onUnmounted, ref } from 'vue';
+
+/**
+ * @ref https://stackoverflow.com/a/63944126
+ */
+export function useBreakpoints() {
+  let windowWidth = ref(window.innerWidth);
+
+  const onWidthChange = () => (windowWidth.value = window.innerWidth);
+  onMounted(() => window.addEventListener('resize', onWidthChange));
+  onUnmounted(() => window.removeEventListener('resize', onWidthChange));
+
+  /**
+   * @ref https://getbootstrap.com/docs/5.3/layout/breakpoints/#available-breakpoints
+   */
+  const type = computed(() => {
+    if (windowWidth.value < 576) return 'xs';
+    if (windowWidth.value >= 576 && windowWidth.value < 768) return 'sm';
+    if (windowWidth.value >= 768 && windowWidth.value < 992) return 'md';
+    if (windowWidth.value >= 992 && windowWidth.value < 1200) return 'lg';
+    if (windowWidth.value >= 1200 && windowWidth.value < 1400) return 'xl';
+    else return 'xxl'; // Fires when windowWidth.value >= 1400
+  });
+
+  const width = computed(() => windowWidth.value);
+
+  return { width, type };
+}

docs/.vitepress/theme/styles.css

@@ -125,6 +125,11 @@ a.header-anchor {
 
 .split {
   display: flex;
+}
+.split-vertical {
+  flex-direction: column;
+}
+.split-horizontal {
   flex-direction: row;
 }
 .gutter {