new: new "radios" field

Author: Lionel Bijaoui

dev/schema.js

@@ -218,6 +218,38 @@ module.exports = {
     model: "",
     styleClasses: "alert alert-info"
 },
+{
+    type: "radios",
+    label: "RADIOS",
+    model: "radios",
+    values: [
+		{name: "HTML5", value:"HTML5-123"},
+		{name: "Javascript", value:{id:"Javascript-123", deep:true}},
+		{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"}
+	],
+	radiosOptions: {
+		value:"value",
+		name:"name"
+	}
+},
+{
+    type: "radios",
+    label: "RADIOS2",
+    model: "radios2",
+    values: [
+		"HTML5",
+		"Javascript",
+		"CSS3",
+		"CoffeeScript",
+		"AngularJS",
+		"ReactJS",
+		"VueJS"
+	]
+},
 {
 	type: "image",
 	label: "Avatar (image field)",

src/fields/fieldRadios.vue

@@ -0,0 +1,69 @@
+<template lang="jade">
+	.radio-list(:disabled="disabled")
+		label(v-for="item in items")
+			input(type="radio", :disabled="disabled", :name="id", @click="onSelection(item)", :value="getItemValue(item)")
+			| {{ getItemName(item) }}
+
+</template>
+
+<script>
+	import {isObject} from "lodash";
+	import abstractField from "./abstractField";
+	
+	export default {
+		mixins: [ abstractField ],
+
+		computed: {
+			items() {
+				let values = this.schema.values;
+				if (typeof(values) == "function") {
+					return values.apply(this, [this.model, this.schema]);
+				} else {
+					return values;
+				}
+			},
+			id(){
+				return this.schema.model;
+			}
+		},
+
+		methods: {
+			onSelection(item) {
+				if (isObject(item) && this.schema.radiosOptions.value && item[this.schema.radiosOptions.value]){
+					this.value = item[this.schema.radiosOptions.value];
+				} else{
+					this.value = item;
+				}
+			},
+			getItemValue(item) {
+				if (isObject(item) && this.schema.radiosOptions.value && item[this.schema.radiosOptions.value]){
+					return item[this.schema.radiosOptions.value];
+				}
+
+				return item;
+			},
+			getItemName(item) {
+				if (isObject(item) && this.schema.radiosOptions.name && item[this.schema.radiosOptions.name]){
+					return item[this.schema.radiosOptions.name];
+				}
+
+				return item;
+			}
+		}
+	};
+</script>
+
+<style lang="sass">
+	.vue-form-generator .field-radios {
+
+		.radio-list {
+			label {
+				display: block;
+				input[type="radio"]{
+					margin-right: 5px;
+				}
+			}
+		}
+
+	}
+</style>