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

package/src/components/VvAccordionGroup/VvAccordionGroup.vue

@@ -1,115 +0,0 @@
-<script lang="ts">
-	export default {
-		name: 'VvAccordionGroup',
-	}
-</script>
-
-<script setup lang="ts">
-	import type { Ref } from 'vue'
-	import type { AccordionGroupState } from '../../types/group'
-	import { INJECTION_KEY_ACCORDION_GROUP } from '../../constants'
-	import VvAccordion from '../VvAccordion/VvAccordion.vue'
-	import { VvAccordionGroupProps, VvAccordionGroupEvents } from '.'
-
-	// props and emit
-	const props = defineProps(VvAccordionGroupProps)
-	const emit = defineEmits(VvAccordionGroupEvents)
-
-	// data
-	const { disabled, collapse, modifiers, itemModifiers, items, not } =
-		toRefs(props)
-	watchEffect(() => {
-		if (typeof props.modelValue === 'string' && collapse.value) {
-			// eslint-disable-next-line
-			console.warn(
-				`[VvAccordionGroup]: modelValue is a string but collapse is true.`,
-			)
-		}
-	})
-	let localModelValue: Ref<string[]> = ref([])
-	watch(
-		() => props.storeKey,
-		(newKey) => {
-			if (newKey) {
-				localModelValue = useStorage(newKey, localModelValue.value)
-			} else {
-				localModelValue = ref([])
-			}
-		},
-		{ immediate: true },
-	)
-	const modelValue = computed({
-		get: () => {
-			if (props.modelValue !== undefined) {
-				if (!collapse.value) {
-					return Array.isArray(props.modelValue)
-						? props.modelValue[0]
-						: props.modelValue
-				}
-				return props.modelValue
-			}
-			return !collapse.value
-				? localModelValue.value?.[0]
-				: localModelValue.value
-		},
-		set: (newValue) => {
-			if (props.modelValue !== undefined) {
-				if (
-					(Array.isArray(props.modelValue) || collapse.value) &&
-					!Array.isArray(newValue)
-				) {
-					newValue = [newValue]
-				}
-				return emit('update:modelValue', newValue)
-			}
-			localModelValue.value = Array.isArray(newValue)
-				? newValue
-				: [newValue]
-		},
-	})
-
-	// provide
-	useProvideGroupState<AccordionGroupState>({
-		key: INJECTION_KEY_ACCORDION_GROUP,
-		modelValue,
-		disabled,
-		collapse,
-		modifiers: itemModifiers,
-		not,
-	})
-
-	// styles
-	const bemCssClasses = useModifiers(
-		'vv-accordion-group',
-		modifiers,
-		computed(() => ({
-			disabled: disabled.value,
-		})),
-	)
-</script>
-
-<template>
-	<div :class="bemCssClasses">
-		<!-- @slot Default slot -->
-		<slot>
-			<VvAccordion
-				v-for="item in items"
-				:key="item.title"
-				v-bind="{
-					name: item.name,
-					title: item.title,
-					content: item.content,
-				}"
-			>
-				<template #header="data">
-					<!-- @slot Slot for accordion header -->
-					<slot v-bind="data" :name="`header::${item.name}`" />
-				</template>
-				<template #details="data">
-					<!-- @slot Slot for accordion details -->
-					<slot v-bind="data" :name="`details::${item.name}`" />
-				</template>
-			</VvAccordion>
-		</slot>
-	</div>
-</template>

package/src/components/VvAccordionGroup/index.ts

@@ -1,50 +0,0 @@
-import { ModifiersProps } from '@/props'
-
-export interface VvAccordionGroupItem {
-	title: string
-	content: string
-	name?: string
-	disabled?: boolean
-	modifiers?: string | string[]
-}
-
-export const VvAccordionGroupProps = {
-	...ModifiersProps,
-	/**
-	 * VModel
-	 */
-	modelValue: [String, Array],
-	/**
-	 * Accordion items
-	 * @type VvAccordionGroupItem
-	 */
-	items: {
-		type: Array as PropType<VvAccordionGroupItem[]>,
-		default: () => [],
-	},
-	/**
-	 * If true, accordion items stay open when another item is opened
-	 */
-	collapse: Boolean,
-	/**
-	 * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
-	 */
-	itemModifiers: {
-		type: [String, Array] as PropType<string | string[]>,
-		default: '',
-	},
-	/**
-	 * If true, the accordion items will be disabled
-	 */
-	disabled: Boolean,
-	/**
-	 * If true, the accordion items will be opened by default
-	 */
-	not: Boolean,
-	/**
-	 * Enable local storage persistence
-	 */
-	storeKey: String,
-}
-
-export const VvAccordionGroupEvents = ['update:modelValue']

package/src/components/VvAction/VvAction.vue

@@ -1,146 +0,0 @@
-<script lang="ts">
-	export default {
-		name: 'VvAction',
-	}
-</script>
-
-<script setup lang="ts">
-	import { VvActionProps, VvActionEvents } from '.'
-	import { ActionTag } from '../../constants'
-
-	// props and emit
-	const props = defineProps(VvActionProps)
-	const emit = defineEmits(VvActionEvents)
-
-	// inject plugin
-	const volver = useVolver()
-
-	const element = ref<HTMLElement | null>(null)
-	defineExpose({ $el: element })
-
-	// drowpdown trigger
-	const {
-		reference: dropdownTriggerReference,
-		bus: dropdownEventBus,
-		aria: dropdownAria,
-		expanded: dropdownExpanded,
-	} = useInjectedDropdownTrigger()
-	watch(
-		() => element.value,
-		(newValue) => {
-			if (dropdownTriggerReference) {
-				dropdownTriggerReference.value = newValue
-			}
-		},
-	)
-
-	// pressed
-	const pressed = computed(() => {
-		return props.pressed || dropdownExpanded?.value
-	})
-
-	// dropdown parent
-	const { role } = useInjectedDropdownAction()
-
-	/**
-	 * @description The tag defined by props.
-	 * @returns {string} The tag.
-	 */
-	const hasTag = computed(() => {
-		switch (true) {
-			case props.disabled:
-				return ActionTag.button
-			case props.to !== undefined:
-				return volver?.nuxt ? ActionTag.nuxtLink : ActionTag.routerLink
-			case props.href !== undefined:
-				return ActionTag.a
-			default:
-				return ActionTag.button
-		}
-	})
-
-	/**
-	 * @description Define component attributes.
-	 * @returns {Object} The component attributes.
-	 */
-	const hasProps = computed(() => {
-		const toReturn = {
-			...dropdownAria?.value,
-			ariaPressed: pressed.value ? true : undefined,
-			ariaLabel: props.ariaLabel,
-			role: role?.value,
-		}
-		switch (hasTag.value) {
-			case ActionTag.a:
-				return {
-					...toReturn,
-					href: props.href,
-					target: props.target,
-					rel: props.rel,
-				}
-			case ActionTag.routerLink:
-			case ActionTag.nuxtLink:
-				return {
-					...toReturn,
-					to: props.to,
-					target: props.target,
-				}
-			default:
-				return {
-					...toReturn,
-					type: props.type,
-					disabled: props.disabled,
-				}
-		}
-	})
-
-	/**
-	 * @description Catch click event
-	 */
-	const onClick = (e: Event) => {
-		if (props.disabled) {
-			e.preventDefault()
-			return
-		}
-		dropdownEventBus?.emit('click', e)
-		emit('click', e)
-	}
-
-	/**
-	 * @description Catch mouseover event
-	 */
-	const onMouseover = (e: Event) => {
-		dropdownEventBus?.emit('mouseover', e)
-		emit('mouseover', e)
-	}
-
-	/**
-	 * @description Catch mouseleave event
-	 */
-	const onMouseleave = (e: Event) => {
-		dropdownEventBus?.emit('mouseleave', e)
-		emit('mouseleave', e)
-	}
-</script>
-
-<template>
-	<component
-		v-bind="hasProps"
-		:is="hasTag"
-		ref="element"
-		:class="{
-			active,
-			pressed,
-			disabled,
-			current,
-		}"
-		@click.passive="onClick"
-		@mouseover.passive="onMouseover"
-		@mouseleave.passive="onMouseleave"
-	>
-		<!-- @slot Default slot -->
-		<slot>
-			{{ label }}
-		</slot>
-	</component>
-</template>

package/src/components/VvAction/index.ts

@@ -1,5 +0,0 @@
-import { ActionProps } from '../../props'
-
-export const VvActionEvents = ['click', 'mouseover', 'mouseleave']
-
-export const VvActionProps = ActionProps

package/src/components/VvAlert/VvAlert.vue

@@ -1,76 +0,0 @@
-<script lang="ts">
-	export default {
-		name: 'VvAlert',
-	}
-</script>
-
-<script setup lang="ts">
-	import VvIcon from '../VvIcon/VvIcon.vue'
-	import { useVvAlert, VvAlertEvents, VvAlertProps } from '.'
-
-	const props = defineProps(VvAlertProps)
-	const emit = defineEmits(VvAlertEvents)
-	const { hasProps, hasTitleId, hasIcon, close } = useVvAlert(props, emit)
-	defineExpose({ close })
-</script>
-
-<template>
-	<div v-bind="hasProps">
-		<div
-			v-if="
-				$slots.header ||
-				$slots.title ||
-				$slots.close ||
-				$slots['title::before'] ||
-				$slots['title::after'] ||
-				title ||
-				dismissable ||
-				autoClose
-			"
-			class="vv-alert__header"
-		>
-			<VvIcon v-if="hasIcon" v-bind="hasIcon" class="vv-alert__icon" />
-			<!-- @slot Header slot -->
-			<slot name="header">
-				<!-- @slot Before title slot -->
-				<slot name="title::before" />
-				<strong
-					v-if="$slots.title || title"
-					:id="hasTitleId"
-					class="vv-alert__title"
-				>
-					<!-- @slot Title slot -->
-					<slot name="title">
-						{{ title }}
-					</slot>
-				</strong>
-				<!-- @slot After title slot -->
-				<slot name="title::after" />
-			</slot>
-			<!-- @slot Close button slot -->
-			<slot name="close" v-bind="{ close }">
-				<button
-					v-if="dismissable || autoClose"
-					class="vv-alert__close"
-					type="button"
-					:aria-label="closeLabel"
-					@click.stop="close"
-				>
-					<div class="vv-alert__close-mask"></div>
-				</button>
-			</slot>
-		</div>
-		<div v-if="$slots.default || content" class="vv-alert__content">
-			<!-- @slot Content slot -->
-			<slot>
-				{{ content }}
-			</slot>
-		</div>
-		<div v-if="$slots.footer || footer" class="vv-alert__footer">
-			<!-- @slot Footer slot -->
-			<slot name="footer">
-				{{ footer }}
-			</slot>
-		</div>
-	</div>
-</template>

package/src/components/VvAlert/index.ts

@@ -1,162 +0,0 @@
-import { IconProps, IdProps, ModifiersProps } from '@/props'
-import type { ExtractPropTypes, PropType } from 'vue'
-import { withModifiers } from 'vue'
-
-export const VvAlertProps = {
-	...IdProps,
-	...ModifiersProps,
-	...IconProps,
-	/**
-	 * The alert is dismissable
-	 * @default false
-	 * @type boolean
-	 */
-	dismissable: {
-		type: Boolean,
-		default: false,
-	},
-	/**
-	 * The alert auto close after the specified time in milliseconds
-	 * @default 0
-	 * @type number
-	 */
-	autoClose: {
-		type: Number,
-		default: 0,
-	},
-	/**
-	 * The alert close label
-	 * @default 'Close'
-	 * @type string
-	 */
-	closeLabel: {
-		type: String,
-		default: 'Close',
-	},
-	/**
-	 * The alert title
-	 * @default ''
-	 * @type string
-	 */
-	title: {
-		type: String,
-		default: undefined,
-	},
-	/**
-	 * The alert content
-	 * @default ''
-	 * @type string
-	 */
-	content: {
-		type: String,
-		default: undefined,
-	},
-	/**
-	 * The alert footer
-	 * @default ''
-	 * @type string
-	 */
-	footer: {
-		type: String,
-		default: undefined,
-	},
-	/**
-	 * The alert role
-	 * @default 'alert'
-	 * @type string
-	 * @values 'alert', 'alertdialog'
-	 * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alert_Role
-	 * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_role
-	 */
-	role: {
-		type: String as PropType<'alert' | 'alertdialog'>,
-		default: 'alert',
-	},
-}
-
-export const VvAlertEvents = ['close']
-
-export const useVvAlert = (
-	props: Readonly<ExtractPropTypes<typeof VvAlertProps>>,
-	emit: (event: string, ...args: unknown[]) => void,
-) => {
-	const { bus } = useInjectedAlertGroup()
-
-	const hasId = useUniqueId(computed(() => props.id))
-	const hasTitleId = computed(() => `${hasId.value}-title`)
-
-	// icon
-	const hasIcon = computed(() =>
-		typeof props.icon === 'string' ? { name: props.icon } : props.icon,
-	)
-
-	// props
-	const hasClass = useModifiers(
-		'vv-alert',
-		computed(() => props.modifiers),
-		computed(() => ({
-			dismissable: props.autoClose > 0 || props.dismissable,
-			'auto-close': props.autoClose > 0,
-			hover: isMouseover.value,
-		})),
-	)
-	const hasStyle = computed(() => ({
-		'--alert-duration': `${props.autoClose}ms`,
-	}))
-
-	// close
-	const close = () => {
-		if (timeout) {
-			clearTimeout(timeout)
-		}
-		emit('close', hasId.value)
-		bus?.emit('close', hasId.value)
-	}
-
-	// auto close
-	let timeout: ReturnType<typeof setTimeout>
-	watch(
-		() => props.autoClose,
-		(value) => {
-			if (value > 0) {
-				timeout = setTimeout(close, value)
-				return
-			}
-			if (timeout) {
-				clearTimeout(timeout)
-			}
-		},
-		{
-			immediate: true,
-		},
-	)
-
-	// listeners
-	const isMouseover = ref(false)
-	const onMouseover = withModifiers(() => {
-		isMouseover.value = true
-		if (timeout) {
-			clearTimeout(timeout)
-		}
-	}, ['passive'])
-	const onMouseleave = withModifiers(() => {
-		isMouseover.value = false
-		if (props.autoClose > 0) {
-			timeout = setTimeout(close, props.autoClose)
-		}
-	}, ['passive'])
-
-	return {
-		close,
-		hasIcon,
-		hasTitleId,
-		hasProps: computed(() => ({
-			onMouseover,
-			onMouseleave,
-			class: hasClass.value,
-			style: hasStyle.value,
-			role: props.role,
-			'aria-labelledby': hasTitleId.value,
-		})),
-	}
-}

package/src/components/VvAlertGroup/VvAlertGroup.vue

@@ -1,64 +0,0 @@
-<script lang="ts">
-	export default {
-		name: 'VvAlertGroup',
-	}
-</script>
-
-<script setup lang="ts">
-	import { useVvAlertGroup, VvAlertGroupEvents, VvAlertGroupProps } from '.'
-	import VvAlert from '../VvAlert/VvAlert.vue'
-
-	// props and emit
-	const props = defineProps(VvAlertGroupProps)
-	const emit = defineEmits(VvAlertGroupEvents)
-
-	const { hasProps, hasTransition } = useVvAlertGroup(props, emit)
-
-	const alertGroupTransitionHandlers = {
-		'before-enter': () => {
-			emit('before-enter')
-		},
-		'after-leave': () => {
-			emit('after-leave')
-		},
-		enter: () => {
-			emit('enter')
-		},
-		'after-enter': () => {
-			emit('after-enter')
-		},
-		'enter-cancelled': () => {
-			emit('enter-cancelled')
-		},
-		'before-leave': () => {
-			emit('before-leave')
-		},
-		leave: () => {
-			emit('leave')
-		},
-		'leave-cancelled': () => {
-			emit('leave-cancelled')
-		},
-	}
-</script>
-
-<template>
-	<div v-bind="hasProps">
-		<!-- @slot The slot before alert list  -->
-		<slot name="before" />
-		<TransitionGroup
-			tag="div"
-			role="group"
-			:name="hasTransition"
-			class="vv-alert-group__list"
-			v-on="alertGroupTransitionHandlers"
-		>
-			<!-- @slot The slot for alert list  -->
-			<slot>
-				<VvAlert v-for="item in items" v-bind="item" :key="item.id" />
-			</slot>
-		</TransitionGroup>
-		<!-- @slot The slot after alert list  -->
-		<slot name="after" />
-	</div>
-</template>