Merge pull request #2160 from nextcloud/fix/noid/slot-style

Use new named slot syntax
nextcloud-libraries · Aug 6, 2021 · 4a07be9 · 4a07be9
2 parents eed31ae + 8228b6e
commit 4a07be9
Show file tree

Hide file tree

Showing 16 changed files with 120 additions and 100 deletions.
diff --git a/src/components/ActionButton/ActionButton.vue b/src/components/ActionButton/ActionButton.vue
@@ -47,19 +47,21 @@ You can also use a custom icon, for example from the vue-material-design-icons l
 <template>
 	<Actions>
 		<ActionButton>
-			<HandLeft
-				slot="icon"
-				:size="24"
-				decorative
-				title="" />
+			<template #icon>
+				<HandLeft
+					:size="24"
+					decorative
+					title="" />
+			</template>
 			Raise left hand
 		</ActionButton>
 		<ActionButton>
-			<HandRight
-				slot="icon"
-				:size="24"
-				decorative
-				title="" />
+			<template #icon>
+				<HandRight
+					:size="24"
+					decorative
+					title="" />
+			</template>
 			Raise right hand
 		</ActionButton>
 	</Actions>

diff --git a/src/components/Actions/Actions.vue b/src/components/Actions/Actions.vue
@@ -89,15 +89,13 @@ It can be used with one or multiple actions.
 	<div style="display: flex;align-items: center;">
 		<button @click="toggled = !toggled">Toggle multiple action</button>
 		<Actions>
-			<DotsHorizontalCircleOutline
-				slot="icon"
-				:size="24"
-				decorative />
+			<template #icon>
+				<DotsHorizontalCircleOutline :size="24" decorative />
+			</template>
 			<ActionButton>
-				<MicrophoneOff
-					slot="icon"
-					:size="24"
-					decorative />
+				<template #icon>
+					<MicrophoneOff :size="24" decorative />
+				</template>
 				Mute
 			</ActionButton>
 			<ActionButton v-if="toggled" icon="icon-delete">Delete</ActionButton>
@@ -174,29 +172,30 @@ export default {
 			@after-show="onOpen"
 			@hide="closeMenu">
 			<!-- Menu open/close trigger button -->
-			<button slot="trigger"
-				ref="menuButton"
-				:disabled="disabled"
-				class="icon action-item__menutoggle"
-				:class="{
-					[defaultIcon]: !iconSlotIsPopulated,
-					'action-item__menutoggle--with-title': menuTitle,
-					'action-item__menutoggle--with-icon-slot': iconSlotIsPopulated,
-					'action-item__menutoggle--default-icon': !iconSlotIsPopulated && defaultIcon === '',
-					'action-item__menutoggle--primary': primary
-				}"
-				aria-haspopup="true"
-				:aria-label="ariaLabel"
-				:aria-controls="randomId"
-				:aria-expanded="opened ? 'true' : 'false'"
-				test-attr="1"
-				type="button"
-				@focus="onFocus"
-				@blur="onBlur">
-				<slot v-if="iconSlotIsPopulated" name="icon" />
-				<DotsHorizontal v-else-if="defaultIcon === ''" :size="24" decorative />
-				{{ menuTitle }}
-			</button>
+			<template #trigger>
+				<button ref="menuButton"
+					:disabled="disabled"
+					class="icon action-item__menutoggle"
+					:class="{
+						[defaultIcon]: !iconSlotIsPopulated,
+						'action-item__menutoggle--with-title': menuTitle,
+						'action-item__menutoggle--with-icon-slot': iconSlotIsPopulated,
+						'action-item__menutoggle--default-icon': !iconSlotIsPopulated && defaultIcon === '',
+						'action-item__menutoggle--primary': primary
+					}"
+					aria-haspopup="true"
+					:aria-label="ariaLabel"
+					:aria-controls="randomId"
+					:aria-expanded="opened ? 'true' : 'false'"
+					test-attr="1"
+					type="button"
+					@focus="onFocus"
+					@blur="onBlur">
+					<slot v-if="iconSlotIsPopulated" name="icon" />
+					<DotsHorizontal v-else-if="defaultIcon === ''" :size="24" decorative />
+					{{ menuTitle }}
+				</button>
+			</template>
 
 			<!-- Menu content -->
 			<div v-show="opened"

diff --git a/src/components/AppContent/AppContent.vue b/src/components/AppContent/AppContent.vue
@@ -44,7 +44,7 @@ can be added by providing content to the named slot `list`.
 ```vue
 <template>
 	<AppContent>
-		<template slot="list">
+		<template #list>
 			<div>Resizable list content</div>
 		</template>
 

diff --git a/src/components/AppNavigationCaption/AppNavigationCaption.vue b/src/components/AppNavigationCaption/AppNavigationCaption.vue
@@ -2,9 +2,9 @@
 ```
 <AppNavigationCaption
 	title="Your caption goes here">
-	<ActionButton
-		slot="actions"
-		icon="icon-add"/>
+	<template #actions>
+		<ActionButton icon="icon-add"/>
+	</template>
 </AppNavigationCaption>
 ```
 </docs>

diff --git a/src/components/AppNavigationIconBullet/AppNavigationIconBullet.vue b/src/components/AppNavigationIconBullet/AppNavigationIconBullet.vue
@@ -25,15 +25,21 @@
 This component is made to be used inside of the [AppNavigationItem](#AppNavigationItem) component slot: `icon`.
 
 ```
-<AppNavigationIconBullet slot="icon" color="0082c9" />
-<AppNavigationIconBullet slot="icon" color="#0082c9" />
+<template #icon>
+	<AppNavigationIconBullet color="0082c9" />
+</template>
+<template #icon>
+	<AppNavigationIconBullet color="#0082c9" />
+</template>
 
 ```
 
 ### AppNavigationItem example
 ```
 <AppNavigationItem  title="Entry 2" :pinned="true">
-	<AppNavigationIconBullet slot="icon" color="0082c9" />
+	<template #icon>
+		<AppNavigationIconBullet color="0082c9" />
+	</template>
 </AppNavigationItem>
 ```
 </docs>

diff --git a/src/components/AppNavigationItem/AppNavigationItem.vue b/src/components/AppNavigationItem/AppNavigationItem.vue
@@ -47,7 +47,7 @@ button will be automatically created.
 
 ```
 <AppNavigationItem title="Item with actions" icon="icon-category-enabled">
-	<template slot="actions">
+	<template #actions>
 		<ActionButton icon="icon-edit" @click="alert('Edit')">
 			Edit
 		</ActionButton>
@@ -60,13 +60,15 @@ button will be automatically created.
 ```
 
 ### Element with counter
-Just nest the counter into `<AppNavigationItem>` and add `slot="counter"` to it.
+Just nest the counter in a template within `<AppNavigationItem>` and add `#counter` to it.
 
 ```
 <AppNavigationItem title="Item with counter" icon="icon-folder">
-	<CounterBubble slot="counter">
-		99+
-	</CounterBubble>
+	<template #counter>
+		<CounterBubble>
+			99+
+		</CounterBubble>
+	</template>
 </AppNavigationItem>
 ```
 

diff --git a/src/components/AppNavigationToggle/AppNavigationToggle.vue b/src/components/AppNavigationToggle/AppNavigationToggle.vue
@@ -27,11 +27,11 @@
 			:aria-expanded="open ? 'true' : 'false'"
 			aria-controls="app-navigation-vue"
 			@click="toggleNavigation">
-			<Menu
-				slot="icon"
-				:size="24"
-				title=""
-				decorative />
+			<template #icon>
+				<Menu :size="24"
+					title=""
+					decorative />
+			</template>
 			{{ label }}
 		</ActionButton>
 	</Actions>

diff --git a/src/components/AppSidebar/AppSidebar.vue b/src/components/AppSidebar/AppSidebar.vue
@@ -35,7 +35,9 @@ include a standard-header like it's used by the files app.
 		title="cat-picture.jpg"
 		subtitle="last edited 3 weeks ago">
 		<AppSidebarTab icon="icon-settings" name="Settings" id="settings">
-			<Cog slot="icon" :size="24" decorative />
+			<template #icon>
+				<Cog :size="24" decorative />
+			</template>
 			Settings tab content
 		</AppSidebarTab>
 		<AppSidebarTab icon="icon-share" name="Sharing" id="share">
@@ -87,7 +89,7 @@ include a standard-header like it's used by the files app.
 		:title-placeholder="titlePlaceholder"
 		:subtitle="subtitle"
 		@update:title="titleUpdate">
-		<template slot="tertiary-actions">
+		<template #tertiary-actions>
 			<form>
 				<input type="checkbox" @click="toggledCheckbox"/>
 			</form>

diff --git a/src/components/Avatar/Avatar.vue b/src/components/Avatar/Avatar.vue
@@ -67,7 +67,7 @@
 			@after-show="handlePopoverAfterShow"
 			@after-hide="handlePopoverAfterHide">
 			<PopoverMenu ref="popoverMenu" :menu="menu" />
-			<template slot="trigger">
+			<template #trigger>
 				<div v-if="contactsMenuLoading" class="icon-loading" />
 				<DotsHorizontal v-else
 					:size="24"

diff --git a/src/components/Breadcrumbs/Breadcrumbs.vue b/src/components/Breadcrumbs/Breadcrumbs.vue
@@ -36,10 +36,9 @@ is dropped on a creadcrumb.
 		<div class="container">
 			<Breadcrumbs @dropped="dropped">
 				<Breadcrumb title="Home" href="/" @dropped="droppedOnCrumb">
-					<Folder
-						slot="icon"
-						:size="24"
-						decorative />
+					<template #icon>
+						<Folder :size="24" decorative />
+					</template>
 				</Breadcrumb>
 				<Breadcrumb title="Folder 1" href="/Folder 1" />
 				<Breadcrumb title="Folder 2" href="/Folder 1/Folder 2" :disable-drop="true" />

diff --git a/src/components/DatetimePicker/DatetimePicker.vue b/src/components/DatetimePicker/DatetimePicker.vue
@@ -121,10 +121,11 @@ export default {
 			<Popover
 				:open.sync="showTimezonePopover"
 				open-class="timezone-popover-wrapper">
-				<button slot="trigger"
-					class="datetime-picker-inline-icon icon-timezone icon"
-					:class="{'datetime-picker-inline-icon--highlighted': highlightTimezone}"
-					@mousedown.stop.prevent="() => {}" />
+				<template #trigger>
+					<button class="datetime-picker-inline-icon icon-timezone icon"
+						:class="{'datetime-picker-inline-icon--highlighted': highlightTimezone}"
+						@mousedown.stop.prevent="() => {}" />
+				</template>
 
 				<div class="timezone-popover-wrapper__title">
 					<strong>

diff --git a/src/components/Multiselect/Multiselect.vue b/src/components/Multiselect/Multiselect.vue
@@ -214,7 +214,9 @@ export default {
 			<slot :name="slot" v-bind="scope" />
 		</template>
 
-		<span slot="noResult">{{ t('No results') }}</span>
+		<template #noResult>
+			<span>{{ t('No results') }}</span>
+		</template>
 	</VueMultiselect>
 </template>
 

diff --git a/src/components/MultiselectTags/MultiselectTags.vue b/src/components/MultiselectTags/MultiselectTags.vue
@@ -75,7 +75,9 @@ export default {
 		:tag-width="60"
 		:disabled="disabled"
 		@input="update">
-		<span slot="noResult">{{ t('No results') }}</span>
+		<template #noResult>
+			<span>{{ t('No results') }}</span>
+		</template>
 		<template #option="scope">
 			{{ tagLabel(scope.option) }}
 		</template>

diff --git a/src/components/Popover/Popover.vue b/src/components/Popover/Popover.vue
@@ -40,7 +40,9 @@ With a `<button>` as a trigger:
 ```vue
 <template>
 	<Popover>
-		<button slot="trigger"> I am the trigger </button>
+		<template #trigger>
+			<button> I am the trigger </button>
+		</template>
 		<template>
 		<h2>this is some content</h2>
 		</template>
@@ -61,7 +63,7 @@ With a `<button>` as a trigger:
 		<!-- This will be the popover target (for the events and position) -->
 		<slot name="trigger" />
 		<!-- This will be the content of the popover -->
-		<template slot="popover">
+		<template #popover>
 			<slot />
 		</template>
 	</VPopover>

diff --git a/src/components/SettingsSelectGroup/SettingsSelectGroup.vue b/src/components/SettingsSelectGroup/SettingsSelectGroup.vue
@@ -35,7 +35,9 @@
 		:disabled="disabled"
 		@input="update"
 		@search-change="findGroup">
-		<span slot="noResult">{{ t( 'No results') }}</span>
+		<template #noResult>
+			<span>{{ t( 'No results') }}</span>
+		</template>
 	</Multiselect>
 </template>
 

diff --git a/src/components/UserBubble/UserBubble.vue b/src/components/UserBubble/UserBubble.vue
@@ -75,34 +75,35 @@ This component has the following slot:
 		class="user-bubble__wrapper"
 		@update:open="onOpenChange">
 		<!-- Main userbubble structure -->
-		<div slot="trigger"
-			v-bind="isLinkComponent"
-			class="user-bubble__content"
-			:style="styles.content"
-			:class="primary ? 'user-bubble__content--primary' : ''"
-			@click="onClick">
-			<!-- Avatar -->
-			<Avatar :url="isCustomAvatar && isAvatarUrl ? avatarImage : undefined"
-				:icon-class="isCustomAvatar && !isAvatarUrl ? avatarImage : undefined"
-				:user="user"
-				:display-name="displayName"
-				:size="size - (margin * 2)"
-				:style="styles.avatar"
-				:disable-tooltip="true"
-				:disable-menu="true"
-				v-bind="$props"
-				class="user-bubble__avatar" />
+		<template #trigger>
+			<div v-bind="isLinkComponent"
+				class="user-bubble__content"
+				:style="styles.content"
+				:class="primary ? 'user-bubble__content--primary' : ''"
+				@click="onClick">
+				<!-- Avatar -->
+				<Avatar :url="isCustomAvatar && isAvatarUrl ? avatarImage : undefined"
+					:icon-class="isCustomAvatar && !isAvatarUrl ? avatarImage : undefined"
+					:user="user"
+					:display-name="displayName"
+					:size="size - (margin * 2)"
+					:style="styles.avatar"
+					:disable-tooltip="true"
+					:disable-menu="true"
+					v-bind="$props"
+					class="user-bubble__avatar" />
 
-			<!-- Title -->
-			<span class="user-bubble__title">
-				{{ displayName || user }}
-			</span>
+				<!-- Title -->
+				<span class="user-bubble__title">
+					{{ displayName || user }}
+				</span>
 
-			<!-- @slot Optional slot just after the title -->
-			<span v-if="$slots.title" class="user-bubble__secondary">
-				<slot name="title" />
-			</span>
-		</div>
+				<!-- @slot Optional slot just after the title -->
+				<span v-if="$slots.title" class="user-bubble__secondary">
+					<slot name="title" />
+				</span>
+			</div>
+		</template>
 
 		<!-- @slot Main Popover content on userbubble hover/focus -->
 		<slot />