Cleanup toggle switch component

src/modules/main_menu/components/main-menu.vue

@@ -90,16 +90,12 @@
 				<footer>
 					<div class="tw-border-t">
 						<toggle-switch
-							groupname="ffzSimpleView"
+							group-name="ffzSimpleView"
-							:options="{
+							:preselected="context.simple_view ? 'simple' : 'advanced'"
-								config: {
+							:items="[
-									preSelected: context.simple_view ? 'Simple' : 'Advanced',
+								{ name: t('main-menu.simple', 'Simple'), value: 'simple' },
-									items: [
+								{ name: t('main-menu.advanced', 'Advanced'), value: 'advanced' }
-										{ name: t('main-menu.simple', 'Simple'), value: 'Simple' },
+							]"
-										{ name: t('main-menu.advanced', 'Advanced'), value: 'Advanced' }
-									]
-								}
-							}"
 							@change="updateSimpleView"
 						/>
 					</div>
@@ -370,7 +366,7 @@ export default {
 
 		updateSimpleView(event) {
 			const key = 'ffz.simple-view';
-			const val = event.value === 'Simple';
+			const val = event.value === 'simple';
 			this.context.currentProfile.set(key, val);
 		}
 	}

src/std-components/toggle-switch.vue

@@ -3,21 +3,18 @@
 		class="toggle-switch"
 	>
 		<template
-			v-for="item in defaultOptions.config.items"
+			v-for="item in items"
 		>
 			<input
-				:id="item.value + group"
+				:id="item.value"
 				:value="item.value"
-				:disabled="defaultOptions.config.disabled || disabled"
+				:name="groupName"
-				:name="groupname"
-				:class="{ active: !defaultOptions.config.disabled || disabled}"
 				type="radio"
 				:checked="item.value === selectedItem"
 				@click="toggle"
 			>
 			<label
-				:class="{ active: !defaultOptions.config.disabled || disabled }"
+				:for="item.value"
-				:for="item.value + group"
 				type="radio"
 			>
 				{{ item.name }}
@@ -27,158 +24,59 @@
 </template>
 
 <script>
-const rem = v => `${v}rem`
-
 export default {
 	props: {
-		options: {
+		preselected: {
-			type: Object,
+			type: String,
 			required: false
 		},
+		items: {
+			type: Array,
+			required: true
+		},
 		modelValue: {
 			type: String,
 			required: false
 		},
-		groupname: {
+		groupName: {
 			type: String,
 			required: true
 		},
-		group: {
-			type: String,
-			required: false,
-			default: ''
-		},
-		disabled: {
-			type: Boolean,
-			required: false,
-			default: false
-		}
 	},
 	emits: ['update:modelValue'],
 	data () {
 		return {
 			selected: false,
-			selectedItem: 'unknown',
+			selectedItem: ''
-			defaultOptions: Object
-		}
-	},
-	computed: {
-		toggleSwitchStyle () {
-			return {
-				width: rem(this.defaultOptions.size.width),
-				height: rem(this.defaultOptions.size.height)
-			}
-		},
-		itemStyle () {
-			return {
-				width: rem(this.defaultOptions.size.width),
-				height: rem(this.defaultOptions.size.height),
-				fontFamily: this.defaultOptions.layout.fontFamily,
-				fontSize: rem(this.defaultOptions.size.fontSize),
-				textAlign: 'center'
-			}
-		},
-		labelStyle () {
-			return {
-				padding: rem(this.defaultOptions.size.padding),
-				borderColor: this.defaultOptions.layout.noBorder ? 'transparent' : this.defaultOptions.layout.borderColor,
-				backgroundColor: this.defaultOptions.layout.backgroundColor,
-				color: this.defaultOptions.layout.color,
-				fontWeight: this.defaultOptions.layout.fontWeight
-			}
 		}
 	},
 	watch: {
 		modelValue (val) {
 			this.selectedItem = val
 		},
-		options (val) {
-			if (val !== null && val !== undefined) {
-				this.mergeDefaultOptionsWithProp(val)
-			}
-		}
 	},
 	mounted () {
-		if (this.options !== null && this.options !== undefined) {
+		if (this.preselected)
-			this.mergeDefaultOptionsWithProp(this.options)
+			this.selectedItem = this.preselected
-		}
+		else if (this.modelValue)
-		if (this.defaultOptions.config.preSelected !== 'unknown') {
-			this.selectedItem = this.defaultOptions.config.preSelected
-			this.$emit('update:modelValue', this.selectedItem)
-			this.$emit('input', this.selectedItem)
-		} else if (this.modelValue) {
 			this.selectedItem = this.modelValue
+		else return;
+
 		this.$emit('update:modelValue', this.selectedItem)
 		this.$emit('input', this.selectedItem)
-		}
-	},
-	created () {
-		this.defaultOptions = {
-			layout: {
-				color: 'black',
-				backgroundColor: 'lightgray',
-				selectedColor: 'white',
-				selectedBackgroundColor: 'green',
-				borderColor: 'gray',
-				fontFamily: 'Arial',
-				fontWeight: 'normal',
-				fontWeightSelected: 'bold',
-				squareCorners: false,
-				noBorder: false
-			},
-			size: {
-				fontSize: 1.5,
-				height: 3.25,
-				padding: 0.5,
-				width: 10
-			},
-			config: {
-				preSelected: 'unknown',
-				disabled: false,
-				items: [
-					{ name: 'Off', value: 'Off', color: 'white', backgroundColor: 'red' },
-					{ name: 'On', value: 'On', color: 'white', backgroundColor: 'green' }
-				]
-			}
-		}
 	},
 	methods: {
 		toggle (event) {
-			if (!this.defaultOptions.config.disabled) {
 			this.selected = true
-				this.selectedItem = event.target.id.replace(this.group, '')
+			this.selectedItem = event.target.id
 			this.$emit('selected', this.selected)
-				this.$emit('update:modelValue', event.target.id.replace(this.group, ''))
+			this.$emit('update:modelValue', event.target.id)
 			this.$emit('input', this.selectedItem)
 			this.$emit('change', {
-					value: event.target.id.replace(this.group, ''),
+				value: event.target.id,
 				srcEvent: event
 			})
 		}
-		},
-		labelStyleSelected (color, backgroundColor) {
-			return {
-				padding: rem(this.defaultOptions.size.padding),
-				borderColor: this.defaultOptions.layout.noBorder ? 'transparent' : this.defaultOptions.layout.borderColor,
-				fontWeight: this.defaultOptions.layout.fontWeightSelected,
-				backgroundColor: backgroundColor !== undefined ? backgroundColor : this.defaultOptions.layout.selectedBackgroundColor,
-				color: color !== undefined ? color : this.defaultOptions.layout.selectedColor
-			}
-		},
-		mergeDefaultOptionsWithProp (options) {
-			const result = this.defaultOptions
-			for (const option in options) {
-				if (options[option] !== null && typeof (options[option]) === 'object') {
-					for (const subOption in options[option]) {
-						if (options[option][subOption] !== undefined && options[option][subOption] !== null) {
-							result[option][subOption] = options[option][subOption]
-						}
-					}
-				} else {
-					result[option] = options[option]
-				}
-			}
-		}
 	}
 }
 </script>