@community-release/nx-ui 0.0.67 → 0.0.72

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "ui",
   "configKey": "ui",
-  "version": "0.0.67"
+  "version": "0.0.72"
 }

package/dist/runtime/components/accordion/accordion-item.vue

@@ -14,7 +14,7 @@
 			<div class="title">{{ title }}</div>
 			<div class="btn-toggle"></div>
 		</button>
-		<div :id="`acc-content-${cid}`" class="text" role="region" :aria-labelledby="`acc-button-${cid}`">
+		<div :id="`acc-content-${cid}`" class="text" role="region" :aria-labelledby="`acc-button-${cid}`" :inert="accordionData.open.value !== id">
 			<div><slot /></div>
 		</div>
 	</section>

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

@@ -84,6 +84,20 @@ const props = defineProps({
 		default: comProps.disabledClusterColor,
 		type: String
 	},
+	/**
+	 * Min distance between clusters
+	 */
+	clusterMinDistance: {
+		default: 15,
+		type: Number
+	},
+	/**
+	 * Distance(in px) between points when they start group in cluster
+	 */
+	clusterDistance: {
+		default: 30,
+		type: Number
+	},
 });
 
 store.coord = props.coord;
@@ -97,6 +111,8 @@ store.markerActiveImage = props.markerActiveImage;
 store.markerDisabledImage = props.markerDisabledImage;
 store.clusterColor = props.clusterColor;
 store.disabledClusterColor = props.disabledClusterColor;
+store.clusterMinDistance = props.clusterMinDistance;
+store.clusterDistance = props.clusterDistance;
 
 watch(() => props.disabledMarkers, (v) => {
 	store.setDisabledMarkers(v);

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

@@ -77,6 +77,8 @@
 		selectedMarker,
 		clusterColor,
 		disabledClusterColor,
+		clusterMinDistance,
+		clusterDistance,
 		userCoord
 	} = storeToRefs(store);
 
@@ -160,7 +162,14 @@
 		for (let item of markers.value) {
 			const feature = new Feature(new Point(fromLonLat(item.coord)));
 
-			feature.attributes = { id: item.id }; // Add payload data to markers
+			// Add payload data to markers
+			feature.attributes = { 
+				id: item.id, 
+				marker: item?.marker || 'default',
+				markerActive: item?.markerActive || 'active', 
+				markerDisabled: item?.markerDisabled || 'disabled'
+			};
+
 			result.push(feature);
 		}
 
@@ -174,8 +183,8 @@
 	 */
 	function createCluster(features) {
 		const clusterSource = new Cluster({
-			distance: 30,
-			minDistance: 15,
+			minDistance: clusterMinDistance.value,
+			distance: clusterDistance.value,
 			source: new VectorSource({
 				features // Markers
 			})
@@ -225,6 +234,18 @@
 			});
 		}
 
+		// Iterate all markers
+		for (let item of markers.value) {
+			if (!(item.marker in styleCache))
+				styleCache[item.marker] = new Style({ image: new Icon({ src: item.marker }) });
+
+			if (!(item.markerActive in styleCache))
+				styleCache[item.markerActive] = new Style({ image: new Icon({ src: item.markerActive }) });
+
+			if (!(item.markerDisabled in styleCache))
+				styleCache[item.markerDisabled] = new Style({ image: new Icon({ src: item.markerDisabled }) });
+		}
+
 		// Markers style function
 		function style(feature) {
 			const allFeatures = feature.get('features');
@@ -234,11 +255,11 @@
 
 			// If one
 			if (size == 1) {
-				const markerId = allFeatures[0].attributes.id;
-				const isDisabled = disabledMarkers.value.includes(markerId);
-				const isSelected = markerId === selectedMarker.value?.id;
+				const markerAttr = allFeatures[0].attributes;
+				const isDisabled = disabledMarkers.value.includes(markerAttr.id);
+				const isSelected = markerAttr.id === selectedMarker.value?.id;
 
-				style = styleCache[isSelected ? 'active' : (isDisabled ? 'disabled' : 'default')];
+				style = styleCache[isSelected ? markerAttr.markerActive : (isDisabled ? markerAttr.markerDisabled : markerAttr.marker)];
 			
 			// If cluster
 			} else {

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

@@ -15,6 +15,8 @@ export const useMapStore: import("pinia").StoreDefinition<"map", {
     disabledMarkers: never[];
     clusterColor: string;
     disabledClusterColor: string;
+    clusterMinDistance: number;
+    clusterDistance: number;
     userCoord: never[];
 }, {
     /**

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

@@ -36,6 +36,8 @@ export const useMapStore = defineStore('map', {
 			disabledMarkers: [],
 			clusterColor: '',
 			disabledClusterColor: '',
+			clusterMinDistance: 15,
+			clusterDistance: 30,
 
 			userCoord: []
 		}

package/dist/runtime/components/spoiler.vue

@@ -1,70 +1,74 @@
 <template>
 	<div class="component-ui-spoiler" :class="{'tag-active': isShown}">
-		<div class="content">
+		<div :id="cid" class="content" :inert="!isShown">
 			<div>
 				<slot></slot>
 			</div>
 		</div>
-		<div class="title" @click="handleClick">{{ isShown ? hideText : showText }}</div>
+		<ui-button variant="flat" class="title" @click="handleClick" :aria-expanded="isShown.toString()" :aria-controls="cid">{{ isShown ? hideText : showText }}</ui-button>
 	</div>
 </template>
 
 <script setup>
-import { watch, ref } from 'vue';
+// Imports
+	import { watch, ref } from 'vue';
+	import uniq from './helpers/uniq';
 
 // Data
-const emit = defineEmits(['update:modelValue']);
-const props = defineProps({
-	showText: {
-		type: String,
-		default: 'Show'
-	},
-	hideText: {
-		type: String,
-		default: 'Hide'
-	},
-	modelValue: {
-		type: [Boolean, null],
-		default: null
-	}
-});
-
-let isShown = ref(false);
-let hasModel = props.modelValue !== null;
+	const emit = defineEmits(['update:modelValue']);
+	const props = defineProps({
+		showText: {
+			type: String,
+			default: 'Show'
+		},
+		hideText: {
+			type: String,
+			default: 'Hide'
+		},
+		modelValue: {
+			type: [Boolean, null],
+			default: null
+		}
+	});
 
-if (hasModel) {
-	watch(() => props.modelValue, (v) => {
-		isShown.value = v;
-	}, { immediate: true });
-}
+	const cid = 'spoiler-' + uniq();
+	let isShown = ref(false);
+	let hasModel = props.modelValue !== null;
+	
+	if (hasModel) {
+		watch(() => props.modelValue, (v) => {
+			isShown.value = v;
+		}, { immediate: true });
+	}
 
 // Methods
-function handleClick() {
-	if (hasModel) {
-		emit('update:modelValue', !isShown.value);
-	} else {
-		isShown.value = !isShown.value;
+	function handleClick() {
+		if (hasModel) {
+			emit('update:modelValue', !isShown.value);
+		} else {
+			isShown.value = !isShown.value;
+		}
 	}
-}
 </script>
 
 <style lang="less">
 .component-ui-spoiler {
-	@com-space-mini: var(--ui-space-mini);
+	@com-space-micro: var(--ui-space-micro);
 	@com-ani-ease: var(--ui-ani-ease);
 	@com-ani-time: var(--ui-ani-time);
 	@com-color-primary-text: var(--ui-color-primary-text);
 	@com-font-weight-medium: var(--ui-font-weight-medium);
 
 	> .title {
-		padding-top: @com-space-mini;
+		margin-left: calc(@com-space-micro * -1);
+	}
 
-		color: @com-color-primary-text;
-		font-weight: @com-font-weight-medium;
-		cursor: pointer;
+	> .title {
+		padding-inline: @com-space-micro;
 
-		-webkit-user-select: none;
-		user-select: none;
+		.button-content .slot-default {
+			padding-inline: 0;
+		}
 	}
 
 	> .content {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@community-release/nx-ui",
-	"version": "0.0.67",
+	"version": "0.0.72",
 	"packageManager": "pnpm@10.14.0",
 	"description": "nx-ui - Nuxt UI library",
 	"repository": {