@community-release/nx-ui 0.0.34 → 0.0.36

package/dist/module.json

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

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

@@ -75,17 +75,27 @@ const props = defineProps({
 		default: '',
 		type: String
 	},
+	clusterColor: {
+		default: comProps.clusterColor,
+		type: String
+	},
+	disabledClusterColor: {
+		default: comProps.disabledClusterColor,
+		type: String
+	},
 });
 
-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;
+store.clusterColor = props.clusterColor;
+store.disabledClusterColor = props.disabledClusterColor;
 
 watch(() => props.disabledMarkers, (v) => {
 	store.setDisabledMarkers(v);

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

@@ -71,7 +71,9 @@
 	async function handleClick() {
 		if (clickInProcess) return;
 		clickInProcess = true;
-		
+
+		store.setSelectedMarker(null);
+
 		try {
 			// If cache not exist or it's older than 1 minute
 			if (!cachedPosition || Date.now() - cachedTime > 60000) {
@@ -92,20 +94,21 @@
 			);
 
 			// 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);
 
 			emit('error', 'error-geo-not-enabled-on-device');
 		}
 
-		store.setSelectedMarker(null);
 		loading.value = false;
 		clickInProcess = false;
 	}

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

@@ -61,8 +61,10 @@
 	// Store
 	const store = useMapStore();
 	const {
+		cameraDuration,
 		requestCoordChange,
 		coord,
+		requestZoomChange,
 		zoom,
 		zoomMin,
 		zoomMax,
@@ -73,6 +75,8 @@
 		markerActiveImage,
 		markerDisabledImage,
 		selectedMarker,
+		clusterColor,
+		disabledClusterColor,
 		userCoord
 	} = storeToRefs(store);
 
@@ -84,24 +88,21 @@
 		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;
+		const options = {
+			duration: cameraDuration.value
+		};
 
-		const coord = fromLonLat(v[1]);
+		if (requestCoordChange.value) options.center = fromLonLat(coord.value);
+		if (requestZoomChange.value) options.zoom = zoom.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});
-		}
-
-		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,
@@ -238,18 +239,31 @@
 				const isSelected = markerId === selectedMarker.value?.id;
 
 				style = styleCache[isSelected ? 'active' : (isDisabled ? 'disabled' : 'default')];
+			
 			// If cluster
 			} else {
+				let isDisabled = false;
+
+				// Check if cluster have disabled markers
+				for (let item of allFeatures) {
+					if (disabledMarkers.value.includes(item.attributes.id)) {
+						isDisabled = true;
+						break;
+					}
+				}
+
+				const cacheId = size + (isDisabled ? 'd' : '');
+
 				// Have cache
-				if (styleCache[size]) {
-					style = styleCache[size];
+				if (styleCache[cacheId]) {
+					style = styleCache[cacheId];
 				// No cache
 				} else {
 					style = new Style({
 						image: new CircleStyle({
 							radius: 14,
 							fill: new Fill({
-								color: '#4b3aaa',
+								color: isDisabled ? disabledClusterColor.value : clusterColor.value,
 							}),
 						}),
 						text: new Text({
@@ -261,7 +275,7 @@
 						}),
 					});
 
-					styleCache[size] = style;
+					styleCache[cacheId] = style;
 				}
 			}
 
@@ -373,7 +387,7 @@
 
 		map.on('loadend', () => { 
 			if (initialized) return;
-			
+
 			initialized = true;
 			emit('initialized', payload);
 		});

package/dist/runtime/components/map/props.json

@@ -2,5 +2,6 @@
 	"zoom": 8,
 	"zoomMin": 7,
 	"zoomMax": 18,
-	"userMarkerColor": "var(--ui-color-primary)"
+	"clusterColor": "#4b3aaa",
+	"disabledClusterColor": "#5f6761"
 }

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;
@@ -11,6 +13,8 @@ export const useMapStore: import("pinia").StoreDefinition<"map", {
     markers: never[];
     selectedMarker: null;
     disabledMarkers: never[];
+    clusterColor: string;
+    disabledClusterColor: string;
     userCoord: never[];
 }, {
     /**
@@ -22,9 +26,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 +46,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,
@@ -33,6 +34,8 @@ export const useMapStore = defineStore('map', {
 			markers: [],
 			selectedMarker: null,
 			disabledMarkers: [],
+			clusterColor: '',
+			disabledClusterColor: '',
 
 			userCoord: []
 		}
@@ -41,10 +44,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 +78,8 @@ export const useMapStore = defineStore('map', {
 			}
 
 			this.zoom++;
+			this.cameraDuration = 300;
+			this.requestZoomChange = true;
 		},
 		
 		/** Map zoom out */
@@ -83,16 +91,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.36",
     "description": "nx-ui - Nuxt UI library",
     "repository": {
         "type": "git",