Merge pull request #1318 from nextcloud/dependabot/npm_and_yarn/nextc…

…loud/vue-8.14.0

Chore(deps): Bump @nextcloud/vue from 7.12.7 to 8.14.0

css/notes.css

@@ -28,7 +28,7 @@ li:focus  .app-navigation-entry__utils .action-item {
 
 /* Welcome / Help */
 .feature {
-	background-position-y: center;
+	background-position: 0 center;
 	width: 100%;
 	min-height: 32px;
 	line-height: 32px;

package.json

@@ -14,12 +14,12 @@
   },
   "dependencies": {
     "@nextcloud/axios": "^2.5.0",
-    "@nextcloud/dialogs": "^4.2.7",
+    "@nextcloud/dialogs": "^5.3.5",
     "@nextcloud/event-bus": "^3.3.1",
     "@nextcloud/initial-state": "^2.2.0",
     "@nextcloud/moment": "^1.3.1",
-    "@nextcloud/router": "^2.2.1",
-    "@nextcloud/vue": "^7.12.7",
+    "@nextcloud/router": "^3.0.1",
+    "@nextcloud/vue": "^8.14.0",
     "diff": "^5.2.0",
     "easymde": "^2.18.0",
     "markdown-it": "^13.0.2",
@@ -47,4 +47,4 @@
     "extends @nextcloud/browserslist-config"
   ],
   "version": "4.10.0"
-}
+}

src/App.vue

@@ -19,7 +19,7 @@
 			<template #footer>
 				<ul class="app-navigation-entry__settings">
 					<NcAppNavigationItem
-						:title="t('notes', 'Notes settings')"
+						:name="t('notes', 'Notes settings')"
 						@click.prevent="openSettings"
 					>
 						<CogIcon slot="icon" :size="20" />
@@ -50,7 +50,7 @@ import {
 } from '@nextcloud/vue'
 import { loadState } from '@nextcloud/initial-state'
 import { showSuccess, TOAST_UNDO_TIMEOUT, TOAST_PERMANENT_TIMEOUT } from '@nextcloud/dialogs'
-import '@nextcloud/dialogs/dist/index.css'
+import '@nextcloud/dialogs/style.css'
 
 import PlusIcon from 'vue-material-design-icons/Plus.vue'
 import CogIcon from 'vue-material-design-icons/Cog.vue'

src/components/AppSettings.vue

@@ -1,12 +1,12 @@
 <template>
 	<NcAppSettingsDialog
-		:title="t('notes', 'Notes settings')"
+		:name="t('notes', 'Notes settings')"
 		:class="{ loading: saving }"
 		:show-navigation="true"
 		:open="settingsOpen"
 		@update:open="setSettingsOpen($event)"
 	>
-		<NcAppSettingsSection id="help-basics" :title="t('notes', 'Basics')">
+		<NcAppSettingsSection id="help-basics" :name="t('notes', 'Basics')">
 			<div class="feature icon-add">
 				{{ t('notes', 'Start writing a note by clicking on “{newnote}” in the app navigation.', { newnote: t('notes', 'New note') }) }}
 			</div>
@@ -17,7 +17,7 @@
 				{{ t('notes', 'Organize your notes in categories.') }}
 			</div>
 		</NcAppSettingsSection>
-		<NcAppSettingsSection id="notes-path-section" :title="t('notes', 'Notes path')">
+		<NcAppSettingsSection id="notes-path-section" :name="t('notes', 'Notes path')">
 			<p class="app-settings-section__desc">
 				{{ t('notes', 'Folder to store your notes') }}
 			</p>
@@ -29,7 +29,7 @@
 				@click="onChangeNotePath"
 			>
 		</NcAppSettingsSection>
-		<NcAppSettingsSection id="file-suffix-section" :title="t('notes', 'File extension')">
+		<NcAppSettingsSection id="file-suffix-section" :name="t('notes', 'File extension')">
 			<p class="app-settings-section__desc">
 				{{ t('notes', 'File extension for new notes') }}
 			</p>
@@ -47,7 +47,7 @@
 				@change="onChangeSettings"
 			>
 		</NcAppSettingsSection>
-		<NcAppSettingsSection id="note-mode-section" :title="t('notes', 'Display mode')">
+		<NcAppSettingsSection id="note-mode-section" :name="t('notes', 'Display mode')">
 			<p class="app-settings-section__desc">
 				{{ t('notes', 'Display mode for notes') }}
 			</p>
@@ -57,7 +57,7 @@
 				</option>
 			</select>
 		</NcAppSettingsSection>
-		<NcAppSettingsSection id="help-shortcuts" :title="t('notes', 'Shortcuts')">
+		<NcAppSettingsSection id="help-shortcuts" :name="t('notes', 'Shortcuts')">
 			<div class="feature icon-toggle-filelist">
 				{{ t('notes', 'Use shortcuts to quickly navigate this app.') }}
 			</div>
@@ -72,7 +72,7 @@
 				</tr>
 			</table>
 		</NcAppSettingsSection>
-		<NcAppSettingsSection id="help-apps" :title="t('notes', 'Mobile apps')">
+		<NcAppSettingsSection id="help-apps" :name="t('notes', 'Mobile apps')">
 			<HelpMobile />
 		</NcAppSettingsSection>
 	</NcAppSettingsDialog>
@@ -84,7 +84,7 @@ import {
 	NcAppSettingsSection,
 } from '@nextcloud/vue'
 
-import { FilePicker, FilePickerType } from '@nextcloud/dialogs'
+import { getFilePickerBuilder } from '@nextcloud/dialogs'
 
 import { setSettings } from '../NotesService.js'
 import store from '../store.js'
@@ -153,24 +153,22 @@ export default {
 	},
 
 	methods: {
-		onChangeNotePath(event) {
-			// Code Example from: https://github.com/nextcloud/text/blob/main/src/components/Menu/ActionInsertLink.vue#L130-L155
-			const filePicker = new FilePicker(
-				t('text', 'Select folder to link to'),
-				false, // multiselect
-				['text/directory'], // mime filter
-				true, // modal
-				FilePickerType.Choose, // type
-				true, // directories
-				event.target.value === '' ? '/' : event.target.value, // path
-			)
-			filePicker.pick().then((file) => {
-				const client = OC.Files.getClient()
-				client.getFileInfo(file).then((_status, fileInfo) => {
-					this.settings.notesPath = fileInfo.path === '/' ? `/${fileInfo.name}` : `${fileInfo.path}/${fileInfo.name}`
-					this.onChangeSettingsReload()
+		async onChangeNotePath(event) {
+			const filePicker = getFilePickerBuilder(t('notes', 'Pick a notes folder'))
+				.allowDirectories(true)
+				.startAt(event.target.value === '' ? '/' : event.target.value)
+				.addButton({
+					label: t('notes', 'Set notes folder'),
+					callback: (nodes) => {
+						const node = nodes[0]
+						this.settings.notesPath = node.path
+						this.onChangeSettingsReload()
+					},
 				})
-			})
+				.build()
+
+			await filePicker.pick()
+
 		},
 		onChangeSettings() {
 			this.saving = true

src/components/CategoriesList.vue

@@ -1,30 +1,38 @@
 <template>
 	<Fragment>
 		<NcAppNavigationItem
-			:title="t('notes', 'All notes')"
+			:name="t('notes', 'All notes')"
 			:class="{ active: selectedCategory === null }"
 			@click.prevent.stop="onSelectCategory(null)"
 		>
-			<HistoryIcon slot="icon" :size="20" />
-			<NcAppNavigationCounter slot="counter">
-				{{ numNotes }}
-			</NcAppNavigationCounter>
+			<template #icon>
+				<HistoryIcon :size="20" />
+			</template>
+			<template #counter>
+				<NcCounterBubble>
+					{{ numNotes }}
+				</NcCounterBubble>
+			</template>
 		</NcAppNavigationItem>
 
-		<NcAppNavigationCaption :title="t('notes', 'Categories')" />
+		<NcAppNavigationCaption :name="t('notes', 'Categories')" />
 
 		<NcAppNavigationItem v-for="category in categories"
 			:key="category.name"
-			:title="categoryTitle(category.name)"
+			:name="categoryTitle(category.name)"
 			:icon="category.name === '' ? 'icon-emptyfolder' : 'icon-files'"
 			:class="{ active: category.name === selectedCategory }"
 			@click.prevent.stop="onSelectCategory(category.name)"
 		>
-			<FolderOutlineIcon v-if="category.name === ''" slot="icon" :size="20" />
-			<FolderIcon v-else slot="icon" :size="20" />
-			<NcAppNavigationCounter slot="counter">
-				{{ category.count }}
-			</NcAppNavigationCounter>
+			<template #icon>
+				<FolderOutlineIcon v-if="category.name === ''" :size="20" />
+				<FolderIcon v-else :size="20" />
+			</template>
+			<template #counter>
+				<NcCounterBubble>
+					{{ category.count }}
+				</NcCounterBubble>
+			</template>
 		</NcAppNavigationItem>
 	</Fragment>
 </template>
@@ -33,7 +41,7 @@
 import {
 	NcAppNavigationItem,
 	NcAppNavigationCaption,
-	NcAppNavigationCounter,
+	NcCounterBubble,
 } from '@nextcloud/vue'
 import { Fragment } from 'vue-fragment'
 
@@ -52,7 +60,7 @@ export default {
 		Fragment,
 		NcAppNavigationItem,
 		NcAppNavigationCaption,
-		NcAppNavigationCounter,
+		NcCounterBubble,
 		FolderIcon,
 		FolderOutlineIcon,
 		HistoryIcon,
@@ -83,7 +91,7 @@ export default {
 	},
 }
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .app-navigation-entry-wrapper.active:deep(.app-navigation-entry) {
 	background-color: var(--color-primary-element-light) !important;
 }

src/components/EditorEasyMDE.vue

@@ -33,7 +33,7 @@ import EasyMDE from 'easymde'
 import axios from '@nextcloud/axios'
 import { generateUrl } from '@nextcloud/router'
 import { showError } from '@nextcloud/dialogs'
-import '@nextcloud/dialogs/dist/index.css'
+import '@nextcloud/dialogs/style.css'
 import {
 	NcActions,
 	NcActionButton,

src/components/NoteItem.vue

@@ -1,6 +1,6 @@
 <template>
 	<NcListItem
-		:title="title"
+		:name="title"
 		:active="isSelected"
 		:to="{ name: 'note', params: { noteId: note.id.toString() } }"
 		@update:menuOpen="onMenuChange"
@@ -23,7 +23,6 @@
 			<FileDocumentOutlineIcon v-else
 				slot="icon"
 				:size="20"
-				fill-color="var(--color-text-lighter)"
 			/>
 		</template>
 		<template v-if="isShared" #indicator>
@@ -297,8 +296,11 @@ export default {
 	},
 }
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .material-design-icon {
-	width: 44px;
+	width: var(--default-clickable-area);
+	.list-item__wrapper--active & {
+		color: var(--color-primary-element-text) !important;
+	}
 }
 </style>

src/components/NotesCaption.vue

@@ -1,6 +1,6 @@
 <template>
-	<h3 class="title">
-		{{ title }}
+	<h3 class="name">
+		{{ name }}
 	</h3>
 </template>
 
@@ -12,7 +12,7 @@ export default {
 	},
 
 	props: {
-		title: {
+		name: {
 			type: String,
 			required: true,
 		},
@@ -21,7 +21,7 @@ export default {
 </script>
 
 <style scoped>
-	.title {
+	.name {
 		font-weight: bold;
 		color: var(--color-primary-element);
 		font-size: var(--default-font-size);

src/components/NotesView.vue

@@ -13,11 +13,11 @@
 				<template v-for="(group, idx) in groupedNotes" v-else>
 					<NotesCaption v-if="group.category && category!==group.category"
 						:key="group.category"
-						:title="categoryToLabel(group.category)"
+						:name="categoryToLabel(group.category)"
 					/>
 					<NotesCaption v-if="group.timeslot"
 						:key="group.timeslot"
-						:title="group.timeslot"
+						:name="group.timeslot"
 					/>
 					<NotesList
 						:key="idx"

src/main.js

@@ -3,6 +3,9 @@ import App from './App.vue'
 import router from './router.js'
 import store from './store.js'
 
+__webpack_nonce__ = btoa(OC.requestToken) // eslint-disable-line
+__webpack_public_path__ = OC.linkTo('notes', 'js/') // eslint-disable-line
+
 Vue.mixin({ methods: { t, n } })
 
 // Make sure that the filesClient is available in the global scope used by the sidebar