@community-release/nx-ui 0.0.33 → 0.0.35

package/dist/module.d.mts

@@ -117,7 +117,6 @@ var generateComponentsDefaults = (options) => {
 `;
     }
   }
-  console.log("componentsStyle", result);
   return result;
 };
 

package/dist/module.d.ts

@@ -117,7 +117,6 @@ var generateComponentsDefaults = (options) => {
 `;
     }
   }
-  console.log("componentsStyle", result);
   return result;
 };
 

package/dist/module.json

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

package/dist/module.mjs

@@ -117,7 +117,6 @@ const generateComponentsDefaults = (options) => {
 `;
     }
   }
-  console.log("componentsStyle", result);
   return result;
 };
 

package/dist/runtime/components/helpers/wait.d.ts

@@ -0,0 +1,2 @@
+declare function _default(ms?: number): any;
+export default _default;

package/dist/runtime/components/helpers/wait.mjs

@@ -0,0 +1 @@
+export default (ms = 0) => new Promise(r => {setTimeout(r, ms)})

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

@@ -12,6 +12,7 @@
 	import { ref } from 'vue';
 	import UiLoading from '../../loading.vue';
 	import { useMapStore } from '../store';
+	import wait from '../../helpers/wait'; 
 
 // Data
 	const props = defineProps({
@@ -28,6 +29,7 @@
 			type: Array
 		},
 	});
+	const emit = defineEmits(['error']);
 	const store = useMapStore();
 	const loading = ref(false);
 	let cachedPosition = null;
@@ -65,7 +67,11 @@
 		});
 	}
 
+	let clickInProcess = false;
 	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) {
@@ -86,14 +92,24 @@
 			);
 
 			// Set coord and zoom
-			store.setCoord(nearest.coord, 2);
-			store.setZoom(nearest?.zoom ? nearest.zoom : 14);
+			// Pan to user location
+			store.setCoord(cachedPosition, 750);
+			store.setZoom(14, 750);
+
+			await wait(2000);
+
+			// Pan to nearest marker location
+			store.setCoord(nearest.coord, 1500);
+			store.setZoom(nearest?.zoom ? nearest.zoom : 14, 1500);
 		} catch (err) {
 			console.log('handleClick err', err);
+
+			emit('error', 'error-geo-not-enabled-on-device');
 		}
 
 		store.setSelectedMarker(null);
 		loading.value = false;
+		clickInProcess = false;
 	}
 </script>
 

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

@@ -1,5 +1,5 @@
 <template>
-	<div class="component-ui-map-openlayer component-ui-map-engine">
+	<div class="component-ui-map-openlayer component-ui-map-engine" :class="{'tag-user-position': userCoord.length}">
 		<div class="map" ref="refMap"></div>
 		<div style="display:none">
 			<div id="user-position-marker"></div>
@@ -61,8 +61,10 @@
 	// Store
 	const store = useMapStore();
 	const {
+		cameraDuration,
 		requestCoordChange,
 		coord,
+		requestZoomChange,
 		zoom,
 		zoomMin,
 		zoomMax,
@@ -84,18 +86,23 @@
 		redrawMarkers();
 	});
 
-	// Watch coord
-	watch([requestCoordChange, coord], (v) => {
-		if (!v[0]) return;
+	// Watch coord or zoom change
+	watch([requestCoordChange, requestZoomChange], () => {
+		if (!requestCoordChange.value && !requestZoomChange.value) return;
 
-		const coord = fromLonLat(v[1]);
+		console.log('Watch coord or zoom change');
 
-		if (v[0] === 1)
-			view.setCenter(coord);
-		else
-			view.animate({center: coord, duration: 300});
+		const options = {
+			duration: cameraDuration.value
+		};
 
-		requestCoordChange.value = 0;
+		if (requestCoordChange.value) options.center = fromLonLat(coord.value);
+		if (requestZoomChange.value) options.zoom = zoom.value;
+
+		view.animate(options, () => {
+			requestCoordChange.value = false;
+			requestZoomChange.value = false;
+		});
 	});
 
 	// Watch user coord
@@ -103,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,
@@ -339,8 +346,6 @@
 			}, 50);
 		});
 
-		initialized = true;
-
 		// Handle map marker click
 		map.on('click', (e) => {
 			cluster.getFeatures(e.pixel).then((clickedFeatures) => {
@@ -367,7 +372,12 @@
 			});
 		});
 
-		map.on('loadend', () => { emit('initialized', payload); });
+		map.on('loadend', () => { 
+			if (initialized) return;
+
+			initialized = true;
+			emit('initialized', payload);
+		});
 	}
 
 // Hooks
@@ -468,6 +478,14 @@
 
 	#user-position-marker {
 		.mix-pulsar;
+
+		display: none;
+	}
+
+	&.tag-user-position {
+		#user-position-marker {
+			display: block;
+		}
 	}
 }
 </style>

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.33",
+    "version": "0.0.35",
     "description": "nx-ui - Nuxt UI library",
     "repository": {
         "type": "git",