Merge pull request #62625 from nextcloud/enh/noid/vue3-weather

Migrate weather status to vue3

Author: julien-nc

apps/weather_status/lib/Listeners/BeforeTemplateRenderedListener.php

@@ -35,5 +35,6 @@ public function handle(Event $event): void {
 		}
 
 		Util::addScript('weather_status', 'weather-status');
+		Util::addStyle('weather_status', 'weather-status');
 	}
 }

apps/weather_status/src/App.vue

@@ -8,7 +8,7 @@
 		<NcActions
 			class="weather-status-menu-item__subheader"
 			:aria-label="currentWeatherMessage"
-			:menu-name="currentWeatherMessage">
+			:menuName="currentWeatherMessage">
 			<template #icon>
 				<NcLoadingIcon v-if="loading" />
 				<img
@@ -34,7 +34,7 @@
 				v-if="gotWeather"
 				target="_blank"
 				:href="weatherLinkTarget"
-				:close-after-click="true">
+				:closeAfterClick="true">
 				<template #icon>
 					<NcIconSvgWrapper
 						name="MapMarker"
@@ -57,7 +57,7 @@
 			</NcActionButton>
 			<NcActionSeparator v-if="address && !errorMessage" />
 			<NcActionButton
-				:close-after-click="true"
+				:closeAfterClick="true"
 				@click="onBrowserLocationClick">
 				<template #icon>
 					<NcIconSvgWrapper
@@ -73,7 +73,7 @@
 				:disabled="false"
 				icon="icon-rename"
 				type="text"
-				model-value=""
+				modelValue=""
 				@submit="onAddressSubmit" />
 			<template v-if="favorites.length > 0">
 				<NcActionCaption :name="t('weather_status', 'Favorites')" />
@@ -102,7 +102,6 @@ import starOutlineSvg from '@mdi/svg/svg/star-outline.svg?raw'
 import starSvg from '@mdi/svg/svg/star.svg?raw'
 import { showError } from '@nextcloud/dialogs'
 import { getLocale } from '@nextcloud/l10n'
-import moment from '@nextcloud/moment'
 import { imagePath } from '@nextcloud/router'
 import NcActionButton from '@nextcloud/vue/components/NcActionButton'
 import NcActionCaption from '@nextcloud/vue/components/NcActionCaption'
@@ -865,10 +864,6 @@ export default {
 			}
 		},
 
-		formatTime(time) {
-			return moment(time).format('LT')
-		},
-
 		getTemperature(forecasts, offset = 0) {
 			return forecasts.length > offset ? forecasts[offset].data.instant.details.air_temperature : ''
 		},

apps/weather_status/src/weather-status.js

@@ -3,21 +3,17 @@
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
 
-import { getCSPNonce } from '@nextcloud/auth'
-import Vue from 'vue'
+import { createApp } from 'vue'
 import App from './App.vue'
 
-__webpack_nonce__ = getCSPNonce()
-
-Vue.prototype.t = t
-
 document.addEventListener('DOMContentLoaded', function() {
 	if (!OCA.Dashboard) {
 		return
 	}
 
 	OCA.Dashboard.registerStatus('weather', (el) => {
-		const Dashboard = Vue.extend(App)
-		return new Dashboard().$mount(el)
+		const app = createApp(App)
+		app.mixin({ methods: { t, n } })
+		return app.mount(el)
 	})
 })

build/frontend-legacy/webpack.modules.cjs

@@ -67,9 +67,6 @@ module.exports = {
 		updatenotification: path.join(__dirname, 'apps/updatenotification/src', 'updatenotification.js'),
 		'update-notification-legacy': path.join(__dirname, 'apps/updatenotification/src', 'update-notification-legacy.ts'),
 	},
-	weather_status: {
-		'weather-status': path.join(__dirname, 'apps/weather_status/src', 'weather-status.js'),
-	},
 	workflowengine: {
 		workflowengine: path.join(__dirname, 'apps/workflowengine/src', 'workflowengine.js'),
 	},

build/frontend/apps/weather_status

@@ -0,0 +1 @@
+../../../apps/weather_status

build/frontend/vite.config.ts

@@ -82,6 +82,9 @@ const modules = {
 	user_status: {
 		menu: resolve(import.meta.dirname, 'apps/user_status/src', 'menu.js'),
 	},
+	weather_status: {
+		'weather-status': resolve(import.meta.dirname, 'apps/weather_status/src', 'weather-status.js'),
+	},
 }
 
 // convert modules to modules entries prefied with the app id

dist/ActivityCommentAction-BjD71twg.chunk.mjs

@@ -0,0 +1,2 @@
+import{a as t}from"./index-Czc5GTr1.chunk.mjs";import{t as m}from"./translation-DoG5ZELJ-hYauSqYO.chunk.mjs";import{C as e,a as p}from"./CommentView-CPZtmu56.chunk.mjs";import{l as i}from"./activity-CAMqbip4.chunk.mjs";import{b as a,r as s,o as n,c,m as u}from"./Web-Cti_s7Nd.chunk.mjs";import{_ as l}from"./public-C1mLBHT3.chunk.mjs";import"./mdi-BmXSqhBI.chunk.mjs";import"./NcModal-DiDvgcU8-Byn0vO0C.chunk.mjs";import"./logger-D3RVzcfQ-C7aw_g9X.chunk.mjs";import"./createElementId-DhjFt1I9-DyhKY9_Z.chunk.mjs";import"./index-kP1pdrFW.chunk.mjs";import"./Check-BCcekaS6.chunk.mjs";import"./TrashCanOutline--zyyOtWX.chunk.mjs";import"./PencilOutline-rDieoUFC.chunk.mjs";import"./NcActionSeparator-B9pNQaji-Oo0JJDSn.chunk.mjs";import"./NcAvatar-1KxMUN7V-B2YSKjzX.chunk.mjs";import"./index-B1wP8tlr.chunk.mjs";import"./util-C9Hc1fff.chunk.mjs";import"./ArrowRight-Bmx0uKvc.chunk.mjs";import"./colors-Cv9F-jWS-xyX99ako.chunk.mjs";import"./NcUserStatusIcon-BF5OEQFU-mN2bb1uW.chunk.mjs";import"./NcActionLink-BFiaYt9A-C1NepubF.chunk.mjs";import"./NcDateTime.vue_vue_type_script_setup_true_lang-BJuPH7S7-BfjdLGR6.chunk.mjs";import"./NcActionText-CQ9qwJ0p-B9DxMewk.chunk.mjs";import"./NcUserBubble-BXR7vT0V-D3Ki-x4R.chunk.mjs";import"./GetComments-KeOYs-CY.chunk.mjs";import"./index-CdlgfEAJ.chunk.mjs";import"./dav-7lRRXOj7.chunk.mjs";import"./externalStorageUtils-C3askeL2.chunk.mjs";const d=a({components:{CommentEntry:p},mixins:[e],props:{reloadCallback:{type:Function,required:!0}},methods:{onNewComment(){try{this.reloadCallback()}catch(o){t(m("comments","Could not reload comments")),i.error("Could not reload comments",{error:o})}}}});function C(o,f,y,b,w,N){const r=s("CommentEntry");return n(),c(r,u(o.editorData,{autoComplete:o.autoComplete,resourceType:o.resourceType,editor:!0,userData:o.userData,resourceId:o.resourceId,class:"comments-action",onNew:o.onNewComment}),null,16,["autoComplete","resourceType","userData","resourceId","onNew"])}const W=l(d,[["render",C],["__scopeId","data-v-099b6b12"]]);export{W as default};
+//# sourceMappingURL=ActivityCommentAction-BjD71twg.chunk.mjs.map