feat: allow for subtitles on input fields

wmfs · Aug 22, 2022 · 4600ec6 · 4600ec6
1 parent ede263d
commit 4600ec6
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 9 deletions.
diff --git a/lib/builders/Input.ChoiceSet.js b/lib/builders/Input.ChoiceSet.js
@@ -16,6 +16,7 @@ module.exports = function (definition, options) {
     spacing,
     separator,
     title,
+    subtitle,
     tooltip,
     icon,
     clearable,
@@ -49,7 +50,7 @@ module.exports = function (definition, options) {
   const builder = new ComponentBuilder(definition)
   const div = builder.addTag('div')
 
-  applyTitleLabel({ source: div, title, icon, tooltip })
+  applyTitleLabel({ source: div, title, icon, tooltip, subtitle })
   // const labelDiv = div.addChildTag('div').addAttribute('class', 'form-label')
   // if (icon) labelDiv.addChildTag('q-icon').addAttribute('name', icon).addAttribute('size', '28px').addAttribute('class', 'q-ml-sm')
   // if (title) labelDiv.addChildTag('span').content(title).addAttribute('class', 'q-ml-sm')
@@ -85,6 +86,7 @@ module.exports = function (definition, options) {
       .addAttribute(':label', 'opt.label')
       .addAttribute(':color', `opt.color ? ${inspect(COLORS)}[opt.color] || 'standard' : 'standard'`)
       .addAttribute('v-if', showWhen('opt.disable'))
+      .addAttribute('size', 'lg')
       .bindToModel(definition)
 
     _onChangeResetDataPaths(opt, onChangeResetDataPaths)

diff --git a/lib/builders/Input.FileUpload.js b/lib/builders/Input.FileUpload.js
@@ -10,6 +10,7 @@ module.exports = function (definition, options) {
     spacing,
     separator,
     title,
+    subtitle,
     isMultiUpload,
     onUploadEndpoint,
     additionalFields,
@@ -29,7 +30,7 @@ module.exports = function (definition, options) {
 
   const div = builder.addTag('div')
 
-  applyTitleLabel({ source: div, title, icon, tooltip })
+  applyTitleLabel({ source: div, title, icon, tooltip, subtitle })
 
   const endpoint = onUploadEndpoint ? onUploadEndpoint.name : null
 

diff --git a/lib/builders/Text-field.js b/lib/builders/Text-field.js
@@ -15,7 +15,8 @@ module.exports = function TextField (definition, elementOptions, additionalOptio
     editor,
     tooltip,
     mask,
-    fillMask
+    fillMask,
+    subtitle
   } = definition
 
   const builder = new ComponentBuilder(definition)
@@ -26,7 +27,7 @@ module.exports = function TextField (definition, elementOptions, additionalOptio
   const label = definition.title || additionalOptions.title // || placeholder // TODO: Needs to be better, placeholder as well.
   // const type = definition.type || additionalOptions.type
 
-  applyTitleLabel({ source: div, title: label, icon, tooltip })
+  applyTitleLabel({ source: div, title: label, icon, tooltip, subtitle })
 
   let input
   if (editor) {

diff --git a/lib/utils/apply-title-label.js b/lib/utils/apply-title-label.js
@@ -1,17 +1,16 @@
 const applyTooltip = require('./apply-tooltip')
 
-module.exports = function ({ source, title, tooltip, icon }) {
-  if (!icon && !title && !tooltip) {
+module.exports = function ({ source, title, tooltip, icon, subtitle }) {
+  if (!icon && !title && !subtitle && !tooltip) {
     return
   }
 
   const labelDiv = source
     .addChildTag('div')
-    .addAttribute('class', 'form-label q-ml-sm')
+    .addAttribute('class', 'q-ml-sm')
 
   const span = labelDiv
-    .addChildTag('span')
-    .addAttribute('style', 'display: block;')
+    .addChildTag('div')
 
   let tooltipSource = span
 
@@ -26,9 +25,24 @@ module.exports = function ({ source, title, tooltip, icon }) {
   if (title) {
     tooltipSource = span
       .addChildTag('span')
+      .addAttribute('class', 'form-label')
       .content(title)
   }
 
+  if (subtitle) {
+    const subtitleDivClasses = ['form-sublabel']
+    const subtitleDiv = labelDiv
+      .addChildTag('div')
+      .content(subtitle)
+
+    if (title) {
+      subtitleDivClasses.push('q-mt-sm')
+    }
+
+    subtitleDiv
+      .addAttribute('class', subtitleDivClasses.join(' '))
+  }
+
   if (tooltip) {
     applyTooltip({ source: tooltipSource, tooltip })
   }