From 88a7d65fb9204e1935c4fe7ec095d0df2da53048 Mon Sep 17 00:00:00 2001 From: meenahoda Date: Thu, 18 Aug 2022 07:26:37 +0100 Subject: [PATCH 1/2] fix: improve toggle layout using item --- lib/builders/Input.Toggle.js | 123 +++++++++++++++++++++++------------ 1 file changed, 82 insertions(+), 41 deletions(-) diff --git a/lib/builders/Input.Toggle.js b/lib/builders/Input.Toggle.js index 060316a8..d09889ec 100644 --- a/lib/builders/Input.Toggle.js +++ b/lib/builders/Input.Toggle.js @@ -2,59 +2,24 @@ 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 { - title, - // valueOff, - // valueOn, - spacing, - icon, - separator, style, - tooltip + spacing, + separator } = definition const builder = new ComponentBuilder(definition) + const div = builder.addTag('div') if (style === 'button') { - 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) + applyButtonToggle(div, definition) } else { - const toggle = div - .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 }) - } + applyDefaultToggle(div, definition) } applySpacing({ spacing, source: div }) @@ -62,3 +27,79 @@ module.exports = function (definition, options) { 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) { + const { + title, + // valueOff, + // valueOn, + icon, + tooltip + } = definition + + const item = div + .addChildTag('q-item') + .addAttribute('class', 'q-pa-none') + + const leftItemSection = item + .addChildTag('q-item-section') + .addAttribute('class', 'q-pa-none') + .addAttribute('avatar', null) + + leftItemSection + .addChildTag('q-toggle') + .bindToModel(definition) + .addAttribute('checked-icon', 'check') + .addAttribute('unchecked-icon', 'close') + .addAttribute('size', 'lg') + + const centerItemSection = item + .addChildTag('q-item-section') + + applyTitleLabel({ source: centerItemSection, title, icon, tooltip }) + + // const toggle = div + // .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 }) + // } +} From 8ab2451177bec904ef9d985957b2afb6e9eaafba Mon Sep 17 00:00:00 2001 From: meenahoda Date: Thu, 18 Aug 2022 09:16:28 +0100 Subject: [PATCH 2/2] feat: allow for checkbox style toggles --- lib/builders/Input.Toggle.js | 50 ++++++++++++------------------------ 1 file changed, 16 insertions(+), 34 deletions(-) diff --git a/lib/builders/Input.Toggle.js b/lib/builders/Input.Toggle.js index d09889ec..6448ba95 100644 --- a/lib/builders/Input.Toggle.js +++ b/lib/builders/Input.Toggle.js @@ -1,7 +1,6 @@ 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') @@ -19,7 +18,7 @@ module.exports = function (definition, options) { if (style === 'button') { applyButtonToggle(div, definition) } else { - applyDefaultToggle(div, definition) + applyDefaultToggle(div, definition, style === 'checkbox') } applySpacing({ spacing, source: div }) @@ -50,7 +49,7 @@ function applyButtonToggle (div, definition) { .bindToModel(definition) } -function applyDefaultToggle (div, definition) { +function applyDefaultToggle (div, definition, useCheckbox) { const { title, // valueOff, @@ -62,44 +61,27 @@ function applyDefaultToggle (div, definition) { const item = div .addChildTag('q-item') .addAttribute('class', 'q-pa-none') + .addAttribute('tag', 'label') const leftItemSection = item .addChildTag('q-item-section') .addAttribute('class', 'q-pa-none') - .addAttribute('avatar', null) - - leftItemSection - .addChildTag('q-toggle') - .bindToModel(definition) - .addAttribute('checked-icon', 'check') - .addAttribute('unchecked-icon', 'close') - .addAttribute('size', 'lg') + .addAttribute('side', null) const centerItemSection = item .addChildTag('q-item-section') - applyTitleLabel({ source: centerItemSection, title, icon, tooltip }) + if (useCheckbox) { + leftItemSection + .addChildTag('q-checkbox') + .bindToModel(definition) + } else { + leftItemSection + .addChildTag('q-toggle') + .bindToModel(definition) + .addAttribute('checked-icon', 'check') + .addAttribute('unchecked-icon', 'close') + } - // const toggle = div - // .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 }) - // } + applyTitleLabel({ source: centerItemSection, title, icon, tooltip }) }