Migration to Vue 3

.eslintrc.js → .eslintrc.cjs

@@ -20,6 +20,7 @@ module.exports = {
 		'no-plusplus': ['error', { allowForLoopAfterthoughts: true }],
 		'object-curly-spacing': ['error', 'always'],
 		'prefer-template': 'error',
+		'vue/no-v-model-argument': 'off',
 		'vue/no-unused-properties': ['error', {
 			groups: ['props', 'data', 'computed', 'methods'],
 			deepData: true,

.gitignore

@@ -8,6 +8,7 @@
 .vscode/
 build/
 css/*.map
+css/
 js/*
 nbproject/
 node_modules/

package.json

@@ -1,7 +1,7 @@
 {
 	"name": "polls",
 	"description": "Polls app for nextcloud",
-	"version": "6.1.0-rc3",
+	"version": "7.0.0-alpha0",
 	"authors": [
 		{
 			"name": "Vinzenz Rosenkranz",
@@ -26,9 +26,9 @@
 	"private": true,
 	"main": "src/js/main.js",
 	"scripts": {
-		"dev": "webpack --mode=development",
-		"watch": "webpack --mode=development --progress --watch",
-		"build": "webpack --mode=production --progress",
+		"dev": "vite build --mode development",
+		"watch": "vite build --mode development --watch",
+		"build": "vite build --mode production",
 		"lint": "eslint --ext .js,.vue src",
 		"lint:fix": "eslint --ext .js,.vue src --fix",
 		"stylelint": "stylelint src/**/*{.scss,.vue,.css}",
@@ -38,14 +38,13 @@
 	"dependencies": {
 		"@nextcloud/auth": "^2.2.1",
 		"@nextcloud/axios": "^2.4.0",
-		"@nextcloud/dialogs": "^5.1.1",
+		"@nextcloud/dialogs": "4.1.0",
 		"@nextcloud/event-bus": "^3.1.0",
 		"@nextcloud/initial-state": "^2.1.0",
 		"@nextcloud/l10n": "^2.2.0",
 		"@nextcloud/moment": "^1.3.1",
 		"@nextcloud/router": "^3.0.0",
-		"@nextcloud/vue": "^8.6.2",
-		"core-js": "^3.35.1",
+		"@nextcloud/vue": "9.0.0-alpha.1",
 		"dompurify": "^3.0.8",
 		"file-saver": "^2.0.5",
 		"linkify-string": "^4.1.3",
@@ -54,12 +53,11 @@
 		"marked-gfm-heading-id": "^3.1.3",
 		"qrcode": "^1.5.3",
 		"v-click-outside": "^3.2.0",
-		"vue": "^2.7.15",
+		"vue": "^3.4.15",
 		"vue-material-design-icons": "^5.3.0",
-		"vue-router": "^3.6.5",
+		"vue-router": "^4.2.5",
 		"vuedraggable": "^2.24.3",
-		"vuex": "^3.6.2",
-		"vuex-router-sync": "^5.0.0",
+		"vuex": "^4.1.0",
 		"xlsx": "https://cdn.sheetjs.com/xlsx-0.20.0/xlsx-0.20.0.tgz"
 	},
 	"browserslist": [
@@ -72,13 +70,12 @@
 	"devDependencies": {
 		"@nextcloud/babel-config": "^1.0.0",
 		"@nextcloud/browserslist-config": "^3.0.0",
-		"@nextcloud/eslint-config": "^8.3.0",
+		"@nextcloud/eslint-config": "github:nextcloud-libraries/eslint-config#vue3",
 		"@nextcloud/stylelint-config": "^2.4.0",
-		"@nextcloud/webpack-vue-config": "^6.0.1",
+		"@nextcloud/vite-config": "github:nextcloud-libraries/nextcloud-vite-config#vue3",
 		"eslint-config-prettier": "^9.1.0",
 		"eslint-plugin-prettier": "^5.1.3",
 		"prettier": "^3.2.5",
-		"vue-template-compiler": "^2.7.16",
 		"xml2js": "^0.6.2"
 	}
 }

src/js/App.vue

@@ -36,7 +36,7 @@ import { getCurrentUser } from '@nextcloud/auth'
 import { NcContent } from '@nextcloud/vue'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
 import { mapState, mapActions } from 'vuex'
-import '@nextcloud/dialogs/style.css'
+// import '@nextcloud/dialogs/style.css'
 import './assets/scss/colors.scss'
 import './assets/scss/hacks.scss'
 import './assets/scss/print.scss'
@@ -117,7 +117,7 @@ export default {
 
 	},
 
-	beforeDestroy() {
+	beforeUnmount() {
 		this.cancelToken.cancel()
 		unsubscribe('polls:poll:load')
 		unsubscribe('polls:transitions:on')

src/js/adminSettings.js

@@ -21,37 +21,28 @@
  *
  */
 
-import Vue from 'vue'
-import Vuex, { Store } from 'vuex'
+import { createApp } from 'vue'
+import { createStore } from 'vuex'
 import appSettings from './store/modules/appSettings.js'
 import { translate, translatePlural } from '@nextcloud/l10n'
 
 import AdminSettingsPage from './views/AdminSettingsPage.vue'
 
-// /* eslint-disable-next-line camelcase, no-undef */
-// __webpack_nonce__ = btoa(getRequestToken())
-// /* eslint-disable-next-line camelcase, no-undef */
-// __webpack_public_path__ = generateFilePath('polls', '', 'js/')
+// Vue.config.debug = import.meta.env.MODE === 'development'
+// Vue.config.devtools = import.meta.env.MODE === 'development'
 
-Vue.prototype.t = translate
-Vue.prototype.n = translatePlural
-
-Vue.config.debug = process.env.NODE_ENV !== 'production'
-Vue.config.devTools = process.env.NODE_ENV !== 'production'
-// eslint-disable-next-line vue/match-component-file-name
-
-Vue.use(Vuex)
-
-const store = new Store({
+const store = createStore({
 	modules: {
 		appSettings,
 	},
 	strict: process.env.NODE_ENV !== 'production',
 })
 
 /* eslint-disable-next-line no-new */
-new Vue({
-	el: '#content_polls',
-	store,
-	render: (h) => h(AdminSettingsPage),
-})
+const PollsAdminSettings = createApp(AdminSettingsPage)
+	.use(store)
+
+PollsAdminSettings.config.globalProperties.t = translate
+PollsAdminSettings.config.globalProperties.n = translatePlural
+
+AdminSettingsPage.mount('#admin_settings')

src/js/components/Actions/modules/ActionDelete.vue

@@ -84,6 +84,8 @@ export default {
 		},
 	},
 
+	emits: ['delete', 'restore'],
+
 	data() {
 		return {
 			deleteInterval: null,

src/js/components/Actions/modules/ActionRegister.vue

@@ -27,7 +27,7 @@
 			@click="clickAction()">
 			{{ caption }}
 		</NcButton>
-		<NcModal :show.sync="showRegistration"
+		<NcModal v-model:show="showRegistration"
 			:size="registerModalSize"
 			:can-close="true"
 			@close="closeRegisterModal()">

src/js/components/Actions/modules/ActionSendConfirmed.vue

@@ -32,7 +32,7 @@
 			{{ sendButtonCaption }}
 		</NcButton>
 
-		<NcModal :show.sync="showModal"
+		<NcModal v-model:show="showModal"
 			:name="t('polls', 'Result of sent confirmation mails')"
 			size="small">
 			<div class="modal-confirmation-result">
@@ -71,6 +71,8 @@ export default {
 		NcModal,
 	},
 
+	emits: ['success', 'error'],
+
 	data() {
 		return {
 			showModal: false,

src/js/components/AppIcons/modules/MaybeIcon.vue

@@ -65,5 +65,6 @@ export default {
 			default: 24,
 		},
 	},
+	emits: ['click'],
 }
 </script>

src/js/components/AppIcons/modules/PollsAppIcon.vue

@@ -67,5 +67,6 @@ export default {
 			default: 24,
 		},
 	},
+	emits: ['click'],
 }
 </script>

src/js/components/AppIcons/modules/Spinner.vue

@@ -54,6 +54,7 @@ export default {
 			default: 24,
 		},
 	},
+	emits: ['click'],
 }
 </script>
 

src/js/components/Base/modules/BadgeDiv.vue

@@ -20,7 +20,7 @@
   -
   -->
 
-<template lang="html">
+<template>
 	<Component :is="tag" class="badge">
 		<div>
 			<slot name="icon" />

src/js/components/Base/modules/ConfigBox.vue

@@ -20,7 +20,7 @@
   -
   -->
 
-<template lang="html">
+<template>
 	<div class="config-box">
 		<div class="config-box__header">
 			<slot name="icon" />

src/js/components/Base/modules/FlexSpacer.vue

@@ -20,7 +20,7 @@
   -
   -->
 
-<template lang="html">
+<template>
 	<Component :is="tag" class="spacer">
 		<slot />
 	</Component>

src/js/components/Base/modules/HeaderBar.vue

@@ -20,7 +20,7 @@
   -
   -->
 
-<template lang="html">
+<template>
 	<div class="header_bar">
 		<div class="header_bar_top">
 			<div class="bar_top_left">

src/js/components/Base/modules/InputDiv.vue

@@ -20,7 +20,7 @@
   -
   -->
 
-<template lang="html">
+<template>
 	<div :class="['input-div', { numeric: useNumModifiers }]">
 		<label v-if="label">
 			{{ label }}
@@ -135,6 +135,8 @@ export default {
 		},
 	},
 
+	emits: ['input', 'change', 'submit'],
+
 	computed: {
 		computedSignalingClass() {
 			if (this.signalingClass === 'valid') return 'success'

src/js/components/Base/modules/RadioGroupDiv.vue

@@ -20,11 +20,11 @@
   -
   -->
 
-<template lang="html">
+<template>
 	<div class="radio-group-div">
 		<NcCheckboxRadioSwitch v-for="(option, index) in options"
 			:key="option.value"
-			:checked.sync="selectedValue"
+			v-model:checked="selectedValue"
 			:value="option.value"
 			:name="id + '_' + index"
 			type="radio"
@@ -61,6 +61,7 @@ export default {
 		},
 	},
 
+	emits: ['input'],
 	computed: {
 		selectedValue: {
 			get() {

src/js/components/Cards/VoteInfoCards.vue

@@ -20,7 +20,7 @@
   -
   -->
 
-<template lang="html">
+<template>
 	<div class="info-section">
 		<CardUnpublishedPoll v-if="showUnpublishedPollCard" />
 		<CardAddProposals v-if="showAddProposalsCard" />

src/js/components/Cards/modules/CardAddProposals.vue

@@ -20,7 +20,7 @@
   -
   -->
 
-<template lang="html">
+<template>
 	<CardDiv :type="cardType">
 		{{ t('polls', 'You are asked to propose more options. ') }}
 		<p v-if="proposalsExpirySet && !proposalsExpired">

src/js/components/Cards/modules/CardAnonymousPollHint.vue

@@ -20,7 +20,7 @@
   -
   -->
 
-<template lang="html">
+<template>
 	<CardDiv :type="cardType">
 		{{ t('polls', 'Although participant\'s names are hidden, this is not a real anonymous poll because they are not hidden from the owner.') }}
 		{{ t('polls', 'Additionally the owner can remove the anonymous flag at any time, which will reveal the participant\'s names.') }}

src/js/components/Cards/modules/CardClosedPoll.vue

@@ -20,7 +20,7 @@
   -
   -->
 
-<template lang="html">
+<template>
 	<CardDiv :type="cardType">
 		{{ t('polls', 'This poll is closed.') }}
 		<span v-if="!allowEdit">

src/js/components/Cards/modules/CardHiddenParticipants.vue

@@ -20,7 +20,7 @@
   -
   -->
 
-<template lang="html">
+<template>
 	<CardDiv :type="cardType">
 		{{ t('polls', 'Due to possible performance issues {countHiddenParticipants} voters are hidden.', { countHiddenParticipants }) }}
 		{{ t('polls', 'You can reveal them, but you may expect an unwanted long loading time.') }}

src/js/components/Cards/modules/CardLimitedVotes.vue

@@ -20,7 +20,7 @@
   -
   -->
 
-<template lang="html">
+<template>
 	<CardDiv :heading="t('polls', 'Limited votes.')"
 		:type="cardType">
 		<ul>

src/js/components/Cards/modules/CardLockedShare.vue

@@ -20,7 +20,7 @@
   -
   -->
 
-<template lang="html">
+<template>
 	<CardDiv :type="cardType">
 		{{ cardText }}
 		<template #button>

src/js/components/Cards/modules/CardRegister.vue

@@ -20,7 +20,7 @@
   -
   -->
 
-<template lang="html">
+<template>
 	<CardDiv :type="cardType">
 		{{ registrationInvitationText }}
 		<template #button>

src/js/components/Cards/modules/CardSendConfirmations.vue

@@ -20,7 +20,7 @@
   -
   -->
 
-<template lang="html">
+<template>
 	<CardDiv :type="cardType">
 		{{ confirmationSendMessage }}
 		<template #button>
@@ -41,6 +41,8 @@ export default {
 		ActionSendConfirmed: () => import('../../Actions/modules/ActionSendConfirmed.vue'),
 	},
 
+	emits: ['send-confirmation-success', 'send-confirmation-error'],
+
 	data() {
 		return {
 			cardType: 'info',

src/js/components/Cards/modules/CardUnpublishedPoll.vue

@@ -20,7 +20,7 @@
   -
   -->
 
-<template lang="html">
+<template>
 	<CardDiv :type="cardType">
 		{{ t('polls', 'This poll is unpublished.') }}
 		<span v-if="hasVotes">{{ t('polls', 'Existing participants will still have access.') }} </span>

src/js/components/Combo/ComboTable.vue

@@ -20,7 +20,7 @@
   -
   -->
 
-<template lang="html">
+<template>
 	<div :class="['combo-table', viewMode]">
 		<div class="user-column">
 			<div class="spacer" />