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

package/src/components/VvInputFile/VvInputFile.vue

@@ -0,0 +1,302 @@
+<script lang="ts">
+	export default {
+		name: 'VvInputFile',
+	}
+</script>
+
+<script setup lang="ts">
+	import { useVModel } from '@vueuse/core'
+	import type { UploadedFile } from '../../types'
+	import { computed, onBeforeUnmount, ref } from 'vue'
+	import VvButton from '../VvButton/VvButton.vue'
+	import VvIcon from '../VvIcon/VvIcon.vue'
+	import HintSlotFactory from '../common/HintSlot'
+	import { VvInputFileProps, type VvInputFileEvents } from '.'
+
+	// props, emit, slots and attrs
+	const props = defineProps(VvInputFileProps)
+	const emit = defineEmits<VvInputFileEvents>()
+	const slots = useSlots()
+
+	// props merged with volver defaults (now only for labels)
+	const propsDefaults = useDefaults<typeof VvInputFileProps>(
+		'VvInputFile',
+		VvInputFileProps,
+		props,
+	)
+
+	const { modifiers, id, readonly } = toRefs(props)
+
+	const hasId = useUniqueId(id)
+	const hasHintId = computed(() => `${hasId.value}-hint`)
+
+	// styles
+	const bemCssClasses = useModifiers(
+		'vv-input-file',
+		modifiers,
+		computed(() => ({
+			dragging: isDragging.value,
+			loading: props.loading,
+			valid: props.valid === true,
+			invalid: props.invalid === true,
+			'icon-before': !!props.iconLeft,
+			'icon-after': !!props.iconRight,
+		})),
+	)
+
+	const {
+		HintSlot,
+		hasHintLabelOrSlot,
+		hasInvalidLabelOrSlot,
+		hintSlotScope,
+	} = HintSlotFactory(propsDefaults, slots)
+
+	const localModelValue = useVModel(props, 'modelValue', emit)
+	const files = computed(() => {
+		if (
+			!localModelValue.value ||
+			(!Array.isArray(localModelValue.value) &&
+				!(localModelValue.value as File)?.name)
+		) {
+			return []
+		}
+		return Array.isArray(localModelValue.value)
+			? localModelValue.value
+			: [localModelValue.value]
+	})
+
+	const hasMax = computed(() => {
+		return typeof props.max === 'string' ? parseInt(props.max) : props.max
+	})
+
+	const hasDropArea = computed(() => {
+		return modifiers?.value?.includes('drop-area')
+	})
+
+	const isMultiple = computed(() => {
+		if (!props.multiple) {
+			return false
+		}
+		if (!hasMax.value) {
+			return true
+		}
+		return hasMax.value - files.value.length > 1
+	})
+
+	const isDragging = ref(false)
+
+	const inputEl = ref<HTMLInputElement>()
+	const onDragenter = () => {
+		isDragging.value = true
+	}
+
+	const onDragleave = () => {
+		isDragging.value = false
+	}
+
+	const onDrop = (event: DragEvent) => {
+		if (!event.dataTransfer?.files) {
+			return
+		}
+		isDragging.value = false
+		addFiles(event.dataTransfer?.files)
+	}
+
+	const onChange = () => {
+		if (!inputEl.value?.files) {
+			return
+		}
+		addFiles(inputEl.value.files)
+		inputEl.value.value = ''
+	}
+
+	const addFiles = (uploadedFiles: FileList) => {
+		if (!props.multiple) {
+			if (Array.isArray(localModelValue.value)) {
+				localModelValue.value = [...uploadedFiles]
+				return
+			}
+			localModelValue.value = uploadedFiles[0]
+			return
+		}
+		let toReturn: (File | UploadedFile)[] = []
+		if (!Array.isArray(localModelValue.value) && localModelValue.value) {
+			toReturn = [localModelValue.value]
+		} else {
+			toReturn =
+				localModelValue.value && Array.isArray(localModelValue.value)
+					? [...localModelValue.value]
+					: toReturn
+		}
+		for (const file of uploadedFiles) {
+			if (hasMax.value && toReturn.length >= hasMax.value) {
+				break
+			}
+			toReturn.push(file)
+		}
+
+		localModelValue.value = toReturn
+	}
+
+	const onClick = () => {
+		if (!inputEl.value) {
+			return
+		}
+		if (!readonly.value) {
+			inputEl.value.click()
+		}
+	}
+
+	const onClickRemoveFile = (index: number) => {
+		if (!Array.isArray(localModelValue.value)) {
+			localModelValue.value = undefined
+			return
+		}
+		const toReturn = [...localModelValue.value]
+		toReturn.splice(index, 1)
+		localModelValue.value = toReturn
+	}
+
+	const currentFileIndex = ref(0)
+	const previewSrc = computed(() => {
+		if (files.value.length === 0) {
+			return
+		}
+		if (files.value[currentFileIndex.value] instanceof File) {
+			return URL.createObjectURL(
+				files.value[currentFileIndex.value] as File,
+			)
+		}
+		return (files.value[currentFileIndex.value] as UploadedFile).url
+	})
+
+	onBeforeUnmount(() => {
+		if (previewSrc.value) {
+			URL.revokeObjectURL(previewSrc.value)
+		}
+	})
+
+	const sizeInKiB = (size?: number) => {
+		if (!size) {
+			return
+		}
+		return Math.floor(size / 1024)
+	}
+
+	const onClickDownloadFile = (file: File | UploadedFile) => {
+		const link = document.createElement('a')
+		if (file instanceof File) {
+			link.href = URL.createObjectURL(file)
+		} else if (file.url) {
+			link.href = file.url
+		}
+		link.setAttribute('download', file.name)
+		document.body.appendChild(link)
+		link.click()
+	}
+</script>
+
+<template>
+	<div :class="bemCssClasses">
+		<label v-if="label" :for="hasId">
+			{{ label }}
+		</label>
+		<div
+			v-if="hasDropArea"
+			class="vv-input-file__drop-area"
+			@dragenter.prevent.stop="onDragenter"
+			@dragleave.prevent.stop="onDragleave"
+			@drop.prevent.stop="onDrop"
+			@dragover.prevent.stop
+			@click.stop="onClick"
+		>
+			<slot name="drop-area">
+				<VvButton
+					v-if="!readonly"
+					modifiers="action"
+					aria-label="upload"
+					:label="!previewSrc ? labelButton : undefined"
+					:class="{
+						'absolute top-8 right-8': previewSrc,
+					}"
+					:icon="!previewSrc ? 'image' : isMultiple ? 'add' : 'edit'"
+					class="z-1"
+					@click.stop="onClick"
+				/>
+				<picture class="vv-input-file__preview">
+					<img
+						v-if="previewSrc"
+						:src="previewSrc"
+						:alt="files[currentFileIndex].name"
+					/>
+				</picture>
+			</slot>
+		</div>
+		<div class="vv-input-file__wrapper">
+			<VvIcon v-if="iconLeft" :name="iconLeft" />
+			<input
+				:id="hasId"
+				ref="inputEl"
+				:readonly="readonly"
+				:placeholder="placeholder"
+				:aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
+				:aria-invalid="invalid"
+				:aria-errormessage="
+					hasInvalidLabelOrSlot ? hasHintId : undefined
+				"
+				:multiple="isMultiple"
+				:accept="accept"
+				type="file"
+				:name="name"
+				@change="onChange"
+			/>
+			<VvIcon v-if="iconRight" :name="iconRight" />
+		</div>
+		<ul class="vv-input-file__list">
+			<li
+				v-for="(file, index) in files"
+				:key="index"
+				class="vv-input-file__item"
+				@click.stop="currentFileIndex = index"
+			>
+				<button
+					type="button"
+					class="vv-input-file__item-icon cursor-pointer"
+					title="Download"
+					aria-label="download-file"
+					@click.stop="onClickDownloadFile(file)"
+				>
+					<VvIcon name="download" />
+				</button>
+				<div class="vv-input-file__item-name cursor-pointer">
+					{{ file.name }}
+				</div>
+				<small class="vv-input-file__item-info">
+					{{ sizeInKiB(file.size) }} KB
+				</small>
+				<button
+					v-if="!readonly"
+					type="button"
+					class="vv-input-file__item-remove"
+					title="Remove"
+					aria-label="remove-file"
+					@click.stop="onClickRemoveFile(index)"
+				/>
+			</li>
+		</ul>
+		<HintSlot :id="hasHintId" class="vv-input-file__hint">
+			<template v-if="$slots.hint" #hint>
+				<slot name="hint" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.loading" #loading>
+				<slot name="loading" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.valid" #valid>
+				<slot name="valid" v-bind="hintSlotScope" />
+			</template>
+			<template v-if="$slots.invalid" #invalid>
+				<slot name="invalid" v-bind="hintSlotScope" />
+			</template>
+		</HintSlot>
+	</div>
+</template>

package/src/components/VvInputFile/index.ts

@@ -0,0 +1,38 @@
+import type { UploadedFile } from '@/types'
+import {
+	ModifiersProps,
+	ValidProps,
+	InvalidProps,
+	HintProps,
+	LabelProps,
+	LoadingProps,
+	ReadonlyProps,
+} from '../../props'
+
+export type VvInputFileEvents = {
+	'update:modelValue': [File | undefined]
+}
+
+export const VvInputFileProps = {
+	...ModifiersProps,
+	...ValidProps,
+	...InvalidProps,
+	...HintProps,
+	...LabelProps,
+	...LoadingProps,
+	...ReadonlyProps,
+	name: { type: String },
+	id: { type: String },
+	modelValue: {
+		type: Object as PropType<File | (File | UploadedFile)[] | UploadedFile>,
+		required: true,
+	},
+	max: [Number, String],
+	labelButton: { type: String, default: 'Image' },
+	loading: Boolean,
+	accept: String,
+	placeholder: String,
+	multiple: Boolean,
+	iconLeft: String,
+	iconRight: String,
+}

package/src/components/VvInputText/VvInputText.vue

@@ -227,7 +227,7 @@
 				return
 			}
 			inputEl.value.stepUp()
-			localModelValue.value = unref(inputEl).value
+			localModelValue.value = Number(unref(inputEl).value)
 		}
 	}
 	const onStepDown = () => {
@@ -238,7 +238,7 @@
 				return
 			}
 			inputEl.value.stepDown()
-			localModelValue.value = unref(inputEl).value
+			localModelValue.value = Number(unref(inputEl).value)
 		}
 	}
 
@@ -249,11 +249,11 @@
 	}
 
 	// icons
-	const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-		icon,
-		iconPosition,
-	)
-	const defaultAfterIcon = computed(() => {
+	const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition)
+	const iconAfter = computed(() => {
+		if (hasIconAfter.value !== undefined) {
+			return hasIconAfter.value
+		}
 		switch (props.type) {
 			case INPUT_TYPES.COLOR:
 				return { name: TYPES_ICON.COLOR }
@@ -264,9 +264,8 @@
 				return { name: TYPES_ICON.DATE }
 			case INPUT_TYPES.TIME:
 				return { name: TYPES_ICON.TIME }
-			default:
-				return ''
 		}
+		return undefined
 	})
 
 	// count
@@ -307,8 +306,8 @@
 			loading: loading.value,
 			disabled: props.disabled,
 			readonly: props.readonly,
-			'icon-before': hasIconBefore.value,
-			'icon-after': hasIconAfter.value || !isEmpty(defaultAfterIcon),
+			'icon-before': hasIconBefore.value !== undefined,
+			'icon-after': iconAfter.value !== undefined,
 			floating: props.floating && !isEmpty(props.label),
 			dirty: isDirty.value,
 			focus: isFocused.value,
@@ -476,8 +475,8 @@
 			>
 				<VvIcon
 					v-if="hasIconBefore"
+					v-bind="hasIconBefore"
 					class="vv-input-text__icon"
-					v-bind="hasIcon"
 				/>
 				<input
 					:id="hasId"
@@ -500,9 +499,9 @@
 			</div>
 			<!-- @slot Slot to replace right icon -->
 			<VvIcon
-				v-if="hasIconAfter || defaultAfterIcon"
+				v-if="iconAfter"
+				v-bind="iconAfter"
 				class="vv-input-text__icon vv-input-text__icon-after"
-				v-bind="hasIconAfter ? hasIcon : defaultAfterIcon"
 			/>
 			<PasswordInputActions
 				v-else-if="isPassword && !hideActions && isClickable"

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">