@community-release/nx-ui 0.0.34 → 0.0.35

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "ui",
   "configKey": "ui",
-  "version": "0.0.34"
+  "version": "0.0.35"
 }

package/dist/runtime/components/map/index.vue

@@ -77,15 +77,15 @@ const props = defineProps({
 	},
 });
 
-store.setCoord(props.coord);
-store.setZoom(props.zoom);
-store.setZoomMin(props.zoomMin);
-store.setZoomMax(props.zoomMax);
-store.setDeviceZoom(props.deviceZoom);
-store.setMarkers(props.markers);
-store.setMarkerImage(props.markerImage);
-store.setMarkerActiveImage(props.markerActiveImage);
-store.setMarkerDisabledImage(props.markerDisabledImage);
+store.coord = props.coord;
+store.zoom = props.zoom;
+store.zoomMin = props.zoomMin;
+store.zoomMax = props.zoomMax;
+store.deviceZoom = props.deviceZoom;
+store.markers = props.markers;
+store.markerImage = props.markerImage;
+store.markerActiveImage = props.markerActiveImage;
+store.markerDisabledImage = props.markerDisabledImage;
 
 watch(() => props.disabledMarkers, (v) => {
 	store.setDisabledMarkers(v);

package/dist/runtime/components/map/location/nearest.vue

@@ -71,7 +71,7 @@
 	async function handleClick() {
 		if (clickInProcess) return;
 		clickInProcess = true;
-		
+
 		try {
 			// If cache not exist or it's older than 1 minute
 			if (!cachedPosition || Date.now() - cachedTime > 60000) {
@@ -92,13 +92,15 @@
 			);
 
 			// Set coord and zoom
+			// Pan to user location
 			store.setCoord(cachedPosition, 750);
-			store.setZoom(14);
+			store.setZoom(14, 750);
 
 			await wait(2000);
 
+			// Pan to nearest marker location
 			store.setCoord(nearest.coord, 1500);
-			store.setZoom(nearest?.zoom ? nearest.zoom : 14);
+			store.setZoom(nearest?.zoom ? nearest.zoom : 14, 1500);
 		} catch (err) {
 			console.log('handleClick err', err);
 

package/dist/runtime/components/map/openlayers/index.vue

@@ -61,8 +61,10 @@
 	// Store
 	const store = useMapStore();
 	const {
+		cameraDuration,
 		requestCoordChange,
 		coord,
+		requestZoomChange,
 		zoom,
 		zoomMin,
 		zoomMax,
@@ -84,24 +86,23 @@
 		redrawMarkers();
 	});
 
-	// Watch coord
-	watch([requestCoordChange, coord], (v) => {
-		const req = v[0];
+	// Watch coord or zoom change
+	watch([requestCoordChange, requestZoomChange], () => {
+		if (!requestCoordChange.value && !requestZoomChange.value) return;
 
-		if (!req) return;
+		console.log('Watch coord or zoom change');
 
-		const coord = fromLonLat(v[1]);
+		const options = {
+			duration: cameraDuration.value
+		};
 
-		// If req === 1 then set coord instantly
-		if (req === 1) {
-			view.setCenter(coord);
-		// If req === 2 then set coord in default duration, else treat req as duration time in ms
-		} else {
-			const duration = req === 2 ? 300 : req;
-			view.animate({center: coord, duration});
-		}
+		if (requestCoordChange.value) options.center = fromLonLat(coord.value);
+		if (requestZoomChange.value) options.zoom = zoom.value;
 
-		requestCoordChange.value = 0;
+		view.animate(options, () => {
+			requestCoordChange.value = false;
+			requestZoomChange.value = false;
+		});
 	});
 
 	// Watch user coord
@@ -109,20 +110,20 @@
 		userPositionMarker.setPosition(fromLonLat(v));
 	});
 
-	// Watch zoom
-	watch(zoom, (v) => {
-		const currentZoom = view.getZoom();
+	// // Watch zoom
+	// watch(zoom, (v) => {
+	// 	const currentZoom = view.getZoom();
 
-		if (currentZoom === v) return;
+	// 	if (currentZoom === v) return;
 
-		if (initialized)
-			view.animate({
-				zoom: v,
-				duration: 300
-			});
-		else
-			view.setZoom(v);
-	});
+	// 	if (initialized)
+	// 		view.animate({
+	// 			zoom: v,
+	// 			duration: 300
+	// 		});
+	// 	else
+	// 		view.setZoom(v);
+	// });
 
 	const payload = {
 		store,
@@ -373,7 +374,7 @@
 
 		map.on('loadend', () => { 
 			if (initialized) return;
-			
+
 			initialized = true;
 			emit('initialized', payload);
 		});

package/dist/runtime/components/map/store.d.ts

@@ -1,6 +1,8 @@
 export const useMapStore: import("pinia").StoreDefinition<"map", {
-    requestCoordChange: number;
+    cameraDuration: number;
+    requestCoordChange: boolean;
     coord: never[];
+    requestZoomChange: boolean;
     zoom: number;
     zoomMin: number;
     zoomMax: number;
@@ -22,9 +24,10 @@ export const useMapStore: import("pinia").StoreDefinition<"map", {
 }, {
     /**
      * Set map zoom
-     * @param {number} v
+     * @param {number} zoom
+     * @param {number} duration
      */
-    setZoom(v: number): void;
+    setZoom(zoom: number, duration?: number): void;
     /**
      * Set min map zoom
      * @param {number} v
@@ -41,10 +44,10 @@ export const useMapStore: import("pinia").StoreDefinition<"map", {
     zoomOut(): void;
     /**
      * Set map coord
-     * @param {MapCoord} v
-     * @param {number} requestCoordChange - 1 default, 2 animated
+     * @param {number} coord
+     * @param {number} duration
      */
-    setCoord(v: MapCoord, requestCoordChange?: number): void;
+    setCoord(coord: number, duration?: number): void;
     /**
      * Set user coord
      * @param {MapCoord} v

package/dist/runtime/components/map/store.mjs

@@ -18,9 +18,10 @@ import { defineStore } from 'pinia';
 export const useMapStore = defineStore('map', {
     state: () => {
         return {
-			requestCoordChange: 0,
+			cameraDuration: 0,
+			requestCoordChange: false,
 			coord: [],
-
+			requestZoomChange: false,
 			zoom: 8,
 			zoomMin: 8,
 			zoomMax: 18,
@@ -41,10 +42,13 @@ export const useMapStore = defineStore('map', {
 	actions: {
 		/**
 		 * Set map zoom
-		 * @param {number} v
+		 * @param {number} zoom
+		 * @param {number} duration
 		 */
-		setZoom(v) {
-			this.zoom = v;
+		setZoom(zoom, duration = 300) {
+			this.zoom = zoom;
+			this.cameraDuration = duration;
+			this.requestZoomChange = true;
 		},
 
 		/**
@@ -72,6 +76,8 @@ export const useMapStore = defineStore('map', {
 			}
 
 			this.zoom++;
+			this.cameraDuration = 300;
+			this.requestZoomChange = true;
 		},
 		
 		/** Map zoom out */
@@ -83,16 +89,19 @@ export const useMapStore = defineStore('map', {
 			}
 
 			this.zoom--;
+			this.cameraDuration = 300;
+			this.requestZoomChange = true;
 		},
 
 		/**
 		 * Set map coord
-		 * @param {MapCoord} v
-		 * @param {number} requestCoordChange - 1 default, 2 animated
+		 * @param {number} coord
+		 * @param {number} duration
 		 */
-		setCoord(v, requestCoordChange = 1) {
-			this.requestCoordChange = requestCoordChange;
-			this.coord = v;
+		setCoord(coord, duration = 300) {
+			this.coord = coord;
+			this.cameraDuration = duration;
+			this.requestCoordChange = true;
 		},
 
 		/**

package/dist/runtime/components/map/zoom.vue

@@ -1,9 +1,9 @@
 <template>
 	<div class="component-ui-map-zoom">
 		<div class="prepend"><slot /></div>
-		<ui-button @click="store.zoomIn" color="gray" block variant="flat" size="small" shape="square">+</ui-button>
+		<ui-button @click="store.zoomIn" class="plus" color="gray" block variant="flat" size="small" shape="square">+</ui-button>
 		<div class="separator"></div>
-		<ui-button @click="store.zoomOut" color="gray" block variant="flat" size="small" shape="square">-</ui-button>
+		<ui-button @click="store.zoomOut" class="minus" color="gray" block variant="flat" size="small" shape="square">-</ui-button>
 	</div>
 </template>
 
@@ -54,6 +54,16 @@ const props = defineProps(['store']);
 		font-size: @com-text-large;
 	}
 
+	.component-ui-button.plus .button-bg {
+		border-top-left-radius: @com-border-radius-default;
+		border-top-right-radius: @com-border-radius-default;
+	}
+
+	.component-ui-button.minus .button-bg {
+		border-bottom-left-radius: @com-border-radius-default;
+		border-bottom-right-radius: @com-border-radius-default;
+	}
+
 	.separator {
 		border-bottom: 1px solid @com-color-border;
 	}

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@community-release/nx-ui",
-    "version": "0.0.34",
+    "version": "0.0.35",
     "description": "nx-ui - Nuxt UI library",
     "repository": {
         "type": "git",