Refactor base components

src/components/OpenwbBaseButtonGroupInput2.vue

@@ -0,0 +1,83 @@
+<template>
+	<openwb-base-setting-element>
+		<template #title>{{ title }}</template>
+		<template #help>
+			<slot name="help"></slot>
+		</template>
+		<template #default>
+			<div class="btn-group btn-block btn-group-toggle">
+				<label
+					v-for="button in buttons"
+					:key="button.value"
+					class="btn"
+					:class="[
+						value == button.buttonValue ? 'active' : '',
+						button.class ? button.class : 'btn-outline-info',
+					]"
+				>
+					<input
+						type="radio"
+						v-model="value"
+						:value="button.buttonValue"
+						v-bind="$attrs"
+					/>
+					{{ button.text }}
+					<font-awesome-icon
+						:icon="['fas', 'check']"
+						:style="[
+							value == button.buttonValue
+								? 'visibility: visible'
+								: 'visibility: hidden',
+						]"
+					/>
+				</label>
+			</div>
+		</template>
+	</openwb-base-setting-element>
+</template>
+
+<script>
+import { library } from "@fortawesome/fontawesome-svg-core";
+import {
+	faQuestionCircle as fasQuestionCircle,
+	faCheck as fasCheck,
+} from "@fortawesome/free-solid-svg-icons";
+import { faQuestionCircle as farQuestionCircle } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+library.add(fasQuestionCircle, farQuestionCircle, fasCheck);
+
+export default {
+	name: "OpenwbButtonGroupInput",
+	inheritAttrs: false,
+	props: {
+		title: String,
+		modelValue: { type: [String, Number, Boolean] },
+		buttons: Object,
+	},
+	emits: ["update:modelValue"],
+	data() {
+		return {
+			showHelp: false,
+		};
+	},
+	computed: {
+		value: {
+			get() {
+				return this.modelValue;
+			},
+			set(newValue) {
+				this.$emit("update:modelValue", newValue);
+			},
+		},
+	},
+	methods: {
+		toggleHelp() {
+			this.showHelp = !this.showHelp && this.$slots.help !== undefined;
+		},
+	},
+	components: {
+		FontAwesomeIcon,
+	},
+};
+</script>

src/components/OpenwbBaseButtonInput2.vue

@@ -0,0 +1,54 @@
+<template>
+	<openwb-base-setting-element>
+		<template #title>{{ title }}</template>
+		<template #help>
+			<slot name="help"></slot>
+		</template>
+		<template #default>
+			<openwb-base-click-button
+				:class="(disabled ? 'btn-outline-' : 'btn-') + subtype"
+				:disabled="disabled"
+				v-bind="$attrs"
+				@buttonClicked.stop="handleClick"
+			>
+				{{ buttonText }}
+			</openwb-base-click-button>
+		</template>
+	</openwb-base-setting-element>
+</template>
+
+<script>
+export default {
+	name: "OpenwbButtonInput2",
+	inheritAttrs: false,
+	props: {
+		title: String,
+		buttonText: String,
+		disabled: { type: Boolean, default: false },
+		subtype: {
+			type: String,
+			validator: function (value) {
+				return (
+					[
+						"info",
+						"success",
+						"warning",
+						"danger",
+						"primary",
+						"secondary",
+						"light",
+						"dark",
+					].indexOf(value) !== -1
+				);
+			},
+			default: "secondary",
+		},
+	},
+	emits: ["buttonClicked"],
+	methods: {
+		handleClick(event) {
+			this.$emit("buttonClicked", event);
+		},
+	},
+};
+</script>

src/components/OpenwbBaseSettingElement.vue

@@ -0,0 +1,53 @@
+<template>
+	<div class="form-row mb-1 align-items-baseline">
+		<label v-on:click="toggleHelp" class="col-md-4 col-form-label">
+			<slot name="title">*Title*</slot>
+			<font-awesome-icon
+				v-if="$slots.help"
+				:icon="
+					showHelp
+						? ['fas', 'question-circle']
+						: ['far', 'question-circle']
+				"
+				class="ml-1"
+				:class="showHelp ? 'text-info' : ''"
+			/>
+		</label>
+		<div class="col-md-8">
+			<div class="form-row">
+				<slot>*Element missing*</slot>
+			</div>
+			<div class="form-row">
+				<span v-if="showHelp" class="form-text alert alert-info my-1 small flex-fill">
+					<slot name="help">*Help Text*</slot>
+				</span>
+			</div>
+		</div>
+	</div>
+</template>
+
+<script>
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { faQuestionCircle as fasQuestionCircle } from "@fortawesome/free-solid-svg-icons";
+import { faQuestionCircle as farQuestionCircle } from "@fortawesome/free-regular-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+
+library.add(fasQuestionCircle, farQuestionCircle);
+
+export default {
+	name: "OpenwbSettingElement",
+	data() {
+		return {
+			showHelp: false,
+		};
+	},
+	methods: {
+		toggleHelp() {
+			this.showHelp = !this.showHelp && this.$slots.help !== undefined;
+		},
+	},
+	components: {
+		FontAwesomeIcon,
+	},
+};
+</script>

src/views/TestingStore.vue

@@ -1,6 +1,43 @@
 <template>
 	<div class="testingStore">
 		<form name="testingStoreForm">
+			<openwb-base-card title="Elemente mit BaseSettingElement">
+				<OpenwbBaseHeading>
+					Basiselement
+				</OpenwbBaseHeading>
+				<OpenwbBaseSettingElement>
+					<template #help>
+						Basis-Element für alle weiteren Elemente.
+						Das ist ein <a href="test">Link</a>.
+					</template>
+				</OpenwbBaseSettingElement>
+				<OpenwbBaseHeading>
+					Abgeleitete Elemente
+				</OpenwbBaseHeading>
+				<openwb-base-button-input2
+					title="Button Input"
+					buttonText="Klick mich"
+					subtype="info"
+				>
+					<template #help>
+						Einfacher Click-Button für Aktionen.
+					</template>
+				</openwb-base-button-input2>
+				<openwb-base-button-group-input2
+					title="Button Group Input"
+					:buttons="[
+						{ buttonValue: 1, text: 'Eins' },
+						{ buttonValue: 2, text: 'Zwei' },
+					]"
+					:model-value="$store.state.examples.buttonGroup1"
+					@update:model-value="updateState('buttonGroup1', $event)"
+				>
+					<template #help>
+						Button-Group Element zur Auswahl weniger Optionen.
+						Bei vielen Optionen besser ein Dropdown verwenden.
+					</template>
+				</openwb-base-button-group-input2>
+			</openwb-base-card>
 			<openwb-base-card title="Einfache Eingabefelder">
 				<openwb-base-text-input
 					title="1. Text"