feat(NcButton): Allow to use <span> inside NcButton default slot

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
nextcloud-libraries · Jul 27, 2023 · 37ada1a · 37ada1a
1 parent 595f044
commit 37ada1a
Showing 1 changed file with 116 additions and 6 deletions.
diff --git a/src/components/NcButton/NcButton.vue b/src/components/NcButton/NcButton.vue
@@ -291,6 +291,118 @@ export default {
 }
 </script>
 ```
+
+### Usage example: Sorting table columns
+The standard way to implement sortable table column headers should be like this:
+
+```vue
+<template>
+	<table>
+		<thead>
+			<tr>
+				<th :aria-sorted="sortedName" class="row-name">
+					<NcButton alignment="start-reverse"
+						:wide="true"
+						type="tertiary"
+						@click="sortName">
+						<template #icon>
+							<IconDown v-if="sortedName === 'ascending'" class="sort-icon" :size="20" />
+							<IconUp v-else-if="sortedName === 'descending'" class="sort-icon" :size="20" />
+						</template>
+						<span class="table-header">Name</span>
+					</NcButton>
+				</th>
+				<th :aria-sorted="sortedSize" class="row-size">
+					<NcButton alignment="end"
+						:wide="true"
+						type="tertiary"
+						@click="sortSize">
+						<template #icon>
+							<IconDown v-if="sortedSize === 'ascending'" class="sort-icon" :size="20" />
+							<IconUp v-else-if="sortedSize === 'descending'" class="sort-icon" :size="20" />
+						</template>
+						<span class="table-header">Size</span>
+					</NcButton>
+				</th>
+			</tr>
+		</thead>
+		<tbody>
+			<tr>
+				<td class="row-name">Lorem ipsum</td>
+				<td class="row-size">8 MiB</td>
+			</tr>
+		</tbody>
+	</table>
+</template>
+<script>
+import IconUp from 'vue-material-design-icons/MenuUp.vue'
+import IconDown from 'vue-material-design-icons/MenuDown.vue'
+
+export default {
+	components: {
+		IconUp,
+		IconDown,
+	},
+	data() {
+		return {
+			sortedName: null,
+			sortedSize: null,
+		}
+	},
+	methods: {
+		sortName() {
+			if (this.sortedName === 'ascending') {
+				this.sortedName = 'descending'
+			} else if (this.sortedName === 'descending') {
+				this.sortedName = null
+			} else {
+				this.sortedName = 'ascending'
+			}
+		},
+		sortSize() {
+			if (this.sortedSize === 'ascending') {
+				this.sortedSize = 'descending'
+			} else if (this.sortedSize === 'descending') {
+				this.sortedSize = null
+			} else {
+				this.sortedSize = 'ascending'
+			}
+		},
+	},
+}
+</script>
+<style>
+table {
+	table-layout: fixed;
+	width: 300px;
+}
+
+td.row-name {
+	padding-inline-start: 16px;
+}
+
+td.row-size {
+	text-align: right;
+	padding-inline-end: 16px;
+}
+
+.table-header {
+	font-weight: normal;
+	color: var(--color-text-maxcontrast);
+}
+
+.sort-icon {
+	color: var(--color-text-maxcontrast);
+	position: relative;
+	inset-inline: -10px;
+}
+
+.row-size .sort-icon {
+	inset-inline: 10px;
+}
+</style>
+```
+
 </docs>
 
 <script>
@@ -457,17 +569,15 @@ export default {
 	 * @return {object|undefined} The created VNode
 	 */
 	render(h) {
-		const text = this.$slots.default?.[0]?.text?.trim?.()
-
-		const hasText = !!text
+		const hasText = !!this.$slots.default
 		const hasIcon = this.$slots?.icon
 
 		/**
 		 * Always fill either the text prop or the ariaLabel one.
 		 */
-		if (!text && !this.ariaLabel) {
+		if (!hasText && !this.ariaLabel) {
 			console.warn('You need to fill either the text or the ariaLabel props in the button component.', {
-				text,
+				text: this.$slots.default?.[0]?.text,
 				ariaLabel: this.ariaLabel,
 			},
 			this)
@@ -531,7 +641,7 @@ export default {
 						[this.$slots.icon],
 						)
 						: null,
-					hasText ? h('span', { class: 'button-vue__text' }, [text]) : null,
+					hasText ? h('span', { class: 'button-vue__text' }, [this.$slots.default]) : null,
 				]),
 			],
 		)