@formique/semantq 1.1.1 → 1.1.2

package/astToFormique.js

@@ -642,7 +642,6 @@ getOptionValuesByKey(attributes, targetKey) {
 
 
 buildDynamicSingleSelect(node, rawFieldName) {
-
     const cleanString = this.cleanFieldName(rawFieldName);
     const fieldName = cleanString.input_name;
 
@@ -661,7 +660,6 @@ buildDynamicSingleSelect(node, rawFieldName) {
         inputParams = { validations: {}, attributes: {} }
     }
 
-
     validations = inputParams.validations;
     attributes = inputParams.attributes;
 
@@ -669,47 +667,37 @@ buildDynamicSingleSelect(node, rawFieldName) {
         validations['required'] = true;
     }
 
-    // 1. CRITICAL FIX: Extract 'options' (main dropdown values) from attributes and store separately (Index 5).
+    // Extract 'options' (main dropdown values)
     if (attributes.options) {
         mainSelectOptions = attributes.options;
         delete attributes.options;
     }
 
-    // Since the AST is now clean, we assume the only remaining attributes are standard HTML attributes (or empty {}).
-    // The previous workaround for fragmented 'South' and 'Africa' keys is now removed.
-
-    // Push Schema Elements (Index 3 and 4)
     fieldSchema.push(validations); // Index 3
-    fieldSchema.push(attributes); // Index 4 (Should be {} if no HTML attributes were defined)
-
+    fieldSchema.push(attributes); // Index 4
 
-    /// NOW BUILD SCENARIO (SUB-OPTIONS) BLOCKS (Index 6)
-
-    // optionValues retrieves all unique keys that are NOT 'options'
+    // Build scenario blocks (Index 6)
     const optionValues = this.extractOptionValues(node.attributes);
     let scenarioBlocks = [];
 
-
     if (optionValues.length > 0) {
         optionValues.forEach(option => {
-
             let schema = {};
-            const lowerCaseOption = option.toLowerCase();
-
-            // Set the ID/label for the scenario block
-            schema['id'] = option; //lowerCaseOption;
+            
+            // Use the original option string as the ID
+            schema['id'] = option;
             schema['label'] = option;
 
-            // Use the option string directly as the attribute key for lookup (e.g., 'South Africa' -> 'South Africa')
-            const attributeKey = option; 
-            
-            /// Add sub-options now
-            const keyOptions = this.getOptionValuesByKey(node.attributes, attributeKey);
+            // Get sub-options for this category
+            const keyOptions = this.getOptionValuesByKey(node.attributes, option);
             let options = [];
 
             if (keyOptions.length > 0) {
                 keyOptions.forEach(subOption => {
-                    options.push({ value: subOption.toLowerCase(), label: this.toTitleCase(subOption) })
+                    options.push({ 
+                        value: subOption.toLowerCase(), 
+                        label: this.toTitleCase(subOption) 
+                    });
                 });
                 schema['options'] = options;
                 scenarioBlocks.push(schema);
@@ -717,15 +705,9 @@ buildDynamicSingleSelect(node, rawFieldName) {
         });
     }
 
+    fieldSchema.push(mainSelectOptions); // Index 5
+    fieldSchema.push(scenarioBlocks); // Index 6
 
-    // 3. PUSH MAIN OPTIONS: Add the main select options list (Index 5)
-    fieldSchema.push(mainSelectOptions);
-
-    // 4. PUSH SCENARIO BLOCKS: Add the list of scenario blocks (Index 6)
-    fieldSchema.push(scenarioBlocks);
-
-
-    // 5. Final push to the form schema
     this.formSchema.push(fieldSchema);
 }
 
@@ -958,6 +940,7 @@ buildField(node) {
 
   // 5. Finalize Schema
   this.formSchema.push(fieldSchema);
+  console.log("formSchema", JSON.stringify(this.formSchema,null,2));
 }
 
 

package/formique-semantq.js

@@ -782,51 +782,47 @@ renderForm() {
 
  // renderField method - No change needed here for this issue, but ensure it handles 'submit' type correctly if called directly
     renderField(type, name, label, validate, attributes, options, subOptions = undefined) {
-        const fieldRenderMap = {
-            'text': this.renderTextField,
-            'email': this.renderEmailField,
-            'number': this.renderNumberField,
-            'password': this.renderPasswordField,
-            'textarea': this.renderTextAreaField,
-            'tel': this.renderTelField,
-            'date': this.renderDateField,
-            'time': this.renderTimeField,
-            'datetime-local': this.renderDateTimeField,
-            'month': this.renderMonthField,
-            'week': this.renderWeekField,
-            'url': this.renderUrlField,
-            'search': this.renderSearchField,
-            'color': this.renderColorField,
-            'checkbox': this.renderCheckboxField,
-            'radio': this.renderRadioField,
-            'file': this.renderFileField,
-            'hidden': this.renderHiddenField,
-            'image': this.renderImageField,
-            'singleSelect': this.renderSingleSelectField,
-            'multipleSelect': this.renderMultipleSelectField,
-            'dynamicSingleSelect': this.renderDynamicSingleSelectField,
-            'range': this.renderRangeField,
-            'recaptcha': this.renderRecaptchaField,
-            'submit': this.renderSubmitButton, // Keep this for completeness, but renderSubmitButtonElement will now handle it
-        };
-
-        const renderMethod = fieldRenderMap[type];
+    const fieldRenderMap = {
+        'text': this.renderTextField,
+        'email': this.renderEmailField,
+        'number': this.renderNumberField,
+        'password': this.renderPasswordField,
+        'textarea': this.renderTextAreaField,
+        'tel': this.renderTelField,
+        'date': this.renderDateField,
+        'time': this.renderTimeField,
+        'datetime-local': this.renderDateTimeField,
+        'month': this.renderMonthField,
+        'week': this.renderWeekField,
+        'url': this.renderUrlField,
+        'search': this.renderSearchField,
+        'color': this.renderColorField,
+        'checkbox': this.renderCheckboxField,
+        'radio': this.renderRadioField,
+        'file': this.renderFileField,
+        'hidden': this.renderHiddenField,
+        'image': this.renderImageField,
+        'singleSelect': this.renderSingleSelectField,
+        'multipleSelect': this.renderMultipleSelectField,
+        'dynamicSingleSelect': this.renderDynamicSingleSelectField,
+        'range': this.renderRangeField,
+        'recaptcha': this.renderRecaptchaField,
+        'submit': this.renderSubmitButton,
+    };
 
-        if (renderMethod) {
-            // If the type is 'submit', ensure we use the specific renderSubmitButtonElement
-            // Although, with the filter in renderForm(), this branch for 'submit' type
-            // might not be hit in the primary rendering flow, it's good practice.
-            return renderMethod.call(this, type, name, label, validate, attributes, options,subOptions);
+    const renderMethod = fieldRenderMap[type];
 
-            if (type === 'submit') {
-                return this.renderSubmitButton(type, name, label, validate, attributes, options);
-            }
-            //return renderMethod.call(this, type, name, label, validate, attributes, options);
-        } else {
-            console.warn(`Unsupported field type '${type}' encountered.`);
-            return '';
-        }
+    if (renderMethod) {
+        // IMPORTANT: Pass ALL arguments including subOptions
+        return renderMethod.call(this, type, name, label, validate, attributes, options, subOptions);
+    } else {
+        console.warn(`Unsupported field type '${type}' encountered.`);
+        return '';
     }
+}
+
+
+
 
 
 
@@ -3641,244 +3637,227 @@ renderCheckboxField(type, name, label, validate, attributes, options) {
 /* DYNAMIC SINGLE SELECT BLOCK */
 
 // Function to render the dynamic select field and update based on user selection
-renderDynamicSingleSelectField(type, name, label, validate, attributes, options) {
-  //console.log('DEBUG: renderDynamicSingleSelectField called with options:', options);
-  
-  // Step 1: Extract main categories from options
-  const mainCategoryOptions = options.map(item => {
-    // Use item.id as the value for the main select
-    return {
-      value: item.id,    // ← FIXED: Use id, not value
-      label: item.label,
-      // You can add selected logic if needed
-    };
-  });
-  
-  // Step 2: The nested options ARE your sub-categories!
-  // Transform the structure
-  const subCategoriesOptions = options.map(item => ({
-    id: item.id,           // Same as main category value
-    label: item.label + ' Technologies', // Or customize
-    options: item.options  // The nested options array
-  }));
-  
-  //console.log('Main categories:', mainCategoryOptions);
-  //console.log('Sub categories:', subCategoriesOptions);
-  
-  const mode = 'dynamicSingleSelect';
-  
-  // Pass both to the renderer
-  this.renderSingleSelectField(type, name, label, validate, attributes, mainCategoryOptions, subCategoriesOptions, mode);
-}
-
-renderSingleSelectField(type, name, label, validate, attributes, options, subCategoriesOptions, mode) {
-
-  // Define valid validation attributes for select fields
-  const selectValidationAttributes = ['required'];
-
-  // Construct validation attributes
-  let validationAttrs = '';
-  // Store original required state for the main select
-  let originalRequired = false; // <--- This variable tracks if the main select was originally required
-  if (validate) {
-    Object.entries(validate).forEach(([key, value]) => {
-      if (selectValidationAttributes.includes(key)) {
-        if (key === 'required') {
-          validationAttrs += `${key} `;
-          originalRequired = true; // Mark that it was originally required
-        }
-      } else {
-        // Removed console.warn
-      }
+renderDynamicSingleSelectField(type, name, label, validate, attributes, options, subOptions) {
+    console.log('DEBUG: renderDynamicSingleSelectField called', { 
+        type, name, label, 
+        options: options ? options.length : 'none',
+        subOptions: subOptions ? subOptions.length : 'none'
     });
-  }
-
-  // Handle the binding syntax
-  let bindingDirective = '';
-  if (attributes.binding) {
-    if (typeof attributes.binding === 'string' && attributes.binding.startsWith('::')) {
-      bindingDirective = ` bind:value="${name}" `;
+    
+    // Check if options exist
+    if (!options || !Array.isArray(options)) {
+        console.warn('Dynamic single select field missing options:', name);
+        options = [];
     }
-  }
-
-  // Define attributes for the select field
-  let id = attributes.id || name;
-  let dimensionAttrs = ''; // No dimension attributes applicable for select fields
-
-  // Handle additional attributes
-  let additionalAttrs = '';
-  for (const [key, value] of Object.entries(attributes)) {
-    if (key !== 'id' && key !== 'class' && key !== 'dependsOn' && key !== 'dependents' && value !== undefined) {
-      if (key.startsWith('on')) {
-        // Handle event attributes
-        const eventValue = value.endsWith('()') ? value.slice(0, -2) : value;
-        additionalAttrs += ` @${key.replace(/^on/, '')}={${eventValue}}\n`;
-      } else {
-        // Handle boolean attributes
-        if (value === true) {
-          additionalAttrs += ` ${key.replace(/_/g, '-')}\n`;
-        } else if (value !== false) {
-          // Convert underscores to hyphens and set the attribute
-          additionalAttrs += ` ${key.replace(/_/g, '-')}="${value}"\n`;
+    
+    // Step 1: Extract main categories from options
+    // Options should already be in the correct format from the parser
+    const mainCategoryOptions = options.map(item => {
+        // Handle both string and object formats
+        if (typeof item === 'string') {
+            return {
+                value: item.toLowerCase().replace(/\s+/g, '-'),
+                label: item
+            };
+        } else {
+            // Already an object with value/label
+            return {
+                value: item.value || item.id || item,
+                label: item.label || item.value || item
+            };
         }
-      }
+    });
+    
+    // Step 2: Handle subCategoriesOptions (scenario blocks)
+    let subCategoriesOptions = [];
+    
+    if (subOptions && Array.isArray(subOptions)) {
+        // Use the subOptions exactly as provided by the parser
+        // They should already have the correct structure
+        subCategoriesOptions = subOptions.map(item => {
+            // Ensure each subCategory has the required structure
+            return {
+                id: item.id || item.value || '',
+                label: item.label || item.id || '',
+                options: Array.isArray(item.options) ? item.options : []
+            };
+        });
     }
-  }
+    
+    console.log('Main categories:', mainCategoryOptions);
+    console.log('Sub categories:', subCategoriesOptions);
+    
+    // Pass both to the renderer with the mode flag
+    this.renderSingleSelectField(
+        type, 
+        name, 
+        label, 
+        validate, 
+        attributes, 
+        mainCategoryOptions, 
+        subCategoriesOptions, 
+        'dynamicSingleSelect'
+    );
+}
 
-  // Construct select options HTML based on options
-  let selectHTML = '';
-  if (Array.isArray(options)) {
-    // Add a default option
-    selectHTML += `
-    <option value="">Choose an option</option>
-    `;
 
-    // Add the provided options
-    selectHTML += options.map((option) => {
-      const isSelected = option.selected ? ' selected' : '';
-      return `
-      <option value="${option.value}"${isSelected}>${option.label}</option>
-      `;
-    }).join('');
-  }
 
-  let inputClass = attributes.class || this.inputClass;
 
-  // Remove `onchange` from HTML; it will be handled by JavaScript event listeners
-  const onchangeAttr = ''; // <--- Ensure this is an empty string
 
-  let labelDisplay;
-  let rawLabel;
+renderSingleSelectField(type, name, label, validate, attributes, options, subCategoriesOptions, mode) {
+    // Define valid validation attributes for select fields
+    const selectValidationAttributes = ['required'];
 
-  if (mode === 'dynamicSingleSelect' && subCategoriesOptions) {
-    if (label.includes('-')) {
-      const [mainCategoryLabel] = label.split('-');
-      labelDisplay = mainCategoryLabel;
-      rawLabel = label;
-    } else {
-      labelDisplay = label;
-      rawLabel = label;
+    // Construct validation attributes
+    let validationAttrs = '';
+    let originalRequired = false;
+    if (validate) {
+        Object.entries(validate).forEach(([key, value]) => {
+            if (selectValidationAttributes.includes(key)) {
+                if (key === 'required') {
+                    validationAttrs += `${key} `;
+                    originalRequired = true;
+                }
+            }
+        });
     }
-  } else {
-    labelDisplay = label;
-  }
-
-  // Construct the final HTML string for the main select
-  let formHTML = `
-  <fieldset class="${this.selectGroupClass}" id="${id + '-block'}">
-    <legend>${labelDisplay}
-      ${validationAttrs.includes('required') && this.formSettings.requiredFieldIndicator ? this.formSettings.asteriskHtml : ''}
-    </legend>
-    <label for="${id}"> Select ${labelDisplay}
-    <select name="${name}"
-      ${bindingDirective}
-      ${dimensionAttrs}
-      id="${id}"
-      class="${inputClass}"
-      ${additionalAttrs}
-      ${validationAttrs}
-      data-original-required="${originalRequired}" >
-      ${selectHTML}
-    </select>
-  </fieldset>
-`.replace(/^\s*\n/gm, '').trim();
-
-  // FIXED: Apply vertical layout to the <select> element and its children
-  // Only split on actual attribute boundaries, not within attribute values
-  let formattedHtml = formHTML.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g, (match, p1, p2) => {
-    // Use regex to match complete attribute="value" pairs
-    const attributes = p1.match(/(\w+(?:-\w+)*=("[^"]*"|'[^']*'|\w+)|[^=\s]+(?!\s*=))/g) || [];
-    const formattedAttributes = attributes.map(attr => ` ${attr}`).join('\n');
-    return `<select\n${formattedAttributes}\n>\n${p2.trim()}\n</select>`;
-  });
-
-  // Ensure the <fieldset> block starts on a new line and remove extra blank lines
-  formattedHtml = formattedHtml.replace(/(<fieldset\s+[^>]*>)/g, (match) => {
-    // Ensure <fieldset> starts on a new line
-    return `\n${match}\n`;
-  }).replace(/\n\s*\n/g, '\n'); // Remove extra blank lines
-
-  this.formMarkUp+=formattedHtml;
-
 
-  /* dynamicSingleSelect - Sub-Category Generation Block */
-
-  if (mode && mode ==='dynamicSingleSelect' && subCategoriesOptions) {
-
-    const categoryId = attributes.id || name; // This is the ID of the main dynamic select ('languages')
+    // Handle the binding syntax
+    let bindingDirective = '';
+    if (attributes.binding) {
+        if (typeof attributes.binding === 'string' && attributes.binding.startsWith('::')) {
+            bindingDirective = ` bind:value="${name}" `;
+        }
+    }
 
-    subCategoriesOptions.forEach((subCategory) => {
-      const { id, label, options: subOptions } = subCategory; // Renamed 'options' to 'subOptions' to avoid conflict
+    // Define attributes for the select field
+    let id = attributes.id || name;
+    let dimensionAttrs = '';
 
-      // IMPORTANT: Sub-category selects are *initially hidden*
-      // Therefore, by default, they are NOT required until they are revealed.
-      let isSubCategoryRequired = false; // Default to false as they are hidden
-      const subCategoryValidationAttrs = ''; // No direct 'required' in HTML initially
+    // Handle additional attributes
+    let additionalAttrs = '';
+    for (const [key, value] of Object.entries(attributes)) {
+        if (key !== 'id' && key !== 'class' && key !== 'dependsOn' && key !== 'dependents' && value !== undefined) {
+            if (key.startsWith('on')) {
+                const eventValue = value.endsWith('()') ? value.slice(0, -2) : value;
+                additionalAttrs += ` @${key.replace(/^on/, '')}={${eventValue}}\n`;
+            } else {
+                if (value === true) {
+                    additionalAttrs += ` ${key.replace(/_/g, '-')}\n`;
+                } else if (value !== false) {
+                    additionalAttrs += ` ${key.replace(/_/g, '-')}="${value}"\n`;
+                }
+            }
+        }
+    }
 
-      // Build the select options HTML for sub-category
-      const subSelectHTML = subOptions.map(option => {
-        const isSelected = option.selected ? ' selected' : '';
-        return `
-          <option value="${option.value}"${isSelected}>${option.label}</option>
+    // Construct select options HTML based on options
+    let selectHTML = '';
+    if (Array.isArray(options) && options.length > 0) {
+        // Add a default option
+        selectHTML += `
+        <option value="">Choose an option</option>
         `;
-      }).join('');
-
-
-      let subCategoryLabel;
-      
-      if (rawLabel.includes('-')) {
-        subCategoryLabel = rawLabel.split('-')?.[1] + ' Options';
-      } else {
-        subCategoryLabel = 'options';
-      }
 
-      let optionsLabel;
-      if (subCategoryLabel !== 'options') {
-        optionsLabel = rawLabel.split('-')?.[1] + ' Option';
-      } else {
-        optionsLabel = subCategoryLabel;
-      }
+        // Add the provided options
+        selectHTML += options.map((option) => {
+            const optionValue = option.value || option;
+            const optionLabel = option.label || option;
+            const isSelected = option.selected ? ' selected' : '';
+            return `
+            <option value="${optionValue}"${isSelected}>${optionLabel}</option>
+            `;
+        }).join('');
+    }
 
+    let inputClass = attributes.class || this.inputClass;
 
-      // Create the HTML for the sub-category fieldset and select elements
-      // Added a class based on the main select's ID for easy grouping/selection
-      let subFormHTML = `
-        <fieldset class="${this.selectGroupClass} ${categoryId}" id="${id}" style="display: none;"> <legend>${label} ${subCategoryLabel} ${isSubCategoryRequired && this.formSettings.requiredFieldIndicator ? this.formSettings.asteriskHtml : ''}
-          </legend>
-          <label for="${id}"> Select ${label} ${optionsLabel}
-          </label>
-          <select name="${id}"
+    // Construct the final HTML string for the main select
+    let formHTML = `
+    <fieldset class="${this.selectGroupClass}" id="${id + '-block'}">
+        <legend>${label}
+            ${validationAttrs.includes('required') && this.formSettings.requiredFieldIndicator ? this.formSettings.asteriskHtml : ''}
+        </legend>
+        <label for="${id}"> Select ${label}
+        <select name="${name}"
             ${bindingDirective}
             ${dimensionAttrs}
             id="${id}"
             class="${inputClass}"
             ${additionalAttrs}
-            ${subCategoryValidationAttrs}
-            data-original-required="${isSubCategoryRequired}" >
-            <option value="">Choose an option</option>
-            ${subSelectHTML}
-          </select>
-        </fieldset>
-      `.replace(/^\s*\n/gm, '').trim();
-
-      // FIXED: Apply the same corrected formatting to sub-category selects
-      subFormHTML = subFormHTML.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g, (match, p1, p2) => {
+            ${validationAttrs}
+            data-original-required="${originalRequired}" >
+            ${selectHTML}
+        </select>
+    </fieldset>
+    `.replace(/^\s*\n/gm, '').trim();
+
+    // Format the HTML
+    let formattedHtml = formHTML.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g, (match, p1, p2) => {
         const attributes = p1.match(/(\w+(?:-\w+)*=("[^"]*"|'[^']*'|\w+)|[^=\s]+(?!\s*=))/g) || [];
         const formattedAttributes = attributes.map(attr => ` ${attr}`).join('\n');
         return `<select\n${formattedAttributes}\n>\n${p2.trim()}\n</select>`;
-      });
+    });
 
-      // Ensure the <fieldset> block starts on a new line and remove extra blank lines
-      subFormHTML = subFormHTML.replace(/(<fieldset\s+[^>]*>)/g, (match) => {
-        return `\n${match}\n`;
-      }).replace(/\n\s*\n/g, '\n');
+    this.formMarkUp += formattedHtml;
 
-      // Append the generated HTML to formMarkUp
-      this.formMarkUp += subFormHTML;
-    });
-  }
-}
+    /* dynamicSingleSelect - Sub-Category Generation Block */
+    if (mode === 'dynamicSingleSelect' && subCategoriesOptions && Array.isArray(subCategoriesOptions) && subCategoriesOptions.length > 0) {
+        const categoryId = attributes.id || name;
+
+        subCategoriesOptions.forEach((subCategory) => {
+            // Skip invalid subCategories
+            if (!subCategory || !subCategory.id) {
+                console.warn('Invalid subCategory in dynamic select:', subCategory);
+                return;
+            }
+
+            const { id, label: subLabel, options: subOptions } = subCategory;
+            
+            // Ensure subOptions is an array
+            const subOptionArray = Array.isArray(subOptions) ? subOptions : [];
+            
+            // Build the select options HTML for sub-category
+            const subSelectHTML = subOptionArray.length > 0 ? 
+                subOptionArray.map(option => {
+                    const optionValue = option.value || option;
+                    const optionLabel = option.label || option;
+                    const isSelected = option.selected ? ' selected' : '';
+                    return `
+                        <option value="${optionValue}"${isSelected}>${optionLabel}</option>
+                    `;
+                }).join('') :
+                '<option value="">No options available</option>';
+
+            // Create the HTML for the sub-category fieldset
+            let subFormHTML = `
+                <fieldset class="${this.selectGroupClass} ${categoryId}" id="${id}" style="display: none;">
+                    <legend>${subLabel || id}</legend>
+                    <label for="${id}"> Select ${subLabel || id}</label>
+                    <select name="${id}"
+                        ${bindingDirective}
+                        ${dimensionAttrs}
+                        id="${id}"
+                        class="${inputClass}"
+                        ${additionalAttrs}
+                        data-original-required="false">
+                        <option value="">Choose an option</option>
+                        ${subSelectHTML}
+                    </select>
+                </fieldset>
+            `.replace(/^\s*\n/gm, '').trim();
+
+            // Format the HTML
+            subFormHTML = subFormHTML.replace(/<select\s+([^>]*)>([\s\S]*?)<\/select>/g, (match, p1, p2) => {
+                const attributes = p1.match(/(\w+(?:-\w+)*=("[^"]*"|'[^']*'|\w+)|[^=\s]+(?!\s*=))/g) || [];
+                const formattedAttributes = attributes.map(attr => ` ${attr}`).join('\n');
+                return `<select\n${formattedAttributes}\n>\n${p2.trim()}\n</select>`;
+            });
 
+            this.formMarkUp += subFormHTML;
+        });
+    }
+}
 
 
 renderMultipleSelectField(type, name, label, validate, attributes, options) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@formique/semantq",
-  "version": "1.1.1",
+  "version": "1.1.2",
   "description": "Formique is a native form builder for the Semantq JS Framework",
   "main": "formique-semantq.js",
   "type": "module",