add buttonVariantVGrouped and buttonVariantHGrouped props to toggle g…

…roup style Signed-off-by: Julien Veyssier <eneiluj@posteo.net>
nextcloud-libraries · Jun 20, 2022 · 16d87a8 · 16d87a8
1 parent 6732a91
commit 16d87a8
Showing 1 changed file with 37 additions and 7 deletions.
diff --git a/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue b/src/components/CheckboxRadioSwitch/CheckboxRadioSwitch.vue
@@ -85,8 +85,8 @@ export default {
 ```vue
 <template>
 	<div>
-		<CheckboxRadioSwitch :checked.sync="sharingPermission" value="r" name="sharing_permission_radio" type="radio" :button-variant="true">Default permission read</CheckboxRadioSwitch>
-		<CheckboxRadioSwitch :checked.sync="sharingPermission" value="rw" name="sharing_permission_radio" type="radio" :button-variant="true">Default permission read+write</CheckboxRadioSwitch>
+		<CheckboxRadioSwitch :checked.sync="sharingPermission" value="r" name="sharing_permission_radio" type="radio" :button-variant="true" :button-variant-v-grouped="true">Default permission read</CheckboxRadioSwitch>
+		<CheckboxRadioSwitch :checked.sync="sharingPermission" value="rw" name="sharing_permission_radio" type="radio" :button-variant="true" :button-variant-v-grouped="true">Default permission read+write</CheckboxRadioSwitch>
 		<br>
 		sharingPermission: {{ sharingPermission }}
 	</div>
@@ -155,7 +155,8 @@ export default {
 			'checkbox-radio-switch--disabled': disabled,
 			'checkbox-radio-switch--indeterminate': indeterminate,
 			'checkbox-radio-switch--button-variant': buttonVariant,
-			'checkbox-radio-switch--button-variant-grouped': buttonVariantGrouped,
+			'checkbox-radio-switch--button-variant-v-grouped': buttonVariantVGrouped,
+			'checkbox-radio-switch--button-variant-h-grouped': buttonVariantHGrouped,
 		}"
 		:style="cssVars"
 		class="checkbox-radio-switch">
@@ -242,9 +243,17 @@ export default {
 		},
 
 		/**
-		 * If the elements are all direct successors
+		 * If the elements are all direct successors and grouped horizontally
 		 */
-		buttonVariantGrouped: {
+		buttonVariantHGrouped: {
+			type: Boolean,
+			default: false,
+		},
+
+		/**
+		 * If the elements are all direct successors and grouped vertically
+		 */
+		buttonVariantVGrouped: {
 			type: Boolean,
 			default: false,
 		},
@@ -509,11 +518,11 @@ $spacing: 4px;
 		margin: 0;
 	}
 
-	&--button-variant:not(&--button-variant-grouped) {
+	&--button-variant:not(&--button-variant-v-grouped):not(&--button-variant-h-grouped) {
 		border-radius: var(--border-radius-large);
 	}
 
-	&--button-variant-grouped {
+	&--button-variant-v-grouped {
 		&:first-of-type {
 			border-top-left-radius: var(--border-radius-large);
 			border-top-right-radius: var(--border-radius-large);
@@ -534,6 +543,27 @@ $spacing: 4px;
 		}
 	}
 
+	&--button-variant-h-grouped {
+		&:first-of-type {
+			border-top-left-radius: var(--border-radius-large);
+			border-bottom-left-radius: var(--border-radius-large);
+		}
+		&:last-of-type {
+			border-top-right-radius: var(--border-radius-large);
+			border-bottom-right-radius: var(--border-radius-large);
+		}
+
+		// avoid double borders between elements
+		& + &:not(&.checkbox-radio-switch--checked) {
+			border-left: 0;
+		}
+		& + &.checkbox-radio-switch--checked {
+			// as the selected element has all borders:
+			// small trick to cover the previous bottom border (only if there is one)
+			margin-left: -2px;
+		}
+	}
+
 	&--button-variant.checkbox-radio-switch {
 		border: 2px solid var(--color-border-dark);
 		// better than setting border-radius on labels (producing a small gap)