From 269302879a1adf782983fe9c6413139c82374f41 Mon Sep 17 00:00:00 2001
From: Alban Mouton <alban.mouton@gmail.com>
Date: Wed, 13 Nov 2024 23:25:29 +0100
Subject: [PATCH] docs: more readable examples

---
 doc/components/vjsf-example.vue | 442 +++++++++++++++++---------------
 doc/layouts/default.vue         |  15 --
 doc/pages/[categoryId]/[id].vue |   1 +
 doc/pages/editor.vue            |  98 ++++---
 doc/plugins/vuetify.ts          |   5 +-
 lib/src/options.js              |   1 -
 6 files changed, 302 insertions(+), 260 deletions(-)

diff --git a/doc/components/vjsf-example.vue b/doc/components/vjsf-example.vue
index b09119af..7aa75e27 100644
--- a/doc/components/vjsf-example.vue
+++ b/doc/components/vjsf-example.vue
@@ -6,19 +6,38 @@
     rounded
     color="transparent"
   >
-    <v-toolbar density="compact">
+    <v-toolbar
+      density="compact"
+      color="surface"
+    >
       <v-btn
         v-for="tabItem in tabs"
         :key="tabItem.value"
         class="text-none font-weight-bold"
         size="small"
-        variant="text"
+        :variant="tab === tabItem.value ? 'flat' : 'text'"
         :active="tab === tabItem.value"
+        :color="tab === tabItem.value ? 'primary' : ''"
         @click="tab = tab === tabItem.value ? null : tabItem.value"
       >
         {{ tabItem.title }}
       </v-btn>
       <v-spacer />
+      <v-btn
+        icon
+        color="primary"
+        class="mr-2"
+        @click="toggleTheme"
+      >
+        <v-icon
+          v-if="theme === 'light'"
+          icon="mdi-weather-night"
+        />
+        <v-icon
+          v-else
+          icon="mdi-weather-sunny"
+        />
+      </v-btn>
       <v-btn
         color="primary"
         icon="mdi-pencil"
@@ -26,234 +45,239 @@
       />
     </v-toolbar>
 
-    <v-divider />
-
-    <v-window
-      v-if="tab"
-      v-model="tab"
-      style="height: 600px;overflow-y: auto;"
+    <v-theme-provider
+      :theme="theme"
+      with-background
     >
-      <v-window-item
-        value="schemaV2"
-        class="ma-3"
-      >
-        <code-block>
-          <pre>{{ JSON.stringify(example.schema, null, 2) }}</pre>
-        </code-block>
-      </v-window-item>
+      <v-divider />
 
-      <v-window-item
-        value="schema"
-        class="ma-3"
+      <v-window
+        v-if="tab"
+        v-model="tab"
+        style="height: 600px;overflow-y: auto;"
       >
-        <code-block>
-          <pre>{{ JSON.stringify(schema, null, 2) }}</pre>
-        </code-block>
-      </v-window-item>
+        <v-window-item
+          value="schemaV2"
+          class="ma-3"
+        >
+          <code-block>
+            <pre>{{ JSON.stringify(example.schema, null, 2) }}</pre>
+          </code-block>
+        </v-window-item>
 
-      <v-window-item
-        value="model"
-        class="ma-3 fill-height"
-      >
-        <code-block v-if="data !== null && data !== undefined">
-          <pre>{{ JSON.stringify(data, null, 2) }}</pre>
-        </code-block>
-      </v-window-item>
+        <v-window-item
+          value="schema"
+          class="ma-3"
+        >
+          <code-block>
+            <pre>{{ JSON.stringify(schema, null, 2) }}</pre>
+          </code-block>
+        </v-window-item>
 
-      <v-window-item
-        value="slots"
-        class="ma-3"
-      >
-        <code-block
-          v-for="key of example.codeSlots"
-          :key="key"
+        <v-window-item
+          value="model"
+          class="ma-3 fill-height"
         >
-          <pre>{{ slotCodes[key] }}</pre>
-        </code-block>
-      </v-window-item>
+          <code-block v-if="data !== null && data !== undefined">
+            <pre>{{ JSON.stringify(data, null, 2) }}</pre>
+          </code-block>
+        </v-window-item>
 
-      <v-window-item
-        value="defaultProps"
-        class="ma-3"
-      >
-        <code-block>
-          <pre>{{ JSON.stringify(example.defaultProps, null, 2) }}</pre>
-        </code-block>
-      </v-window-item>
+        <v-window-item
+          value="slots"
+          class="ma-3"
+        >
+          <code-block
+            v-for="key of example.codeSlots"
+            :key="key"
+          >
+            <pre>{{ slotCodes[key] }}</pre>
+          </code-block>
+        </v-window-item>
 
-      <v-window-item
-        value="options"
-        class="ma-3"
-        style="height: 600px"
-      >
-        <v-row style="height:600px;">
-          <v-col>
-            <v-defaults-provider :defaults="{global: {density: 'compact', color: 'primary', hideDetails: true}}">
-              <v-switch
-                v-model="options.readOnly"
-                label="readOnly"
-              />
+        <v-window-item
+          value="defaultProps"
+          class="ma-3"
+        >
+          <code-block>
+            <pre>{{ JSON.stringify(example.defaultProps, null, 2) }}</pre>
+          </code-block>
+        </v-window-item>
 
-              <v-switch
-                v-model="options.summary"
-                label="summary"
-              />
+        <v-window-item
+          value="options"
+          class="ma-3"
+          style="height: 600px"
+        >
+          <v-row style="height:600px;">
+            <v-col>
+              <v-defaults-provider :defaults="{global: {density: 'compact', color: 'primary', hideDetails: true}}">
+                <v-switch
+                  v-model="options.readOnly"
+                  label="readOnly"
+                />
+
+                <v-switch
+                  v-model="options.summary"
+                  label="summary"
+                />
 
-              <v-switch
-                v-model="options.autofocus"
-                label="autofocus"
-              />
+                <v-switch
+                  v-model="options.autofocus"
+                  label="autofocus"
+                />
 
-              <v-select
-                v-model="options.density"
-                style="max-width:300px;"
-                :items="['default', 'comfortable', 'compact']"
-              />
+                <v-select
+                  v-model="options.density"
+                  style="max-width:300px;"
+                  :items="['default', 'comfortable', 'compact']"
+                />
 
-              <v-switch
-                v-model="options.indent"
-                label="indent"
-              />
+                <v-switch
+                  v-model="options.indent"
+                  label="indent"
+                />
 
-              <v-select
-                v-model="options.titleDepth"
-                label="titleDepth"
-                style="max-width:300px;"
-                :items="[1, 2, 3, 4, 5, 6]"
-              />
+                <v-select
+                  v-model="options.titleDepth"
+                  label="titleDepth"
+                  style="max-width:300px;"
+                  :items="[1, 2, 3, 4, 5, 6]"
+                />
 
-              <v-select
-                v-model="options.validateOn"
-                label="validateOn"
-                style="max-width:300px;"
-                :items="['input', 'blur', 'submit']"
-              />
+                <v-select
+                  v-model="options.validateOn"
+                  label="validateOn"
+                  style="max-width:300px;"
+                  :items="['input', 'blur', 'submit']"
+                />
 
-              <v-select
-                v-model="options.initialValidation"
-                label="initialValidation"
-                style="max-width:300px;"
-                :items="['never', 'withData', 'always']"
-              />
+                <v-select
+                  v-model="options.initialValidation"
+                  label="initialValidation"
+                  style="max-width:300px;"
+                  :items="['never', 'withData', 'always']"
+                />
 
-              <v-select
-                v-model="options.updateOn"
-                label="updateOn"
-                style="max-width:300px;"
-                :items="['input', 'blur']"
-              />
+                <v-select
+                  v-model="options.updateOn"
+                  label="updateOn"
+                  style="max-width:300px;"
+                  :items="['input', 'blur']"
+                />
 
-              <v-select
-                v-model="options.defaultOn"
-                label="defaultOn"
-                style="max-width:300px;"
-                :items="['never', 'missing', 'empty']"
-              />
+                <v-select
+                  v-model="options.defaultOn"
+                  label="defaultOn"
+                  style="max-width:300px;"
+                  :items="['never', 'missing', 'empty']"
+                />
 
-              <v-select
-                v-model="options.removeAdditional"
-                label="removeAdditional"
-                style="max-width:300px;"
-                :items="['unknown', 'error', 'none']"
-              />
+                <v-select
+                  v-model="options.removeAdditional"
+                  label="removeAdditional"
+                  style="max-width:300px;"
+                  :items="['unknown', 'error', 'none']"
+                />
 
-              <v-select
-                v-model="options.readOnlyPropertiesMode"
-                label="readOnlyPropertiesMode"
-                style="max-width:300px;"
-                :items="['remove', 'hide', 'show']"
-              />
+                <v-select
+                  v-model="options.readOnlyPropertiesMode"
+                  label="readOnlyPropertiesMode"
+                  style="max-width:300px;"
+                  :items="['remove', 'hide', 'show']"
+                />
 
-              <v-select
-                v-model="options.locale"
-                label="locale"
-                style="max-width:300px;"
-                :items="['en', 'fr', 'nl']"
-              />
+                <v-select
+                  v-model="options.locale"
+                  label="locale"
+                  style="max-width:300px;"
+                  :items="['en', 'fr', 'nl']"
+                />
 
-              <v-slider
-                v-model="wrapperWidth"
-                :min="0"
-                :max="100"
-                :step="1"
-                label="container width"
-                style="max-width:600px;"
+                <v-slider
+                  v-model="wrapperWidth"
+                  :min="0"
+                  :max="100"
+                  :step="1"
+                  label="container width"
+                  style="max-width:600px;"
+                >
+                  <template #append>
+                    {{ wrapperWidth }} %
+                  </template>
+                </v-slider>
+              </v-defaults-provider>
+              <div
+                v-if="display"
+                class="text-caption ml-2"
               >
-                <template #append>
-                  {{ wrapperWidth }} %
-                </template>
-              </v-slider>
-            </v-defaults-provider>
-            <div
-              v-if="display"
-              class="text-caption ml-2"
-            >
-              width={{ display.width }}px, display={{ display.name }}
-            </div>
-          </v-col>
-          <v-divider vertical />
-          <v-col style="height:600px;overflow-y: auto;">
-            <div class="text-subtitle">
-              Options filled with default values:
-            </div>
-            <code-block>
-              <pre>{{ JSON.stringify(filledOptions, null, 2) }}</pre>
-            </code-block>
-          </v-col>
-        </v-row>
-      </v-window-item>
-    </v-window>
+                width={{ display.width }}px, display={{ display.name }}
+              </div>
+            </v-col>
+            <v-divider vertical />
+            <v-col style="height:600px;overflow-y: auto;">
+              <div class="text-subtitle">
+                Options filled with default values:
+              </div>
+              <code-block>
+                <pre>{{ JSON.stringify(filledOptions, null, 2) }}</pre>
+              </code-block>
+            </v-col>
+          </v-row>
+        </v-window-item>
+      </v-window>
 
-    <v-divider />
+      <v-divider />
 
-    <v-container fluid>
-      <div :style="`width: ${wrapperWidth}%`">
-        <v-form
-          ref="form"
-          v-model="valid"
-        >
-          <v-defaults-provider :defaults="example.defaultProps || {}">
-            <slot
-              name="vjsf"
-              :model-value="data"
-              :options="options"
-              :update-state="updateState"
-              :update-model-value="modelValue => data = modelValue"
-            >
-              <vjsf
-                v-model="data"
-                :schema="schema"
+      <v-container fluid>
+        <div :style="`width: ${wrapperWidth}%`">
+          <v-form
+            ref="form"
+            v-model="valid"
+          >
+            <v-defaults-provider :defaults="example.defaultProps || {}">
+              <slot
+                name="vjsf"
+                :model-value="data"
                 :options="options"
-                @update:state="updateState"
+                :update-state="updateState"
+                :update-model-value="modelValue => data = modelValue"
               >
-                <template #custom-textarea="{node, statefulLayout}">
-                  <textarea
-                    :value="node.data"
-                    style="border: 1px solid red;"
-                    placeholder="A custom textarea"
-                    @input="event => statefulLayout.input(node, event.target.value)"
-                  />
-                </template>
-                <template #custom-message="{node}">
-                  This message is defined in a slot (key={{ node.key }})
-                </template>
-              </vjsf>
-            </slot>
-          </v-defaults-provider>
-          <v-row class="ma-0">
-            <v-spacer />
-            <v-btn
-              :color="validateColor"
-              flat
-              class="ma-2"
-              @click="$refs.form.validate()"
-            >
-              Validate
-            </v-btn>
-          </v-row>
-        </v-form>
-      </div>
-    </v-container>
+                <vjsf
+                  v-model="data"
+                  :schema="schema"
+                  :options="options"
+                  @update:state="updateState"
+                >
+                  <template #custom-textarea="{node, statefulLayout}">
+                    <textarea
+                      :value="node.data"
+                      style="border: 1px solid red;"
+                      placeholder="A custom textarea"
+                      @input="event => statefulLayout.input(node, event.target.value)"
+                    />
+                  </template>
+                  <template #custom-message="{node}">
+                    This message is defined in a slot (key={{ node.key }})
+                  </template>
+                </vjsf>
+              </slot>
+            </v-defaults-provider>
+            <v-row class="ma-0">
+              <v-spacer />
+              <v-btn
+                :color="validateColor"
+                flat
+                class="mt-2"
+                @click="$refs.form.validate()"
+              >
+                Validate
+              </v-btn>
+            </v-row>
+          </v-form>
+        </div>
+      </v-container>
+    </v-theme-provider>
   </v-sheet>
 </template>
 
@@ -261,11 +285,11 @@
 import Vjsf from '@koumoul/vjsf'
 import VjsfMarkdown from '@koumoul/vjsf-markdown'
 import { v2compat } from '@koumoul/vjsf/compat/v2'
-import { VContainer, VRow, VCol, VSpacer, VForm, VBtn, VDivider, VSelect, VSwitch, VToolbar, VSheet, VWindow, VSlider, VWindowItem, VLazy, VDefaultsProvider, VTextField } from 'vuetify/components'
+import { VIcon, VContainer, VRow, VCol, VSpacer, VForm, VBtn, VDivider, VSelect, VSwitch, VToolbar, VSheet, VWindow, VSlider, VWindowItem, VLazy, VDefaultsProvider, VThemeProvider, VTextField } from 'vuetify/components'
 import slotCodes from '../examples/slot-codes.js'
 
 export default {
-  components: { Vjsf, VContainer, VRow, VCol, VSpacer, VForm, VBtn, VDivider, VSelect, VSwitch, VToolbar, VSheet, VWindow, VSlider, VWindowItem, VLazy, VDefaultsProvider, VTextField },
+  components: { Vjsf, VIcon, VContainer, VRow, VCol, VSpacer, VForm, VBtn, VDivider, VSelect, VSwitch, VToolbar, VSheet, VWindow, VSlider, VWindowItem, VLazy, VDefaultsProvider, VThemeProvider, VTextField },
   props: {
     example: {
       /** @type import('vue').PropType<import('../examples/types.js').VJSFExample> */
@@ -304,7 +328,8 @@ export default {
     filledOptions: null,
     wrapperWidth: 100,
     slotCodes,
-    valid: null
+    valid: null,
+    theme: 'light'
   }),
   computed: {
     tabs () {
@@ -361,6 +386,9 @@ export default {
         data: this.data
       }))
       this.$router.push('/editor')
+    },
+    toggleTheme () {
+      this.theme = this.theme === 'light' ? 'dark' : 'light'
     }
   }
 }
diff --git a/doc/layouts/default.vue b/doc/layouts/default.vue
index 2a322cf8..71027ce5 100644
--- a/doc/layouts/default.vue
+++ b/doc/layouts/default.vue
@@ -91,7 +91,6 @@
     <!--<v-app-bar app :color="$vuetify.display.smAndDown ? 'white' : 'transparent'" dense flat>-->
     <v-app-bar
       app
-      density="comfortable"
       :color="theme.global.name.value === 'dark' ? '#121212' : '#FFFFFF'"
       scroll-behavior="elevate"
     >
@@ -107,20 +106,6 @@
         :to-links="true"
       />-->
       <v-spacer />
-      <v-btn
-        icon
-        color="primary"
-        @click="toggleTheme"
-      >
-        <v-icon
-          v-if="theme.global.name.value === 'light'"
-          icon="mdi-weather-night"
-        />
-        <v-icon
-          v-else
-          icon="mdi-weather-sunny"
-        />
-      </v-btn>
       <v-btn
         href="https://github.com/sponsors/koumoul-dev"
         variant="outlined"
diff --git a/doc/pages/[categoryId]/[id].vue b/doc/pages/[categoryId]/[id].vue
index 83203b9a..19f2f613 100644
--- a/doc/pages/[categoryId]/[id].vue
+++ b/doc/pages/[categoryId]/[id].vue
@@ -26,6 +26,7 @@
         flat
         title="open compiled version"
         :to="`/compiled/${examplesCategory.id}/${example.id}`"
+        class="ml-1"
       />
     </h1>
     <v-alert
diff --git a/doc/pages/editor.vue b/doc/pages/editor.vue
index bc5898ff..5b4454ff 100644
--- a/doc/pages/editor.vue
+++ b/doc/pages/editor.vue
@@ -14,7 +14,10 @@
           class="pa-0"
           :style="`max-height: ${height - 8}px;overflow-y: auto;`"
         >
-          <v-toolbar density="compact">
+          <v-toolbar
+            density="compact"
+            color="surface"
+          >
             <v-btn
               v-for="tabItem in codeTabs"
               :key="tabItem.value"
@@ -28,6 +31,21 @@
               {{ tabItem.title }}
             </v-btn>
             <v-spacer />
+            <!--<v-btn
+              icon
+              color="primary"
+              class="mr-2"
+              @click="toggleTheme"
+            >
+              <v-icon
+                v-if="theme === 'light'"
+                icon="mdi-weather-night"
+              />
+              <v-icon
+                v-else
+                icon="mdi-weather-sunny"
+              />
+            </v-btn>-->
           </v-toolbar>
 
           <v-window v-model="codeTab">
@@ -61,42 +79,47 @@
         </v-alert>
       </v-col>
       <v-col>
-        <div :style="`max-height: ${height - 8}px;overflow-y: auto;`">
-          <v-form
-            v-if="vjsfParams"
-            ref="form"
-            v-model="valid"
-            class="mr-4"
+        <v-container :style="`max-height: ${height - 8}px;overflow-y: auto;`">
+          <v-theme-provider
+            :theme="'light'"
+            with-background
           >
-            <vjsf
-              v-model="data"
-              v-bind="vjsfParams"
+            <v-form
+              v-if="vjsfParams"
+              ref="form"
+              v-model="valid"
+              class="mr-4"
             >
-              <template #custom-textarea="{node, statefulLayout}">
-                <textarea
-                  :value="node.data"
-                  style="border: 1px solid red;"
-                  placeholder="A custom textarea"
-                  @input="event => statefulLayout.input(node, event.target.value)"
-                />
-              </template>
-              <template #custom-message="{node}">
-                This message is defined in a slot (key={{ node.key }})
-              </template>
-            </vjsf>
-            <v-row class="ma-0">
-              <v-spacer />
-              <v-btn
-                :color="validateColor"
-                flat
-                class="ma-2"
-                @click="form?.validate()"
+              <vjsf
+                v-model="data"
+                v-bind="vjsfParams"
               >
-                Validate
-              </v-btn>
-            </v-row>
-          </v-form>
-        </div>
+                <template #custom-textarea="{node, statefulLayout}">
+                  <textarea
+                    :value="node.data"
+                    style="border: 1px solid red;"
+                    placeholder="A custom textarea"
+                    @input="event => statefulLayout.input(node, event.target.value)"
+                  />
+                </template>
+                <template #custom-message="{node}">
+                  This message is defined in a slot (key={{ node.key }})
+                </template>
+              </vjsf>
+              <v-row class="ma-0">
+                <v-spacer />
+                <v-btn
+                  :color="validateColor"
+                  flat
+                  class="ma-2"
+                  @click="form?.validate()"
+                >
+                  Validate
+                </v-btn>
+              </v-row>
+            </v-form>
+          </v-theme-provider>
+        </v-container>
       </v-col>
     </v-row>
   </v-container>
@@ -105,7 +128,7 @@
 <script setup>
 import { ref, reactive, computed, watch, onMounted, onUnmounted, markRaw } from 'vue'
 import { watchDebounced, useWindowSize } from '@vueuse/core'
-import { VContainer, VRow, VCol, VSpacer, VForm, VBtn, VAlert, VWindow, VWindowItem, VToolbar } from 'vuetify/components'
+import { VContainer, VRow, VCol, VSpacer, VForm, VBtn, VAlert, VWindow, VWindowItem, VToolbar, VIcon } from 'vuetify/components'
 import yaml from 'yaml'
 import { Vjsf, defaultOptions } from '@koumoul/vjsf'
 import VjsfMarkdown from '@koumoul/vjsf-markdown'
@@ -117,6 +140,7 @@ const schema = ref(null)
 /** @type import('vue').Ref<any | null> */
 const options = ref(null)
 const data = ref(null)
+const theme = ref('light')
 
 onMounted(() => {
   const editorStateStr = window.localStorage.getItem('vjsf-editor-state')
@@ -196,6 +220,10 @@ const validateColor = computed(() => {
   return 'default'
 })
 
+const toggleTheme = () => {
+  theme.value = theme.value === 'light' ? 'dark' : 'light'
+}
+
 useHead({
   title: 'VJSF - Editor'
 })
diff --git a/doc/plugins/vuetify.ts b/doc/plugins/vuetify.ts
index 92eefabb..db0aa7a8 100644
--- a/doc/plugins/vuetify.ts
+++ b/doc/plugins/vuetify.ts
@@ -12,6 +12,7 @@ export default defineNuxtPlugin((nuxtApp) => {
       }
     },
     theme: {
+      defaultTheme: 'dark',
       themes: {
         light: {
           dark: false,
@@ -23,8 +24,8 @@ export default defineNuxtPlugin((nuxtApp) => {
         dark: {
           dark: true,
           colors: {
-            surface: colors.blueGrey.darken4,
-            primary: colors.cyan.lighten4
+            surface: '#000000',
+            primary: colors.cyan.lighten5
           }
         }
       }
diff --git a/lib/src/options.js b/lib/src/options.js
index ea148e90..f5f24d7f 100644
--- a/lib/src/options.js
+++ b/lib/src/options.js
@@ -46,7 +46,6 @@ export const getFullOptions = (options, form, width, globalDefaults, slots, defa
     }
   }
   const icons = { ...options?.icons, ...defaultIcons }
-  console.log('GLOB', globalDefaults)
 
   /** @type {import('./types.js').VjsfOptions} */
   const fullOptions = {