@community-release/nx-ui 0.0.42 → 0.0.44

package/dist/module.d.mts

@@ -75,7 +75,10 @@ var defaultStyle = {
   "bs-3": "0 0.4px 0.6px rgba(13,72,177, 0.019), 0 1px 1.6px rgba(13,72,177, 0.027), 0 2.1px 3.2px rgba(13,72,177, 0.033),  4.4px 6.6px rgba(13,72,177, 0.041), 0 12px 18px rgba(13,72,177, 0.06)",
   // Animation
   "ani-time": "0.3s",
-  "ani-ease": "ease"
+  "ani-ease": "ease",
+  // A11y
+  "outline": "2px solid var(--ui-color-primary)",
+  "outline-offset": "2px"
 };
 
 var generateStyle = (options) => {

package/dist/module.d.ts

@@ -75,7 +75,10 @@ var defaultStyle = {
   "bs-3": "0 0.4px 0.6px rgba(13,72,177, 0.019), 0 1px 1.6px rgba(13,72,177, 0.027), 0 2.1px 3.2px rgba(13,72,177, 0.033),  4.4px 6.6px rgba(13,72,177, 0.041), 0 12px 18px rgba(13,72,177, 0.06)",
   // Animation
   "ani-time": "0.3s",
-  "ani-ease": "ease"
+  "ani-ease": "ease",
+  // A11y
+  "outline": "2px solid var(--ui-color-primary)",
+  "outline-offset": "2px"
 };
 
 var generateStyle = (options) => {

package/dist/module.json

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

package/dist/module.mjs

@@ -75,7 +75,10 @@ const defaultStyle = {
   "bs-3": "0 0.4px 0.6px rgba(13,72,177, 0.019), 0 1px 1.6px rgba(13,72,177, 0.027), 0 2.1px 3.2px rgba(13,72,177, 0.033),  4.4px 6.6px rgba(13,72,177, 0.041), 0 12px 18px rgba(13,72,177, 0.06)",
   // Animation
   "ani-time": "0.3s",
-  "ani-ease": "ease"
+  "ani-ease": "ease",
+  // A11y
+  "outline": "2px solid var(--ui-color-primary)",
+  "outline-offset": "2px"
 };
 
 const generateStyle = (options) => {

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

@@ -79,7 +79,7 @@ export default {
 	},
 	computed: {
 		computedType() {
-			return this.type !== '' ? this.type : (this.href !== '' ? 'a' : 'span');
+			return this.type !== '' ? this.type : (this.href !== '' ? 'a' : 'button');
 		},
 		classes() {
 			let ar = [];
@@ -108,7 +108,7 @@ export default {
 
 			return {
 				background,
-				color
+				color,
 			};
 		},
 		buttonBgStyle() {
@@ -348,12 +348,21 @@ export default {
 
 @media (hover: hover) {
 	.component-ui-button {
+		// Ally
+		@com-outline: var(--ui-outline);
+		@com-outline-offset: var(--ui-outline-offset);
+
 		&:hover {
 			text-decoration: none;
 			color: var(--button-hover-color) !important;
 
 			.button-bg { opacity: 1; }
 		}
+
+		&:focus {
+			outline: @com-outline;
+			outline-offset: @com-outline-offset;
+		}
 	}
 }
 </style>

package/dist/runtime/components/checkbox.vue

@@ -4,10 +4,15 @@
 			<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"
 			/>
 
@@ -22,26 +27,30 @@
 
 <script setup>
 // Imports
-	import { computed } from 'vue';
+	import { ref, computed, useSlots } from 'vue';
+
+// Misc
+	const slots = useSlots();
 
 //
 	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
 		},
@@ -53,12 +62,14 @@
 
 	const emit = defineEmits(['change', 'onchange', 'update:modelValue']);
 
+	const focus = ref(false);
+
 	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;
 	});
@@ -104,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;
@@ -189,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;
@@ -215,4 +201,17 @@
 		> label { color: @com-color-error-text; }
 	}
 }
+
+@media (hover: hover) {
+	.component-ui-checkbox.tag-focus {
+		// Ally
+		@com-outline: var(--ui-outline);
+		@com-outline-offset: var(--ui-outline-offset);
+
+		i {
+			outline: @com-outline;
+			outline-offset: @com-outline-offset;
+		}
+	}
+}
 </style>

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">
@@ -144,6 +152,9 @@
 @com-text-small: var(--ui-text-small);
 @com-text-mini: var(--ui-text-mini);
 
+// Ally
+@com-outline: var(--ui-outline);
+
 .component-ui-input {
 	overflow: hidden;
 	position: relative;
@@ -224,8 +235,8 @@
 
 	// Focus
 	&.tag-focus {
-		border-color: @com-color-primary;
-		outline: 1px solid @com-color-primary;
+		border-color: transparent;
+		outline: @com-outline;
 	}
 
 	// Disabled

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,10 +4,16 @@
 			<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)"
 			/>
@@ -22,50 +28,63 @@
 </template>
 
 <script setup>
-import { computed } from 'vue';
-
-const props = defineProps({
-	name: {
-		required: false,
-		default: 'rd'
-	},
-	value: {
-		required: true,
-	},
-	modelValue: { default: '' },
-	haveError: {
-		type: Boolean,
-		default: false
-	},
-	required: {
-		type: Boolean,
-		default: false
-	},
-	disabled: {
-		type: Boolean,
-		default: false
-	}
-})
+// Imports
+	import { ref, computed, useSlots } from 'vue';
+
+// Misc
+	const slots = useSlots();
+
+// Data
+	const props = defineProps({
+		name: {
+			default: 'rd'
+		},
+		value: {
+			required: true,
+		},
+		modelValue: { default: '' },
+		inputId: {
+			default: '',
+		},
+		describedby: {
+			default: '',
+		},
+		haveError: {
+			type: Boolean,
+			default: false
+		},
+		required: {
+			type: Boolean,
+			default: false
+		},
+		disabled: {
+			type: Boolean,
+			default: false
+		}
+	})
 
-const emit = defineEmits(['update:modelValue'])
+	const emit = defineEmits(['update:modelValue']);
+	
+	const focus = ref(false);
 
-const classes = computed(() => {
-	const ar = [];
+	const classes = computed(() => {
+		const ar = [];
 
-	if (props.value !== '') ar.push('tag-not-empty');
-	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 (props.value !== '') ar.push('tag-not-empty');
+		if (props.haveError) 	ar.push('tag-error');
+		if (props.text) 		ar.push('tag-text');
+		if (props.disabled) 	ar.push('tag-disabled');
+		if (focus.value) 	ar.push('tag-focus');
 
-	return ar;
-});
+		return ar;
+	});
 
-const isChecked = computed(() => props.modelValue == props.value);
+	const isChecked = computed(() => props.modelValue == props.value);
 
-function handleUpdate(v) {
-	emit('update:modelValue', v);
-}
+// Methods
+	function handleUpdate(v) {
+		emit('update:modelValue', v);
+	}
 </script>
 
 <style lang="less">
@@ -186,17 +205,6 @@ function handleUpdate(v) {
 		}
 	}
 
-	// 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;
@@ -212,4 +220,17 @@ function handleUpdate(v) {
 		> label { color: @com-color-error; }
 	}
 }
+
+@media (hover: hover) {
+	.component-ui-radio.tag-focus {
+		// Ally
+		@com-outline: var(--ui-outline);
+		@com-outline-offset: var(--ui-outline-offset);
+
+		i {
+			outline: @com-outline;
+			outline-offset: @com-outline-offset;
+		}
+	}
+}
 </style>

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 = '...';
@@ -168,6 +180,9 @@ onMounted(() => {
 @com-border-radius-default: var(--ui-border-radius-default);
 @com-bs-1: var(--ui-bs-1);
 
+// Ally
+@com-outline: var(--ui-outline);
+
 .component-ui-select {
 	position: relative;
 	text-align: left;
@@ -276,7 +291,8 @@ onMounted(() => {
 
 	&.tag-focus {
 		.value {
-			border-color: @com-color-primary;
+			border-color: transparent;
+			outline: @com-outline;
 		}
 	}
 }

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',
@@ -113,6 +123,9 @@
 @com-text-default: var(--ui-text-default);
 @com-text-small: var(--ui-text-small);
 
+// Ally
+@com-outline: var(--ui-outline);
+
 .component-ui-textarea {
 	position: relative;
 	cursor: text;
@@ -158,9 +171,11 @@
 	}
 
 	// Focus
-	&.tag-focus textarea {
-		border-color: @com-color-primary;
-		outline: 1px solid @com-color-primary;
+	&.tag-focus {
+		textarea {
+			border-color: transparent;
+			outline: @com-outline;
+		}
 	}
 }
 </style>

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@community-release/nx-ui",
-    "version": "0.0.42",
+    "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"
     }
-}
+}