@volverjs/ui-vue 0.0.6-beta.3 → 0.0.6-beta.5

package/src/components/VvAccordion/index.ts

@@ -25,7 +25,7 @@ export const VvAccordionProps = {
 	/**
 	 * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
 	 */
-	modifiers: [String, Array],
+	modifiers: [String, Array] as PropType<string | string[]>,
 	/**
 	 * If true, the accordion will be disabled
 	 */
@@ -58,12 +58,29 @@ export function useGroupProps(
 	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
 	const not = getGroupOrLocalRef('not', props) as Ref<boolean>
 	const collapse = getGroupOrLocalRef('collapse', props) as Ref<boolean>
-	const modifiers = getGroupOrLocalRef('modifiers', props) as Ref<
-		Array<string> | string
-	>
 	const disabled = computed(() =>
 		Boolean(props.disabled || group?.value?.disabled.value),
 	)
+	// 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)
+	})
 
 	return {
 		// group props

package/src/components/VvAccordionGroup/index.ts

@@ -15,7 +15,10 @@ export const VvAccordionGroupProps = {
 	 * Accordion items
 	 * @type VvAccordionGroupItem
 	 */
-	items: { type: Array<VvAccordionGroupItem>, default: () => [] },
+	items: {
+		type: Array as PropType<VvAccordionGroupItem[]>,
+		default: () => [],
+	},
 	/**
 	 * If true, accordion items stay open when another item is opened
 	 */
@@ -23,12 +26,12 @@ export const VvAccordionGroupProps = {
 	/**
 	 * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion-group--'
 	 */
-	modifiers: [String, Array],
+	modifiers: [String, Array] as PropType<string | string[]>,
 	/**
 	 * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
 	 */
 	itemModifiers: {
-		type: [String, Array<string>],
+		type: [String, Array] as PropType<string | string[]>,
 		default: '',
 	},
 	/**

package/src/components/VvAvatarGroup/index.ts

@@ -13,7 +13,7 @@ export const VvAvatarGroupProps = {
 	 * avatar items
 	 */
 	items: {
-		type: Array<AvatarItem>,
+		type: Array as PropType<AvatarItem[]>,
 		default: () => [],
 		required: true,
 	},
@@ -24,5 +24,5 @@ export const VvAvatarGroupProps = {
 	totalItems: {
 		type: Number,
 	},
-	avatarModifiers: [String, Array] as PropType<string | Array<string>>,
+	avatarModifiers: [String, Array] as PropType<string | string[]>,
 }

package/src/components/VvBreadcrumb/index.ts

@@ -9,5 +9,5 @@ export interface Route {
 
 export const VvBreadcrumbProps = {
 	...ModifiersProps,
-	routes: Array<Route>,
+	routes: Array as PropType<Route[]>,
 }

package/src/components/VvButton/VvButton.vue

@@ -81,25 +81,28 @@
 	/**
 	 * @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(name.value, modelValue.value)) {
+				if (contains(toggleValue.value, modelValue.value)) {
 					if (unselectable.value) {
 						modelValue.value = modelValue.value.filter(
-							(n) => n !== name.value,
+							(n) => n !== toggleValue.value,
 						)
 					}
 					return
 				}
-				modelValue.value.push(name.value)
+				modelValue.value.push(toggleValue.value)
 				return
 			}
-			if (equals(name.value, modelValue.value) && unselectable.value) {
-				modelValue.value = undefined
+			if (toggleValue.value === modelValue.value && unselectable.value) {
+				modelValue.value = props.uncheckedValue
 				return
 			}
-			modelValue.value = name.value
+			modelValue.value = toggleValue.value
 		}
 	}
 </script>

package/src/components/VvButton/index.ts

@@ -33,11 +33,34 @@ export const VvButtonProps = {
 	 * Loading icon
 	 */
 	loadingIcon: { type: String, default: 'eos-icons:bubble-loading' },
+	/**
+	 * Enable button toggle
+	 */
 	toggle: {
 		type: Boolean,
 		default: false,
 	},
-	modelValue: String,
+	/**
+	 * 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>
@@ -53,18 +76,11 @@ export function useGroupProps(
 		useInjectedGroupState<ButtonGroupState>(INJECTION_KEY_BUTTON_GROUP)
 
 	// local props
-	const {
-		id,
-		iconPosition,
-		icon,
-		label,
-		pressed,
-		modifiers: localModifiers,
-	} = toRefs(props)
+	const { id, iconPosition, icon, label, pressed } = toRefs(props)
 
 	// group props
 	const modelValue = getGroupOrLocalRef('modelValue', props, emit) as Ref<
-		string | Array<string> | undefined
+		string | number | boolean | (string | number | boolean)[] | undefined
 	>
 	const toggle = getGroupOrLocalRef('toggle', props) as Ref<boolean>
 	const unselectable = getGroupOrLocalRef(
@@ -72,18 +88,25 @@ export function useGroupProps(
 		props,
 	) as Ref<boolean>
 	const multiple = computed(() => group?.value.multiple.value ?? false)
+	// merge local and group modifiers
 	const modifiers = computed(() => {
-		const localValue = localModifiers?.value
-			? Array.isArray(localModifiers.value)
-				? localModifiers.value
-				: localModifiers.value.split(' ')
-			: []
-		const groupValue = group?.value.itemModifiers?.value
-			? Array.isArray(group.value.itemModifiers.value)
-				? group.value.itemModifiers.value
-				: group.value.itemModifiers.value.split(' ')
-			: []
-		return [...localValue, ...groupValue]
+		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),

package/src/components/VvButtonGroup/VvButtonGroup.vue

@@ -45,7 +45,7 @@
 				(Array.isArray(props.modelValue) || multiple.value) &&
 				!Array.isArray(newValue)
 			) {
-				newValue = [newValue]
+				return emit('update:modelValue', [newValue])
 			}
 			return emit('update:modelValue', newValue)
 		},
@@ -59,7 +59,7 @@
 		toggle,
 		multiple,
 		unselectable,
-		itemModifiers,
+		modifiers: itemModifiers,
 	})
 
 	// style

package/src/components/VvButtonGroup/index.ts

@@ -7,10 +7,22 @@ export const VvButtonGroupProps = {
 	/**
 	 * String or String[] of css classes (modifiers) that will be provided to each button'
 	 */
-	itemModifiers: { type: [String, Array<string>], default: undefined },
+	itemModifiers: {
+		type: [String, Array] as PropType<string | string[]>,
+		default: '',
+	},
 	toggle: { type: Boolean, default: false },
 	multiple: { type: Boolean, default: false },
-	modelValue: { type: [String, Array<string>], default: undefined },
+	modelValue: {
+		type: [String, Number, Boolean, Array] as PropType<
+			| string
+			| number
+			| boolean
+			| (string | number | boolean)[]
+			| undefined
+		>,
+		default: undefined,
+	},
 }
 
 export const VvButtonGroupEvents = ['update:modelValue']

package/src/components/VvCard/index.ts

@@ -1,4 +1,4 @@
 export const VvCardProps = {
 	title: String,
-	modifiers: [String, Array],
+	modifiers: [String, Array] as PropType<string | string[]>,
 }

package/src/components/VvCombobox/index.ts

@@ -117,7 +117,7 @@ export const VvComboboxProps = {
 	 * Badge modifiers
 	 */
 	badgeModifiers: {
-		type: [String, Array] as PropType<string | Array<string>>,
+		type: [String, Array] as PropType<string | string[]>,
 		default: 'action sm',
 	},
 	/**
@@ -131,7 +131,7 @@ export const VvComboboxProps = {
 	 * Dropdown modifiers
 	 */
 	dropdownModifiers: {
-		type: [String, Array] as PropType<string | Array<string>>,
+		type: [String, Array] as PropType<string | string[]>,
 	},
 	/**
 	 * Open dropdown on focus

package/src/components/VvIcon/index.ts

@@ -95,7 +95,7 @@ export const VvIconProps = {
 	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/VvNav/VvNav.vue

@@ -4,22 +4,32 @@
 
 	const props = defineProps(VvNavProps)
 	const emit = defineEmits(VvNavEvents)
-	const { modifiers } = toRefs(props)
+	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, number] item, id - the clicked item
+	 * @param [NavItem, string] item - the clicked item
 	 */
-	function onClick(item: NavItem, id: string) {
+	function onClick(item: NavItem) {
 		if (!item.disabled) {
 			emit('click', item)
-			activeItem.value = id
+			// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+			activeItem.value = item.id!
 		}
 	}
 </script>
@@ -28,8 +38,8 @@
 	<nav :class="bemCssClasses">
 		<ul class="vv-nav__menu" role="menu" aria-busy="true">
 			<li
-				v-for="(navItem, index) in items"
-				:key="`nav-item_${index}`"
+				v-for="navItem in localItems"
+				:key="navItem.id"
 				class="vv-nav__item"
 				role="presentation"
 			>
@@ -41,12 +51,12 @@
 						tabindex: 0,
 					}"
 					:class="{
-						current: activeItem == `nav-item_${index}`,
+						current: activeItem == navItem.id,
 						disabled: navItem.disabled,
 					}"
 					class="vv-nav__item-label"
 					v-on="navItem.on || {}"
-					@click="onClick(navItem, `nav-item_${index}`)"
+					@click="onClick(navItem)"
 				>
 					{{ navItem.title }}
 				</VvAction>

package/src/components/VvNav/index.ts

@@ -1,6 +1,7 @@
 import { ModifiersProps } from '@/props'
 
 export type NavItem = {
+	id?: string
 	title: string
 	to?: string | { [key: string]: unknown }
 	href?: string
@@ -11,7 +12,7 @@ export type NavItem = {
 export const VvNavProps = {
 	...ModifiersProps,
 	items: {
-		type: Array<NavItem>,
+		type: Array as PropType<NavItem[]>,
 		required: true,
 		default: () => [],
 	},

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/common/HintSlot.ts

@@ -1,11 +1,11 @@
 import type { Component, ExtractPropTypes, Slots, Ref } from 'vue'
 
 /**
- * Merge errors from Array<string> to string errors separated from new line (\n)
- * @param {Array<string> | string} errors
+ * Merge errors from string[] to string errors separated from new line (\n)
+ * @param {string[] | string} errors
  * @returns {string}
  */
-function joinLines(errors: Array<string> | string | unknown[] | undefined) {
+function joinLines(errors: string[] | string | unknown[] | undefined) {
 	if (Array.isArray(errors)) {
 		return errors.filter((e) => isString(e)).join(' ')
 	}

package/src/props/index.ts

@@ -126,7 +126,7 @@ export const ModifiersProps = {
 	/**
 	 * Component BEM modifiers
 	 */
-	modifiers: [String, Array] as PropType<string | Array<string>>,
+	modifiers: [String, Array] as PropType<string | string[]>,
 }
 
 export const HintProps = {
@@ -138,7 +138,7 @@ export const OptionsProps = {
 	 * List of options, can be string[] or object[]
 	 */
 	options: {
-		type: Array as PropType<Array<Option | string>>,
+		type: Array as PropType<(Option | string)[]>,
 		default: () => [],
 	},
 	/**

package/src/stories/Button/Button.settings.ts

@@ -69,6 +69,24 @@ export const argTypes = {
 			defaultValue: { summary: false },
 		},
 	},
+	value: {
+		description: 'The button value',
+		type: {
+			summary: ['string', 'boolean', 'number'],
+		},
+		table: {
+			defaultValue: { summary: 'undefined' },
+		},
+	},
+	uncheckedValue: {
+		description: 'The button unchecked value',
+		type: {
+			summary: ['string', 'boolean', 'number'],
+		},
+		table: {
+			defaultValue: { summary: 'undefined' },
+		},
+	},
 	...UnselectableArgTypes,
 	...LoadingArgTypes,
 	...DisabledArgTypes,
@@ -89,6 +107,9 @@ export const argTypes = {
 	rel: {
 		description: 'The rel attribute of the button',
 		control: { type: 'text' },
+		type: {
+			summary: 'boolean',
+		},
 		table: {
 			defaultValue: { summary: 'noopener noreferrer' },
 		},

package/src/stories/Button/Button.stories.mdx

@@ -13,19 +13,19 @@ import { argTypes, defaultArgs } from './Button.settings'
 export const Template = (args, { argTypes }) => ({
 	props: Object.keys(argTypes),
 	data() {
-		return { value: undefined }
+		return { currentValue: undefined }
 	},
 	setup() {
 		return { args }
 	},
 	components: { VvButton },
 	template: /*html*/ `
-		<vv-button v-bind="args" v-model="value" name="my-button" data-testId="element">
+		<vv-button v-bind="args" v-model="currentValue" name="my-button" data-testId="element">
 			<template #before v-if="args.before"><div v-html="args.before"></div></template>
 			<template #default v-if="args.default"><div v-html="args.default"></div></template>
 			<template #after v-if="args.after"><div v-html="args.after"></div></template>
 		</vv-button>
-		<div v-if="args.toggle" class="mt-md">Value: {{ value }}</div>`,
+		<div v-if="args.toggle" class="mt-md">Value: {{ currentValue }}</div>`,
 })
 
 <Canvas>

package/src/stories/Button/ButtonToggle.stories.mdx

@@ -24,6 +24,68 @@ import { argTypes, defaultArgs } from './Button.settings'
 	</Story>
 </Canvas>
 
+<Canvas>
+	<Story
+		name="True / False"
+		args={{
+			toggle: true,
+			value: true,
+			uncheckedValue: false,
+		}}
+		argTypes={{
+			toggle: {
+				control: {
+					disable: true,
+				},
+			},
+			value: {
+				control: {
+					disable: true,
+				},
+			},
+			uncheckedValue: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
+<Canvas>
+	<Story
+		name="Yes / No"
+		args={{
+			toggle: true,
+			value: 'yes',
+			uncheckedValue: 'no',
+		}}
+		argTypes={{
+			toggle: {
+				control: {
+					disable: true,
+				},
+			},
+			value: {
+				control: {
+					disable: true,
+				},
+			},
+			uncheckedValue: {
+				control: {
+					disable: true,
+				},
+			},
+		}}
+		play={defaultTest}
+	>
+		{Template.bind()}
+	</Story>
+</Canvas>
+
 <Canvas>
 	<Story
 		name="Unselectable"

package/src/stories/Tab/Tab.settings.ts

@@ -0,0 +1,41 @@
+import { VvTabProps } from '@/components/VvTab'
+
+export const defaultArgs = {
+	...propsToObject(VvTabProps),
+	items: [
+		{
+			title: 'Item 1',
+			href: 'javascript:void(0)',
+		},
+		{
+			title: 'Item 2',
+			to: 'about',
+		},
+		{
+			id: 'tab-3',
+			title: 'Item 3',
+			to: 'contacts',
+			on: {
+				click: () => {
+					// eslint-disable-next-line no-console
+					console.log('clicked Item 3')
+				},
+			},
+		},
+	],
+}
+
+export const defaultArgTypes = {
+	tabId: {
+		description: 'Slot by tab-id',
+		control: {
+			type: 'text',
+		},
+		table: {
+			category: 'Slots',
+			type: {
+				summary: 'html',
+			},
+		},
+	},
+}