chore: migrate mixins to composables

src/Forms.vue

@@ -174,8 +174,8 @@ 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 { PERMISSION_TYPES } from './mixins/PermissionTypes.ts'
 import { FormState } from './models/Constants.ts'
+import { PERMISSION_TYPES } from './models/Permissions.ts'
 import logger from './utils/Logger.ts'
 import OcsResponse2Data from './utils/OcsResponse2Data.ts'
 
@@ -273,8 +273,6 @@ export default defineComponent({
 		})
 
 		const updateSelectedForm = (form: FormsForm): void => {
-			sidebarOpened.value = false
-
 			const index = forms.value.findIndex((f) => f.hash === form.hash)
 			if (index > -1) {
 				forms.value[index] = form
@@ -546,6 +544,14 @@ export default defineComponent({
 			},
 		)
 
+		// Close sidebar when a different form is selected
+		watch(
+			() => selectedForm.value.hash,
+			() => {
+				sidebarOpened.value = false
+			},
+		)
+
 		const onLastUpdatedByEventBus = (id: number): void => {
 			const formIndex = forms.value.findIndex((form) => form.id === id)
 			if (formIndex !== -1) {

src/components/AppNavigationForm.vue

@@ -123,8 +123,8 @@ 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.ts'
 import { FormState } from '../models/Constants.ts'
+import { PERMISSION_TYPES } from '../models/Permissions.ts'
 import logger from '../utils/Logger.ts'
 
 type NavigationTarget = 'submit' | 'formRoot'
@@ -141,8 +141,6 @@ export default defineComponent({
 		NcLoadingIcon,
 	},
 
-	mixins: [PermissionTypes],
-
 	props: {
 		form: {
 			type: Object as PropType<FormsForm>,
@@ -186,16 +184,13 @@ export default defineComponent({
 
 	computed: {
 		canEdit(): boolean {
-			return this.form.permissions.includes(
-				this.PERMISSION_TYPES.PERMISSION_EDIT,
-			)
+			return this.form.permissions.includes(PERMISSION_TYPES.PERMISSION_EDIT)
 		},
 
 		canSeeResults(): boolean {
 			return (
-				this.form.permissions.includes(
-					this.PERMISSION_TYPES.PERMISSION_RESULTS,
-				) || (this.form.submissionCount ?? 0) > 0
+				this.form.permissions.includes(PERMISSION_TYPES.PERMISSION_RESULTS)
+				|| (this.form.submissionCount ?? 0) > 0
 			)
 		},
 

src/components/Questions/QuestionColor.vue

@@ -53,7 +53,11 @@ 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.ts'
+import {
+	QUESTION_EMITS,
+	QUESTION_PROPS,
+	useQuestion,
+} from '../../composables/useQuestion.ts'
 
 export default defineComponent({
 	name: 'QuestionColor',
@@ -65,11 +69,14 @@ export default defineComponent({
 		Question,
 	},
 
-	mixins: [QuestionMixin],
-	emits: ['update:values'],
+	props: QUESTION_PROPS,
+	emits: [...QUESTION_EMITS, 'update:values'],
+
+	setup(props, { emit }) {
+		const question = useQuestion(props, { emit })
 
-	setup() {
 		return {
+			...question,
 			IconClose,
 			t,
 		}

src/components/Questions/QuestionDate.vue

@@ -121,7 +121,11 @@ 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.ts'
+import {
+	QUESTION_EMITS,
+	QUESTION_PROPS,
+	useQuestion,
+} from '../../composables/useQuestion.ts'
 
 type PickerType =
 	'date' | 'datetime' | 'time' | 'date-range' | 'datetime-range' | 'time-range'
@@ -146,8 +150,12 @@ export default defineComponent({
 		Question,
 	},
 
-	mixins: [QuestionMixin],
-	emits: ['update:values'],
+	props: QUESTION_PROPS,
+	emits: [...QUESTION_EMITS, 'update:values'],
+
+	setup(props, { emit }) {
+		return useQuestion(props, { emit })
+	},
 
 	data() {
 		return {

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
@@ -114,8 +114,15 @@
 import OptionInputDialog from '../OptionInputDialog.vue'
 import AnswerInput from './AnswerInput.vue'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.ts'
-import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
+import {
+	QUESTION_EMITS,
+	QUESTION_PROPS,
+	useQuestion,
+} from '../../composables/useQuestion.ts'
+import {
+	QUESTION_MULTIPLE_EMITS,
+	useQuestionMultiple,
+} from '../../composables/useQuestionMultiple.ts'
 import { OptionType } from '../../models/Constants.ts'
 
 export default defineComponent({
@@ -133,11 +140,16 @@
 		Question,
 	},
 
-	mixins: [QuestionMixin, QuestionMultipleMixin],
-	emits: ['update:values'],
+	props: QUESTION_PROPS,
+	emits: [...QUESTION_EMITS, ...QUESTION_MULTIPLE_EMITS, 'update:values'],
+
+	setup(props, { emit }) {
+		const question = useQuestion(props, { emit })
+		const questionMultiple = useQuestionMultiple(props, { emit })
 
-	setup() {
 		return {
+			...question,
+			...questionMultiple,
 			IconContentPaste,
 			t,
 		}

src/components/Questions/QuestionFile.vue

@@ -176,7 +176,11 @@ 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.ts'
+import {
+	QUESTION_EMITS,
+	QUESTION_PROPS,
+	useQuestion,
+} from '../../composables/useQuestion.ts'
 import fileTypes from '../../models/FileTypes.ts'
 import logger from '../../utils/Logger.ts'
 import OcsResponse2Data from '../../utils/OcsResponse2Data.ts'
@@ -227,11 +231,14 @@ export default defineComponent({
 		Question,
 	},
 
-	mixins: [QuestionMixin],
-	emits: ['update:values'],
+	props: QUESTION_PROPS,
+	emits: [...QUESTION_EMITS, 'update:values'],
+
+	setup(props, { emit }) {
+		const question = useQuestion(props, { emit })
 
-	setup() {
 		return {
+			...question,
 			IconChevronLeft,
 			IconDelete,
 			IconFile,

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"
@@ -186,8 +186,15 @@
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'
 import AnswerInput from './AnswerInput.vue'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.ts'
-import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
+import {
+	QUESTION_EMITS,
+	QUESTION_PROPS,
+	useQuestion,
+} from '../../composables/useQuestion.ts'
+import {
+	QUESTION_MULTIPLE_EMITS,
+	useQuestionMultiple,
+} from '../../composables/useQuestionMultiple.ts'
 import { GridCellType, OptionType } from '../../models/Constants.ts'
 
 type GridQuestionType = GridCellType | 'text'
@@ -216,11 +223,16 @@
 		Question,
 	},
 
-	mixins: [QuestionMixin, QuestionMultipleMixin],
-	emits: ['update:values'],
+	props: QUESTION_PROPS,
+	emits: [...QUESTION_EMITS, ...QUESTION_MULTIPLE_EMITS, 'update:values'],
+
+	setup(props, { emit }) {
+		const question = useQuestion(props, { emit })
+		const questionMultiple = useQuestionMultiple(props, { emit })
 
-	setup() {
 		return {
+			...question,
+			...questionMultiple,
 			t,
 		}
 	},

src/components/Questions/QuestionLinearScale.vue

@@ -126,7 +126,11 @@ 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.ts'
+import {
+	QUESTION_EMITS,
+	QUESTION_PROPS,
+	useQuestion,
+} from '../../composables/useQuestion.ts'
 
 type LinearScaleExtraSettings = {
 	optionsLowest?: number | null
@@ -146,11 +150,14 @@ export default defineComponent({
 		Question,
 	},
 
-	mixins: [QuestionMixin],
-	emits: ['update:values'],
+	props: QUESTION_PROPS,
+	emits: [...QUESTION_EMITS, 'update:values'],
+
+	setup(props, { emit }) {
+		const question = useQuestion(props, { emit })
 
-	setup() {
 		return {
+			...question,
 			IconPencil,
 			t,
 		}

src/components/Questions/QuestionLong.vue

@@ -41,7 +41,11 @@
 import { t } from '@nextcloud/l10n'
 import { defineComponent } from 'vue'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.ts'
+import {
+	QUESTION_EMITS,
+	QUESTION_PROPS,
+	useQuestion,
+} from '../../composables/useQuestion.ts'
 
 export default defineComponent({
 	name: 'QuestionLong',
@@ -50,8 +54,12 @@ export default defineComponent({
 		Question,
 	},
 
-	mixins: [QuestionMixin],
-	emits: ['update:values', 'keydown'],
+	props: QUESTION_PROPS,
+	emits: [...QUESTION_EMITS, 'update:values', 'keydown'],
+
+	setup(props, { emit }) {
+		return useQuestion(props, { emit })
+	},
 
 	data() {
 		return {

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"
@@ -204,8 +204,15 @@
 import OptionInputDialog from '../OptionInputDialog.vue'
 import AnswerInput from './AnswerInput.vue'
 import Question from './Question.vue'
-import QuestionMixin from '../../mixins/QuestionMixin.ts'
-import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
+import {
+	QUESTION_EMITS,
+	QUESTION_PROPS,
+	useQuestion,
+} from '../../composables/useQuestion.ts'
+import {
+	QUESTION_MULTIPLE_EMITS,
+	useQuestionMultiple,
+} from '../../composables/useQuestionMultiple.ts'
 import {
 	OptionType,
 	QUESTION_EXTRASETTINGS_OTHER_PREFIX,
@@ -235,11 +242,21 @@
 		Question,
 	},
 
-	mixins: [QuestionMixin, QuestionMultipleMixin],
-	emits: ['update:values', 'update:isRequired'],
+	props: QUESTION_PROPS,
+	emits: [
+		...QUESTION_EMITS,
+		...QUESTION_MULTIPLE_EMITS,
+		'update:values',
+		'update:isRequired',
+	],
+
+	setup(props, { emit }) {
+		const question = useQuestion(props, { emit })
+		const questionMultiple = useQuestionMultiple(props, { emit })
 
-	setup() {
 		return {
+			...question,
+			...questionMultiple,
 			IconCheckboxBlankOutline,
 			IconContentPaste,
 			IconRadioboxBlank,

src/components/Questions/QuestionRanking.vue

@@ -213,8 +213,15 @@ 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.ts'
-import QuestionMultipleMixin from '../../mixins/QuestionMultipleMixin.ts'
+import {
+	QUESTION_EMITS,
+	QUESTION_PROPS,
+	useQuestion,
+} from '../../composables/useQuestion.ts'
+import {
+	QUESTION_MULTIPLE_EMITS,
+	useQuestionMultiple,
+} from '../../composables/useQuestionMultiple.ts'
 import { OptionType } from '../../models/Constants.ts'
 
 export default defineComponent({
@@ -233,11 +240,16 @@ export default defineComponent({
 		Question,
 	},
 
-	mixins: [QuestionMixin, QuestionMultipleMixin],
-	emits: ['update:values'],
+	props: QUESTION_PROPS,
+	emits: [...QUESTION_EMITS, ...QUESTION_MULTIPLE_EMITS, 'update:values'],
+
+	setup(props, { emit }) {
+		const question = useQuestion(props, { emit })
+		const questionMultiple = useQuestionMultiple(props, { emit })
 
-	setup() {
 		return {
+			...question,
+			...questionMultiple,
 			IconArrowDown,
 			IconArrowUp,
 			IconClose,