chore: begin migration to TypeScript

eslint.config.js

@@ -10,6 +10,7 @@ export default [
 	...recommended,
 	eslintPluginPrettierRecommended,
 	{
+		files: ['**/*.ts', '**/*.tsx'],
 		rules: {
 			'@stylistic/exp-list-style': 'off',
 		},

package.json

@@ -19,8 +19,8 @@
     "dev:watch": "NODE_OPTIONS='--max-old-space-size=4096' npx vite --mode development build --watch",
     "format": "prettier --check .",
     "format:fix": "prettier --write .",
-    "lint": "eslint --ext .js,.vue src",
-    "lint:fix": "eslint --ext .js,.vue src --fix",
+    "lint": "eslint --ext .js,.ts,.vue src",
+    "lint:fix": "eslint --ext .js,.ts,.vue src --fix",
     "start:nextcloud": "node playwright/start-nextcloud-server.mjs",
     "stylelint": "stylelint css/*.css css/*.scss src/**/*.vue",
     "stylelint:fix": "stylelint css/*.css css/*.scss src/**/*.vue --fix"
@@ -57,6 +57,7 @@
     "@nextcloud/stylelint-config": "^3.2.2",
     "@nextcloud/vite-config": "^2.5.2",
     "@playwright/test": "^1.61.1",
+    "@types/node": "^25.6.1",
     "@vue/tsconfig": "^0.9.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-prettier": "^5.5.6",

src/Forms.vue

@@ -170,10 +170,10 @@ import AppNavigationForm from './components/AppNavigationForm.vue'
 import ArchivedFormsModal from './components/ArchivedFormsModal.vue'
 import Sidebar from './views/Sidebar.vue'
 import FormsIcon from '../img/forms-dark.svg?raw'
-import PermissionTypes from './mixins/PermissionTypes.js'
+import PermissionTypes from './mixins/PermissionTypes.ts'
 import { FormState } from './models/Constants.ts'
-import logger from './utils/Logger.js'
-import OcsResponse2Data from './utils/OcsResponse2Data.js'
+import logger from './utils/Logger.ts'
+import OcsResponse2Data from './utils/OcsResponse2Data.ts'
 
 const appName = 'forms'
 

src/FormsSettings.vue

@@ -121,7 +121,7 @@ import NcInputField from '@nextcloud/vue/components/NcInputField'
 import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
 import NcSelect from '@nextcloud/vue/components/NcSelect'
 import NcSettingsSection from '@nextcloud/vue/components/NcSettingsSection'
-import logger from './utils/Logger.js'
+import logger from './utils/Logger.ts'
 
 export default {
 	name: 'FormsSettings',

src/components/AppNavigationForm.vue

@@ -118,9 +118,9 @@ import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcListItem from '@nextcloud/vue/components/NcListItem'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import FormsIcon from '../../img/forms-dark.svg?raw'
-import PermissionTypes from '../mixins/PermissionTypes.js'
+import PermissionTypes from '../mixins/PermissionTypes.ts'
 import { FormState } from '../models/Constants.ts'
-import logger from '../utils/Logger.js'
+import logger from '../utils/Logger.ts'
 
 export default {
 	name: 'AppNavigationForm',

src/components/PaginationToolbar.vue

@@ -146,7 +146,7 @@ export default {
 }
 
 .selected-page {
-	padding-left: 5px;
+	padding-inline-start: 5px;
 
 	display: inline-flex;
 	align-items: center;

src/components/QRDialog.vue

@@ -26,7 +26,7 @@
 <script>
 import QRCode from 'qrcode'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
-import logger from '../utils/Logger.js'
+import logger from '../utils/Logger.ts'
 
 export default {
 	name: 'QRDialog',

src/components/Questions/AnswerInput.vue

@@ -100,8 +100,8 @@ import NcActions from '@nextcloud/vue/components/NcActions'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import { INPUT_DEBOUNCE_MS, OptionType } from '../../models/Constants.ts'
-import logger from '../../utils/Logger.js'
-import OcsResponse2Data from '../../utils/OcsResponse2Data.js'
+import logger from '../../utils/Logger.ts'
+import OcsResponse2Data from '../../utils/OcsResponse2Data.ts'
 
 export default {
 	name: 'AnswerInput',

src/components/Questions/QuestionColor.vue

@@ -51,7 +51,7 @@ import NcButton from '@nextcloud/vue/components/NcButton'
 import NcColorPicker from '@nextcloud/vue/components/NcColorPicker'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.js'
+import QuestionMixin from '../../mixins/QuestionMixin.ts'
 
 export default {
 	name: 'QuestionColor',

src/components/Questions/QuestionDate.vue

@@ -119,7 +119,7 @@ import svgClockLoader20 from '../../../img/clock_loader_20.svg?raw'
 import svgClockLoader80 from '../../../img/clock_loader_80.svg?raw'
 import svgEventIcon from '../../../img/event.svg?raw'
 import svgTodayIcon from '../../../img/today.svg?raw'
-import QuestionMixin from '../../mixins/QuestionMixin.js'
+import QuestionMixin from '../../mixins/QuestionMixin.ts'
 
 export default {
 	name: 'QuestionDate',

src/components/Questions/QuestionDropdown.vue

@@ -69,7 +69,7 @@
 					<AnswerInput
 						v-for="(answer, index) in choices"
 						:key="answer.local ? 'option-local' : answer.id"
 						ref="input"
 						:answer="answer"
 						:formId="formId"
 						isDropdown
@@ -110,7 +110,7 @@
 import OptionInputDialog from '../OptionInputDialog.vue'
 import AnswerInput from './AnswerInput.vue'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.js'
+import QuestionMixin from '../../mixins/QuestionMixin.ts'
 import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
 import { OptionType } from '../../models/Constants.ts'
 
@@ -170,7 +170,7 @@
 			}
 
 			const selected = this.values.map((id) =>
 				this.options.find((option) => option.id === parseInt(id)),
 			)
 
 			return this.isMultiple ? selected : selected[0]

src/components/Questions/QuestionFile.vue

@@ -172,10 +172,10 @@ import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcListItem from '@nextcloud/vue/components/NcListItem'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.js'
-import fileTypes from '../../models/FileTypes.js'
-import logger from '../../utils/Logger.js'
-import OcsResponse2Data from '../../utils/OcsResponse2Data.js'
+import QuestionMixin from '../../mixins/QuestionMixin.ts'
+import fileTypes from '../../models/FileTypes.ts'
+import logger from '../../utils/Logger.ts'
+import OcsResponse2Data from '../../utils/OcsResponse2Data.ts'
 
 /**
  * A constant object representing file size units in bytes.

src/components/Questions/QuestionGrid.vue

@@ -112,7 +112,7 @@
 						<AnswerInput
 							v-for="(answer, index) in columns"
 							:key="answer.local ? 'option-local' : answer.id"
 							ref="input"
 							:answer="answer"
 							:formId="formId"
 							:index="index"
@@ -150,7 +150,7 @@
 						<AnswerInput
 							v-for="(answer, index) in rows"
 							:key="answer.local ? 'option-local' : answer.id"
 							ref="input"
 							:answer="answer"
 							:formId="formId"
 							:index="index"
@@ -183,7 +183,7 @@
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import AnswerInput from './AnswerInput.vue'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.js'
+import QuestionMixin from '../../mixins/QuestionMixin.ts'
 import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
 import { GridCellType, OptionType } from '../../models/Constants.ts'
 

src/components/Questions/QuestionLinearScale.vue

@@ -125,7 +125,7 @@ import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwit
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import NcTextArea from '@nextcloud/vue/components/NcTextArea'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.js'
+import QuestionMixin from '../../mixins/QuestionMixin.ts'
 
 export default {
 	name: 'QuestionLinearScale',

src/components/Questions/QuestionLong.vue

@@ -39,7 +39,7 @@
 
 <script>
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.js'
+import QuestionMixin from '../../mixins/QuestionMixin.ts'
 
 export default {
 	name: 'QuestionLong',

src/components/Questions/QuestionMultiple.vue

@@ -138,7 +138,7 @@
 					<AnswerInput
 						v-for="(answer, index) in choices"
 						:key="answer.local ? 'option-local' : answer.id"
 						ref="input"
 						:answer="answer"
 						:formId="formId"
 						:index="index"
@@ -201,7 +201,7 @@
 import OptionInputDialog from '../OptionInputDialog.vue'
 import AnswerInput from './AnswerInput.vue'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.js'
+import QuestionMixin from '../../mixins/QuestionMixin.ts'
 import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
 import {
 	OptionType,
@@ -286,7 +286,7 @@
 		 */
 		otherAnswer() {
 			return this.values.find((v) =>
 				v.startsWith(QUESTION_EXTRASETTINGS_OTHER_PREFIX),
 			)
 		},
 

src/components/Questions/QuestionRanking.vue

@@ -210,7 +210,7 @@ import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import OptionInputDialog from '../OptionInputDialog.vue'
 import AnswerInput from './AnswerInput.vue'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.js'
+import QuestionMixin from '../../mixins/QuestionMixin.ts'
 import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
 import { OptionType } from '../../models/Constants.ts'
 

src/components/Questions/QuestionShort.vue

@@ -86,10 +86,10 @@ import NcActionRadio from '@nextcloud/vue/components/NcActionRadio'
 import NcActions from '@nextcloud/vue/components/NcActions'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.js'
+import QuestionMixin from '../../mixins/QuestionMixin.ts'
 import { INPUT_DEBOUNCE_MS } from '../../models/Constants.ts'
-import validationTypes from '../../models/ValidationTypes.js'
-import { splitRegex, validateExpression } from '../../utils/RegularExpression.js'
+import validationTypes from '../../models/ValidationTypes.ts'
+import { splitRegex, validateExpression } from '../../utils/RegularExpression.ts'
 
 export default {
 	name: 'QuestionShort',

src/components/Results/ResultsSummary.vue

@@ -159,7 +159,7 @@
 import IconFile from '@material-symbols/svg-400/outlined/draft.svg?raw'
 import { generateUrl } from '@nextcloud/router'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
-import answerTypes from '../../models/AnswerTypes.js'
+import answerTypes from '../../models/AnswerTypes.ts'
 import { GridCellType, OptionType } from '../../models/Constants.ts'
 
 export default {

src/components/SidebarTabs/SettingsSidebarTab.vue

@@ -288,7 +288,7 @@ import NcSelect from '@nextcloud/vue/components/NcSelect'
 import NcTextArea from '@nextcloud/vue/components/NcTextArea'
 import TransferOwnership from './TransferOwnership.vue'
 import svgLockOpen from '../../../img/lock_open.svg?raw'
-import ShareTypes from '../../mixins/ShareTypes.js'
+import ShareTypes from '../../mixins/ShareTypes.ts'
 import { FormState } from '../../models/Constants.ts'
 
 export default {

src/components/SidebarTabs/SharingSearchDiv.vue

@@ -23,7 +23,7 @@
 
 <script>
 import NcSelectUsers from '@nextcloud/vue/components/NcSelectUsers'
-import UserSearchMixin from '../../mixins/UserSearchMixin.js'
+import UserSearchMixin from '../../mixins/UserSearchMixin.ts'
 
 export default {
 	components: {

src/components/SidebarTabs/SharingShareDiv.vue

@@ -54,8 +54,8 @@ import NcActions from '@nextcloud/vue/components/NcActions'
 import NcActionSeparator from '@nextcloud/vue/components/NcActionSeparator'
 import NcAvatar from '@nextcloud/vue/components/NcAvatar'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
-import PermissionTypes from '../../mixins/PermissionTypes.js'
-import ShareTypes from '../../mixins/ShareTypes.js'
+import PermissionTypes from '../../mixins/PermissionTypes.ts'
+import ShareTypes from '../../mixins/ShareTypes.ts'
 
 export default {
 	components: {

src/components/SidebarTabs/SharingSidebarTab.vue

@@ -263,12 +263,12 @@
 import SharingSearchDiv from './SharingSearchDiv.vue'
 import SharingShareDiv from './SharingShareDiv.vue'
 import FormsIcon from '../../../img/forms-dark.svg?raw'
-import PermissionTypes from '../../mixins/PermissionTypes.js'
-import ShareLinkMixin from '../../mixins/ShareLinkMixin.js'
-import ShareTypes from '../../mixins/ShareTypes.js'
+import PermissionTypes from '../../mixins/PermissionTypes.ts'
+import ShareLinkMixin from '../../mixins/ShareLinkMixin.ts'
+import ShareTypes from '../../mixins/ShareTypes.ts'
 import { INPUT_DEBOUNCE_MS } from '../../models/Constants.ts'
-import logger from '../../utils/Logger.js'
-import OcsResponse2Data from '../../utils/OcsResponse2Data.js'
+import logger from '../../utils/Logger.ts'
+import OcsResponse2Data from '../../utils/OcsResponse2Data.ts'
 
 export default {
 	components: {
@@ -356,7 +356,7 @@
 				(share) => share.shareType === this.SHARE_TYPES.SHARE_TYPE_LINK,
 			)
 			shares.sort((a, b) =>
 				this.isEmbeddingAllowed(a) ? 1 : this.isEmbeddingAllowed(b) ? -1 : 0,
 			)
 			return shares
 		},

src/components/SidebarTabs/TransferOwnership.vue

@@ -100,8 +100,8 @@ import NcButton from '@nextcloud/vue/components/NcButton'
 import NcDialog from '@nextcloud/vue/components/NcDialog'
 import NcSelectUsers from '@nextcloud/vue/components/NcSelectUsers'
 import NcTextField from '@nextcloud/vue/components/NcTextField'
-import UserSearchMixin from '../../mixins/UserSearchMixin.js'
-import logger from '../../utils/Logger.js'
+import UserSearchMixin from '../../mixins/UserSearchMixin.ts'
+import logger from '../../utils/Logger.ts'
 
 export default {
 	components: {

src/components/TopBar.vue

@@ -41,8 +41,8 @@ import { useIsMobile } from '@nextcloud/vue'
 import NcButton from '@nextcloud/vue/components/NcButton'
 import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
 import PillMenu from './PillMenu.vue'
-import PermissionTypes from '../mixins/PermissionTypes.js'
-import logger from '../utils/Logger.js'
+import PermissionTypes from '../mixins/PermissionTypes.ts'
+import logger from '../utils/Logger.ts'
 
 const submitView = {
 	ariaLabel: t('forms', 'View form'),

src/emptyContent.js → src/emptyContent.ts

@@ -12,3 +12,5 @@ const app = createApp(FormsEmptyContent)
 app.config.globalProperties.t = translate
 app.config.globalProperties.n = translatePlural
 app.mount('#content')
+
+export default app

src/main.js → src/main.ts

@@ -6,7 +6,7 @@
 import { translate, translatePlural } from '@nextcloud/l10n'
 import { createApp } from 'vue'
 import Forms from './Forms.vue'
-import router from './router.js'
+import router from './router.ts'
 
 import 'vite/modulepreload-polyfill'
 import '@nextcloud/dialogs/style.css'

src/mixins/PermissionTypes.ts

@@ -0,0 +1,48 @@
+/**
+ * SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { defineComponent } from 'vue'
+
+// !!! Keep in Sync with lib/Constants.php !!!
+export const PERMISSION_EDIT = 'edit'
+export const PERMISSION_RESULTS = 'results'
+export const PERMISSION_RESULTS_DELETE = 'results_delete'
+export const PERMISSION_SUBMIT = 'submit'
+/** Internal permission to mark public link shares as embeddable */
+export const PERMISSION_EMBED = 'embed'
+export const PERMISSION_ALL = [
+	PERMISSION_EDIT,
+	PERMISSION_RESULTS,
+	PERMISSION_RESULTS_DELETE,
+	PERMISSION_SUBMIT,
+]
+
+export interface PermissionTypesData {
+	PERMISSION_TYPES: {
+		PERMISSION_EDIT: string
+		PERMISSION_RESULTS: string
+		PERMISSION_RESULTS_DELETE: string
+		PERMISSION_SUBMIT: string
+		PERMISSION_EMBED: string
+		PERMISSION_ALL: string[]
+	}
+}
+
+export default defineComponent({
+	name: 'PermissionTypes',
+
+	data(): PermissionTypesData {
+		return {
+			PERMISSION_TYPES: {
+				PERMISSION_EDIT,
+				PERMISSION_RESULTS,
+				PERMISSION_RESULTS_DELETE,
+				PERMISSION_SUBMIT,
+				PERMISSION_EMBED,
+				PERMISSION_ALL,
+			},
+		}
+	},
+})