@volverjs/ui-vue 0.0.4 → 0.0.5-beta.2

package/src/components/VvAccordion/VvAccordion.vue

@@ -6,11 +6,7 @@
 
 <script setup lang="ts">
 	import { nanoid } from 'nanoid'
-	import {
-		VvAccordionEvents,
-		VvAccordionProps,
-		useGroupProps,
-	} from '@/components/VvAccordion'
+	import { VvAccordionEvents, VvAccordionProps, useGroupProps } from '.'
 
 	// props, attrs and emit
 	const props = defineProps(VvAccordionProps)
@@ -29,23 +25,28 @@
 		collapse,
 		modelValue,
 		isInGroup,
+		not,
 	} = useGroupProps(props, emit)
 	const localModelValue = ref(false)
 	const isOpen = computed({
 		get: () => {
+			let toReturn = modelValue.value as boolean
 			if (isInGroup.value) {
 				if (collapse.value && Array.isArray(modelValue.value)) {
-					return modelValue.value.includes(accordionName.value)
+					toReturn = modelValue.value.includes(accordionName.value)
+				} else {
+					toReturn = modelValue.value === accordionName.value
 				}
-				return modelValue.value === accordionName.value
+			} else if (modelValue.value === undefined) {
+				// localModelValue is used when the accordion is not in a group
+				toReturn = localModelValue.value
 			}
-			// localModelValue is used when the accordion is not in a group
-			if (modelValue.value === undefined) {
-				return localModelValue.value
-			}
-			return modelValue.value as boolean
+			return not.value ? !toReturn : toReturn
 		},
 		set: (newValue) => {
+			if (not.value) {
+				newValue = !newValue
+			}
 			if (isInGroup.value) {
 				if (collapse.value && Array.isArray(modelValue.value)) {
 					if (newValue) {
@@ -73,7 +74,7 @@
 	})
 
 	// styles
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-accordion',
 		modifiers,
 		computed(() => ({
@@ -86,25 +87,21 @@
 </script>
 
 <template>
-	<details
-		:id="accordionName"
-		:class="bemCssClasses"
-		:open="isOpen"
-		@click.prevent="onClick()"
-	>
+	<details :id="accordionName" :class="bemCssClasses" :open="isOpen">
 		<summary
 			:aria-controls="accordionName"
 			:aria-expanded="isOpen"
-			class="vv-collapse__summary"
+			class="vv-accordion__summary"
+			@click.prevent="onClick()"
 		>
 			<!-- @slot Slot for title -->
 			<slot name="summary" v-bind="{ open: isOpen }">
 				{{ title }}
 			</slot>
 		</summary>
-		<div :aria-hidden="!isOpen" class="vv-collapse__content">
+		<div :aria-hidden="!isOpen" class="vv-accordion__content">
 			<!-- @slot Slot for content  -->
-			<slot name="details" v-bind="{ open: isOpen }">
+			<slot name="default" v-bind="{ open: isOpen }">
 				{{ content }}
 			</slot>
 		</div>

package/src/components/VvAccordion/index.ts

@@ -1,6 +1,6 @@
 import type { ExtractPropTypes, Ref } from 'vue'
-import type { AccordionGroupState } from '@/types/group'
-import { INJECTION_KEY_ACCORDION_GROUP } from '@/constants'
+import type { AccordionGroupState } from '../../types/group'
+import { INJECTION_KEY_ACCORDION_GROUP } from '../../constants'
 
 export const VvAccordionProps = {
 	/**
@@ -30,6 +30,10 @@ export const VvAccordionProps = {
 	 * If true, the accordion will be disabled
 	 */
 	disabled: Boolean,
+	/**
+	 * If true, the accordion will be opened by default
+	 */
+	not: Boolean,
 }
 
 export const VvAccordionEvents = ['update:modelValue']
@@ -52,20 +56,24 @@ export function useGroupProps(
 
 	// group props
 	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
-	const disabled = getGroupOrLocalRef('disabled', props) as Ref<boolean>
+	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),
+	)
 
 	return {
 		// group props
 		modelValue,
-		disabled,
+		not,
 		isInGroup,
 		group,
 		collapse,
 		modifiers,
+		disabled,
 		// local props
 		title,
 		content,

package/src/components/VvAccordionGroup/VvAccordionGroup.vue

@@ -6,20 +6,17 @@
 
 <script setup lang="ts">
 	import type { Ref } from 'vue'
-	import type { AccordionGroupState } from '@/types/group'
-	import { INJECTION_KEY_ACCORDION_GROUP } from '@/constants'
-	import VvAccordion from '@/components/VvAccordion/VvAccordion.vue'
-	import {
-		VvAccordionGroupProps,
-		VvAccordionGroupEvents,
-	} from '@/components/VvAccordionGroup/'
+	import type { AccordionGroupState } from '../../types/group'
+	import { INJECTION_KEY_ACCORDION_GROUP } from '../../constants'
+	import VvAccordion from '../VvAccordion/VvAccordion.vue'
+	import { VvAccordionGroupProps, VvAccordionGroupEvents } from '.'
 
 	// props and emit
 	const props = defineProps(VvAccordionGroupProps)
 	const emit = defineEmits(VvAccordionGroupEvents)
 
 	// data
-	const { disabled, collapse, modifiers, itemModifiers, items } =
+	const { disabled, collapse, modifiers, itemModifiers, items, not } =
 		toRefs(props)
 	watchEffect(() => {
 		if (typeof props.modelValue === 'string' && collapse.value) {
@@ -29,7 +26,18 @@
 			)
 		}
 	})
-	const localModelValue: Ref<string[]> = ref([])
+	let localModelValue: Ref<string[]> = ref([])
+	watch(
+		() => props.storeKey,
+		(newKey) => {
+			if (newKey) {
+				localModelValue = useStorage(newKey, localModelValue.value)
+			} else {
+				localModelValue = ref([])
+			}
+		},
+		{ immediate: true },
+	)
 	const modelValue = computed({
 		get: () => {
 			if (props.modelValue !== undefined) {
@@ -67,10 +75,11 @@
 		disabled,
 		collapse,
 		modifiers: itemModifiers,
+		not,
 	})
 
 	// styles
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-accordion-group',
 		modifiers,
 		computed(() => ({

package/src/components/VvAccordionGroup/index.ts

@@ -35,6 +35,14 @@ export const VvAccordionGroupProps = {
 	 * If true, the accordion items will be disabled
 	 */
 	disabled: Boolean,
+	/**
+	 * If true, the accordion items will be opened by default
+	 */
+	not: Boolean,
+	/**
+	 * Enable local storage persistence
+	 */
+	storeKey: String,
 }
 
 export const VvAccordionGroupEvents = ['update:modelValue']

package/src/components/VvAction/VvAction.vue

@@ -5,12 +5,12 @@
 </script>
 
 <script setup lang="ts">
-	import { VvActionProps, VvActionEvents } from '@/components/VvAction'
-	import { ActionTag } from '@/constants'
+	import { VvActionProps, VvActionEvents } from '.'
+	import { ActionTag } from '../../constants'
 
-	// props and emits
+	// props and emit
 	const props = defineProps(VvActionProps)
-	const emits = defineEmits(VvActionEvents)
+	const emit = defineEmits(VvActionEvents)
 
 	// inject plugin
 	const volver = useVolver()
@@ -102,7 +102,7 @@
 			return
 		}
 		dropdownEventBus?.emit('click', e)
-		emits('click', e)
+		emit('click', e)
 	}
 
 	/**
@@ -110,7 +110,7 @@
 	 */
 	const onMouseover = (e: Event) => {
 		dropdownEventBus?.emit('mouseover', e)
-		emits('mouseover', e)
+		emit('mouseover', e)
 	}
 
 	/**
@@ -118,7 +118,7 @@
 	 */
 	const onMouseleave = (e: Event) => {
 		dropdownEventBus?.emit('mouseleave', e)
-		emits('mouseleave', e)
+		emit('mouseleave', e)
 	}
 </script>
 

package/src/components/VvAction/index.ts

@@ -1,4 +1,4 @@
-import { ActionProps } from '@/props'
+import { ActionProps } from '../../props'
 
 export const VvActionEvents = ['click', 'mouseover', 'mouseleave']
 

package/src/components/VvBadge/VvBadge.vue

@@ -5,11 +5,11 @@
 </script>
 
 <script setup lang="ts">
-	import { VvBadgeProps } from '@/components/VvBadge'
+	import { VvBadgeProps } from '.'
 
 	const props = defineProps(VvBadgeProps)
 	const { modifiers } = toRefs(props)
-	const bemCssClasses = useBemModifiers('vv-badge', modifiers)
+	const bemCssClasses = useModifiers('vv-badge', modifiers)
 </script>
 
 <template>

package/src/components/VvBadge/index.ts

@@ -1,4 +1,4 @@
-import { ModifiersProps } from '@/props'
+import { ModifiersProps } from '../../props'
 
 export const VvBadgeProps = {
 	...ModifiersProps,

package/src/components/VvBreadcrumb/VvBreadcrumb.vue

@@ -5,12 +5,12 @@
 </script>
 
 <script setup lang="ts">
-	import { useBemModifiers } from '@/composables/useModifiers'
-	import { VvBreadcrumbProps } from '@/components/VvBreadcrumb'
+	import { useModifiers } from '../../composables/useModifiers'
+	import { VvBreadcrumbProps } from '.'
 
 	const props = defineProps(VvBreadcrumbProps)
 	const { modifiers } = toRefs(props)
-	const bemCssClasses = useBemModifiers('vv-breadcrumb', modifiers)
+	const bemCssClasses = useModifiers('vv-breadcrumb', modifiers)
 </script>
 
 <template>

package/src/components/VvButton/VvButton.vue

@@ -5,14 +5,10 @@
 </script>
 
 <script setup lang="ts">
-	import VvIcon from '@/components/VvIcon/VvIcon.vue'
-	import VvAction from '@/components/VvAction/VvAction.vue'
-	import {
-		VvButtonEvents,
-		VvButtonProps,
-		useGroupProps,
-	} from '@/components/VvButton'
-	import { Side } from '@/constants'
+	import VvIcon from '../VvIcon/VvIcon.vue'
+	import VvAction from '../VvAction/VvAction.vue'
+	import { VvButtonEvents, VvButtonProps, useGroupProps } from '.'
+	import { Side } from '../../constants'
 
 	// props, attrs, slots and emit
 	const props = defineProps(VvButtonProps)
@@ -58,12 +54,16 @@
 	 * @description Define component classes with BEM style.
 	 * @returns {Array} The component classes.
 	 */
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-button',
 		modifiers,
 		computed(() => ({
-			reverse: [Side.right, Side.bottom].includes(iconPosition.value),
-			column: [Side.top, Side.bottom].includes(iconPosition.value),
+			reverse: [Side.right, Side.bottom].includes(
+				iconPosition.value as Side,
+			),
+			column: [Side.top, Side.bottom].includes(
+				iconPosition.value as Side,
+			),
 			'icon-only': Boolean(
 				icon?.value && !label?.value && !slots.default,
 			),

package/src/components/VvButton/index.ts

@@ -1,13 +1,13 @@
 import type { Ref, PropType, ExtractPropTypes } from 'vue'
-import type { ButtonGroupState } from '@/types/group'
+import type { ButtonGroupState } from '../../types/group'
 import {
 	ActionProps,
 	IdProps,
 	LoadingProps,
 	ModifiersProps,
 	UnselectableProps,
-} from '@/props'
-import { INJECTION_KEY_BUTTON_GROUP, Side } from '@/constants'
+} from '../../props'
+import { INJECTION_KEY_BUTTON_GROUP, Side } from '../../constants'
 
 export const VvButtonEvents = ['update:modelValue']
 
@@ -25,7 +25,7 @@ export const VvButtonProps = {
 	 * Button icon position
 	 */
 	iconPosition: {
-		type: String as PropType<Side>,
+		type: String as PropType<`${Side}`>,
 		default: Side.left,
 		validator: (value: Side) => Object.values(Side).includes(value),
 	},
@@ -66,14 +66,12 @@ export function useGroupProps(
 	const modelValue = getGroupOrLocalRef('modelValue', props, emit) as Ref<
 		string | Array<string> | undefined
 	>
-	const disabled = getGroupOrLocalRef('disabled', props) as Ref<boolean>
 	const toggle = getGroupOrLocalRef('toggle', props) as Ref<boolean>
 	const unselectable = getGroupOrLocalRef(
 		'unselectable',
 		props,
 	) as Ref<boolean>
-	const multiple = group?.value?.multiple ?? ref(false)
-
+	const multiple = computed(() => group?.value.multiple.value ?? false)
 	const modifiers = computed(() => {
 		const localValue = localModifiers?.value
 			? Array.isArray(localModifiers.value)
@@ -87,19 +85,22 @@ export function useGroupProps(
 			: []
 		return [...localValue, ...groupValue]
 	})
+	const disabled = computed(() =>
+		Boolean(props.disabled || group?.value?.disabled.value),
+	)
 
 	return {
 		// group props
 		group,
 		isInGroup,
 		modelValue,
-		disabled,
 		toggle,
 		unselectable,
 		multiple,
+		modifiers,
+		disabled,
 		// local props
 		id,
-		modifiers,
 		pressed,
 		iconPosition,
 		icon,

package/src/components/VvButtonGroup/VvButtonGroup.vue

@@ -5,12 +5,9 @@
 </script>
 
 <script setup lang="ts">
-	import type { ButtonGroupState } from '@/types/group'
-	import { INJECTION_KEY_BUTTON_GROUP } from '@/constants'
-	import {
-		VvButtonGroupProps,
-		VvButtonGroupEvents,
-	} from '@/components/VvButtonGroup'
+	import type { ButtonGroupState } from '../../types/group'
+	import { INJECTION_KEY_BUTTON_GROUP } from '../../constants'
+	import { VvButtonGroupProps, VvButtonGroupEvents } from '.'
 
 	// emit and props
 	const emit = defineEmits(VvButtonGroupEvents)
@@ -66,7 +63,7 @@
 	})
 
 	// style
-	const bemCssClasses = useBemModifiers('vv-button-group', modifiers)
+	const bemCssClasses = useModifiers('vv-button-group', modifiers)
 </script>
 
 <template>

package/src/components/VvButtonGroup/index.ts

@@ -1,4 +1,4 @@
-import { DisabledProps, ModifiersProps, UnselectableProps } from '@/props'
+import { DisabledProps, ModifiersProps, UnselectableProps } from '../../props'
 
 export const VvButtonGroupProps = {
 	...ModifiersProps,

package/src/components/VvCard/VvCard.vue

@@ -5,14 +5,14 @@
 </script>
 
 <script setup lang="ts">
-	import { VvCardProps } from '@/components/VvCard'
+	import { VvCardProps } from '.'
 
 	// props and attrs
 	const props = defineProps(VvCardProps)
 
 	// styles
 	const { modifiers } = toRefs(props)
-	const bemCssClasses = useBemModifiers('vv-card', modifiers)
+	const bemCssClasses = useModifiers('vv-card', modifiers)
 </script>
 
 <template>

package/src/components/VvCheckbox/VvCheckbox.vue

@@ -5,12 +5,8 @@
 </script>
 
 <script setup lang="ts">
-	import {
-		VvCheckboxProps,
-		VvCheckboxEvents,
-		useGroupProps,
-	} from '@/components/VvCheckbox'
-	import { HintSlotFactory } from '@/components/common/HintSlot'
+	import { VvCheckboxProps, VvCheckboxEvents, useGroupProps } from '.'
+	import { HintSlotFactory } from '../common/HintSlot'
 
 	// props, emits and slots
 	const props = defineProps(VvCheckboxProps)
@@ -108,7 +104,7 @@
 
 	// styles
 	const { modifiers } = toRefs(props)
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-checkbox',
 		modifiers,
 		computed(() => ({

package/src/components/VvCheckbox/index.ts

@@ -1,7 +1,7 @@
 import type { ExtractPropTypes, Ref } from 'vue'
-import type { InputGroupState } from '@/types/group'
-import { CheckboxRadioProps, ModifiersProps } from '@/props'
-import { INJECTION_KEY_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,
@@ -39,10 +39,14 @@ export function useGroupProps(
 
 	// global props
 	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
-	const readonly = getGroupOrLocalRef('readonly', props) as Ref<boolean>
-	const disabled = getGroupOrLocalRef('disabled', props) as Ref<boolean>
 	const valid = getGroupOrLocalRef('valid', props) as Ref<boolean>
 	const invalid = getGroupOrLocalRef('invalid', props) as Ref<boolean>
+	const readonly = computed(() =>
+		Boolean(props.readonly || group?.value?.disabled.value),
+	)
+	const disabled = computed(() =>
+		Boolean(props.disabled || group?.value?.disabled.value),
+	)
 
 	return {
 		// local props
@@ -53,9 +57,9 @@ export function useGroupProps(
 		group,
 		isInGroup,
 		modelValue,
-		readonly,
-		disabled,
 		valid,
 		invalid,
+		readonly,
+		disabled,
 	}
 }

package/src/components/VvCheckboxGroup/VvCheckboxGroup.vue

@@ -5,15 +5,12 @@
 </script>
 
 <script setup lang="ts">
-	import type { Option } from '@/types/generic'
-	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 {
-		VvCheckboxGroupProps,
-		VvCheckboxGroupEvents,
-	} from '@/components/VvCheckboxGroup'
+	import type { Option } from '../../types/generic'
+	import type { InputGroupState } from '../../types/group'
+	import { INJECTION_KEY_CHECK_GROUP } from '../../constants'
+	import { HintSlotFactory } from '../common/HintSlot'
+	import VvCheckbox from '../VvCheckbox/VvCheckbox.vue'
+	import { VvCheckboxGroupProps, VvCheckboxGroupEvents } from '.'
 
 	// props, emit and slots
 	const props = defineProps(VvCheckboxGroupProps)
@@ -38,7 +35,7 @@
 	const { getOptionLabel, getOptionValue } = useOptions(props)
 
 	// stypes
-	const bemCssClasses = useBemModifiers(
+	const bemCssClasses = useModifiers(
 		'vv-checkbox-group',
 		modifiers,
 		computed(() => ({

package/src/components/VvCheckboxGroup/index.ts

@@ -1,4 +1,4 @@
-import { CheckboxRadioGroupProps } from '@/props'
+import { CheckboxRadioGroupProps } from '../../props'
 
 export const VvCheckboxGroupProps = CheckboxRadioGroupProps