Add an option to change toggle type for Bool fields

client/web/compose/src/components/ModuleFields/Configurator/Bool.vue

@@ -8,6 +8,7 @@
           v-model="f.options.trueLabel"
           :placeholder="$t('kind.bool.checkedValuePlaceholder')"
         />
+
         <b-input-group-append>
           <field-bool-translator
             v-if="field"
@@ -30,6 +31,7 @@
           v-model="f.options.falseLabel"
           :placeholder="$t('kind.bool.uncheckedValuePlaceholder')"
         />
+
         <b-input-group-append>
           <field-bool-translator
             v-if="field"
@@ -43,6 +45,14 @@
         </b-input-group-append>
       </b-input-group>
     </b-form-group>
+
+    <b-form-group
+      :label="$t('kind.bool.toggleTypeLabel')"
+    >
+      <b-form-checkbox v-model="f.options.switch">
+        {{ $t('kind.bool.toggleType') }}
+      </b-form-checkbox>
+    </b-form-group>
   </div>
 </template>
 

client/web/compose/src/components/ModuleFields/Editor/Bool.vue

@@ -1,19 +1,51 @@
 <template>
-  <b-form-group>
-    <b-form-checkbox v-model="value">
-      {{ field.label || field.name }}
+  <b-form-group
+    label-class="d-flex align-items-center text-primary p-0"
+  >
+    <template
+      v-if="field.options.switch"
+      #label
+    >
+      {{ label }}
+
       <hint
         :id="field.fieldID"
         :text="hint"
-        class="d-inline-block text-primary"
       />
-    </b-form-checkbox>
+    </template>
 
-    <small
-      class="form-text font-weight-light text-muted"
+    <div
+      v-if="field.options.switch"
+      class="small text-muted"
+      :class="{ 'mb-1': description }"
     >
       {{ description }}
-    </small>
+    </div>
+
+    <c-input-checkbox
+      v-model="value"
+      :switch="field.options.switch"
+      :labels="field.options.switch ? checkboxLabel : {}"
+    >
+      <div
+        v-if="!field.options.switch"
+        class="d-flex align-items-center text-primary"
+      >
+        {{ label }}
+
+        <hint
+          :id="field.fieldID"
+          :text="hint"
+        />
+      </div>
+    </c-input-checkbox>
+
+    <div
+      v-if="!field.options.switch"
+      class="small text-muted"
+    >
+      {{ description }}
+    </div>
     <errors :errors="errors" />
   </b-form-group>
 </template>
@@ -21,6 +53,10 @@
 import base from './base'
 
 export default {
+  i18nOptions: {
+    namespaces: 'field',
+  },
+
   extends: base,
 
   computed: {
@@ -34,6 +70,13 @@ export default {
         this.$emit('change', value)
       },
     },
+
+    checkboxLabel () {
+      return {
+        on: this.field.options.trueLabel || this.$t('general:label.yes'),
+        off: this.field.options.falseLabel || this.$t('general:label.no'),
+      }
+    },
   },
 }
 </script>

lib/js/src/compose/types/module-field/bool.ts

@@ -6,12 +6,14 @@ const kind = 'Bool'
 interface BoolOptions extends Options {
   trueLabel: string;
   falseLabel: string;
+  switch: boolean;
 }
 
 const defaults = (): Readonly<BoolOptions> => Object.freeze({
   ...defaultOptions(),
   trueLabel: '',
   falseLabel: '',
+  switch: false,
 })
 
 export class ModuleFieldBool extends ModuleField {
@@ -29,6 +31,7 @@ export class ModuleFieldBool extends ModuleField {
     super.applyOptions(o)
 
     Apply(this.options, o, String, 'trueLabel', 'falseLabel')
+    Apply(this.options, o, Boolean, 'switch')
   }
 
   /**

lib/vue/src/components/input/CInputCheckbox.vue

@@ -1,30 +1,31 @@
 <template>
-    <div
-      class="d-flex"
+  <div
+    class="d-flex align-items-center"
+  >
+    <span
+      class="mb-0 inline-block text-primary"
+      :class="offClass"
     >
-      <span
-        class="mb-0 inline-block text-primary mr-2"
-        :class="noClass"
-      >
-        {{ labels.off }}
-      </span>
+      {{ labels.off }}
+    </span>
 
-      <b-form-checkbox
-        v-bind="$attrs"
-        :checked="value"
-        :value="!invert"
-        :unchecked-value="invert"
-        v-on="$listeners"
-      />
-
-      <span
-        class="mb-0 inline-block strong text-primary ml-2"
-        :class="yesClass"
-      >
-        {{ labels.on }}
-      </span>
-    </div>
+    <b-form-checkbox
+      v-bind="$attrs"
+      :checked="value"
+      :value="!invert"
+      :unchecked-value="invert"
+      v-on="$listeners"
+    >
+      <slot />
+    </b-form-checkbox>
 
+    <span
+      class="mb-0 inline-block strong text-primary"
+      :class="onClass"
+    >
+      {{ labels.on }}
+    </span>
+  </div>
 </template>
 
 <script>
@@ -48,19 +49,21 @@ export default {
   },
 
   computed: {
-    noClass () {
+    offClass () {
       const value = this.invert ? !this.value : this.value
       return {
         'text-muted': value,
         'font-weight-bold': !value,
+        'mr-2': !!this.labels.off
       }
     },
 
-    yesClass () {
+    onClass () {
       const value = this.invert ? !this.value : this.value
       return {
         'text-muted': !value,
         'font-weight-bold': value,
+        'ml-1': !!this.labels.on
       }
     }
   },

locale/en/corteza-webapp-compose/field.yaml

@@ -6,10 +6,12 @@ required-field: This field is required
 kind:
   bool:
     checkedValueLabel: Value when checked
-    checkedValuePlaceholder: Checked value
+    checkedValuePlaceholder: Yes
     label: Checkbox (Y/N)
     uncheckedValueLabel: Value when unchecked
-    uncheckedValuePlaceholder: Unchecked value
+    uncheckedValuePlaceholder: No
+    toggleTypeLabel: Checkbox Type
+    toggleType: Display as switch
   dateTime:
     dateOnly: Date Only
     futureValuesOnly: Future Value Only