@volverjs/ui-vue 0.0.10-beta.5 → 0.0.10-beta.50

package/src/components/VvButtonGroup/VvButtonGroup.vue

@@ -1,74 +1,82 @@
-<script lang="ts">
-	export default {
-		name: 'VvButtonGroup',
-	}
-</script>
-
 <script setup lang="ts">
-	import type { ButtonGroupState } from '../../types/group'
-	import { INJECTION_KEY_BUTTON_GROUP } from '../../constants'
-	import { VvButtonGroupProps, VvButtonGroupEvents } from '.'
+import type { ButtonGroupState } from '../../types/group'
+import { VvButtonGroupEvents, VvButtonGroupProps } from '.'
+import { INJECTION_KEY_BUTTON_GROUP } from '../../constants'
+
+const props = defineProps(VvButtonGroupProps)
 
-	// emit and props
-	const emit = defineEmits(VvButtonGroupEvents)
-	const props = defineProps(VvButtonGroupProps)
+// emit and props
+const emit = defineEmits(VvButtonGroupEvents)
 
-	// data
-	const {
-		disabled,
-		toggle,
-		modifiers,
-		multiple,
-		unselectable,
-		itemModifiers,
-	} = toRefs(props)
-	watchEffect(() => {
-		if (typeof props.modelValue === 'string' && multiple.value) {
-			// eslint-disable-next-line
-			console.warn(
-				`[VvButtonGroup]: modelValue is a string but multiple is true.`,
-			)
-		}
-	})
-	const modelValue = computed({
-		get: () => {
-			if (!multiple.value) {
-				return Array.isArray(props.modelValue)
-					? props.modelValue[0]
-					: props.modelValue
-			}
-			return props.modelValue
-		},
-		set: (newValue) => {
-			if (
-				newValue !== undefined &&
-				(Array.isArray(props.modelValue) || multiple.value) &&
-				!Array.isArray(newValue)
-			) {
-				return emit('update:modelValue', [newValue])
-			}
-			return emit('update:modelValue', newValue)
-		},
-	})
+// data
+const {
+    disabled,
+    toggle,
+    modifiers,
+    multiple,
+    unselectable,
+    itemModifiers,
+} = toRefs(props)
+watchEffect(() => {
+    if (typeof props.modelValue === 'string' && multiple.value) {
+        console.warn(
+            `[VvButtonGroup]: modelValue is a string but multiple is true.`,
+        )
+    }
+})
+const modelValue = computed({
+    get: () => {
+        if (!multiple.value) {
+            return Array.isArray(props.modelValue)
+                ? props.modelValue[0]
+                : props.modelValue
+        }
+        return props.modelValue
+    },
+    set: (newValue) => {
+        if (
+            newValue !== undefined
+            && (Array.isArray(props.modelValue) || multiple.value)
+            && !Array.isArray(newValue)
+        ) {
+            return emit('update:modelValue', [newValue])
+        }
+        return emit('update:modelValue', newValue)
+    },
+})
 
-	// provide
-	useProvideGroupState<ButtonGroupState>({
-		key: INJECTION_KEY_BUTTON_GROUP,
-		modelValue,
-		disabled,
-		toggle,
-		multiple,
-		unselectable,
-		modifiers: itemModifiers,
-	})
+// provide
+useGroupStateProvide<ButtonGroupState>(INJECTION_KEY_BUTTON_GROUP, {
+    modelValue,
+    disabled,
+    toggle,
+    multiple,
+    unselectable,
+    modifiers: itemModifiers,
+})
 
-	// style
-	const bemCssClasses = useModifiers('vv-button-group', modifiers)
+// style
+const bemCssClasses = useModifiers('vv-button-group', modifiers)
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvButtonGroup',
+}
 </script>
 
 <template>
-	<div :class="bemCssClasses" role="group">
-		<!-- @slot Default slot -->
-		<slot />
-	</div>
+    <fieldset :class="bemCssClasses" role="group">
+        <legend
+            v-if="$slots.legend || legendLabel"
+            class="vv-button-group__legend"
+        >
+            <!-- @slot Legend slot -->
+            <slot name="legend">
+                {{ legendLabel }}
+            </slot>
+        </legend>
+        <!-- @slot Default slot -->
+        <slot />
+    </fieldset>
 </template>

package/src/components/VvButtonGroup/index.ts

@@ -1,28 +1,29 @@
 import { DisabledProps, ModifiersProps, UnselectableProps } from '../../props'
 
 export const VvButtonGroupProps = {
-	...ModifiersProps,
-	...DisabledProps,
-	...UnselectableProps,
-	/**
-	 * String or String[] of css classes (modifiers) that will be provided to each button'
-	 */
-	itemModifiers: {
-		type: [String, Array] as PropType<string | string[]>,
-		default: '',
-	},
-	toggle: { type: Boolean, default: false },
-	multiple: { type: Boolean, default: false },
-	modelValue: {
-		type: [String, Number, Boolean, Array] as PropType<
-			| string
-			| number
-			| boolean
-			| (string | number | boolean)[]
-			| undefined
-		>,
-		default: undefined,
-	},
+    ...ModifiersProps,
+    ...DisabledProps,
+    ...UnselectableProps,
+    legendLabel: { type: String },
+    /**
+     * String or String[] of css classes (modifiers) that will be provided to each button'
+     */
+    itemModifiers: {
+        type: [String, Array] as PropType<string | string[]>,
+        default: '',
+    },
+    toggle: { type: Boolean, default: false },
+    multiple: { type: Boolean, default: false },
+    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/VvCard.vue

@@ -1,37 +1,37 @@
-<script lang="ts">
-	export default {
-		name: 'VvCard',
-	}
-</script>
-
 <script setup lang="ts">
-	import { VvCardProps } from '.'
+import { VvCardProps } from '.'
 
-	// props and attrs
-	const props = defineProps(VvCardProps)
+// props and attrs
+const props = defineProps(VvCardProps)
 
-	// styles
-	const { modifiers } = toRefs(props)
-	const bemCssClasses = useModifiers('vv-card', modifiers)
+// styles
+const { modifiers } = toRefs(props)
+const bemCssClasses = useModifiers('vv-card', modifiers)
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvCard',
+}
 </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>
+    <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>
 </template>

package/src/components/VvCard/index.ts

@@ -1,6 +1,6 @@
 import { ModifiersProps } from '@/props'
 
 export const VvCardProps = {
-	...ModifiersProps,
-	title: String,
+    ...ModifiersProps,
+    title: String,
 }

package/src/components/VvCheckbox/VvCheckbox.vue

@@ -1,198 +1,200 @@
-<script lang="ts">
-	export default {
-		name: 'VvCheckbox',
-	}
-</script>
-
 <script setup lang="ts">
-	import { VvCheckboxProps, VvCheckboxEvents, useGroupProps } from '.'
-	import { HintSlotFactory } from '../common/HintSlot'
+import { useGroupProps, VvCheckboxEvents, VvCheckboxProps } from '.'
+import { HintSlotFactory } from '../common/HintSlot'
+
+// props, emits and slots
+const props = defineProps(VvCheckboxProps)
 
-	// props, emits and slots
-	const props = defineProps(VvCheckboxProps)
-	const emit = defineEmits(VvCheckboxEvents)
-	const slots = useSlots()
+const emit = defineEmits(VvCheckboxEvents)
 
-	// props merged with volver defaults (now only for labels)
-	const propsDefaults = useDefaults<typeof VvCheckboxProps>(
-		'VvCheckbox',
-		VvCheckboxProps,
-		props,
-	)
+const slots = useSlots()
 
-	// data
-	const {
-		id,
-		disabled,
-		readonly,
-		valid,
-		invalid,
-		propsSwitch,
-		modelValue,
-		indeterminate,
-		isInGroup,
-	} = useGroupProps(props, emit)
-	const hasId = useUniqueId(id)
-	const hasHintId = computed(() => `${hasId.value}-hint`)
-	const tabindex = computed(() => (isDisabled.value ? -1 : props.tabindex))
+// props merged with volver defaults (now only for labels)
+const propsDefaults = useDefaults<typeof VvCheckboxProps>(
+    'VvCheckbox',
+    VvCheckboxProps,
+    props,
+)
 
-	// template ref
-	const input = ref()
+// data
+const {
+    id,
+    disabled,
+    readonly,
+    valid,
+    invalid,
+    propsSwitch,
+    modelValue,
+    indeterminate,
+    isInGroup,
+} = useGroupProps(props, emit)
+const hasId = useUniqueId(id)
+const hasHintId = computed(() => `${hasId.value}-hint`)
+const tabindex = computed(() => (isDisabled.value ? -1 : props.tabindex))
 
-	// computed
-	const isBinary = computed(
-		() => props.uncheckedValue !== undefined && !isInGroup.value,
-	)
-	const isDisabled = computed(() => disabled.value || readonly.value)
-	const isInvalid = computed(() => {
-		if (invalid.value === true) {
-			return true
-		}
-		if (valid.value === true) {
-			return false
-		}
-		return undefined
-	})
-	const isChecked = computed(() => {
-		if (isBinary.value) {
-			return modelValue.value === props.value
-		}
-		return Array.isArray(modelValue.value)
-			? contains(props.value, modelValue.value)
-			: equals(props.value, modelValue.value)
-	})
-	const isIndeterminated = computed(() => {
-		if (indeterminate.value) {
-			return true
-		}
-		if (
-			!isChecked.value &&
-			isBinary.value &&
-			props.uncheckedValue !== modelValue.value
-		) {
-			return true
-		}
-		return false
-	})
-	const hasValue = computed(() => {
-		if (isBinary.value) {
-			return undefined
-		}
-		return ['string', 'number', 'boolean'].includes(typeof props.value)
-			? props.value
-			: true
-	})
-	const localModelValue = computed({
-		get() {
-			return isChecked.value
-		},
-		set(newValue) {
-			if (isBinary.value) {
-				modelValue.value = newValue ? props.value : props.uncheckedValue
-			} else if (Array.isArray(modelValue.value) || isInGroup.value) {
-				const toReturn = new Set(
-					Array.isArray(modelValue.value)
-						? modelValue.value
-						: modelValue.value !== undefined
-						? [modelValue.value]
-						: [],
-				)
-				if (newValue) {
-					toReturn.add(props.value)
-				} else {
-					toReturn.delete(props.value)
-				}
-				modelValue.value = [...toReturn]
-			} else {
-				modelValue.value = newValue ? props.value : undefined
-			}
-			emit('change', newValue)
-		},
-	})
+// template ref
+const input = ref()
 
-	// styles
-	const { modifiers } = toRefs(props)
-	const bemCssClasses = useModifiers(
-		'vv-checkbox',
-		modifiers,
-		computed(() => ({
-			switch: propsSwitch.value,
-			valid: valid.value,
-			invalid: invalid.value,
-			disabled: disabled.value,
-			readonly: readonly.value,
-			indeterminate: indeterminate.value,
-		})),
-	)
+// computed
+const isBinary = computed(
+    () => props.uncheckedValue !== undefined && !isInGroup.value,
+)
+const isDisabled = computed(() => disabled.value || readonly.value)
+const isInvalid = computed(() => {
+    if (invalid.value === true) {
+        return true
+    }
+    if (valid.value === true) {
+        return false
+    }
+    return undefined
+})
+const isChecked = computed(() => {
+    if (isBinary.value) {
+        return modelValue.value === props.value
+    }
+    return Array.isArray(modelValue.value)
+        ? contains(props.value, modelValue.value)
+        : equals(props.value, modelValue.value)
+})
+const isIndeterminated = computed(() => {
+    if (indeterminate.value) {
+        return true
+    }
+    if (
+        !isChecked.value
+        && isBinary.value
+        && props.uncheckedValue !== modelValue.value
+    ) {
+        return true
+    }
+    return false
+})
+const hasValue = computed(() => {
+    if (isBinary.value) {
+        return undefined
+    }
+    return ['string', 'number', 'boolean'].includes(typeof props.value)
+        ? props.value
+        : true
+})
+const localModelValue = computed({
+    get() {
+        return isChecked.value
+    },
+    set(newValue) {
+        if (isBinary.value) {
+            modelValue.value = newValue ? props.value : props.uncheckedValue
+        }
+        else if (Array.isArray(modelValue.value) || isInGroup.value) {
+            const currentValue = modelValue.value ?? []
+            const toReturn = new Set(
+                Array.isArray(currentValue) ? currentValue : [currentValue],
+            )
+            if (newValue) {
+                toReturn.add(props.value)
+            }
+            else {
+                toReturn.delete(props.value)
+            }
+            modelValue.value = [...toReturn]
+        }
+        else {
+            modelValue.value = newValue ? props.value : undefined
+        }
+        emit('change', newValue)
+    },
+})
 
-	watchEffect(() => {
-		if (isBinary.value && Array.isArray(modelValue.value)) {
-			// eslint-disable-next-line no-console
-			console.warn(
-				`[VvCheckbox] The model value is an array but the component is in binary mode.`,
-			)
-		}
-	})
+// styles
+const { modifiers } = toRefs(props)
+const bemCssClasses = useModifiers(
+    'vv-checkbox',
+    modifiers,
+    computed(() => ({
+        switch: propsSwitch.value,
+        valid: valid.value,
+        invalid: invalid.value,
+        disabled: disabled.value,
+        readonly: readonly.value,
+        indeterminate: indeterminate.value,
+    })),
+)
 
-	// indeterminate
-	watch(
-		() => isIndeterminated.value,
-		(newValue) => {
-			if (newValue) {
-				input.value.indeterminate = true
-			} else {
-				input.value.indeterminate = false
-			}
-		},
-	)
-	onMounted(() => {
-		if (isIndeterminated.value) {
-			input.value.indeterminate = true
-		}
-	})
+watchEffect(() => {
+    if (isBinary.value && Array.isArray(modelValue.value)) {
+        console.warn(
+            `[VvCheckbox] The model value is an array but the component is in binary mode.`,
+        )
+    }
+})
 
-	// hint
-	const {
-		HintSlot,
-		hasHintLabelOrSlot,
-		hasInvalidLabelOrSlot,
-		hintSlotScope,
-	} = HintSlotFactory(propsDefaults, slots)
+// indeterminate
+watch(
+    () => isIndeterminated.value,
+    (newValue) => {
+        if (newValue) {
+            input.value.indeterminate = true
+        }
+        else {
+            input.value.indeterminate = false
+        }
+    },
+)
+onMounted(() => {
+    if (isIndeterminated.value) {
+        input.value.indeterminate = true
+    }
+})
+
+// hint
+const {
+    HintSlot,
+    hasHintLabelOrSlot,
+    hasInvalidLabelOrSlot,
+    hintSlotScope,
+} = HintSlotFactory(propsDefaults, slots)
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvCheckbox',
+}
 </script>
 
 <template>
-	<label :class="bemCssClasses" :for="hasId">
-		<input
-			:id="hasId"
-			ref="input"
-			v-model="localModelValue"
-			type="checkbox"
-			class="vv-checkbox__input"
-			:name="name"
-			:disabled="isDisabled"
-			:value="hasValue"
-			:tabindex="tabindex"
-			:aria-invalid="isInvalid"
-			:aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
-			:aria-errormessage="hasInvalidLabelOrSlot ? hasHintId : undefined"
-		/>
-		<!-- @slot Use this slot for check label -->
-		<slot :value="modelValue">
-			{{ label }}
-		</slot>
-		<HintSlot :id="hasHintId" class="vv-checkbox__hint">
-			<template v-if="$slots.hint" #hint>
-				<slot name="hint" v-bind="hintSlotScope" />
-			</template>
-			<template v-if="$slots.loading" #loading>
-				<slot name="loading" v-bind="hintSlotScope" />
-			</template>
-			<template v-if="$slots.valid" #valid>
-				<slot name="valid" v-bind="hintSlotScope" />
-			</template>
-			<template v-if="$slots.invalid" #invalid>
-				<slot name="invalid" v-bind="hintSlotScope" />
-			</template>
-		</HintSlot>
-	</label>
+    <label :class="bemCssClasses" :for="hasId">
+        <input
+            :id="hasId"
+            ref="input"
+            v-model="localModelValue"
+            type="checkbox"
+            class="vv-checkbox__input"
+            :name="name"
+            :disabled="isDisabled"
+            :value="hasValue"
+            :tabindex="tabindex"
+            :aria-invalid="isInvalid"
+            :aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
+            :aria-errormessage="hasInvalidLabelOrSlot ? hasHintId : undefined"
+        >
+        <!-- @slot Use this slot for check label -->
+        <slot :value="modelValue">
+            {{ label }}
+        </slot>
+        <HintSlot :id="hasHintId" class="vv-checkbox__hint">
+            <template v-if="$slots.hint" #hint>
+                <slot name="hint" v-bind="hintSlotScope" />
+            </template>
+            <template v-if="$slots.loading" #loading>
+                <slot name="loading" v-bind="hintSlotScope" />
+            </template>
+            <template v-if="$slots.valid" #valid>
+                <slot name="valid" v-bind="hintSlotScope" />
+            </template>
+            <template v-if="$slots.invalid" #invalid>
+                <slot name="invalid" v-bind="hintSlotScope" />
+            </template>
+        </HintSlot>
+    </label>
 </template>