diff --git a/lib/builders/Input.ChoiceSet.js b/lib/builders/Input.ChoiceSet.js index 7dda3ed9..a9e191c0 100644 --- 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 index f98bdfbe..9a7e18f4 100644 --- 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 index b2432f88..92a84ae2 100644 --- 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 index 31ce97b5..db441a4c 100644 --- 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 }) }