fix(files): replace input fields with `NcTextField`

Signed-off-by: julia.kirschenheuter <julia.kirschenheuter@nextcloud.com>

css/app-sidebar.scss

@@ -163,8 +163,7 @@
 			display: flex;
 			align-items: center;
 
-			.multiselect,
-			input[type=number] {
+			.multiselect {
 				min-width: 100px;
 				width: 25%;
 			}

src/components/Editor/Repeat/RepeatFreqInterval.vue

@@ -22,16 +22,14 @@
 
 <template>
 	<div class="repeat-option-set repeat-option-set--interval-freq">
-		<span class="repeat-option-set__label">
-			{{ repeatEveryLabel }}
-		</span>
-		<input v-if="!isIntervalDisabled"
-			class="intervalInput"
+		<NcTextField v-if="!isIntervalDisabled"
+			:label="repeatEveryLabel"
 			type="number"
+			class="repeat-option-set-input"
 			min="1"
 			max="366"
 			:value="interval"
-			@input="changeInterval">
+			@input="changeInterval" />
 		<RepeatFreqSelect :freq="frequency"
 			:count="interval"
 			@change="changeFrequency" />
@@ -40,11 +38,13 @@
 
 <script>
 import RepeatFreqSelect from './RepeatFreqSelect.vue'
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 
 export default {
 	name: 'RepeatFreqInterval',
 	components: {
 		RepeatFreqSelect,
+		NcTextField,
 	},
 	props: {
 		frequency: {
@@ -89,3 +89,9 @@ export default {
 	},
 }
 </script>
+
+<style scoped>
+	.repeat-option-set-input {
+		margin: 0 5px 0 0;
+	}
+</style>

src/components/Editor/Resources/ResourceSeatingCapacity.vue

@@ -22,34 +22,36 @@
 
 <template>
 	<div class="resource-capacity">
-		<div class="resource-capacity__input">
-			<input type="number"
-				min="0"
-				:placeholder="placeholder"
-				:value="value"
-				@input.prevent.stop="changeValue">
-		</div>
+		<NcTextField :label="placeholder"
+			type="number"
+			min="0"
+			:placeholder="placeholder"
+			:value.sync="capacityValue" />
 	</div>
 </template>
 
 <script>
+import NcTextField from '@nextcloud/vue/dist/Components/NcTextField.js'
 export default {
 	name: 'ResourceSeatingCapacity',
+	components: {
+		NcTextField,
+	},
 	props: {
 		value: {
 			type: Number,
 			required: true,
 		},
 	},
+	data() {
+		return {
+			capacityValue: this.value,
+		}
+	},
 	computed: {
 		placeholder() {
 			return this.$t('calendar', 'Minimum seating capacity')
 		},
 	},
-	methods: {
-		changeValue(event) {
-			this.$emit('update:value', parseInt(event.target.value))
-		},
-	},
 }
 </script>