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

package/src/components/VvAvatar/VvAvatar.vue

@@ -1,21 +1,27 @@
 <script setup lang="ts">
-	import { VvAvatarProps } from '@/components/VvAvatar'
+import { VvAvatarProps } from '@/components/VvAvatar'
 
-	const props = defineProps(VvAvatarProps)
-	const { modifiers } = toRefs(props)
+const props = defineProps(VvAvatarProps)
+const { modifiers } = toRefs(props)
 
-	// bem css classes
-	const bemCssClasses = useModifiers('vv-avatar', modifiers)
+// bem css classes
+const bemCssClasses = useModifiers('vv-avatar', modifiers)
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvAvatar',
+}
 </script>
 
 <template>
-	<span
-		:class="bemCssClasses"
-		:role="imgSrc ? undefined : 'img'"
-		:aria-label="imgSrc ? undefined : 'avatar'"
-	>
-		<slot name="default">
-			<img v-if="imgSrc" :src="imgSrc" alt="avatar" />
-		</slot>
-	</span>
+    <span
+        :class="bemCssClasses"
+        :role="imgSrc ? undefined : 'img'"
+        :aria-label="imgSrc ? undefined : 'avatar'"
+    >
+        <slot name="default">
+            <img v-if="imgSrc" :src="imgSrc" alt="avatar">
+        </slot>
+    </span>
 </template>

package/src/components/VvAvatar/index.ts

@@ -1,9 +1,9 @@
 import { ModifiersProps } from '@/props'
 
 export const VvAvatarProps = {
-	...ModifiersProps,
-	/**
-	 * Image src for avatar
-	 */
-	imgSrc: String,
+    ...ModifiersProps,
+    /**
+     * Image src for avatar
+     */
+    imgSrc: String,
 }

package/src/components/VvAvatarGroup/VvAvatarGroup.vue

@@ -1,65 +1,70 @@
 <script setup lang="ts">
-	import { VvAvatarGroupProps } from '@/components/VvAvatarGroup'
-	import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
+import { VvAvatarGroupProps } from '@/components/VvAvatarGroup'
+import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
 
-	const props = defineProps(VvAvatarGroupProps)
-	const { modifiers, items, toShow, totalItems, avatarModifiers } =
-		toRefs(props)
+const props = defineProps(VvAvatarGroupProps)
+const { modifiers, items, toShow, totalItems, avatarModifiers }
+		= toRefs(props)
 
-	// bem css classes
-	const bemCssClasses = useModifiers('vv-avatar-group', modifiers)
+// bem css classes
+const bemCssClasses = useModifiers('vv-avatar-group', modifiers)
 
-	const stringModifiers = computed(() => {
-		if (avatarModifiers?.value && Array.isArray(avatarModifiers?.value)) {
-			return avatarModifiers.value.join(' ')
-		}
-		return avatarModifiers?.value || ''
-	})
+const stringModifiers = computed(() => {
+    if (avatarModifiers?.value && Array.isArray(avatarModifiers?.value)) {
+        return avatarModifiers.value.join(' ')
+    }
+    return avatarModifiers?.value || ''
+})
 
-	const avatarItems = computed(() => {
-		return items.value.slice(0, toShow.value).map((item) => {
-			let modifiers: string[] = []
-			let itemModifiers: string[] = []
+const avatarItems = computed(() => {
+    return items.value.slice(0, toShow.value).map((item) => {
+        let modifiers: string[] = []
+        let itemModifiers: string[] = []
 
-			if (avatarModifiers?.value) {
-				modifiers = Array.isArray(avatarModifiers?.value)
-					? avatarModifiers?.value
-					: [avatarModifiers?.value]
-			}
+        if (avatarModifiers?.value) {
+            modifiers = Array.isArray(avatarModifiers?.value)
+                ? avatarModifiers?.value
+                : [avatarModifiers?.value]
+        }
 
-			if (item.modifiers) {
-				itemModifiers = Array.isArray(item.modifiers)
-					? item.modifiers
-					: [item.modifiers]
-			}
+        if (item.modifiers) {
+            itemModifiers = Array.isArray(item.modifiers)
+                ? item.modifiers
+                : [item.modifiers]
+        }
 
-			return {
-				...item,
-				key: item.key || useUniqueId().value,
-				modifiers: [...modifiers, ...itemModifiers],
-			}
-		})
-	})
+        return {
+            ...item,
+            key: item.key || useUniqueId().value,
+            modifiers: [...modifiers, ...itemModifiers],
+        }
+    })
+})
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvAvatarGroup',
+}
 </script>
 
 <template>
-	<span :class="bemCssClasses">
-		<slot name="default">
-			<VvAvatar
-				v-for="avatarItem in avatarItems"
-				:key="avatarItem.key"
-				v-bind="{
-					modifiers: avatarItem.modifiers,
-					imgSrc: avatarItem.imgSrc,
-				}"
-			>
-				<span v-if="avatarItem.text">{{ avatarItem.text }}</span>
-			</VvAvatar>
-			<VvAvatar
-				v-if="(totalItems || items.length) > toShow"
-				:modifiers="`${stringModifiers} surface bordered`"
-				>{{ `+${(totalItems || items.length) - toShow}` }}</VvAvatar
-			>
-		</slot>
-	</span>
+    <span :class="bemCssClasses">
+        <slot name="default">
+            <VvAvatar
+                v-for="avatarItem in avatarItems"
+                :key="avatarItem.key"
+                v-bind="{
+                    modifiers: avatarItem.modifiers,
+                    imgSrc: avatarItem.imgSrc,
+                }"
+            >
+                <span v-if="avatarItem.text">{{ avatarItem.text }}</span>
+            </VvAvatar>
+            <VvAvatar
+                v-if="(totalItems || items.length) > toShow"
+                :modifiers="`${stringModifiers} surface bordered`"
+            >{{ `+${(totalItems || items.length) - toShow}` }}</VvAvatar>
+        </slot>
+    </span>
 </template>

package/src/components/VvAvatarGroup/index.ts

@@ -1,28 +1,28 @@
 import { ModifiersProps } from '@/props'
 
 export type AvatarItem = {
-	key?: string
-	text?: string
-	imgSrc?: string
-	modifiers?: string | string[]
+    key?: string
+    text?: string
+    imgSrc?: string
+    modifiers?: string | string[]
 }
 
 export const VvAvatarGroupProps = {
-	...ModifiersProps,
-	/**
-	 * avatar items
-	 */
-	items: {
-		type: Array as PropType<AvatarItem[]>,
-		default: () => [],
-		required: true,
-	},
-	toShow: {
-		type: Number,
-		default: 3,
-	},
-	totalItems: {
-		type: Number,
-	},
-	avatarModifiers: [String, Array] as PropType<string | string[]>,
+    ...ModifiersProps,
+    /**
+     * avatar items
+     */
+    items: {
+        type: Array as PropType<AvatarItem[]>,
+        default: () => [],
+        required: true,
+    },
+    toShow: {
+        type: Number,
+        default: 3,
+    },
+    totalItems: {
+        type: Number,
+    },
+    avatarModifiers: [String, Array] as PropType<string | string[]>,
 }

package/src/components/VvBadge/VvBadge.vue

@@ -1,20 +1,21 @@
-<script lang="ts">
-	export default {
-		name: 'VvBadge',
-	}
-</script>
-
 <script setup lang="ts">
-	import { VvBadgeProps } from '.'
+import { VvBadgeProps } from '.'
+
+const props = defineProps(VvBadgeProps)
 
-	const props = defineProps(VvBadgeProps)
-	const { modifiers } = toRefs(props)
-	const bemCssClasses = useModifiers('vv-badge', modifiers)
+const { modifiers } = toRefs(props)
+const bemCssClasses = useModifiers('vv-badge', modifiers)
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvBadge',
+}
 </script>
 
 <template>
-	<span :class="bemCssClasses" role="status">
-		<!-- @slot Default slot -->
-		<slot>{{ value }}</slot>
-	</span>
+    <span :class="bemCssClasses">
+        <!-- @slot Default slot -->
+        <slot>{{ value }}</slot>
+    </span>
 </template>

package/src/components/VvBadge/index.ts

@@ -1,6 +1,6 @@
 import { ModifiersProps } from '../../props'
 
 export const VvBadgeProps = {
-	...ModifiersProps,
-	value: [String, Number],
+    ...ModifiersProps,
+    value: [String, Number],
 }

package/src/components/VvBreadcrumb/VvBreadcrumb.vue

@@ -1,54 +1,56 @@
-<script lang="ts">
-	export default {
-		name: 'VvBreadcrumb',
-	}
-</script>
-
 <script setup lang="ts">
-	import { useModifiers } from '../../composables/useModifiers'
-	import { VvBreadcrumbProps } from '.'
+import { useModifiers } from '../../composables/useModifiers'
+import VvAction from '../VvAction/VvAction.vue'
+import { VvBreadcrumbProps } from '.'
+
+const props = defineProps(VvBreadcrumbProps)
 
-	const props = defineProps(VvBreadcrumbProps)
-	const { modifiers } = toRefs(props)
-	const bemCssClasses = useModifiers('vv-breadcrumb', modifiers)
+const { modifiers } = toRefs(props)
+const bemCssClasses = useModifiers('vv-breadcrumb', modifiers)
+const length = computed(() => props.routes?.length ?? 0)
+
+const isLast = (index: number) => index === length.value - 1
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvBreadcrumb',
+}
 </script>
 
 <template>
-	<nav :class="bemCssClasses" aria-label="breadcrumbs">
-		<ol class="vv-breadcrumb__list">
-			<li
-				v-for="(route, index) in routes"
-				:key="`${route.label}-${index}`"
-				:class="{
-					'vv-breadcrumb__item': index < Number(routes?.length) - 1,
-					'vv-breadcrumb__item-active':
-						index === Number(routes?.length) - 1,
-				}"
-				itemprop="itemListElement"
-				itemtype="https://schema.org/ListItem"
-				itemscope
-			>
-				<Component
-					:is="route.to ? 'router-link' : route.href ? 'a' : 'span'"
-					v-bind="route"
-					:class="{
-						'vv-breadcrumb__link':
-							index < Number(routes?.length) - 1,
-					}"
-					:aria-current="
-						index === Number(routes?.length) - 1
-							? 'page'
-							: undefined
-					"
-					itemprop="item"
-				>
-					<!-- @slot Slot for label -->
-					<slot name="label" v-bind="{ route, index }">
-						{{ route.label }}
-					</slot>
-				</Component>
-				<meta itemprop="position" :content="`${index + 1}`" />
-			</li>
-		</ol>
-	</nav>
+    <nav :class="bemCssClasses" aria-label="breadcrumbs">
+        <ol class="vv-breadcrumb__list">
+            <li
+                v-for="({ label, ...route }, index) in routes"
+                :key="`${label}-${index}`"
+                :class="
+                    !isLast(index)
+                        ? 'vv-breadcrumb__item'
+                        : 'vv-breadcrumb__item-active'
+                "
+                itemprop="itemListElement"
+                itemtype="https://schema.org/ListItem"
+                itemscope
+            >
+                <VvAction
+                    v-bind="route"
+                    :class="
+                        !isLast(index)
+                            ? 'vv-breadcrumb__link'
+                            : 'vv-breadcrumb__label'
+                    "
+                    :aria-current="isLast(index) ? 'page' : undefined"
+                    itemprop="item"
+                    default-tag="span"
+                >
+                    <!-- @slot Slot for label -->
+                    <slot name="label" v-bind="{ route, index }">
+                        {{ label }}
+                    </slot>
+                </VvAction>
+                <meta itemprop="position" :content="`${index + 1}`">
+            </li>
+        </ol>
+    </nav>
 </template>

package/src/components/VvBreadcrumb/index.ts

@@ -1,13 +1,7 @@
 import { ModifiersProps } from '../../props'
-
-export interface Route {
-	label: string
-	to?: string | { [key: string]: unknown }
-	title?: string
-	href?: string
-}
+import type { NavItem } from '../../types'
 
 export const VvBreadcrumbProps = {
-	...ModifiersProps,
-	routes: Array as PropType<Route[]>,
+    ...ModifiersProps,
+    routes: Array as PropType<NavItem[]>,
 }