@quidgest/ui 0.6.1 → 0.7.0

package/dist/ui.scss

@@ -1,5 +1,5 @@
 /*!
- * Quidgest Framework v0.6.1
+ * Quidgest Framework v0.7.0
  * (c) 2023 Quidgest - Consultores de Gestão, SA
  */
 
@@ -181,7 +181,7 @@ $font-weight-regular: 400;
 $font-weight-italic: 400;
 $font-weight-bold: 700;
 $font-weight-black: 900;
-$border: #dce3e8 !default;
+$border: #c4c5ca !default;
 $outline-width: 2px !default;
 $outline-style: solid !default;
 $outline-color: rgb(var(--q-theme-primary-rgb) / 0.25) !default;
@@ -194,23 +194,24 @@ $outline: $outline-width $outline-style $outline-color;
 }
 body {
 	font-size: $font-size-base;
-}
-* {
 	
-	&::-webkit-scrollbar {
-		width: 7px;
-	}
-	&::-webkit-scrollbar-thumb {
-		background-color: #ccc;
-		border-radius: $border-radius;
-	}
-	&::-webkit-scrollbar-track {
-		background-color: #f1f1f1;
-		border-radius: $border-radius;
+	* {
+		
+		&::-webkit-scrollbar {
+			width: 7px;
+		}
+		&::-webkit-scrollbar-thumb {
+			background-color: #ccc;
+			border-radius: $border-radius;
+		}
+		&::-webkit-scrollbar-track {
+			background-color: #f1f1f1;
+			border-radius: $border-radius;
+		}
+		
+		scrollbar-color: #ccc #f1f1f1;
+		scrollbar-width: thin;
 	}
-	
-	scrollbar-color: #ccc #f1f1f1;
-	scrollbar-width: thin;
 }
 .fade-enter-from,
 .fade-leave-to {
@@ -411,37 +412,44 @@ $btn-outline: var(--q-theme-primary-light);
 		}
 	}
 }
+.q-combobox__clear {
+	opacity: 0.5;
+	&:hover {
+		opacity: 1;
+		cursor: pointer;
+	}
+}
 $input-padding-y: 0.26rem;
 $input-padding-x: 0.25rem;
 $input-height: 31.89px;
 .q-field {
+	$this: &;
 	display: flex;
 	flex-direction: column;
 	border-radius: $border-radius;
-	&:focus-within {
-		outline: $outline;
-	}
+	width: fit-content;
 	&__label {
+		display: flex;
+		gap: $space-base;
+		align-items: center;
 		color: rgb(var(--q-theme-on-background-rgb) / 0.8);
 		line-height: 1.5;
-		&[data-val-required='true']::after {
-			content: ' *';
-			font-weight: 700;
-			color: var(--q-theme-danger);
-		}
 	}
 	&__control {
 		display: flex;
 		align-items: center;
 		height: $input-height;
 		width: 100%;
-		border-radius: $border-radius;
+		border-radius: inherit;
 		border-width: 1px;
 		background-color: transparent;
 		padding: $input-padding-y $input-padding-x;
 		font-size: 0.9rem;
 		line-height: 1.5rem;
 		transition: color var(--transition-duration) var(--transition-timing-function);
+		&:focus-within {
+			outline: $outline;
+		}
 	}
 	&__prepend,
 	&__append {
@@ -452,34 +460,59 @@ $input-height: 31.89px;
 		margin-left: auto;
 	}
 	
+	&--required {
+		> #{$this}__label label::after {
+			content: ' *';
+			font-weight: 700;
+			color: var(--q-theme-danger);
+		}
+	}
 	&--readonly {
-		background-color: #eaebec;
+		#{$this}__control {
+			background-color: #eaebec;
+		}
 	}
 	&--disabled {
-		cursor: not-allowed;
-		opacity: 0.5;
+		#{$this}__control {
+			cursor: not-allowed;
+			opacity: 0.5;
+		}
 	}
 	
 	&--mini {
-		width: 4.35rem;
+		#{$this}__control {
+			width: 4.35rem;
+		}
 	}
 	&--small {
-		width: 6.525rem;
+		#{$this}__control {
+			width: 6.525rem;
+		}
 	}
 	&--medium {
-		width: 10.875rem;
+		#{$this}__control {
+			width: 10.875rem;
+		}
 	}
 	&--large {
-		width: 15.225rem;
+		#{$this}__control {
+			width: 15.225rem;
+		}
 	}
 	&--x-large {
-		width: 19.575rem;
+		#{$this}__control {
+			width: 19.575rem;
+		}
 	}
 	&--xx-large {
-		width: 36.975rem;
+		#{$this}__control {
+			width: 36.975rem;
+		}
 	}
 	&--block {
-		width: 100%;
+		#{$this}__control {
+			width: 100%;
+		}
 	}
 }
 .q-icon {
@@ -493,6 +526,58 @@ $input-height: 31.89px;
 		height: 1em;
 	}
 }
+.q-input-group {
+	display: flex;
+	align-items: flex-end;
+	&__prepend > :first-child {
+		border-top-left-radius: $border-radius;
+		border-bottom-left-radius: $border-radius;
+	}
+	&__append > :last-child {
+		border-top-right-radius: $border-radius;
+		border-bottom-right-radius: $border-radius;
+	}
+	&__prepend,
+	&__append {
+		display: flex;
+		align-items: flex-end;
+		height: $input-height;
+		.q-btn {
+			justify-content: center;
+		}
+		> * {
+			border-radius: 0;
+			min-width: 40px;
+			height: $input-height;
+		}
+		> span {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			text-align: center;
+			padding: 0.25rem 0.5rem;
+			font-size: $font-size-base;
+			border-width: 1px;
+			background-color: rgb(var(--q-theme-on-background-rgb) / 0.1);
+			color: var(--q-theme-primary);
+			white-space: nowrap;
+		}
+	}
+	> * {
+		border-radius: 0;
+	}
+	> :first-child {
+		border-top-left-radius: $border-radius;
+		border-bottom-left-radius: $border-radius;
+	}
+	> :last-child {
+		border-top-right-radius: $border-radius;
+		border-bottom-right-radius: $border-radius;
+	}
+	> * + * {
+		margin-left: -1px;
+	}
+}
 $line-color: var(--q-theme-primary);
 .q-line-loader {
 	width: 100%;
@@ -540,9 +625,6 @@ $line-color: var(--q-theme-primary);
 	-webkit-overflow-scrolling: touch;
 	width: 100%;
 	border-radius: $border-radius;
-	&:focus-visible {
-		outline: $outline;
-	}
 }
 .q-list-item-group {
 	display: flex;
@@ -910,7 +992,7 @@ $spinner-color: var(--q-theme-primary);
 .q-text-field__counter {
 	display: flex;
 	margin-top: 0.1rem;
-	justify-content: end;
+	justify-content: flex-end;
 	color: rgb(var(--q-theme-on-background-rgb) / 0.5);
 }
 .q-tooltip .q-overlay__content {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@quidgest/ui",
   "private": false,
   "description": "Quidgest's UI framework",
-  "version": "0.6.1",
+  "version": "0.7.0",
   "author": {
     "name": "Quidgest"
   },
@@ -84,7 +84,7 @@
     "stylelint": "^15.11.0",
     "stylelint-config-sass-guidelines": "^10.0.0",
     "typescript": "^5.2.2",
-    "vite": "^4.4.11",
+    "vite": "^4.5.0",
     "vite-plugin-dts": "^3.6.3",
     "vitest": "^0.34.6",
     "vue-eslint-parser": "^9.3.1"