refactor(LocationCard): migrate to script setup

refactor(LocationCard): migrate to script setup

Assisted-by: ClaudeCode:claude-sonnet-5

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

[skip ci]

Author: Antreesy

src/components/MessagesList/MessagesGroup/Message/MessageItem.spec.js

@@ -400,8 +400,8 @@ describe('MessageItem.vue', () => {
 					'geo-location': {
 						id: '123',
 						name: 'Location name',
-						latitude: 12.345678,
-						longitude: 98.765432,
+						latitude: '12.345678',
+						longitude: '98.765432',
 						metadata: '{id:123}',
 						type: 'geo-location',
 					},

src/components/MessagesList/MessagesGroup/Message/MessagePart/LocationCard.vue

@@ -3,6 +3,69 @@
   - SPDX-License-Identifier: AGPL-3.0-or-later
 -->
 
+<script setup lang="ts">
+import { t } from '@nextcloud/l10n'
+import { imagePath } from '@nextcloud/router'
+import {
+	LControlAttribution,
+	LIcon,
+	LMap,
+	LMarker,
+	LTileLayer,
+} from '@vue-leaflet/vue-leaflet'
+import { computed } from 'vue'
+
+// Leaflet icon patch | re-uses images from ~leaflet package
+import 'leaflet/dist/leaflet.css'
+import 'leaflet-defaulticon-compatibility/dist/leaflet-defaulticon-compatibility.webpack.css'
+import 'leaflet-defaulticon-compatibility'
+
+const props = withDefaults(defineProps<{
+	/** The latitude of the location */
+	latitude: string
+	/** The longitude of the location */
+	longitude: string
+	/** The name of the location */
+	name?: string
+	/** The component appearance (take full width) */
+	wide?: boolean
+}>(), {
+	name: '',
+})
+
+// {s} subdomains are used by ~leaflet package instead of the policy-preferred 'tile.openstreetmap.org' host
+const url = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
+// The zoom level of the map in the Talk app (chat, shared items tab)
+const previewZoom = 13
+// The zoom level of the map in the new OpenStreetMap tab upon opening the link
+const linkZoom = 18
+
+// Map preview is non-interactive
+// Attribution control from ~leaflet package is replaced with LControlAttribution
+const mapOptions = {
+	scrollWheelZoom: false,
+	zoomControl: false,
+	dragging: false,
+	attributionControl: false,
+}
+// Visible attribution is required by the OpenStreetMap tile usage policy (https://operations.osmfoundation.org/policies/tiles/)
+const attribution = '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
+
+// HTTP Referer header is required by the OpenStreetMap tile usage policy (https://operations.osmfoundation.org/policies/tiles/)
+const tileLayerOptions = {
+	referrerPolicy: 'strict-origin-when-cross-origin',
+}
+
+const linkAriaLabel = t('spreed', 'Open this location in OpenStreetMap')
+const iconUrl = imagePath('spreed', 'icon-marker-openstreetmap.svg')
+
+const center = computed(() => [Number(props.latitude), Number(props.longitude)])
+const mapLink = computed(() => 'https://www.openstreetmap.org/'
+	+ `?mlat=${props.latitude}`
+	+ `&mlon=${props.longitude}`
+	+ `#map=${linkZoom}/${props.latitude}/${props.longitude}`)
+</script>
+
 <template>
 	<a
 		:href="mapLink"
@@ -14,12 +77,7 @@
 		<LMap
 			:zoom="previewZoom"
 			:center="center"
-			:options="{
-				scrollWheelZoom: false,
-				zoomControl: false,
-				dragging: false,
-				attributionControl: false,
-			}"
+			:options="mapOptions"
 			@scroll.prevent="">
 			<LTileLayer
 				:url="url"

src/env.d.ts

@@ -36,6 +36,8 @@ declare global {
 		export default content
 	}
 
+	declare module '*.css'
+
 	// @nextcloud/webpack-vue-config build globals
 	const appName: string
 	const appVersion: string