[stable32] feat: vue3 phase3 script setup

src/components/RightSidebar/EnvelopeFilesList.vue

@@ -129,7 +129,7 @@
 	</NcDialog>
 </template>
 
-<script>
+<script lang="ts">
 import { t } from '@nextcloud/l10n'
 
 import {

src/components/RightSidebar/RequestSignatureTab.vue

@@ -249,7 +249,7 @@
 			@close="showEnvelopeFilesDialog = false" />
 	</div>
 </template>
-<script>
+<script lang="ts">
 
 import { t } from '@nextcloud/l10n'
 
@@ -316,16 +316,6 @@ import { useUserConfigStore } from '../../store/userconfig.js'
 import { startLongPolling } from '../../services/longPolling'
 import { useSigningOrder } from '../../composables/useSigningOrder.js'
 
-const iconMap = {
-	svgAccount,
-	svgEmail,
-	svgSignal,
-	svgSms,
-	svgTelegram,
-	svgWhatsapp,
-	svgXmpp,
-}
-
 export default {
 	name: 'RequestSignatureTab',
 	components: {
@@ -787,7 +777,16 @@ export default {
 			}
 		},
 		getSvgIcon(name) {
-			return iconMap[`svg${name.charAt(0).toUpperCase() + name.slice(1)}`] || iconMap.svgAccount
+			const iconByMethod = {
+				account: svgAccount,
+				email: svgEmail,
+				signal: svgSignal,
+				sms: svgSms,
+				telegram: svgTelegram,
+				whatsapp: svgWhatsapp,
+				xmpp: svgXmpp,
+			}
+			return iconByMethod[name] || svgAccount
 		},
 		canSignerActInOrder(signer) {
 			const method = signer.identifyMethods?.[0]?.method

src/components/Signers/Signers.vue

@@ -34,79 +34,94 @@
 		</Signer>
 	</ul>
 </template>
-<script>
-import { t } from '@nextcloud/l10n'
-
-import { loadState } from '@nextcloud/initial-state'
+<script setup lang="ts">
+import { computed } from 'vue'
 
 import draggable from 'vuedraggable'
 
 import Signer from './Signer.vue'
 import { useFilesStore } from '../../store/files.js'
 
-export default {
+defineOptions({
 	name: 'Signers',
-	emits: ['signing-order-changed'],
-	components: {
-		Signer,
-		draggable,
-	},
-	props: {
-		event: {
-			type: String,
-			required: false,
-			default: '',
-		},
-	},
-	setup() {
-		const filesStore = useFilesStore()
-		return { filesStore }
-	},
-	computed: {
-		signers() {
-			return this.filesStore.getFile().signers
-		},
-		sortableSigners: {
-			get() {
-				return this.signers
-			},
-			set(value) {
-				const file = this.filesStore.getFile()
-				file.signers = value
-			},
-		},
-		isOrderedNumeric() {
-			const file = this.filesStore.getFile()
-			let flow = file?.signatureFlow
-
-			if (typeof flow === 'number') {
-				const flowMap = { 0: 'none', 1: 'parallel', 2: 'ordered_numeric' }
-				flow = flowMap[flow]
-			}
-
-			return flow === 'ordered_numeric'
-		},
-		canReorder() {
-			return this.filesStore.canSave() && this.signers.length > 1
-		},
+})
+
+type SignerRow = {
+	identify?: string
+	signed?: unknown
+	signingOrder?: number
+	[key: string]: unknown
+}
+
+type FileWithSigners = {
+	signers?: SignerRow[]
+	signatureFlow?: string | number
+}
+
+const props = withDefaults(defineProps<{
+	event?: string
+}>(), {
+	event: '',
+})
+
+const emit = defineEmits<{
+	(e: 'signing-order-changed'): void
+}>()
+
+const filesStore = useFilesStore()
+
+const signers = computed<SignerRow[] | undefined>(() => {
+	const file = filesStore.getFile() as FileWithSigners | undefined
+	return file?.signers
+})
+
+const sortableSigners = computed<SignerRow[] | undefined>({
+	get() {
+		return signers.value
 	},
-	methods: {
-		t,
-		onDragEnd(evt) {
-			const { oldIndex, newIndex } = evt
-			if (oldIndex === newIndex) {
-				return
-			}
-
-			const file = this.filesStore.getFile()
-			file.signers.forEach((signer, index) => {
-				signer.signingOrder = index + 1
-			})
-
-			this.$emit('signing-order-changed')
-		},
+	set(value) {
+		const file = filesStore.getFile() as FileWithSigners | undefined
+		if (file) {
+			file.signers = value
+		}
 	},
+})
+
+const isOrderedNumeric = computed(() => {
+	const file = filesStore.getFile() as FileWithSigners | undefined
+	let flow = file?.signatureFlow
+
+	if (typeof flow === 'number') {
+		const flowMap: Record<number, string> = { 0: 'none', 1: 'parallel', 2: 'ordered_numeric' }
+		flow = flowMap[flow]
+	}
+
+	return flow === 'ordered_numeric'
+})
+
+const canReorder = computed(() => filesStore.canSave() && (signers.value?.length || 0) > 1)
+
+function onDragEnd(evt: { oldIndex: number; newIndex: number }) {
+	const { oldIndex, newIndex } = evt
+	if (oldIndex === newIndex) {
+		return
+	}
+
+	const file = filesStore.getFile() as FileWithSigners | undefined
+	file?.signers?.forEach((signer, index) => {
+		signer.signingOrder = index + 1
+	})
+
+	emit('signing-order-changed')
 }
+
+defineExpose({
+	signers,
+	sortableSigners,
+	isOrderedNumeric,
+	canReorder,
+	onDragEnd,
+})
 </script>
 
 <style lang="scss" scoped>