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

package/src/components/VvAlertGroup/index.ts

@@ -1,132 +0,0 @@
-import { ModifiersProps } from '@/props'
-import type { ExtractPropTypes } from 'vue'
-
-export type AlertItem = {
-	id: string | number
-	title?: string
-	icon?: string | Record<string, unknown>
-	content?: string
-	footer?: string
-	modifiers?: string | string[]
-	dismissable?: boolean
-	autoClose?: number
-	closeLabel?: string
-	role?: 'alert' | 'alertdialog'
-}
-
-export const VvAlertGroupProps = {
-	...ModifiersProps,
-	name: {
-		type: String,
-		required: true,
-	},
-	items: {
-		type: Array as PropType<AlertItem[]>,
-		default: () => [],
-	},
-	stack: {
-		type: Boolean,
-		default: false,
-	},
-	reverse: {
-		type: Boolean,
-		default: false,
-	},
-	inline: {
-		type: String as PropType<'start' | 'middle' | 'end'>,
-		default: undefined,
-	},
-	block: {
-		type: String as PropType<'top' | 'center' | 'bottom'>,
-		default: undefined,
-	},
-	position: {
-		type: String as PropType<'absolute' | 'fixed'>,
-		default: undefined,
-	},
-	transition: {
-		type: String,
-		default: undefined,
-	},
-}
-
-export const VvAlertGroupEvents = [
-	'close',
-	'before-enter',
-	'after-leave',
-	'enter',
-	'after-enter',
-	'enter-cancelled',
-	'before-leave',
-	'leave',
-	'leave-cancelled',
-]
-
-export const useVvAlertGroup = (
-	props: Readonly<ExtractPropTypes<typeof VvAlertGroupProps>>,
-	emit: (event: string, ...args: unknown[]) => void,
-) => {
-	const bus = useProvideAlertGroup({ name: computed(() => props.name) })
-
-	// check props block and inline coexist
-	if ((props.block && !props.inline) || (!props.block && props.inline)) {
-		// eslint-disable-next-line
-		console.warn(
-			`[VvAlertGroup]: block and inline props must coexist at the same time.`,
-		)
-	}
-
-	// props
-	const hasClass = computed(() => {
-		const toReturn: (string | Record<string, boolean>)[] = [
-			useModifiers(
-				'vv-alert-group',
-				computed(() => props.modifiers),
-				computed(() => ({
-					stack: props.stack,
-					reverse: props.reverse,
-					absolute: props.position === 'absolute',
-					fixed: props.position === 'fixed',
-				})),
-			).value,
-		]
-		if (props.inline && props.block) {
-			toReturn.push(`vv-alert-group--${props.block}-${props.inline}`)
-		}
-		return toReturn
-	})
-
-	const hasTransition = computed(() => {
-		if (props.transition) {
-			return props.transition
-		}
-		if (!props.position) {
-			return 'vv-alert--fade'
-		}
-		if (props.inline === 'start') {
-			return 'vv-alert--fade-inline-start'
-		}
-		if (props.inline === 'end') {
-			return 'vv-alert--fade-inline-end'
-		}
-		if (props.block === 'top') {
-			return 'vv-alert--fade-block-top'
-		}
-		if (props.block === 'bottom') {
-			return 'vv-alert--fade-block-bottom'
-		}
-		return 'vv-alert--fade'
-	})
-
-	// listeners
-	bus.on('close', (id: string) => {
-		emit('close', id)
-	})
-
-	return {
-		hasTransition,
-		hasProps: computed(() => ({
-			class: hasClass.value,
-		})),
-	}
-}

package/src/components/VvAvatar/VvAvatar.vue

@@ -1,21 +0,0 @@
-<script setup lang="ts">
-	import { VvAvatarProps } from '@/components/VvAvatar'
-
-	const props = defineProps(VvAvatarProps)
-	const { modifiers } = toRefs(props)
-
-	// bem css classes
-	const bemCssClasses = useModifiers('vv-avatar', modifiers)
-</script>
-
-<template>
-	<span
-		:class="bemCssClasses"
-		:role="imgSrc ? undefined : 'img'"
-		:aria-label="imgSrc ? undefined : 'avatar'"
-	>
-		<slot name="default">
-			<img v-if="imgSrc" :src="imgSrc" alt="avatar" />
-		</slot>
-	</span>
-</template>

package/src/components/VvAvatar/index.ts

@@ -1,9 +0,0 @@
-import { ModifiersProps } from '@/props'
-
-export const VvAvatarProps = {
-	...ModifiersProps,
-	/**
-	 * Image src for avatar
-	 */
-	imgSrc: String,
-}

package/src/components/VvAvatarGroup/VvAvatarGroup.vue

@@ -1,65 +0,0 @@
-<script setup lang="ts">
-	import { VvAvatarGroupProps } from '@/components/VvAvatarGroup'
-	import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
-
-	const props = defineProps(VvAvatarGroupProps)
-	const { modifiers, items, toShow, totalItems, avatarModifiers } =
-		toRefs(props)
-
-	// bem css classes
-	const bemCssClasses = useModifiers('vv-avatar-group', modifiers)
-
-	const stringModifiers = computed(() => {
-		if (avatarModifiers?.value && Array.isArray(avatarModifiers?.value)) {
-			return avatarModifiers.value.join(' ')
-		}
-		return avatarModifiers?.value || ''
-	})
-
-	const avatarItems = computed(() => {
-		return items.value.slice(0, toShow.value).map((item) => {
-			let modifiers: string[] = []
-			let itemModifiers: string[] = []
-
-			if (avatarModifiers?.value) {
-				modifiers = Array.isArray(avatarModifiers?.value)
-					? avatarModifiers?.value
-					: [avatarModifiers?.value]
-			}
-
-			if (item.modifiers) {
-				itemModifiers = Array.isArray(item.modifiers)
-					? item.modifiers
-					: [item.modifiers]
-			}
-
-			return {
-				...item,
-				key: item.key || useUniqueId().value,
-				modifiers: [...modifiers, ...itemModifiers],
-			}
-		})
-	})
-</script>
-
-<template>
-	<span :class="bemCssClasses">
-		<slot name="default">
-			<VvAvatar
-				v-for="avatarItem in avatarItems"
-				:key="avatarItem.key"
-				v-bind="{
-					modifiers: avatarItem.modifiers,
-					imgSrc: avatarItem.imgSrc,
-				}"
-			>
-				<span v-if="avatarItem.text">{{ avatarItem.text }}</span>
-			</VvAvatar>
-			<VvAvatar
-				v-if="(totalItems || items.length) > toShow"
-				:modifiers="`${stringModifiers} surface bordered`"
-				>{{ `+${(totalItems || items.length) - toShow}` }}</VvAvatar
-			>
-		</slot>
-	</span>
-</template>

package/src/components/VvAvatarGroup/index.ts

@@ -1,28 +0,0 @@
-import { ModifiersProps } from '@/props'
-
-export type AvatarItem = {
-	key?: string
-	text?: string
-	imgSrc?: string
-	modifiers?: string | string[]
-}
-
-export const VvAvatarGroupProps = {
-	...ModifiersProps,
-	/**
-	 * avatar items
-	 */
-	items: {
-		type: Array as PropType<AvatarItem[]>,
-		default: () => [],
-		required: true,
-	},
-	toShow: {
-		type: Number,
-		default: 3,
-	},
-	totalItems: {
-		type: Number,
-	},
-	avatarModifiers: [String, Array] as PropType<string | string[]>,
-}

package/src/components/VvBadge/VvBadge.vue

@@ -1,20 +0,0 @@
-<script lang="ts">
-	export default {
-		name: 'VvBadge',
-	}
-</script>
-
-<script setup lang="ts">
-	import { VvBadgeProps } from '.'
-
-	const props = defineProps(VvBadgeProps)
-	const { modifiers } = toRefs(props)
-	const bemCssClasses = useModifiers('vv-badge', modifiers)
-</script>
-
-<template>
-	<span :class="bemCssClasses" role="status">
-		<!-- @slot Default slot -->
-		<slot>{{ value }}</slot>
-	</span>
-</template>

package/src/components/VvBadge/index.ts

@@ -1,6 +0,0 @@
-import { ModifiersProps } from '../../props'
-
-export const VvBadgeProps = {
-	...ModifiersProps,
-	value: [String, Number],
-}

package/src/components/VvBreadcrumb/VvBreadcrumb.vue

@@ -1,54 +0,0 @@
-<script lang="ts">
-	export default {
-		name: 'VvBreadcrumb',
-	}
-</script>
-
-<script setup lang="ts">
-	import { useModifiers } from '../../composables/useModifiers'
-	import { VvBreadcrumbProps } from '.'
-
-	const props = defineProps(VvBreadcrumbProps)
-	const { modifiers } = toRefs(props)
-	const bemCssClasses = useModifiers('vv-breadcrumb', modifiers)
-</script>
-
-<template>
-	<nav :class="bemCssClasses" aria-label="breadcrumbs">
-		<ol class="vv-breadcrumb__list">
-			<li
-				v-for="(route, index) in routes"
-				:key="`${route.label}-${index}`"
-				:class="{
-					'vv-breadcrumb__item': index < Number(routes?.length) - 1,
-					'vv-breadcrumb__item-active':
-						index === Number(routes?.length) - 1,
-				}"
-				itemprop="itemListElement"
-				itemtype="https://schema.org/ListItem"
-				itemscope
-			>
-				<Component
-					:is="route.to ? 'router-link' : route.href ? 'a' : 'span'"
-					v-bind="route"
-					:class="{
-						'vv-breadcrumb__link':
-							index < Number(routes?.length) - 1,
-					}"
-					:aria-current="
-						index === Number(routes?.length) - 1
-							? 'page'
-							: undefined
-					"
-					itemprop="item"
-				>
-					<!-- @slot Slot for label -->
-					<slot name="label" v-bind="{ route, index }">
-						{{ route.label }}
-					</slot>
-				</Component>
-				<meta itemprop="position" :content="`${index + 1}`" />
-			</li>
-		</ol>
-	</nav>
-</template>

package/src/components/VvBreadcrumb/index.ts

@@ -1,13 +0,0 @@
-import { ModifiersProps } from '../../props'
-
-export interface Route {
-	label: string
-	to?: string | { [key: string]: unknown }
-	title?: string
-	href?: string
-}
-
-export const VvBreadcrumbProps = {
-	...ModifiersProps,
-	routes: Array as PropType<Route[]>,
-}

package/src/components/VvButton/VvButton.vue

@@ -1,164 +0,0 @@
-<script lang="ts">
-	export default {
-		name: 'VvButton',
-	}
-</script>
-
-<script setup lang="ts">
-	import VvIcon from '../VvIcon/VvIcon.vue'
-	import VvAction from '../VvAction/VvAction.vue'
-	import { VvButtonEvents, VvButtonProps, useGroupProps } from '.'
-	import { Side } from '../../constants'
-
-	// props, attrs, slots and emit
-	const props = defineProps(VvButtonProps)
-	const attrs = useAttrs()
-	const slots = useSlots()
-	const emit = defineEmits(VvButtonEvents)
-
-	// data
-	const {
-		id,
-		modifiers,
-		iconPosition,
-		icon,
-		label,
-		modelValue,
-		disabled,
-		toggle,
-		unselectable,
-	} = useGroupProps(props, emit)
-	const hasId = useUniqueId(id)
-	const name = computed(() => (attrs?.name as string) || hasId.value)
-
-	// expose el
-	const element = ref<{ $el: HTMLElement } | null>(null)
-	const $el = computed(() => element.value?.$el)
-	defineExpose({ $el })
-
-	/**
-	 * @description The component pressed state by prop or group.
-	 * @returns {string} The component tag.
-	 */
-	const pressed = computed(() => {
-		if (!toggle.value) {
-			return props.pressed
-		}
-		if (Array.isArray(modelValue.value)) {
-			return contains(name.value, modelValue.value)
-		}
-		return equals(name.value, modelValue.value)
-	})
-
-	/**
-	 * @description Define component classes with BEM style.
-	 * @returns {Array} The component classes.
-	 */
-	const bemCssClasses = useModifiers(
-		'vv-button',
-		modifiers,
-		computed(() => ({
-			reverse: [Side.right, Side.bottom].includes(
-				iconPosition.value as Side,
-			),
-			column: [Side.top, Side.bottom].includes(
-				iconPosition.value as Side,
-			),
-			'icon-only': Boolean(
-				icon?.value && !label?.value && !slots.default,
-			),
-		})),
-	)
-
-	/**
-	 * @description Define icon attributes.
-	 * @returns {Object} The icon attributes.
-	 */
-	const hasIconProps = computed(() =>
-		typeof icon?.value === 'string' ? { name: icon?.value } : icon?.value,
-	)
-
-	/**
-	 * @description Catch click event
-	 */
-	const toggleValue = computed(() => {
-		return props.value !== undefined ? props.value : name.value
-	})
-	const onClick = () => {
-		if (toggle.value) {
-			if (Array.isArray(modelValue.value)) {
-				if (contains(toggleValue.value, modelValue.value)) {
-					if (unselectable.value) {
-						modelValue.value = modelValue.value.filter(
-							(n) => n !== toggleValue.value,
-						)
-					}
-					return
-				}
-				modelValue.value.push(toggleValue.value)
-				return
-			}
-			if (toggleValue.value === modelValue.value && unselectable.value) {
-				modelValue.value = props.uncheckedValue
-				return
-			}
-			modelValue.value = toggleValue.value
-		}
-	}
-</script>
-
-<template>
-	<VvAction
-		v-bind="{
-			disabled,
-			pressed,
-			active,
-			type,
-			to,
-			href,
-			target,
-			rel,
-			ariaLabel,
-		}"
-		:id="hasId"
-		ref="element"
-		:class="bemCssClasses"
-		@click="onClick"
-	>
-		<!-- @slot Default slot -->
-		<slot>
-			<!-- #region loading -->
-			<template v-if="loading">
-				<!-- @slot Slot for loading content -->
-				<slot name="loading">
-					<VvIcon
-						v-if="loadingIcon"
-						class="vv-button__loading-icon"
-						:name="loadingIcon"
-					/>
-					<span v-if="loadingLabel" class="vv-button__label">
-						{{ loadingLabel }}
-					</span>
-				</slot>
-			</template>
-			<!-- #endregion -->
-			<!-- #region button -->
-			<template v-else>
-				<!-- @slot Before label and icon -->
-				<slot name="before" />
-				<template v-if="icon">
-					<VvIcon class="vv-button__icon" v-bind="hasIconProps" />
-				</template>
-				<span v-if="label" class="vv-button__label">
-					<!-- @slot Use this slot for button label -->
-					<slot name="label">
-						{{ label }}
-					</slot>
-				</span>
-				<!-- @slot After label and icon -->
-				<slot name="after" />
-			</template>
-			<!-- #endregion -->
-		</slot>
-	</VvAction>
-</template>

package/src/components/VvButton/index.ts

@@ -1,132 +0,0 @@
-import type { Ref, PropType, ExtractPropTypes } from 'vue'
-import type { ButtonGroupState } from '../../types/group'
-import {
-	ActionProps,
-	IdProps,
-	LoadingProps,
-	ModifiersProps,
-	UnselectableProps,
-} from '../../props'
-import { INJECTION_KEY_BUTTON_GROUP, Side } from '../../constants'
-
-export const VvButtonEvents = ['update:modelValue']
-
-export const VvButtonProps = {
-	...ActionProps,
-	...IdProps,
-	...ModifiersProps,
-	...UnselectableProps,
-	...LoadingProps,
-	/**
-	 * Button icon
-	 */
-	icon: [String, Object],
-	/**
-	 * Button icon position
-	 */
-	iconPosition: {
-		type: String as PropType<`${Side}`>,
-		default: Side.left,
-		validator: (value: Side) => Object.values(Side).includes(value),
-	},
-	/**
-	 * Loading icon
-	 */
-	loadingIcon: { type: String, default: 'eos-icons:bubble-loading' },
-	/**
-	 * Enable button toggle
-	 */
-	toggle: {
-		type: Boolean,
-		default: false,
-	},
-	/**
-	 * Button toggle value
-	 */
-	value: {
-		type: [String, Number, Boolean],
-		default: undefined,
-	},
-	/**
-	 * Value associated with the unchecked state
-	 */
-	uncheckedValue: {
-		type: [String, Number, Boolean],
-		default: undefined,
-	},
-	/**
-	 * Button toggle model value
-	 */
-	modelValue: {
-		type: [String, Number, Boolean],
-		default: undefined,
-	},
-}
-
-export type VvButtonPropsTypes = ExtractPropTypes<typeof VvButtonProps>
-
-/**
- * Merges local and group props
- */
-export function useGroupProps(
-	props: VvButtonPropsTypes,
-	emit: (event: (typeof VvButtonEvents)[number], value: unknown) => void,
-) {
-	const { group, isInGroup, getGroupOrLocalRef } =
-		useInjectedGroupState<ButtonGroupState>(INJECTION_KEY_BUTTON_GROUP)
-
-	// local props
-	const { id, iconPosition, icon, label, pressed } = toRefs(props)
-
-	// group props
-	const modelValue = getGroupOrLocalRef('modelValue', props, emit) as Ref<
-		string | number | boolean | (string | number | boolean)[] | undefined
-	>
-	const toggle = getGroupOrLocalRef('toggle', props) as Ref<boolean>
-	const unselectable = getGroupOrLocalRef(
-		'unselectable',
-		props,
-	) as Ref<boolean>
-	const multiple = computed(() => group?.value.multiple.value ?? false)
-	// merge local and group modifiers
-	const modifiers = computed(() => {
-		let localModifiers = props.modifiers
-		let groupModifiers = group?.value.modifiers.value
-
-		const toReturn = new Set<string>()
-		if (localModifiers) {
-			if (!Array.isArray(localModifiers)) {
-				localModifiers = localModifiers.split(' ')
-			}
-			localModifiers.forEach((modifier) => toReturn.add(modifier))
-		}
-		if (groupModifiers) {
-			if (!Array.isArray(groupModifiers)) {
-				groupModifiers = groupModifiers.split(' ')
-			}
-			groupModifiers.forEach((modifier) => toReturn.add(modifier))
-		}
-		return Array.from(toReturn)
-	})
-	const disabled = computed(() =>
-		Boolean(props.disabled || group?.value?.disabled.value),
-	)
-
-	return {
-		// group props
-		group,
-		isInGroup,
-		modelValue,
-		toggle,
-		unselectable,
-		multiple,
-		modifiers,
-		disabled,
-		// local props
-		id,
-		pressed,
-		iconPosition,
-		icon,
-		label,
-	}
-}