Migrate to vue 3

Signed-off-by: Raimund Schlüßler <[email protected]>
nextcloud-libraries · Nov 1, 2023 · c7e144d · c7e144d
1 parent 120d960
commit c7e144d
Show file tree

Hide file tree

Showing 39 changed files with 449 additions and 586 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -14,20 +14,6 @@ module.exports = {
 	plugins: [
 		'cypress',
 	],
-	ignorePatterns: [
-		'src/components/NcAppContent*/*.vue',
-		'src/components/NcAppNavigation*/*.vue',
-		'src/components/NcAppSettings*/*.vue',
-		'src/components/NcAppSidebar*/*.vue',
-		'src/components/NcBreadcrumb*/*.vue',
-		'src/components/NcContent/*.vue',
-		'src/components/NcDashboard*/*.vue',
-		'src/components/NcRelatedResourcesPanel*/*.vue',
-		'src/components/NcRich*/**/*.vue',
-		'src/components/NcUserBubble*/*.vue',
-		'src/components/NcVNodes*/*.vue',
-		'src/utils/IsMobileState.js',
-	],
 	parserOptions: {
 		babelOptions: {
 			plugins: [

diff --git a/cypress/component/richtext.cy.ts b/cypress/component/richtext.cy.ts
@@ -1,15 +1,15 @@
 // Markdown guide: https://www.markdownguide.org/basic-syntax/
 // Reference tests: https://github.com/nextcloud-deps/CDMarkdownKit/tree/master/CDMarkdownKitTests
 
-import { mount } from 'cypress/vue2'
+import { mount } from 'cypress/vue'
 import NcRichText from '../../src/components/NcRichText/NcRichText.vue'
 
 describe('NcRichText', () => {
 	describe('renders with markdown', () => {
 		describe('normal text', () => {
 			it('XML-like text (escaped and unescaped)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '<span>text&lt;/span&gt;',
 						useMarkdown: true,
 					},
@@ -31,7 +31,7 @@ describe('NcRichText', () => {
 				]
 
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: testCases.map(i => i.input).join('\n'),
 						useMarkdown: true,
 					},
@@ -44,7 +44,7 @@ describe('NcRichText', () => {
 
 			it('ignored heading (with hash (#) syntax padded to the text)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '#heading',
 						useMarkdown: true,
 					},
@@ -55,7 +55,7 @@ describe('NcRichText', () => {
 
 			it('heading 1 (with equal (=) syntax on the next line)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'heading 1\n==',
 						useMarkdown: true,
 					},
@@ -66,7 +66,7 @@ describe('NcRichText', () => {
 
 			it('heading 2 (with dash (-) syntax on the next line)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'heading 2\n--',
 						useMarkdown: true,
 					},
@@ -79,7 +79,7 @@ describe('NcRichText', () => {
 		describe('bold text', () => {
 			it('bold text (single with asterisk syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '**bold asterisk**',
 						useMarkdown: true,
 					},
@@ -90,7 +90,7 @@ describe('NcRichText', () => {
 
 			it('bold text (single with underscore syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '__bold underscore__',
 						useMarkdown: true,
 					},
@@ -102,7 +102,7 @@ describe('NcRichText', () => {
 			it('bold text (several in line with different syntax)', () => {
 				const outputs = ['bold underscore', 'bold asterisk']
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'normal text __bold underscore__ normal text **bold asterisk** normal text',
 						useMarkdown: true,
 					},
@@ -116,7 +116,7 @@ describe('NcRichText', () => {
 
 			it('bold text (between normal texts with asterisk syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'text**bold**text',
 						useMarkdown: true,
 					},
@@ -127,7 +127,7 @@ describe('NcRichText', () => {
 
 			it('ignored bold text (between normal texts with underscore syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'text__bold__text',
 						useMarkdown: true,
 					},
@@ -139,7 +139,7 @@ describe('NcRichText', () => {
 			it('normal text (between bold texts with asterisk syntax)', () => {
 				const outputs = ['bold asterisk', 'bold asterisk']
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '**bold asterisk**normal text**bold asterisk**',
 						useMarkdown: true,
 					},
@@ -155,7 +155,7 @@ describe('NcRichText', () => {
 		describe('italic text', () => {
 			it('italic text (single with asterisk syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '*italic asterisk*',
 						useMarkdown: true,
 					},
@@ -166,7 +166,7 @@ describe('NcRichText', () => {
 
 			it('italic text (single with underscore syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '_italic underscore_',
 						useMarkdown: true,
 					},
@@ -178,7 +178,7 @@ describe('NcRichText', () => {
 			it('italic text (several in line with different syntax)', () => {
 				const outputs = ['italic underscore', 'italic asterisk']
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'normal text _italic underscore_ normal text *italic asterisk* normal text',
 						useMarkdown: true,
 					},
@@ -192,7 +192,7 @@ describe('NcRichText', () => {
 
 			it('italic text (between normal texts with asterisk syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'text*italic*text',
 						useMarkdown: true,
 					},
@@ -203,7 +203,7 @@ describe('NcRichText', () => {
 
 			it('ignored italic text (between normal texts with underscore syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'text_italic_text',
 						useMarkdown: true,
 					},
@@ -215,7 +215,7 @@ describe('NcRichText', () => {
 			it('normal text (between italic texts with asterisk syntax)', () => {
 				const outputs = ['italic asterisk', 'italic asterisk']
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '*italic asterisk*normal text*italic asterisk*',
 						useMarkdown: true,
 					},
@@ -231,7 +231,7 @@ describe('NcRichText', () => {
 		describe('inline code', () => {
 			it('inline code (single with backticks syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'normal text `inline code` normal text',
 						useMarkdown: true,
 					},
@@ -242,7 +242,7 @@ describe('NcRichText', () => {
 
 			it('inline code (single with double backticks syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'normal text ``inline code`` normal text',
 						useMarkdown: true,
 					},
@@ -253,7 +253,7 @@ describe('NcRichText', () => {
 
 			it('inline code (single with triple backticks syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'normal text ```inline code``` normal text',
 						useMarkdown: true,
 					},
@@ -265,7 +265,7 @@ describe('NcRichText', () => {
 			it('inline code (several in line )', () => {
 				const outputs = ['inline code 1', 'inline code 2']
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'normal text `inline code 1`normal text ``inline code 2`` normal text',
 						useMarkdown: true,
 					},
@@ -279,7 +279,7 @@ describe('NcRichText', () => {
 
 			it('inline code (between normal texts)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'text`inline code`text',
 						useMarkdown: true,
 					},
@@ -290,7 +290,7 @@ describe('NcRichText', () => {
 
 			it('inline code (with ignored bold, italic, XML-like syntax))', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '`inline code **bold text** _italic text_ <span>text&lt;/span&gt;`',
 						useMarkdown: true,
 					},
@@ -303,7 +303,7 @@ describe('NcRichText', () => {
 		describe('multiline code', () => {
 			it('multiline code (with triple backticks syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '```\nmultiline code\n```',
 						useMarkdown: true,
 					},
@@ -314,7 +314,7 @@ describe('NcRichText', () => {
 
 			it('multiline code (ignored info)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '```vue\nmultiline code\n```',
 						useMarkdown: true,
 					},
@@ -325,7 +325,7 @@ describe('NcRichText', () => {
 
 			it('empty multiline code', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '``````',
 						useMarkdown: true,
 					},
@@ -336,7 +336,7 @@ describe('NcRichText', () => {
 
 			it('empty multiline code (with new line)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '```\n```',
 						useMarkdown: true,
 					},
@@ -347,7 +347,7 @@ describe('NcRichText', () => {
 
 			it('multiline code (with several lines)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '```\nline 1\nline 2\nline 3\n```',
 						useMarkdown: true,
 					},
@@ -359,7 +359,7 @@ describe('NcRichText', () => {
 
 			it('multiline code (with ignored bold, italic, inline code, XML-like syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '```\n**bold text**\n_italic text_\n`inline code`\n<span>text&lt;/span&gt;\n```',
 						useMarkdown: true,
 					},
@@ -372,7 +372,7 @@ describe('NcRichText', () => {
 		describe('blockquote', () => {
 			it('blockquote (with greater then (>) syntax - normal)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '> blockquote',
 						useMarkdown: true,
 					},
@@ -383,7 +383,7 @@ describe('NcRichText', () => {
 
 			it('blockquote (with greater then (&gt;) syntax - escaped)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '&gt; blockquote',
 						useMarkdown: true,
 					},
@@ -394,7 +394,7 @@ describe('NcRichText', () => {
 
 			it('blockquote (with bold, italic text, inline code)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '> blockquote **bold text** _italic text_ `inline code`',
 						useMarkdown: true,
 					},
@@ -408,7 +408,7 @@ describe('NcRichText', () => {
 
 			it('blockquote (with several lines)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '> line 1\nline 2\n line 3',
 						useMarkdown: true,
 					},
@@ -419,7 +419,7 @@ describe('NcRichText', () => {
 
 			it('blockquote (divided from normal text)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: 'normal text\n> line 1\nline 2\n\nnormal text',
 						useMarkdown: true,
 					},
@@ -430,7 +430,7 @@ describe('NcRichText', () => {
 
 			it('blockquote (with several paragraphs)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '> line 1\n>\n> line 3',
 						useMarkdown: true,
 					},
@@ -441,7 +441,7 @@ describe('NcRichText', () => {
 
 			it('blockquote (with nested blockquote)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '> blockquote\n>\n>> nested blockquote',
 						useMarkdown: true,
 					},
@@ -460,7 +460,7 @@ describe('NcRichText', () => {
 				]
 
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: testCases.map(i => i.input).join('\n'),
 						useMarkdown: true,
 					},
@@ -481,7 +481,7 @@ describe('NcRichText', () => {
 				]
 
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: testCases.map(i => i.input).join('\n'),
 						useMarkdown: true,
 					},
@@ -502,7 +502,7 @@ describe('NcRichText', () => {
 				]
 
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: testCases.map(i => i.input).join('\n'),
 						useMarkdown: true,
 					},
@@ -518,7 +518,7 @@ describe('NcRichText', () => {
 		describe('dividers', () => {
 			it('dividers (with different syntax)', () => {
 				mount(NcRichText, {
-					propsData: {
+					props: {
 						text: '***\n---\n___',
 						useMarkdown: true,
 					},

diff --git a/src/components/NcAppContent/NcAppContent.vue b/src/components/NcAppContent/NcAppContent.vue
@@ -81,7 +81,7 @@ The list size must be between the min and the max width value.
 			<div v-if="isMobile"
 				:class="showDetails ? 'app-content-wrapper--show-details' : 'app-content-wrapper--show-list'"
 				class="app-content-wrapper app-content-wrapper--mobile">
-				<NcAppDetailsToggle v-if="hasList && showDetails" @click.native.stop.prevent="hideDetails" />
+				<NcAppDetailsToggle v-if="hasList && showDetails" @click.stop.prevent="hideDetails" />
 
 				<slot name="list" />
 				<slot />