@volverjs/ui-vue 0.0.10-beta.2 → 0.0.10-beta.21

package/src/components/VvInputText/index.ts

@@ -1,6 +1,7 @@
 import type { ExtractPropTypes, PropType } from 'vue'
 import type { FactoryOpts } from 'imask'
 import { InputTextareaProps } from '../../props'
+import { type VvIconProps, ACTION_ICONS } from '../VvIcon'
 
 export const INPUT_TYPES = {
 	TEXT: 'text',
@@ -19,15 +20,6 @@ export const INPUT_TYPES = {
 } as const
 export type InputType = ValueOf<typeof INPUT_TYPES>
 
-export const TYPES_ICON = {
-	PASSWORD_SHOW: 'eye-on',
-	PASSWORD_HIDE: 'eye-off',
-	DATE: 'calendar',
-	TIME: 'time',
-	COLOR: 'color',
-	SEARCH: 'close',
-} as const
-
 export const VvInputTextEvents = [
 	'update:modelValue',
 	'update:masked',
@@ -98,24 +90,24 @@ export const VvInputTextProps = {
 	 * @see VVIcon
 	 */
 	iconShowPassword: {
-		type: String,
-		default: TYPES_ICON.PASSWORD_SHOW,
+		type: [String, Object] as PropType<string | VvIconProps>,
+		default: ACTION_ICONS.showPassword,
 	},
 	/**
 	 * VvIcon name for hide password button
 	 * @see VVIcon
 	 */
 	iconHidePassword: {
-		type: String,
-		default: TYPES_ICON.PASSWORD_HIDE,
+		type: [String, Object] as PropType<string | VvIconProps>,
+		default: ACTION_ICONS.hidePassword,
 	},
 	/**
 	 * VvIcon name for clear button
 	 * @see VVIcon
 	 */
 	iconClear: {
-		type: String,
-		default: TYPES_ICON.SEARCH,
+		type: [String, Object] as PropType<string | VvIconProps>,
+		default: ACTION_ICONS.clear,
 	},
 	/**
 	 * Label for step up button

package/src/components/VvNav/VvNav.vue

@@ -1,66 +1,46 @@
 <script setup lang="ts">
-	import { VvNavProps, VvNavEvents, type NavItem } from '@/components/VvNav'
-	import VvAction from '@/components/VvAction/VvAction.vue'
+	import { VvNavProps, VvNavEvents } from '@/components/VvNav'
+	import VvNavItem from './VvNavItem.vue'
 
 	const props = defineProps(VvNavProps)
-	const emit = defineEmits(VvNavEvents)
-	const { modifiers, items } = toRefs(props)
-	const activeItem: Ref<string | null> = ref(null)
+	const { modifiers } = toRefs(props)
 
-	// bem css classes
-	const bemCssClasses = useModifiers('vv-nav', modifiers)
-
-	const localItems = computed(() => {
-		return items.value.map((item, index) => {
-			return {
-				...item,
-				id: item.id || `nav-item_${index}`,
+	const emit = defineEmits(VvNavEvents)
+	const onClick = (event: Event) => {
+		const target = event.target as HTMLElement
+		if (target?.dataset.index) {
+			const index = parseInt(target.dataset.index)
+			const item = props.items?.[index]
+			if (!item || item?.disabled) {
+				return
 			}
-		})
-	})
-
-	/**
-	 * Triggers when the item is clicked.
-	 * @private
-	 * @event click
-	 * @param [NavItem, string] item - the clicked item
-	 */
-	function onClick(item: NavItem) {
-		if (!item.disabled) {
 			emit('click', item)
-			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-			activeItem.value = item.id!
 		}
 	}
+
+	// bem css classes
+	const bemCssClasses = useModifiers('vv-nav', modifiers)
 </script>
 
 <template>
 	<nav :class="bemCssClasses">
-		<ul class="vv-nav__menu" role="menu" aria-busy="true">
-			<li
-				v-for="navItem in localItems"
-				:key="navItem.id"
-				class="vv-nav__item"
-				role="presentation"
-			>
-				<VvAction
-					v-bind="{
-						disabled: navItem.disabled,
-						to: navItem.to,
-						href: navItem.href,
-						tabindex: 0,
-					}"
-					:class="{
-						current: activeItem == navItem.id,
-						disabled: navItem.disabled,
-					}"
-					class="vv-nav__item-label"
-					v-on="navItem.on"
-					@click="onClick(navItem)"
+		<ul
+			class="vv-nav__menu"
+			role="menu"
+			aria-busy="true"
+			@click.stop="onClick"
+		>
+			<slot>
+				<VvNavItem
+					v-for="({ on = {}, data, ...item }, index) in items"
+					:key="index"
+					:data-index="index"
+					v-bind="item"
+					v-on="on"
 				>
-					{{ navItem.title }}
-				</VvAction>
-			</li>
+					<slot name="item" v-bind="{ item, data, index }" />
+				</VvNavItem>
+			</slot>
 		</ul>
 	</nav>
 </template>

package/src/components/VvNav/VvNavItem.vue

@@ -0,0 +1,18 @@
+<script lang="ts">
+	export default {
+		name: 'VvNavItem',
+		inheritAttrs: false,
+	}
+</script>
+
+<script setup lang="ts">
+	import VvAction from '@/components/VvAction/VvAction.vue'
+</script>
+
+<template>
+	<li class="vv-nav__item" role="presentation">
+		<VvAction v-bind="$attrs" class="vv-nav__item-label">
+			<slot />
+		</VvAction>
+	</li>
+</template>

package/src/components/VvNav/VvNavSeparator.vue

@@ -0,0 +1,11 @@
+<script lang="ts">
+	export default {
+		name: 'VvNavSeparator',
+	}
+</script>
+
+<template>
+	<li class="vv-nav__separator" role="separator">
+		<slot />
+	</li>
+</template>

package/src/components/VvNav/index.ts

@@ -1,21 +1,8 @@
-import { ModifiersProps } from '@/props'
-
-export type NavItem = {
-	id?: string
-	title: string
-	to?: string | { [key: string]: unknown }
-	href?: string
-	disabled?: boolean
-	on?: Record<string, () => void>
-}
+import { ModifiersProps, NavProps } from '@/props'
 
 export const VvNavProps = {
 	...ModifiersProps,
-	items: {
-		type: Array as PropType<NavItem[]>,
-		required: true,
-		default: () => [],
-	},
+	...NavProps,
 }
 
 export const VvNavEvents = ['click']

package/src/components/VvSelect/VvSelect.vue

@@ -65,10 +65,7 @@
 	})
 
 	// icons
-	const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-		icon,
-		iconPosition,
-	)
+	const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition)
 
 	// dirty
 	const isDirty = computed(() => !isEmpty(props.modelValue))
@@ -100,8 +97,8 @@
 			loading: loading.value,
 			disabled: disabled.value,
 			readonly: readonly.value,
-			'icon-before': hasIconBefore.value,
-			'icon-after': hasIconAfter.value,
+			'icon-before': hasIconBefore.value !== undefined,
+			'icon-after': hasIconAfter.value !== undefined,
 			dirty: isDirty.value,
 			focus: focused.value,
 			floating: floating.value,
@@ -174,8 +171,8 @@
 			<div class="vv-select__inner">
 				<VvIcon
 					v-if="hasIconBefore"
+					v-bind="hasIconBefore"
 					class="vv-select__icon"
-					v-bind="hasIcon"
 				/>
 				<select
 					:id="hasId"
@@ -219,8 +216,8 @@
 				</select>
 				<VvIcon
 					v-if="hasIconAfter"
+					v-bind="hasIconAfter"
 					class="vv-select__icon vv-select__icon-after"
-					v-bind="hasIcon"
 				/>
 			</div>
 			<div v-if="$slots.after" class="vv-select__input-after">

package/src/components/VvTab/VvTab.vue

@@ -1,53 +1,81 @@
 <script setup lang="ts">
 	import { VvTabProps, VvTabEvents } from '@/components/VvTab'
-	import type { NavItem } from '@/components/VvNav'
 	import VvNav from '@/components/VvNav/VvNav.vue'
+	import type { NavItemTab } from '@/types/nav'
 
 	const props = defineProps(VvTabProps)
 	const emit = defineEmits(VvTabEvents)
 	const { modifiers, items } = toRefs(props)
-	const activeTab: Ref<string | null> = ref(null)
-
-	// bem css classes
-	const bemCssClasses = useModifiers('vv-tab', modifiers)
-
-	const localItems = computed(() => {
-		return items.value.map((item, index) => {
-			return {
-				...item,
-				id: item.id || `tab-item_${index}`,
+	const tabKeys = computed(() => {
+		return items.value.reduce<string[]>((acc, item) => {
+			if (item.tab) {
+				acc.push(item.tab)
 			}
-		})
+			return acc
+		}, [])
 	})
-
-	/**
-	 * Triggers when the item is clicked.
-	 * @private
-	 * @event click
-	 * @param [NavItem, string] item - the clicked item
-	 */
-	function onClick(item: NavItem) {
-		if (!item.disabled) {
-			emit('click', item)
-			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-			activeTab.value = item.id!
+	const localModelValue = ref<string | undefined>()
+	const activeTabKey = computed({
+		get: () => {
+			return (
+				props.modelValue || localModelValue.value || tabKeys.value?.[0]
+			)
+		},
+		set: (newValue) => {
+			localModelValue.value = newValue
+			emit('update:modelValue', newValue)
+		},
+	})
+	const hasNavModifiers = computed(() => {
+		return [
+			'tabs',
+			...(Array.isArray(props.navModifiers)
+				? props.navModifiers
+				: props.navModifiers?.split(' ') ?? []),
+		]
+	})
+	const onNavClick = (item: NavItemTab) => {
+		if (item.tab) {
+			activeTabKey.value = item.tab
 		}
 	}
+	const navItems = computed(() =>
+		props.items.map((item) => ({
+			current: item.tab === activeTabKey.value,
+			...item,
+		})),
+	)
+
+	// bem css classes
+	const bemCssClasses = useModifiers('vv-tab', modifiers)
 </script>
 
 <template>
 	<div :class="bemCssClasses">
-		<VvNav :items="localItems" modifiers="tabs full" @click="onClick" />
-		<!-- #region tab content -->
-		<article
-			v-for="item in localItems"
-			:id="item.id"
-			:key="item.id"
-			:class="{ target: activeTab === item.id }"
-			class="vv-tab__panel"
+		<!-- #region nav -->
+		<VvNav
+			v-bind="{
+				items: navItems,
+				modifiers: hasNavModifiers,
+			}"
+			@click="onNavClick"
 		>
-			<slot :name="`${item.id}`" />
-		</article>
-		<!-- #endregion tab content -->
+			<template #item="{ item, data, index }">
+				<slot name="nav-item" v-bind="{ item, data, index }" />
+			</template>
+		</VvNav>
+		<!-- #endregion -->
+
+		<!-- #region panels -->
+		<template v-for="(item, index) in items" :key="index">
+			<article
+				v-if="item.tab"
+				:class="{ target: activeTabKey === item.tab }"
+				class="vv-tab__panel"
+			>
+				<slot :name="`panel::${item.tab}`" />
+			</article>
+		</template>
+		<!-- #endregion -->
 	</div>
 </template>

package/src/components/VvTab/index.ts

@@ -1,13 +1,19 @@
 import { ModifiersProps } from '@/props'
-import type { NavItem } from '../VvNav'
+import type { NavItemTab } from '@/types/nav'
 
 export const VvTabProps = {
 	...ModifiersProps,
+	navModifiers: {
+		type: [String, Array] as PropType<string | string[]>,
+	},
+	modelValue: {
+		type: String,
+		default: '',
+	},
 	items: {
-		type: Array as PropType<NavItem[]>,
-		required: true,
+		type: Array as PropType<NavItemTab[]>,
 		default: () => [],
 	},
 }
 
-export const VvTabEvents = ['click']
+export const VvTabEvents = ['update:modelValue']

package/src/components/VvTextarea/VvTextarea.vue

@@ -52,10 +52,7 @@
 	const localModelValue = useDebouncedInput(modelValue, emit, debounce?.value)
 
 	// icons
-	const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-		icon,
-		iconPosition,
-	)
+	const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition)
 
 	// focus
 	const { focused } = useComponentFocus(textarea, emit)
@@ -113,11 +110,11 @@
 			loading: loading.value,
 			disabled: props.disabled,
 			readonly: props.readonly,
-			'icon-before': hasIconBefore.value,
-			'icon-after': hasIconAfter.value,
+			'icon-before': hasIconBefore.value !== undefined,
+			'icon-after': hasIconAfter.value !== undefined,
 			floating: props.floating && !isEmpty(props.label),
 			dirty: isDirty.value,
-			focused: focused.value,
+			focus: focused.value,
 			resizable: props.resizable,
 		})),
 	)
@@ -180,8 +177,8 @@
 			<div class="vv-textarea__inner">
 				<VvIcon
 					v-if="hasIconBefore"
+					v-bind="hasIconBefore"
 					class="vv-textarea__icon"
-					v-bind="hasIcon"
 				/>
 				<textarea
 					:id="hasId"
@@ -192,8 +189,8 @@
 				/>
 				<VvIcon
 					v-if="hasIconAfter"
+					v-bind="hasIconAfter"
 					class="vv-textarea__icon vv-textarea__icon-after"
-					v-bind="hasIcon"
 				/>
 			</div>
 			<div v-if="$slots.after" class="vv-textarea__input-after">

package/src/components/index.ts

@@ -2,6 +2,9 @@ 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 VvAlertGroup } from './VvAlertGroup/VvAlertGroup.vue'
+export { default as VvAvatar } from './VvAvatar/VvAvatar.vue'
+export { default as VvAvatarGroup } from './VvAvatarGroup/VvAvatarGroup.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'
@@ -12,9 +15,15 @@ export { default as VvCheckboxGroup } from './VvCheckboxGroup/VvCheckboxGroup.vu
 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 VvDropdownAction } from './VvDropdown/VvDropdownAction.vue'
+export { default as VvDropdownItem } from './VvDropdown/VvDropdownItem.vue'
+export { default as VvDropdownOptgroup } from './VvDropdown/VvDropdownOptgroup.vue'
+export { default as VvDropdownOption } from './VvDropdown/VvDropdownOption.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 VvNavItem } from './VvNav/VvNavItem.vue'
+export { default as VvNavSeparator } from './VvNav/VvNavSeparator.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'
@@ -22,3 +31,4 @@ 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'
+export { default as VvInputFile } from './VvInputFile/VvInputFile.vue'

package/src/composables/index.ts

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

package/src/composables/useBlurhash.ts

@@ -0,0 +1,76 @@
+import { wrap } from 'comlink'
+import pica from 'pica'
+import type { BlurhashWorkerType } from '@/types/blurhash'
+import BlurhashWorker from '@/workers/blurhash?worker&inline'
+
+const remoteFunction = wrap<BlurhashWorkerType>(new BlurhashWorker())
+
+function loadImage(src: string): Promise<CanvasImageSource> {
+	return new Promise((resolve, reject) => {
+		const img = new Image()
+		img.onload = () => resolve(img)
+		img.onerror = (...args) => reject(args)
+		img.src = src
+	})
+}
+
+const getWidthHeightFromMaxSize = (
+	width: number,
+	height: number,
+	maxSize: number,
+) => {
+	if (width > height) {
+		return {
+			width: maxSize,
+			height: Math.round(maxSize * (height / width)),
+		}
+	}
+	return {
+		width: Math.round(maxSize * (width / height)),
+		height: maxSize,
+	}
+}
+
+const resizeImage = async (
+	image: ImageBitmap | HTMLImageElement | HTMLCanvasElement | File | Blob,
+	width: number,
+	height: number,
+) => {
+	const resizer = new pica()
+	const canvas = document.createElement('canvas')
+	canvas.width = width
+	canvas.height = height
+	const result = await resizer.resize(image, canvas)
+	return result.getContext('2d')?.getImageData(0, 0, width, height).data
+}
+
+export const useBlurhash = () => {
+	async function encode(file: File) {
+		const imageUrl = URL.createObjectURL(file)
+		const image = await loadImage(imageUrl)
+		if ('width' in image && 'height' in image) {
+			const { width: newWidth, height: newHeight } =
+				getWidthHeightFromMaxSize(
+					image.width as number,
+					image.height as number,
+					32,
+				)
+			const imageData = await resizeImage(
+				image as ImageBitmap,
+				newWidth,
+				newHeight,
+			)
+			if (imageData) {
+				return remoteFunction.encode(
+					imageData,
+					newWidth,
+					newHeight,
+					4,
+					4,
+				)
+			}
+		}
+	}
+
+	return { encode, decode: remoteFunction.decode, loadImage }
+}

package/src/composables/useComponentIcon.ts

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

package/src/composables/useUniqueId.ts

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

package/src/directives/index.ts

@@ -1,7 +1,4 @@
-import tooltip from '../directives/v-tooltip'
-import contextmenu from '../directives/v-contextmenu'
+import vTooltip from '../directives/v-tooltip'
+import vContextmenu from '../directives/v-contextmenu'
 
-export default {
-	tooltip,
-	contextmenu,
-}
+export { vTooltip, vContextmenu }

package/src/directives/v-tooltip.ts

@@ -1,15 +1,24 @@
 import { render, type Directive, type DirectiveBinding } from 'vue'
 import VvTooltip from '../components/VvTooltip/VvTooltip.vue'
-import type { Side } from '../constants'
+import { Side } from '../constants'
 
-const tooltip: Directive = {
-	beforeMount(el: HTMLElement, binding: DirectiveBinding) {
-		const tooltip = h(VvTooltip, {
-			value: binding.value,
-			position: binding.arg as Side,
-		})
-		render(tooltip, el)
-	},
-}
+const tooltip: Directive = (() => {
+	return {
+		beforeMount(el: HTMLElement, binding: DirectiveBinding) {
+			const tooltip = h(VvTooltip, {
+				value: binding.value,
+				position: binding.arg as Side,
+			})
+			render(tooltip, el)
+		},
+		updated(el: HTMLElement, binding: DirectiveBinding) {
+			const tooltip = h(VvTooltip, {
+				value: binding.value,
+				position: binding.arg as Side,
+			})
+			render(tooltip, el)
+		},
+	}
+})()
 
 export default tooltip

package/src/index.ts

@@ -1,7 +1,9 @@
 import VolverPlugin from './Volver'
-import type { Volver } from './Volver'
+import type { Volver, VolverOptions } from './Volver'
 
 export { VolverPlugin }
+export * from './types'
+export type { Volver, VolverOptions }
 
 // https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties
 // Add custom property and extend vue type definition