Merge pull request #7189 from LibreSign/backport/7181/stable32

[stable32] chore: migration to vue3

Author: vitormattos

src/components/InputAction/InputAction.vue

@@ -13,51 +13,45 @@
 	</form>
 </template>
 
-<script>
+<script setup lang="ts">
 import { t } from '@nextcloud/l10n'
+import { ref } from 'vue'
 
-export default {
+defineOptions({
 	name: 'InputAction',
-	emits: ['submit'],
-	props: {
-		type: {
-			type: String,
-			required: false,
-			default: 'text',
-		},
-		placeholder: {
-			type: String,
-			required: false,
-			default: '',
-		},
-		disabled: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-		loading: {
-			type: Boolean,
-			required: false,
-			default: false,
-		},
-	},
+})
 
-	data() {
-		return {
-			value: '',
-		}
-	},
+withDefaults(defineProps<{
+	type?: string
+	placeholder?: string
+	disabled?: boolean
+	loading?: boolean
+}>(), {
+	type: 'text',
+	placeholder: '',
+	disabled: false,
+	loading: false,
+})
 
-	methods: {
-		t,
-		clearInput() {
-			this.value = ''
-		},
-		onSubmit(event) {
-			this.$emit('submit', this.value)
-		},
-	},
+const emit = defineEmits<{
+	(e: 'submit', value: string): void
+}>()
+
+const value = ref('')
+
+function clearInput() {
+	value.value = ''
 }
+
+function onSubmit() {
+	emit('submit', value.value)
+}
+
+defineExpose({
+	value,
+	clearInput,
+	onSubmit,
+})
 </script>
 
 <style lang="scss" scoped>

src/components/LeftSidebar/LeftSidebar.vue

@@ -58,8 +58,10 @@
 	</NcAppNavigation>
 </template>
 
-<script>
+<script setup lang="ts">
 import { t } from '@nextcloud/l10n'
+import { computed } from 'vue'
+import { getCurrentInstance } from 'vue'
 import {
 	mdiAccountCheck,
 	mdiFileCheck,
@@ -81,51 +83,37 @@ import Settings from '../Settings/Settings.vue'
 
 import { useFilesStore } from '../../store/files.js'
 
-export default {
+defineOptions({
 	name: 'LeftSidebar',
-	components: {
-		NcAppNavigation,
-		NcAppNavigationItem,
-		NcAppNavigationSettings,
-		NcIconSvgWrapper,
-		Settings,
-	},
-	setup() {
-		const filesStore = useFilesStore()
-		return {
-			filesStore,
-			mdiFileSign,
-			mdiFolder,
-			mdiFileCheck,
-			mdiAccountCheck,
-			mdiShieldLock,
-		}
-	},
-	data() {
-		return {
-			canRequestSign: loadState('libresign', 'can_request_sign', false),
-			config: loadState('libresign', 'config', {
-				identificationDocumentsFlow: false,
-				isApprover: false,
-			}),
-		}
-	},
-	computed: {
-		isAdmin() {
-			const user = getCurrentUser()
-			return user?.isAdmin ?? false
-		},
-	},
-	methods: {
-		t,
-		unselectFile() {
-			this.filesStore.selectFile()
-		},
-		goToSign() {
-			const route = this.$router.resolve({ name: 'SignPDF' })
+})
 
-			window.location = route.href
-		},
-	},
+const filesStore = useFilesStore()
+const canRequestSign = loadState('libresign', 'can_request_sign', false)
+const config = loadState('libresign', 'config', {
+	identificationDocumentsFlow: false,
+	isApprover: false,
+})
+
+const isAdmin = computed(() => {
+	const user = getCurrentUser()
+	return user?.isAdmin ?? false
+})
+
+function unselectFile() {
+	filesStore.selectFile()
 }
+
+function goToSign() {
+	const router = getCurrentInstance()?.proxy?.$router
+	if (!router) {
+		return
+	}
+	const route = router.resolve({ name: 'SignPDF' })
+	window.location = route.href as unknown as Location
+}
+
+defineExpose({
+	isAdmin,
+	goToSign,
+})
 </script>

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

@@ -23,76 +23,65 @@
 	</NcListItem>
 </template>
 
-<script>
+<script setup lang="ts">
 import { t } from '@nextcloud/l10n'
+import { computed } from 'vue'
 
 import { emit } from '@nextcloud/event-bus'
 import Moment from '@nextcloud/moment'
 
 import NcAvatar from '@nextcloud/vue/components/NcAvatar'
 import NcListItem from '@nextcloud/vue/components/NcListItem'
 
-export default {
+defineOptions({
 	name: 'SignerRow',
 	inheritAttrs: false,
-	components: {
-		NcListItem,
-		NcAvatar,
-	},
-	props: {
-		signer: {
-			type: Object,
-			required: true,
-		},
-		to: {
-			type: Object,
-			required: false,
-			default: undefined,
-		},
-		event: {
-			type: String,
-			required: false,
-			default: '',
-		},
-	},
-	computed: {
-		displayName() {
-			const { signer } = this
-
-			if (signer.displayName) {
-				return signer.displayName
-			}
-
-			if (signer.email) {
-				return signer.email
-			}
-
-			return t('libresign', 'Account does not exist')
-		},
-		status() {
-			const { signer } = this
-			return signer.signed ? 'signed' : 'pending'
-		},
-		signDate() {
-			const { signer } = this
-
-			return signer.signed
-				? Moment(signer.signed, 'YYYY-MM-DD').toDate()
-				: ''
-		},
-		element() {
-			return this.signer.element || {}
-		},
-		hasElement() {
-			return this.element.elementId > 0
-		},
-	},
-	methods: {
-		t,
-		signerClickAction(signer) {
-			emit(this.event, this.signer)
-		},
-	},
+})
+
+type Signer = {
+	displayName?: string
+	email?: string
+	signed?: string | boolean
+	element?: {
+		elementId?: number
+	}
+}
+
+const props = withDefaults(defineProps<{
+	signer: Signer
+	to?: Record<string, unknown>
+	event?: string
+}>(), {
+	to: undefined,
+	event: '',
+})
+
+const displayName = computed(() => {
+	if (props.signer.displayName) {
+		return props.signer.displayName
+	}
+
+	if (props.signer.email) {
+		return props.signer.email
+	}
+
+	return t('libresign', 'Account does not exist')
+})
+
+const status = computed(() => (props.signer.signed ? 'signed' : 'pending'))
+
+const signDate = computed(() => (
+	props.signer.signed
+		? Moment(props.signer.signed, 'YYYY-MM-DD').toDate()
+		: ''
+))
+
+const element = computed(() => props.signer.element || {})
+
+const hasElement = computed(() => (element.value.elementId || 0) > 0)
+
+function signerClickAction() {
+	emit(props.event, props.signer)
 }
 </script>