feat: add fieldColProps option

Author: albanm

doc/examples/classes.js

@@ -1,18 +1,21 @@
 const id = 'classes'
 
-const title = 'Classes and styles'
+const title = 'Layout, classes and styles'
 
-const description = `You can define classes on the wrapping element of each property using a \`x-class\` annotation. If you use layout management classes you can then position properties next to each other for examples.
+const description = `You can define classes on the wrapping element of each property using the \`x-class\` annotation.
 
 To write CSS rules directly on the wrapping element of a property use the \`x-style\` annotation.
 
-There are also classes that can be defined as options: \`objectContainerClass\`, \`sectionsClass\`, \`sectionsTitlesClasses\`, \`childrenClass\`.`
+To customize the responsive layout of your form you can use the \`x-cols\` annotation or the \`fieldColProps\` option.
+
+There are also many options that can be used to apply classes to different parts of your form: \`objectContainerClass\`, \`sectionsClass\`, \`sectionsTitlesClasses\`, \`childrenClass\`, etc.`
 
 const schema = {
   type: 'object',
   properties: {
-    stringPropHalf: { type: 'string', title: `I'm a half width string`, 'x-class': 'xs6' },
-    stringPropHalf2: { type: 'string', title: `I'm another half width string`, 'x-class': 'xs6' },
+    stringPropHalf: { type: 'string', title: `I'm a half width string using x-cols`, 'x-cols': 6 },
+    stringPropHalf2: { type: 'string', title: `I'm another half width string using fieldColProps option`, 'x-options': { fieldColProps: { cols: 6 } } },
+    stringPropClass: { type: 'string', title: `I'm a string with class pl-10`, 'x-class': 'pl-10' },
     stringPropStyle: { type: 'string', title: `I'm a string with style`, 'x-style': 'background-color: pink; padding-left: 20px;' }
   }
 }

doc/pages/configuration.vue

@@ -171,7 +171,7 @@
         </tr>
         <tr>
           <td>x-cols</td>
-          <td>The width of the v-col component wrapping the property (default is 12).</td>
+          <td>The width of the v-col component wrapping the property (default is 12). You can use the fieldColProps option for further layout customization.</td>
         </tr>
         <tr>
           <td>x-slots</td>
@@ -198,6 +198,7 @@ export default {
       descriptions: {
         rootDisplay: 'equivalent of x-display annotation on the root object of the schema, can be "tabs" or "expansion-panels"',
         fieldProps: 'props passed to the underlying components for simple fields (v-text-field, v-select, etc.)',
+        fieldColProps: 'props passed to the v-col component that wraps any field. Use "cols", "xs", "md", etc. to customize your form layout.',
         textFieldProps: 'props passed to the underlying v-text-field components',
         textareaProps: 'props passed to the underlying v-textarea components',
         numberProps: 'props passed to the underlying v-text-field components with type="number"',

lib/VJsfNoDeps.js

@@ -162,7 +162,9 @@ export default {
       children.push(h('div', { domProps: { innerHTML: this.fullOptions.markdown(this.xSlots.after) } }))
     }
 
-    return h('v-col', { props: { cols: this.fullSchema['x-cols'] || 12 }, class: this.propertyClass, style: this.fullSchema['x-style'] || '' }, children)
+    const colProps = { ...this.fullOptions.fieldColProps }
+    if (this.fullSchema['x-cols']) colProps.cols = this.fullSchema['x-cols']
+    return h('v-col', { props: colProps, class: this.propertyClass, style: this.fullSchema['x-style'] || '' }, children)
   },
   methods: {
     renderPropSlots(h) {

lib/utils/options.js

@@ -8,6 +8,7 @@ export const defaultOptions = {
   sectionsTitlesClasses: ['title', 'subtitle-1', 'subtitle-2'],
   childrenClass: 'pr-2',
   fieldProps: {},
+  fieldColProps: { cols: 12 },
   textFieldProps: {},
   textareaProps: { filled: true },
   numberProps: {},