diff --git a/lib/builders/Input.Toggle.js b/lib/builders/Input.Toggle.js index 060316a8..6448ba95 100644 --- a/lib/builders/Input.Toggle.js +++ b/lib/builders/Input.Toggle.js @@ -1,64 +1,87 @@ const ComponentBuilder = require('./../utils/Component-builder') const applySpacing = require('./../utils/apply-spacing') const applySeparator = require('./../utils/apply-separator') -const applyTooltip = require('./../utils/apply-tooltip') +const applyTitleLabel = require('./../utils/apply-title-label') const { inspect } = require('./../utils/local-util') module.exports = function (definition, options) { + const { + style, + spacing, + separator + } = definition + + const builder = new ComponentBuilder(definition) + + const div = builder.addTag('div') + + if (style === 'button') { + applyButtonToggle(div, definition) + } else { + applyDefaultToggle(div, definition, style === 'checkbox') + } + + applySpacing({ spacing, source: div }) + applySeparator({ separator, source: div }) + + return builder.compile() +} + +function applyButtonToggle (div, definition) { + const { + title, + // valueOff, + // valueOn, + icon + } = definition + + const opts = [{ value: true }] + + if (icon) opts[0].icon = icon + if (title) opts[0].label = title + + div + .addChildTag('q-btn-toggle') + .addAttribute(':options', inspect(opts)) + .addAttribute(':clearable', true) + .addAttribute('flat', null) + .addAttribute('dense', null) + .bindToModel(definition) +} + +function applyDefaultToggle (div, definition, useCheckbox) { const { title, // valueOff, // valueOn, - spacing, icon, - separator, - style, tooltip } = definition - const builder = new ComponentBuilder(definition) - const div = builder.addTag('div') + const item = div + .addChildTag('q-item') + .addAttribute('class', 'q-pa-none') + .addAttribute('tag', 'label') - if (style === 'button') { - const opts = [{ value: true }] + const leftItemSection = item + .addChildTag('q-item-section') + .addAttribute('class', 'q-pa-none') + .addAttribute('side', null) - if (icon) opts[0].icon = icon - if (title) opts[0].label = title + const centerItemSection = item + .addChildTag('q-item-section') - div - .addChildTag('q-btn-toggle') - .addAttribute(':options', inspect(opts)) - .addAttribute(':clearable', true) - .addAttribute('flat', null) - .addAttribute('dense', null) + if (useCheckbox) { + leftItemSection + .addChildTag('q-checkbox') .bindToModel(definition) } else { - const toggle = div + leftItemSection .addChildTag('q-toggle') .bindToModel(definition) .addAttribute('checked-icon', 'check') .addAttribute('unchecked-icon', 'close') - .addAttribute('size', 'lg') - - if (icon) { - toggle.addAttribute('icon', icon) - } - - if (title) { - toggle - .addAttribute('label', title) - .addAttribute('class', 'form-label') - - // .addAttribute(':left-label', true) - } - - if (tooltip) { - applyTooltip({ source: div, tooltip }) - } } - applySpacing({ spacing, source: div }) - applySeparator({ separator, source: div }) - - return builder.compile() + applyTitleLabel({ source: centerItemSection, title, icon, tooltip }) }