use vue-draggable-plus

Signed-off-by: Christian Hartmann <chris-hartmann@gmx.de>

Author: Chartman123

package-lock.json

@@ -48,9 +48,9 @@
     "qrcode": "^1.5.4",
     "v-click-outside": "^3.2.0",
     "vue": "^3.5.22",
+    "vue-draggable-plus": "^0.6.1",
     "vue-material-design-icons": "^5.3.1",
-    "vue-router": "^4.6.0",
-    "vuedraggable": "^4.1.0"
+    "vue-router": "^4.6.0"
   },
   "devDependencies": {
     "@mdi/js": "^7.4.47",

package.json

@@ -24,7 +24,7 @@
 				{{ t('forms', 'Add multiple options') }}
 			</NcActionButton>
 		</template>
-		<div
+		<NcSelect
 			v-if="readOnly"
 			:modelValue="selectedOption"
 			:name="name || undefined"
@@ -36,7 +36,7 @@
 			label="text"
 			:aria-label-combobox="selectOptionPlaceholder"
 			:aria-labelledby="titleId"
-			:aria-describedby="description ? descriptionId : undefined">
+			:aria-describedby="description ? descriptionId : undefined"
 			@input="onInput" />
 		<template v-else>
 			<div v-if="isLoading">
@@ -45,7 +45,6 @@
 			<Draggable
 				v-else
 				v-model="choices"
-				:itemKey="(item) => (item.local ? 'option-local' : item.id)"
 				class="question__content"
 				:animation="200"
 				direction="vertical"
@@ -60,26 +59,25 @@
 				@change="saveOptionsOrder('choice')"
 				@start="isDragging = true"
 				@end="isDragging = false">
-				<template #item="{ element: answer, index }">
-					<!-- Answer text input edit -->
-					<AnswerInput
-						ref="input"
-						:answer="answer"
-						:formId="formId"
-						isDropdown
-						:index="index"
-						:isUnique="!isMultiple"
-						:maxIndex="options.length - 1"
-						:maxOptionLength="maxStringLengths.optionText"
-						optionType="choice"
-						@createAnswer="onCreateAnswer"
-						@update:answer="updateAnswer"
-						@delete="deleteOption"
-						@focusNext="focusNextInput"
-						@moveUp="onOptionMoveUp(index)"
-						@moveDown="onOptionMoveDown(index)"
-						@tabbedOut="checkValidOption" />
-				</template>
+				<AnswerInput
+					v-for="(answer, index) in choices"
+					:key="answer.local ? 'option-local' : answer.id"
+					ref="input"
+					:answer="answer"
+					:formId="formId"
+					isDropdown
+					:index="index"
+					:isUnique="!isMultiple"
+					:maxIndex="options.length - 1"
+					:maxOptionLength="maxStringLengths.optionText"
+					optionType="choice"
+					@createAnswer="onCreateAnswer"
+					@update:answer="updateAnswer"
+					@delete="deleteOption"
+					@focusNext="focusNextInput"
+					@moveUp="onOptionMoveUp(index)"
+					@moveDown="onOptionMoveDown(index)"
+					@tabbedOut="checkValidOption" />
 			</Draggable>
 		</template>
 
@@ -91,7 +89,7 @@
 </template>
 
 <script>
-import Draggable from 'vuedraggable'
+import { VueDraggable as Draggable } from 'vue-draggable-plus'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'

patches/vuedraggable+4.1.0.patch

@@ -181,7 +181,7 @@
 
 <script>
 import { translatePlural as n, translate as t } from '@nextcloud/l10n'
-import Draggable from 'vuedraggable'
+import { VueDraggable as Draggable } from 'vue-draggable-plus'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
 import NcInputField from '@nextcloud/vue/components/NcInputField'
 import NcLoadingIcon from '@nextcloud/vue/components/NcLoadingIcon'

src/components/Questions/QuestionDropdown.vue

@@ -120,7 +120,6 @@
 			<Draggable
 				v-else
 				v-model="choices"
-				:itemKey="(item) => (item.local ? 'option-local' : item.id)"
 				class="question__content"
 				:animation="200"
 				direction="vertical"
@@ -135,24 +134,24 @@
 				@change="saveOptionsOrder('choice')"
 				@start="isDragging = true"
 				@end="isDragging = false">
-				<template #item="{ element: answer, index }">
-					<AnswerInput
-						ref="input"
-						:answer="answer"
-						:formId="formId"
-						:index="index"
-						:isUnique="isUnique"
-						:maxIndex="options.length - 1"
-						:maxOptionLength="maxStringLengths.optionText"
-						optionType="choice"
-						@createAnswer="onCreateAnswer"
-						@update:answer="updateAnswer"
-						@delete="deleteOption"
-						@focusNext="focusNextInput"
-						@moveUp="onOptionMoveUp(index)"
-						@moveDown="onOptionMoveDown(index)"
-						@tabbedOut="checkValidOption" />
-				</template>
+				<AnswerInput
+					v-for="(answer, index) in choices"
+					:key="answer.local ? 'option-local' : answer.id"
+					ref="input"
+					:answer="answer"
+					:formId="formId"
+					:index="index"
+					:isUnique="isUnique"
+					:maxIndex="options.length - 1"
+					:maxOptionLength="maxStringLengths.optionText"
+					optionType="choice"
+					@createAnswer="onCreateAnswer"
+					@update:answer="updateAnswer"
+					@delete="deleteOption"
+					@focusNext="focusNextInput"
+					@moveUp="onOptionMoveUp(index)"
+					@moveDown="onOptionMoveDown(index)"
+					@tabbedOut="checkValidOption" />
 			</Draggable>
 			<li
 				v-if="allowOtherAnswer"
@@ -180,7 +179,7 @@
 <script>
 import { showError } from '@nextcloud/dialogs'
 import { translatePlural as n, translate as t } from '@nextcloud/l10n'
-import Draggable from 'vuedraggable'
+import { VueDraggable as Draggable } from 'vue-draggable-plus'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionCheckbox from '@nextcloud/vue/components/NcActionCheckbox'
 import NcActionInput from '@nextcloud/vue/components/NcActionInput'