Adjust styles and logic of record list configurator

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

@@ -4,10 +4,7 @@
     >
       <span
         class="mb-0 inline-block text-primary mr-2"
-        :class="{ 
-          'text-muted': value,
-          'font-weight-bold': !value,
-       }"
+        :class="noClass"
       >
         {{ labels.off }}
       </span>
@@ -15,15 +12,14 @@
       <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="{ 
-          'text-muted': !value,
-          'font-weight-bold': value,
-       }"
+        :class="yesClass"
       >
         {{ labels.on }}
       </span>
@@ -44,6 +40,29 @@ export default {
       required: true,
       default: () => ({}),
     },
+
+    invert: {
+      type: Boolean,
+      default: false,
+    }
   },
+
+  computed: {
+    noClass () {
+      const value = this.invert ? !this.value : this.value
+      return {
+        'text-muted': value,
+        'font-weight-bold': !value,
+      }
+    },
+
+    yesClass () {
+      const value = this.invert ? !this.value : this.value
+      return {
+        'text-muted': !value,
+        'font-weight-bold': value,
+      }
+    }
+  }
 }
 </script>