jsoneditor

Author: zeejers

docs/guide/components.md

@@ -305,6 +305,105 @@ Renders nested object fields.
 
 ---
 
+## JsonField
+
+Renders a JSON editor for freeform object configuration.
+
+### Handles
+
+- `type: 'object'` with `additionalProperties` but no defined `properties`
+- Any field with `x-render: 'jsoneditor'`
+
+### Example Schema
+
+**Auto-detected (freeform object):**
+```typescript
+{
+  type: 'object',
+  title: 'Custom Configuration',
+  description: 'Freeform JSON object',
+  additionalProperties: {}
+}
+```
+
+**Explicit via x-render:**
+```typescript
+{
+  type: 'object',
+  title: 'API Settings',
+  description: 'Configuration in JSON format',
+  'x-render': 'jsoneditor',
+  'x-rows': 10  // Control textarea height
+}
+```
+
+**With custom props (Quasar):**
+```typescript
+{
+  type: 'object',
+  title: 'Metadata',
+  'x-render': 'jsoneditor',
+  'x-rows': 8,
+  'x-quasar-props': {
+    dense: false,
+    color: 'secondary'
+  },
+  'x-quickforms-quasar': {
+    prependIcon: 'settings',
+    iconColor: 'primary',
+    showFormatHint: false  // Hide info icon
+  }
+}
+```
+
+**Hide format hint (Vue):**
+```typescript
+{
+  type: 'object',
+  'x-render': 'jsoneditor',
+  'x-show-format-hint': false  // Hide info icon
+}
+```
+
+### Features
+
+- **Tab indentation**: Press Tab to insert 2 spaces
+- **Format shortcut**: Press Ctrl+Space to auto-format JSON
+- **Real-time validation**: Shows parse errors as you type
+- **Monospace font**: Better readability for JSON
+- **Info icon**: Hover tooltip showing format shortcut (can be hidden)
+- **No auto-formatting**: Only formats on initial load or manual trigger
+
+### Keyboard Shortcuts
+
+- **Ctrl+Space**: Format JSON with proper indentation
+- **Tab**: Insert 2 spaces for indentation
+- **Enter**: Insert new line (does not submit form)
+
+### Configuration
+
+**Global defaults (Quasar):**
+```typescript
+const formOptions = {
+  componentDefaults: {
+    jsoneditor: {
+      dense: true,
+      color: 'primary',
+      rows: 12
+    }
+  },
+  quickformsDefaults: {
+    jsoneditor: {
+      prependIcon: 'code',
+      iconColor: 'grey-7',
+      showFormatHint: true  // Default: true
+    }
+  }
+}
+```
+
+---
+
 ## ArrayField
 
 Renders dynamic array fields with add/remove buttons.

packages/core/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quickflo/quickforms",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Framework-agnostic core for QuickForms - JSON Schema form generator",
   "type": "module",
   "main": "./dist/index.js",

packages/quasar/dev/App.vue

@@ -362,15 +362,20 @@ const schema: JSONSchema = {
       "x-rows": 8,
     },
 
-    // === JSON EDITOR (EXPLICIT) ===
+    // === JSON EDITOR (EXPLICIT WITH CUSTOMIZATION) ===
     metadata: {
       type: "object",
       title: "Metadata",
-      description: "Explicit JSON editor via x-render extension",
+      description: "Explicit JSON editor via x-render extension with custom props",
       "x-render": "jsoneditor",
       "x-rows": 6,
       "x-quasar-props": {
         dense: false,
+        color: "secondary",
+      },
+      "x-quickforms-quasar": {
+        prependIcon: "settings",
+        iconColor: "primary",
       },
     },
 

packages/quasar/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quickflo/quickforms-quasar",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Quasar UI components for QuickForms - JSON Schema form generator",
   "type": "module",
   "main": "./dist/index.js",

packages/quasar/src/components/QuasarJsonField.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
 import { computed, ref, watch } from 'vue';
-import { QInput } from 'quasar';
-import { useFormField, generateFieldId } from '@quickflo/quickforms-vue';
+import { QInput, QIcon } from 'quasar';
+import { useFormField, generateFieldId, useFormContext } from '@quickflo/quickforms-vue';
 import type { FieldProps } from '@quickflo/quickforms-vue';
+import type { QuasarFormOptions } from '../types';
 
 const props = withDefaults(defineProps<FieldProps>(), {
   disabled: false,
@@ -15,6 +16,8 @@ const { value, setValue, label, hint, errorMessage, required } = useFormField(
   { label: props.label }
 );
 
+const formContext = useFormContext<QuasarFormOptions>();
+
 const fieldId = generateFieldId(props.path);
 
 // Local text state for JSON editing
@@ -103,11 +106,30 @@ function handleKeyDown(event: KeyboardEvent) {
 
 const displayError = computed(() => parseError.value || errorMessage.value);
 
-// Get Quasar-specific props
+// Get Quasar-specific props with defaults
 const quasarProps = computed(() => {
+  const globalDefaults = formContext?.componentDefaults?.global || {};
+  const jsonEditorDefaults = formContext?.componentDefaults?.jsoneditor || {};
   const xQuasarProps = (props.schema as any)['x-quasar-props'] || {};
   const xComponentProps = (props.schema as any)['x-component-props'] || {};
-  return { ...xComponentProps, ...xQuasarProps };
+  
+  // Merge in order: global defaults < jsoneditor defaults < schema-specific props
+  return { ...globalDefaults, ...jsonEditorDefaults, ...xComponentProps, ...xQuasarProps };
+});
+
+// Get QuickForms-specific features (icons, etc.)
+const quickformsFeatures = computed(() => {
+  const globalFeatures = formContext?.quickformsDefaults?.global || {};
+  const jsonEditorFeatures = formContext?.quickformsDefaults?.jsoneditor || {};
+  const xQuickformsQuasar = (props.schema as any)['x-quickforms-quasar'] || {};
+  
+  // Merge in order: global < jsoneditor < schema-specific
+  return { ...globalFeatures, ...jsonEditorFeatures, ...xQuickformsQuasar };
+});
+
+// Whether to show the format hint icon (default: true)
+const showFormatHint = computed(() => {
+  return quickformsFeatures.value.showFormatHint !== false;
 });
 
 // Get rows from schema or default
@@ -116,44 +138,90 @@ const rows = computed(() => {
   return xRows !== undefined ? xRows : 8;
 });
 
-// Enhanced hint with format shortcut info
-const enhancedHint = computed(() => {
-  const formatHint = 'Press Ctrl+Space to format';
-  return hint.value ? `${hint.value} • ${formatHint}` : formatHint;
-});
 </script>
 
 <template>
-  <QInput
-    :id="fieldId"
-    :model-value="jsonText"
-    :label="label"
-    :hint="enhancedHint"
-    :error="!!displayError"
-    :error-message="displayError || undefined"
-    :disable="disabled"
-    :readonly="readonly"
-    :rules="[() => !displayError || displayError]"
-    type="textarea"
-    :rows="rows"
-    outlined
-    dense
-    class="quickform-json-field"
-    input-class="quickform-json-editor"
-    input-style="font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; font-size: 0.813rem; line-height: 1.5;"
-    placeholder="{}"
-    v-bind="quasarProps"
-    @update:model-value="handleInput"
-    @keydown="handleKeyDown"
-  >
-    <template v-if="required" #label>
-      {{ label }} <span style="color: red; margin-left: 0.25rem">*</span>
-    </template>
-  </QInput>
+  <div class="quickform-json-field-wrapper">
+    <div v-if="label" class="quickform-label-header">
+      <span class="quickform-label-text">
+        {{ label }}
+        <span v-if="required" style="color: red; margin-left: 0.25rem">*</span>
+      </span>
+      <span v-if="showFormatHint" class="quickform-info-icon" title="Press Ctrl+Space to format JSON">ⓘ</span>
+    </div>
+    <QInput
+      :id="fieldId"
+      :model-value="jsonText"
+      :hint="hint"
+      :error="!!displayError"
+      :error-message="displayError || undefined"
+      :disable="disabled"
+      :readonly="readonly"
+      :rules="[() => !displayError || displayError]"
+      type="textarea"
+      :rows="rows"
+      outlined
+      dense
+      class="quickform-json-field"
+      input-class="quickform-json-editor"
+      input-style="font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace; font-size: 0.813rem; line-height: 1.5;"
+      placeholder="{}"
+      v-bind="quasarProps"
+      @update:model-value="handleInput"
+      @keydown="handleKeyDown"
+    >
+      <template v-if="quickformsFeatures.prependIcon" #prepend>
+        <QIcon
+          :name="quickformsFeatures.prependIcon"
+          :color="quickformsFeatures.iconColor || 'grey-7'"
+          :size="quickformsFeatures.iconSize || 'sm'"
+        />
+      </template>
+      <template v-if="quickformsFeatures.appendIcon" #append>
+        <QIcon
+          :name="quickformsFeatures.appendIcon"
+          :color="quickformsFeatures.iconColor || 'grey-7'"
+          :size="quickformsFeatures.iconSize || 'sm'"
+        />
+      </template>
+    </QInput>
+  </div>
 </template>
 
 <style scoped>
-.quickform-json-field :deep(.quickform-json-editor) {
+.quickform-json-field-wrapper {
+  width: 100%;
+}
+
+.quickform-label-header {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  margin-bottom: 0.5rem;
+}
+
+.quickform-label-text {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.87);
+}
+
+.quickform-info-icon {
+  font-size: 0.875rem;
+  color: rgba(0, 0, 0, 0.54);
+  cursor: help;
+  opacity: 0.7;
+  transition: opacity 0.2s;
+  line-height: 1;
+  display: flex;
+  align-items: center;
+}
+
+.quickform-info-icon:hover {
+  opacity: 1;
+}
+
+.quickform-json-field-wrapper :deep(.quickform-json-editor) {
   font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', 'Consolas', 'source-code-pro', monospace;
   font-size: 0.813rem;
   line-height: 1.5;

packages/quasar/src/types.ts

@@ -116,6 +116,9 @@ export interface QuasarComponentDefaults extends VueComponentDefaults {
 
   /** QExpansionItem-specific defaults (for objects) */
   expansion?: Partial<QExpansionItemProps>;
+
+  /** QInput textarea-specific defaults (for JSON editor) */
+  jsoneditor?: Partial<QInputProps>;
 }
 
 /**
@@ -134,6 +137,11 @@ export interface QuickFormsQuasarDefaults {
   datetime?: QuickFormsQuasarFeatures;
   /** Array-specific QuickForms features */
   array?: QuickFormsQuasarArrayFeatures;
+  /** JSON editor-specific QuickForms features */
+  jsoneditor?: QuickFormsQuasarFeatures & {
+    /** Show the info icon with format shortcut hint. Default: true */
+    showFormatHint?: boolean;
+  };
 }
 
 /**

packages/vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quickflo/quickforms-vue",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Vue 3 bindings for QuickForms - JSON Schema form generator",
   "type": "module",
   "main": "./dist/index.js",