Skip to content

Commit 936d705

Browse files
vitormattosvitormattos
authored
Merge pull request #7216 from LibreSign/backport/7215/stable32
[stable32] chore: migration to Vue3
2 parents 0da71a6 + 1ebe338 commit 936d705

20 files changed

Lines changed: 1688 additions & 595 deletions

‎src/components/CodeEditor.vue‎

Lines changed: 56 additions & 60 deletions
Original file line numberDiff line numberDiff line change
@@ -18,8 +18,9 @@
1818
</div>
1919
</template>
2020

21-
<script>
21+
<script setup lang="ts">
2222
import { t } from '@nextcloud/l10n'
23+
import { computed, ref, watch } from 'vue'
2324
import CodeMirror from 'vue-codemirror6'
2425
import { twig } from '@ssddanbrown/codemirror-lang-twig'
2526
import { EditorView, lineNumbers } from '@codemirror/view'
@@ -29,66 +30,61 @@ import { indentUnit, bracketMatching } from '@codemirror/language'
2930
import { defaultKeymap, indentWithTab } from '@codemirror/commands'
3031
import { material } from '@uiw/codemirror-theme-material'
3132
32-
export default {
33+
defineOptions({
3334
name: 'CodeEditor',
34-
emits: ['update:modelValue'],
35-
components: {
36-
CodeMirror,
37-
},
38-
props: {
39-
modelValue: {
40-
type: String,
41-
default: '',
42-
},
43-
label: {
44-
type: String,
45-
default: '',
46-
},
47-
placeholder: {
48-
type: String,
49-
default: '',
50-
},
51-
},
52-
data() {
53-
return {
54-
editorId: `code-editor-${Math.random().toString(36).substr(2, 9)}`,
55-
internalValue: this.modelValue,
56-
}
57-
},
58-
computed: {
59-
extensions() {
60-
return [
61-
twig(),
62-
lineNumbers(),
63-
EditorView.lineWrapping,
64-
bracketMatching(),
65-
closeBrackets(),
66-
material,
67-
indentUnit.of('\t'),
68-
keymap.of([
69-
...closeBracketsKeymap,
70-
...defaultKeymap,
71-
indentWithTab,
72-
]),
73-
]
74-
},
75-
},
76-
watch: {
77-
modelValue(newValue) {
78-
if (newValue !== this.internalValue) {
79-
this.internalValue = newValue
80-
}
81-
},
82-
internalValue(newValue) {
83-
if (newValue !== this.modelValue) {
84-
this.$emit('update:modelValue', newValue)
85-
}
86-
},
87-
},
88-
methods: {
89-
t,
90-
},
91-
}
35+
})
36+
37+
const props = withDefaults(defineProps<{
38+
modelValue?: string
39+
label?: string
40+
placeholder?: string
41+
}>(), {
42+
modelValue: '',
43+
label: '',
44+
placeholder: '',
45+
})
46+
47+
const emit = defineEmits<{
48+
'update:modelValue': [value: string]
49+
}>()
50+
51+
const editorId = `code-editor-${Math.random().toString(36).slice(2, 11)}`
52+
const internalValue = ref(props.modelValue)
53+
54+
const extensions = computed(() => {
55+
return [
56+
twig(),
57+
lineNumbers(),
58+
EditorView.lineWrapping,
59+
bracketMatching(),
60+
closeBrackets(),
61+
material,
62+
indentUnit.of('\t'),
63+
keymap.of([
64+
...closeBracketsKeymap,
65+
...defaultKeymap,
66+
indentWithTab,
67+
]),
68+
]
69+
})
70+
71+
watch(() => props.modelValue, (newValue) => {
72+
if (newValue !== internalValue.value) {
73+
internalValue.value = newValue
74+
}
75+
})
76+
77+
watch(internalValue, (newValue) => {
78+
if (newValue !== props.modelValue) {
79+
emit('update:modelValue', newValue)
80+
}
81+
})
82+
83+
defineExpose({
84+
editorId,
85+
internalValue,
86+
extensions,
87+
})
9288
</script>
9389

9490
<style lang="scss">

‎src/components/File/File.vue‎

Lines changed: 63 additions & 85 deletions
Original file line numberDiff line numberDiff line change
@@ -22,8 +22,8 @@
2222
</div>
2323
</template>
2424

25-
<script>
26-
import { t } from '@nextcloud/l10n'
25+
<script setup lang="ts">
26+
import { computed, ref } from 'vue'
2727
2828
import { mdiFile } from '@mdi/js'
2929
@@ -33,91 +33,69 @@ import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
3333
import { useFilesStore } from '../../store/files.js'
3434
import { useSidebarStore } from '../../store/sidebar.js'
3535
36-
export default {
36+
defineOptions({
3737
name: 'File',
38-
components: {
39-
NcIconSvgWrapper,
40-
},
41-
setup() {
42-
const filesStore = useFilesStore()
43-
const sidebarStore = useSidebarStore()
44-
return {
45-
filesStore,
46-
sidebarStore,
47-
mdiFile,
48-
}
49-
},
50-
data() {
51-
return {
52-
backgroundFailed: false,
53-
gridMode: true,
54-
cropPreviews: true,
55-
}
56-
},
57-
computed: {
58-
currentFileId() {
59-
return this.filesStore.selectedFileId
60-
},
61-
currentFile() {
62-
return this.filesStore.files[this.currentFileId]
63-
},
64-
previewUrl() {
65-
if (this.backgroundFailed === true) {
66-
return null
67-
}
68-
69-
if (!this.currentFile) {
70-
return null
71-
}
72-
73-
let previewUrl = ''
74-
if (this.currentFile.nodeId) {
75-
previewUrl = generateOcsUrl('/apps/libresign/api/v1/file/thumbnail/{nodeId}', {
76-
nodeId: this.currentFile.nodeId,
77-
})
78-
} else if (this.currentFile.id) {
79-
previewUrl = generateOcsUrl('/apps/libresign/api/v1/file/thumbnail/file_id/{fileId}', {
80-
fileId: this.currentFile.id,
81-
})
82-
} else {
83-
previewUrl = window.location.origin + generateUrl('/core/preview?fileId={fileid}', {
84-
fileid: this.currentFile.id,
85-
})
86-
}
87-
88-
const url = new URL(previewUrl)
89-
90-
// Request tiny previews
91-
url.searchParams.set('x', this.gridMode ? '128' : '32')
92-
url.searchParams.set('y', this.gridMode ? '128' : '32')
93-
url.searchParams.set('mimeFallback', 'true')
94-
95-
// Handle cropping
96-
url.searchParams.set('a', this.cropPreviews === true ? '0' : '1')
97-
return url.toString()
98-
},
99-
},
100-
methods: {
101-
t,
102-
openSidebar() {
103-
this.filesStore.selectFile(this.currentFileId)
104-
this.sidebarStore.activeRequestSignatureTab()
105-
},
106-
statusToClass(status) {
107-
switch (Number(status)) {
108-
case 0:
109-
return 'no-signers'
110-
case 1:
111-
case 2:
112-
return 'pending'
113-
case 3:
114-
return 'signed'
115-
default:
116-
return ''
117-
}
118-
},
119-
},
38+
})
39+
40+
const filesStore = useFilesStore()
41+
const sidebarStore = useSidebarStore()
42+
43+
const backgroundFailed = ref(false)
44+
const gridMode = true
45+
const cropPreviews = true
46+
47+
const currentFileId = computed(() => filesStore.selectedFileId)
48+
const currentFile = computed(() => filesStore.files[currentFileId.value])
49+
const previewUrl = computed(() => {
50+
if (backgroundFailed.value === true || !currentFile.value) {
51+
return null
52+
}
53+
54+
let filePreviewUrl = ''
55+
if (currentFile.value.nodeId) {
56+
filePreviewUrl = generateOcsUrl('/apps/libresign/api/v1/file/thumbnail/{nodeId}', {
57+
nodeId: currentFile.value.nodeId,
58+
})
59+
} else if (currentFile.value.id) {
60+
filePreviewUrl = generateOcsUrl('/apps/libresign/api/v1/file/thumbnail/file_id/{fileId}', {
61+
fileId: currentFile.value.id,
62+
})
63+
} else {
64+
filePreviewUrl = window.location.origin + generateUrl('/core/preview?fileId={fileid}', {
65+
fileid: currentFile.value.id,
66+
})
67+
}
68+
69+
const url = new URL(filePreviewUrl)
70+
url.searchParams.set('x', gridMode ? '128' : '32')
71+
url.searchParams.set('y', gridMode ? '128' : '32')
72+
url.searchParams.set('mimeFallback', 'true')
73+
url.searchParams.set('a', cropPreviews === true ? '0' : '1')
74+
return url.toString()
75+
})
76+
77+
function openSidebar() {
78+
filesStore.selectFile(currentFileId.value)
79+
sidebarStore.activeRequestSignatureTab()
80+
}
81+
82+
function statusToClass(status: number | string) {
83+
switch (Number(status)) {
84+
case 0:
85+
return 'no-signers'
86+
case 1:
87+
case 2:
88+
return 'pending'
89+
case 3:
90+
return 'signed'
91+
default:
92+
return ''
93+
}
12094
}
95+
96+
defineExpose({
97+
statusToClass,
98+
})
12199
</script>
122100

123101
<style lang="scss" scoped>

0 commit comments

Comments
 (0)