From 7ed4f4b95c3557d45f390a5127b5373f1a503e27 Mon Sep 17 00:00:00 2001
From: Ferdinand Thiessen <opensource@fthiessen.de>
Date: Wed, 26 Jul 2023 21:17:07 +0200
Subject: [PATCH] feat(NcButton): Allow to use `<span>` inside NcButton default
 slot

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
---
 src/components/NcButton/NcButton.vue | 122 +++++++++++++++++++++++++--
 1 file changed, 116 insertions(+), 6 deletions(-)

diff --git a/src/components/NcButton/NcButton.vue b/src/components/NcButton/NcButton.vue
index 1290271f8c..cf615aa90e 100644
--- a/src/components/NcButton/NcButton.vue
+++ b/src/components/NcButton/NcButton.vue
@@ -319,6 +319,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>
@@ -485,17 +597,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)
@@ -559,7 +669,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,
 				]),
 			],
 		)