@volverjs/ui-vue 0.0.3 → 0.0.5-beta.1

package/src/components/VvRadio/VvRadio.vue

@@ -5,12 +5,8 @@
 </script>
 
 <script setup lang="ts">
-	import {
-		VvRadioProps,
-		VvRadioEvents,
-		useGroupProps,
-	} from '@/components/VvRadio'
-	import { HintSlotFactory } from '@/components/common/HintSlot'
+	import { VvRadioProps, VvRadioEvents, useGroupProps } from '.'
+	import { HintSlotFactory } from '../common/HintSlot'
 
 	// props, emit and slots
 	const props = defineProps(VvRadioProps)
@@ -63,7 +59,7 @@
 
 	// styles
 	const { modifiers } = toRefs(props)
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-radio',
 		modifiers,
 		computed(() => ({

package/src/components/VvRadio/index.ts

@@ -1,7 +1,7 @@
 import type { ExtractPropTypes, Ref } from 'vue'
-import type { InputGroupState } from '@/types/group'
-import { CheckboxRadioProps } from '@/props'
-import { INJECTION_KEY_RADIO_GROUP } from '@/constants'
+import type { InputGroupState } from '../../types/group'
+import { CheckboxRadioProps } from '../../props'
+import { INJECTION_KEY_RADIO_GROUP } from '../../constants'
 
 export const VvRadioProps = CheckboxRadioProps
 
@@ -22,10 +22,14 @@ export function useGroupProps(
 
 	// global props
 	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
-	const readonly = getGroupOrLocalRef('readonly', props) as Ref<boolean>
-	const disabled = getGroupOrLocalRef('disabled', props) as Ref<boolean>
 	const valid = getGroupOrLocalRef('valid', props) as Ref<boolean>
 	const invalid = getGroupOrLocalRef('invalid', props) as Ref<boolean>
+	const readonly = computed(() =>
+		Boolean(props.readonly || group?.value?.disabled.value),
+	)
+	const disabled = computed(() =>
+		Boolean(props.disabled || group?.value?.disabled.value),
+	)
 
 	return {
 		// local props
@@ -34,9 +38,9 @@ export function useGroupProps(
 		group,
 		isInGroup,
 		modelValue,
-		readonly,
-		disabled,
 		valid,
 		invalid,
+		readonly,
+		disabled,
 	}
 }

package/src/components/VvRadioGroup/VvRadioGroup.vue

@@ -5,15 +5,12 @@
 </script>
 
 <script setup lang="ts">
-	import type { Option } from '@/types/generic'
-	import type { InputGroupState } from '@/types/group'
-	import { INJECTION_KEY_RADIO_GROUP } from '@/constants'
-	import { HintSlotFactory } from '@/components/common/HintSlot'
-	import VvRadio from '@/components/VvRadio/VvRadio.vue'
-	import {
-		VvRadioGroupProps,
-		VvRadioGroupEvents,
-	} from '@/components/VvRadioGroup'
+	import type { Option } from '../../types/generic'
+	import type { InputGroupState } from '../../types/group'
+	import { INJECTION_KEY_RADIO_GROUP } from '../../constants'
+	import { HintSlotFactory } from '../common/HintSlot'
+	import VvRadio from '../VvRadio/VvRadio.vue'
+	import { VvRadioGroupProps, VvRadioGroupEvents } from '.'
 
 	// props, emit and slots
 	const props = defineProps(VvRadioGroupProps)
@@ -38,7 +35,7 @@
 	const { getOptionLabel, getOptionValue } = useOptions(props)
 
 	// styles
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-radio-group',
 		modifiers,
 		computed(() => ({

package/src/components/VvRadioGroup/index.ts

@@ -1,4 +1,4 @@
-import { CheckboxRadioGroupProps } from '@/props'
+import { CheckboxRadioGroupProps } from '../../props'
 
 export const VvRadioGroupProps = CheckboxRadioGroupProps
 

package/src/components/VvSelect/VvSelect.vue

@@ -6,9 +6,9 @@
 
 <script setup lang="ts">
 	import type { SelectHTMLAttributes } from 'vue'
-	import VvIcon from '@/components/VvIcon/VvIcon.vue'
-	import HintSlotFactory from '@/components/common/HintSlot'
-	import { VvSelectProps, VvSelectEmits } from '@/components/VvSelect'
+	import VvIcon from '../VvIcon/VvIcon.vue'
+	import HintSlotFactory from '../common/HintSlot'
+	import { VvSelectProps, VvSelectEmits } from '.'
 
 	// props, emit and slots
 	const props = defineProps(VvSelectProps)
@@ -78,7 +78,7 @@
 	})
 
 	// styles
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-select',
 		modifiers,
 		computed(() => ({

package/src/components/VvSelect/index.ts

@@ -14,7 +14,8 @@ import {
 	UnselectableProps,
 	AutofocusProps,
 	AutocompleteProps,
-} from '@/props'
+	LabelProps,
+} from '../../props'
 
 export const VvSelectProps = {
 	...IdNameProps,
@@ -32,6 +33,7 @@ export const VvSelectProps = {
 	...IconProps,
 	...FloatingLabelProps,
 	...UnselectableProps,
+	...LabelProps,
 	/**
 	 * This Boolean attribute indicates that multiple options can be selected in the list.
 	 * If it is not specified, then only one option can be selected at a time.
@@ -58,10 +60,6 @@ export const VvSelectProps = {
 		type: [String, Number, Boolean, Object, Array],
 		default: undefined,
 	},
-	/**
-	 * <label> value for the select
-	 */
-	label: String,
 	/**
 	 * Select placeholder
 	 */

package/src/components/VvTextarea/VvTextarea.vue

@@ -6,9 +6,9 @@
 
 <script setup lang="ts">
 	import type { TextareaHTMLAttributes } from 'vue'
-	import HintSlotFactory from '@/components/common/HintSlot'
-	import VvIcon from '@/components/VvIcon/VvIcon.vue'
-	import { VvTextareaProps, VvTextareaEvents } from '@/components/VvTextarea'
+	import HintSlotFactory from '../common/HintSlot'
+	import VvIcon from '../VvIcon/VvIcon.vue'
+	import { VvTextareaProps, VvTextareaEvents } from '.'
 
 	// props, emit and slots
 	const props = defineProps(VvTextareaProps)
@@ -89,7 +89,7 @@
 	const { HintSlot, hasHint, hasInvalid } = HintSlotFactory(props, slots)
 
 	// styles
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-textarea',
 		modifiers,
 		computed(() => ({

package/src/components/VvTextarea/index.ts

@@ -1,5 +1,5 @@
 import type { ExtractPropTypes } from 'vue'
-import { InputTextareaProps } from '@/props'
+import { InputTextareaProps } from '../../props'
 
 export const WRAP = {
 	hard: 'hard',

package/src/components/VvTooltip/VvTooltip.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-	import { VvTooltipProps } from '@/components/VvTooltip'
+	import { VvTooltipProps } from '.'
 
 	const props = defineProps(VvTooltipProps)
 	const { modifiers } = toRefs(props)
 
 	// styles
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-tooltip',
 		modifiers,
 		computed(() => ({

package/src/components/VvTooltip/index.ts

@@ -1,6 +1,6 @@
-import { Side } from '@/constants'
-import { ModifiersProps } from '@/props'
 import type { PropType } from 'vue'
+import { Side } from '../../constants'
+import { ModifiersProps } from '../../props'
 
 export const VvTooltipProps = {
 	...ModifiersProps,
@@ -9,7 +9,7 @@ export const VvTooltipProps = {
 	 * @default Side.bottom
 	 */
 	position: {
-		type: String as PropType<Side>,
+		type: String as PropType<`${Side}`>,
 		default: Side.bottom,
 	},
 	value: {

package/src/composables/dropdown/useInjectDropdown.ts

@@ -1,11 +1,11 @@
 import type { Ref } from 'vue'
 import type { Emitter, EventType } from 'mitt'
-import type { DropdownItemRole } from '@/components/VvDropdown/'
 import {
+	type DropdownItemRole,
 	INJECTION_KEY_DROPDOWN_TRIGGER,
 	INJECTION_KEY_DROPDOWN_ACTION,
 	INJECTION_KEY_DROPDOWN_ITEM,
-} from '@/constants'
+} from '../../constants'
 
 /**
  * Injects dropdown reference and the event bus

package/src/composables/dropdown/useProvideDropdown.ts

@@ -1,15 +1,13 @@
 import { type Ref, Fragment } from 'vue'
 import mitt from 'mitt'
-import {
-	type DropdownRole,
-	DROPDOWN_ROLES,
-	DROPDOWN_ITEM_ROLES,
-} from '@/components/VvDropdown/'
 import {
 	INJECTION_KEY_DROPDOWN_TRIGGER,
 	INJECTION_KEY_DROPDOWN_ACTION,
 	INJECTION_KEY_DROPDOWN_ITEM,
-} from '@/constants'
+	DropdownRole,
+	DropdownItemRole,
+	ActionRoles,
+} from '../../constants'
 
 /**
  * Share the dropdown reference and the event bus with all its children.
@@ -66,13 +64,13 @@ export function useProvideDropdownItem({
 	role,
 	expanded,
 }: {
-	role: Ref<DropdownRole>
+	role: Ref<`${DropdownRole}`>
 	expanded: Ref<boolean>
 }) {
 	const itemRole = computed(() =>
-		role.value === DROPDOWN_ROLES[0]
-			? DROPDOWN_ITEM_ROLES[0]
-			: DROPDOWN_ITEM_ROLES[1],
+		role.value === DropdownRole.listbox
+			? DropdownItemRole.option
+			: DropdownItemRole.presentation,
 	)
 	provide(INJECTION_KEY_DROPDOWN_ITEM, {
 		role: itemRole,
@@ -91,7 +89,7 @@ export function useProvideDropdownAction({
 	expanded: Ref<boolean>
 }) {
 	provide(INJECTION_KEY_DROPDOWN_ACTION, {
-		role: 'menuitem',
+		role: ActionRoles.menuitem,
 		expanded,
 	})
 }

package/src/composables/group/useInjectedGroupState.ts

@@ -1,5 +1,5 @@
 import type { Ref } from 'vue'
-import type GroupState from '@/types/group'
+import type GroupState from '../../types/group'
 
 /**
  * Injects a group state

package/src/composables/group/useProvideGroupState.ts

@@ -1,4 +1,4 @@
-import type GroupState from '@/types/group'
+import type GroupState from '../../types/group'
 
 /**
  * Share part of the state of the component with all its children.

package/src/composables/useComponentIcon.ts

@@ -1,5 +1,5 @@
-import { Position, Side } from '@/constants'
 import type { Ref } from 'vue'
+import { Position, Side } from '../constants'
 
 export function useComponentIcon(
 	icon: Ref<string | object | undefined> | undefined,

package/src/composables/useDebouncedInput.ts

@@ -2,8 +2,15 @@ import type { Ref } from 'vue'
 
 export function useDebouncedInput(
 	modelValue: Ref | undefined,
-	emit: (event: string, value: unknown) => void,
+	emit: (event: string, value: string | number) => void,
 	ms: string | number = 0,
+	{
+		getter = (value) => value,
+		setter = (value) => value,
+	}: {
+		getter?: (value: string | number) => string | number
+		setter?: (value: string | number) => string | number
+	} = {},
 ): Ref {
 	let timeout: NodeJS.Timeout
 
@@ -12,13 +19,13 @@ export function useDebouncedInput(
 	}
 
 	return computed({
-		get: () => modelValue?.value,
+		get: () => getter(modelValue?.value),
 		set: (value) => {
 			if (timeout) {
 				clearTimeout(timeout)
 			}
 			timeout = setTimeout(() => {
-				emit('update:modelValue', value)
+				emit('update:modelValue', setter(value))
 			}, ms as number)
 		},
 	})

package/src/composables/useDefaults.ts

@@ -0,0 +1,89 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+
+type VueProp =
+	| StringConstructor
+	| NumberConstructor
+	| ObjectConstructor
+	| FunctionConstructor
+	| SymbolConstructor
+	| ArrayConstructor
+	| BooleanConstructor
+	| PropType<unknown>
+
+export function useDefaults<Definition>(
+	componentName: string,
+	propsDefinition: Definition,
+	props: Readonly<ExtractPropTypes<Definition>>,
+) {
+	const volver = useVolver()
+
+	const volverComponentDefaults = computed(() => {
+		if (!volver || !volver.defaults.value?.[componentName]) {
+			return undefined
+		}
+		return volver.defaults.value[componentName]
+	})
+
+	return computed(() => {
+		if (volverComponentDefaults.value === undefined) {
+			return props
+		}
+		const componentDefaults = volverComponentDefaults.value
+		const simplifiedPropsDefinition = propsDefinition as {
+			[key: string]:
+				| VueProp
+				| VueProp[]
+				| { type: VueProp | VueProp[]; default?: unknown }
+		}
+		const simplifiedProps = props as Record<string, unknown>
+		return Object.keys(simplifiedPropsDefinition).reduce((acc, key) => {
+			const propValue = simplifiedProps[key]
+			acc[key] = propValue
+			if (key in componentDefaults) {
+				// array of types
+				if (Array.isArray(simplifiedPropsDefinition[key])) {
+					const typeArray = simplifiedPropsDefinition[
+						key
+					] as VueProp[]
+					if (typeArray.length) {
+						const typeFunction = typeArray[0] as <T>() => T
+						if (typeFunction === propValue) {
+							acc[key] = componentDefaults[key]
+						}
+					}
+				}
+				// single type
+				if (typeof simplifiedPropsDefinition[key] === 'function') {
+					const typeFunction = simplifiedPropsDefinition[key] as <
+						T,
+					>() => T
+					if (typeFunction() === propValue) {
+						acc[key] = componentDefaults[key]
+					}
+				}
+				// object with type and default
+				if (typeof simplifiedPropsDefinition[key] === 'object') {
+					let defaultValue = (
+						simplifiedPropsDefinition[key] as { default: unknown }
+					).default
+					if (typeof defaultValue === 'function') {
+						defaultValue = defaultValue()
+					}
+					if (typeof defaultValue === 'object') {
+						if (
+							JSON.stringify(defaultValue) ===
+							JSON.stringify(propValue)
+						) {
+							acc[key] = componentDefaults[key]
+						}
+					} else if (defaultValue === propValue) {
+						acc[key] = componentDefaults[key]
+					}
+				}
+			}
+			return acc
+		}, {} as Record<string, unknown>) as Readonly<
+			ExtractPropTypes<Definition>
+		>
+	})
+}

package/src/composables/useModifiers.ts

@@ -1,6 +1,6 @@
 import type { Ref } from 'vue'
 
-export function useBemModifiers(
+export function useModifiers(
 	prefix: string,
 	modifiers?: Ref<string | string[] | unknown | unknown[] | undefined>,
 	others?: Ref<Record<string, boolean>>,
@@ -10,17 +10,16 @@ export function useBemModifiers(
 			[prefix]: true,
 		}
 		// props modifiers
-		let modifiersArray = unref(modifiers)
+		const modifiersArray =
+			typeof modifiers?.value === 'string'
+				? modifiers.value.split(' ')
+				: modifiers?.value
 		if (modifiersArray) {
-			if (
-				!Array.isArray(modifiersArray) &&
-				typeof modifiersArray === 'string'
-			) {
-				modifiersArray = modifiersArray.split(' ')
-			}
 			if (Array.isArray(modifiersArray)) {
 				modifiersArray.forEach((modifier) => {
-					toReturn[`${prefix}--${modifier}`] = true
+					if (modifier) {
+						toReturn[`${prefix}--${modifier}`] = true
+					}
 				})
 			}
 		}

package/src/composables/useOptions.ts

@@ -1,4 +1,4 @@
-import type { Option } from '@/types/generic'
+import type { Option } from '../types/generic'
 
 // eslint-disable-next-line
 export function useOptions(props: any) {

package/src/composables/useVolver.ts

@@ -1,5 +1,5 @@
-import { INJECTION_KEY_VOLVER } from '@/constants'
-import type { VolverInterface } from '@/Volver'
+import { INJECTION_KEY_VOLVER } from '../constants'
+import type { VolverInterface } from '../Volver'
 
 export function useVolver() {
 	return inject<VolverInterface>(INJECTION_KEY_VOLVER)

package/src/constants.ts

@@ -23,6 +23,42 @@ export enum Position {
 	after = 'after',
 }
 
+export enum ButtonType {
+	button = 'button',
+	submit = 'submit',
+	reset = 'reset',
+}
+
+export enum ActionTag {
+	nuxtLink = 'nuxt-link',
+	routerLink = 'router-link',
+	a = 'a',
+	button = 'button',
+}
+
+export enum ActionRoles {
+	button = 'button',
+	link = 'link',
+	menuitem = 'menuitem',
+}
+
+export enum DropdownRole {
+	listbox = 'listbox',
+	menu = 'menu',
+}
+
+export enum DropdownItemRole {
+	option = 'option',
+	presentation = 'presentation',
+}
+
+export enum AnchorTarget {
+	_blank = '_blank',
+	_self = '_self',
+	_parent = '_parent',
+	_top = '_top',
+}
+
 // volver
 export const INJECTION_KEY_VOLVER = Symbol.for('volver')
 

package/src/directives/index.ts

@@ -1,4 +1,4 @@
-import tooltip from '@/directives/v-tooltip'
+import tooltip from '../directives/v-tooltip'
 
 export default {
 	tooltip,

package/src/directives/v-tooltip.ts

@@ -1,6 +1,6 @@
 import { render, type Directive, type DirectiveBinding } from 'vue'
-import VvTooltip from '@/components/VvTooltip/VvTooltip.vue'
-import type { Side } from '@/constants'
+import VvTooltip from '../components/VvTooltip/VvTooltip.vue'
+import type { Side } from '../constants'
 
 const tooltip: Directive = {
 	beforeMount(el: HTMLElement, binding: DirectiveBinding) {

package/src/index.ts

@@ -1,8 +1,6 @@
 import VolverPlugin from './Volver'
 import type { Volver } from './Volver'
 
-// export all components as vue plugin
-export * from './components/index'
 export { VolverPlugin }
 
 // https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties