@community-release/nx-ui 0.0.43 → 0.0.45

package/dist/module.json

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

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

@@ -7,6 +7,7 @@
 		:class="classes" 
 		:style="styles" 
 		@click="handleClick"
+		ref="refCom"
 	>
 		<div class="button-bg" :style="buttonBgStyle"></div>
 
@@ -22,19 +23,15 @@
 	</component>
 </template>
 
-<script>
-import UiImpulseIndicator from '../impulse-indicator.vue';
-import UiLoading from '../loading.vue';
-import comProps from '#build/ui.button.mjs';
-
-export default {
-	components: {
-		UiImpulseIndicator,
-		UiLoading,
-	},
-	
-	// Data
-	props: {
+<script setup>
+// Imports
+	import { ref, computed } from 'vue';
+	import UiImpulseIndicator from '../impulse-indicator.vue';
+	import UiLoading from '../loading.vue';
+	import comProps from '#build/ui.button.mjs';
+
+// Data
+	const props = defineProps({
 		color: {
 			type: String,
 			default: comProps.color,
@@ -71,73 +68,74 @@ export default {
 			type: [Boolean, Number],
 			default: false,
 		},
-	},
-	data: function() {
-		return {
-			impulse: false,
-		};
-	},
-	computed: {
-		computedType() {
-			return this.type !== '' ? this.type : (this.href !== '' ? 'a' : 'button');
-		},
-		classes() {
-			let ar = [];
+	});
 
-			if (this.size) ar.push(`tag-size-${this.size}`);
-			if (this.shape) ar.push(`tag-shape-${this.shape}`);
-			if (this.variant) ar.push(`tag-variant-${this.variant}`);
-			if (this.block) ar.push('tag-block');
-			if (this.loading) ar.push('tag-loading');
-			if (this.disabled) ar.push('tag-disabled');
+	const refCom = ref(null);
 
-			return ar;
-		},
-		stylesHoverColor() {
-			return `var(--ui-color-text-on-${this.color})`;
-		},
-		styles() {
-			let background = `var(--ui-color-${this.color})`;
-			let color = `var(--ui-color-text-on-${this.color})`;
+	const impulse = ref(false);
+		
+	const computedType = computed(() => {
+		return props.type !== '' ? props.type : (props.href !== '' ? 'a' : 'button');
+	});
 
-			if (this.variant === 'flat' || this.variant === 'outline') 
-				background = 'transparent';
+	const classes = computed(() => {
+		let ar = [];
 
-			if (this.variant === 'flat' || this.variant === 'outline') 
-				color = `var(--ui-color-${this.color}-text)`;
+		if (props.size) ar.push(`tag-size-${props.size}`);
+		if (props.shape) ar.push(`tag-shape-${props.shape}`);
+		if (props.variant) ar.push(`tag-variant-${props.variant}`);
+		if (props.block) ar.push('tag-block');
+		if (props.loading) ar.push('tag-loading');
+		if (props.disabled) ar.push('tag-disabled');
 
-			return {
-				background,
-				color,
-			};
-		},
-		buttonBgStyle() {
-			return {
-				'background': (this.variant === 'flat' || this.variant === 'outline') ? `var(--ui-color-${this.color})` : 'rgba(66,88,120, 0.075)'
-			}
+		return ar;
+	});
+	const stylesHoverColor = computed(() => {
+		return `var(--ui-color-text-on-${props.color})`;
+	});
+
+	const styles = computed(() => {
+		let background = `var(--ui-color-${props.color})`;
+		let color = `var(--ui-color-text-on-${props.color})`;
+
+		if (props.variant === 'flat' || props.variant === 'outline') 
+			background = 'transparent';
+
+		if (props.variant === 'flat' || props.variant === 'outline') 
+			color = `var(--ui-color-${props.color}-text)`;
+
+		return {
+			background,
+			color,
+		};
+	});
+	const buttonBgStyle = computed(() => {
+		return {
+			'background': (props.variant === 'flat' || props.variant === 'outline') ? `var(--ui-color-${props.color.value})` : 'rgba(66,88,120, 0.075)'
 		}
-	},
+	});
 
 	// Methods
-	methods: {
-		handleClick(e) {
-			if (this.disabled || this.loading) return;
-
-			let rect = this.$el.getBoundingClientRect();
-
-			this.impulse = {
-				left	: e.clientX - rect.left,
-				top		: e.clientY - rect.top,
-				width	: this.$el.offsetWidth,
-				height	: this.$el.offsetHeight
-			};
-		}
+	function handleClick(e) {
+		if (props.disabled || props.loading) return;
+
+		let rect = refCom.value.getBoundingClientRect();
+
+		impulse.value = {
+			left	: e.clientX - rect.left,
+			top		: e.clientY - rect.top,
+			width	: refCom.value.offsetWidth,
+			height	: refCom.value.offsetHeight
+		};
 	}
-}
 </script>
 
 <style lang="less">
 .component-ui-button {
+	--button-hover-color: #fff;
+	--button-text-color: #fff;
+	--button-background: #fff;
+
 	--button-hover-color: v-bind(stylesHoverColor);
 	--button-text-color: v-bind(styles.color);
 	--button-background: v-bind(styles.background);
@@ -360,6 +358,9 @@ export default {
 		}
 
 		&:focus {
+			outline: none;
+		}
+		&:focus-visible {
 			outline: @com-outline;
 			outline-offset: @com-outline-offset;
 		}

package/dist/runtime/components/checkbox.vue

@@ -4,16 +4,17 @@
 			<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>
@@ -24,29 +25,27 @@
 
 <script setup>
 // Imports
-	import { ref, computed, useSlots } from 'vue';
-
-// Misc
-	const slots = useSlots();
+	import { ref, computed } from 'vue';
 
 //
 	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
 		},
@@ -58,18 +57,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');
+		if (props.error) 		ar.push('tag-error');
 
 		return ar;
 	});
@@ -104,7 +97,7 @@
 	@com-color-text: var(--ui-color-text);
 	@com-color-header-text: var(--ui-color-header-text);
 	@com-color-gray-text: var(--ui-color-gray-text);
-	@com-color-error-text: var(--ui-color-error);
+	@com-color-error: var(--ui-color-error);
 
 	@com-text-medium: var(--ui-text-medium);
 	@com-text-small: var(--ui-text-small);
@@ -115,20 +108,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 +179,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;
@@ -223,17 +191,24 @@
 
 	// Error
 	&.tag-error {
-		> label { color: @com-color-error-text; }
+		> label i { border-color: @com-color-error; }
+		> label > input:checked + i {
+			border-color: @com-color-error;
+			background: @com-color-error;
+		}
 	}
 }
 
 @media (hover: hover) {
-	.component-ui-checkbox.tag-focus {
+	.component-ui-checkbox {
 		// Ally
 		@com-outline: var(--ui-outline);
 		@com-outline-offset: var(--ui-outline-offset);
 
-		i {
+		input:focus {
+			outline: none;
+		}
+		input:focus-visible + i {
 			outline: @com-outline;
 			outline-offset: @com-outline-offset;
 		}

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,14 @@
 			type: Boolean,
 			default: false,
 		},
+		required: {
+			type: Boolean,
+			default: false,
+		},
+		error: {
+			type: Boolean,
+			default: false,
+		},
 		type: {
 			type: String,
 			default: 'text'
@@ -78,6 +92,7 @@
 		if (props.disabled) ar.push('tag-disabled');
 		if (props.size) ar.push(`tag-size-${props.size}`);
 		if (props.shape) ar.push(`tag-shape-${props.shape}`);
+		if (props.error) ar.push(`tag-error`);
 
 		return ar;
 	});
@@ -104,8 +119,6 @@
 	const hasSlot = (name) => {
 		return !!slots[name];
 	};
-// Hooks
-
 </script>
 
 <style lang="less">
@@ -130,7 +143,8 @@
 @com-color-bg: var(--ui-color-bg);
 @com-color-header-text: var(--ui-color-header-text);
 @com-color-gray-text: var(--ui-color-gray-text);
-@com-color-primary: var(--color-primary);
+@com-color-primary: var(--ui-color-primary);
+@com-color-error: var(--ui-color-error);
 
 // Space
 @com-space-small: var(--ui-space-small);
@@ -240,5 +254,14 @@
 			cursor: not-allowed;
 		}
 	}
+
+	// Error
+	&.tag-error {
+		border-color: @com-color-error;
+
+		&.tag-focus {
+			border-color: transparent;
+		}
+	}
 }
 </style>

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

@@ -1,8 +1,12 @@
 <template>
-	<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>
+	<div>
+		<div class="component-ui-label" :class="[`tag-size-${size}`, `tag-weight-${weight}`, required ? 'tag-required' : '']">
+			<component :is="isLegend ? 'legend' : 'label'" class="component-ui-label--text" :for="labelFor">
+				{{ text }} <span v-if="required" aria-hidden="true">*</span>
+			</component>
+			<slot />
+		</div>
+	</div>
 </template>
 
 <script setup>
@@ -14,6 +18,17 @@
 		text: {
 			default: '',
 		},
+		fieldset: {
+			type: Boolean,
+			default: false,
+		},
+		labelFor: {
+			default: ''
+		},
+		isLegend: {
+			type: Boolean,
+			default: false
+		},
 		size: {
 			type: String,
 			default: comProps.size,
@@ -43,11 +58,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 +68,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/map/index.vue

@@ -14,8 +14,9 @@ import { watch, computed, defineAsyncComponent } from 'vue';
 import { useMapStore } from './store';
 import comProps from '#build/ui.map.mjs';
 
-// Data
-const store = useMapStore();
+// // Data
+const nuxtApp = useNuxtApp();
+const store = useMapStore(nuxtApp.$pinia);
 const emit = defineEmits(['initialized']);
 
 const mapEngines = {

package/dist/runtime/components/radio.vue

@@ -4,17 +4,19 @@
 			<input
 				ref="input"
 				type="radio" 
+
+				:id="inputId"
 				:checked="isChecked"
 				:value="value"
 				:name="name"
 				:disabled="disabled"
-				@blur="focus = false"
-				@focus="focus = true"
+				:aria-required="required ? 'true' : 'false'"
+				:aria-describedby="describedby"
 				autocomplete="off"
 				@change="handleUpdate($event.target.value)"
 			/>
 
-			<i :aria-label="ariaLabel"></i>
+			<i></i>
 
 			<span>
 				<slot></slot>
@@ -33,13 +35,18 @@
 // Data
 	const props = defineProps({
 		name: {
-			required: false,
 			default: 'rd'
 		},
 		value: {
 			required: true,
 		},
 		modelValue: { default: '' },
+		inputId: {
+			default: '',
+		},
+		describedby: {
+			default: '',
+		},
 		haveError: {
 			type: Boolean,
 			default: false
@@ -51,17 +58,15 @@
 		disabled: {
 			type: Boolean,
 			default: false
+		},
+		error: {
+			type: Boolean,
+			default: false
 		}
 	})
 
 	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,8 +74,7 @@
 		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');
+		if (props.error) 		ar.push('tag-error');
 
 		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;
@@ -224,17 +217,24 @@
 
 	// Error
 	&.tag-error {
-		> label { color: @com-color-error; }
+		> label i { border-color: @com-color-error; }
+		> label > input:checked + i {
+			border-color: @com-color-error;
+			background: @com-color-error;
+		}
 	}
 }
 
 @media (hover: hover) {
-	.component-ui-radio.tag-focus {
+	.component-ui-radio {
 		// Ally
 		@com-outline: var(--ui-outline);
 		@com-outline-offset: var(--ui-outline-offset);
 
-		i {
+		input:focus {
+			outline: none;
+		}
+		input:focus-visible + i {
 			outline: @com-outline;
 			outline-offset: @com-outline-offset;
 		}

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"
 			>
@@ -28,6 +31,9 @@ import { ref, computed, watch, onMounted, nextTick } from 'vue';
 
 // Setup
 const props = defineProps({
+	inputId: {
+		default: '',
+	},
 	theme: {
 		type: String,
 		default: 'default',
@@ -45,6 +51,10 @@ const props = defineProps({
 		type: Array,
 		default: () => []
 	},
+	required: {
+		type: Boolean,
+		default: false
+	},
 	disabled: {
 		type: Boolean,
 		default: false
@@ -164,6 +174,7 @@ onMounted(() => {
 @com-color-surface: var(--ui-color-surface);
 @com-color-red: var(--ui-color-red);
 @com-color-border: var(--ui-color-border-bolder);
+@com-color-error: var(--ui-color-error);
 
 @com-border-radius-default: var(--ui-border-radius-default);
 @com-bs-1: var(--ui-bs-1);
@@ -282,6 +293,18 @@ onMounted(() => {
 			border-color: transparent;
 			outline: @com-outline;
 		}
+
+
+	}
+
+	&.tag-error {
+		.value {
+			border-color: @com-color-error;
+		}
+
+		&.tag-focus .value {
+			border-color: transparent;
+		}
 	}
 }
 
@@ -290,5 +313,15 @@ onMounted(() => {
 		background: @com-color-surface;
 		border-color: transparent;
 	}
+
+	&.tag-error {
+		.value {
+			border-color: @com-color-error;
+		}
+
+		&.tag-focus .value {
+			border-color: transparent;
+		}
+	}
 }
 </style>

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,17 +46,22 @@
 			type: String,
 			default: comProps.shape,
 		},
-		modelValue: {
-			required: true
-		},
 		disabled: {
 			type: Boolean,
 			default: false,
 		},
+		required: {
+			type: Boolean,
+			default: false,
+		},
 		resize: {
 			type: String,
 			default: 'on',
 		},
+		error: {
+			type: Boolean,
+			default: false,
+		},
 	});
 
 	const refInput = ref(null);
@@ -62,6 +76,7 @@
 		if (haveFocus.value) ar.push('tag-focus');
 		if (props.disabled) ar.push('tag-disabled');
 		if (props.shape) ar.push(`tag-shape-${props.shape}`);
+		if (props.error) ar.push(`tag-error`);
 
 		return ar;
 	});
@@ -100,6 +115,7 @@
 @com-color-border-bolder: var(--ui-color-border-bolder);
 @com-color-header-text: var(--ui-color-header-text);
 @com-color-gray-text: var(--ui-color-gray-text);
+@com-color-error: var(--ui-color-error);
 
 // Padding
 @com-space-default: var(--ui-space-default);
@@ -167,5 +183,18 @@
 			outline: @com-outline;
 		}
 	}
+
+	// Error
+	&.tag-error {
+		textarea {
+			border-color: @com-color-error;
+		}
+
+		&.tag-focus {
+			textarea {
+				border-color: transparent;
+			}
+		}
+	}
 }
 </style>

package/dist/runtime/plugins/methods.mjs

@@ -2,7 +2,7 @@ import { defineNuxtPlugin } from '#app';
 import { useUINoticeStore } from '../components/notice/store.mjs';
 
 export default defineNuxtPlugin(function (nuxt) {
-	const noticeStore = useUINoticeStore();
+	const noticeStore = useUINoticeStore(nuxt.$pinia);
 
     return {
         provide: {

package/package.json

@@ -1,66 +1,66 @@
 {
-    "name": "@community-release/nx-ui",
-    "version": "0.0.43",
-    "description": "nx-ui - Nuxt UI library",
-    "repository": {
-        "type": "git",
-        "url": "git+https://github.com/community-release/nx-ui.git"
-    },
-    "license": "MIT",
-    "type": "module",
-    "exports": {
-        ".": {
-            "import": "./dist/module.mjs",
-            "require": "./dist/module.cjs"
-        }
-    },
-    "main": "./dist/module.cjs",
-    "files": [
-        "dist"
-    ],
-    "dependencies": {
-        "@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",
-        "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.2.1",
-        "@vue/test-utils": "^2.4.6",
-        "@vuedoc/md": "^4.0.0-beta8",
-        "@vuedoc/parser": "^4.0.0-beta14",
-        "changelogen": "^0.5.5",
-        "cross-env": "^7.0.3",
-        "happy-dom": "^14.12.0",
-        "less": "^3.9.0",
-        "less-loader": "^5.0.0",
-        "nuxt": "^3.15.4",
-        "vite-raw-plugin": "^1.0.2",
-        "vitest": "^1.6.0",
-        "vue-docgen-cli": "^4.79.0",
-        "vue-tsc": "^2.0.24"
-    },
-    "resolutions": {
-        "string-width": "4.2.3"
-    },
-    "scripts": {
-        "prepack": "nuxt-module-build build",
-        "dev": "nuxi dev docs --host --port 7012",
-        "build": "nuxi build docs",
-        "prepare": "nuxt-module-build build && nuxt-module-build prepare && nuxi prepare docs",
-        "release": "npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
-        "test": "vitest run",
-        "test:watch": "vitest watch",
-        "test:com": "vitest components run",
-        "test:genmocks": "node ./src/utils/generateTestMocks.mjs",
-        "docs:components": "vue-docgen",
-        "docs:generate": "npm run generate:production -prefix ./docs"
-    }
-}
+	"name": "@community-release/nx-ui",
+	"version": "0.0.45",
+	"description": "nx-ui - Nuxt UI library",
+	"repository": {
+		"type": "git",
+		"url": "git+https://github.com/community-release/nx-ui.git"
+	},
+	"license": "MIT",
+	"type": "module",
+	"exports": {
+		".": {
+			"import": "./dist/module.mjs",
+			"require": "./dist/module.cjs"
+		}
+	},
+	"main": "./dist/module.cjs",
+	"files": [
+		"dist"
+	],
+	"dependencies": {
+		"@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",
+		"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.2.1",
+		"@vue/test-utils": "^2.4.6",
+		"@vuedoc/md": "^4.0.0-beta8",
+		"@vuedoc/parser": "^4.0.0-beta14",
+		"changelogen": "^0.5.5",
+		"cross-env": "^7.0.3",
+		"happy-dom": "^14.12.0",
+		"less": "^3.9.0",
+		"less-loader": "^5.0.0",
+		"nuxt": "^3.15.4",
+		"vite-raw-plugin": "^1.0.2",
+		"vitest": "^1.6.0",
+		"vue-docgen-cli": "^4.79.0",
+		"vue-tsc": "^2.0.24"
+	},
+	"resolutions": {
+		"string-width": "4.2.3"
+	},
+	"scripts": {
+		"prepack": "nuxt-module-build build",
+		"dev": "nuxi dev docs --host --port 7012",
+		"build": "nuxi build docs",
+		"prepare": "nuxt-module-build build && nuxt-module-build prepare && nuxi prepare docs",
+		"release": "npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+		"test": "vitest run",
+		"test:watch": "vitest watch",
+		"test:com": "vitest components run",
+		"test:genmocks": "node ./src/utils/generateTestMocks.mjs",
+		"docs:components": "vue-docgen",
+		"docs:generate": "npm run generate:production -prefix ./docs"
+	}
+}

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

@@ -1,153 +0,0 @@
-declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
-    color: {
-        type: StringConstructor;
-        default: any;
-    };
-    size: {
-        type: StringConstructor;
-        default: any;
-    };
-    variant: {
-        type: StringConstructor;
-        default: any;
-    };
-    shape: {
-        type: StringConstructor;
-        default: any;
-    };
-    href: {
-        type: StringConstructor;
-        default: string;
-    };
-    type: {
-        type: StringConstructor;
-        default: string;
-    };
-    block: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: (BooleanConstructor | NumberConstructor)[];
-        default: boolean;
-    };
-}>, {}, {
-    impulse: boolean;
-}, {
-    computedType(): any;
-    classes(): string[];
-    stylesHoverColor(): string;
-    styles(): {
-        background: string;
-        color: string;
-    };
-    buttonBgStyle(): {
-        background: string;
-    };
-}, {
-    handleClick(e: any): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
-    color: {
-        type: StringConstructor;
-        default: any;
-    };
-    size: {
-        type: StringConstructor;
-        default: any;
-    };
-    variant: {
-        type: StringConstructor;
-        default: any;
-    };
-    shape: {
-        type: StringConstructor;
-        default: any;
-    };
-    href: {
-        type: StringConstructor;
-        default: string;
-    };
-    type: {
-        type: StringConstructor;
-        default: string;
-    };
-    block: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    loading: {
-        type: BooleanConstructor;
-        default: boolean;
-    };
-    disabled: {
-        type: (BooleanConstructor | NumberConstructor)[];
-        default: boolean;
-    };
-}>> & Readonly<{}>, {
-    type: string;
-    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;