Use new named slot syntax

Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>

15 files changed, 141 insertions, 89 deletions

diff --git a/src/components/AppNavigation/CalendarSharee.vue b/src/components/AppNavigation/CalendarSharee.vue
index 03aed6df..bf1a8276 100644
--- a/src/components/AppNavigation/CalendarSharee.vue
+++ b/src/components/AppNavigation/CalendarSharee.vue
@@ -27,7 +27,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 <template>
 	<AppNavigationItem
 		:title="sharee.displayName">
-		<template slot="icon">
+		<template #icon>
 			<div v-if="sharee.isGroup" class="avatar icon-group" />
 			<div v-else-if="sharee.isCircle" class="avatar icon-circle" />
 			<Avatar v-else
@@ -36,7 +36,7 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 				:disable-menu="true" />
 		</template>
 
-		<template slot="counter">
+		<template #counter>
 			<ActionCheckbox
 				:disabled="loading"
 				:checked="writeable"
@@ -45,11 +45,13 @@ along with this program. If not, see <http://www.gnu.org/licenses/>.
 			</ActionCheckbox>
 		</template>
 
-		<template slot="actions">
+		<template #actions>
 			<ActionButton
 				:disabled="loading"
 				@click.prevent.stop="deleteSharee">
-				<Delete slot="icon" :size="24" decorative />
+				<template #icon>
+					<Delete :size="24" decorative />
+				</template>
 				{{ $t('tasks', 'Unshare with {displayName}', { displayName: sharee.displayName }) }}
 			</ActionButton>
 		</template>
diff --git a/src/components/AppNavigation/ListItemCalendar.vue b/src/components/AppNavigation/ListItemCalendar.vue
index c79d8e0f..7fa9fb48 100644
--- a/src/components/AppNavigation/ListItemCalendar.vue
+++ b/src/components/AppNavigation/ListItemCalendar.vue
@@ -32,15 +32,19 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 		@dragover.native="dragOver"
 		@dragenter.native="dragEnter"
 		@dragleave.native="dragLeave">
-		<AppNavigationIconBullet slot="icon" :color="calendar.color" />
+		<template #icon>
+			<AppNavigationIconBullet :color="calendar.color" />
+		</template>
 
-		<template v-if="!deleteTimeout" slot="counter">
+		<template v-if="!deleteTimeout" #counter>
 			<Actions v-if="calendar.canBeShared"
 				:class="{shared: hasShares}"
 				class="sharing">
 				<ActionButton
 					@click="toggleShare">
-					<ShareVariant slot="icon" :size="24" decorative />
+					<template #icon>
+						<ShareVariant :size="24" decorative />
+					</template>
 					{{ sharedWithTooltip }}
 				</ActionButton>
 			</Actions>
@@ -51,20 +55,24 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 			</AppNavigationCounter>
 		</template>
 
-		<template v-if="!deleteTimeout" slot="actions">
+		<template v-if="!deleteTimeout" #actions>
 			<ActionButton
 				v-if="!calendar.readOnly"
 				icon="icon-rename"
 				class="edit-calendar"
 				:close-after-click="true"
 				@click="editCalendar">
-				<Pencil slot="icon" :size="24" decorative />
+				<template #icon>
+					<Pencil :size="24" decorative />
+				</template>
 				{{ $t('tasks', 'Edit') }}
 			</ActionButton>
 			<ActionButton
 				:close-after-click="true"
 				@click="copyCalDAVUrl($event, calendar)">
-				<LinkVariant slot="icon" :size="24" decorative />
+				<template #icon>
+					<LinkVariant :size="24" decorative />
+				</template>
 				{{ !copied
 					? $t('tasks', 'Copy private link')
 					: copySuccess
@@ -75,7 +83,9 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 				icon="icon-download"
 				:close-after-click="true"
 				:href="exportUrl">
-				<Download slot="icon" :size="24" decorative />
+				<template #icon>
+					<Download :size="24" decorative />
+				</template>
 				{{ $t('tasks', 'Download') }}
 			</ActionLink>
 			<ActionButton
@@ -86,24 +96,22 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					content: deleteMessage
 				}"
 				@click="scheduleDelete">
-				<Delete
-					v-if="!calendar.isSharedWithMe"
-					slot="icon"
-					:size="24"
-					decorative />
-				<Close
-					v-else
-					slot="icon"
-					:size="24"
-					decorative />
+				<template v-if="!calendar.isSharedWithMe" #icon>
+					<Delete :size="24" decorative />
+				</template>
+				<template v-else #icon>
+					<Close :size="24" decorative />
+				</template>
 				{{ !calendar.isSharedWithMe ? $t('tasks', 'Delete') : $t('tasks', 'Unshare') }}
 			</ActionButton>
 		</template>
 
-		<template v-if="!!deleteTimeout" slot="actions">
+		<template v-else #actions>
 			<ActionButton
 				@click.prevent.stop="cancelDelete">
-				<Undo slot="icon" :size="24" decorative />
+				<template #icon>
+					<Undo :size="24" decorative />
+				</template>
 				{{ undoDeleteMessage }}
 			</ActionButton>
 		</template>
diff --git a/src/components/AppNavigation/Trashbin.vue b/src/components/AppNavigation/Trashbin.vue
index 3d88ab71..7a66ad31 100644
--- a/src/components/AppNavigation/Trashbin.vue
+++ b/src/components/AppNavigation/Trashbin.vue
@@ -24,10 +24,9 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 	<AppNavigationItem :title="t('tasks', 'Trash bin')"
 		:pinned="true"
 		@click.prevent="onShow">
-		<Delete
-			slot="icon"
-			:size="24"
-			decorative />
+		<template #icon>
+			<Delete :size="24" decorative />
+		</template>
 		<template #extra>
 			<Modal v-if="showModal"
 				@close="showModal = false">
@@ -36,10 +35,9 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						{{ t('tasks', 'Loading deleted calendars, tasks and events.') }}
 					</EmptyContent>
 					<EmptyContent v-else-if="!items.length">
-						<Delete
-							slot="icon"
-							:size="24"
-							decorative />
+						<template #icon>
+							<Delete :size="24" decorative />
+						</template>
 						{{ t('tasks', 'You do not have any deleted calendars, tasks or events.') }}
 					</EmptyContent>
 					<template v-else>
@@ -78,10 +76,9 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 									<Actions :force-menu="true">
 										<ActionButton
 											@click="onDeletePermanently(item)">
-											<Delete
-												slot="icon"
-												:size="24"
-												decorative />
+											<template #icon>
+												<Delete :size="24" decorative />
+											</template>
 											{{ t('tasks','Delete permanently') }}
 										</ActionButton>
 									</Actions>
diff --git a/src/components/AppSidebar/CalendarPickerItem.vue b/src/components/AppSidebar/CalendarPickerItem.vue
index 6739b597..a0ad8a81 100644
--- a/src/components/AppSidebar/CalendarPickerItem.vue
+++ b/src/components/AppSidebar/CalendarPickerItem.vue
@@ -32,13 +32,13 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			:value="calendar"
 			:placeholder="translate('tasks', 'Select a calendar')"
 			@select="change">
-			<template slot="singleLabel" slot-scope="scope">
+			<template #singleLabel="scope">
 				<CalendarPickerOption v-bind="scope.option" />
 			</template>
-			<template slot="option" slot-scope="scope">
+			<template #option="scope">
 				<CalendarPickerOption v-bind="scope.option" />
 			</template>
-			<template slot="noResult">
+			<template #noResult>
 				<CalendarPickerOption
 					color=""
 					owner=""
diff --git a/src/components/AppSidebar/DatetimePickerItem.vue b/src/components/AppSidebar/DatetimePickerItem.vue
index a11ab7da..620e0d5f 100644
--- a/src/components/AppSidebar/DatetimePickerItem.vue
+++ b/src/components/AppSidebar/DatetimePickerItem.vue
@@ -61,12 +61,16 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 		<div class="item__actions">
 			<Actions v-show="editing" class="actions__set">
 				<ActionButton @click="setValue()">
-					<Check slot="icon" :size="24" decorative />
+					<template #icon>
+						<Check :size="24" decorative />
+					</template>
 					{{ $t('tasks', 'Set date') }}
 				</ActionButton>
 			</Actions><Actions v-show="editing" class="actions__clear">
 				<ActionButton @click="clearValue">
-					<Delete slot="icon" :size="24" decorative />
+					<template #icon>
+						<Delete :size="24" decorative />
+					</template>
 					{{ $t('tasks', 'Delete date') }}
 				</ActionButton>
 			</Actions>
diff --git a/src/components/AppSidebar/MultiselectItem.vue b/src/components/AppSidebar/MultiselectItem.vue
index 401d2d9e..9277bfda 100644
--- a/src/components/AppSidebar/MultiselectItem.vue
+++ b/src/components/AppSidebar/MultiselectItem.vue
@@ -38,13 +38,13 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			track-by="type"
 			@input="change"
 			@tag="change">
-			<template slot="placeholder">
+			<template #placeholder>
 				<MultiselectOption :display-name="placeholder" :icon="icon" />
 			</template>
-			<template slot="singleLabel" slot-scope="scope">
+			<template #singleLabel="scope">
 				<MultiselectOption v-bind="scope.option" />
 			</template>
-			<template slot="option" slot-scope="scope">
+			<template #option="scope">
 				<MultiselectOption v-bind="scope.option" />
 			</template>
 		</Multiselect>
diff --git a/src/components/AppSidebar/SliderItem.vue b/src/components/AppSidebar/SliderItem.vue
index 0671e9b4..cec2072c 100644
--- a/src/components/AppSidebar/SliderItem.vue
+++ b/src/components/AppSidebar/SliderItem.vue
@@ -51,12 +51,16 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 		<div class="item__actions">
 			<Actions v-show="editing" class="actions__set">
 				<ActionButton @click="setValue()">
-					<Check slot="icon" :size="24" decorative />
+					<template #icon>
+						<Check :size="24" decorative />
+					</template>
 					{{ $t('tasks', 'Set value') }}
 				</ActionButton>
 			</Actions><Actions v-show="editing" class="actions__clear">
 				<ActionButton @click="clearValue">
-					<Delete slot="icon" :size="24" decorative />
+					<template #icon>
+						<Delete :size="24" decorative />
+					</template>
 					{{ $t('tasks', 'Delete value') }}
 				</ActionButton>
 			</Actions>
diff --git a/src/components/AppSidebar/TagsItem.vue b/src/components/AppSidebar/TagsItem.vue
index 5c8f2e96..1127cf67 100644
--- a/src/components/AppSidebar/TagsItem.vue
+++ b/src/components/AppSidebar/TagsItem.vue
@@ -35,15 +35,15 @@ License along with this library. If not, see <http://www.gnu.org/licenses/>.
 			:tag-placeholder="$t('tasks', 'Add this as a new tag')"
 			@input="setTags"
 			@tag="addTag">
-			<template slot="placeholder">
+			<template #placeholder>
 				<MultiselectOption :display-name="placeholder" :icon="icon" />
 			</template>
-			<template slot="clear">
+			<template #clear>
 				<div v-if="tags.length" class="multiselect__icon">
 					<Tag :size="24" decorative />
 				</div>
 			</template>
-			<template slot="noOptions">
+			<template #noOptions>
 				{{ $t('tasks', 'No tag available. Create one!') }}
 			</template>
 		</Multiselect>
diff --git a/src/components/Header.vue b/src/components/Header.vue
index b5e240f1..48e192c1 100644
--- a/src/components/Header.vue
+++ b/src/components/Header.vue
@@ -24,7 +24,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 		<div v-if="$route.params.collectionId !== 'completed' && calendar && !calendar.readOnly"
 			class="header__input">
 			<form @submit.prevent="addTask">
-				<Plus slot="icon" :size="24" decorative />
+				<Plus :size="24" decorative />
 				<input
 					v-model="newTaskName"
 					:placeholder="placeholder"
diff --git a/src/components/SortorderDropdown.vue b/src/components/SortorderDropdown.vue
index 8297372e..1ebbf094 100644
--- a/src/components/SortorderDropdown.vue
+++ b/src/components/SortorderDropdown.vue
@@ -24,7 +24,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 		:title="$t('tasks', 'Change sort order')"
 		container=".header"
 		menu-align="right">
-		<template slot="icon">
+		<template #icon>
 			<component :is="sortOrderIcon" :size="24" decorative />
 			<MenuDown
 				v-if="sortDirection"
@@ -48,7 +48,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 			:class="{selected: sortOrder === order.id}"
 			:close-after-click="true"
 			@click="setSortOrder(order.id)">
-			<template slot="icon">
+			<template #icon>
 				<component :is="order.icon" :size="24" decorative />
 				<MenuDown
 					v-if="order.id == sortOrder && sortDirection"
diff --git a/src/components/TaskBody.vue b/src/components/TaskBody.vue
index 77b1cca7..fa5d3959 100644
--- a/src/components/TaskBody.vue
+++ b/src/components/TaskBody.vue
@@ -101,25 +101,33 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 						:close-after-click="true"
 						class="reactive no-nav open-input"
 						@click="openSubtaskInput">
-						<Plus slot="icon" :size="24" decorative />
+						<template #icon>
+							<Plus :size="24" decorative />
+						</template>
 						{{ $t('tasks', 'Add subtask') }}
 					</ActionButton>
 					<ActionButton v-if="Object.values(task.subTasks).length"
 						class="reactive no-nav"
 						@click="toggleSubtasksVisibility(task)">
-						<SortVariant slot="icon" :size="24" decorative />
+						<template #icon>
+							<SortVariant :size="24" decorative />
+						</template>
 						{{ task.hideSubtasks ? $t('tasks', 'Show subtasks') : $t('tasks', 'Hide subtasks') }}
 					</ActionButton>
 					<ActionButton v-if="hasCompletedSubtasks"
 						class="reactive no-nav"
 						@click="toggleCompletedSubtasksVisibility(task)">
-						<Eye slot="icon" :size="24" decorative />
+						<template #icon>
+							<Eye :size="24" decorative />
+						</template>
 						{{ task.hideCompletedSubtasks ? $t('tasks', 'Show closed subtasks') : $t('tasks', 'Hide closed subtasks') }}
 					</ActionButton>
 					<ActionButton v-if="!readOnly"
 						class="reactive no-nav"
 						@click="scheduleTaskDeletion(task)">
-						<Delete slot="icon" :size="24" decorative />
+						<template #icon>
+							<Delete :size="24" decorative />
+						</template>
 						{{ $t('tasks', 'Delete task') }}
 					</ActionButton>
 				</Actions>
@@ -127,7 +135,9 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					<ActionButton
 						class="reactive no-nav"
 						@click.prevent.stop="clearTaskDeletion(task)">
-						<Undo slot="icon" :size="24" decorative />
+						<template #icon>
+							<Undo :size="24" decorative />
+						</template>
 						{{ $n('tasks', 'Deleting the task in {countdown} second', 'Deleting the task in {countdown} seconds', task.deleteCountdown, { countdown: task.deleteCountdown }) }}
 					</ActionButton>
 				</Actions>
@@ -135,7 +145,9 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					<ActionButton
 						:disabled="readOnly"
 						@click="toggleStarred(task)">
-						<Star slot="icon" :size="24" decorative />
+						<template #icon>
+							<Star :size="24" decorative />
+						</template>
 						{{ $t('tasks', 'Toggle starred') }}
 					</ActionButton>
 				</Actions>
@@ -146,7 +158,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 				v-click-outside="{ handler: closeSubtaskInput, middleware: clickOutsideMiddleware }"
 				class="task-item task-item--input">
 				<form name="addTaskForm" @submit.prevent="addTask">
-					<Plus slot="icon" :size="24" decorative />
+					<Plus :size="24" decorative />
 					<input ref="input"
 						v-model="newTaskName"
 						:placeholder="subtasksCreationPlaceholder"
diff --git a/src/components/TaskCreateDialog.vue b/src/components/TaskCreateDialog.vue
index 075569c8..fcf7736a 100644
--- a/src/components/TaskCreateDialog.vue
+++ b/src/components/TaskCreateDialog.vue
@@ -38,7 +38,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					@changeCalendar="changeCalendar" />
 
 				<div class="property property__summary">
-					<ViewHeadline slot="icon" :size="24" decorative />
+					<ViewHeadline :size="24" decorative />
 					<input v-model="pendingTitle"
 						type="text"
 						:placeholder="t('tasks', 'Task summary')"
@@ -46,7 +46,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 				</div>
 
 				<div class="property property__notes">
-					<TextBoxOutline slot="icon" :size="24" decorative />
+					<TextBoxOutline :size="24" decorative />
 					<textarea v-model="pendingDescription"
 						:disabled="loading" />
 					<div class="modal-buttons">
diff --git a/src/components/TaskStatusDisplay.vue b/src/components/TaskStatusDisplay.vue
index 98741d32..3941f33c 100644
--- a/src/components/TaskStatusDisplay.vue
+++ b/src/components/TaskStatusDisplay.vue
@@ -22,7 +22,7 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 <template>
 	<Actions v-if="status" :disabled="isDisabled">
 		<ActionButton :key="status.status" :disabled="isDisabled" @click="statusClicked">
-			<template slot="icon">
+			<template #icon>
 				<AlertCircleOutline v-if="status.status==='error'" :size="24" class="status--error" />
 				<Check v-if="status.status==='success'" :size="24" class="status--success" />
 				<Loading v-if="status.status==='sync'" :size="24" class="status--sync" />
diff --git a/src/views/AppNavigation.vue b/src/views/AppNavigation.vue
index e89a665f..fa55adac 100644
--- a/src/views/AppNavigation.vue
+++ b/src/views/AppNavigation.vue
@@ -38,14 +38,17 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 				@dragenter.native="dragEnter(...arguments, collection)"
 				@dragleave.native="dragLeave"
 				@click="setInitialRoute(`/collections/${collection.id}`)">
-				<component
-					:is="collection.icon"
-					slot="icon"
-					:size="24"
-					decorative />
-				<AppNavigationCounter v-show="collectionCount(collection.id)" slot="counter">
-					{{ collectionCount(collection.id) | counterFormatter }}
-				</AppNavigationCounter>
+				<template #icon>
+					<component
+						:is="collection.icon"
+						:size="24"
+						decorative />
+				</template>
+				<template #counter>
+					<AppNavigationCounter v-show="collectionCount(collection.id)">
+						{{ collectionCount(collection.id) | counterFormatter }}
+					</AppNavigationCounter>
+				</template>
 			</AppNavigationItem>
 			<draggable
 				class="draggable-container"
@@ -63,7 +66,9 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 				:class="{'collection--edit': creating}"
 				class="collection reactive"
 				@click="startCreate($event)">
-				<Plus slot="icon" :size="24" decorative />
+				<template #icon>
+					<Plus :size="24" decorative />
+				</template>
 				<div :class="{error: nameError}" class="app-navigation-entry-edit">
 					<form>
 						<input id="newListInput"
diff --git a/src/views/AppSidebar.vue b/src/views/AppSidebar.vue
index b091f8cf..3b6c9886 100644
--- a/src/views/AppSidebar.vue
+++ b/src/views/AppSidebar.vue
@@ -44,7 +44,9 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 				:task="task"
 				@editing="(editing) => editingStart = editing"
 				@setValue="setStartDate">
-				<CalendarStart slot="icon" :size="24" decorative />
+				<template #icon>
+					<CalendarStart :size="24" decorative />
+				</template>
 			</DatetimePickerItem>
 			<DatetimePickerItem
 				v-show="!readOnly || task.due"
@@ -56,7 +58,9 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 				:task="task"
 				@editing="(editing) => editingDue = editing"
 				@setValue="setDueDate">
-				<CalendarEnd slot="icon" :size="24" decorative />
+				<template #icon>
+					<CalendarEnd :size="24" decorative />
+				</template>
 			</DatetimePickerItem>
 			<CheckboxItem
 				v-show="showAllDayToggle"
@@ -75,38 +79,44 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 		<template v-if="!task || (task && task.deleteCountdown === null)" #secondary-actions>
 			<ActionButton v-if="!readOnly"
 				@click="togglePinned(task)">
-				<PinOff v-if="task.pinned"
-					slot="icon"
-					:size="24"
-					decorative />
-				<Pin v-else
-					slot="icon"
-					:size="24"
-					decorative />
+				<template v-if="task.pinned" #icon>
+					<PinOff :size="24" decorative />
+				</template>
+				<template v-else #icon>
+					<Pin :size="24" decorative />
+				</template>
 				{{ task.pinned ? $t('tasks', 'Unpin') : $t('tasks', 'Pin') }}
 			</ActionButton>
 			<ActionLink v-if="showInCalendar"
 				:href="calendarLink"
 				:close-after-click="true"
 				target="_blank">
-				<Calendar slot="icon" :size="24" decorative />
+				<template #icon>
+					<Calendar :size="24" decorative />
+				</template>
 				{{ $t('tasks', 'Show in Calendar') }}
 			</ActionLink>
 			<ActionButton v-if="!readOnly"
 				:close-after-click="true"
 				@click="editTitle(true)">
-				<Pencil slot="icon" :size="24" decorative />
+				<template #icon>
+					<Pencil :size="24" decorative />
+				</template>
 				{{ $t('tasks', 'Edit title') }}
 			</ActionButton>
 			<ActionLink
 				:href="downloadURL"
 				:close-after-click="true">
-				<Download slot="icon" :size="24" decorative />
+				<template #icon>
+					<Download :size="24" decorative />
+				</template>
 				{{ $t('tasks', 'Download') }}
 			</ActionLink>
 			<ActionButton v-if="!readOnly"
 				@click="scheduleTaskDeletion(task)">
-				<Delete slot="icon" :size="24" decorative />
+				<template #icon>
+					<Delete :size="24" decorative />
+				</template>
 				{{ $t('tasks', 'Delete') }}
 			</ActionButton>
 		</template>
@@ -114,7 +124,9 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 			<ActionButton
 				class="reactive no-nav"
 				@click.prevent.stop="clearTaskDeletion(task)">
-				<Undo slot="icon" :size="24" decorative />
+				<template #icon>
+					<Undo :size="24" decorative />
+				</template>
 				{{ $n('tasks', 'Deleting the task in {countdown} second', 'Deleting the task in {countdown} seconds', task.deleteCountdown, { countdown: task.deleteCountdown }) }}
 			</ActionButton>
 		</template>
@@ -141,7 +153,9 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 			class="app-sidebar-tab"
 			:name="$t('tasks', 'Details')"
 			:order="0">
-			<InformationOutline slot="icon" :size="24" decorative />
+			<template #icon>
+				<InformationOutline :size="24" decorative />
+			</template>
 			<div>
 				<MultiselectItem
 					v-show="!readOnly || task.class !== 'PUBLIC'"
@@ -169,7 +183,9 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					:color="priorityColor"
 					:task="task"
 					@setValue="({task, value}) => setPriority({ task, priority: value })">
-					<Star slot="icon" :size="24" decorative />
+					<template #icon>
+						<Star :size="24" decorative />
+					</template>
 				</SliderItem>
 				<SliderItem
 					v-show="!readOnly || task.complete"
@@ -181,7 +197,9 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 					:color="task.complete > 0 ? '#4271a6' : null"
 					:task="task"
 					@setValue="({task, value}) => setPercentComplete({ task, complete: value })">
-					<Percent slot="icon" :size="24" decorative />
+					<template #icon>
+						<Percent :size="24" decorative />
+					</template>
 				</SliderItem>
 				<TagsItem
 					v-show="!readOnly || task.tags.length > 0"
@@ -203,7 +221,9 @@ License along with this library.  If not, see <http://www.gnu.org/licenses/>.
 			class="app-sidebar-tab"
 			:name="$t('tasks', 'Notes')"
 			:order="1">
-			<TextBoxOutline slot="icon" :size="24" decorative />
+			<template #icon>
+				<TextBoxOutline :size="24" decorative />
+			</template>
 			<NotesItem
 				v-show="!readOnly || task.note"
 				:value="task.note"