fix: improve toggle layout using item

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 })
 }