@community-release/nx-ui 0.0.32 → 0.0.34

package/dist/module.d.mts

@@ -101,12 +101,15 @@ var defaultComponentsStyle = {
   },
   button: {
     "border-radius": "var(--ui-input-height-large)"
+  },
+  map: {
+    "user-position-color": "var(--ui-color-primary)"
   }
 };
 
 var generateComponentsDefaults = (options) => {
   let result = "";
-  const components = options?.components ? options.components : {};
+  const components = options?.componentsStyle ? options.componentsStyle : {};
   for (let name in defaultComponentsStyle) {
     const style = Object.assign(defaultComponentsStyle[name], components[name] ? components[name] : {});
     for (let prop in style) {

package/dist/module.d.ts

@@ -101,12 +101,15 @@ var defaultComponentsStyle = {
   },
   button: {
     "border-radius": "var(--ui-input-height-large)"
+  },
+  map: {
+    "user-position-color": "var(--ui-color-primary)"
   }
 };
 
 var generateComponentsDefaults = (options) => {
   let result = "";
-  const components = options?.components ? options.components : {};
+  const components = options?.componentsStyle ? options.componentsStyle : {};
   for (let name in defaultComponentsStyle) {
     const style = Object.assign(defaultComponentsStyle[name], components[name] ? components[name] : {});
     for (let prop in style) {

package/dist/module.json

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

package/dist/module.mjs

@@ -101,12 +101,15 @@ const defaultComponentsStyle = {
   },
   button: {
     "border-radius": "var(--ui-input-height-large)"
+  },
+  map: {
+    "user-position-color": "var(--ui-color-primary)"
   }
 };
 
 const generateComponentsDefaults = (options) => {
   let result = "";
-  const components = options?.components ? options.components : {};
+  const components = options?.componentsStyle ? options.componentsStyle : {};
   for (let name in defaultComponentsStyle) {
     const style = Object.assign(defaultComponentsStyle[name], components[name] ? components[name] : {});
     for (let prop in style) {

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/loading.vue

@@ -1,5 +1,5 @@
 <template>
-	<section class="component-ui-loading2" :class="{'tag-active': active}">
+	<section class="component-ui-loading" :class="{'tag-active': active}">
 		<svg width="32" height="32">
 			<circle cx="16" cy="16" r="10" ref="progress" />
 		</svg>
@@ -51,7 +51,7 @@ const props = defineProps({
 	}
 }
 
-.component-ui-loading2 {
+.component-ui-loading {
 	transition: visibility @com-ani-time @com-ani-ease, opacity @com-ani-time @com-ani-ease;
 
 	opacity: 0;

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

@@ -15,7 +15,7 @@ const props = defineProps({
 	},
 	label: {
 		default: '',
-	}
+	},
 });
 const store = useMapStore();
 

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

@@ -1,37 +1,114 @@
 <template>
 	<section class="component-ui-map-location-nearest" @click="handleClick">
-		<i v-if="icon" class="icon" :class="icon"></i>
+		<i v-if="icon" class="icon" :class="[icon, loading ? 'tag-loading' : '']">
+			<ui-loading :active="loading" />
+		</i>
 		<span class="label"><span>{{ label }}</span></span>
 	</section>
 </template>
 
 <script setup>
-const props = defineProps({
-	label: {
-		required: true,
-		type: String
-	},
-	icon: {
-		required: true,
-		type: String
-	},
-});
-
-function getPosition() {
-    return new Promise((res, rej) => {
-        navigator.geolocation.getCurrentPosition(res, rej);
-    });
-}
+// Import
+	import { ref } from 'vue';
+	import UiLoading from '../../loading.vue';
+	import { useMapStore } from '../store';
+	import wait from '../../helpers/wait'; 
+
+// Data
+	const props = defineProps({
+		label: {
+			required: true,
+			type: String
+		},
+		icon: {
+			required: true,
+			type: String
+		},
+		locations: {
+			required: true,
+			type: Array
+		},
+	});
+	const emit = defineEmits(['error']);
+	const store = useMapStore();
+	const loading = ref(false);
+	let cachedPosition = null;
+	let cachedTime = 0;
 
-async function handleClick() {
-	let pos = null;
+// Methods
+	// Get distance between points
+	function getDistance(p1, p2) {
+		const dx = p1.coord[0] - p2.coord[0];
+		const dy = p1.coord[1] - p2.coord[1];
 
-	try {
-		pos = await getPosition();
-	} catch (err) {
-		console.log('handleClick err', err);
+		return Math.sqrt(dx * dx + dy * dy);
+	}
+
+	// Find nearest points
+	function findNearestPoint(points, target) {
+		if (points.length === 0) return [];
+		
+		// Calculate distances
+		const pointsWithDistance = points.map(point => ({
+			data: point,
+			distance: getDistance(point, target)
+		}));
+		
+		// Sort by distance
+		pointsWithDistance.sort((a, b) => a.distance - b.distance);
+		
+		// Select the first n points
+		return pointsWithDistance[0].data;
+	}
+
+	function getPosition() {
+		return new Promise((res, rej) => {
+			navigator.geolocation.getCurrentPosition(res, rej);
+		});
+	}
+
+	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) {
+				loading.value = true;
+
+				const pos = await getPosition();
+
+				cachedPosition = [pos.coords.longitude, pos.coords.latitude];
+				cachedTime = Date.now();
+
+				store.setUserCoord(cachedPosition);
+			}
+
+			// Find nearest point
+			const nearest = findNearestPoint(
+				props.locations, 
+				{ coord: cachedPosition }
+			);
+
+			// Set coord and zoom
+			store.setCoord(cachedPosition, 750);
+			store.setZoom(14);
+
+			await wait(2000);
+
+			store.setCoord(nearest.coord, 1500);
+			store.setZoom(nearest?.zoom ? nearest.zoom : 14);
+		} catch (err) {
+			console.log('handleClick err', err);
+
+			emit('error', 'error-geo-not-enabled-on-device');
+		}
+
+		store.setSelectedMarker(null);
+		loading.value = false;
+		clickInProcess = false;
 	}
-}
 </script>
 
 <style lang="less">
@@ -50,19 +127,42 @@ async function handleClick() {
 @com-color-bg: var(--ui-color-bg);
 @com-color-primary: var(--ui-color-primary);
 
+@com-ani-time: var(--ui-ani-time);
+@com-ani-ease: var(--ui-ani-ease);
+
 .component-ui-map-location-nearest {
 	height: @com-height;
 	background: @com-color-bg;
 	border-radius: @com-border-radius-default;
 
+	position: relative;
 	display: flex;
 	cursor: pointer;
 
 	.icon {
+		position: relative;
 		flex: 0 0 38px;
 		line-height: @com-height;
 		font-size: @com-text-medium;
 		color: @com-color-primary;
+
+		.component-ui-loading {
+			transform: translate3d(-50%, -50%, 0);
+			position: absolute;
+			top: 50%;
+			left: 50%;
+		}
+
+		&:before {
+			transition: opacity @com-ani-time @com-ani-ease;
+		}
+
+		&.tag-loading {
+			&:before {
+				opacity: 0;
+			}
+		}
+
 	}
 
 	.label {
@@ -73,16 +173,8 @@ async function handleClick() {
 		font-size: @com-text-small;
 
 		span {
-			.mix-miltiline-text-overflow(2);
+			.mix-multiline-text-overflow(2);
 		}
 	}
 }
-
-// @media only screen and (max-width: 390px) {
-// 	.component-ui-map-location-nearest {
-// 		.icon {
-// 			flex-basis: 32px;
-// 		}
-// 	}
-// }
 </style>

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

@@ -1,6 +1,9 @@
 <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>
+		</div>
 		<slot />
 	</div>
 </template>
@@ -29,6 +32,7 @@
 	import { Cluster, OSM, Vector as VectorSource } from 'ol/source.js';
 	import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer.js';
 	import { boundingExtent } from 'ol/extent.js';
+	import Overlay from 'ol/Overlay.js';
 
 	import Map from 'ol/Map.js';
 	import View from 'ol/View.js';
@@ -52,10 +56,12 @@
 	let initialized = false;
 	let features = [];
 	let cluster = null;
+	let userPositionMarker = null;
 
 	// Store
 	const store = useMapStore();
 	const {
+		requestCoordChange,
 		coord,
 		zoom,
 		zoomMin,
@@ -66,7 +72,8 @@
 		markerImage,
 		markerActiveImage,
 		markerDisabledImage,
-		selectedMarker
+		selectedMarker,
+		userCoord
 	} = storeToRefs(store);
 
 	watch(() => selectedMarker.value, (v) => {
@@ -78,7 +85,29 @@
 	});
 
 	// Watch coord
-	watch(coord, (v) => { view.setCenter(fromLonLat(v)); });
+	watch([requestCoordChange, coord], (v) => {
+		const req = v[0];
+
+		if (!req) return;
+
+		const coord = fromLonLat(v[1]);
+
+		// 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;
+	});
+
+	// Watch user coord
+	watch(userCoord, (v) => {
+		userPositionMarker.setPosition(fromLonLat(v));
+	});
 
 	// Watch zoom
 	watch(zoom, (v) => {
@@ -290,6 +319,15 @@
 			controls: []
 		});
 
+		// Add user position marker
+		userPositionMarker = new Overlay({
+			position: fromLonLat(coord.value),
+			positioning: 'center-center',
+			element: document.getElementById('user-position-marker'),
+			stopEvent: false,
+		});
+		map.addOverlay(userPositionMarker);
+
 		// Add mouse wheel interaction
 		mouseWheelInt = new mouseWheelZoomInteraction({
 			condition(e) {
@@ -307,8 +345,6 @@
 			}, 50);
 		});
 
-		initialized = true;
-
 		// Handle map marker click
 		map.on('click', (e) => {
 			cluster.getFeatures(e.pixel).then((clickedFeatures) => {
@@ -335,7 +371,12 @@
 			});
 		});
 
-		map.on('loadend', () => { emit('initialized', payload); });
+		map.on('loadend', () => { 
+			if (initialized) return;
+			
+			initialized = true;
+			emit('initialized', payload);
+		});
 	}
 
 // Hooks
@@ -345,6 +386,86 @@
 </script>
 
 <style lang="less">
+@import (less) '../../styles/components.less';
+@com-user-position-color: @ui-map-user-position-color;
+
+@keyframes pulsar {
+	from {
+		transform: scale(1);
+		opacity: 0;
+	}
+
+	50% { opacity: 0.7; }
+
+	to {
+		transform: scale(2);
+		opacity: 0;
+	}
+}
+
+@keyframes pulsar-base {
+	from { transform: scale(1); }
+	50% { transform: scale(0.95); }
+	to { transform: scale(1); }
+}
+
+.mix-pulsar(@com-pulsar-size: 18px, @com-pulsar-color: @com-user-position-color) {
+	@com-pulsar-duration: 2s;
+
+	pointer-events: none;
+	width: @com-pulsar-size;
+	height: @com-pulsar-size;
+
+	&:before {
+		content: '';
+
+		transform-origin: 50% 50%;
+
+		opacity: 0;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+
+		border-radius: 50%;
+
+		background: @com-pulsar-color;
+
+		animation-name: pulsar;
+		animation-duration: @com-pulsar-duration;
+		animation-iteration-count: infinite;
+		animation-timing-function: linear;
+		animation-fill-mode: forwards;
+		animation-delay: 0.7s;
+	}
+
+	&:after {
+		content: '';
+
+		transform-origin: 50% 50%;
+		opacity: 0.9;
+
+		box-sizing: border-box;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+
+		border-radius: 50%;
+		border: 2px solid #fff;
+		background: @com-pulsar-color;
+
+		animation-name: pulsar-base;
+		animation-duration: @com-pulsar-duration;
+		animation-iteration-count: infinite;
+		animation-timing-function: linear;
+		animation-fill-mode: forwards;
+		animation-delay: 0.7s;
+	}
+}
+
 .component-ui-map-openlayer {
 	position: relative;
 
@@ -353,5 +474,17 @@
 		inset: 0;
 		background: #add19e;
 	}
+
+	#user-position-marker {
+		.mix-pulsar;
+
+		display: none;
+	}
+
+	&.tag-user-position {
+		#user-position-marker {
+			display: block;
+		}
+	}
 }
 </style>

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

@@ -1,5 +1,6 @@
 {
 	"zoom": 8,
 	"zoomMin": 7,
-	"zoomMax": 18
+	"zoomMax": 18,
+	"userMarkerColor": "var(--ui-color-primary)"
 }

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

@@ -1,4 +1,5 @@
 export const useMapStore: import("pinia").StoreDefinition<"map", {
+    requestCoordChange: number;
     coord: never[];
     zoom: number;
     zoomMin: number;
@@ -10,6 +11,7 @@ export const useMapStore: import("pinia").StoreDefinition<"map", {
     markers: never[];
     selectedMarker: null;
     disabledMarkers: never[];
+    userCoord: never[];
 }, {
     /**
      * Get marker by id
@@ -40,8 +42,14 @@ export const useMapStore: import("pinia").StoreDefinition<"map", {
     /**
      * Set map coord
      * @param {MapCoord} v
+     * @param {number} requestCoordChange - 1 default, 2 animated
      */
-    setCoord(v: MapCoord): void;
+    setCoord(v: MapCoord, requestCoordChange?: number): void;
+    /**
+     * Set user coord
+     * @param {MapCoord} v
+     */
+    setUserCoord(v: MapCoord): void;
     /**
      * Enable/disable device zoom, if call withour params then toggle current state
      *  @param {boolean=} v

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

@@ -18,6 +18,7 @@ import { defineStore } from 'pinia';
 export const useMapStore = defineStore('map', {
     state: () => {
         return {
+			requestCoordChange: 0,
 			coord: [],
 
 			zoom: 8,
@@ -31,7 +32,9 @@ export const useMapStore = defineStore('map', {
 			markerDisabledImage: '',
 			markers: [],
 			selectedMarker: null,
-			disabledMarkers: []
+			disabledMarkers: [],
+
+			userCoord: []
 		}
     },
 
@@ -85,11 +88,21 @@ export const useMapStore = defineStore('map', {
 		/**
 		 * Set map coord
 		 * @param {MapCoord} v
+		 * @param {number} requestCoordChange - 1 default, 2 animated
 		 */
-		setCoord(v) {
+		setCoord(v, requestCoordChange = 1) {
+			this.requestCoordChange = requestCoordChange;
 			this.coord = v;
 		},
 
+		/**
+		 * Set user coord
+		 * @param {MapCoord} v
+		 */
+		setUserCoord(v) {
+			this.userCoord = v;
+		},
+
 		/**
 		 * Enable/disable device zoom, if call withour params then toggle current state
 		 *  @param {boolean=} v

package/dist/runtime/components/styles/components.less

@@ -1,3 +1,4 @@
 @ui-accordion-title-font-size: var(--ui-text-medium);
 @ui-accordion-text-font-size: var(--ui-text-default);
 @ui-button-border-radius: var(--ui-input-height-large);
+@ui-map-user-position-color: var(--color-primary);

package/dist/runtime/components/styles/mixins.less

@@ -1,4 +1,4 @@
-.mix-miltiline-text-overflow(@line-numbers: 2) {
+.mix-multiline-text-overflow(@line-numbers: 2) {
 	overflow: hidden;
 	display: -webkit-box;
 	-webkit-line-clamp: @line-numbers;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@community-release/nx-ui",
-    "version": "0.0.32",
+    "version": "0.0.34",
     "description": "nx-ui - Nuxt UI library",
     "repository": {
         "type": "git",
@@ -52,7 +52,7 @@
     },
     "scripts": {
         "prepack": "nuxt-module-build build",
-        "dev": "nuxi dev docs --host",
+        "dev": "nuxi dev docs --host --port 7012",
         "build": "nuxi build docs",
         "prepare": "nuxt-module-build build && nuxt-module-build prepare && nuxi prepare docs",
         "release": "npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",