@community-release/nx-ui 0.0.76 → 0.0.78

package/dist/module.d.mts

@@ -10,12 +10,12 @@ var defaultStyle = {
   "border-radius-m": "8px",
   "border-radius-s": "3px",
   // Inputs height
-  "input-height-2xl": "60px",
-  "input-height-xl": "52px",
-  "input-height-l": "48px",
-  "input-height-m": "42px",
-  "input-height-s": "32px",
-  "input-height-xs": "24px",
+  "input-size-2xl": "60px",
+  "input-size-xl": "52px",
+  "input-size-l": "48px",
+  "input-size-m": "42px",
+  "input-size-s": "32px",
+  "input-size-xs": "24px",
   // Line height
   "text-line-height": 1.4,
   // Colors
@@ -106,7 +106,7 @@ var defaultComponentsStyle = {
     "text-font-size": "var(--ui-text-m)"
   },
   button: {
-    "border-radius": "var(--ui-input-height-2xl)"
+    "border-radius": "var(--ui-input-size-2xl)"
   },
   map: {
     "user-position-color": "var(--ui-color-primary)"

package/dist/module.d.ts

@@ -10,12 +10,12 @@ var defaultStyle = {
   "border-radius-m": "8px",
   "border-radius-s": "3px",
   // Inputs height
-  "input-height-2xl": "60px",
-  "input-height-xl": "52px",
-  "input-height-l": "48px",
-  "input-height-m": "42px",
-  "input-height-s": "32px",
-  "input-height-xs": "24px",
+  "input-size-2xl": "60px",
+  "input-size-xl": "52px",
+  "input-size-l": "48px",
+  "input-size-m": "42px",
+  "input-size-s": "32px",
+  "input-size-xs": "24px",
   // Line height
   "text-line-height": 1.4,
   // Colors
@@ -106,7 +106,7 @@ var defaultComponentsStyle = {
     "text-font-size": "var(--ui-text-m)"
   },
   button: {
-    "border-radius": "var(--ui-input-height-2xl)"
+    "border-radius": "var(--ui-input-size-2xl)"
   },
   map: {
     "user-position-color": "var(--ui-color-primary)"

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "ui",
   "configKey": "ui",
-  "version": "0.0.76"
+  "version": "0.0.78"
 }

package/dist/module.mjs

@@ -10,12 +10,12 @@ const defaultStyle = {
   "border-radius-m": "8px",
   "border-radius-s": "3px",
   // Inputs height
-  "input-height-2xl": "60px",
-  "input-height-xl": "52px",
-  "input-height-l": "48px",
-  "input-height-m": "42px",
-  "input-height-s": "32px",
-  "input-height-xs": "24px",
+  "input-size-2xl": "60px",
+  "input-size-xl": "52px",
+  "input-size-l": "48px",
+  "input-size-m": "42px",
+  "input-size-s": "32px",
+  "input-size-xs": "24px",
   // Line height
   "text-line-height": 1.4,
   // Colors
@@ -106,7 +106,7 @@ const defaultComponentsStyle = {
     "text-font-size": "var(--ui-text-m)"
   },
   button: {
-    "border-radius": "var(--ui-input-height-2xl)"
+    "border-radius": "var(--ui-input-size-2xl)"
   },
   map: {
     "user-position-color": "var(--ui-color-primary)"

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

@@ -59,6 +59,14 @@
 			type: String,
 			default: comProps.color,
 		},
+		hoverColorTransform: {
+			type: String,
+			default: comProps.hoverColorTransform,
+		},
+		hoverFlatColor: {
+			type: String,
+			default: comProps.hoverFlatColor,
+		},
 		size: {
 			type: String,
 			default: comProps.size,
@@ -128,7 +136,7 @@
 		let color = `var(--ui-color-text-on-${props.color})`;
 
 		if (props.variant === 'flat' || props.variant === 'outline') {
-			background = `var(--ui-color-surface)`;
+			background = `var(--ui-color-${props.hoverFlatColor})`;
 			color = `var(--ui-color-${props.color}-text)`;
 		}
 
@@ -139,7 +147,11 @@
 	});
 	const buttonBgStyle = computed(() => {
 		return {
-			'background': (props.variant === 'flat' || props.variant === 'outline') ? `var(--ui-color-${props.color.value})` : 'rgba(66,88,120, 0.075)'
+			// Лучше поддержка браузеров но хуже результат
+			// 'background': (props.variant === 'flat' || props.variant === 'outline') ? `transparent` : `color-mix(in srgb, var(--ui-color-${props.color}) 95%, black)`
+
+			// Лучше результат но хуже поддержка браузеров
+			'background': (props.variant === 'flat' || props.variant === 'outline') ? `transparent` : `oklch(from var(--ui-color-${props.color}) ${props.hoverColorTransform})`
 		}
 	});
 
@@ -176,12 +188,12 @@
 	--button-background: v-bind(styles.background);
 
 	// Input height
-	@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);
+	@com-input-size-2xl: var(--ui-input-size-2xl);
+	@com-input-size-xl: var(--ui-input-size-xl);
+	@com-input-size-l: var(--ui-input-size-l);
+	@com-input-size-m: var(--ui-input-size-m);
+	@com-input-size-s: var(--ui-input-size-s);
+	@com-input-size-xs: var(--ui-input-size-xs);
 
 	// Animation
 	@com-ani-time: var(--ui-ani-time);
@@ -197,7 +209,7 @@
 	// Border radius
 	@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);
+	@com-border-radius-round: var(--ui-input-size-2xl);
 
 	// Padding
 	@com-space-m: var(--ui-space-m);
@@ -223,7 +235,7 @@
 	vertical-align: top;
 
 	padding: 0 @com-space-m;
-	height: @com-input-height-m;
+	height: @com-input-size-m;
 	line-height: 1.1;
 
 	text-align: center;
@@ -310,14 +322,14 @@
 	// Shapes
 	&.tag-shape-circle {
 		padding: 0 !important;
-		width: @com-input-height-m;
+		width: @com-input-size-m;
 		border-radius: 50%;
 
-		&.tag-size-2xl { width: @com-input-height-2xl; }
-		&.tag-size-xl { width: @com-input-height-xl; }
-		&.tag-size-l { width: @com-input-height-xl; }
-		&.tag-size-s { width: @com-input-height-s; }
-		&.tag-size-xs { width: @com-input-height-xs; }
+		&.tag-size-2xl { width: @com-input-size-2xl; }
+		&.tag-size-xl { width: @com-input-size-xl; }
+		&.tag-size-l { width: @com-input-size-xl; }
+		&.tag-size-s { width: @com-input-size-s; }
+		&.tag-size-xs { width: @com-input-size-xs; }
 	}
 	&.tag-shape-round {
 		border-radius: @com-border-radius-round;
@@ -338,20 +350,20 @@
 
 	// Size
 	&.tag-size-2xl {
-		height: @com-input-height-2xl;
+		height: @com-input-size-2xl;
 	}
 
 	&.tag-size-xl {
-		height: @com-input-height-xl;
+		height: @com-input-size-xl;
 	}
 
 	&.tag-size-l {
-		height: @com-input-height-l;
+		height: @com-input-size-l;
 	}
 
 	&.tag-size-s {
 		padding: 0 @com-space-s;
-		height: @com-input-height-s;
+		height: @com-input-size-s;
 
 		font-size: @com-text-s;
 
@@ -362,7 +374,7 @@
 
 	&.tag-size-xs {
 		padding: 0 10px;
-		height: @com-input-height-xs;
+		height: @com-input-size-xs;
 
 		font-size: @com-text-xs;
 

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

@@ -1,5 +1,7 @@
 {
 	"color": "primary",
+	"hoverColorTransform": "max(0, calc(l - 0.05)) c h",
+	"hoverFlatColor": "surface",
 	"shape": "",
 	"size": "default",
 	"variant": "solid"

package/dist/runtime/components/checkbox.vue

@@ -103,7 +103,7 @@
 	@com-text-l: var(--ui-text-l);
 	@com-text-s: var(--ui-text-s);
 
-	@com-input-height: var(--ui-input-height-m);
+	@com-input-size: var(--ui-input-size-m);
 
 	@com-space-2xs: var(--ui-space-2xs);
 
@@ -118,7 +118,7 @@
 		margin: 0;
 		padding: 0 0 0 30px;
 
-		height: @com-input-height;
+		height: @com-input-size;
 		font-size: @com-text-m;
 		font-weight: 500;
 

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

@@ -92,7 +92,7 @@ function genUpdatedValue(id) {
 	@com-space-m: var(--ui-space-m);
 	@com-space-s: var(--ui-space-s);
 
-	@com-input-height-s: var(--ui-input-height-s);
+	@com-input-size-s: var(--ui-input-size-s);
 
 	--active-color: v-bind(activeColor);
 	--active-bg: v-bind(activeBg);
@@ -113,8 +113,8 @@ function genUpdatedValue(id) {
 		margin-right: @com-space-s;
 		padding: 0 @com-space-s;
 
-		height: @com-input-height-s;
-		line-height: @com-input-height-s;
+		height: @com-input-size-s;
+		line-height: @com-input-size-s;
 
 		border-radius: 30px;
 		cursor: pointer;

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

@@ -153,17 +153,17 @@
 @com-ani-ease: var(--ui-ani-ease);
 
 // Input height
-@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);
+@com-input-size-2xl: var(--ui-input-size-2xl);
+@com-input-size-xl: var(--ui-input-size-xl);
+@com-input-size-l: var(--ui-input-size-l);
+@com-input-size-m: var(--ui-input-size-m);
+@com-input-size-s: var(--ui-input-size-s);
+@com-input-size-xs: var(--ui-input-size-xs);
 
 // Border radius
 @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);
+@com-border-radius-round: var(--ui-input-size-2xl);
 
 // Color
 @com-color-border-bolder: var(--ui-color-border-bolder);
@@ -192,7 +192,7 @@
 .component-ui-input {
 	overflow: hidden;
 	position: relative;
-	height: @com-input-height-m;
+	height: @com-input-size-m;
 	border: 1px solid @com-color-border-bolder;
 	border-radius: @com-border-radius-m;
 	background: @com-color-surface;
@@ -247,23 +247,23 @@
 	}
 
 	// Size
-	&.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-2xl { height: @com-input-size-2xl; }
+	&.tag-size-xl { height: @com-input-size-xl; }
+	&.tag-size-l { height: @com-input-size-l; }
 	&.tag-size-m {
 		//padding: 0 @com-space-s;
-		height: @com-input-height-m;
+		height: @com-input-size-m;
 		font-size: @com-text-s;
 	}
 
 	&.tag-size-s {
-		height: @com-input-height-s;
+		height: @com-input-size-s;
 		font-size: @com-text-s;
 	}
 
 	&.tag-size-xs {
 		//padding: 0 10px;
-		height: @com-input-height-xs;
+		height: @com-input-size-xs;
 		font-size: @com-text-xs;
 
 		.loading-indicator {

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

@@ -46,7 +46,7 @@ function handleClick(e) {
 </script>
 
 <style lang="less">
-@com-size: var(--ui-input-height-m);
+@com-size: var(--ui-input-size-m);
 @com-border-radius-m: var(--ui-border-radius-m);
 @com-ani-time: var(--ui-ani-time);
 @com-ani-ease: var(--ui-ani-ease);

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

@@ -46,7 +46,7 @@ const hasSlot = (name) => {
 </script>
 
 <style lang="less">
-@com-input-height: var(--ui-input-height-m);
+@com-input-size: var(--ui-input-size-m);
 
 @com-map-padding: var(--ui-map-padding);
 @com-space-xs: var(--ui-space-xs);
@@ -71,7 +71,7 @@ const hasSlot = (name) => {
 
 		inset: 0 0 auto 0;
 		max-width: 100%;
-		height: @com-input-height;
+		height: @com-input-size;
 	}
 
 	.location-slot-default {
@@ -99,7 +99,7 @@ const hasSlot = (name) => {
 
 	&.tag-slot-header-and-default {
 		.location-slot-default {
-			inset: calc(@com-input-height + @com-space-xs) 0 0 0;
+			inset: calc(@com-input-size + @com-space-xs) 0 0 0;
 		}
 	}
 }

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

@@ -115,7 +115,7 @@
 <style lang="less">
 @import url(../../styles/mixins.less);
 
-@com-height: var(--ui-input-height-m);
+@com-height: var(--ui-input-size-m);
 
 @com-border-radius-m: var(--ui-border-radius-m);
 @com-space-m: var(--ui-space-m);

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

@@ -12,7 +12,7 @@ const props = defineProps(['store']);
 </script>
 
 <style lang="less">
-@com-width: var(--ui-input-height-m);
+@com-width: var(--ui-input-size-m);
 @com-border-radius-m: var(--ui-border-radius-m);
 
 // Padding

package/dist/runtime/components/radio.vue

@@ -97,7 +97,7 @@
 	@com-color-header-text: var(--ui-color-header-text);
 	@com-color-muted-text: var(--ui-color-muted-text);
 	
-	@com-input-height: var(--ui-input-height-m);
+	@com-input-size: var(--ui-input-size-m);
 
 	@com-text-m: var(--ui-text-m);
 	@com-text-l: var(--ui-text-l);
@@ -119,8 +119,8 @@
 		margin: 0;
 		padding: 0 0 0 30px;
 		
-		height: @com-input-height;
-		line-height: @com-input-height;
+		height: @com-input-size;
+		line-height: @com-input-size;
 		font-size: @com-text-m;
 		font-weight: 500;
 		color: @com-color-text;

package/dist/runtime/components/select.vue

@@ -185,7 +185,7 @@ onMounted(() => {
 @import (less) './styles/components.less';
 
 @com-space-2xs: var(--ui-space-2xs);
-@com-input-height-m: var(--ui-input-height-m);
+@com-input-size-m: var(--ui-input-size-m);
 
 @com-font-header: var(--ui-font-header);
 @com-value-font-weight: @ui-select-value-font-weight;
@@ -221,7 +221,7 @@ onMounted(() => {
 			opacity: 0;
 			padding-right: 45px;
 			padding-left: 10px;
-			height: @com-input-height-m;
+			height: @com-input-size-m;
 			width: 100%;
 
 			cursor: pointer;

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

@@ -1,6 +1,6 @@
 @ui-accordion-title-font-size: var(--ui-text-l);
 @ui-accordion-text-font-size: var(--ui-text-m);
-@ui-button-border-radius: var(--ui-input-height-2xl);
+@ui-button-border-radius: var(--ui-input-size-2xl);
 @ui-map-user-position-color: var(--color-primary);
 @ui-select-value-font-weight: var(--ui-font-weight-medium);
 @ui-select-background-color: var(--ui-color-surface);

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

@@ -468,7 +468,7 @@
 
 @com-text-s: var(--ui-text-s);
 
-@com-input-height-m: var(--ui-input-height-m);
+@com-input-size-m: var(--ui-input-size-m);
 
 @com-color-primary:  var(--ui-color-primary);
 @com-color-text-on-primary: var(--ui-color-text-on-primary);
@@ -504,7 +504,7 @@
 
 	.component-ui-input .component-ui-button {
 		padding: 0;
-		width: @com-input-height-m;
+		width: @com-input-size-m;
 		height: 100%;
 		font-size: @com-text-s;
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@community-release/nx-ui",
-	"version": "0.0.76",
+	"version": "0.0.78",
 	"packageManager": "pnpm@10.14.0",
 	"description": "nx-ui - Nuxt UI library",
 	"repository": {
@@ -62,7 +62,7 @@
 		"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",
+		"release": "npm login && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
 		"test": "vitest run",
 		"test:watch": "vitest watch",
 		"test:com": "vitest components run",