@@ -269,15 +269,17 @@ import { generateUrl } from '@nextcloud/router'
import axios from '@nextcloud/axios'
import moment from '@nextcloud/moment'
import { showSuccess, showError } from '@nextcloud/dialogs'
-import NcAppNavigationIconBullet from '@nextcloud/vue/dist/Components/NcAppNavigationIconBullet.js'
-import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
-import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import NcAppNavigationIconBullet from '@nextcloud/vue/components/NcAppNavigationIconBullet'
+import NcCheckboxRadioSwitch from '@nextcloud/vue/components/NcCheckboxRadioSwitch'
+import NcButton from '@nextcloud/vue/components/NcButton'
import { humanFileSize } from '../utils.js'
+import GoogleIconColor from './icons/GoogleIconColor.vue'
export default {
name: 'PersonalSettings',
components: {
+ GoogleIconColor,
GoogleIcon,
NcAppNavigationIconBullet,
NcButton,
@@ -666,7 +668,7 @@ export default {
},
onCalendarImport(cal) {
const calId = cal.id
- this.$set(this.importingCalendar, calId, true)
+ this.importingCalendar[calId] = true
const req = {
params: {
calId,
@@ -698,7 +700,7 @@ export default {
)
})
.then(() => {
- this.$set(this.importingCalendar, calId, false)
+ this.importingCalendar[calId] = false
})
},
onImportPhotos() {
@@ -933,11 +935,6 @@ export default {
padding: 0;
display: flex;
align-items: center;
- .google-signin {
- background: url('../../img/google.svg');
- width: 46px;
- height: 46px;
- }
span {
padding: 0 8px 0 8px;
font-size: 1.1em;
diff --git a/src/components/icons/GoogleIconColor.vue b/src/components/icons/GoogleIconColor.vue
new file mode 100644
index 00000000..32af15c2
--- /dev/null
+++ b/src/components/icons/GoogleIconColor.vue
@@ -0,0 +1,115 @@
+
+
+
+
+
diff --git a/src/personalSettings.js b/src/personalSettings.js
index 9b8b0b5e..9bfaa7a1 100644
--- a/src/personalSettings.js
+++ b/src/personalSettings.js
@@ -11,15 +11,13 @@
* @copyright Julien Veyssier 2020
*/
-import Vue from 'vue'
-import './bootstrap.js'
+import { createApp } from 'vue'
import PersonalSettings from './components/PersonalSettings.vue'
+import { translate as t, translatePlural as n } from '@nextcloud/l10n'
// eslint-disable-next-line
'use strict'
-// eslint-disable-next-line
-new Vue({
- el: '#google_prefs',
- render: h => h(PersonalSettings),
-})
+const app = createApp(PersonalSettings)
+app.mixin({ methods: { t, n } })
+app.mount('#google_prefs')
diff --git a/stylelint.config.js b/stylelint.config.cjs
similarity index 91%
rename from stylelint.config.js
rename to stylelint.config.cjs
index 4d8b098e..c2f69636 100644
--- a/stylelint.config.js
+++ b/stylelint.config.cjs
@@ -1,5 +1,5 @@
module.exports = {
- extends: 'stylelint-config-recommended-vue',
+ extends: '@nextcloud/stylelint-config',
rules: {
'selector-type-no-unknown': null,
'rule-empty-line-before': [
diff --git a/vite.config.js b/vite.config.js
new file mode 100644
index 00000000..437b214b
--- /dev/null
+++ b/vite.config.js
@@ -0,0 +1,32 @@
+/**
+ * SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+import { createAppConfig } from '@nextcloud/vite-config'
+import eslint from 'vite-plugin-eslint'
+import stylelint from 'vite-plugin-stylelint'
+import { join } from 'path'
+
+const isProduction = process.env.NODE_ENV === 'production'
+export default createAppConfig({
+ personalSettings: join('src', 'personalSettings.js'),
+ adminSettings: join('src', 'adminSettings.js'),
+ popupSuccess: join('src', 'popupSuccess.js'),
+}, {
+ config: {
+ css: {
+ modules: {
+ localsConvention: 'camelCase',
+ },
+ preprocessorOptions: {
+ scss: { api: 'modern-compiler' },
+ },
+ },
+ plugins: [eslint(), stylelint()],
+ build: {
+ cssCodeSplit: true,
+ },
+ },
+ inlineCSS: { relativeCSSInjection: true },
+ minify: isProduction,
+})
diff --git a/webpack.js b/webpack.js
deleted file mode 100644
index 7bd810f9..00000000
--- a/webpack.js
+++ /dev/null
@@ -1,36 +0,0 @@
-const path = require('path')
-const webpackConfig = require('@nextcloud/webpack-vue-config')
-const ESLintPlugin = require('eslint-webpack-plugin')
-const StyleLintPlugin = require('stylelint-webpack-plugin')
-
-const buildMode = process.env.NODE_ENV
-const isDev = buildMode === 'development'
-webpackConfig.devtool = isDev ? 'cheap-source-map' : 'source-map'
-
-webpackConfig.stats = {
- colors: true,
- modules: false,
-}
-
-const appId = 'integration_google'
-webpackConfig.entry = {
- personalSettings: { import: path.join(__dirname, 'src', 'personalSettings.js'), filename: appId + '-personalSettings.js' },
- adminSettings: { import: path.join(__dirname, 'src', 'adminSettings.js'), filename: appId + '-adminSettings.js' },
- popupSuccess: { import: path.join(__dirname, 'src', 'popupSuccess.js'), filename: appId + '-popupSuccess.js' },
-}
-
-webpackConfig.plugins.push(
- new ESLintPlugin({
- extensions: ['js', 'vue'],
- files: 'src',
- failOnError: !isDev,
- })
-)
-webpackConfig.plugins.push(
- new StyleLintPlugin({
- files: 'src/**/*.{css,scss,vue}',
- failOnError: !isDev,
- }),
-)
-
-module.exports = webpackConfig