@ederzeel/nuxt-schema-form-nightly 0.1.0-28989865.c565459 → 0.1.0-28997068.dca840d

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ederzeel/nuxt-schema-form-nightly",
-  "version": "0.1.0-28989865.c565459",
+  "version": "0.1.0-28997068.dca840d",
   "description": "A runtime form generator for nuxt",
   "main": "./dist/module.cjs",
   "types": "./dist/module.d.ts",

package/playground/components/Editor.vue

@@ -0,0 +1,44 @@
+<script lang="ts" setup>
+// import formSchema from '@/assets/schema.json'
+import { Draft2019 } from 'json-schema-library'
+import { computed } from 'vue'
+
+const props = defineProps<{
+  schema: Record<string, unknown>
+}>()
+
+const colorMode = useColorMode()
+const schemaString = ref(JSON.stringify(props.schema, null, 2))
+const error = ref()
+const schemaObject = ref(new Draft2019(JSON.parse(schemaString.value)))
+const schema = ref(schemaObject.value.rootSchema)
+const state = ref(schemaObject.value.getTemplate())
+
+const monacoOptions = computed(() => ({
+  minimap: { enabled: false },
+  theme: colorMode.value === 'dark' ? 'vs-dark' : 'vs-light',
+  contextmenu: false,
+  lineNumbers: 'off',
+  scrollBeyondLastLine: false
+}))
+</script>
+
+<template>
+  <div class="w-full gap-10 flex">
+    <div
+      class="w-1/2 h-[80vh] rounded-md ring-1 focus:ring-2 ring-gray-300 dark:ring-gray-700 overflow-hidden shadow-sm"
+    >
+      <MonacoEditor v-model="schemaString" :options="monacoOptions" lang="json" class="h-full rounded-md" />
+      <!-- <UFormGroup :error="error"> -->
+      <!--   <UTextarea v-model="schemaString" @update:model-value="onUpdate" :rows="25" class="w-full" /> -->
+      <!-- </UFormGroup> -->
+    </div>
+    <div class="w-1/2">
+      <SForm v-if="schema && error == null" v-model="state" :schema="schema">
+        <template #submit>
+          {{ undefined }}
+        </template>
+      </SForm>
+    </div>
+  </div>
+</template>

package/playground/components/TestForm.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="w-full flex justify-center">
+    <div class="w-full max-w-[800px]">
+      <SForm v-if="schema" v-model="state" :schema="schema" @submit="onSubmit">
+        <template #submit>
+          {{ undefined }}
+        </template>
+      </SForm>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { type JsonSchema } from 'json-schema-library'
+const props = defineProps<{
+  state: { [key: string]: unknown }
+  schema: JsonSchema
+}>()
+const state = ref(props.state)
+
+const onSubmit = (value: unknown) => {
+  console.log(value)
+}
+</script>

package/playground/nuxt.config.ts

@@ -1,13 +1,13 @@
 // https://nuxt.com/docs/api/configuration/nuxt-config
 export default defineNuxtConfig({
-  modules: ['../src/module', '@nuxt/ui'],
+  modules: ["../src/module", "@nuxt/ui", "nuxt-monaco-editor"],
   components: {
     global: true,
-    dirs: ['@/components']
+    dirs: ["@/components"],
   },
   devtools: { enabled: true },
   colorMode: {
-    preference: 'light'
+    preference: "light",
   },
-  compatibilityDate: '2025-01-31'
-})
+  compatibilityDate: "2025-01-31",
+});

package/playground/package.json

@@ -1,8 +1,10 @@
 {
 	"dependencies": {
+		"@ederzeel/nuxt-schema-form": "../",
 		"@nuxt/ui": "^2.21.0",
+		"monaco-editor": "*",
 		"nuxt": "^3.15.4",
-		"@ederzeel/nuxt-schema-form": "../",
+		"nuxt-monaco-editor": "1.3.1",
 		"reka-ui": "1.0.0-alpha.9"
 	}
 }

package/playground/pages/index.vue

@@ -1,17 +1,11 @@
 <template>
   <div class="w-full flex justify-center">
-    <div class="w-full max-w-[800px]">
-      <ColorMode />
-      <SForm
-        v-if="schema"
-        v-model="state"
-        :schema="schema"
-        @submit="onSubmit"
-      >
-        <template #submit>
-          {{ undefined }}
-        </template>
-      </SForm>
+    <div class="w-full max-w-[1200px] p-10">
+      <div class="pb-10 flex place-content-between">
+        <h1>Demo</h1>
+        <ColorMode />
+      </div>
+      <Editor :schema="schema" />
     </div>
   </div>
 </template>
@@ -19,12 +13,8 @@
 <script lang="ts" setup>
 import ColorMode from '@/components/ColorMode.vue'
 import formSchema from '@/assets/schema.json'
-import { Draft2019 } from 'json-schema-library'
 
-const parsedSchema = new Draft2019(formSchema)
-
-const schema = ref(parsedSchema.rootSchema)
-const state = ref(parsedSchema.getTemplate())
+const schema = ref(formSchema)
 
 const onSubmit = (value: unknown) => {
   console.log(value)

package/playground/plugins/monaco-editor.js

@@ -0,0 +1,19 @@
+// import { defineNuxtPlugin } from "#app";
+// import * as monaco from "monaco-editor";
+//
+export default defineNuxtPlugin(() => {
+  //   monaco.editor.defineTheme("myCustomTheme", {
+  //     base: "vs-dark", // Base theme can be 'vs', 'vs-dark', or 'hc-black'
+  //     inherit: true, // Inherit rules from the base theme
+  //     rules: [
+  //       { token: "comment", foreground: "ffa500" },
+  //       { token: "keyword", foreground: "008800", fontStyle: "bold" },
+  //       // Add more rules as needed
+  //     ],
+  //     colors: {
+  //       "editor.background": "#1e1e1e",
+  //       "editor.foreground": "#d4d4d4",
+  //       // Add more colors as needed
+  //     },
+  //   });
+});

package/src/runtime/components/SComponent.vue

@@ -12,13 +12,13 @@ export type SComponentProps = {
   type: string
   properties?: Properties
   enum?: string[]
-  description?: string[]
+  description?: string
   jsonSchemaPath: string
   validateFields: (fields: string[]) => Promise<boolean>
 }
 
 const props = defineProps<SComponentProps>()
-const value = defineModel<unknown>({ required: true })
+const value = defineModel<unknown>({ required: true, default: '' })
 
 const options = computed(() => ({
   ...props,
@@ -35,23 +35,9 @@ const options = computed(() => ({
       v-model="value"
     />
 
-    <SInputField
-      v-else-if="type === 'string'"
-      v-bind="options"
-      v-model="value"
-    />
-    <SToggle
-      v-else-if="type === 'boolean'"
-      v-bind="options"
-      v-model="value"
-    />
-    <SObject
-      v-else-if="type === 'object'"
-      v-bind="options"
-      v-model="value"
-    />
-    <div v-else>
-      else
-    </div>
+    <SInputField v-else-if="type === 'string'" v-bind="options" v-model="value" />
+    <SToggle v-else-if="type === 'boolean'" v-bind="options" v-model="value" />
+    <SObject v-else-if="type === 'object'" v-bind="options" v-model="value" />
+    <div v-else>else</div>
   </div>
 </template>