@volverjs/ui-vue 0.0.5 → 0.0.6-beta.15

package/src/components/VvIcon/index.ts

@@ -1,5 +1,5 @@
 import type { PropType } from 'vue'
-import type { IconifyRenderMode } from '@iconify/vue'
+import type { IconifyIconOnLoad, IconifyRenderMode } from '@iconify/vue'
 
 export enum IconPrefix {
 	simple = 'simple',
@@ -88,14 +88,14 @@ export const VvIconProps = {
 	/**
 	 * A callback that is called when icon data has been loaded
 	 */
-	onLoad: Function,
+	onLoad: Function as PropType<IconifyIconOnLoad>,
 	/**
 	 * SVG icon string
 	 */
 	svg: String,
 	/**
 	 * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
-	 * @values string | Array<string>
+	 * @values string | string[]
 	 */
 	modifiers: {
 		type: [String, Array] as PropType<string | string[]>,

package/src/components/VvInputText/VvInputText.vue

@@ -41,7 +41,7 @@
 		loading,
 	} = toRefs(props)
 	const hasId = useUniqueId(id)
-	const hasDescribedBy = computed(() => `${hasId.value}-hint`)
+	const hasHintId = computed(() => `${hasId.value}-hint`)
 	// BUG: https://www.samanthaming.com/tidbits/88-css-placeholder-shown/
 	const inputTextPlaceholder = computed(() =>
 		props.floating && isEmpty(props.placeholder) ? ' ' : props.placeholder,
@@ -211,12 +211,11 @@
 			required: props.required,
 			autocomplete: props.autocomplete,
 			'aria-invalid': isInvalid.value,
-			'aria-describedby':
-				!hasInvalid.value && hasHint.value
-					? hasDescribedBy.value
-					: undefined,
-			'aria-errormessage': hasInvalid.value
-				? hasDescribedBy.value
+			'aria-describedby': hasHintLabelOrSlot.value
+				? hasHintId.value
+				: undefined,
+			'aria-errormessage': hasInvalidLabelOrSlot.value
+				? hasHintId.value
 				: undefined,
 		}
 		if (
@@ -274,7 +273,12 @@
 	}))
 
 	// components
-	const { HintSlot, hasHint, hasInvalid } = HintSlotFactory(props, slots)
+	const {
+		HintSlot,
+		hasHintLabelOrSlot,
+		hasInvalidLabelOrSlot,
+		hintSlotScope,
+	} = HintSlotFactory(props, slots)
 	const PasswordInputActions = VvInputTextActionsFactory(
 		INPUT_TYPES.PASSWORD,
 		props,
@@ -403,6 +407,19 @@
 				</slot>
 			</span>
 		</div>
-		<HintSlot :id="hasDescribedBy" class="vv-input-text__hint" />
+		<HintSlot :id="hasHintId" class="vv-input-text__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/VvNav/VvNav.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+	import { VvNavProps, VvNavEvents, type NavItem } from '@/components/VvNav'
+	import VvAction from '@/components/VvAction/VvAction.vue'
+
+	const props = defineProps(VvNavProps)
+	const emit = defineEmits(VvNavEvents)
+	const { modifiers, items } = toRefs(props)
+	const activeItem: Ref<string | null> = ref(null)
+
+	// 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}`,
+			}
+		})
+	})
+
+	/**
+	 * 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!
+		}
+	}
+</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)"
+				>
+					{{ navItem.title }}
+				</VvAction>
+			</li>
+		</ul>
+	</nav>
+</template>

package/src/components/VvNav/index.ts

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

package/src/components/VvNavItemTitle/VvNavItemTitle.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+	defineProps({
+		title: String,
+	})
+</script>
+
+<template>
+	<span class="vv-nav__heading-label" aria-hidden="true">
+		{{ title }}
+	</span>
+</template>

package/src/components/VvNavSeparator/VvNavSeparator.ts

@@ -0,0 +1,8 @@
+export default defineComponent({
+	render() {
+		return h('li', {
+			class: 'vv-nav__divider',
+			role: 'separator',
+		})
+	},
+})

package/src/components/VvRadio/VvRadio.vue

@@ -17,6 +17,7 @@
 	const { id, disabled, readonly, modelValue, valid, invalid } =
 		useGroupProps(props, emit)
 	const hasId = useUniqueId(id)
+	const hasHintId = computed(() => `${hasId.value}-hint`)
 	const tabindex = computed(() => (isDisabled.value ? -1 : props.tabindex))
 
 	// template refs
@@ -71,7 +72,12 @@
 	)
 
 	// hint
-	const { HintSlot } = HintSlotFactory(props, slots)
+	const {
+		HintSlot,
+		hasHintLabelOrSlot,
+		hasInvalidLabelOrSlot,
+		hintSlotScope,
+	} = HintSlotFactory(props, slots)
 </script>
 
 <template>
@@ -87,10 +93,25 @@
 			:value="hasValue"
 			:tabindex="tabindex"
 			:aria-invalid="isInvalid"
+			:aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
+			:aria-errormessage="hasInvalidLabelOrSlot ? hasHintId : undefined"
 		/>
 		<slot :value="modelValue">
 			{{ label }}
 		</slot>
-		<HintSlot class="vv-radio__hint" :params="{ value: modelValue }" />
+		<HintSlot :id="hasHintId" class="vv-radio__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>
 	</label>
 </template>

package/src/components/VvRadioGroup/VvRadioGroup.vue

@@ -58,7 +58,7 @@
 	}
 
 	// hint
-	const { HintSlot } = HintSlotFactory(props, slots)
+	const { HintSlot, hintSlotScope } = HintSlotFactory(props, slots)
 </script>
 
 <template>
@@ -78,6 +78,19 @@
 			<slot v-else />
 			<!-- #endregion -->
 		</div>
-		<HintSlot class="vv-radio-group__hint" />
+		<HintSlot class="vv-radio-group__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>
 	</fieldset>
 </template>

package/src/components/VvSelect/VvSelect.vue

@@ -20,7 +20,12 @@
 	const select = ref()
 
 	// hint
-	const { HintSlot, hasHint, hasInvalid } = HintSlotFactory(props, slots)
+	const {
+		HintSlot,
+		hasHintLabelOrSlot,
+		hasInvalidLabelOrSlot,
+		hintSlotScope,
+	} = HintSlotFactory(props, slots)
 
 	// data
 	const {
@@ -39,7 +44,7 @@
 
 	// computed
 	const hasId = useUniqueId(id)
-	const hasDescribedBy = computed(() => `${hasId.value}-hint`)
+	const hasHintId = computed(() => `${hasId.value}-hint`)
 
 	// focus
 	const { focused } = useComponentFocus(select, emit)
@@ -108,12 +113,11 @@
 			autocomplete: props.autocomplete,
 			multiple: props.multiple,
 			'aria-invalid': isInvalid.value,
-			'aria-describedby':
-				!hasInvalid.value && hasHint.value
-					? hasDescribedBy.value
-					: undefined,
-			'aria-errormessage': hasInvalid.value
-				? hasDescribedBy.value
+			'aria-describedby': hasHintLabelOrSlot.value
+				? hasHintId.value
+				: undefined,
+			'aria-errormessage': hasInvalidLabelOrSlot.value
+				? hasHintId.value
 				: undefined,
 		}
 	})
@@ -218,6 +222,19 @@
 			</div>
 		</div>
 		<!-- #endregion native select -->
-		<HintSlot :id="hasDescribedBy" class="vv-select__hint" />
+		<HintSlot :id="hasHintId" class="vv-select__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/VvTab/VvTab.vue

@@ -0,0 +1,53 @@
+<script setup lang="ts">
+	import { VvTabProps, VvTabEvents } from '@/components/VvTab'
+	import type { NavItem } from '@/components/VvNav'
+	import VvNav from '@/components/VvNav/VvNav.vue'
+
+	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}`,
+			}
+		})
+	})
+
+	/**
+	 * 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!
+		}
+	}
+</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"
+		>
+			<slot :name="`${item.id}`" />
+		</article>
+		<!-- #endregion tab content -->
+	</div>
+</template>

package/src/components/VvTab/index.ts

@@ -0,0 +1,13 @@
+import { ModifiersProps } from '@/props'
+import type { NavItem } from '../VvNav'
+
+export const VvTabProps = {
+	...ModifiersProps,
+	items: {
+		type: Array as PropType<NavItem[]>,
+		required: true,
+		default: () => [],
+	},
+}
+
+export const VvTabEvents = ['click']

package/src/components/VvTextarea/VvTextarea.vue

@@ -32,7 +32,7 @@
 		modifiers,
 	} = toRefs(props)
 	const hasId = useUniqueId(id)
-	const hasDescribedBy = computed(() => `${hasId.value}-hint`)
+	const hasHintId = computed(() => `${hasId.value}-hint`)
 	// BUG - https://www.samanthaming.com/tidbits/88-css-placeholder-shown/
 	const hasPlaceholder = computed(() =>
 		props.floating && isEmpty(props.placeholder) ? ' ' : props.placeholder,
@@ -86,7 +86,12 @@
 	})
 
 	// hint
-	const { HintSlot, hasHint, hasInvalid } = HintSlotFactory(props, slots)
+	const {
+		HintSlot,
+		hasHintLabelOrSlot,
+		hasInvalidLabelOrSlot,
+		hintSlotScope,
+	} = HintSlotFactory(props, slots)
 
 	// styles
 	const bemCssClasses = useModifiers(
@@ -125,12 +130,11 @@
 				wrap: props.wrap,
 				spellcheck: props.spellcheck,
 				'aria-invalid': isInvalid.value,
-				'aria-describedby':
-					!hasInvalid.value && hasHint.value
-						? hasDescribedBy.value
-						: undefined,
-				'aria-errormessage': hasInvalid.value
-					? hasDescribedBy.value
+				'aria-describedby': hasHintLabelOrSlot.value
+					? hasHintId.value
+					: undefined,
+				'aria-errormessage': hasInvalidLabelOrSlot.value
+					? hasHintId.value
 					: undefined,
 			} as TextareaHTMLAttributes),
 	)
@@ -193,6 +197,19 @@
 				</slot>
 			</span>
 		</div>
-		<HintSlot :id="hasDescribedBy" class="vv-textarea__hint" />
+		<HintSlot :id="hasHintId" class="vv-textarea__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>