feat: enhance linear scale component with improved input handling and layout

Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>

Author: Chartman123

src/components/Questions/QuestionLinearScale.vue

@@ -11,35 +11,49 @@
 		v-on="commonListeners">
 		<template #actions>
 			<NcActionInput
+				v-model="lowestOption"
 				type="multiselect"
+				:clearable="false"
+				:label="t('forms', 'Lowest value')"
+				label-outside
 				:options="[0, 1]"
-				:v-model="lowestOption">
-				{{ t('forms', 'Lowest value') }}
+				required>
+				<template #icon>
+					<IconPencil :size="20" />
+				</template>
 			</NcActionInput>
 			<NcActionInput
+				v-model="highestOption"
 				type="multiselect"
+				:clearable="false"
+				:label="t('forms', 'Highest value')"
+				label-outside
 				:options="[2, 3, 4, 5, 6, 7, 8, 9, 10]"
-				:v-model="highestOption">
-				{{ t('forms', 'Highest value') }}
+				required>
+				<template #icon>
+					<IconPencil :size="20" />
+				</template>
 			</NcActionInput>
 			<NcActionInput>
+				<template #icon>
+					<IconPencil :size="20" />
+				</template>
 				{{ t('forms', 'Label for lowest value') }}
 			</NcActionInput>
 			<NcActionInput>
+				<template #icon>
+					<IconPencil :size="20" />
+				</template>
 				{{ t('forms', 'Label for highest value') }}
 			</NcActionInput>
 		</template>
 
-		<fieldset :name="name || undefined" :aria-labelledby="titleId">
-			<NcNoteCard v-if="hasError" :id="errorId" type="error">
-				{{ errorMessage }}
-			</NcNoteCard>
+		<div class="question__content">
 			<NcCheckboxRadioSwitch
 				v-for="option in scaleOptions"
 				:key="option"
+				class="question__content"
 				:disabled="!readOnly"
-				:aria-errormessage="hasError ? errorId : undefined"
-				:aria-invalid="hasError ? 'true' : undefined"
 				:checked="questionValues"
 				:value="option.toString()"
 				:name="`${id}-answer`"
@@ -51,36 +65,32 @@
 				@keydown.enter.exact.prevent="onKeydownEnter">
 				{{ option }}
 			</NcCheckboxRadioSwitch>
-		</fieldset>
+		</div>
 	</Question>
 </template>
 
 <script>
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
-import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 
 import QuestionMixin from '../../mixins/QuestionMixin.js'
 
+import IconPencil from 'vue-material-design-icons/Pencil.vue'
+
 export default {
 	name: 'QuestionLinearScale',
 
 	components: {
+		IconPencil,
 		NcActionInput,
 		NcCheckboxRadioSwitch,
-		NcNoteCard,
 	},
 
 	mixins: [QuestionMixin],
 
 	data() {
 		return {
-			/**
-			 * The shown error message
-			 */
-			errorMessage: null,
-
 			isLoading: false,
 
 			lowestOption: 1,
@@ -100,53 +110,12 @@ export default {
 			return this.answerType.unique === true
 		},
 
-		hasError() {
-			return !!this.errorMessage
-		},
-
 		questionValues() {
 			return this.isUnique ? this.values?.[0] : this.values
 		},
-
-		titleId() {
-			return `q${this.index}_title`
-		},
-
-		errorId() {
-			return `q${this.index}_error`
-		},
 	},
 
 	methods: {
-		async validate() {
-			if (!this.isUnique) {
-				// Validate limits
-				const max = this.extraSettings.optionsLimitMax ?? 0
-				const min = this.extraSettings.optionsLimitMin ?? 0
-				if (max && this.values.length > max) {
-					this.errorMessage = n(
-						'forms',
-						'You must choose at most one option',
-						'You must choose a maximum of %n options',
-						max,
-					)
-					return false
-				}
-				if (min && this.values.length < min) {
-					this.errorMessage = n(
-						'forms',
-						'You must choose at least one option',
-						'You must choose at least %n options',
-						min,
-					)
-					return false
-				}
-			}
-
-			this.errorMessage = null
-			return true
-		},
-
 		onChange(value) {
 			this.$emit('update:values', this.isUnique ? [value].flat() : value)
 		},
@@ -172,11 +141,10 @@ export default {
 			}
 
 			// For checkboxes, only required if no other is checked
-			return this.areNoneChecked
+			return false
 		},
 	},
 }
 </script>
 
-<style lang="scss" scoped>
-</style>
+<style lang="scss" scoped></style>