refactor(InputEditor): Better handling of empty values - add innerClass and wrapperClass to Style section

Author: sfxcode

src/composables/useInputEditor.ts

@@ -29,24 +29,39 @@ export function useInputEditor() {
 
     const defaultObject = { readonly: readonlyValue, disabled: disabledValue, preserve: preserveValue }
 
+    // outer class
     let outerClass: string | undefined = ''
-    if (data.outerClassGrid && data.outerClassGrid !== 'col-12')
-      outerClass = data.outerClassGrid
     if (data.outerClass)
-      outerClass = `${outerClass} ${data.outerClass}`
+      outerClass = `${outerClass} ${data.outerClass}`.trim()
 
-    if (outerClass.trim().length === 0)
-      outerClass = undefined
+    // wrapper class
+    let wrapperClass: string | undefined = ''
+    if (data.wrapperClass)
+      wrapperClass = `${wrapperClass} ${data.wrapperClass}`.trim()
 
-    const undefinedObject = { prime: undefined, schemaResultFormKey: undefined, _dollar_formkit: undefined, slots: undefined, selectButton: undefined, outerClassGrid: undefined }
+    // inner class
+    let innerClass: string | undefined = ''
+    if (data.innerClass)
+      innerClass = `${innerClass} ${data.innerClass}`.trim()
+
+    const undefinedObject = { prime: undefined, schemaResultFormKey: undefined, _dollar_formkit: undefined, slots: undefined, selectButton: undefined }
 
     const useOptions = primeInputWithOptionNames.map(s => `prime${s}`).includes(formkitInput)
 
     let result = {}
     if (useOptions)
-      result = { ...data, $formkit: formkitInput, ...tempData, ...undefinedObject, ...defaultObject, outerClass, optionLabel: 'label', optionValue: 'value' }
+      result = { ...data, $formkit: formkitInput, ...tempData, ...undefinedObject, ...defaultObject, outerClass, wrapperClass, innerClass, optionLabel: 'label', optionValue: 'value' }
     else
-      result = { ...data, $formkit: formkitInput, ...tempData, ...undefinedObject, ...defaultObject, outerClass, options: undefined }
+      result = { ...data, $formkit: formkitInput, ...tempData, ...undefinedObject, ...defaultObject, outerClass, wrapperClass, innerClass, options: undefined }
+
+    // cleanup empty values
+    for (const key in result) {
+      const value = result[key]
+      if ((typeof value === 'string' || value instanceof String)) {
+        if (value.trim().length === 0)
+          result[key] = undefined
+      }
+    }
 
     return result
   }

src/composables/useInputEditorSchema.ts

@@ -29,21 +29,6 @@ export function useInputEditorSchema() {
     { label: 'Submit', value: 'submit' },
   ]
 
-  const colOptions = [
-    { label: 'Col-1', value: 'col-1' },
-    { label: 'Col-2', value: 'col-2' },
-    { label: 'Col-3', value: 'col-3' },
-    { label: 'Col-4', value: 'col-4' },
-    { label: 'Col-5', value: 'col-5' },
-    { label: 'Col-6', value: 'col-6' },
-    { label: 'Col-7', value: 'col-7' },
-    { label: 'Col-8', value: 'col-8' },
-    { label: 'Col-9', value: 'col-9' },
-    { label: 'Col-10', value: 'col-10' },
-    { label: 'Col-11', value: 'col-11' },
-    { label: 'Col-12', value: 'col-12' },
-  ]
-
   function editorSchema(inputOptions: any[] = primeInputOptions([...primeInputNames, ...primeOutputNames])) {
     return [
       {
@@ -242,20 +227,22 @@ export function useInputEditorSchema() {
         name: 'outerClass',
         label: 'Outer Class',
         key: 'schema_outerClass',
-        outerClass: 'col-6',
         preserve: true,
       },
       {
-        $formkit: 'primeSelect',
+        $formkit: 'primeInputText',
         if: '$get(selectButton).value === \'showStyle\'',
-        name: 'outerClassGrid',
-        value: 'col-12',
-        label: 'Grid Options',
-        optionLabel: 'label',
-        optionValue: 'value',
-        options: colOptions,
-        key: 'schema_outer-class-grid',
-        outerClass: 'col-6',
+        name: 'wrapperClass',
+        label: 'Wrapper Class',
+        key: 'schema_wrapperClass',
+        preserve: true,
+      },
+      {
+        $formkit: 'primeInputText',
+        if: '$get(selectButton).value === \'showStyle\'',
+        name: 'innerClass',
+        label: 'Inner Class',
+        key: 'schema_innerClass',
         preserve: true,
       },
       {
@@ -272,7 +259,6 @@ export function useInputEditorSchema() {
         if: '$get(selectButton).value === \'showValidation\'',
         name: 'validation-visibility',
         label: 'Field Validation Visibility',
-        value: 'blur',
         optionLabel: 'label',
         optionValue: 'value',
         options: validationOptions,