Add loading state to CheckboxRadio

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
nextcloud-libraries · Apr 27, 2021 · f725e38 · f725e38
1 parent c241516
commit f725e38
Showing 1 changed file with 24 additions and 0 deletions.
diff --git a/src/components/CheckboxRadio/CheckboxRadio.vue b/src/components/CheckboxRadio/CheckboxRadio.vue
@@ -32,6 +32,7 @@ This is a standard input checkbox/radio design
 	<div>
 		<CheckboxRadio :checked.sync="sharingEnabled">Enable sharing</CheckboxRadio>
 		<CheckboxRadio :checked.sync="sharingEnabled" :disabled="true">Enable sharing</CheckboxRadio>
+		<CheckboxRadio :checked="sharingEnabled" :loading="loading" @update:checked="onToggle">Enable sharing</CheckboxRadio>
 		<br>
 		sharingEnabled: {{ sharingEnabled }}
 	</div>
@@ -40,8 +41,19 @@ This is a standard input checkbox/radio design
 export default {
 	data() {
 		return {
+			loading: false,
 			sharingEnabled: false,
 		}
+	},
+	methods: {
+		onToggle() {
+			this.loading = true
+
+			setTimeout(() => {
+				this.sharingEnabled = !this.sharingEnabled
+				this.loading = false
+			}, 1000)
+		}
 	}
 }
 </script>
@@ -111,7 +123,9 @@ export default {
 			@change="onToggle">
 
 		<label :for="id" class="checkbox-radio__label">
+			<div v-if="loading" class="icon-loading-small checkbox-radio__icon" />
 			<icon :is="checkboxRadioIconElement"
+				v-else
 				:size="24"
 				class="checkbox-radio__icon"
 				title=""
@@ -201,6 +215,14 @@ export default {
 			default: false,
 		},
 
+		/**
+		 * Loading state
+		 */
+		loading: {
+			type: Boolean,
+			default: false,
+		},
+
 		/**
 		 * Wrapping element tag
 		 */
@@ -327,6 +349,8 @@ $spacing: 4px;
 		// Remove the left margin of material design icons to align text
 		margin-left: -2px;
 		color: var(--color-primary-element);
+		width: 24px;
+		height: 24px;
 	}
 
 	&--disabled &__label {