Add a is-checked class to element where the input is checked to ease customisation. Add checklist back into the schema of dev

Author: Lionel Bijaoui

dev/full/schema.js

@@ -194,6 +194,60 @@ module.exports = {
 			model: "",
 			styleClasses: "alert alert-info"
 		}, {
+            type: "checklist",
+            label: "CHECKLIST combobox",
+            model: "checklistcombobox",
+            listBox: false,
+            values: [{
+                name: "HTML5",
+                value: "HTML5-123"
+            }, {
+                name: "Javascript",
+                value: "Javascript-123"
+            }, {
+                name: "CSS3",
+                value: "CSS3-123"
+            }, {
+                name: "CoffeeScript",
+                value: "CoffeeScript-123"
+            }, {
+                name: "AngularJS",
+                value: "AngularJS-123"
+            }, {
+                name: "ReactJS",
+                value: "ReactJS-123"
+            }, {
+                name: "VueJS",
+                value: "VueJS-123"
+            }],
+        }, {
+            type: "checklist",
+            label: "CHECKLIST listBox",
+            model: "checklistlistbox",
+            listBox: true,
+            values: [{
+                name: "HTML5",
+                value: "HTML5-123"
+            }, {
+                name: "Javascript",
+                value: "Javascript-123"
+            }, {
+                name: "CSS3",
+                value: "CSS3-123"
+            }, {
+                name: "CoffeeScript",
+                value: "CoffeeScript-123"
+            }, {
+                name: "AngularJS",
+                value: "AngularJS-123"
+            }, {
+                name: "ReactJS",
+                value: "ReactJS-123"
+            }, {
+                name: "VueJS",
+                value: "VueJS-123"
+            }],
+        }, {
 			type: "radios",
 			label: "RADIOS",
 			model: "radios",

src/fields/core/fieldChecklist.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
 	.wrapper
 		.listbox.form-control(v-if="schema.listBox", :disabled="disabled")
-			.list-row(v-for="item in items")
+			.list-row(v-for="item in items", :class="{'is-checked': getItemIsChecked(item)}")
 				label
 					input(type="checkbox", :checked="getItemIsChecked(item)", :disabled="disabled", @change="onChanged($event, item)")
 					| {{ getItemName(item) }}
@@ -12,7 +12,7 @@
 				.arrow
 
 			.dropList
-				.list-row(v-if="comboExpanded", v-for="item in items")
+				.list-row(v-if="comboExpanded", v-for="item in items", :class="{'is-checked': getItemIsChecked(item)}")
 					label
 						input(type="checkbox", :checked="getItemIsChecked(item)", :disabled="disabled", @change="onChanged($event, item)")
 						| {{ getItemName(item) }}

src/fields/core/fieldRadios.vue

@@ -1,6 +1,6 @@
 <template lang="pug">
 	.radio-list(:disabled="disabled")
-		label(v-for="item in items")
+		label(v-for="item in items", :class="{'is-checked': isItemChecked(item)}")
 			input(type="radio", :disabled="disabled", :name="id", @click="onSelection(item)", :value="getItemValue(item)", :checked="isItemChecked(item)" )
 			| {{ getItemName(item) }}