chore: Move settings checkbox and input to nextcloud-vue components

Signed-off-by: Julius Knorr <jus@bitgrid.net>

Author: juliusknorr

src/components/SettingsCheckbox.vue

@@ -5,24 +5,26 @@
 
 <template>
 	<div class="settings-entry">
-		<input :id="id"
+		<NcCheckboxRadioSwitch v-model="inputVal"
 			type="checkbox"
-			class="checkbox"
-			:checked="inputVal"
-			:disabled="disabled"
-			@change="$emit('input', $event.target.checked)">
-		<label :for="id">{{ label }}</label><br>
-		<em v-if="hint !== ''">{{ hint }}</em>
+			:disabled="disabled">
+			{{ label }}
+		</NcCheckboxRadioSwitch>
+		<em v-if="hint !== ''" class="checkbox-hint">{{ hint }}</em>
 		<div>
 			<slot />
 		</div>
 	</div>
 </template>
 
 <script>
-let uuid = 0
+import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+
 export default {
 	name: 'SettingsCheckbox',
+	components: {
+		NcCheckboxRadioSwitch,
+	},
 	props: {
 		label: {
 			type: String,
@@ -46,25 +48,19 @@ export default {
 			inputVal: this.value,
 		}
 	},
-	computed: {
-		id() {
-			return 'settings-checkbox-' + this.uuid
-		},
-	},
 	watch: {
 		value(newVal) {
 			this.inputVal = this.value
 		},
-	},
-	beforeCreate() {
-		this.uuid = uuid.toString()
-		uuid += 1
+		inputVal(newVal) {
+			this.$emit('input', newVal)
+		},
 	},
 }
 </script>
 
 <style scoped>
-	.settings-entry {
-		padding-bottom: 15px;
-	}
+.checkbox-hint {
+	margin-right: calc(var(--default-grid-baseline) * 3);
+}
 </style>

src/components/SettingsInputText.vue

@@ -6,26 +6,29 @@
 <template>
 	<form @submit.prevent="submit">
 		<div class="input-wrapper">
-			<label :for="id">{{ label }}</label>
-			<input :id="id"
-				v-model="inputVal"
-				type="text"
+			<NcTextField v-model="inputVal"
+				:label="label"
 				:disabled="disabled"
-				@input="$emit('input', $event.target.value)">
-			<input type="submit"
-				class="icon-confirm"
-				value="">
+				@input="$emit('input', $event.target.value)" />
+			<NcButton type="submit"
+				:disabled="disabled"
+				@click="submit">
+				{{ t('richdocuments', 'Save') }}
+			</NcButton>
 		</div>
-		<p v-if="hint !== ''" class="hint">
-			{{ hint }}
-		</p>
 	</form>
 </template>
 
 <script>
-let uuid = 0
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+
 export default {
 	name: 'SettingsInputText',
+	components: {
+		NcTextField,
+		NcButton,
+	},
 	props: {
 		label: {
 			type: String,
@@ -49,20 +52,11 @@ export default {
 			inputVal: this.value,
 		}
 	},
-	computed: {
-		id() {
-			return 'settings-input-text-' + this.uuid
-		},
-	},
 	watch: {
 		value(newVal) {
 			this.inputVal = newVal
 		},
 	},
-	beforeCreate() {
-		this.uuid = uuid.toString()
-		uuid += 1
-	},
 	methods: {
 		submit() {
 			this.$emit('update', this.inputVal)
@@ -74,16 +68,14 @@ export default {
 <style scoped>
 	.input-wrapper {
 		display: flex;
-		flex-wrap: wrap;
 		width: 100%;
-		max-width: 400px;
+		gap: calc(var(--default-grid-baseline) * 2);
+		align-items: baseline;
 	}
 
-	label {
-		width: 100%;
-	}
-
-	input[type=text] {
+	.input-field {
+		width: auto;
+		max-width: 400px;
 		flex-grow: 1;
 	}