@volverjs/ui-vue 0.0.10-beta.7 → 0.0.10-beta.70

package/src/components/VvTooltip/index.ts

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

package/src/components/common/HintSlot.ts

@@ -1,175 +0,0 @@
-import type { ExtractPropTypes, Slots } from 'vue'
-import type { Ref } from 'vue'
-
-/**
- * Merge array of string
- * @param {string[] | string} items
- * @returns {string}
- */
-function joinLines(items: string[] | string | unknown[] | undefined) {
-	if (Array.isArray(items)) {
-		return items.filter((item) => isString(item)).join(' ')
-	}
-	return items
-}
-
-export type HintSlotProps = Readonly<
-	ExtractPropTypes<{
-		hintLabel: {
-			type: StringConstructor
-			default: ''
-			required: true
-		}
-		modelValue: unknown
-		valid: BooleanConstructor
-		validLabel: (StringConstructor | ArrayConstructor)[]
-		invalid: BooleanConstructor
-		invalidLabel: (StringConstructor | ArrayConstructor)[]
-		loading: BooleanConstructor
-		loadingLabel: StringConstructor
-	}>
->
-
-/**
- * Return a vue component (HintSlot) to render and manage hint, errors, valid, loading state and messages
- * @param {HintSlotProps} parentProps vue props
- * @param {Slots} parentSlots vue slots
- * @returns {Component} vue component
- */
-export function HintSlotFactory(
-	propsOrRef: HintSlotProps | Ref<HintSlotProps>,
-	slots: Slots,
-) {
-	const props = computed(() => {
-		if (isRef(propsOrRef)) {
-			return propsOrRef.value
-		}
-		return propsOrRef
-	})
-
-	// label
-	const invalidLabel = computed(() => joinLines(props.value.invalidLabel))
-	const validLabel = computed(() => joinLines(props.value.validLabel))
-	const loadingLabel = computed(() => props.value.loadingLabel)
-	const hintLabel = computed(() => props.value.hintLabel)
-
-	// type
-	const hasLoadingLabelOrSlot = computed(() =>
-		Boolean(props.value.loading && (slots.loading || loadingLabel.value)),
-	)
-	const hasInvalidLabelOrSlot = computed(
-		() =>
-			!hasLoadingLabelOrSlot.value &&
-			Boolean(
-				props.value.invalid && (slots.invalid || invalidLabel.value),
-			),
-	)
-	const hasValidLabelOrSlot = computed(
-		() =>
-			!hasLoadingLabelOrSlot.value &&
-			!hasInvalidLabelOrSlot.value &&
-			Boolean(props.value.valid && (slots.valid || validLabel.value)),
-	)
-	const hasHintLabelOrSlot = computed(
-		() =>
-			!hasLoadingLabelOrSlot.value &&
-			!hasInvalidLabelOrSlot.value &&
-			!hasValidLabelOrSlot.value &&
-			Boolean(slots.hint || hintLabel.value),
-	)
-	const isVisible = computed(
-		() =>
-			hasInvalidLabelOrSlot.value ||
-			hasValidLabelOrSlot.value ||
-			hasLoadingLabelOrSlot.value ||
-			hasHintLabelOrSlot.value,
-	)
-	const hintSlotScope = computed(() => ({
-		modelValue: props.value.modelValue,
-		valid: props.value.valid,
-		invalid: props.value.invalid,
-		loading: props.value.loading,
-	}))
-	// component
-	const HintSlot = defineComponent({
-		name: 'HintSlot',
-		props: {
-			tag: {
-				type: String,
-				default: 'small',
-			},
-		},
-		setup() {
-			return {
-				isVisible,
-				invalidLabel,
-				validLabel,
-				loadingLabel,
-				hintLabel,
-				hasInvalidLabelOrSlot,
-				hasValidLabelOrSlot,
-				hasLoadingLabelOrSlot,
-				hasHintLabelOrSlot,
-			}
-		},
-		render() {
-			if (this.isVisible) {
-				let role
-				if (this.hasInvalidLabelOrSlot) {
-					role = 'alert'
-				}
-				if (this.hasValidLabelOrSlot) {
-					role = 'status'
-				}
-				if (this.hasLoadingLabelOrSlot) {
-					return h(
-						this.tag,
-						{
-							role,
-						},
-						this.$slots.loading?.() ?? this.loadingLabel,
-					)
-				}
-				if (this.hasInvalidLabelOrSlot) {
-					return h(
-						this.tag,
-						{
-							role,
-						},
-						this.$slots.invalid?.() ??
-							this.$slots.invalid ??
-							this.invalidLabel,
-					)
-				}
-				if (this.hasValidLabelOrSlot) {
-					return h(
-						this.tag,
-						{
-							role,
-						},
-						this.$slots.valid?.() ?? this.validLabel,
-					)
-				}
-				return h(
-					this.tag,
-					{
-						role,
-					},
-					this.$slots.hint?.() ?? this.$slots.hint ?? this.hintLabel,
-				)
-			}
-			return null
-		},
-	})
-
-	return {
-		hasInvalidLabelOrSlot,
-		hasHintLabelOrSlot,
-		hasValidLabelOrSlot,
-		hasLoadingLabelOrSlot,
-		hintSlotScope,
-		HintSlot,
-	}
-}
-
-export default HintSlotFactory

package/src/components/index.ts

@@ -1,24 +0,0 @@
-export { default as VvAccordion } from './VvAccordion/VvAccordion.vue'
-export { default as VvAccordionGroup } from './VvAccordionGroup/VvAccordionGroup.vue'
-export { default as VvAction } from './VvAction/VvAction.vue'
-export { default as VvAlert } from './VvAlert/VvAlert.vue'
-export { default as VvBadge } from './VvBadge/VvBadge.vue'
-export { default as VvBreadcrumb } from './VvBreadcrumb/VvBreadcrumb.vue'
-export { default as VvButton } from './VvButton/VvButton.vue'
-export { default as VvButtonGroup } from './VvButtonGroup/VvButtonGroup.vue'
-export { default as VvCard } from './VvCard/VvCard.vue'
-export { default as VvCheckbox } from './VvCheckbox/VvCheckbox.vue'
-export { default as VvCheckboxGroup } from './VvCheckboxGroup/VvCheckboxGroup.vue'
-export { default as VvCombobox } from './VvCombobox/VvCombobox.vue'
-export { default as VvDialog } from './VvDialog/VvDialog.vue'
-export { default as VvDropdown } from './VvDropdown/VvDropdown.vue'
-export { default as VvIcon } from './VvIcon/VvIcon.vue'
-export { default as VvInputText } from './VvInputText/VvInputText.vue'
-export { default as VvNav } from './VvNav/VvNav.vue'
-export { default as VvProgress } from './VvProgress/VvProgress.vue'
-export { default as VvRadio } from './VvRadio/VvRadio.vue'
-export { default as VvRadioGroup } from './VvRadioGroup/VvRadioGroup.vue'
-export { default as VvSelect } from './VvSelect/VvSelect.vue'
-export { default as VvTab } from './VvTab/VvTab.vue'
-export { default as VvTextarea } from './VvTextarea/VvTextarea.vue'
-export { default as VvTooltip } from './VvTooltip/VvTooltip.vue'

package/src/composables/alert/useAlert.ts

@@ -1,103 +0,0 @@
-import {
-	DEFAULT_ALERT_AUTO_CLOSE,
-	DEFAULT_ALERT_DISMISSABLE,
-	DEFAULT_ALERT_GROUP,
-	DEFAULT_ALERT_MODIFIERS,
-	DEFAULT_ALERT_INFO_ICON,
-	DefaultAlertIconMap,
-} from '@/constants'
-import type { Alert, AlertModifiers } from '@/types/alert'
-
-const groups = reactive(
-	new Map<string, Map<string, Alert>>([
-		[DEFAULT_ALERT_GROUP, new Map<string, Alert>()],
-	]),
-)
-
-/**
- * @description Composable to access alert groups, alerts and functions to add, remove and get alerts by group.
- * @example
- *  const { groups, alerts, addAlert, removeAlert, getAlerts } = useAlert()
- *  addAlert({
- *      title: 'Success!',
- *      modifiers: 'success',
- *  })
- *
- *  `<vv-alert-group :items="alerts" :onClose="removeAlert" />`
- *
- *  @returns  {
- *      alerts: ComputedRef<Alert[]> reactive list of alerts default group,
- *      groups: ReactiveRef<Map<string, Map<string, Alert>>>,
- *      addAlert: Function to add alert,
- *      removeAlert: Function to remove alert,
- *      getAlerts: Function to get alerts by group
- *  }
- */
-export const useAlert = () => {
-	const addAlert = (
-		{
-			id = crypto.randomUUID(),
-			group = DEFAULT_ALERT_GROUP,
-			title,
-			icon = DEFAULT_ALERT_INFO_ICON,
-			content,
-			footer,
-			modifiers = DEFAULT_ALERT_MODIFIERS,
-			dismissable = DEFAULT_ALERT_DISMISSABLE,
-			autoClose = DEFAULT_ALERT_AUTO_CLOSE,
-		} = {} as Partial<Alert>,
-	) => {
-		if (!groups.has(group)) {
-			groups.set(group, new Map<string, Alert>())
-		}
-		const groupMap = groups.get(group)
-		const normalizedModifiers =
-			typeof modifiers === 'string' ? modifiers.split(' ') : modifiers
-
-		if (!icon) {
-			const alertModifier = normalizedModifiers.find((modifier) =>
-				DefaultAlertIconMap.has(modifier as AlertModifiers),
-			) as AlertModifiers | undefined
-
-			if (alertModifier) {
-				icon = DefaultAlertIconMap.get(alertModifier) as string
-			}
-		}
-		groupMap?.set(id.toString(), {
-			id,
-			group,
-			title,
-			icon,
-			content,
-			footer,
-			modifiers,
-			dismissable,
-			autoClose,
-			timestamp: Date.now(),
-		})
-	}
-
-	const removeAlert = (id: string | number, group = DEFAULT_ALERT_GROUP) => {
-		const groupMap = groups.get(group)
-		groupMap?.delete(id.toString())
-	}
-
-	const getAlerts = (group = DEFAULT_ALERT_GROUP) => {
-		return computed(() => {
-			const groupMap = groups.get(group)
-			return groupMap && groupMap instanceof Map
-				? Array.from(groupMap?.values()).sort(
-						(a, b) => a.timestamp - b.timestamp,
-				  )
-				: []
-		})
-	}
-
-	return {
-		groups,
-		alerts: getAlerts(),
-		addAlert,
-		removeAlert,
-		getAlerts,
-	}
-}

package/src/composables/alert/useInjectAlert.ts

@@ -1,8 +0,0 @@
-import { INJECTION_KEY_ALERT_GROUP } from '../../constants'
-
-/**
- * Injects alert group name
- */
-export function useInjectedAlertGroup() {
-	return inject(INJECTION_KEY_ALERT_GROUP, {})
-}

package/src/composables/alert/useProvideAlert.ts

@@ -1,23 +0,0 @@
-import type { Ref } from 'vue'
-import mitt from 'mitt'
-import { INJECTION_KEY_ALERT_GROUP } from '@/constants'
-
-/**
- * Share the alert group name with all its children.
- * @param {Ref<string | undefined>} name the alert group name
- */
-export function useProvideAlertGroup({
-	name,
-}: {
-	name: Ref<string | undefined>
-}) {
-	const bus = mitt<{
-		close: string
-	}>()
-	provide(INJECTION_KEY_ALERT_GROUP, {
-		name,
-		bus,
-	})
-
-	return bus
-}

package/src/composables/dropdown/useInjectDropdown.ts

@@ -1,26 +0,0 @@
-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() {
-	return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {})
-}
-
-/**
- * Injects dropdown item role
- */
-export function useInjectedDropdownItem() {
-	return inject(INJECTION_KEY_DROPDOWN_ITEM, {})
-}
-
-/**
- * Injects dropdown action role
- */
-export function useInjectedDropdownAction() {
-	return inject(INJECTION_KEY_DROPDOWN_ACTION, {})
-}

package/src/composables/dropdown/useProvideDropdown.ts

@@ -1,94 +0,0 @@
-import { type Ref, Fragment } from 'vue'
-import mitt from 'mitt'
-import {
-	INJECTION_KEY_DROPDOWN_TRIGGER,
-	INJECTION_KEY_DROPDOWN_ACTION,
-	INJECTION_KEY_DROPDOWN_ITEM,
-	DropdownRole,
-	DropdownItemRole,
-	ActionRoles,
-} 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<{
-		click: Event
-		mouseover: Event
-		mouseleave: Event
-	}>()
-	const component = defineComponent({
-		name: 'VvDropdownTriggerProvider',
-		setup() {
-			provide(INJECTION_KEY_DROPDOWN_TRIGGER, {
-				reference,
-				id,
-				expanded,
-				aria,
-				bus,
-			})
-		},
-		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 === DropdownRole.listbox
-			? DropdownItemRole.option
-			: DropdownItemRole.presentation,
-	)
-	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: ref(ActionRoles.menuitem),
-		expanded,
-	})
-}

package/src/composables/group/useInjectedGroupState.ts

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

package/src/composables/group/useProvideGroupState.ts

@@ -1,20 +0,0 @@
-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<GroupStateType extends GroupState>(
-	groupState: GroupStateType,
-) {
-	if (
-		Object.keys(groupState).some(
-			(k) => k !== 'key' && !isRef(groupState[k]),
-		)
-	)
-		throw Error("One or more groupState props aren't ref.")
-	provide(
-		groupState.key,
-		computed(() => groupState),
-	)
-}

package/src/composables/index.ts

@@ -1 +0,0 @@
-export { useAlert } from './alert/useAlert'

package/src/composables/useComponentFocus.ts

@@ -1,16 +0,0 @@
-import type { MaybeElement, MaybeElementRef } from '@vueuse/core'
-
-export function useComponentFocus(
-	inputTemplateRef: MaybeElementRef<MaybeElement>,
-	emit: (event: 'focus' | 'blur', value: unknown) => void,
-) {
-	const { focused } = useFocus(inputTemplateRef)
-
-	watch(focused, (newValue) => {
-		emit(newValue ? 'focus' : 'blur', unref(inputTemplateRef))
-	})
-
-	return {
-		focused,
-	}
-}

package/src/composables/useComponentIcon.ts

@@ -1,41 +0,0 @@
-import type { Ref } from 'vue'
-import { Position, Side } from '../constants'
-
-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/useDebouncedInput.ts

@@ -1,32 +0,0 @@
-import type { Ref } from 'vue'
-
-export function useDebouncedInput(
-	modelValue: Ref | undefined,
-	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
-
-	if (typeof ms === 'string') {
-		ms = parseInt(ms)
-	}
-
-	return computed({
-		get: () => getter(modelValue?.value),
-		set: (value) => {
-			if (timeout) {
-				clearTimeout(timeout)
-			}
-			timeout = setTimeout(() => {
-				emit('update:modelValue', setter(value))
-			}, ms as number)
-		},
-	})
-}