Skip to content

Commit d44cb61

Browse files
lukasdotcomlukasdotcom
committed
vue 3
Signed-off-by: Lukas Schaefer <lukas@lschaefer.xyz>
1 parent d5301aa commit d44cb61

28 files changed

+6433
-7856
lines changed

‎.eslintrc.js‎ renamed to ‎.eslintrc.cjs‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,18 +5,20 @@
55

66
module.exports = {
77
globals: {
8-
appVersion: true
8+
appVersion: true,
99
},
1010
parserOptions: {
11-
requireConfigFile: false
11+
requireConfigFile: false,
1212
},
1313
extends: [
14-
'@nextcloud'
14+
'@nextcloud',
1515
],
1616
rules: {
1717
'jsdoc/require-jsdoc': 'off',
1818
'jsdoc/tag-lines': 'off',
1919
'vue/first-attribute-linebreak': 'off',
20-
'import/extensions': 'off'
21-
}
20+
'import/extensions': 'off',
21+
'import/no-unresolved': ['error', { ignore: ['\\?raw'] }],
22+
'vue/no-v-model-argument': 'off',
23+
},
2224
}

‎package-lock.json‎

Lines changed: 5941 additions & 7393 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 16 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,9 @@
44
"description": "Approval",
55
"main": "index.js",
66
"scripts": {
7-
"build": "webpack --node-env production --progress",
8-
"dev": "webpack --node-env development --progress",
9-
"watch": "webpack --node-env development --progress --watch",
10-
"serve": "webpack --node-env development serve --progress",
7+
"build": "NODE_ENV=production vite --mode production build",
8+
"dev": "NODE_ENV=development vite --mode development build",
9+
"watch": "NODE_ENV=development vite --mode development build --watch",
1110
"lint": "eslint --ext .js,.vue src",
1211
"lint:fix": "eslint --ext .js,.vue src --fix",
1312
"stylelint": "stylelint src/**/*.vue src/**/*.scss src/**/*.css",
@@ -30,32 +29,32 @@
3029
"extends @nextcloud/browserslist-config"
3130
],
3231
"engines": {
33-
"node": "^20.0.0",
34-
"npm": "^9.0.0"
32+
"node": "^22.0.0",
33+
"npm": "^10.0.0"
3534
},
35+
"type": "module",
3636
"dependencies": {
3737
"@mdi/svg": "^7.3.67",
3838
"@nextcloud/auth": "^2.0.0",
3939
"@nextcloud/axios": "^2.1.0",
40-
"@nextcloud/dialogs": "^6.3.1",
40+
"@nextcloud/dialogs": "^7.0.0-rc.1",
4141
"@nextcloud/event-bus": "^3.3.0",
42-
"@nextcloud/files": "^3.0.0",
42+
"@nextcloud/files": "^3.10.2",
4343
"@nextcloud/initial-state": "^2.0.0",
4444
"@nextcloud/l10n": "^3.1.0",
4545
"@nextcloud/moment": "^1.3.1",
4646
"@nextcloud/router": "^3.0.0",
47-
"@nextcloud/vue": "^8.3.0",
48-
"@nextcloud/vue-dashboard": "^2.0.1",
49-
"vue": "^2.6.14",
47+
"@nextcloud/vue": "^9.0.0-rc.2",
48+
"vue": "^3.5.16",
5049
"vue-material-design-icons": "^5.1.1"
5150
},
5251
"devDependencies": {
53-
"@nextcloud/babel-config": "^1.0.0",
54-
"@nextcloud/browserslist-config": "^3.0.0",
55-
"@nextcloud/eslint-config": "^8.2.1",
52+
"@nextcloud/babel-config": "^1.2.0",
53+
"@nextcloud/browserslist-config": "^3.0.1",
54+
"@nextcloud/eslint-config": "^8.4.2",
5655
"@nextcloud/stylelint-config": "^3.0.1",
57-
"@nextcloud/webpack-vue-config": "^6.0.0",
58-
"eslint-webpack-plugin": "^4.0.1",
59-
"stylelint-webpack-plugin": "^5.0.0"
56+
"@nextcloud/vite-config": "^2.3.5",
57+
"vite-plugin-eslint": "^1.8.1",
58+
"vite-plugin-stylelint": "^6.0.0"
6059
}
6160
}

‎src/adminSettings.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,11 @@
33
* SPDX-License-Identifier: AGPL-3.0-or-later
44
*/
55

6-
import Vue from 'vue'
7-
import './bootstrap.js'
6+
import { createApp } from 'vue'
87
import AdminSettings from './components/AdminSettings.vue'
9-
import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
10-
Vue.directive('tooltip', Tooltip)
8+
import { translate as t, translatePlural as n } from '@nextcloud/l10n'
119

12-
const View = Vue.extend(AdminSettings)
13-
new View().$mount('#approval_prefs')
10+
const app = createApp(AdminSettings)
11+
12+
app.mixin({ methods: { t, n } })
13+
app.mount('#approval_prefs')

‎src/approvalTab.js‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -3,15 +3,11 @@
33
* SPDX-License-Identifier: AGPL-3.0-or-later
44
*/
55

6-
import ApprovalSvgIcon from '../img/app-no-color.svg'
7-
import { getRequestToken } from '@nextcloud/auth'
8-
import Vue from 'vue'
6+
import ApprovalSvgIcon from '../img/app-no-color.svg?raw'
7+
import { createApp } from 'vue'
8+
import { translate as t, translatePlural as n } from '@nextcloud/l10n'
99
import ApprovalTab from './views/ApprovalTab.vue'
1010

11-
__webpack_nonce__ = btoa(getRequestToken()) // eslint-disable-line
12-
Vue.mixin({ methods: { t, n } })
13-
14-
const View = Vue.extend(ApprovalTab)
1511
// Init approval tab component
1612
let TabInstance = null
1713
const approvalTab = new OCA.Files.Sidebar.Tab({
@@ -21,22 +17,27 @@ const approvalTab = new OCA.Files.Sidebar.Tab({
2117

2218
async mount(el, fileInfo, context) {
2319
if (TabInstance) {
24-
TabInstance.$destroy()
20+
TabInstance.unmount()
2521
}
26-
TabInstance = new View({
27-
// Better integration with vue parent component
28-
parent: context,
29-
})
22+
const Tab = createApp(ApprovalTab)
23+
Tab.mixin({ methods: { t, n } })
24+
25+
TabInstance = Tab.mount(el)
3026
// Only mount after we have all the info we need
3127
await TabInstance.update(fileInfo)
32-
TabInstance.$mount(el)
3328
},
29+
3430
update(fileInfo) {
35-
TabInstance.update(fileInfo)
31+
if (TabInstance && typeof TabInstance.update === 'function') {
32+
TabInstance.update(fileInfo)
33+
}
3634
},
35+
3736
destroy() {
38-
TabInstance.$destroy()
39-
TabInstance = null
37+
if (TabInstance) {
38+
TabInstance.unmount()
39+
TabInstance = null
40+
}
4041
},
4142
})
4243

‎src/bootstrap.js‎

Lines changed: 0 additions & 16 deletions
This file was deleted.

‎src/components/AdminSettings.vue‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@
2929
class="rules">
3030
<ApprovalRule v-for="(rule, id) in rules"
3131
:key="id"
32-
v-model="rules[id]"
32+
v-model:value="rules[id]"
3333
class="approval-rule"
3434
delete-icon="icon-delete"
3535
@input="onRuleInput(id, $event)"
@@ -54,7 +54,7 @@
5454
</NcEmptyContent>
5555
<div v-if="newRule" class="new-rule">
5656
<ApprovalRule
57-
v-model="newRule"
57+
v-model:value="newRule"
5858
:delete-rule-label="newRuleDeleteLabel"
5959
:focus="true"
6060
@add-tag="onAddTagClick">
@@ -64,7 +64,7 @@
6464
{{ newRuleDeleteLabel }}
6565
</NcButton>
6666
<NcButton
67-
type="success"
67+
variant="success"
6868
:disabled="!newRuleIsValid"
6969
@click="onValidateNewRule">
7070
<template #icon>
@@ -120,8 +120,8 @@ import TagIcon from 'vue-material-design-icons/Tag.vue'
120120
import DeleteIcon from 'vue-material-design-icons/Delete.vue'
121121
import PlusIcon from 'vue-material-design-icons/Plus.vue'
122122
123-
import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
124-
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
123+
import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
124+
import NcButton from '@nextcloud/vue/components/NcButton'
125125
126126
import ApprovalRule from './ApprovalRule.vue'
127127
@@ -168,6 +168,7 @@ export default {
168168
},
169169
invalidRuleMessage() {
170170
const newRule = this.newRule
171+
console.debug(newRule)
171172
const noMissingField = newRule.description
172173
&& newRule.tagPending
173174
&& newRule.tagApproved
@@ -317,7 +318,7 @@ export default {
317318
showSuccess(t('approval', 'New approval workflow created'))
318319
const id = response.data
319320
this.newRule = null
320-
this.$set(this.rules, id, rule)
321+
this.rules[id] = rule
321322
}).catch((error) => {
322323
showError(
323324
t('approval', 'Failed to create approval workflow')
@@ -333,7 +334,7 @@ export default {
333334
const url = generateUrl('/apps/approval/rule/' + id)
334335
axios.delete(url).then((response) => {
335336
showSuccess(t('approval', 'Approval workflow deleted'))
336-
this.$delete(this.rules, id)
337+
delete this.rules[id]
337338
}).catch((error) => {
338339
showError(
339340
t('approval', 'Failed to delete approval workflow')

‎src/components/ApprovalButtons.vue‎

Lines changed: 18 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -4,17 +4,13 @@
44
-->
55
<template>
66
<div class="buttons">
7-
<NcButton
8-
type="success"
9-
@click="$emit('approve')">
7+
<NcButton variant="success" @click="$emit('approve')">
108
<template #icon>
119
<CheckIcon :size="20" />
1210
</template>
1311
{{ approveText }}
1412
</NcButton>
15-
<NcButton
16-
type="error"
17-
@click="$emit('reject')">
13+
<NcButton variant="error" @click="$emit('reject')">
1814
<template #icon>
1915
<CloseIcon :size="20" />
2016
</template>
@@ -27,7 +23,7 @@
2723
import CheckIcon from 'vue-material-design-icons/Check.vue'
2824
import CloseIcon from 'vue-material-design-icons/Close.vue'
2925
30-
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
26+
import NcButton from '@nextcloud/vue/components/NcButton'
3127
3228
export default {
3329
name: 'ApprovalButtons',
@@ -49,36 +45,31 @@ export default {
4945
},
5046
},
5147
data() {
52-
return {
53-
}
48+
return {}
5449
},
5550
56-
computed: {
57-
},
51+
computed: {},
5852
59-
watch: {
60-
},
53+
watch: {},
6154
62-
mounted() {
63-
},
55+
mounted() {},
6456
65-
methods: {
66-
},
57+
methods: {},
6758
}
6859
</script>
6960

7061
<style scoped lang="scss">
7162
.buttons {
72-
width: 100%;
73-
display: flex;
74-
// align-items: center;
75-
// justify-content: center;
63+
width: 100%;
64+
display: flex;
65+
// align-items: center;
66+
// justify-content: center;
7667
77-
button {
78-
margin: 0 4px 0 4px;
79-
&:first-child {
80-
margin-left: 0;
81-
}
82-
}
68+
button {
69+
margin: 0 4px 0 4px;
70+
&:first-child {
71+
margin-left: 0;
72+
}
73+
}
8374
}
8475
</style>

0 commit comments

Comments
 (0)