@volverjs/ui-vue 0.0.3-beta.4 → 0.0.4

package/src/components/VvButton/index.ts

@@ -1,113 +1,38 @@
 import type { Ref, PropType, ExtractPropTypes } from 'vue'
-import type IButtonGroupState from '@/composables/group/types/IButtonGroupState'
-import { DisabledProps, ModifiersProps, UnselectableProps } from '@/props'
-import { VV_BUTTON_GROUP } from '@/constants'
-
-export enum ButtonIconPosition {
-	left = 'left',
-	right = 'right',
-	top = 'top',
-	bottom = 'bottom',
-}
-
-export enum ButtonType {
-	button = 'button',
-	submit = 'submit',
-	reset = 'reset',
-}
-
-export enum ButtonTag {
-	nuxtLink = 'nuxt-link',
-	routerLink = 'router-link',
-	a = 'a',
-	button = 'button',
-}
-
-export enum ButtonTarget {
-	_blank = '_blank',
-	_self = '_self',
-	_parent = '_parent',
-	_top = '_top',
-}
+import type { ButtonGroupState } from '@/types/group'
+import {
+	ActionProps,
+	IdProps,
+	LoadingProps,
+	ModifiersProps,
+	UnselectableProps,
+} from '@/props'
+import { INJECTION_KEY_BUTTON_GROUP, Side } from '@/constants'
 
 export const VvButtonEvents = ['update:modelValue']
 
 export const VvButtonProps = {
+	...ActionProps,
+	...IdProps,
 	...ModifiersProps,
-	...DisabledProps,
 	...UnselectableProps,
+	...LoadingProps,
 	/**
 	 * Button icon
 	 */
-	icon: {
-		type: [String, Object],
-		default: '',
-	},
+	icon: [String, Object],
 	/**
 	 * Button icon position
 	 */
 	iconPosition: {
-		type: String as PropType<ButtonIconPosition>,
-		default: ButtonIconPosition.left,
-		validator: (value: string) => value in ButtonIconPosition,
+		type: String as PropType<Side>,
+		default: Side.left,
+		validator: (value: Side) => Object.values(Side).includes(value),
 	},
-	/**
-	 * Button label
-	 */
-	label: [String, Number],
-	/**
-	 * Loading status
-	 */
-	loading: Boolean,
 	/**
 	 * Loading icon
 	 */
 	loadingIcon: { type: String, default: 'eos-icons:bubble-loading' },
-	/**
-	 * Loading label
-	 */
-	loadingLabel: {
-		type: String,
-		default: 'Loading...',
-	},
-	/**
-	 * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
-	 * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
-	 */
-	to: {
-		type: [String, Object],
-	},
-	/**
-	 * Link href
-	 */
-	href: String,
-	/**
-	 * Link target
-	 */
-	target: {
-		type: String as PropType<ButtonTarget>,
-		validator: (value: string) => value in ButtonTarget,
-	},
-	active: Boolean,
-	/**
-	 * Button pressed mode
-	 */
-	pressed: Boolean,
-	/**
-	 * Link rel
-	 */
-	rel: {
-		type: String,
-		default: 'noopener noreferrer',
-	},
-	/**
-	 * Button type
-	 */
-	type: {
-		type: String,
-		default: ButtonType.button,
-		validator: (value: string) => value in ButtonType,
-	},
 	toggle: {
 		type: Boolean,
 		default: false,
@@ -125,10 +50,11 @@ export function useGroupProps(
 	emit: (event: (typeof VvButtonEvents)[number], value: unknown) => void,
 ) {
 	const { group, isInGroup, getGroupOrLocalRef } =
-		useInjectedGroupState<IButtonGroupState>(VV_BUTTON_GROUP)
+		useInjectedGroupState<ButtonGroupState>(INJECTION_KEY_BUTTON_GROUP)
 
 	// local props
 	const {
+		id,
 		iconPosition,
 		icon,
 		label,
@@ -152,12 +78,12 @@ export function useGroupProps(
 		const localValue = localModifiers?.value
 			? Array.isArray(localModifiers.value)
 				? 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]
+				: group.value.itemModifiers.value.split(' ')
 			: []
 		return [...localValue, ...groupValue]
 	})
@@ -172,6 +98,7 @@ export function useGroupProps(
 		unselectable,
 		multiple,
 		// local props
+		id,
 		modifiers,
 		pressed,
 		iconPosition,

package/src/components/VvButtonGroup/VvButtonGroup.vue

@@ -5,8 +5,8 @@
 </script>
 
 <script setup lang="ts">
-	import type IButtonGroupState from '@/composables/group/types/IButtonGroupState'
-	import { VV_BUTTON_GROUP } from '@/constants'
+	import type { ButtonGroupState } from '@/types/group'
+	import { INJECTION_KEY_BUTTON_GROUP } from '@/constants'
 	import {
 		VvButtonGroupProps,
 		VvButtonGroupEvents,
@@ -55,26 +55,23 @@
 	})
 
 	// provide
-	const groupState: IButtonGroupState = {
-		key: VV_BUTTON_GROUP,
+	useProvideGroupState<ButtonGroupState>({
+		key: INJECTION_KEY_BUTTON_GROUP,
 		modelValue,
 		disabled,
 		toggle,
 		multiple,
 		unselectable,
 		itemModifiers,
-	}
-	useProvideGroupState(groupState)
+	})
 
 	// style
-	const { bemCssClasses } = useBemModifiers('vv-button-group', {
-		modifiers,
-	})
+	const bemCssClasses = useBemModifiers('vv-button-group', modifiers)
 </script>
 
 <template>
 	<div :class="bemCssClasses" role="group">
-		<!-- @slot Buttons slot -->
+		<!-- @slot Default slot -->
 		<slot />
 	</div>
 </template>

package/src/components/VvCard/VvCard.vue

@@ -11,23 +11,26 @@
 	const props = defineProps(VvCardProps)
 
 	// styles
-	const { bemCssClasses } = useBemModifiers('vv-card', {
-		modifiers: props.modifiers,
-	})
+	const { modifiers } = toRefs(props)
+	const bemCssClasses = useBemModifiers('vv-card', modifiers)
 </script>
 
 <template>
 	<article :class="bemCssClasses">
 		<header v-if="$slots.header || title" class="vv-card__header">
+			<!-- @slot Title slot -->
 			<slot name="header">
 				{{ title }}
 			</slot>
 		</header>
+		<!-- @slot Default slot -->
 		<slot />
 		<div v-if="$slots.content" class="vv-card__content">
+			<!-- @slot Content slot -->
 			<slot name="content" />
 		</div>
 		<footer v-if="$slots.footer" class="vv-card__footer">
+			<!-- @slot Footer slot -->
 			<slot name="footer" />
 		</footer>
 	</article>

package/src/components/VvCheckbox/VvCheckbox.vue

@@ -5,7 +5,6 @@
 </script>
 
 <script setup lang="ts">
-	import { nanoid } from 'nanoid'
 	import {
 		VvCheckboxProps,
 		VvCheckboxEvents,
@@ -20,6 +19,7 @@
 
 	// data
 	const {
+		id,
 		disabled,
 		readonly,
 		valid,
@@ -29,7 +29,7 @@
 		indeterminate,
 		isInGroup,
 	} = useGroupProps(props, emit)
-	const id = computed(() => String(props.id || nanoid()))
+	const hasId = useUniqueId(id)
 	const tabindex = computed(() => (isDisabled.value ? -1 : props.tabindex))
 
 	// template ref
@@ -107,14 +107,19 @@
 	})
 
 	// styles
-	const { bemCssClasses } = useBemModifiers('vv-checkbox', {
-		switch: propsSwitch,
-		valid,
-		invalid,
-		disabled,
-		readonly,
-		indeterminate,
-	})
+	const { modifiers } = toRefs(props)
+	const bemCssClasses = useBemModifiers(
+		'vv-checkbox',
+		modifiers,
+		computed(() => ({
+			switch: propsSwitch.value,
+			valid: valid.value,
+			invalid: invalid.value,
+			disabled: disabled.value,
+			readonly: readonly.value,
+			indeterminate: indeterminate.value,
+		})),
+	)
 
 	watchEffect(() => {
 		if (isBinary.value && Array.isArray(modelValue.value)) {
@@ -147,9 +152,9 @@
 </script>
 
 <template>
-	<label :class="bemCssClasses" :for="id">
+	<label :class="bemCssClasses" :for="hasId">
 		<input
-			:id="id"
+			:id="hasId"
 			ref="input"
 			v-model="localModelValue"
 			type="checkbox"

package/src/components/VvCheckbox/index.ts

@@ -1,10 +1,11 @@
 import type { ExtractPropTypes, Ref } from 'vue'
-import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
-import { CheckboxRadioProps } from '@/props'
-import { VV_CHECK_GROUP } from '@/constants'
+import type { InputGroupState } from '@/types/group'
+import { CheckboxRadioProps, ModifiersProps } from '@/props'
+import { INJECTION_KEY_CHECK_GROUP } from '@/constants'
 
 export const VvCheckboxProps = {
 	...CheckboxRadioProps,
+	...ModifiersProps,
 	/**
 	 * If true, the input will be indeterminated
 	 */
@@ -31,10 +32,10 @@ export function useGroupProps(
 	emit: (event: (typeof VvCheckboxEvents)[number], value: unknown) => void,
 ) {
 	const { group, isInGroup, getGroupOrLocalRef } =
-		useInjectedGroupState<IInputGroupState>(VV_CHECK_GROUP)
+		useInjectedGroupState<InputGroupState>(INJECTION_KEY_CHECK_GROUP)
 
 	// local props
-	const { switch: propsSwitch, indeterminate } = toRefs(props)
+	const { id, switch: propsSwitch, indeterminate } = toRefs(props)
 
 	// global props
 	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
@@ -45,6 +46,7 @@ export function useGroupProps(
 
 	return {
 		// local props
+		id,
 		propsSwitch,
 		indeterminate,
 		// global props

package/src/components/VvCheckboxGroup/VvCheckboxGroup.vue

@@ -6,8 +6,8 @@
 
 <script setup lang="ts">
 	import type { Option } from '@/types/generic'
-	import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
-	import { VV_CHECK_GROUP } from '@/constants'
+	import type { InputGroupState } from '@/types/group'
+	import { INJECTION_KEY_CHECK_GROUP } from '@/constants'
 	import { HintSlotFactory } from '@/components/common/HintSlot'
 	import VvCheckbox from '@/components/VvCheckbox/VvCheckbox.vue'
 	import {
@@ -22,29 +22,33 @@
 
 	// data
 	const modelValue = useVModel(props, 'modelValue', emit)
-	const { disabled, readonly, vertical, valid, invalid } = toRefs(props)
+	const { disabled, readonly, vertical, valid, invalid, modifiers } =
+		toRefs(props)
 
-	const groupState: IInputGroupState = {
-		key: VV_CHECK_GROUP,
+	useProvideGroupState<InputGroupState>({
+		key: INJECTION_KEY_CHECK_GROUP,
 		modelValue,
 		disabled,
 		readonly,
 		valid,
 		invalid,
-	}
-	useProvideGroupState(groupState)
+	})
 
 	// options
 	const { getOptionLabel, getOptionValue } = useOptions(props)
 
 	// stypes
-	const { bemCssClasses: hasClass } = useBemModifiers('vv-checkbox-group', {
-		disabled,
-		readonly,
-		horizontal: computed(() => !vertical.value),
-		valid,
-		invalid,
-	})
+	const bemCssClasses = useBemModifiers(
+		'vv-checkbox-group',
+		modifiers,
+		computed(() => ({
+			disabled: disabled.value,
+			readonly: readonly.value,
+			horizontal: !vertical.value,
+			valid: valid.value,
+			invalid: invalid.value,
+		})),
+	)
 
 	// methods
 	const getOptionProps = (option: string | Option, index: number) => {
@@ -59,21 +63,19 @@
 </script>
 
 <template>
-	<fieldset :class="hasClass">
+	<fieldset :class="bemCssClasses">
 		<legend v-if="label" v-text="label" />
 		<div class="vv-checkbox-group__wrapper">
 			<!-- #region options set up -->
 			<template v-if="options.length > 0">
-				<vv-checkbox
+				<VvCheckbox
 					v-for="(option, index) in options"
 					:key="index"
 					v-bind="getOptionProps(option, index)"
 				/>
 			</template>
-			<!-- #endregion options set up -->
-			<!-- #region default -->
+			<!-- #endregion -->
 			<slot v-else />
-			<!-- #endregion default -->
 		</div>
 		<HintSlot class="vv-checkbox-group__hint" />
 	</fieldset>