Merge pull request #4293 from nextcloud/backport/4263/stable7

[stable7] `NcActionLink` - provide download attributes for single action button in `NcAction`
nextcloud-libraries · Jun 30, 2023 · c03ec94 · c03ec94
2 parents 74aafb0 + 7d5726c
commit c03ec94
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 8 deletions.
diff --git a/src/components/NcActionLink/NcActionLink.vue b/src/components/NcActionLink/NcActionLink.vue
@@ -26,20 +26,50 @@ This component is made to be used inside of the [NcActions](#NcActions) componen
 
 ```
 <template>
-	<NcActions>
-		<NcActionLink href="https://nextcloud.com">
-			<template #icon>
-				<OpenInNew :size="20" />
-			</template>
-			Nextcloud website
-		</NcActionLink>
-	</NcActions>
+	<div style="display: flex; align-items: center;">
+		<NcActions>
+			<NcActionLink href="https://nextcloud.com">
+				<template #icon>
+					<OpenInNew :size="20" />
+				</template>
+				Nextcloud website
+			</NcActionLink>
+		</NcActions>
+
+		<NcActions>
+			<NcActionLink href="https://www.gnu.org/licenses/gpl.odt"
+				  download="AGPL License text.odt">
+				<template #icon>
+					<Download :size="20" />
+				</template>
+				Download AGPL license text
+			</NcActionLink>
+		</NcActions>
+
+		<NcActions>
+			<NcActionLink href="https://nextcloud.com">
+				<template #icon>
+					<OpenInNew :size="20" />
+				</template>
+				Nextcloud website
+			</NcActionLink>
+			<NcActionLink href="https://www.gnu.org/licenses/gpl.odt"
+				  download="AGPL License text.odt">
+				<template #icon>
+					<Download :size="20" />
+				</template>
+				Download AGPL license text
+			</NcActionLink>
+		</NcActions>
+	</div>
 </template>
 <script>
+import Download from 'vue-material-design-icons/Download'
 import OpenInNew from 'vue-material-design-icons/OpenInNew'
 
 export default {
 	components: {
+		Download,
 		OpenInNew,
 	},
 }

diff --git a/src/components/NcButton/NcButton.vue b/src/components/NcButton/NcButton.vue
@@ -270,6 +270,14 @@ export default {
 			default: null,
 		},
 
+		/**
+		 * Providing the download attribute with href downloads file when clicking.
+		 */
+		download: {
+			type: String,
+			default: null,
+		},
+
 		/**
 		 * Providing the to attribute turns the button component into a `router-link`
 		 * element. Takes precedence over the href attribute.
@@ -339,6 +347,9 @@ export default {
 					type: this.href ? null : this.nativeType,
 					role: this.href ? 'button' : null,
 					href: (!this.to && this.href) ? this.href : null,
+					target: (!this.to && this.href) ? '_self' : null,
+					rel: (!this.to && this.href) ? 'nofollow noreferrer noopener' : null,
+					download: (!this.to && this.href && this.download) ? this.download : null,
 					...this.$attrs,
 				},
 				on: {