@volverjs/ui-vue 0.0.13-beta.9 → 0.0.14

package/src/components/VvAlertGroup/VvAlertGroup.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import { useVvAlertGroup, VvAlertGroupEvents, VvAlertGroupProps } from '.'
+import VvAlert from '../VvAlert/VvAlert.vue'
+
+// props and emit
+const props = defineProps(VvAlertGroupProps)
+
+const emit = defineEmits(VvAlertGroupEvents)
+
+const { hasProps, hasTransition } = useVvAlertGroup(props, emit)
+
+const alertGroupTransitionHandlers = {
+    'before-enter': () => {
+        emit('beforeEnter')
+    },
+    'after-leave': () => {
+        emit('afterLeave')
+    },
+    'enter': () => {
+        emit('enter')
+    },
+    'after-enter': () => {
+        emit('afterEnter')
+    },
+    'enter-cancelled': () => {
+        emit('enterCancelled')
+    },
+    'before-leave': () => {
+        emit('beforeLeave')
+    },
+    'leave': () => {
+        emit('leave')
+    },
+    'leave-cancelled': () => {
+        emit('leaveCancelled')
+    },
+}
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvAlertGroup',
+}
+</script>
+
+<template>
+    <div v-bind="hasProps">
+        <!-- @slot The slot before alert list  -->
+        <slot name="before" />
+        <TransitionGroup
+            tag="div"
+            role="group"
+            :name="hasTransition"
+            class="vv-alert-group__list"
+            v-on="alertGroupTransitionHandlers"
+        >
+            <!-- @slot The slot for alert list  -->
+            <slot>
+                <VvAlert v-for="item in items" v-bind="item" :key="item.id" />
+            </slot>
+        </TransitionGroup>
+        <!-- @slot The slot after alert list  -->
+        <slot name="after" />
+    </div>
+</template>

package/src/components/VvAlertGroup/index.ts

@@ -0,0 +1,116 @@
+import type { ExtractPropTypes } from 'vue'
+import type { Alert } from '@/types'
+import { ModifiersProps } from '@/props'
+
+export const VvAlertGroupProps = {
+    ...ModifiersProps,
+    name: {
+        type: String,
+        required: true,
+    },
+    items: {
+        type: Array as PropType<Alert[]>,
+        default: () => [],
+    },
+    stack: {
+        type: Boolean,
+        default: false,
+    },
+    reverse: {
+        type: Boolean,
+        default: false,
+    },
+    inline: {
+        type: String as PropType<'start' | 'middle' | 'end'>,
+        default: undefined,
+    },
+    block: {
+        type: String as PropType<'top' | 'center' | 'bottom'>,
+        default: undefined,
+    },
+    position: {
+        type: String as PropType<'absolute' | 'fixed'>,
+        default: undefined,
+    },
+    transition: {
+        type: String,
+        default: undefined,
+    },
+}
+
+export const VvAlertGroupEvents = [
+    'close',
+    'beforeEnter',
+    'afterLeave',
+    'enter',
+    'afterEnter',
+    'enterCancelled',
+    'beforeLeave',
+    'leave',
+    'leaveCancelled',
+]
+
+export function useVvAlertGroup(props: Readonly<ExtractPropTypes<typeof VvAlertGroupProps>>,	emit: (event: string, ...args: unknown[]) => void) {
+    const bus = useAlertProvideGroup({ name: computed(() => props.name) })
+
+    // check props block and inline coexist
+    if ((props.block && !props.inline) || (!props.block && props.inline)) {
+        console.warn(
+            `[VvAlertGroup]: block and inline props must coexist at the same time.`,
+        )
+    }
+
+    // props
+    const hasClass = computed(() => {
+        const toReturn: (string | Record<string, boolean>)[] = [
+            useModifiers(
+                'vv-alert-group',
+                computed(() => props.modifiers),
+                computed(() => ({
+                    stack: props.stack,
+                    reverse: props.reverse,
+                    absolute: props.position === 'absolute',
+                    fixed: props.position === 'fixed',
+                })),
+            ).value,
+        ]
+        if (props.inline && props.block) {
+            toReturn.push(`vv-alert-group--${props.block}-${props.inline}`)
+        }
+        return toReturn
+    })
+
+    const hasTransition = computed(() => {
+        if (props.transition) {
+            return props.transition
+        }
+        if (!props.position) {
+            return 'vv-alert--fade'
+        }
+        if (props.inline === 'start') {
+            return 'vv-alert--fade-inline-start'
+        }
+        if (props.inline === 'end') {
+            return 'vv-alert--fade-inline-end'
+        }
+        if (props.block === 'top') {
+            return 'vv-alert--fade-block-top'
+        }
+        if (props.block === 'bottom') {
+            return 'vv-alert--fade-block-bottom'
+        }
+        return 'vv-alert--fade'
+    })
+
+    // listeners
+    bus.on('close', (id: string) => {
+        emit('close', id)
+    })
+
+    return {
+        hasTransition,
+        hasProps: computed(() => ({
+            class: hasClass.value,
+        })),
+    }
+}

package/src/components/VvAvatar/VvAvatar.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { VvAvatarProps } from '@/components/VvAvatar'
+
+const props = defineProps(VvAvatarProps)
+const { modifiers } = toRefs(props)
+
+// 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>
+</template>

package/src/components/VvAvatar/index.ts

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

package/src/components/VvAvatarGroup/VvAvatarGroup.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import VvAvatar from '@/components/VvAvatar/VvAvatar.vue'
+import { VvAvatarGroupProps } from '@/components/VvAvatarGroup'
+
+const props = defineProps(VvAvatarGroupProps)
+const { modifiers, items, toShow, totalItems, avatarModifiers }
+    = toRefs(props)
+
+// 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 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 (item.modifiers) {
+            itemModifiers = Array.isArray(item.modifiers)
+                ? item.modifiers
+                : [item.modifiers]
+        }
+
+        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>
+</template>

package/src/components/VvAvatarGroup/index.ts

@@ -0,0 +1,28 @@
+import { ModifiersProps } from '@/props'
+
+export type AvatarItem = {
+    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[]>,
+}

package/src/components/VvBadge/VvBadge.vue

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

package/src/components/VvBadge/index.ts

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

package/src/components/VvBreadcrumb/VvBreadcrumb.vue

@@ -0,0 +1,56 @@
+<script setup lang="ts">
+import { VvBreadcrumbProps } from '.'
+import { useModifiers } from '../../composables/useModifiers'
+import VvAction from '../VvAction/VvAction.vue'
+
+const props = defineProps(VvBreadcrumbProps)
+
+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="({ 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, isLast: isLast(index) }">
+                        {{ label }}
+                    </slot>
+                </VvAction>
+                <meta itemprop="position" :content="`${index + 1}`">
+            </li>
+        </ol>
+    </nav>
+</template>

package/src/components/VvBreadcrumb/index.ts

@@ -0,0 +1,7 @@
+import type { NavItem } from '../../types'
+import { ModifiersProps } from '../../props'
+
+export const VvBreadcrumbProps = {
+    ...ModifiersProps,
+    routes: Array as PropType<NavItem[]>,
+}

package/src/components/VvButton/VvButton.vue

@@ -0,0 +1,178 @@
+<script setup lang="ts">
+import { useGroupProps, VvButtonEvents, VvButtonProps } from '.'
+import { Side } from '../../constants'
+import VvAction from '../VvAction/VvAction.vue'
+import VvIcon from '../VvIcon/VvIcon.vue'
+
+// props, attrs, slots and emit
+const props = defineProps(VvButtonProps)
+
+const emit = defineEmits(VvButtonEvents)
+
+const attrs = useAttrs() as Record<string, unknown>
+const slots = useSlots()
+// data
+const {
+    id,
+    modifiers,
+    iconPosition,
+    icon,
+    label,
+    modelValue,
+    disabled,
+    toggle,
+    unselectable,
+} = useGroupProps(props, emit)
+const hasId = useUniqueId(id)
+const name = computed(() => (attrs?.name as string) || hasId.value)
+
+// expose root element
+const rootEl = ref<{ $el: HTMLElement } | null>(null)
+const $el = computed(() => rootEl.value?.$el)
+defineExpose({
+    /** Reference to the root element */
+    $el,
+})
+
+/**
+ * @description The component pressed state by prop or group.
+ * @returns {string} The component tag.
+ */
+const pressed = computed(() => {
+    if (!toggle.value) {
+        return props.pressed
+    }
+    if (Array.isArray(modelValue.value)) {
+        return contains(name.value, modelValue.value)
+    }
+    return equals(name.value, modelValue.value)
+})
+
+/**
+ * @description Define component classes with BEM style.
+ * @returns {Array} The component classes.
+ */
+const bemCssClasses = useModifiers(
+    'vv-button',
+    modifiers,
+    computed(() => ({
+        'reverse': [Side.right, Side.bottom].includes(
+            iconPosition.value as Side,
+        ),
+        'column': [Side.top, Side.bottom].includes(
+            iconPosition.value as Side,
+        ),
+        'icon-only': Boolean(
+            icon?.value && !label?.value && !slots.default,
+        ),
+    })),
+)
+
+/**
+ * @description Define icon attributes.
+ * @returns {object} The icon attributes.
+ */
+const { hasIcon } = useComponentIcon(icon)
+
+/**
+ * @description Catch click event
+ */
+const toggleValue = computed(() => {
+    return props.value !== undefined ? props.value : name.value
+})
+const hasListeners = computed(() => {
+    if (!toggle.value) {
+        return undefined
+    }
+    return {
+        onClick,
+    }
+})
+function onClick() {
+    if (toggle.value) {
+        if (Array.isArray(modelValue.value)) {
+            if (contains(toggleValue.value, modelValue.value)) {
+                if (unselectable.value) {
+                    modelValue.value = modelValue.value.filter(
+                        n => n !== toggleValue.value,
+                    )
+                }
+                return
+            }
+            modelValue.value.push(toggleValue.value)
+            return
+        }
+        if (toggleValue.value === modelValue.value && unselectable.value) {
+            modelValue.value = props.uncheckedValue
+            return
+        }
+        modelValue.value = toggleValue.value
+    }
+}
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvButton',
+    inheritAttrs: false,
+}
+</script>
+
+<template>
+    <VvAction
+        v-bind="{
+            ...attrs,
+            ...hasListeners,
+            disabled,
+            pressed,
+            active,
+            type,
+            to,
+            href,
+            target,
+            rel,
+            ariaLabel,
+        }"
+        :id="hasId"
+        ref="rootEl"
+        :class="bemCssClasses"
+    >
+        <!-- @slot Default slot -->
+        <slot>
+            <!-- #region loading -->
+            <template v-if="loading">
+                <!-- @slot Slot for loading content -->
+                <slot name="loading">
+                    <VvIcon
+                        v-if="loadingIcon"
+                        class="vv-button__loading-icon"
+                        :name="loadingIcon"
+                    />
+                    <span v-if="loadingLabel" class="vv-button__label">
+                        {{ loadingLabel }}
+                    </span>
+                </slot>
+            </template>
+            <!-- #endregion -->
+            <!-- #region button -->
+            <template v-else>
+                <!-- @slot Before label and icon -->
+                <slot name="before" />
+                <VvIcon
+                    v-if="hasIcon"
+                    v-bind="hasIcon"
+                    class="vv-button__icon"
+                />
+                <span v-if="label" class="vv-button__label">
+                    <!-- @slot Use this slot for button label -->
+                    <slot name="label">
+                        {{ label }}
+                    </slot>
+                </span>
+                <!-- @slot After label and icon -->
+                <slot name="after" />
+            </template>
+            <!-- #endregion -->
+        </slot>
+    </VvAction>
+</template>