@community-release/nx-ui 0.0.37 → 0.0.39

package/dist/module.d.mts

@@ -104,6 +104,9 @@ var defaultComponentsStyle = {
   },
   map: {
     "user-position-color": "var(--ui-color-primary)"
+  },
+  select: {
+    "value-font-weight": "var(--ui-font-weight-medium)"
   }
 };
 

package/dist/module.d.ts

@@ -104,6 +104,9 @@ var defaultComponentsStyle = {
   },
   map: {
     "user-position-color": "var(--ui-color-primary)"
+  },
+  select: {
+    "value-font-weight": "var(--ui-font-weight-medium)"
   }
 };
 

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "ui",
   "configKey": "ui",
-  "version": "0.0.37"
+  "version": "0.0.39"
 }

package/dist/module.mjs

@@ -104,6 +104,9 @@ const defaultComponentsStyle = {
   },
   map: {
     "user-position-color": "var(--ui-color-primary)"
+  },
+  select: {
+    "value-font-weight": "var(--ui-font-weight-medium)"
   }
 };
 

package/dist/runtime/components/checkbox.vue

@@ -1,5 +1,5 @@
 <template>
-	<span class="component-ui component-ui-checkbox" :class="classes">
+	<div class="component-ui component-ui-checkbox" :class="classes">
 		<label>
 			<input
 				ref="input"
@@ -17,7 +17,7 @@
 				<slot></slot>
 			</span>
 		</label>
-	</span>
+	</div>
 </template>
 
 <script setup>
@@ -103,7 +103,6 @@
 	@com-space-micro: var(--ui-space-micro);
 
 	position: relative;
-	display: inline-block;
 	text-align: left;
 
 	.error-wrap {

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

@@ -1,5 +1,5 @@
 <template>
-	<label class="component-ui-label" :class="[`tag-size-${size}`, `tag-weight-${weight}`]">
+	<label class="component-ui-label" :class="[`tag-size-${size}`, `tag-weight-${weight}`, required ? 'tag-required' : '']">
 		<span class="component-ui-label--text">{{ text }}</span>
 		<slot></slot>
 	</label>
@@ -22,14 +22,21 @@
 			type: [String, Number],
 			default: comProps.weight,
 		},
+		required: {
+			type: Boolean,
+			default: false
+		},
 	});
 </script>
 
 <style lang="less">
 @com-space-micro: var(--ui-space-micro);
-@com-color-header-text: var(--ui-color-header-text);
+
 @com-font-weight-medium: var(--ui-font-weight-medium);
 
+@com-color-header-text: var(--ui-color-header-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);
@@ -39,7 +46,8 @@
 	display: block;
 
 	.component-ui-label--text {
-		display: block;
+		position: relative;
+		display: inline-block;
 		padding-bottom: @com-space-micro;
 		font-weight: @com-font-weight-medium;
 		font-size: @com-text-default;
@@ -57,5 +65,19 @@
 	&.tag-weight-600 .component-ui-label--text { font-weight: 600; }
 	&.tag-weight-500 .component-ui-label--text { font-weight: 500; }
 	&.tag-weight-400 .component-ui-label--text { font-weight: 400; }
+
+	// Required
+	&.tag-required {
+		.component-ui-label--text:after {
+			content: '*';
+
+			position: absolute;
+			top: 0;
+			right: -0.7em;
+			color: @com-color-red;
+			font-weight: bold;
+			font-size: @com-text-medium;
+		}
+	}
 }
 </style>

package/dist/runtime/components/select.vue

@@ -24,7 +24,7 @@
 
 <script setup>
 // Imports
-import { ref, computed, watch, onMounted } from 'vue';
+import { ref, computed, watch, onMounted, nextTick } from 'vue';
 
 // Setup
 const props = defineProps({
@@ -45,10 +45,6 @@ const props = defineProps({
 		type: Array,
 		default: () => []
 	},
-	required: {
-		type: Boolean,
-		default: false
-	},
 	disabled: {
 		type: Boolean,
 		default: false
@@ -61,10 +57,6 @@ const props = defineProps({
 		type: [String, Number],
 		default: 'none'
 	},
-	block: {
-		type: Boolean,
-		default: false
-	},
 });
 
 const emit = defineEmits(['update:modelValue']);
@@ -96,9 +88,8 @@ const classes = computed(() => {
 	if (props.modelValue !== null) 	ar.push('tag-not-empty');
 	if (props.error) 				ar.push('tag-error');
 	if (focus.value) 				ar.push('tag-focus');
-	if (props.block) 				ar.push('tag-block');
-	if (props.required) 			ar.push('tag-required');
 	if (props.disabled) 			ar.push('tag-disabled');
+	if (props.label) 				ar.push('tag-label');
 
 	return ar;
 });
@@ -155,10 +146,13 @@ onMounted(() => {
 </script>
 
 <style lang="less">
+@import (less) './styles/components.less';
+
 @com-space-micro: var(--ui-space-micro);
 @com-input-height-default: var(--ui-input-height-default);
 
 @com-font-header: var(--ui-font-header);
+@com-value-font-weight: @ui-select-value-font-weight;
 
 @com-text-default: var(--ui-text-default);
 @com-text-small: var(--ui-text-small);
@@ -175,7 +169,6 @@ onMounted(() => {
 @com-bs-1: var(--ui-bs-1);
 
 .component-ui-select {
-	display: inline-block;
 	position: relative;
 	text-align: left;
 	font-size: @com-text-default;
@@ -228,21 +221,12 @@ onMounted(() => {
 			right: 30px;
 		}
 
-		label {
-			top: 3px;
-			margin: 0;
-			padding: 0;
-			font-size: @com-text-small;
-			
-			color: @com-color-gray-text;
-		}
-
 		strong {
-			top: 20px;
-			bottom: 0;
-
+			transform: translateY(-50%);
+			top: 50%;
+			bottom: auto;
 			font-family: @com-font-header;
-			font-weight: 600;
+			font-weight: @com-value-font-weight;
 			color: @com-color-header-text;
 		}
 
@@ -262,19 +246,22 @@ onMounted(() => {
 		}
 	}
 
-	&.tag-block {
-		display: block;
-	}
-
-	&.tag-required {
-		.value:before {
-			content: '*';
-
-			position: absolute;
-			top: 2px;
-			right: 2px;
-
-			color: @com-color-red;
+	&.tag-label {
+		.value {
+			label {
+				top: 3px;
+				margin: 0;
+				padding: 0 0 5px 0;
+				font-size: @com-text-small;
+				
+				color: @com-color-gray-text;
+			}
+
+			strong {
+				transform: none;
+				top: 20px;
+				bottom: 0;
+			}
 		}
 	}
 

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

@@ -2,3 +2,4 @@
 @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);
+@ui-select-value-font-weight: var(--ui-font-weight-medium);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@community-release/nx-ui",
-    "version": "0.0.37",
+    "version": "0.0.39",
     "description": "nx-ui - Nuxt UI library",
     "repository": {
         "type": "git",