Merge pull request #30 from QuickFlo/validation-aggressive-fix

fix validation in nested onof

Author: zeejers

docs/guide/components.md

@@ -573,6 +573,39 @@ const formOptions = {
 
 Note: `componentDefaults.keyvalue` and `x-quasar-props` accept any native Quasar QInput props and apply them to both the key and value input fields.
 
+### Type Inference
+
+By default, all values are stored as strings. Enable `inferTypes` to automatically convert values to their appropriate types:
+
+- `"123"` → `123` (number)
+- `"12.5"` → `12.5` (number)
+- `"true"` / `"false"` → `true` / `false` (boolean)
+- `"null"` → `null`
+- Template expressions like <code v-pre>{{ path }}</code> stay as strings (resolved at runtime)
+
+**Via schema:**
+```typescript
+{
+  type: 'object',
+  title: 'Configuration',
+  additionalProperties: { type: 'string' },
+  'x-infer-types': true
+}
+```
+
+**Via componentDefaults:**
+```typescript
+const options = {
+  quickformsDefaults: {
+    keyvalue: {
+      inferTypes: true
+    }
+  }
+}
+```
+
+This is useful when your backend expects typed values (numbers, booleans) rather than strings.
+
 ---
 
 ## JsonLogicBuilderField

packages/core/package.json

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

packages/quasar/package.json

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

packages/quasar/src/components/QuasarObjectField.vue

@@ -52,6 +52,17 @@ const showOptionalIndicator = computed(() => {
   return objectDefaults?.showOptionalIndicator ?? true;
 });
 
+// Section border style
+const sectionStyle = computed(() => {
+  const objectDefaults = formContext?.componentDefaults?.object;
+  return objectDefaults?.sectionStyle ?? 'solid';
+});
+
+// Computed class for section style
+const sectionStyleClass = computed(() => {
+  return `quickform-section-${sectionStyle.value}`;
+});
+
 const quasarProps = computed(() => {
   const xQuasarProps = (props.schema as any)["x-quasar-props"] || {};
   const xComponentProps = (props.schema as any)["x-component-props"] || {};
@@ -72,29 +83,27 @@ const properties = computed(() => {
 </script>
 
 <template>
-  <div :style="{ marginBottom: fieldGap }">
+  <div :style="{ marginBottom: fieldGap }" class="quickform-object-field" :class="sectionStyleClass">
     <QExpansionItem
       :id="fieldId"
       :label="label"
       :caption="hint"
       :default-opened="defaultOpened"
+      header-class="quickform-object-header"
+      expand-icon-class="text-grey-7"
       v-bind="quasarProps"
     >
       <template #header>
-        <div class="text-subtitle1">
+        <div class="quickform-object-header-content">
           {{ label }}
-          <span v-if="required" style="color: red; margin-left: 0.25rem"
-            >*</span
-          >
-          <span
-            v-if="!required && showOptionalIndicator"
-            style="color: #888; font-size: 0.75rem; margin-left: 0.5rem"
-            >(optional)</span
-          >
+          <span v-if="required" class="quickform-required-indicator">*</span>
+          <span v-if="!required && showOptionalIndicator" class="quickform-optional-indicator">
+            (optional)
+          </span>
         </div>
       </template>
 
-      <div style="padding: 1rem">
+      <div class="quickform-object-content">
         <FieldRenderer
           v-for="prop in properties"
           :key="prop.key"
@@ -104,13 +113,70 @@ const properties = computed(() => {
           :readonly="readonly"
         />
 
-        <div
-          v-if="errorMessage"
-          style="color: red; font-size: 0.875rem; margin-top: 0.5rem"
-        >
+        <div v-if="errorMessage" class="quickform-error-message">
           {{ errorMessage }}
         </div>
       </div>
     </QExpansionItem>
   </div>
 </template>
+
+<style scoped>
+.quickform-object-field {
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.quickform-object-field :deep(.quickform-object-header) {
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #e0e0e0;
+  font-weight: 500;
+}
+
+/* Section style: solid (default) */
+.quickform-object-field.quickform-section-solid :deep(.q-expansion-item__content) {
+  border-left: 3px solid #e0e0e0;
+  margin-left: 8px;
+}
+
+/* Section style: dashed */
+.quickform-object-field.quickform-section-dashed :deep(.q-expansion-item__content) {
+  border-left: 2px dashed #ccc;
+  margin-left: 8px;
+}
+
+/* Section style: none */
+.quickform-object-field.quickform-section-none :deep(.q-expansion-item__content) {
+  border-left: none;
+  margin-left: 0;
+}
+
+.quickform-object-header-content {
+  font-size: 0.95rem;
+  font-weight: 500;
+  color: #333;
+}
+
+.quickform-required-indicator {
+  color: #c10015;
+  margin-left: 0.25rem;
+}
+
+.quickform-optional-indicator {
+  color: #888;
+  font-size: 0.75rem;
+  font-weight: 400;
+  margin-left: 0.5rem;
+}
+
+.quickform-object-content {
+  padding: 1rem;
+  padding-left: 1.25rem;
+}
+
+.quickform-error-message {
+  color: #c10015;
+  font-size: 0.875rem;
+  margin-top: 0.5rem;
+}
+</style>

packages/quasar/src/components/QuasarOneOfField.vue

@@ -21,6 +21,7 @@ const props = withDefaults(defineProps<FieldProps>(), {
 
 const {
   value,
+  setValue,
   label,
   hint,
   errorMessage,
@@ -44,16 +45,42 @@ const options = computed(() => props.schema.oneOf || props.schema.anyOf || []);
 // Selected option index
 const selectedIndex = ref(0);
 
-// Try to determine initial selection based on data
+// Try to determine initial selection based on data and initialize defaults
 onMounted(() => {
-  if (value.value) {
+  let initialIndex = 0;
+  
+  if (value.value && typeof value.value === 'object' && Object.keys(value.value).length > 0) {
+    // Find matching schema based on existing data
     const index = options.value.findIndex((optionSchema) => {
       const result = schemaUtils.validate(optionSchema, value.value);
       return result.valid;
     });
 
     if (index !== -1) {
-      selectedIndex.value = index;
+      initialIndex = index;
+    }
+  }
+  
+  selectedIndex.value = initialIndex;
+  
+  // Initialize default values for the selected schema
+  // This ensures fields exist even if the form starts empty
+  const initialSchema = options.value[initialIndex];
+  if (initialSchema && initialSchema.properties) {
+    const currentValue = (value.value && typeof value.value === 'object') ? value.value : {};
+    const defaults = schemaUtils.getDefaultValue(initialSchema);
+    
+    // Only proceed if defaults is a valid object
+    if (defaults && typeof defaults === 'object') {
+      // Merge defaults with current value
+      const merged = { ...defaults, ...currentValue };
+      
+      // Only update if we're adding new fields (don't overwrite existing)
+      const hasNewFields = Object.keys(defaults).some(key => !(key in currentValue));
+      if (hasNewFields && setValue) {
+        // Pass false to skip validation during initialization
+        setValue(merged, false);
+      }
     }
   }
 });
@@ -177,7 +204,25 @@ const filterFn = (val: string, update: (fn: () => void) => void) => {
 // Handle manual switch
 const handleOptionChange = (newIndex: number) => {
   selectedIndex.value = newIndex;
-  // Keep existing value to allow common fields to persist
+  
+  // Initialize default values for the new schema's fields
+  // This ensures fields exist even if user never touches them (e.g., empty string for 'value')
+  const newSchema = options.value[newIndex];
+  if (newSchema && newSchema.properties) {
+    const currentValue = (value.value && typeof value.value === 'object') ? value.value : {};
+    const defaults = schemaUtils.getDefaultValue(newSchema);
+    
+    // Only proceed if defaults is a valid object
+    if (defaults && typeof defaults === 'object') {
+      // Merge defaults with current value, preferring current values for common fields
+      const merged = { ...defaults, ...currentValue };
+      
+      // Update form value - skip validation during option switch
+      if (setValue) {
+        setValue(merged, false);
+      }
+    }
+  }
 };
 
 </script>

packages/quasar/src/types.ts

@@ -51,6 +51,13 @@ interface VueComponentDefaults {
     defaultExpanded?: "required-only" | "all" | "none";
     /** Show "(optional)" indicator for optional object fields. Default: true */
     showOptionalIndicator?: boolean;
+    /**
+     * Visual style for object section borders.
+     * 'solid' = solid left border (default)
+     * 'dashed' = dashed left border
+     * 'none' = no border
+     */
+    sectionStyle?: "solid" | "dashed" | "none";
   };
   number?: {
     prefix?: string;

packages/vue/package.json

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

packages/vue/src/composables/useFormField.ts

@@ -276,6 +276,12 @@ export function useFormField(
     }
   );
 
+  // Initialize string fields to empty string if undefined
+  // This ensures empty text fields are saved as "" not undefined/missing
+  if (schema.type === "string" && value.value === undefined) {
+    setValue("", false);  // Skip validation during initialization
+  }
+
   // Computed label from override or schema
   const label = computed(() => {
     if (options.label !== undefined) return options.label;