@volverjs/ui-vue 0.0.10-beta.60 → 0.0.10-beta.62

package/src/components/VvAlertGroup/VvAlertGroup.vue

@@ -1,65 +0,0 @@
-<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

@@ -1,116 +0,0 @@
-import type { Alert } from '@/types'
-import type { ExtractPropTypes } from 'vue'
-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

@@ -1,27 +0,0 @@
-<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

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

package/src/components/VvAvatarGroup/VvAvatarGroup.vue

@@ -1,70 +0,0 @@
-<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

@@ -1,28 +0,0 @@
-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

@@ -1,21 +0,0 @@
-<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

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

package/src/components/VvBreadcrumb/VvBreadcrumb.vue

@@ -1,56 +0,0 @@
-<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

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

package/src/components/VvButton/VvButton.vue

@@ -1,175 +0,0 @@
-<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()
-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 el
-const element = ref<{ $el: HTMLElement } | null>(null)
-const $el = computed(() => element.value?.$el)
-defineExpose({ $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="element"
-        :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>