@community-release/nx-ui 0.0.73 → 0.0.75

package/dist/runtime/components/card.vue

@@ -79,54 +79,54 @@ const iconTitleIs = props.iconLink ? 'NuxtLink' : 'b';
 
 <style lang="less">
 // Variables
-@com-border-radius-default: var(--ui-border-radius-big);
+@com-border-radius-m: var(--ui-border-radius-l);
 
 // Text size
-@com-text-default: var(--ui-text-default);
-@com-text-small: var(--ui-text-small);
+@com-text-m: var(--ui-text-m);
+@com-text-s: var(--ui-text-s);
 
 // Font family
 @com-font-header: var(--ui-font-header);
 
 // Font size
-@com-text-default: var(--ui-text-default);
-@com-text-small: var(--ui-text-small);
+@com-text-m: var(--ui-text-m);
+@com-text-s: var(--ui-text-s);
 
 // Color
 @com-color-header-text: var(--ui-color-header-text);
-@com-color-gray-text: var(--ui-color-gray-text);
+@com-color-muted-text: var(--ui-color-muted-text);
 @com-color-surface: var(--ui-color-surface);
 @com-color-text: var(--ui-color-text);
 @com-color-primary: var(--ui-color-primary);
 
 // Padding
-@com-space-big: var(--ui-space-big);
-@com-space-medium: var(--ui-space-medium);
-@com-space-default: var(--ui-space-default);
-@com-space-small: var(--ui-space-small);
-@com-space-micro: var(--ui-space-micro);
-@com-space-mini: var(--ui-space-mini);
+@com-space-xl: var(--ui-space-xl);
+@com-space-l: var(--ui-space-l);
+@com-space-m: var(--ui-space-m);
+@com-space-s: var(--ui-space-s);
+@com-space-2xs: var(--ui-space-2xs);
+@com-space-xs: var(--ui-space-xs);
 
 .component-ui-card {
-	--ui-card-padding: @com-space-default;
+	--ui-card-padding: @com-space-m;
 
 	position: relative;
 
 	color: @com-color-header-text;
 	background: @com-color-surface;
-	border-radius: @com-border-radius-default;
+	border-radius: @com-border-radius-m;
 
 	.ui-card-image {
-		padding: @com-space-big @com-space-big @com-space-mini @com-space-big;
+		padding: @com-space-xl @com-space-xl @com-space-xs @com-space-xl;
 		overflow: hidden;
-		border-top-left-radius: @com-border-radius-default;
-		border-top-right-radius: @com-border-radius-default;
+		border-top-left-radius: @com-border-radius-m;
+		border-top-right-radius: @com-border-radius-m;
 	}
 
 	.ui-card-icon {
 		display: grid;
 		grid-template-columns: 50px auto;
-		gap: @com-space-default;
+		gap: @com-space-m;
 		align-items: center;
 		padding: var(--ui-card-padding) 0 0 30px;
 		height: 80px;
@@ -140,7 +140,7 @@ const iconTitleIs = props.iconLink ? 'NuxtLink' : 'b';
 		}
 
 		a, b {
-			padding-right: @com-space-mini;
+			padding-right: @com-space-xs;
 			font-weight: 600;
 			color: @com-color-header-text;
 		}
@@ -148,9 +148,9 @@ const iconTitleIs = props.iconLink ? 'NuxtLink' : 'b';
 
 	.ui-card-title {
 		display: block;
-		padding: var(--ui-card-padding) var(--ui-card-padding) @com-space-micro var(--ui-card-padding);
+		padding: var(--ui-card-padding) var(--ui-card-padding) @com-space-2xs var(--ui-card-padding);
 		font-family: @com-font-header;
-		font-size: @com-text-default;
+		font-size: @com-text-m;
 		color: @com-color-header-text;
 
 		strong {
@@ -172,15 +172,15 @@ const iconTitleIs = props.iconLink ? 'NuxtLink' : 'b';
 		}
 
 		.ui-card-subtitle {
-			font-size: @com-text-small;
-			color: @com-color-gray-text;
+			font-size: @com-text-s;
+			color: @com-color-muted-text;
 		}
 	}
 
 	.ui-card-content {
 		padding: 0 var(--ui-card-padding) var(--ui-card-padding) var(--ui-card-padding);
 		line-height: 1.5;
-		font-size: @com-text-small;
+		font-size: @com-text-s;
 		color: @com-color-text;
 	}
 }

package/dist/runtime/components/checkbox.vue

@@ -96,16 +96,16 @@
 
 	@com-color-text: var(--ui-color-text);
 	@com-color-header-text: var(--ui-color-header-text);
-	@com-color-gray-text: var(--ui-color-gray-text);
+	@com-color-muted-text: var(--ui-color-muted-text);
 	@com-color-error: var(--ui-color-error);
 
-	@com-text-default: var(--ui-text-default);
-	@com-text-medium: var(--ui-text-medium);
-	@com-text-small: var(--ui-text-small);
+	@com-text-m: var(--ui-text-m);
+	@com-text-l: var(--ui-text-l);
+	@com-text-s: var(--ui-text-s);
 
-	@com-input-height: var(--ui-input-height-default);
+	@com-input-height: var(--ui-input-height-m);
 
-	@com-space-micro: var(--ui-space-micro);
+	@com-space-2xs: var(--ui-space-2xs);
 
 	position: relative;
 	text-align: left;
@@ -119,7 +119,7 @@
 		padding: 0 0 0 30px;
 
 		height: @com-input-height;
-		font-size: @com-text-default;
+		font-size: @com-text-m;
 		font-weight: 500;
 
 		color: @com-color-text;
@@ -140,7 +140,7 @@
 			width: 18px;
 			height: 18px;
 			border-radius: 3px;
-			border: 1px solid @com-color-gray-text;
+			border: 1px solid @com-color-muted-text;
 
 			color: @com-color-text-on-primary;
 

package/dist/runtime/components/file-input/index.vue

@@ -208,15 +208,15 @@
 	@com-color-header-text: var(--ui-color-header-text);
 	@com-color-error: var(--ui-color-error);
 
-	@com-border-radius-m: var(--ui-border-radius-default);
+	@com-border-radius-m: var(--ui-border-radius-m);
 
-	@com-space-default: var(--ui-space-default);
-	@com-space-mini: var(--ui-space-mini);
-	@com-space-small: var(--ui-space-small);
+	@com-space-m: var(--ui-space-m);
+	@com-space-xs: var(--ui-space-xs);
+	@com-space-s: var(--ui-space-s);
 
-	@com-text-large: var(--ui-text-large);
-	@com-text-default: var(--ui-text-default);
-	@com-text-small: var(--ui-text-small);
+	@com-text-2xl: var(--ui-text-2xl);
+	@com-text-m: var(--ui-text-m);
+	@com-text-s: var(--ui-text-s);
 
 	@com-font-weight-bold: var(--ui-font-weight-bold);
 
@@ -231,7 +231,7 @@
 			border-radius: @com-border-radius-m 0 0 @com-border-radius-m;
 
 			.ic {
-				font-size: @com-text-large;
+				font-size: @com-text-2xl;
 			}
 		}
 
@@ -239,8 +239,8 @@
 			border-radius: 0 @com-border-radius-m @com-border-radius-m 0;
 
 			.ic {
-				padding-left: @com-space-mini;
-				font-size: @com-text-default;
+				padding-left: @com-space-xs;
+				font-size: @com-text-m;
 			}
 		}
 
@@ -252,13 +252,13 @@
 		}
 
 		.status-text {
-			padding-right: @com-space-default;
+			padding-right: @com-space-m;
 		}
 	}
 
 	.block-filelist {
 		position: relative;
-		margin-top: @com-space-mini;
+		margin-top: @com-space-xs;
 		border-radius: @com-border-radius-m;
 		border: 1px dashed @com-color-border-bolder;
 
@@ -267,7 +267,7 @@
 			grid-template-columns: 80px 1fr 80px;
 
 			.preview {
-				padding: @com-space-mini;
+				padding: @com-space-xs;
 
 				.file {
 					overflow: hidden;
@@ -277,7 +277,7 @@
 					height: 70px;
 
 					text-transform: uppercase;
-					font-size: @com-text-small;
+					font-size: @com-text-s;
 					font-weight: @com-font-weight-bold;
 					border-radius: @com-border-radius-m;
 					background-color: @com-color-surface;
@@ -317,7 +317,7 @@
 
 				.size {
 					font-style: italic;
-					font-size: @com-text-small;
+					font-size: @com-text-s;
 				}
 			}
 
@@ -327,7 +327,7 @@
 				align-items: center;
 
 				.component-ui-button {
-					font-size: @com-text-small;
+					font-size: @com-text-s;
 					height: 100%;
 				}
 			}
@@ -340,7 +340,7 @@
 
 		display: none;
 		place-items: center;
-		padding: @com-space-small;
+		padding: @com-space-s;
 		text-align: center;
 		cursor: pointer;
 	}
@@ -396,14 +396,14 @@
 		@com-color-border: var(--ui-color-border);
 		@com-color-header-text:var(--ui-color-header-text);
 
-		@com-border-radius-m: var(--ui-border-radius-default);
+		@com-border-radius-m: var(--ui-border-radius-m);
 
-		@com-space-mini: var(--ui-space-mini);
-		@com-space-small: var(--ui-space-small);
+		@com-space-xs: var(--ui-space-xs);
+		@com-space-s: var(--ui-space-s);
 
-		@com-text-large: var(--ui-text-large);
-		@com-text-default: var(--ui-text-default);
-		@com-text-small: var(--ui-text-small);
+		@com-text-2xl: var(--ui-text-2xl);
+		@com-text-m: var(--ui-text-m);
+		@com-text-s: var(--ui-text-s);
 
 		@com-font-weight-bold: var(--ui-font-weight-bold);
 
@@ -429,20 +429,20 @@
 		@com-color-border: var(--ui-color-border);
 		@com-color-header-text:var(--ui-color-header-text);
 
-		@com-border-radius-m: var(--ui-border-radius-default);
+		@com-border-radius-m: var(--ui-border-radius-m);
 
-		@com-space-mini: var(--ui-space-mini);
-		@com-space-small: var(--ui-space-small);
+		@com-space-xs: var(--ui-space-xs);
+		@com-space-s: var(--ui-space-s);
 
-		@com-text-large: var(--ui-text-large);
-		@com-text-default: var(--ui-text-default);
-		@com-text-small: var(--ui-text-small);
+		@com-text-2xl: var(--ui-text-2xl);
+		@com-text-m: var(--ui-text-m);
+		@com-text-s: var(--ui-text-s);
 
 		@com-font-weight-bold: var(--ui-font-weight-bold);
 
 		.block-input {
 			.component-ui-button {
-				font-size: @com-text-small;
+				font-size: @com-text-s;
 			}
 		}
 
@@ -456,13 +456,13 @@
 				}
 
 				.details {
-					font-size: @com-text-small;
+					font-size: @com-text-s;
 				}
 			}
 		}
 
 		.drag-and-drop {
-			font-size: @com-text-small;
+			font-size: @com-text-s;
 		}
 	}
 }

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

@@ -89,10 +89,10 @@ function genUpdatedValue(id) {
 
 <style lang="less">
 .component-ui-filter {
-	@com-space-default: var(--ui-space-default);
-	@com-space-small: var(--ui-space-small);
+	@com-space-m: var(--ui-space-m);
+	@com-space-s: var(--ui-space-s);
 
-	@com-input-height-small: var(--ui-input-height-small);
+	@com-input-height-s: var(--ui-input-height-s);
 
 	--active-color: v-bind(activeColor);
 	--active-bg: v-bind(activeBg);
@@ -101,8 +101,8 @@ function genUpdatedValue(id) {
 	overflow-y: hidden;
 	white-space: nowrap;
 
-	margin-inline: calc(@com-space-default * -1);
-	padding: @com-space-default;
+	margin-inline: calc(@com-space-m * -1);
+	padding: @com-space-m;
 
 	span {
 		user-select: none;
@@ -110,11 +110,11 @@ function genUpdatedValue(id) {
 		display: inline-flex;
 
 		vertical-align: top;
-		margin-right: @com-space-small;
-		padding: 0 @com-space-small;
+		margin-right: @com-space-s;
+		padding: 0 @com-space-s;
 
-		height: @com-input-height-small;
-		line-height: @com-input-height-small;
+		height: @com-input-height-s;
+		line-height: @com-input-height-s;
 
 		border-radius: 30px;
 		cursor: pointer;

package/dist/runtime/components/grid.vue

@@ -14,7 +14,7 @@ export default {
 		},
 		gap: {
 			type: [String, Object],
-			default: 'var(--ui-space-default)'
+			default: 'var(--ui-space-m)'
 		},
 		gridTemplateColumns: {
 			type: [String, Object],

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

@@ -153,38 +153,38 @@
 @com-ani-ease: var(--ui-ani-ease);
 
 // Input height
-@com-input-height-large: var(--ui-input-height-large);
-@com-input-height-big: var(--ui-input-height-big);
-@com-input-height-medium: var(--ui-input-height-medium);
-@com-input-height-default: var(--ui-input-height-default);
-@com-input-height-small: var(--ui-input-height-small);
-@com-input-height-mini: var(--ui-input-height-mini);
+@com-input-height-2xl: var(--ui-input-height-2xl);
+@com-input-height-xl: var(--ui-input-height-xl);
+@com-input-height-l: var(--ui-input-height-l);
+@com-input-height-m: var(--ui-input-height-m);
+@com-input-height-s: var(--ui-input-height-s);
+@com-input-height-xs: var(--ui-input-height-xs);
 
 // Border radius
-@com-border-radius-default: var(--ui-border-radius-default);
-@com-border-radius-small: var(--ui-border-radius-small);
-@com-border-radius-round: var(--ui-input-height-large);
+@com-border-radius-m: var(--ui-border-radius-m);
+@com-border-radius-s: var(--ui-border-radius-s);
+@com-border-radius-round: var(--ui-input-height-2xl);
 
 // Color
 @com-color-border-bolder: var(--ui-color-border-bolder);
 @com-color-bg: var(--ui-color-bg);
 @com-color-surface: @ui-input-background-color;
 @com-color-header-text: var(--ui-color-header-text);
-@com-color-gray-text: var(--ui-color-gray-text);
+@com-color-muted-text: var(--ui-color-muted-text);
 @com-color-primary: var(--ui-color-primary);
 @com-color-error: var(--ui-color-error);
 
 // Space
-@com-space-small: var(--ui-space-small);
-@com-space-mini: var(--ui-space-mini;);
+@com-space-s: var(--ui-space-s);
+@com-space-xs: var(--ui-space-xs;);
 
 // Font
 @com-font-text: var(--ui-font-text);
 
 // Text size
-@com-text-default: var(--ui-text-default);
-@com-text-small: var(--ui-text-small);
-@com-text-mini: var(--ui-text-mini);
+@com-text-m: var(--ui-text-m);
+@com-text-s: var(--ui-text-s);
+@com-text-xs: var(--ui-text-xs);
 
 // Ally
 @com-outline: var(--ui-outline);
@@ -192,9 +192,9 @@
 .component-ui-input {
 	overflow: hidden;
 	position: relative;
-	height: @com-input-height-default;
+	height: @com-input-height-m;
 	border: 1px solid @com-color-border-bolder;
-	border-radius: @com-border-radius-default;
+	border-radius: @com-border-radius-m;
 	background: @com-color-surface;
 	cursor: text;
 
@@ -223,12 +223,12 @@
 		box-sizing: border-box; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;
 		
 		display: block;
-		padding: 0 @com-space-mini;
+		padding: 0 @com-space-xs;
 		width: 100%;
 		height: 100%;
 		
 		font-family: @com-font-text;
-		font-size: @com-text-default;
+		font-size: @com-text-m;
 		color: @com-color-header-text;
 
 		background: transparent;
@@ -240,27 +240,31 @@
 		border-radius: @com-border-radius-round;
 	}
 	&.tag-shape-round-square {
-		border-radius: @com-border-radius-small;
+		border-radius: @com-border-radius-s;
 	}
 	&.tag-shape-square {
 		border-radius: 0;
 	}
 
 	// Size
-	&.tag-size-large { height: @com-input-height-large; }
-	&.tag-size-big { height: @com-input-height-big; }
-	&.tag-size-medium { height: @com-input-height-medium; }
-	&.tag-size-small {
-		//padding: 0 @com-space-small;
-		height: @com-input-height-small;
-		font-size: @com-text-small;
+	&.tag-size-2xl { height: @com-input-height-2xl; }
+	&.tag-size-xl { height: @com-input-height-xl; }
+	&.tag-size-l { height: @com-input-height-l; }
+	&.tag-size-m {
+		//padding: 0 @com-space-s;
+		height: @com-input-height-m;
+		font-size: @com-text-s;
 	}
 
-	&.tag-size-mini {
-		//padding: 0 10px;
-		height: @com-input-height-mini;
+	&.tag-size-s {
+		height: @com-input-height-s;
+		font-size: @com-text-s;
+	}
 
-		font-size: @com-text-mini;
+	&.tag-size-xs {
+		//padding: 0 10px;
+		height: @com-input-height-xs;
+		font-size: @com-text-xs;
 
 		.loading-indicator {
 			transform: translate3d(-50%, -50%, 0) scale(0.6);

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

@@ -55,40 +55,40 @@
 </script>
 
 <style lang="less">
-@com-space-micro: var(--ui-space-micro);
+@com-space-2xs: var(--ui-space-2xs);
 
 @com-font-weight-medium: var(--ui-font-weight-medium);
 
 @com-color-header-text: var(--ui-color-header-text);
-@com-color-gray-text: var(--ui-color-gray-text);
+@com-color-muted-text: var(--ui-color-muted-text);
 @com-color-red: var(--ui-color-red);
 
-@com-text-big: var(--ui-text-big);
-@com-text-medium: var(--ui-text-medium);
-@com-text-default: var(--ui-text-default);
-@com-text-small: var(--ui-text-small);
+@com-text-xl: var(--ui-text-xl);
+@com-text-l: var(--ui-text-l);
+@com-text-m: var(--ui-text-m);
+@com-text-s: var(--ui-text-s);
 
 .component-ui-label {
 	.component-ui-label--text {
 		position: relative;
 		display: block;
-		padding-bottom: @com-space-micro;
+		padding-bottom: @com-space-2xs;
 		font-weight: @com-font-weight-medium;
-		font-size: @com-text-default;
+		font-size: @com-text-m;
 		color: @com-color-header-text;
 
 		.description {
 			display: block;
 			font-weight: normal;
-			color: @com-color-gray-text;
+			color: @com-color-muted-text;
 		}
 	}
 
 	// Text size
-	&.tag-size-big > .component-ui-label--text { font-size: @com-text-big; }
-	&.tag-size-medium > .component-ui-label--text { font-size: @com-text-medium; }
-	&.tag-size-default > .component-ui-label--text { font-size: @com-text-default; }
-	&.tag-size-small > .component-ui-label--text { font-size: @com-text-small; }
+	&.tag-size-xl > .component-ui-label--text { font-size: @com-text-xl; }
+	&.tag-size-l > .component-ui-label--text { font-size: @com-text-l; }
+	&.tag-size-m > .component-ui-label--text { font-size: @com-text-m; }
+	&.tag-size-s > .component-ui-label--text { font-size: @com-text-s; }
 
 	// Text weight
 	&.tag-weight-700 > .component-ui-label--text { font-weight: 700; }

package/dist/runtime/components/loading.vue

@@ -32,10 +32,10 @@ const props = defineProps({
 @com-color-header-text: var(--ui-color-header-text);
 
 // Text size
-@com-text-small: var(--ui-text-small);
+@com-text-s: var(--ui-text-s);
 
 // Padding
-@com-space-micro: var(--ui-space-micro);
+@com-space-2xs: var(--ui-space-2xs);
 
 @keyframes ui-loading-circle {
 	0% {
@@ -60,7 +60,7 @@ const props = defineProps({
 	display: flex;
 	align-items: center;
 	justify-content: center;
-	gap: @com-space-micro;
+	gap: @com-space-2xs;
 
 	svg {
 		transition: opacity 0.15s;

package/dist/runtime/components/map/device-zoom-switch.vue

@@ -46,8 +46,8 @@ function handleClick(e) {
 </script>
 
 <style lang="less">
-@com-size: var(--ui-input-height-default);
-@com-border-radius-default: var(--ui-border-radius-default);
+@com-size: var(--ui-input-height-m);
+@com-border-radius-m: var(--ui-border-radius-m);
 @com-ani-time: var(--ui-ani-time);
 @com-ani-ease: var(--ui-ani-ease);
 
@@ -65,7 +65,7 @@ function handleClick(e) {
 
 	background: @com-color-surface;
 	box-shadow: @com-bs-1;
-	border-radius: @com-border-radius-default;
+	border-radius: @com-border-radius-m;
 	cursor: pointer;
 
 	&:before,

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

@@ -1,6 +1,6 @@
 <template>
 	<section class="component-ui-map">
-		<component :is="mapEngines[props.engine]" @initialized="emit('initialized', $event)">
+		<component :is="mapEngines[props.engine]" @initialized="emit('initialized', $event)" @mapClick="emit('mapClick', $event)">
 			<slot :store="store"></slot>
 			<div class="slot-row">
 				<slot name="row" :store="store"></slot>
@@ -15,9 +15,8 @@ import { useMapStore } from './store';
 import comProps from '#build/ui.map.mjs';
 
 // // Data
-const nuxtApp = useNuxtApp();
-const store = useMapStore(nuxtApp.$pinia);
-const emit = defineEmits(['initialized']);
+const store = useMapStore();
+const emit = defineEmits(['initialized', 'mapClick']);
 
 const mapEngines = {
 	openlayers: defineAsyncComponent(() => import(`./openlayers/index.vue`))
@@ -122,11 +121,11 @@ watch(() => props.disabledMarkers, (v) => {
 <style lang="less">
 @com-content-width: var(--ui-content-width);
 
-@com-space-default: var(--ui-space-default);
-@com-space-mini: var(--ui-space-mini);
+@com-space-m: var(--ui-space-m);
+@com-space-xs: var(--ui-space-xs);
 
 .component-ui-map {
-	--ui-map-padding: @com-space-default;
+	--ui-map-padding: @com-space-m;
 
 	position: relative;
 	height: v-bind(height);
@@ -142,7 +141,7 @@ watch(() => props.disabledMarkers, (v) => {
 
 		position: relative;
 		margin: 0 auto;
-		padding: 0 @com-space-default;
+		padding: 0 @com-space-m;
 		width: 100%;
 		max-width: @com-content-width;
 		min-width: 320px;
@@ -157,7 +156,7 @@ watch(() => props.disabledMarkers, (v) => {
 
 @media only screen and (max-width: 620px) {
 	.component-ui-map {
-		--ui-map-padding: @com-space-mini;
+		--ui-map-padding: @com-space-xs;
 	}
 }
 </style>

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

@@ -46,10 +46,10 @@ const hasSlot = (name) => {
 </script>
 
 <style lang="less">
-@com-input-height: var(--ui-input-height-default);
+@com-input-height: var(--ui-input-height-m);
 
 @com-map-padding: var(--ui-map-padding);
-@com-space-mini: var(--ui-space-mini);
+@com-space-xs: var(--ui-space-xs);
 
 .component-ui-map-location {
 	pointer-events: none !important;
@@ -67,7 +67,7 @@ const hasSlot = (name) => {
 		grid-template-columns: 1fr; // base columns and their sizes
   		grid-auto-flow: column; // tells to add new children as new columns
  		grid-auto-columns: 1fr; // tells the size of the dynamic columns
-		gap: @com-space-mini;
+		gap: @com-space-xs;
 
 		inset: 0 0 auto 0;
 		max-width: 100%;
@@ -99,7 +99,7 @@ const hasSlot = (name) => {
 
 	&.tag-slot-header-and-default {
 		.location-slot-default {
-			inset: calc(@com-input-height + @com-space-mini) 0 0 0;
+			inset: calc(@com-input-height + @com-space-xs) 0 0 0;
 		}
 	}
 }