@volverjs/ui-vue 0.0.10-beta.35 → 0.0.10-beta.37

package/src/components/VvNav/VvNav.vue

@@ -1,41 +1,48 @@
 <script setup lang="ts">
-	import { VvNavProps, VvNavEvents } from '@/components/VvNav'
-	import VvNavItem from './VvNavItem.vue'
+import VvNavItem from './VvNavItem.vue'
+import { VvNavProps, VvNavEvents } from '@/components/VvNav'
 
-	const props = defineProps(VvNavProps)
-	const { modifiers } = toRefs(props)
+const props = defineProps(VvNavProps)
+const emit = defineEmits(VvNavEvents)
 
-	const emit = defineEmits(VvNavEvents)
-	const onClick = (event: Event) => {
-		const target = event.target as HTMLElement
-		if (target?.dataset.index) {
-			const index = parseInt(target.dataset.index)
-			const item = props.items?.[index]
-			if (!item || item?.disabled) {
-				return
-			}
-			emit('click', item)
-		}
-	}
+const { modifiers } = toRefs(props)
 
-	// bem css classes
-	const bemCssClasses = useModifiers('vv-nav', modifiers)
+function onClick(event: Event) {
+    const target = event.target as HTMLElement
+    if (target?.dataset.index) {
+        const index = Number.parseInt(target.dataset.index)
+        const item = props.items?.[index]
+        if (!item || item?.disabled) {
+            return
+        }
+        emit('click', item)
+    }
+}
+
+// bem css classes
+const bemCssClasses = useModifiers('vv-nav', modifiers)
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvNav',
+}
 </script>
 
 <template>
-	<nav :class="bemCssClasses">
-		<ul class="vv-nav__menu" role="menu" @click.stop="onClick">
-			<slot>
-				<VvNavItem
-					v-for="({ on = {}, data, ...item }, index) in items"
-					:key="index"
-					:data-index="index"
-					v-bind="item"
-					v-on="on"
-				>
-					<slot name="item" v-bind="{ item, data, index }" />
-				</VvNavItem>
-			</slot>
-		</ul>
-	</nav>
+    <nav :class="bemCssClasses">
+        <ul class="vv-nav__menu" role="menu" @click.stop="onClick">
+            <slot>
+                <VvNavItem
+                    v-for="({ on = {}, data, ...item }, index) in items"
+                    :key="index"
+                    :data-index="index"
+                    v-bind="item"
+                    v-on="on"
+                >
+                    <slot name="item" v-bind="{ item, data, index }" />
+                </VvNavItem>
+            </slot>
+        </ul>
+    </nav>
 </template>

package/src/components/VvNav/VvNavItem.vue

@@ -1,18 +1,18 @@
-<script lang="ts">
-	export default {
-		name: 'VvNavItem',
-		inheritAttrs: false,
-	}
+<script setup lang="ts">
+import VvAction from '@/components/VvAction/VvAction.vue'
 </script>
 
-<script setup lang="ts">
-	import VvAction from '@/components/VvAction/VvAction.vue'
+<script lang="ts">
+export default {
+    name: 'VvNavItem',
+    inheritAttrs: false,
+}
 </script>
 
 <template>
-	<li class="vv-nav__item" role="presentation">
-		<VvAction v-bind="$attrs" class="vv-nav__item-label" role="menuitem">
-			<slot />
-		</VvAction>
-	</li>
+    <li class="vv-nav__item" role="presentation">
+        <VvAction v-bind="$attrs" class="vv-nav__item-label" role="menuitem">
+            <slot />
+        </VvAction>
+    </li>
 </template>

package/src/components/VvNav/VvNavSeparator.vue

@@ -1,11 +1,11 @@
 <script lang="ts">
-	export default {
-		name: 'VvNavSeparator',
-	}
+export default {
+    name: 'VvNavSeparator',
+}
 </script>
 
 <template>
-	<li class="vv-nav__separator" role="separator">
-		<slot />
-	</li>
+    <li class="vv-nav__separator" role="separator">
+        <slot />
+    </li>
 </template>

package/src/components/VvNav/index.ts

@@ -1,8 +1,8 @@
 import { ModifiersProps, NavProps } from '@/props'
 
 export const VvNavProps = {
-	...ModifiersProps,
-	...NavProps,
+    ...ModifiersProps,
+    ...NavProps,
 }
 
 export const VvNavEvents = ['click']

package/src/components/VvProgress/VvProgress.vue

@@ -1,33 +1,34 @@
-<script lang="ts">
-	export default {
-		name: 'VvProgress',
-	}
-</script>
-
 <script setup lang="ts">
-	import { VvProgressProps } from '.'
+import { VvProgressProps } from '.'
+
+// props
+const props = defineProps(VvProgressProps)
 
-	// props
-	const props = defineProps(VvProgressProps)
-	const { value, max, label: ariaLabel } = toRefs(props)
-	const indeterminate = computed(() => props.value === undefined)
+const { value, max, label: ariaLabel } = toRefs(props)
+const indeterminate = computed(() => props.value === undefined)
 
-	// styles
-	const { modifiers } = toRefs(props)
-	const bemCssClasses = useModifiers(
-		'vv-progress',
-		modifiers,
-		computed(() => ({ indeterminate: indeterminate.value })),
-	)
+// styles
+const { modifiers } = toRefs(props)
+const bemCssClasses = useModifiers(
+    'vv-progress',
+    modifiers,
+    computed(() => ({ indeterminate: indeterminate.value })),
+)
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvProgress',
+}
 </script>
 
 <template>
-	<progress
-		v-bind="{
-			class: bemCssClasses,
-			ariaLabel,
-			max,
-			value,
-		}"
-	/>
+    <progress
+        v-bind="{
+            class: bemCssClasses,
+            ariaLabel,
+            max,
+            value,
+        }"
+    />
 </template>

package/src/components/VvProgress/index.ts

@@ -1,32 +1,32 @@
 import { ModifiersProps } from '../../props'
 
 export const VvProgressProps = {
-	...ModifiersProps,
-	/**
-	 * Progress value
-	 * This attribute specifies how much of the task that has been completed.
-	 * It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted.
-	 * If there is no value attribute, the progress bar is indeterminate.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-max
-	 */
-	value: {
-		type: [Number, String],
-		default: undefined,
-	},
-	/**
-	 * Progress max
-	 * This attribute describes how much work the task indicated by the progress element requires.
-	 * The max attribute, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-max
-	 */
-	max: {
-		type: [Number, String],
-	},
-	/**
-	 * Progress aria-label
-	 */
-	label: {
-		type: String,
-		required: true,
-	},
+    ...ModifiersProps,
+    /**
+     * Progress value
+     * This attribute specifies how much of the task that has been completed.
+     * It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted.
+     * If there is no value attribute, the progress bar is indeterminate.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-max
+     */
+    value: {
+        type: [Number, String],
+        default: undefined,
+    },
+    /**
+     * Progress max
+     * This attribute describes how much work the task indicated by the progress element requires.
+     * The max attribute, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-max
+     */
+    max: {
+        type: [Number, String],
+    },
+    /**
+     * Progress aria-label
+     */
+    label: {
+        type: String,
+        required: true,
+    },
 }

package/src/components/VvRadio/VvRadio.vue

@@ -1,124 +1,127 @@
-<script lang="ts">
-	export default {
-		name: 'VvRadio',
-	}
-</script>
-
 <script setup lang="ts">
-	import { VvRadioProps, VvRadioEvents, useGroupProps } from '.'
-	import { HintSlotFactory } from '../common/HintSlot'
+import { HintSlotFactory } from '../common/HintSlot'
+import { VvRadioProps, VvRadioEvents, useGroupProps } from '.'
+
+// props, emit and slots
+const props = defineProps(VvRadioProps)
 
-	// props, emit and slots
-	const props = defineProps(VvRadioProps)
-	const emit = defineEmits(VvRadioEvents)
-	const slots = useSlots()
+const emit = defineEmits(VvRadioEvents)
 
-	// props merged with volver defaults (now only for labels)
-	const propsDefaults = useDefaults<typeof VvRadioProps>(
-		'VvRadio',
-		VvRadioProps,
-		props,
-	)
+const slots = useSlots()
 
-	// data
-	const { id, disabled, readonly, modelValue, valid, invalid } =
-		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 VvRadioProps>(
+    'VvRadio',
+    VvRadioProps,
+    props,
+)
 
-	// template refs
-	const input = ref()
+// data
+const { id, disabled, readonly, modelValue, valid, invalid }
+		= useGroupProps(props, emit)
+const hasId = useUniqueId(id)
+const hasHintId = computed(() => `${hasId.value}-hint`)
+const tabindex = computed(() => (isDisabled.value ? -1 : props.tabindex))
 
-	// computed
-	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(() =>
-		Array.isArray(modelValue.value)
-			? contains(props.value, modelValue.value)
-			: equals(props.value, modelValue.value),
-	)
-	const hasValue = computed(() =>
-		['string', 'number', 'boolean'].includes(typeof props.value)
-			? props.value
-			: true,
-	)
-	const localModelValue = computed({
-		get() {
-			return isChecked.value ? hasValue.value : null
-		},
-		set(newValue) {
-			if (Array.isArray(modelValue.value)) {
-				modelValue.value = [props.value]
-			} else {
-				modelValue.value = props.value
-			}
-			emit('change', newValue)
-		},
-	})
+// template refs
+const input = ref()
 
-	// styles
-	const { modifiers } = toRefs(props)
-	const bemCssClasses = useModifiers(
-		'vv-radio',
-		modifiers,
-		computed(() => ({
-			valid: valid.value,
-			invalid: invalid.value,
-			disabled: disabled.value,
-			readonly: readonly.value,
-		})),
-	)
+// computed
+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(() =>
+    Array.isArray(modelValue.value)
+        ? contains(props.value, modelValue.value)
+        : equals(props.value, modelValue.value),
+)
+const hasValue = computed(() =>
+    ['string', 'number', 'boolean'].includes(typeof props.value)
+        ? props.value
+        : true,
+)
+const localModelValue = computed({
+    get() {
+        return isChecked.value ? hasValue.value : null
+    },
+    set(newValue) {
+        if (Array.isArray(modelValue.value)) {
+            modelValue.value = [props.value]
+        }
+        else {
+            modelValue.value = props.value
+        }
+        emit('change', newValue)
+    },
+})
 
-	// hint
-	const {
-		HintSlot,
-		hasHintLabelOrSlot,
-		hasInvalidLabelOrSlot,
-		hintSlotScope,
-	} = HintSlotFactory(propsDefaults, slots)
+// styles
+const { modifiers } = toRefs(props)
+const bemCssClasses = useModifiers(
+    'vv-radio',
+    modifiers,
+    computed(() => ({
+        valid: valid.value,
+        invalid: invalid.value,
+        disabled: disabled.value,
+        readonly: readonly.value,
+    })),
+)
+
+// hint
+const {
+    HintSlot,
+    hasHintLabelOrSlot,
+    hasInvalidLabelOrSlot,
+    hintSlotScope,
+} = HintSlotFactory(propsDefaults, slots)
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvRadio',
+}
 </script>
 
 <template>
-	<label :class="bemCssClasses" :for="hasId">
-		<input
-			:id="hasId"
-			ref="input"
-			v-model="localModelValue"
-			type="radio"
-			class="vv-radio__input"
-			:name="name"
-			:disabled="isDisabled"
-			:value="hasValue"
-			:tabindex="tabindex"
-			:aria-invalid="isInvalid"
-			:aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
-			:aria-errormessage="hasInvalidLabelOrSlot ? hasHintId : undefined"
-		/>
-		<slot :value="modelValue">
-			{{ label }}
-		</slot>
-		<HintSlot :id="hasHintId" class="vv-radio__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="radio"
+            class="vv-radio__input"
+            :name="name"
+            :disabled="isDisabled"
+            :value="hasValue"
+            :tabindex="tabindex"
+            :aria-invalid="isInvalid"
+            :aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
+            :aria-errormessage="hasInvalidLabelOrSlot ? hasHintId : undefined"
+        >
+        <slot :value="modelValue">
+            {{ label }}
+        </slot>
+        <HintSlot :id="hasHintId" class="vv-radio__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>

package/src/components/VvRadio/index.ts

@@ -13,34 +13,34 @@ export type VvRadioPropsType = ExtractPropTypes<typeof VvRadioProps>
  * Merges local and group props
  */
 export function useGroupProps(
-	props: VvRadioPropsType,
-	emit: (event: (typeof VvRadioEvents)[number], value: unknown) => void,
+    props: VvRadioPropsType,
+    emit: (event: (typeof VvRadioEvents)[number], value: unknown) => void,
 ) {
-	const { id } = toRefs(props)
-	const { group, isInGroup, getGroupOrLocalRef } =
-		useInjectedGroupState<InputGroupState>(INJECTION_KEY_RADIO_GROUP)
+    const { id } = toRefs(props)
+    const { group, isInGroup, getGroupOrLocalRef }
+		= useInjectedGroupState<InputGroupState>(INJECTION_KEY_RADIO_GROUP)
 
-	// global props
-	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
-	const valid = getGroupOrLocalRef('valid', props)
-	const invalid = getGroupOrLocalRef('invalid', props)
-	const readonly = computed(() =>
-		Boolean(props.readonly || group?.readonly.value),
-	)
-	const disabled = computed(() =>
-		Boolean(props.disabled || group?.disabled.value),
-	)
+    // global props
+    const modelValue = getGroupOrLocalRef('modelValue', props, emit)
+    const valid = getGroupOrLocalRef('valid', props)
+    const invalid = getGroupOrLocalRef('invalid', props)
+    const readonly = computed(() =>
+        Boolean(props.readonly || group?.readonly.value),
+    )
+    const disabled = computed(() =>
+        Boolean(props.disabled || group?.disabled.value),
+    )
 
-	return {
-		// local props
-		id,
-		// global props
-		group,
-		isInGroup,
-		modelValue,
-		valid,
-		invalid,
-		readonly,
-		disabled,
-	}
+    return {
+        // local props
+        id,
+        // global props
+        group,
+        isInGroup,
+        modelValue,
+        valid,
+        invalid,
+        readonly,
+        disabled,
+    }
 }