From 5d932bb85e113004dbe9828b3e840d80c4ff2ac9 Mon Sep 17 00:00:00 2001
From: David Wolter <david@dampfer.net>
Date: Mon, 5 Feb 2024 09:53:25 +0100
Subject: [PATCH 1/2] dev: add simple grid layout to the dev app. save example
 name at location hash. show schema and uischema

---
 packages/vue-vanilla/dev/components/App.vue | 167 ++++++++++++++++----
 1 file changed, 132 insertions(+), 35 deletions(-)

diff --git a/packages/vue-vanilla/dev/components/App.vue b/packages/vue-vanilla/dev/components/App.vue
index d4c1f8151..835aaa20c 100644
--- a/packages/vue-vanilla/dev/components/App.vue
+++ b/packages/vue-vanilla/dev/components/App.vue
@@ -48,10 +48,22 @@ export default defineComponent({
       return examples.find((ex) => ex.name === name)!;
     },
   },
+  beforeMount() {
+    const searchURL = new URL(String(window.location));
+    const name = searchURL.hash?.substring(1);
+    const exists = name && examples.find((ex) => ex.name === name);
+    if (name && exists) {
+      this.currentExampleName = name;
+    }
+  },
   methods: {
     onChange(event: JsonFormsChangeEvent) {
       console.log(event);
       this.data = event.data;
+
+      const searchURL = new URL(String(window.location));
+      searchURL.hash = this.currentExampleName;
+      window.history.pushState({}, '', searchURL);
     },
     onExampleChange(event: any) {
       this.currentExampleName = event.target.value;
@@ -60,8 +72,8 @@ export default defineComponent({
       try {
         const input = JSON.parse(event.target.value);
         (this as any).i18n.translate = (
-          key: string,
-          defaultMessage: string | undefined
+            key: string,
+            defaultMessage: string | undefined
         ) => {
           const translated = get(input, key) as string;
           return translated ?? defaultMessage;
@@ -76,54 +88,139 @@ export default defineComponent({
 
 <template>
   <div class="container">
-    <div className="example-selector">
+    <header>
+      <h1>Welcome to JSON Forms with Vue Vanilla</h1>
+      <p>More Forms. Less Code.</p>
+    </header>
+
+    <aside class="example-selector">
+      <div class="data">
+        <details>
+          <summary>data</summary>
+          <textarea readonly
+          >{{ JSON.stringify(data, null, 2) }}
+          </textarea>
+        </details>
+
+        <details>
+          <summary>schema</summary>
+          <textarea readonly
+          >{{ JSON.stringify(example.schema, null, 2) }}
+          </textarea>
+        </details>
+
+        <details>
+          <summary>uischema</summary>
+          <textarea readonly
+          >{{ JSON.stringify(example.uischema, null, 2) }}
+          </textarea>
+        </details>
+
+        <h5>i18n translator</h5>
+        <textarea @change="translationChange"></textarea>
+      </div>
+    </aside>
+
+    <div class="tools">
       <h4>Select Example:</h4>
       <select v-model="currentExampleName" @change="onExampleChange($event)">
         <option
-          v-for="option in examples"
-          :key="option.name"
-          :value="option.name"
-          :label="option.label"
+            v-for="option in examples"
+            :key="option.name"
+            :value="option.name"
+            :label="option.label"
         >
           {{ option.label }}
         </option>
       </select>
-      <div class="data">
-        <h5>data</h5>
-        <pre
-          >{{ JSON.stringify(data, null, 2) }}
-        </pre>
-        <h5>i18n translator</h5>
-        <textarea @change="translationChange"></textarea>
-      </div>
     </div>
 
-    <div class="form">
-      <json-forms
-        :key="example.name"
-        :data="example.data"
-        :schema="example.schema"
-        :uischema="example.uischema"
-        :renderers="renderers"
-        :config="config"
-        :i18n="i18n"
-        :additional-errors="additionalErrors"
-        @change="onChange"
-      >
-      </json-forms>
-    </div>
+    <main class="form">
+      <article>
+        <json-forms
+            :key="example.name"
+            :data="example.data"
+            :schema="example.schema"
+            :uischema="example.uischema"
+            :renderers="renderers"
+            :config="config"
+            :i18n="i18n"
+            :additional-errors="additionalErrors"
+            @change="onChange"
+        >
+        </json-forms>
+      </article>
+    </main>
   </div>
 </template>
 
 <style scoped>
-.form {
-  max-width: 500px;
-  flex: 1;
-}
 .container {
+  display: grid;
+  grid-template-columns: 0 3fr 8fr 0;
+  grid-column-gap: 2rem;
+  grid-row-gap: 1rem;
+  grid-template-areas:
+    'header header header header'
+    '. tools tools .'
+    '. aside main .';
+}
+.container > header {
+  grid-area: header;
+
+  background-color: #00021e;
+  padding: 2rem;
+  color: white;
+  text-align: center;
+}
+.container > aside {
+  grid-area: aside;
+}
+.container > main {
+  grid-area: main;
+}
+.container > .tools {
+  grid-area: tools;
+
   display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+
+aside .data {
+  background-color: white;
+  padding: 2rem;
+}
+aside summary,
+aside h5 {
+  font-size: 0.83em;
+  font-weight: bold;
+  margin: 0 0 1em;
+}
+aside summary {
+  cursor: default;
 }
-.data {
-  flex: 1;
+aside details textarea {
+  background: #eee;
+  width: 100%;
+  border: 0;
+  min-height: 300px;
+  max-height: 500px;
+}
+
+main article {
+  background-color: white;
+  padding: 1rem;
+}
+</style>
+
+
+<style>
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  background: #f3f4fa;
 }
 </style>

From 1a2ada70cce254baee408dbe8e4ce5bcc4b10ecd Mon Sep 17 00:00:00 2001
From: David Wolter <david@dampfer.net>
Date: Tue, 6 Feb 2024 10:14:06 +0100
Subject: [PATCH 2/2] fix: call lint-fix and replace textarea with pre

---
 packages/vue-vanilla/dev/components/App.vue | 54 ++++++++++-----------
 1 file changed, 27 insertions(+), 27 deletions(-)

diff --git a/packages/vue-vanilla/dev/components/App.vue b/packages/vue-vanilla/dev/components/App.vue
index 835aaa20c..19240661d 100644
--- a/packages/vue-vanilla/dev/components/App.vue
+++ b/packages/vue-vanilla/dev/components/App.vue
@@ -72,8 +72,8 @@ export default defineComponent({
       try {
         const input = JSON.parse(event.target.value);
         (this as any).i18n.translate = (
-            key: string,
-            defaultMessage: string | undefined
+          key: string,
+          defaultMessage: string | undefined
         ) => {
           const translated = get(input, key) as string;
           return translated ?? defaultMessage;
@@ -97,23 +97,23 @@ export default defineComponent({
       <div class="data">
         <details>
           <summary>data</summary>
-          <textarea readonly
-          >{{ JSON.stringify(data, null, 2) }}
-          </textarea>
+          <pre
+            >{{ JSON.stringify(data, null, 2) }}
+          </pre>
         </details>
 
         <details>
           <summary>schema</summary>
-          <textarea readonly
-          >{{ JSON.stringify(example.schema, null, 2) }}
-          </textarea>
+          <pre
+            >{{ JSON.stringify(example.schema, null, 2) }}
+          </pre>
         </details>
 
         <details>
           <summary>uischema</summary>
-          <textarea readonly
-          >{{ JSON.stringify(example.uischema, null, 2) }}
-          </textarea>
+          <pre
+            >{{ JSON.stringify(example.uischema, null, 2) }}
+          </pre>
         </details>
 
         <h5>i18n translator</h5>
@@ -125,10 +125,10 @@ export default defineComponent({
       <h4>Select Example:</h4>
       <select v-model="currentExampleName" @change="onExampleChange($event)">
         <option
-            v-for="option in examples"
-            :key="option.name"
-            :value="option.name"
-            :label="option.label"
+          v-for="option in examples"
+          :key="option.name"
+          :value="option.name"
+          :label="option.label"
         >
           {{ option.label }}
         </option>
@@ -138,15 +138,15 @@ export default defineComponent({
     <main class="form">
       <article>
         <json-forms
-            :key="example.name"
-            :data="example.data"
-            :schema="example.schema"
-            :uischema="example.uischema"
-            :renderers="renderers"
-            :config="config"
-            :i18n="i18n"
-            :additional-errors="additionalErrors"
-            @change="onChange"
+          :key="example.name"
+          :data="example.data"
+          :schema="example.schema"
+          :uischema="example.uischema"
+          :renderers="renderers"
+          :config="config"
+          :i18n="i18n"
+          :additional-errors="additionalErrors"
+          @change="onChange"
         >
         </json-forms>
       </article>
@@ -157,7 +157,7 @@ export default defineComponent({
 <style scoped>
 .container {
   display: grid;
-  grid-template-columns: 0 3fr 8fr 0;
+  grid-template-columns: 0 30% auto 0;
   grid-column-gap: 2rem;
   grid-row-gap: 1rem;
   grid-template-areas:
@@ -201,12 +201,12 @@ aside h5 {
 aside summary {
   cursor: default;
 }
-aside details textarea {
+aside details pre {
   background: #eee;
-  width: 100%;
   border: 0;
   min-height: 300px;
   max-height: 500px;
+  overflow: scroll;
 }
 
 main article {