@community-release/nx-ui 0.0.43 → 0.0.44

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "ui",
   "configKey": "ui",
-  "version": "0.0.43"
+  "version": "0.0.44"
 }

package/dist/runtime/components/checkbox.vue

@@ -4,16 +4,19 @@
 			<input
 				ref="input"
 				type="checkbox" 
+
+				:id="inputId"
 				:name="name"
 				:checked="isChecked"
 				:disabled="disabled"
+				:aria-describedby="describedby"
 				@change="updateValue($event.target.checked)"
 				@blur="focus = false"
 				@focus="focus = true"
 				autocomplete="off"
 			/>
 
-			<i :aria-label="ariaLabel"></i>
+			<i></i>
 
 			<span>
 				<slot></slot>
@@ -32,21 +35,22 @@
 //
 	const props = defineProps({
 		name: {
-			required: false,
 			default: 'cb'
 		},
 		modelValue: {
 			required: true,
 		},
-		haveError: {
-			type: Boolean,
-			default: false
+		inputId: {
+			default: '',
 		},
-		useBinaries: {
+		describedby: {
+			default: '',
+		},
+		error: {
 			type: Boolean,
 			default: false
 		},
-		required: {
+		useBinaries: {
 			type: Boolean,
 			default: false
 		},
@@ -59,16 +63,12 @@
 	const emit = defineEmits(['change', 'onchange', 'update:modelValue']);
 
 	const focus = ref(false);
-	const ariaLabel = computed(() => {
-		return (slots.default ? slots.default()[0]?.children || '' : '').trim();
-	});
 
 	const classes = computed(() => {
 		const ar = [];
 
-		if (props.haveError) 	ar.push('tag-error');
+		if (props.error) 		ar.push('tag-error');
 		if (props.disabled) 	ar.push('tag-disabled');
-		if (props.required) 	ar.push('tag-required');
 		if (focus.value) 		ar.push('tag-focus');
 
 		return ar;
@@ -115,20 +115,6 @@
 
 	position: relative;
 	text-align: left;
-
-	.error-wrap {
-		position: absolute;
-		top: 100%;
-		left: 0;
-		padding: 0;
-		
-		font-size: 11px;
-		
-		color: @com-color-error-text;
-		background: transparent;
-
-		&:before, &:after { display: none; }
-	}
 	
 	> label {
 		position: relative;
@@ -200,17 +186,6 @@
 		}
 	}
 
-	// Required
-	&.tag-required {
-		span:after {
-			content: '*';
-			padding-left: @com-space-micro;
-			color: @com-color-red;
-			font-weight: bold;
-			font-size: @com-text-medium;
-		}
-	}
-
 	// Disabled
 	&.tag-disabled {
 		opacity: 0.6;

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

@@ -1,5 +1,5 @@
 <template>
-	<section class="component-ui-input" :class="classes" @click="refInput.focus()">
+	<div class="component-ui-input" :class="classes" @click="refInput.focus()">
 		<ui-impulse-indicator :impulse="impulse" @update:impulse="$emit('update:impulse', false)" />
 
 		<div class="com-content">
@@ -7,10 +7,13 @@
 			<div class="slot-default">
 				<input
 					ref="refInput"
+
+					:id="inputId"
 					:value="modelValue"
 					:type="type" 
 					:placeholder="placeholder" 
 					:disabled="disabled" 
+					:aria-required="required ? 'true' : 'false'"
 
 					@change="updateValue($event.target.value)"
 					@input="updateValue($event.target.value)"
@@ -25,12 +28,12 @@
 			</div>
 			<div class="slot-append" v-if="hasSlot('append')"><slot name="append"></slot></div>
 		</div>
-	</section>
+	</div>
 </template>
 
 <script setup>
 // Import
-	import { ref, computed, useSlots } from 'vue';
+	import { ref, computed, useSlots  } from 'vue';
 	import UiImpulseIndicator from '../impulse-indicator.vue';
 	import comProps from '#build/ui.input.mjs';
 
@@ -43,6 +46,9 @@
 		modelValue: {
 			required: true
 		},
+		inputId: {
+			default: '',
+		},
 		placeholder: {
 			default: comProps.placeholder,
 		},
@@ -50,6 +56,10 @@
 			type: Boolean,
 			default: false,
 		},
+		required: {
+			type: Boolean,
+			default: false,
+		},
 		type: {
 			type: String,
 			default: 'text'
@@ -104,8 +114,6 @@
 	const hasSlot = (name) => {
 		return !!slots[name];
 	};
-// Hooks
-
 </script>
 
 <style lang="less">

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

@@ -1,8 +1,10 @@
 <template>
-	<label class="component-ui-label" :class="[`tag-size-${size}`, `tag-weight-${weight}`, required ? 'tag-required' : '']">
-		<span class="component-ui-label--text">{{ text }}</span>
+	<component :is="fieldset ? 'fieldset' : 'div'"  class="component-ui-label" :class="[`tag-size-${size}`, `tag-weight-${weight}`, required ? 'tag-required' : '']">
+		<component :is="fieldset ? 'legend' : 'label'" class="component-ui-label--text" :for="labelFor">
+			{{ text }} <span v-if="required" aria-hidden="true">*</span>
+		</component>
 		<slot></slot>
-	</label>
+	</component>
 </template>
 
 <script setup>
@@ -14,6 +16,13 @@
 		text: {
 			default: '',
 		},
+		fieldset: {
+			type: Boolean,
+			default: false,
+		},
+		labelFor: {
+			default: ''
+		},
 		size: {
 			type: String,
 			default: comProps.size,
@@ -43,11 +52,9 @@
 @com-text-small: var(--ui-text-small);
 
 .component-ui-label {
-	display: block;
-
 	.component-ui-label--text {
 		position: relative;
-		display: inline-block;
+		display: block;
 		padding-bottom: @com-space-micro;
 		font-weight: @com-font-weight-medium;
 		font-size: @com-text-default;
@@ -55,29 +62,21 @@
 	}
 
 	// 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-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; }
 
 	// Text weight
-	&.tag-weight-700 .component-ui-label--text { font-weight: 700; }
-	&.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; }
+	&.tag-weight-700 > .component-ui-label--text { font-weight: 700; }
+	&.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;
-		}
+	&.tag-required .component-ui-label--text span {
+		color: @com-color-red;
+		font-weight: bold;
 	}
 }
 </style>

package/dist/runtime/components/radio.vue

@@ -4,17 +4,21 @@
 			<input
 				ref="input"
 				type="radio" 
+
+				:id="inputId"
 				:checked="isChecked"
 				:value="value"
 				:name="name"
 				:disabled="disabled"
+				:aria-required="required ? 'true' : 'false'"
+				:aria-describedby="describedby"
 				@blur="focus = false"
 				@focus="focus = true"
 				autocomplete="off"
 				@change="handleUpdate($event.target.value)"
 			/>
 
-			<i :aria-label="ariaLabel"></i>
+			<i></i>
 
 			<span>
 				<slot></slot>
@@ -33,13 +37,18 @@
 // Data
 	const props = defineProps({
 		name: {
-			required: false,
 			default: 'rd'
 		},
 		value: {
 			required: true,
 		},
 		modelValue: { default: '' },
+		inputId: {
+			default: '',
+		},
+		describedby: {
+			default: '',
+		},
 		haveError: {
 			type: Boolean,
 			default: false
@@ -55,12 +64,8 @@
 	})
 
 	const emit = defineEmits(['update:modelValue']);
-
 	
 	const focus = ref(false);
-	const ariaLabel = computed(() => {
-		return (slots.default ? slots.default()[0]?.children || '' : '').trim();
-	});
 
 	const classes = computed(() => {
 		const ar = [];
@@ -69,7 +74,6 @@
 		if (props.haveError) 	ar.push('tag-error');
 		if (props.text) 		ar.push('tag-text');
 		if (props.disabled) 	ar.push('tag-disabled');
-		if (props.required) 	ar.push('tag-required');
 		if (focus.value) 	ar.push('tag-focus');
 
 		return ar;
@@ -201,17 +205,6 @@
 		}
 	}
 
-	// Required
-	&.tag-required {
-		span:after {
-			content: '*';
-			padding-left: @com-space-micro;
-			color: @com-color-error;
-			font-weight: bold;
-			font-size: @com-text-medium;
-		}
-	}
-
 	// Disabled
 	&.tag-disabled {
 		opacity: 0.6;

package/dist/runtime/components/select.vue

@@ -2,15 +2,18 @@
 	<div class="component-ui-select" :class="classes" :style="styles">
 		<div class="wrapper">
 			<div class="value" @click="toggle">
-				<label v-if="label" v-html="label"></label>
+				<div v-if="label" v-html="label"></div>
 				<strong v-if="valueName" v-html="valueName"></strong>
 			</div>
 
 			<select 
 				ref="select"
+
+				:id="inputId"
 				@change="onChange"
 				@focus="handleFocus"
 				@blur="handleBlur"
+				:aria-required="required ? 'true' : 'false'"
 				:disabled="disabled"
 				autocomplete="off"
 			>
@@ -25,9 +28,13 @@
 <script setup>
 // Imports
 import { ref, computed, watch, onMounted, nextTick } from 'vue';
+import uniq from './helpers/uniq';
 
 // Setup
 const props = defineProps({
+	inputId: {
+		default: '',
+	},
 	theme: {
 		type: String,
 		default: 'default',
@@ -45,6 +52,10 @@ const props = defineProps({
 		type: Array,
 		default: () => []
 	},
+	required: {
+		type: Boolean,
+		default: false
+	},
 	disabled: {
 		type: Boolean,
 		default: false
@@ -66,6 +77,7 @@ const isOpen = ref(false);
 const increaseZIndex = ref(false);
 const focus = ref(false);
 const select = ref(null);
+const uniqId = uniq();
 
 const valueName = computed(() => {
 	let result = '...';

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

@@ -2,9 +2,12 @@
 	<section class="component-ui-textarea" :class="classes" @click="refInput.focus()">
 		<textarea
 			ref="refInput"
+
+			:id="inputId"
 			:value="modelValue"
 			:placeholder="placeholder" 
 			:disabled="disabled" 
+			:aria-required="required ? 'true' : 'false'"
 
 			@change="updateValue($event.target.value)"
 			@input="updateValue($event.target.value)"
@@ -30,6 +33,12 @@
 
 // Data
 	const props = defineProps({
+		modelValue: {
+			required: true
+		},
+		inputId: {
+			default: '',
+		},
 		placeholder: {
 			default: comProps.placeholder,
 		},
@@ -37,13 +46,14 @@
 			type: String,
 			default: comProps.shape,
 		},
-		modelValue: {
-			required: true
-		},
 		disabled: {
 			type: Boolean,
 			default: false,
 		},
+		required: {
+			type: Boolean,
+			default: false,
+		},
 		resize: {
 			type: String,
 			default: 'on',

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@community-release/nx-ui",
-    "version": "0.0.43",
+    "version": "0.0.44",
     "description": "nx-ui - Nuxt UI library",
     "repository": {
         "type": "git",
@@ -63,4 +63,4 @@
         "docs:components": "vue-docgen",
         "docs:generate": "npm run generate:production -prefix ./docs"
     }
-}
+}