@volverjs/ui-vue 0.0.6-beta.4 → 0.0.6-beta.6

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/index.ts

@@ -12,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/index.ts

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

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/types/group.d.ts

@@ -23,12 +23,14 @@ export interface InputGroupState extends GroupState {
  * State shared in a group of buttons
  */
 export interface ButtonGroupState extends GroupState {
-	modelValue: Ref<string | Array<string> | undefined>
+	modelValue: Ref<
+		string | number | boolean | (string | number | boolean)[] | undefined
+	>
 	disabled: Ref<boolean>
 	toggle: Ref<boolean>
 	multiple: Ref<boolean>
 	unselectable: Ref<boolean>
-	itemModifiers?: Ref<string | Array<string> | undefined>
+	modifiers: Ref<string | string[] | undefined>
 }
 
 /**
@@ -37,6 +39,6 @@ export interface ButtonGroupState extends GroupState {
 export interface AccordionGroupState extends GroupState {
 	collapse: Ref<boolean>
 	disabled: Ref<boolean>
-	modifiers: Ref<Array<string> | string | undefined>
+	modifiers: Ref<string[] | string | undefined>
 	not: Ref<boolean>
 }