@community-release/nx-ui 0.0.41 → 0.0.43

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.41"
+  "version": "0.0.43"
 }

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/button/index.vue.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     color: {
         type: StringConstructor;
         default: any;
@@ -35,7 +35,7 @@ declare const _default: import("vue").DefineComponent<{
         type: (BooleanConstructor | NumberConstructor)[];
         default: boolean;
     };
-}, any, {
+}>, {}, {
     impulse: boolean;
 }, {
     computedType(): any;
@@ -87,15 +87,67 @@ declare const _default: import("vue").DefineComponent<{
         type: (BooleanConstructor | NumberConstructor)[];
         default: boolean;
     };
-}>>, {
+}>> & Readonly<{}>, {
     type: string;
-    loading: boolean;
     color: string;
     size: string;
     variant: string;
     shape: string;
     href: string;
     block: boolean;
+    loading: boolean;
     disabled: number | boolean;
-}, {}>;
+}, {}, {
+    UiImpulseIndicator: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+        impulse: {
+            type: (ObjectConstructor | BooleanConstructor)[];
+            default: boolean;
+        };
+    }>, {}, {
+        impulseArray: never[];
+    }, {}, {
+        addImpulse(options: any): void;
+    }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+        impulse: {
+            type: (ObjectConstructor | BooleanConstructor)[];
+            default: boolean;
+        };
+    }>> & Readonly<{}>, {
+        impulse: boolean | Record<string, any>;
+    }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+    UiLoading: {
+        new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<{}> & Readonly<{}>, {
+            active: boolean;
+            $props: {
+                readonly active?: boolean | undefined;
+            };
+        }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, import("vue").PublicProps, {}, true, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {
+            progress: (typeof __VLS_nativeElements)["circle"];
+        }, HTMLElement, import("vue").ComponentProvideOptions, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<{}> & Readonly<{}>, {
+            active: boolean;
+            $props: {
+                readonly active?: boolean | undefined;
+            };
+        }, {}, {}, {}, {}>;
+        __isFragment?: never;
+        __isTeleport?: never;
+        __isSuspense?: never;
+    } & import("vue").ComponentOptionsBase<Readonly<{}> & Readonly<{}>, {
+        active: boolean;
+        $props: {
+            readonly active?: boolean | undefined;
+        };
+    }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, {}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+        $slots: {
+            default?: ((props: {}) => any) | undefined;
+        };
+    });
+}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/runtime/components/checkbox.vue

@@ -8,10 +8,12 @@
 				:checked="isChecked"
 				:disabled="disabled"
 				@change="updateValue($event.target.checked)"
+				@blur="focus = false"
+				@focus="focus = true"
 				autocomplete="off"
 			/>
 
-			<i></i>
+			<i :aria-label="ariaLabel"></i>
 
 			<span>
 				<slot></slot>
@@ -22,7 +24,10 @@
 
 <script setup>
 // Imports
-	import { computed } from 'vue';
+	import { ref, computed, useSlots } from 'vue';
+
+// Misc
+	const slots = useSlots();
 
 //
 	const props = defineProps({
@@ -53,12 +58,18 @@
 
 	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.disabled) 	ar.push('tag-disabled');
 		if (props.required) 	ar.push('tag-required');
+		if (focus.value) 		ar.push('tag-focus');
 
 		return ar;
 	});
@@ -215,4 +226,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/grid.vue.d.ts

@@ -1,4 +1,4 @@
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     textAlign: {
         type: StringConstructor;
         default: string;
@@ -19,7 +19,7 @@ declare const _default: import("vue").DefineComponent<{
         type: (StringConstructor | BooleanConstructor)[];
         default: boolean;
     };
-}, any, {
+}>, {}, {
     timeout: null;
     windowWidth: number;
 }, {
@@ -57,11 +57,11 @@ declare const _default: import("vue").DefineComponent<{
         type: (StringConstructor | BooleanConstructor)[];
         default: boolean;
     };
-}>>, {
+}>> & Readonly<{}>, {
     textAlign: string;
     gap: string | Record<string, any>;
     gridTemplateColumns: string | Record<string, any>;
     gapTop: string | boolean;
     gapBottom: string | boolean;
-}, {}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/runtime/components/impulse-indicator.vue.d.ts

@@ -1,9 +1,9 @@
-declare const _default: import("vue").DefineComponent<{
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     impulse: {
         type: (ObjectConstructor | BooleanConstructor)[];
         default: boolean;
     };
-}, any, {
+}>, {}, {
     impulseArray: never[];
 }, {}, {
     addImpulse(options: any): void;
@@ -12,7 +12,7 @@ declare const _default: import("vue").DefineComponent<{
         type: (ObjectConstructor | BooleanConstructor)[];
         default: boolean;
     };
-}>>, {
+}>> & Readonly<{}>, {
     impulse: boolean | Record<string, any>;
-}, {}>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

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

@@ -144,6 +144,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 +227,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/map/location/nearest.vue

@@ -104,8 +104,6 @@
 			store.setCoord(nearest.coord, 1500);
 			store.setZoom(nearest?.zoom ? nearest.zoom : 14, 1500);
 		} catch (err) {
-			console.log('handleClick err', err);
-
 			emit('error', 'error-geo-not-enabled-on-device');
 		}
 

package/dist/runtime/components/radio.vue

@@ -8,11 +8,13 @@
 				:value="value"
 				:name="name"
 				:disabled="disabled"
+				@blur="focus = false"
+				@focus="focus = true"
 				autocomplete="off"
 				@change="handleUpdate($event.target.value)"
 			/>
 
-			<i></i>
+			<i :aria-label="ariaLabel"></i>
 
 			<span>
 				<slot></slot>
@@ -22,50 +24,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: {
+			required: false,
+			default: 'rd'
+		},
+		value: {
+			required: true,
+		},
+		modelValue: { 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 ariaLabel = computed(() => {
+		return (slots.default ? slots.default()[0]?.children || '' : '').trim();
+	});
 
-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 (props.required) 	ar.push('tag-required');
+		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">
@@ -212,4 +227,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

@@ -168,6 +168,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 +279,8 @@ onMounted(() => {
 
 	&.tag-focus {
 		.value {
-			border-color: @com-color-primary;
+			border-color: transparent;
+			outline: @com-outline;
 		}
 	}
 }

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

@@ -113,6 +113,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 +161,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.41",
+    "version": "0.0.43",
     "description": "nx-ui - Nuxt UI library",
     "repository": {
         "type": "git",
@@ -19,20 +19,20 @@
         "dist"
     ],
     "dependencies": {
-        "@nuxt/kit": "^3.12.1",
-        "@nuxtjs/color-mode": "^3.4.2",
-        "@nuxtjs/i18n": "^8.3.1",
-        "@pinia/nuxt": "^0.5.1",
+        "@nuxt/kit": "^3.15.4",
+        "@nuxtjs/color-mode": "^3.5.2",
+        "@nuxtjs/i18n": "^9.2.0",
+        "@pinia/nuxt": "^0.10.1",
+        "pinia": "^3.0.1",
         "ol": "^9.1.0",
-        "pinia": "^2.1.7",
-        "vue": "^3.4.31"
+        "vue": "^3.5.13"
     },
     "devDependencies": {
         "@nuxt/devtools": "latest",
         "@nuxt/module-builder": "^0.5.5",
         "@nuxt/schema": "^3.11.2",
         "@nuxt/test-utils": "^3.12.0",
-        "@vitejs/plugin-vue": "^5.0.5",
+        "@vitejs/plugin-vue": "^5.2.1",
         "@vue/test-utils": "^2.4.6",
         "@vuedoc/md": "^4.0.0-beta8",
         "@vuedoc/parser": "^4.0.0-beta14",
@@ -41,7 +41,7 @@
         "happy-dom": "^14.12.0",
         "less": "^3.9.0",
         "less-loader": "^5.0.0",
-        "nuxt": "^3.12.1",
+        "nuxt": "^3.15.4",
         "vite-raw-plugin": "^1.0.2",
         "vitest": "^1.6.0",
         "vue-docgen-cli": "^4.79.0",