@volverjs/ui-vue 0.0.3-beta.3 → 0.0.3

package/src/components/VvTextarea/VvTextarea.vue

@@ -6,7 +6,6 @@
 
 <script setup lang="ts">
 	import type { TextareaHTMLAttributes } from 'vue'
-	import { nanoid } from 'nanoid'
 	import HintSlotFactory from '@/components/common/HintSlot'
 	import VvIcon from '@/components/VvIcon/VvIcon.vue'
 	import { VvTextareaProps, VvTextareaEvents } from '@/components/VvTextarea'
@@ -21,6 +20,7 @@
 
 	// data
 	const {
+		id,
 		icon,
 		iconPosition,
 		label,
@@ -29,8 +29,9 @@
 		valid,
 		invalid,
 		loading,
+		modifiers,
 	} = toRefs(props)
-	const hasId = computed(() => String(props.id || nanoid()))
+	const hasId = useUniqueId(id)
 	const hasDescribedBy = computed(() => `${hasId.value}-hint`)
 	// BUG - https://www.samanthaming.com/tidbits/88-css-placeholder-shown/
 	const hasPlaceholder = computed(() =>
@@ -41,7 +42,7 @@
 	const localModelValue = useDebouncedInput(modelValue, emit, props.debounce)
 
 	// icons
-	const { hasIcon, hasIconLeft, hasIconRight } = useComponentIcon(
+	const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
 		icon,
 		iconPosition,
 	)
@@ -88,20 +89,23 @@
 	const { HintSlot, hasHint, hasInvalid } = HintSlotFactory(props, slots)
 
 	// styles
-	const { bemCssClasses } = useBemModifiers('vv-textarea', {
-		modifiers: props.modifiers,
-		valid: valid,
-		invalid: invalid,
-		loading,
-		disabled: props.disabled,
-		readonly: props.readonly,
-		iconLeft: hasIconLeft,
-		iconRight: hasIconRight,
-		floating: props.floating && !isEmpty(props.label),
-		dirty: isDirty,
-		focused: focused,
-		resizable: props.resizable,
-	})
+	const bemCssClasses = useBemModifiers(
+		'vv-textarea',
+		modifiers,
+		computed(() => ({
+			valid: valid.value,
+			invalid: invalid.value,
+			loading: loading.value,
+			disabled: props.disabled,
+			readonly: props.readonly,
+			'icon-before': hasIconBefore.value,
+			'icon-after': hasIconAfter.value,
+			floating: props.floating && !isEmpty(props.label),
+			dirty: isDirty.value,
+			focused: focused.value,
+			resizable: props.resizable,
+		})),
+	)
 
 	// attrs
 	const hasAttrs = computed(
@@ -154,25 +158,34 @@
 			{{ label }}
 		</label>
 		<div class="vv-textarea__wrapper">
-			<!-- @slot Slot to replace left icon -->
-			<slot name="before" v-bind="slotProps">
+			<!-- @slot Slot to replace icon before textarea -->
+			<div v-if="$slots.before" class="vv-textarea__input-before">
+				<!-- @slot Slot before input -->
+				<slot name="before" v-bind="slotProps" />
+			</div>
+			<div class="vv-textarea__inner">
+				<VvIcon
+					v-if="hasIconBefore"
+					class="vv-textarea__icon"
+					v-bind="hasIcon"
+				/>
+				<textarea
+					:id="hasId"
+					ref="textarea"
+					v-model="localModelValue"
+					v-bind="hasAttrs"
+					@keyup="emit('keyup', $event)"
+				/>
 				<VvIcon
-					v-if="hasIconLeft"
-					class="vv-textarea__icon-left"
+					v-if="hasIconAfter"
+					class="vv-textarea__icon vv-textarea__icon-after"
 					v-bind="hasIcon"
 				/>
-			</slot>
-			<textarea
-				:id="hasId"
-				ref="textarea"
-				v-model="localModelValue"
-				v-bind="hasAttrs"
-				@keyup="emit('keyup', $event)"
-			/>
-			<slot name="after" v-bind="slotProps">
-				<VvIcon v-if="hasIconRight" v-bind="hasIcon" />
-			</slot>
-			<!-- @slot Slot to replace right icon -->
+			</div>
+			<div v-if="$slots.after" class="vv-textarea__input-after">
+				<!-- @slot Slot after input -->
+				<slot name="after" v-bind="slotProps" />
+			</div>
 			<span v-if="count" class="vv-textarea__limit">
 				<!-- @slot Slot to replace count -->
 				<slot name="count" v-bind="slotProps">

package/src/components/VvTooltip/VvTooltip.vue

@@ -1,17 +1,23 @@
 <script setup lang="ts">
-import { VvTooltipProps } from '@/components/VvTooltip'
+	import { VvTooltipProps } from '@/components/VvTooltip'
 
-const props = defineProps(VvTooltipProps)
-const { modifiers } = toRefs(props)
+	const props = defineProps(VvTooltipProps)
+	const { modifiers } = toRefs(props)
 
-// styles
-const { bemCssClasses: tooltipClass } = useBemModifiers('vv-tooltip', {
-	modifiers
-})
+	// styles
+	const bemCssClasses = useBemModifiers(
+		'vv-tooltip',
+		modifiers,
+		computed(() => ({
+			[props.position]: true,
+		})),
+	)
 </script>
 
 <template>
-	<span :class="[tooltipClass, `vv-tooltip--${props.position}`]" role="tooltip" inert>
-		<slot />
+	<span :class="bemCssClasses" role="tooltip" inert>
+		<slot>
+			{{ value }}
+		</slot>
 	</span>
-</template>
+</template>

package/src/components/VvTooltip/index.ts

@@ -1,21 +1,18 @@
+import { Side } from '@/constants'
 import { ModifiersProps } from '@/props'
 import type { PropType } from 'vue'
 
-export enum TooltipPosition {
-	left = 'left',
-	right = 'right',
-	top = 'top',
-	bottom = 'bottom'
-}
-
 export const VvTooltipProps = {
 	...ModifiersProps,
 	/**
 	 * Define the tooltip position
-	 * @default TooltipPosition.bottom
+	 * @default Side.bottom
 	 */
 	position: {
-		type: String as PropType<TooltipPosition>,
-		default: TooltipPosition.bottom
-	}
+		type: String as PropType<Side>,
+		default: Side.bottom,
+	},
+	value: {
+		type: String,
+	},
 }

package/src/components/common/HintSlot.ts

@@ -186,10 +186,11 @@ export function HintSlotFactory(
 					return h(
 						'small',
 						{
-							role:
-								this.hasInvalid || this.hasValid
-									? 'alert'
-									: undefined,
+							role: this.hasInvalid
+								? 'alert'
+								: this.hasValid
+								? 'status'
+								: undefined,
 						},
 						this.hintContent,
 					)

package/src/composables/dropdown/useInjectDropdown.ts

@@ -0,0 +1,51 @@
+import type { Ref } from 'vue'
+import type { Emitter, EventType } from 'mitt'
+import type { DropdownItemRole } from '@/components/VvDropdown/'
+import {
+	INJECTION_KEY_DROPDOWN_TRIGGER,
+	INJECTION_KEY_DROPDOWN_ACTION,
+	INJECTION_KEY_DROPDOWN_ITEM,
+} from '@/constants'
+
+/**
+ * Injects dropdown reference and the event bus
+ */
+export function useInjectedDropdownTrigger():
+	| {
+			id: Ref<string | number>
+			reference: Ref<HTMLElement | null>
+			bus: Emitter<Record<EventType, unknown>>
+			expanded: Ref<boolean>
+			aria: Ref<{
+				'aria-controls': string
+				'aria-haspopup': boolean
+				'aria-expanded': boolean
+			}>
+	  }
+	| Record<string, never> {
+	return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {})
+}
+
+/**
+ * Injects dropdown item role
+ */
+export function useInjectedDropdownItem():
+	| {
+			role: Ref<DropdownItemRole>
+			expanded: Ref<boolean>
+	  }
+	| Record<string, never> {
+	return inject(INJECTION_KEY_DROPDOWN_ITEM, {})
+}
+
+/**
+ * Injects dropdown action role
+ */
+export function useInjectedDropdownAction():
+	| {
+			role: string
+			expanded: Ref<boolean>
+	  }
+	| Record<string, never> {
+	return inject(INJECTION_KEY_DROPDOWN_ACTION, {})
+}

package/src/composables/dropdown/useProvideDropdown.ts

@@ -0,0 +1,97 @@
+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'
+
+/**
+ * Share the dropdown reference and the event bus with all its children.
+ * @param {Ref<HTMLElement | null>} reference the dropdown reference
+ */
+export function useProvideDropdownTrigger({
+	reference,
+	id,
+	expanded,
+	aria,
+}: {
+	reference: Ref<HTMLElement | null>
+	id: Ref<string | number>
+	expanded: Ref<boolean>
+	aria: Ref<{
+		'aria-controls': string
+		'aria-haspopup': boolean
+		'aria-expanded': boolean
+	}>
+}) {
+	const bus = mitt()
+	const component = defineComponent({
+		name: 'VvDropdownTriggerProvider',
+		provide() {
+			return {
+				[INJECTION_KEY_DROPDOWN_TRIGGER]: {
+					reference,
+					id,
+					expanded,
+					aria,
+					bus,
+				},
+			}
+		},
+		setup() {
+			return {}
+		},
+		render() {
+			return h(Fragment, {}, this.$slots.default?.())
+		},
+	})
+
+	return {
+		bus,
+		component,
+	}
+}
+
+/**
+ * Share the dropdown item role with all its children.
+ * @param {Ref<string>} role the dropdown item role
+ */
+export function useProvideDropdownItem({
+	role,
+	expanded,
+}: {
+	role: Ref<DropdownRole>
+	expanded: Ref<boolean>
+}) {
+	const itemRole = computed(() =>
+		role.value === DROPDOWN_ROLES[0]
+			? DROPDOWN_ITEM_ROLES[0]
+			: DROPDOWN_ITEM_ROLES[1],
+	)
+	provide(INJECTION_KEY_DROPDOWN_ITEM, {
+		role: itemRole,
+		expanded,
+	})
+	return { itemRole }
+}
+
+/**
+ * Share the dropdown item role with all its children.
+ * @param {Ref<string>} role the dropdown item role
+ */
+export function useProvideDropdownAction({
+	expanded,
+}: {
+	expanded: Ref<boolean>
+}) {
+	provide(INJECTION_KEY_DROPDOWN_ACTION, {
+		role: 'menuitem',
+		expanded,
+	})
+}

package/src/composables/group/useInjectedGroupState.ts

@@ -1,14 +1,14 @@
 import type { Ref } from 'vue'
-import type IGroupState from '@/composables/group/types/IGroupState'
+import type GroupState from '@/types/group'
 
 /**
  * Injects a group state
  */
-export function useInjectedGroupState<TGroup extends IGroupState>(
-	groupKey: string,
+export function useInjectedGroupState<GroupStateType extends GroupState>(
+	groupKey: string | symbol,
 ) {
 	// Get group state
-	const group = inject<Ref<TGroup> | undefined>(groupKey, undefined)
+	const group = inject<Ref<GroupStateType> | undefined>(groupKey, undefined)
 
 	// Check if component is in group
 	const isInGroup = computed(() => !isEmpty(group))
@@ -17,7 +17,7 @@ export function useInjectedGroupState<TGroup extends IGroupState>(
 	 * Get a group or local property
 	 */
 	function getGroupOrLocalRef<PropsType extends object>(
-		propName: keyof TGroup,
+		propName: keyof GroupStateType,
 		props: PropsType,
 		emit?: (event: string, ...args: unknown[]) => void,
 	) {
@@ -27,7 +27,7 @@ export function useInjectedGroupState<TGroup extends IGroupState>(
 				get() {
 					return groupPropValue?.value
 				},
-				set(value) {
+				set(value: unknown) {
 					groupPropValue.value = value
 				},
 			})
@@ -37,7 +37,7 @@ export function useInjectedGroupState<TGroup extends IGroupState>(
 			get() {
 				return propRef.value
 			},
-			set(value) {
+			set(value: unknown) {
 				if (emit) emit(`update:${propName as string}`, value)
 			},
 		})

package/src/composables/group/useProvideGroupState.ts

@@ -1,11 +1,11 @@
-import type IGroupState from '@/composables/group/types/IGroupState'
+import type GroupState from '@/types/group'
 
 /**
  * Share part of the state of the component with all its children.
  * @param {IGroupState} groupState the group state with all group options
  */
-export function useProvideGroupState<TGroup extends IGroupState>(
-	groupState: TGroup,
+export function useProvideGroupState<GroupStateType extends GroupState>(
+	groupState: GroupStateType,
 ) {
 	if (
 		Object.keys(groupState).some(

package/src/composables/useComponentIcon.ts

@@ -0,0 +1,41 @@
+import { Position, Side } from '@/constants'
+import type { Ref } from 'vue'
+
+export function useComponentIcon(
+	icon: Ref<string | object | undefined> | undefined,
+	iconPosition: Ref<string>,
+) {
+	const hasIconBefore = computed(() =>
+		Boolean(icon?.value && iconPosition.value === Position.before),
+	)
+	const hasIconAfter = computed(() =>
+		Boolean(icon?.value && iconPosition.value === Position.after),
+	)
+	const hasIconLeft = computed(() =>
+		Boolean(icon?.value && iconPosition.value === Side.left),
+	)
+	const hasIconRight = computed(() =>
+		Boolean(icon?.value && iconPosition.value === Side.right),
+	)
+	const hasIconTop = computed(() =>
+		Boolean(icon?.value && iconPosition.value === Side.top),
+	)
+	const hasIconBottom = computed(() =>
+		Boolean(icon?.value && iconPosition.value === Side.bottom),
+	)
+	const hasIcon = computed(() => {
+		if (typeof icon?.value === 'string') {
+			return { name: icon?.value }
+		}
+		return icon?.value
+	})
+	return {
+		hasIcon,
+		hasIconLeft,
+		hasIconRight,
+		hasIconTop,
+		hasIconBottom,
+		hasIconBefore,
+		hasIconAfter,
+	}
+}

package/src/composables/useModifiers.ts

@@ -1,97 +1,37 @@
 import type { Ref } from 'vue'
 
-interface IBemModifiers {
-	[key: string]:
-		| Ref<boolean>
-		| Ref<string | unknown[] | undefined>
-		| boolean
-		| string
-		| string[]
-		| undefined
-		| unknown[]
-	modifiers?:
-		| Ref<string | unknown[] | undefined>
-		| undefined
-		| string[]
-		| string
-		| unknown[]
-}
-
-export function useBemModifiers(prefix: string, modifiers: IBemModifiers) {
-	const baseCssClass: object = { [`${prefix}`]: true }
-
-	const bemCssClasses = computed(() => {
-		return (
-			Object.keys(modifiers).reduce((acc, item) => {
-				const _modifier =
-					unref(modifiers[item] as Ref<string | string[]>) || false
+export function useBemModifiers(
+	prefix: string,
+	modifiers?: Ref<string | string[] | unknown | unknown[] | undefined>,
+	others?: Ref<Record<string, boolean>>,
+) {
+	return computed(() => {
+		const toReturn: Record<string, boolean> = {
+			[prefix]: true,
+		}
+		// props modifiers
+		let modifiersArray = unref(modifiers)
+		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) return acc
+		// others modifiers
+		if (others) {
+			Object.keys(others.value).forEach((key) => {
+				toReturn[`${prefix}--${key}`] = unref(others.value[key])
+			})
+		}
 
-				if (item === 'modifiers') {
-					const _reduceModifiers = Array.isArray(_modifier)
-						? _modifier
-						: _modifier.split(' ')
-					return {
-						...acc,
-						..._reduceModifiers.reduce(
-							(accVariant: object, currentVariant: string) => {
-								return {
-									...accVariant,
-									[`${prefix}--${kebabCase(currentVariant)}`]:
-										true,
-								}
-							},
-							{},
-						),
-					}
-				} else {
-					return {
-						...acc,
-						[`${prefix}--${kebabCase(item)}`]: _modifier,
-					}
-				}
-			}, baseCssClass) || {}
-		)
+		return toReturn
 	})
-
-	return {
-		bemCssClasses,
-	}
-}
-
-export function toBem(prefix: string, modifiers: IBemModifiers) {
-	const baseCssClass: object = { [`${prefix}`]: true }
-
-	return (
-		Object.keys(modifiers).reduce((acc, k) => {
-			const _modifier = unref(modifiers[k] as Ref<unknown>) || false
-
-			if (!_modifier) return acc
-
-			if (k === 'modifiers') {
-				const _reduceModifiers = Array.isArray(_modifier)
-					? _modifier
-					: [_modifier]
-				return {
-					...acc,
-					..._reduceModifiers.reduce(
-						(accVariant: object, currentVariant: string) => {
-							return {
-								...accVariant,
-								[`${prefix}--${kebabCase(currentVariant)}`]:
-									true,
-							}
-						},
-						{},
-					),
-				}
-			} else {
-				return {
-					...acc,
-					[`${prefix}--${kebabCase(k)}`]: _modifier,
-				}
-			}
-		}, baseCssClass) || {}
-	)
 }

package/src/composables/useOptions.ts

@@ -2,7 +2,7 @@ import type { Option } from '@/types/generic'
 
 // eslint-disable-next-line
 export function useOptions(props: any) {
-	const { options, labelKey, valueKey } = toRefs(props)
+	const { options, labelKey, valueKey, disabledKey } = toRefs(props)
 
 	// eslint-disable-next-line
 	const getOptionLabel = (option: string | Option) => {
@@ -13,8 +13,7 @@ export function useOptions(props: any) {
 			: option[labelKey.value]
 	}
 
-	// eslint-disable-next-line
-	const getOptionValue = (option: any) => {
+	const getOptionValue = (option: string | Option) => {
 		if (typeof option !== 'object' && option !== null) return option
 
 		return typeof valueKey.value === 'function'
@@ -22,9 +21,18 @@ export function useOptions(props: any) {
 			: option[valueKey.value]
 	}
 
+	const getOptionDisabled = (option: string | Option) => {
+		if (typeof option !== 'object' && option !== null) return false
+
+		return typeof disabledKey.value === 'function'
+			? disabledKey.value(option)
+			: option[disabledKey.value]
+	}
+
 	return {
 		options,
 		getOptionLabel,
 		getOptionValue,
+		getOptionDisabled,
 	}
 }

package/src/composables/useUniqueId.ts

@@ -0,0 +1,5 @@
+import { nanoid } from 'nanoid'
+import type { Ref } from 'vue'
+
+export const useUniqueId = (id?: Ref<string | number | undefined>) =>
+	computed(() => String(id?.value || nanoid()))

package/src/composables/useVolver.ts

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

package/src/constants.ts

@@ -1,5 +1,38 @@
-// Symbol not working after transpiling
-export const VV_BUTTON_GROUP = 'VV_BUTTON_GROUP'
-export const VV_RADIO_GROUP = 'VV_RADIO_GROUP'
-export const VV_CHECK_GROUP = 'VV_CHECK_GROUP'
-export const VV_ACCORDION_GROUP = 'VV_ACCORDION_GROUP'
+export const DEFAULT_ICONIFY_PROVIDER = 'vv'
+
+export enum Side {
+	left = 'left',
+	right = 'right',
+	top = 'top',
+	bottom = 'bottom',
+}
+
+export enum Placement {
+	topStart = 'top-start',
+	topEnd = 'top-end',
+	bottomStart = 'bottom-start',
+	bottomEnd = 'bottom-end',
+	leftStart = 'left-start',
+	leftEnd = 'left-end',
+	rightStart = 'right-start',
+	rightEnd = 'right-end',
+}
+
+export enum Position {
+	before = 'before',
+	after = 'after',
+}
+
+// volver
+export const INJECTION_KEY_VOLVER = Symbol.for('volver')
+
+// groups
+export const INJECTION_KEY_BUTTON_GROUP = Symbol.for('buttonGroup')
+export const INJECTION_KEY_RADIO_GROUP = Symbol.for('radioGroup')
+export const INJECTION_KEY_CHECK_GROUP = Symbol.for('checkGroup')
+export const INJECTION_KEY_ACCORDION_GROUP = Symbol.for('accordionGroup')
+
+// dropdown
+export const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for('dropdownTrigger')
+export const INJECTION_KEY_DROPDOWN_ITEM = Symbol.for('dropdownItem')
+export const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for('dropdownAction')