Merge pull request #7213 from LibreSign/backport/7208/stable32

[stable32] chore: migration to vue3

Author: vitormattos

src/External.vue

@@ -6,8 +6,8 @@
 	<router-view />
 </template>
 
-<script>
-export default {
+<script setup lang="ts">
+defineOptions({
 	name: 'External',
-}
+})
 </script>

src/components/Request/SignDetail/partials/PageNavigation.vue

@@ -16,56 +16,53 @@
 	</nav>
 </template>
 
-<script>
+<script setup lang="ts">
 import { t } from '@nextcloud/l10n'
+import { computed } from 'vue'
 
 import NcCounterBubble from '@nextcloud/vue/components/NcCounterBubble'
 
-export default {
+defineOptions({
 	name: 'PageNavigation',
-	components: { NcCounterBubble },
-	emits: ['update:modelValue'],
-	props: {
-		modelValue: {
-			type: Number,
-			required: true,
-		},
-		pages: {
-			type: Array,
-			required: true,
-		},
-		width: {
-			type: String,
-			required: true,
-		},
-	},
-	computed: {
-		size() {
-			return this.pages.length
-		},
-		actual() {
-			return this.modelValue
-		},
-		allowNext() {
-			return this.actual < this.size
-		},
-		allowPrevious() {
-			return this.modelValue > 1
-		},
-	},
-	methods: {
-		t,
-		next() {
-			this.setPage(this.modelValue + 1)
-		},
-		previous() {
-			this.setPage(this.modelValue - 1)
-		},
-		setPage(val) {
-			this.$emit('update:modelValue', val)
-		},
-	},
+})
+
+const props = defineProps<{
+	modelValue: number
+	pages: unknown[]
+	width: string
+}>()
+
+const emit = defineEmits<{
+	(event: 'update:modelValue', value: number): void
+}>()
+
+const size = computed(() => props.pages.length)
+const actual = computed(() => props.modelValue)
+const allowNext = computed(() => actual.value < size.value)
+const allowPrevious = computed(() => props.modelValue > 1)
+
+function setPage(value: number) {
+	emit('update:modelValue', value)
 }
+
+function next() {
+	setPage(props.modelValue + 1)
+}
+
+function previous() {
+	setPage(props.modelValue - 1)
+}
+
+defineExpose({
+	size,
+	actual,
+	allowNext,
+	allowPrevious,
+	setPage,
+	next,
+	previous,
+	props,
+})
 </script>
 
 <style scoped>

src/components/RightSidebar/RightSidebar.vue

@@ -24,8 +24,10 @@
 	</NcAppSidebar>
 </template>
 
-<script>
+<script setup lang="ts">
 import { t } from '@nextcloud/l10n'
+import { computed, ref, watch } from 'vue'
+import { useRoute } from 'vue-router'
 
 import NcAppSidebar from '@nextcloud/vue/components/NcAppSidebar'
 import NcAppSidebarTab from '@nextcloud/vue/components/NcAppSidebarTab'
@@ -37,57 +39,67 @@ import { useFilesStore } from '../../store/files.js'
 import { useSidebarStore } from '../../store/sidebar.js'
 import { useSignStore } from '../../store/sign.js'
 
-export default {
+defineOptions({
 	name: 'RightSidebar',
-	components: {
-		NcAppSidebar,
-		NcAppSidebarTab,
-		RequestSignatureTab,
-		SignTab,
-	},
-	setup() {
-		const filesStore = useFilesStore()
-		const signStore = useSignStore()
-		const sidebarStore = useSidebarStore()
-		return { filesStore, signStore, sidebarStore }
-	},
-	computed: {
-		fileName() {
-			return this.filesStore.getFile()?.name ?? ''
-		},
-		subTitle() {
-			if (!this.opened) {
-				return t('libresign', 'Enter who will receive the request')
-			}
-			return this.filesStore.getSubtitle()
-		},
-		showRequestSignatureTab() {
-			return this.sidebarStore.activeTab === 'request-signature-tab'
-		},
-		showSign() {
-			return this.sidebarStore.activeTab === 'sign-tab'
-		},
-	},
-	watch: {
-		'sidebarStore.activeTab'(newValue, previousValue) {
-			if (this.$refs?.rightAppSidebar?.$refs?.tabs) {
-				this.$refs.rightAppSidebar.$refs.tabs.activeTab = newValue
-			}
-		},
-		'$route.name'(routeName) {
-			this.sidebarStore.handleRouteChange(routeName)
-		},
-	},
-	methods: {
-		t,
-		handleUpdateActive(active) {
-			this.sidebarStore.setActiveTab(active)
-		},
-		closeSidebar() {
-			this.sidebarStore.hideSidebar()
-		},
-	},
+})
+
+type SidebarRef = {
+	$refs?: {
+		tabs?: {
+			activeTab?: string
+		}
+	}
 }
+
+const filesStore = useFilesStore()
+const signStore = useSignStore()
+const sidebarStore = useSidebarStore()
+const route = useRoute()
+const rightAppSidebar = ref<SidebarRef | null>(null)
+
+const fileName = computed(() => filesStore.getFile()?.name ?? '')
+const opened = computed(() => sidebarStore.isVisible)
+const subTitle = computed(() => {
+	if (!opened.value) {
+		return t('libresign', 'Enter who will receive the request')
+	}
+	return filesStore.getSubtitle()
+})
+
+const showRequestSignatureTab = computed(() => sidebarStore.activeTab === 'request-signature-tab')
+const showSign = computed(() => sidebarStore.activeTab === 'sign-tab')
+
+watch(() => sidebarStore.activeTab, (newValue) => {
+	if (rightAppSidebar.value?.$refs?.tabs) {
+		rightAppSidebar.value.$refs.tabs.activeTab = newValue
+	}
+})
+
+watch(() => route.name, (routeName) => {
+	sidebarStore.handleRouteChange(routeName)
+})
+
+function handleUpdateActive(active: string) {
+	sidebarStore.setActiveTab(active)
+}
+
+function closeSidebar() {
+	sidebarStore.hideSidebar()
+}
+
+defineExpose({
+	filesStore,
+	signStore,
+	sidebarStore,
+	rightAppSidebar,
+	fileName,
+	opened,
+	subTitle,
+	showRequestSignatureTab,
+	showSign,
+	handleUpdateActive,
+	closeSidebar,
+})
 </script>
 <style lang="scss" scoped>
 .app-sidebar__tab  {

src/tests/External.spec.ts

@@ -0,0 +1,23 @@
+/*
+ * SPDX-FileCopyrightText: 2026 LibreSign contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { describe, expect, it } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import External from '../External.vue'
+
+describe('External.vue', () => {
+	it('renders the router view', () => {
+		const wrapper = mount(External, {
+			global: {
+				stubs: {
+					RouterView: { template: '<div class="router-view" />' },
+				},
+			},
+		})
+
+		expect(wrapper.find('.router-view').exists()).toBe(true)
+	})
+})

src/tests/components/PdfEditor/SignatureBox.spec.ts

@@ -65,4 +65,4 @@ describe('SignatureBox.vue', () => {
 
 		expect(wrapper.vm.boxStyle).toEqual({})
 	})
-})
+})

src/tests/components/Request/SignDetail/partials/PageNavigation.spec.ts

@@ -0,0 +1,68 @@
+/*
+ * SPDX-FileCopyrightText: 2026 LibreSign contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+
+import { describe, expect, it, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+
+import PageNavigation from '../../../../../components/Request/SignDetail/partials/PageNavigation.vue'
+
+vi.mock('@nextcloud/l10n', () => ({
+	t: vi.fn((_app: string, text: string) => text),
+	translate: vi.fn((_app: string, text: string) => text),
+	translatePlural: vi.fn((_app: string, singular: string, plural: string, count: number) => (count === 1 ? singular : plural)),
+	n: vi.fn((_app: string, singular: string, plural: string, count: number) => (count === 1 ? singular : plural)),
+	getLanguage: vi.fn(() => 'en'),
+	getLocale: vi.fn(() => 'en'),
+	isRTL: vi.fn(() => false),
+}))
+
+describe('PageNavigation.vue', () => {
+	function createWrapper(modelValue = 2) {
+		return mount(PageNavigation, {
+			props: {
+				modelValue,
+				pages: [1, 2, 3],
+				width: '240px',
+			},
+			global: {
+				stubs: {
+					NcCounterBubble: { template: '<div><slot /></div>' },
+				},
+			},
+		})
+	}
+
+	it('computes navigation state from the current page', () => {
+		const wrapper = createWrapper()
+
+		expect(wrapper.vm.size).toBe(3)
+		expect(wrapper.vm.actual).toBe(2)
+		expect(wrapper.vm.allowPrevious).toBe(true)
+		expect(wrapper.vm.allowNext).toBe(true)
+	})
+
+	it('emits the next page when next is called', () => {
+		const wrapper = createWrapper()
+
+		wrapper.vm.next()
+
+		expect(wrapper.emitted('update:modelValue')).toEqual([[3]])
+	})
+
+	it('emits the previous page when previous is called', () => {
+		const wrapper = createWrapper()
+
+		wrapper.vm.previous()
+
+		expect(wrapper.emitted('update:modelValue')).toEqual([[1]])
+	})
+
+	it('disables previous navigation on the first page', () => {
+		const wrapper = createWrapper(1)
+
+		expect(wrapper.vm.allowPrevious).toBe(false)
+		expect(wrapper.vm.allowNext).toBe(true)
+	})
+})