@volverjs/ui-vue 0.0.10-beta.4 → 0.0.10-beta.41

package/src/components/VvDropdown/VvDropdownAction.vue

@@ -1,46 +1,44 @@
-<script lang="ts">
-	export default {
-		name: 'VvDropdownAction',
-	}
-</script>
-
 <script setup lang="ts">
-	import VvAction from '../VvAction/VvAction.vue'
-	import VvDropdownItem from '../VvDropdown/VvDropdownItem.vue'
-	import { ActionProps, ModifiersProps } from '../../props'
+import VvAction from '../VvAction/VvAction.vue'
+import VvDropdownItem from '../VvDropdown/VvDropdownItem.vue'
+import { ActionProps, ModifiersProps } from '../../props'
 
-	// props
-	const props = defineProps({
-		...ActionProps,
-		...ModifiersProps,
-	})
+// props
+const props = defineProps({
+    ...ActionProps,
+    ...ModifiersProps,
+})
 
-	/**
-	 * @description Define component classes with BEM style.
-	 * @returns {Array} The component classes.
-	 */
-	const { modifiers } = toRefs(props)
-	const bemCssClasses = useModifiers('vv-dropdown-action', modifiers)
+/**
+ * @description Define component classes with BEM style.
+ * @returns {Array} The component classes.
+ */
+const { modifiers } = toRefs(props)
+const bemCssClasses = useModifiers('vv-dropdown-action', modifiers)
 </script>
 
+export default {
+    name: 'VvDropdownAction',
+}
+
 <template>
-	<VvDropdownItem>
-		<VvAction
-			v-bind="{
-				disabled,
-				pressed,
-				active,
-				type,
-				to,
-				href,
-				target,
-				rel,
-			}"
-			:class="bemCssClasses"
-		>
-			<slot>
-				{{ label }}
-			</slot>
-		</VvAction>
-	</VvDropdownItem>
+    <VvDropdownItem>
+        <VvAction
+            v-bind="{
+                disabled,
+                pressed,
+                active,
+                type,
+                to,
+                href,
+                target,
+                rel,
+            }"
+            :class="bemCssClasses"
+        >
+            <slot>
+                {{ label }}
+            </slot>
+        </VvAction>
+    </VvDropdownItem>
 </template>

package/src/components/VvDropdown/VvDropdownItem.vue

@@ -1,32 +1,36 @@
-<script lang="ts">
-	export default {
-		name: 'VvDropdownItem',
-	}
-</script>
-
 <script setup lang="ts">
-	const { role, expanded } = useInjectedDropdownItem()
-	const element = ref(null)
-	useProvideDropdownAction({ expanded })
-	const hovered = useElementHover(element)
-	const { focused } = useFocus(element)
-	const { focused: focusedWithin } = useFocusWithin(element)
+import { VvDropdownItemProps } from '.'
+
+const props = defineProps(VvDropdownItemProps)
 
-	// focus item on hover
-	watch(hovered, (newValue) => {
-		if (newValue) {
-			focused.value = true
-		}
-	})
+const { role, expanded } = useInjectedDropdownItem()
+const element = ref(null)
+useProvideDropdownAction({ expanded })
+const hovered = useElementHover(element)
+const { focused } = useFocus(element)
+const { focused: focusedWithin } = useFocusWithin(element)
+
+// focus item on hover
+watch(hovered, (newValue) => {
+    if (newValue && props.focusOnHover) {
+        focused.value = true
+    }
+})
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvDropdownItem',
+}
 </script>
 
 <template>
-	<div
-		v-bind="{ role }"
-		ref="element"
-		class="vv-dropdown__item"
-		:class="{ 'focus-visible': focused || focusedWithin }"
-	>
-		<slot />
-	</div>
+    <div
+        v-bind="{ role }"
+        ref="element"
+        class="vv-dropdown__item"
+        :class="{ 'focus-visible': focused || focusedWithin }"
+    >
+        <slot />
+    </div>
 </template>

package/src/components/VvDropdown/VvDropdownOptgroup.vue

@@ -1,18 +1,19 @@
-<script lang="ts">
-	export default {
-		name: 'VvDropdownOptgroup',
-	}
+<script setup lang="ts">
+import { LabelProps } from '../../props'
+
+const props = defineProps({
+    ...LabelProps,
+})
 </script>
 
-<script setup lang="ts">
-	import { LabelProps } from '../../props'
-	const props = defineProps({
-		...LabelProps,
-	})
+<script lang="ts">
+export default {
+    name: 'VvDropdownOptgroup',
+}
 </script>
 
 <template>
-	<li class="vv-dropdown-optgroup" role="presentation" tabindex="-1">
-		{{ props.label }}
-	</li>
+    <li class="vv-dropdown-optgroup" role="presentation" tabindex="-1">
+        {{ props.label }}
+    </li>
 </template>

package/src/components/VvDropdown/VvDropdownOption.vue

@@ -1,72 +1,55 @@
-<script lang="ts">
-	export default {
-		name: 'VvDropdownOption',
-	}
-</script>
-
 <script setup lang="ts">
-	import VvDropdownItem from './VvDropdownItem.vue'
-	import {
-		DisabledProps,
-		ModifiersProps,
-		SelectedProps,
-		UnselectableProps,
-	} from '../../props'
+import VvDropdownItem from './VvDropdownItem.vue'
+import { VvDropdownOptionProps } from '.'
 
-	// props
-	const props = defineProps({
-		...DisabledProps,
-		...SelectedProps,
-		...UnselectableProps,
-		...ModifiersProps,
-		deselectHintLabel: {
-			type: String,
-		},
-		selectHintLabel: {
-			type: String,
-		},
-		selectedHintLabel: {
-			type: String,
-		},
-	})
+// props
+const props = defineProps(VvDropdownOptionProps)
 
-	// style
-	const { modifiers } = toRefs(props)
-	const bemCssClasses = useModifiers(
-		'vv-dropdown-option',
-		modifiers,
-		computed(() => ({
-			disabled: props.disabled,
-			selected: props.selected,
-			unselectable: props.unselectable && props.selected,
-		})),
-	)
+// style
+const { modifiers } = toRefs(props)
+const bemCssClasses = useModifiers(
+    'vv-dropdown-option',
+    modifiers,
+    computed(() => ({
+        disabled: props.disabled,
+        selected: props.selected,
+        unselectable: props.unselectable && props.selected,
+    })),
+)
 
-	// hint
-	const hintLabel = computed(() => {
-		if (props.selected) {
-			return props.unselectable
-				? props.deselectHintLabel
-				: props.selectedHintLabel
-		}
-		if (!props.disabled) {
-			return props.selectHintLabel
-		}
-	})
+// hint
+const hintLabel = computed(() => {
+    if (props.selected) {
+        return props.unselectable
+            ? props.deselectHintLabel
+            : props.selectedHintLabel
+    }
+    if (!props.disabled) {
+        return props.selectHintLabel
+    }
+    return ''
+})
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvDropdownOption',
+}
 </script>
 
 <template>
-	<VvDropdownItem
-		:class="bemCssClasses"
-		:tabindex="disabled ? -1 : 0"
-		:aria-selected="selected"
-		:aria-disabled="disabled"
-	>
-		<slot />
-		<span class="vv-dropdown-option__hint" :title="hintLabel">
-			<slot name="hint" v-bind="{ disabled, selected, unselectable }">
-				{{ hintLabel }}
-			</slot>
-		</span>
-	</VvDropdownItem>
+    <VvDropdownItem
+        :class="bemCssClasses"
+        :tabindex="disabled ? -1 : 0"
+        :aria-selected="selected"
+        :aria-disabled="disabled"
+        :focus-on-hover="focusOnHover"
+    >
+        <slot />
+        <span class="vv-dropdown-option__hint" :title="hintLabel">
+            <slot name="hint" v-bind="{ disabled, selected, unselectable }">
+                {{ hintLabel }}
+            </slot>
+        </span>
+    </VvDropdownItem>
 </template>

package/src/components/VvDropdown/index.ts

@@ -1,32 +1,66 @@
 import type { PropType } from 'vue'
-import { DropdownProps, IdProps, ModifiersProps } from '../../props'
+import {
+    DropdownProps,
+    IdProps,
+    DisabledProps,
+    ModifiersProps,
+    SelectedProps,
+    UnselectableProps,
+} from '../../props'
 import { DropdownRole } from '../../constants'
 
 export const VvDropdownProps = {
-	...IdProps,
-	...DropdownProps,
-	...ModifiersProps,
-	/**
-	 * Show / hide dropdown programmatically
-	 */
-	modelValue: {
-		type: Boolean,
-		default: undefined,
-	},
-	/**
-	 * Dropdown trigger element
-	 */
-	reference: {
-		type: Object as PropType<HTMLElement | null>,
-		default: null,
-	},
-	/**
-	 * Dropdown role
-	 */
-	role: {
-		type: String as PropType<`${DropdownRole}`>,
-		default: DropdownRole.menu,
-		validator: (value: DropdownRole) =>
-			Object.values(DropdownRole).includes(value),
-	},
+    ...IdProps,
+    ...DropdownProps,
+    ...ModifiersProps,
+    /**
+     * Show / hide dropdown programmatically
+     */
+    modelValue: {
+        type: Boolean,
+        default: undefined,
+    },
+    /**
+     * Dropdown trigger element
+     */
+    reference: {
+        type: Object as PropType<HTMLElement | null>,
+        default: null,
+    },
+    /**
+     * Dropdown role
+     */
+    role: {
+        type: String as PropType<`${DropdownRole}`>,
+        default: DropdownRole.menu,
+        validator: (value: DropdownRole) =>
+            Object.values(DropdownRole).includes(value),
+    },
+}
+
+export const VvDropdownItemProps = {
+    focusOnHover: {
+        type: Boolean,
+        default: false,
+    },
+}
+
+export const VvDropdownOptionProps = {
+    ...DisabledProps,
+    ...SelectedProps,
+    ...UnselectableProps,
+    ...ModifiersProps,
+    deselectHintLabel: {
+        type: String,
+    },
+    selectHintLabel: {
+        type: String,
+    },
+    selectedHintLabel: {
+        type: String,
+    },
+    focusOnHover: {
+        type: Boolean,
+        default: false,
+    },
 }

package/src/components/VvIcon/README.md

@@ -47,7 +47,7 @@ Launch the script `generate-icons --srcPath=assets/icons/custom` to generate the
 import customIcons from '@/assets/icons/custom.json'
 
 app.use(VolverPlugin, {
-  iconsCollections: [customIcons]
+    iconsCollections: [customIcons]
 })
 ```
 

package/src/components/VvIcon/VvIcon.vue

@@ -1,139 +1,139 @@
-<script lang="ts">
-	export default {
-		name: 'VvIcon',
-	}
+<script setup lang="ts">
+import { Icon, addIcon, iconExists } from '@iconify/vue'
+import { type VvIconProps, VvIconPropsDefaults } from '.'
+
+// props
+const props = withDefaults(defineProps<VvIconProps>(), VvIconPropsDefaults)
+
+const hasRotate = computed(() => {
+    if (typeof props.rotate === 'string') {
+        return Number.parseFloat(props.rotate)
+    }
+    return props.rotate
+})
+
+// data
+const show = ref(true)
+
+// inject plugin
+const volver = useVolver()
+
+// classes
+const { modifiers } = toRefs(props)
+const bemCssClasses = useModifiers('vv-icon', modifiers)
+
+// provider name
+const provider = computed(() => {
+    return props.provider || volver?.iconsProvider
+})
+
+// icon name
+const icon = computed(() => {
+    const name = props.name ?? ''
+    // compose Iconify icon name format
+    const iconName = `@${provider.value}:${props.prefix}:${name}`
+
+    // Check if icon with prefix and provider exist
+    if (iconExists(iconName)) {
+        return iconName
+    }
+
+    // Check if icon exist into any collection
+    const iconsCollection = volver?.iconsCollections.find(
+        (iconsCollection) => {
+            const icon = `@${provider.value}:${iconsCollection.prefix}:${name}`
+            return iconExists(icon)
+        },
+    )
+    if (iconsCollection) {
+        return `@${provider.value}:${iconsCollection.prefix}:${name}`
+    }
+
+    return name
+})
+
+/**
+ * Get SVG content from SVG string
+ * @param {string} svg
+ * @return {SVGSVGElement | undefined} https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement
+ */
+function getSvgContent(svg: string): SVGSVGElement | undefined {
+    let dom
+    if (typeof window === 'undefined') {
+        // SSR
+        // eslint-disable-next-line ts/no-var-requires, ts/no-require-imports
+        const { JSDOM } = require('jsdom')
+        dom = new JSDOM().window
+    }
+    const domParser = dom ? new dom.DOMParser() : new window.DOMParser()
+    const svgDomString = domParser.parseFromString(svg, 'text/html')
+    const svgEl = svgDomString.querySelector('svg')
+    return svgEl
+}
+
+/**
+ * Add icon to current Iconify provider
+ * @param {string} svg
+ */
+function addIconFromSvg(svg: string) {
+    const svgContentEl = getSvgContent(svg)
+    const svgContent = svgContentEl?.innerHTML.trim() || ''
+    if (svgContentEl && svgContent) {
+        addIcon(`@${provider.value}:${props.prefix}:${props.name}`, {
+            body: svgContent,
+            // Set height and width from svg content
+            height: svgContentEl.viewBox.baseVal.height,
+            width: svgContentEl.viewBox.baseVal.width,
+        })
+    }
+}
+
+if (volver) {
+    if (
+        props.src
+        && !iconExists(`@${provider.value}:${props.prefix}:${props.name}`)
+    ) {
+        show.value = false
+        volver
+            .fetchIcon(props.src)
+            .then((svg?: string) => {
+                if (svg) {
+                    addIconFromSvg(svg)
+                    show.value = true
+                }
+            })
+            .catch((e) => {
+                throw new Error(`Error during fetch icon: ${e?.message}`)
+            })
+    }
+}
+
+if (props.svg) {
+    addIconFromSvg(props.svg)
+}
 </script>
 
-<script setup lang="ts">
-	import { Icon, addIcon, iconExists } from '@iconify/vue'
-	import { VvIconProps } from '.'
-
-	// props
-	const props = defineProps(VvIconProps)
-
-	const hasRotate = computed(() => {
-		if (typeof props.rotate === 'string') {
-			return parseFloat(props.rotate)
-		}
-		return props.rotate
-	})
-
-	// data
-	const show = ref(true)
-
-	// inject plugin
-	const volver = useVolver()
-
-	// classes
-	const { modifiers } = toRefs(props)
-	const bemCssClasses = useModifiers('vv-icon', modifiers)
-
-	// provider name
-	const provider = computed(() => {
-		return props.provider || volver?.iconsProvider
-	})
-
-	// icon name
-	const icon = computed(() => {
-		const name = props.name ?? ''
-		// compose Iconify icon name format
-		const iconName = `@${provider.value}:${props.prefix}:${name}`
-
-		// Check if icon with prefix and provider exist
-		if (iconExists(iconName)) {
-			return iconName
-		}
-
-		// Check if icon exist into any collection
-		const iconsCollection = volver?.iconsCollections.find(
-			(iconsCollection) => {
-				const icon = `@${provider.value}:${iconsCollection.prefix}:${name}`
-				return iconExists(icon)
-			},
-		)
-		if (iconsCollection) {
-			return `@${provider.value}:${iconsCollection.prefix}:${name}`
-		}
-
-		return name
-	})
-
-	/**
-	 * Get SVG content from SVG string
-	 * @param {string} svg
-	 * @return {SVGSVGElement | undefined} https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement
-	 */
-	function getSvgContent(svg: string): SVGSVGElement | undefined {
-		let dom
-		if (typeof window === 'undefined') {
-			// SSR
-			// eslint-disable-next-line @typescript-eslint/no-var-requires, no-undef
-			const { JSDOM } = require('jsdom')
-			dom = new JSDOM().window
-		}
-		const domParser = dom ? new dom.DOMParser() : new window.DOMParser()
-		const svgDomString = domParser.parseFromString(svg, 'text/html')
-		const svgEl = svgDomString.querySelector('svg')
-		return svgEl
-	}
-
-	/**
-	 * Add icon to current Iconify provider
-	 * @param {string} svg
-	 */
-	function addIconFromSvg(svg: string) {
-		const svgContentEl = getSvgContent(svg)
-		const svgContent = svgContentEl?.innerHTML.trim() || ''
-		if (svgContentEl && svgContent) {
-			addIcon(`@${provider.value}:${props.prefix}:${props.name}`, {
-				body: svgContent,
-				// Set height and width from svg content
-				height: svgContentEl.viewBox.baseVal.height,
-				width: svgContentEl.viewBox.baseVal.width,
-			})
-		}
-	}
-
-	if (volver) {
-		if (
-			props.src &&
-			!iconExists(`@${provider.value}:${props.prefix}:${props.name}`)
-		) {
-			show.value = false
-			volver
-				.fetchIcon(props.src)
-				.then((svg?: string) => {
-					if (svg) {
-						addIconFromSvg(svg)
-						show.value = true
-					}
-				})
-				.catch((e) => {
-					throw new Error(`Error during fetch icon: ${e?.message}`)
-				})
-		}
-	}
-
-	if (props.svg) {
-		addIconFromSvg(props.svg)
-	}
+<script lang="ts">
+export default {
+    name: 'VvIcon',
+}
 </script>
 
 <template>
-	<Icon
-		v-if="show"
-		:class="bemCssClasses"
-		v-bind="{
-			inline,
-			width,
-			height,
-			horizontalFlip,
-			verticalFlip,
-			flip,
-			rotate: hasRotate,
-			color,
-			onLoad,
-			icon,
-		}"
-	/>
+    <Icon
+        v-if="show"
+        :class="bemCssClasses"
+        v-bind="{
+            inline,
+            width,
+            height,
+            horizontalFlip,
+            verticalFlip,
+            flip,
+            rotate: hasRotate,
+            color,
+            onLoad,
+            icon,
+        }"
+    />
 </template>