@volverjs/ui-vue 0.0.10-beta.23 → 0.0.10-beta.24

package/src/components/VvInputFile/VvInputFile.vue

@@ -12,6 +12,7 @@
 	import VvIcon from '../VvIcon/VvIcon.vue'
 	import HintSlotFactory from '../common/HintSlot'
 	import { VvInputFileProps, type VvInputFileEvents } from '.'
+	import Sortable from 'vuedraggable'
 
 	// props, emit, slots and attrs
 	const props = defineProps(VvInputFileProps)
@@ -66,17 +67,26 @@
 	} = HintSlotFactory(propsDefaults, slots)
 
 	const localModelValue = useVModel(props, 'modelValue', emit)
-	const files = computed(() => {
-		if (
-			!localModelValue.value ||
-			(!Array.isArray(localModelValue.value) &&
-				!(localModelValue.value as File)?.name)
-		) {
-			return []
-		}
-		return Array.isArray(localModelValue.value)
-			? localModelValue.value
-			: [localModelValue.value]
+	const files = computed({
+		get: () => {
+			if (
+				!localModelValue.value ||
+				(!Array.isArray(localModelValue.value) &&
+					!(localModelValue.value as File)?.name)
+			) {
+				return []
+			}
+			return Array.isArray(localModelValue.value)
+				? localModelValue.value
+				: [localModelValue.value]
+		},
+		set: (value) => {
+			if (isMultiple.value) {
+				localModelValue.value = value
+				return
+			}
+			localModelValue.value = value?.[0]
+		},
 	})
 
 	const hasMax = computed(() => {
@@ -250,6 +260,12 @@
 		}
 		return props.iconReplace
 	})
+
+	const onSortEnd = ({ newIndex }: { newIndex: number | null }) => {
+		if (newIndex !== null) {
+			selectedFileIndex.value = newIndex
+		}
+	}
 </script>
 
 <template>
@@ -316,43 +332,51 @@
 			</progress>
 			<VvIcon v-if="hasIconAfter" v-bind="hasIconAfter" />
 		</div>
-		<ul class="vv-input-file__list">
-			<li
-				v-for="(file, index) in files"
-				:key="index"
-				class="vv-input-file__item"
-				:class="{
-					active:
-						index === selectedFileIndex &&
-						hasDropArea &&
-						files.length > 1,
-				}"
-				@click.stop="onClickSelectFile(index)"
-			>
-				<button
-					v-if="hasIconDownload"
-					type="button"
-					class="vv-input-file__item-action"
-					:title="labelDownload"
-					@click.stop="onClickDownloadFile(file)"
+		<Sortable
+			v-model="files"
+			tag="ul"
+			class="vv-input-file__list"
+			item-key="name"
+			:move="() => sortable"
+			@end="onSortEnd"
+		>
+			<template #item="{ element: file, index }">
+				<li
+					class="vv-input-file__item"
+					:class="{
+						active:
+							index === selectedFileIndex &&
+							hasDropArea &&
+							files.length > 1,
+						'cursor-move': sortable,
+					}"
+					@click.stop="onClickSelectFile(index)"
 				>
-					<VvIcon v-bind="hasIconDownload" />
-				</button>
-				<div class="vv-input-file__item-name">
-					{{ file.name }}
-				</div>
-				<small class="vv-input-file__item-info">
-					{{ sizeInKiB(file.size) }} KB
-				</small>
-				<button
-					v-if="!readonly"
-					type="button"
-					class="vv-input-file__item-remove"
-					:title="labelRemove"
-					@click.stop="onClickRemoveFile(index)"
-				/>
-			</li>
-		</ul>
+					<button
+						v-if="hasIconDownload"
+						type="button"
+						class="vv-input-file__item-action"
+						:title="labelDownload"
+						@click.stop="onClickDownloadFile(file)"
+					>
+						<VvIcon v-bind="hasIconDownload" />
+					</button>
+					<div class="vv-input-file__item-name">
+						{{ file.name }}
+					</div>
+					<small class="vv-input-file__item-info">
+						{{ sizeInKiB(file.size) }} KB
+					</small>
+					<button
+						v-if="!readonly"
+						type="button"
+						class="vv-input-file__item-remove"
+						:title="labelRemove"
+						@click.stop="onClickRemoveFile(index)"
+					/>
+				</li>
+			</template>
+		</Sortable>
 		<HintSlot :id="hasHintId" class="vv-input-file__hint">
 			<template v-if="$slots.hint" #hint>
 				<slot name="hint" v-bind="hintSlotScope" />

package/src/components/VvInputFile/index.ts

@@ -32,10 +32,7 @@ export const VvInputFileProps = {
 	 * Input value
 	 */
 	modelValue: {
-		type: Object as PropType<
-			File | UploadedFile | (File | UploadedFile)[] | undefined
-		>,
-		required: true,
+		type: Object as PropType<File | UploadedFile | (File | UploadedFile)[]>,
 	},
 	/**
 	 * Whether to show progress bar
@@ -79,6 +76,10 @@ export const VvInputFileProps = {
 	 * Show drop area
 	 */
 	dropArea: { type: Boolean, default: false },
+	/**
+	 * Enable sorting
+	 */
+	sortable: { type: Boolean, default: false },
 	/**
 	 * Label for add button
 	 */

package/src/components/VvRadio/index.ts

@@ -1,4 +1,4 @@
-import type { ExtractPropTypes, Ref } from 'vue'
+import type { ExtractPropTypes } from 'vue'
 import type { InputGroupState } from '../../types/group'
 import { CheckboxRadioProps } from '../../props'
 import { INJECTION_KEY_RADIO_GROUP } from '../../constants'
@@ -22,13 +22,13 @@ export function useGroupProps(
 
 	// global props
 	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
-	const valid = getGroupOrLocalRef('valid', props) as Ref<boolean>
-	const invalid = getGroupOrLocalRef('invalid', props) as Ref<boolean>
+	const valid = getGroupOrLocalRef('valid', props)
+	const invalid = getGroupOrLocalRef('invalid', props)
 	const readonly = computed(() =>
-		Boolean(props.readonly || group?.value?.readonly.value),
+		Boolean(props.readonly || group?.readonly.value),
 	)
 	const disabled = computed(() =>
-		Boolean(props.disabled || group?.value?.disabled.value),
+		Boolean(props.disabled || group?.disabled.value),
 	)
 
 	return {

package/src/components/VvRadioGroup/VvRadioGroup.vue

@@ -29,8 +29,7 @@
 	const { disabled, readonly, vertical, valid, invalid, modifiers } =
 		toRefs(props)
 
-	useProvideGroupState<InputGroupState>({
-		key: INJECTION_KEY_RADIO_GROUP,
+	useProvideGroupState<InputGroupState>(INJECTION_KEY_RADIO_GROUP, {
 		modelValue,
 		disabled,
 		readonly,

package/src/composables/group/useInjectedGroupState.ts

@@ -1,46 +1,50 @@
-import type { Ref } from 'vue'
-import type GroupState from '../../types/group'
+import type { Ref, InjectionKey } from 'vue'
 
 /**
  * Injects a group state
  */
-export function useInjectedGroupState<GroupStateType extends GroupState>(
-	groupKey: string | symbol,
+export function useInjectedGroupState<GroupStateType>(
+	groupKey: InjectionKey<GroupStateType>,
 ) {
 	// Get group state
-	const group = inject<Ref<GroupStateType> | undefined>(groupKey, undefined)
+	const group = inject<GroupStateType | undefined>(groupKey, undefined)
 
 	// Check if component is in group
-	const isInGroup = computed(() => !isEmpty(group))
+	const isInGroup = computed(() => group !== undefined)
 
 	/**
 	 * Get a group or local property
 	 */
-	function getGroupOrLocalRef<PropsType extends object>(
-		propName: keyof GroupStateType,
-		props: PropsType,
+	function getGroupOrLocalRef<
+		TProps extends object,
+		TName extends keyof GroupStateType,
+	>(
+		propName: TName,
+		props: TProps,
 		emit?: (event: string, ...args: unknown[]) => void,
 	) {
-		if (group?.value) {
-			const groupPropValue = unref(group.value)[propName] as Ref<unknown>
+		const groupPropValue = group?.[propName] as Ref | undefined
+		if (groupPropValue) {
 			return computed({
 				get() {
-					return groupPropValue?.value
+					return groupPropValue.value
 				},
 				set(value: unknown) {
 					groupPropValue.value = value
 				},
-			})
+			}) as GroupStateType[TName]
 		}
-		const propRef = toRef(props, propName as keyof PropsType)
+		const propRef = toRef(props, propName as unknown as keyof TProps)
 		return computed({
 			get() {
 				return propRef.value
 			},
 			set(value: unknown) {
-				if (emit) emit(`update:${propName as string}`, value)
+				if (emit) {
+					emit(`update:${propName as string}`, value)
+				}
 			},
-		})
+		}) as GroupStateType[TName]
 	}
 
 	return {

package/src/composables/group/useProvideGroupState.ts

@@ -1,20 +1,15 @@
-import type GroupState from '../../types/group'
+import type { Ref, InjectionKey } from 'vue'
+import type { Emitter } from 'mitt'
 
 /**
  * Share part of the state of the component with all its children.
- * @param {IGroupState} groupState the group state with all group options
  */
-export function useProvideGroupState<GroupStateType extends GroupState>(
-	groupState: GroupStateType,
-) {
-	if (
-		Object.keys(groupState).some(
-			(k) => k !== 'key' && !isRef(groupState[k]),
-		)
-	)
-		throw Error("One or more groupState props aren't ref.")
-	provide(
-		groupState.key,
-		computed(() => groupState),
-	)
+export function useProvideGroupState<
+	TGroupState extends Record<
+		string,
+		// eslint-disable-next-line @typescript-eslint/no-explicit-any
+		Ref<unknown> | Emitter<any>
+	>,
+>(key: InjectionKey<TGroupState>, groupState: TGroupState) {
+	provide(key, groupState)
 }

package/src/constants.ts

@@ -2,6 +2,12 @@ import type { InjectionKey, Ref } from 'vue'
 import type { Emitter } from 'mitt'
 import type { Volver } from './Volver'
 import type { AlertModifiers } from './types/alert'
+import type {
+	AccordionGroupState,
+	InputGroupState,
+	ButtonGroupState,
+	AlertGroupState,
+} from './types'
 
 export const DEFAULT_ICONIFY_PROVIDER = 'vv'
 
@@ -73,10 +79,18 @@ export enum AnchorTarget {
 export const INJECTION_KEY_VOLVER = Symbol.for('volver') as InjectionKey<Volver>
 
 // groups
-export const INJECTION_KEY_BUTTON_GROUP = Symbol.for('buttonGroup')
-export const INJECTION_KEY_RADIO_GROUP = Symbol.for('radioGroup')
-export const INJECTION_KEY_CHECK_GROUP = Symbol.for('checkGroup')
-export const INJECTION_KEY_ACCORDION_GROUP = Symbol.for('accordionGroup')
+export const INJECTION_KEY_BUTTON_GROUP = Symbol.for(
+	'buttonGroup',
+) as InjectionKey<ButtonGroupState>
+export const INJECTION_KEY_RADIO_GROUP = Symbol.for(
+	'radioGroup',
+) as InjectionKey<InputGroupState>
+export const INJECTION_KEY_CHECK_GROUP = Symbol.for(
+	'checkGroup',
+) as InjectionKey<InputGroupState>
+export const INJECTION_KEY_ACCORDION_GROUP = Symbol.for(
+	'accordionGroup',
+) as InjectionKey<AccordionGroupState>
 
 // dropdown
 export const INJECTION_KEY_DROPDOWN_TRIGGER = Symbol.for(
@@ -112,10 +126,7 @@ export const INJECTION_KEY_DROPDOWN_ACTION = Symbol.for(
 // alert
 export const INJECTION_KEY_ALERT_GROUP = Symbol.for(
 	'alertGroup',
-) as InjectionKey<{
-	name?: Ref<string | undefined>
-	bus?: Emitter<{ close: string }>
-}>
+) as InjectionKey<AlertGroupState>
 export const DEFAULT_ALERT_AUTO_CLOSE = 10000
 export const DEFAULT_ALERT_MODIFIERS = 'info'
 export const DEFAULT_ALERT_DISMISSABLE = true
@@ -130,9 +141,3 @@ export const DefaultAlertIconMap = new Map<AlertModifiers, string>([
 	['warning', DEFAULT_ALERT_WARNING_ICON],
 	['danger', DEFAULT_ALERT_DANGER_ICON],
 ])
-// {
-// 	success: DEFAULT_ALERT_SUCCESS_ICON,
-// 	info: DEFAULT_ALERT_INFO_ICON,
-// 	warning: DEFAULT_ALERT_WARNING_ICON,
-// 	danger: DEFAULT_ALERT_DANGER_ICON,
-// }

package/src/stories/AccordionGroup/AccordionGroup.test.ts

@@ -29,12 +29,22 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 
 	// open
 	if (!args.disabled && args.items && args.items.length > 0) {
-		expect(firstChild.open).toBe(args.not ? true : false)
+		expect(firstChild.open).toBe(false)
 		expect(firstChildSummary).toBeClicked()
 		await sleep()
-		expect(firstChild.open).toBe(args.not ? false : true)
+		expect(firstChild.open).toBe(true)
 		if (firstChild.open) {
-			if (args.collapse) {
+			if (args.not) {
+				expect(JSON.stringify(JSON.parse(value.innerText))).toBe(
+					JSON.stringify(
+						[
+							...args.items.map(
+								(item: { name: string }) => item.name,
+							),
+						].splice(1),
+					),
+				)
+			} else if (args.collapse) {
 				expect(JSON.stringify(JSON.parse(value.innerText))).toBe(
 					JSON.stringify([args.items[0].name]),
 				)
@@ -42,13 +52,9 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 				expect(value.innerText).toBe(args.items[0].name)
 			}
 		}
-		expect(firstChildSummary.getAttribute('aria-expanded')).toBe(
-			args.not ? 'false' : 'true',
-		)
+		expect(firstChildSummary.getAttribute('aria-expanded')).toBe('true')
 		const content = firstChild.lastChild as HTMLElement
-		expect(content.getAttribute('aria-hidden')).toBe(
-			args.not ? 'true' : 'false',
-		)
+		expect(content.getAttribute('aria-hidden')).toBe('false')
 	}
 
 	// accessibility

package/src/stories/AccordionGroup/AccordionGroupSlots.stories.ts

@@ -46,7 +46,7 @@ export const Default: Story = {
 				<vv-accordion name="a-3" title="Details 3" :content="content" />
 			</vv-accordion-group>
 			<div class="mt-24"  >
-				Opened: <span data-testId="value">{{ selected }}</span>
+				{{ args.not ? 'Closed' : 'Opened'}}: <span data-testId="value">{{ selected }}</span>
 			</div>
 		`,
 	}),

package/src/types/group.ts

@@ -1,18 +1,11 @@
 import type { Ref } from 'vue'
-
-/**
- * State shared for a group of elements
- */
-export default interface GroupState {
-	// The key of the group
-	[itemKey: string]: Ref<unknown> | unknown | undefined
-	key: string | number | symbol
-}
+import type { Emitter } from 'mitt'
 
 /**
  * State shared in a group of inputs
  */
-export interface InputGroupState extends GroupState {
+export type InputGroupState = {
+	modelValue: Ref<unknown>
 	readonly: Ref<boolean>
 	disabled: Ref<boolean>
 	valid: Ref<boolean>
@@ -22,7 +15,7 @@ export interface InputGroupState extends GroupState {
 /**
  * State shared in a group of buttons
  */
-export interface ButtonGroupState extends GroupState {
+export type ButtonGroupState = {
 	modelValue: Ref<
 		string | number | boolean | (string | number | boolean)[] | undefined
 	>
@@ -36,9 +29,24 @@ export interface ButtonGroupState extends GroupState {
 /**
  * State shared in a group of accordions
  */
-export interface AccordionGroupState extends GroupState {
-	collapse: Ref<boolean>
+export type AccordionGroupBusEvents = {
+	toggle: { name: string; value: boolean }
+	register: { name: string }
+	unregister: { name: string }
+	expand: { name?: string | string[] }
+	collapse: { name?: string | string[] }
+}
+export type AccordionGroupState = {
 	disabled: Ref<boolean>
 	modifiers: Ref<string[] | string | undefined>
-	not: Ref<boolean>
+	bus: Emitter<AccordionGroupBusEvents>
+}
+
+/**
+ * State shared in a group of alerts
+ */
+export type AlertGroupBusEvents = { close: string }
+export type AlertGroupState = {
+	name?: Ref<string | undefined>
+	bus?: Emitter<AlertGroupBusEvents>
 }