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

package/src/components/VvAccordionGroup/VvAccordionGroup.vue

@@ -1,233 +0,0 @@
-<script setup lang="ts">
-import type {
-    AccordionGroupBusEvents,
-    AccordionGroupState,
-} from '../../types/group'
-import mitt from 'mitt'
-import { VvAccordionGroupEvents, VvAccordionGroupProps } from '.'
-import { INJECTION_KEY_ACCORDION_GROUP } from '../../constants'
-import VvAccordion from '../VvAccordion/VvAccordion.vue'
-
-// props and emit
-const props = defineProps(VvAccordionGroupProps)
-const emit = defineEmits(VvAccordionGroupEvents)
-
-// data
-const {
-    disabled,
-    modifiers,
-    itemModifiers,
-    items,
-    storageKey,
-    storageType,
-} = toRefs(props)
-watchEffect(() => {
-    if (typeof props.modelValue === 'string' && props.collapse) {
-        console.warn(
-            `[VvAccordionGroup]: modelValue is a string but collapse is true.`,
-        )
-    }
-})
-
-const accordionNames = reactive(new Set<string>())
-const storageModelValue = usePersistence<string | string[] | undefined>(
-    storageKey,
-    storageType,
-    [],
-)
-const localModelValue = computed({
-    get: () => {
-        if (props.modelValue !== null && props.modelValue !== undefined) {
-            return props.modelValue
-        }
-        return storageModelValue.value
-    },
-    set: (newValue) => {
-        emit('update:modelValue', newValue)
-        storageModelValue.value = newValue
-    },
-})
-const expandedAccordions = computed<Set<string>>({
-    get: () => {
-        if (localModelValue.value === undefined) {
-            return new Set<string>()
-        }
-        let toReturn = new Set<string>()
-        if (props.not) {
-            if (typeof localModelValue.value === 'string') {
-                toReturn = new Set<string>(
-                    [...accordionNames].filter(
-                        name => name !== localModelValue.value,
-                    ),
-                )
-            }
-            else if (Array.isArray(localModelValue.value)) {
-                toReturn = new Set<string>(
-                    [...accordionNames].filter(
-                        name =>
-                            !(localModelValue.value as string[]).includes(
-                                name,
-                            ),
-                    ),
-                )
-            }
-        }
-        else if (typeof localModelValue.value === 'string') {
-            toReturn = new Set<string>([localModelValue.value])
-        }
-        else if (Array.isArray(localModelValue.value)) {
-            toReturn = new Set<string>(localModelValue.value)
-        }
-        return toReturn
-    },
-    set: (newValue) => {
-        if (props.not) {
-            localModelValue.value = [...accordionNames].filter(
-                name => !newValue.has(name),
-            )
-            return
-        }
-        if (props.collapse) {
-            localModelValue.value = [...newValue]
-            return
-        }
-        localModelValue.value = newValue.values().next().value
-    },
-})
-onMounted(() => {
-    if (props.not && localModelValue.value === undefined) {
-        localModelValue.value = props.collapse
-            ? []
-            : [...accordionNames.values()].splice(1, accordionNames.size)
-    }
-    nextTick(() => {
-        for (const name of accordionNames) {
-            bus.emit('toggle', {
-                name,
-                value: expandedAccordions.value.has(name),
-            })
-        }
-    })
-})
-
-// provide
-const bus = mitt<AccordionGroupBusEvents>()
-useGroupStateProvide<AccordionGroupState>(INJECTION_KEY_ACCORDION_GROUP, {
-    disabled,
-    modifiers: itemModifiers,
-    bus,
-})
-bus.on('register', ({ name }) => {
-    accordionNames.add(name)
-})
-bus.on('unregister', ({ name }) => {
-    accordionNames.delete(name)
-})
-bus.on('toggle', ({ name, value }) => {
-    const newValue = new Set<string>(expandedAccordions.value)
-    if (value) {
-        if (!props.collapse) {
-            for (const item of newValue) {
-                if (item !== name) {
-                    bus.emit('toggle', { name: item, value: false })
-                }
-            }
-            newValue.clear()
-        }
-        newValue.add(name)
-        expandedAccordions.value = newValue
-        return
-    }
-    newValue.delete(name)
-    expandedAccordions.value = newValue
-})
-function expand(name?: string | string[]) {
-    if (typeof name === 'string') {
-        bus.emit('toggle', { name, value: true })
-        return
-    }
-    if (Array.isArray(name)) {
-        for (const item of name) {
-            bus.emit('toggle', { name: item, value: true })
-        }
-        return
-    }
-    for (const item of accordionNames) {
-        bus.emit('toggle', { name: item, value: true })
-    }
-}
-bus.on('expand', ({ name }) => expand(name))
-
-function collapse(name?: string | string[]) {
-    if (typeof name === 'string') {
-        bus.emit('toggle', { name, value: false })
-        return
-    }
-    if (Array.isArray(name)) {
-        for (const item of name) {
-            bus.emit('toggle', { name: item, value: false })
-        }
-        return
-    }
-    for (const item of accordionNames) {
-        bus.emit('toggle', { name: item, value: false })
-    }
-}
-bus.on('collapse', ({ name }) => collapse(name))
-
-// expose
-defineExpose({ expandedAccordions, expand, collapse })
-
-// styles
-const bemCssClasses = useModifiers(
-    'vv-accordion-group',
-    modifiers,
-    computed(() => ({
-        disabled: disabled.value,
-    })),
-)
-</script>
-
-<script lang="ts">
-export default {
-    name: 'VvAccordionGroup',
-}
-</script>
-
-<template>
-    <div :class="bemCssClasses">
-        <!-- @slot Default slot -->
-        <slot
-            v-bind="{
-                expandedAccordions,
-                expand,
-                collapse,
-            }"
-        >
-            <VvAccordion
-                v-for="item in items"
-                :key="item.title"
-                v-bind="{
-                    name: item.name,
-                    title: item.title,
-                    content: item.content,
-                }"
-            >
-                <template
-                    v-if="$slots[`summary::${item.name}`]"
-                    #summary="data"
-                >
-                    <!-- @slot Slot for accordion header -->
-                    <slot v-bind="data" :name="`summary::${item.name}`" />
-                </template>
-                <template
-                    v-if="$slots[`content::${item.name}`]"
-                    #default="data"
-                >
-                    <!-- @slot Slot for accordion details -->
-                    <slot v-bind="data" :name="`content::${item.name}`" />
-                </template>
-            </VvAccordion>
-        </slot>
-    </div>
-</template>

package/src/components/VvAccordionGroup/index.ts

@@ -1,50 +0,0 @@
-import { ModifiersProps, StorageProps } from '@/props'
-
-export interface VvAccordionGroupItem {
-    title: string
-    content: string
-    name?: string
-    disabled?: boolean
-    modifiers?: string | string[]
-}
-
-export const VvAccordionGroupProps = {
-    ...ModifiersProps,
-    ...StorageProps,
-    /**
-     * VModel
-     */
-    modelValue: {
-        type: [String, Array] as PropType<string | string[] | undefined>,
-        default: undefined,
-    },
-    /**
-     * Accordion items
-     * @type VvAccordionGroupItem
-     */
-    items: {
-        type: Array as PropType<VvAccordionGroupItem[]>,
-        default: () => [],
-    },
-    /**
-     * If true, accordion items stay open when another item is opened
-     */
-    collapse: Boolean,
-    /**
-     * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
-     */
-    itemModifiers: {
-        type: [String, Array] as PropType<string | string[]>,
-        default: '',
-    },
-    /**
-     * If true, the accordion items will be disabled
-     */
-    disabled: Boolean,
-    /**
-     * If true, the accordion items will be opened by default
-     */
-    not: Boolean,
-}
-
-export const VvAccordionGroupEvents = ['update:modelValue']

package/src/components/VvAction/VvAction.vue

@@ -1,160 +0,0 @@
-<script setup lang="ts">
-import { VvActionEvents, VvActionProps } from '.'
-import { ActionTag } from '../../constants'
-
-// props and emit
-const props = defineProps(VvActionProps)
-
-const emit = defineEmits(VvActionEvents)
-
-const instance = getCurrentInstance()
-
-// inject plugin
-const volver = useVolver()
-
-const element = ref<HTMLElement | null>(null)
-defineExpose({ $el: element })
-
-// drowpdown trigger
-const {
-    reference: dropdownTriggerReference,
-    bus: dropdownEventBus,
-    aria: dropdownAria,
-    expanded: dropdownExpanded,
-} = useInjectedDropdownTrigger()
-watch(
-    () => element.value,
-    (newValue) => {
-        if (dropdownTriggerReference) {
-            dropdownTriggerReference.value = newValue
-        }
-    },
-)
-
-// pressed
-const pressed = computed(() => {
-    return props.pressed || dropdownExpanded?.value
-})
-
-// dropdown parent
-const { role } = useInjectedDropdownAction()
-
-/**
- * @description The tag defined by props.
- * @returns {string} The tag.
- */
-const hasTag = computed(() => {
-    switch (true) {
-        case props.disabled:
-            return ActionTag.button
-        case props.to !== undefined:
-            return volver?.nuxt ? resolveComponent(ActionTag.nuxtLink) : ActionTag.routerLink
-        case props.href !== undefined:
-            return ActionTag.a
-        default:
-            return props.defaultTag // button
-    }
-})
-
-/**
- * @description Define component attributes.
- * @returns {object} The component attributes.
- */
-const hasProps = computed(() => {
-    const toReturn = {
-        ...dropdownAria?.value,
-        ariaPressed: pressed.value ? true : undefined,
-        ariaLabel: props.ariaLabel,
-        role: role?.value,
-    }
-    switch (hasTag.value) {
-        case ActionTag.a:
-            return {
-                ...toReturn,
-                href: props.href,
-                target: props.target,
-                rel: props.rel,
-            }
-        case ActionTag.routerLink:
-        case ActionTag.nuxtLink:
-            return {
-                ...toReturn,
-                to: props.to,
-                target: props.target,
-            }
-        case ActionTag.button:
-            return {
-                ...toReturn,
-                type: props.type,
-                disabled: props.disabled,
-            }
-        default:
-            return toReturn
-    }
-})
-
-/**
- * @description Catch click event
- */
-function onClick(e: Event) {
-    if (props.disabled) {
-        e.preventDefault()
-        return
-    }
-    if (instance?.vnode.props?.onClick) {
-        emit('click', e)
-        return
-    }
-    dropdownEventBus?.emit('click', e)
-}
-
-/**
- * @description Catch mouseover event
- */
-function onMouseover(e: Event) {
-    if (instance?.vnode.props?.onMouseover) {
-        emit('mouseover', e)
-        return
-    }
-    dropdownEventBus?.emit('mouseover', e)
-}
-
-/**
- * @description Catch mouseleave event
- */
-function onMouseleave(e: Event) {
-    if (instance?.vnode.props?.onMouseleave) {
-        emit('mouseleave', e)
-        return
-    }
-    dropdownEventBus?.emit('mouseleave', e)
-}
-</script>
-
-<script lang="ts">
-export default {
-    name: 'VvAction',
-}
-</script>
-
-<template>
-    <component
-        v-bind="hasProps"
-        :is="hasTag"
-        ref="element"
-        :class="{
-            active,
-            pressed,
-            disabled,
-            current,
-        }"
-        @click.passive="onClick"
-        @mouseover.passive="onMouseover"
-        @mouseleave.passive="onMouseleave"
-    >
-        <!-- @slot Default slot -->
-        <slot>
-            {{ label }}
-        </slot>
-    </component>
-</template>

package/src/components/VvAction/index.ts

@@ -1,5 +0,0 @@
-import { ActionProps } from '../../props'
-
-export const VvActionEvents = ['click', 'mouseover', 'mouseleave']
-
-export const VvActionProps = ActionProps

package/src/components/VvAlert/VvAlert.vue

@@ -1,78 +0,0 @@
-<script setup lang="ts">
-import { useVvAlert, VvAlertEvents, VvAlertProps } from '.'
-import VvIcon from '../VvIcon/VvIcon.vue'
-
-const props = defineProps(VvAlertProps)
-
-const emit = defineEmits(VvAlertEvents)
-
-const { hasProps, hasTitleId, hasIcon, close } = useVvAlert(props, emit)
-defineExpose({ close })
-</script>
-
-<script lang="ts">
-export default {
-    name: 'VvAlert',
-}
-</script>
-
-<template>
-    <div v-bind="hasProps">
-        <div
-            v-if="
-                $slots.header
-                    || $slots.title
-                    || $slots.close
-                    || $slots['title::before']
-                    || $slots['title::after']
-                    || title
-                    || dismissable
-                    || autoClose
-            "
-            class="vv-alert__header"
-        >
-            <VvIcon v-if="hasIcon" v-bind="hasIcon" class="vv-alert__icon" />
-            <!-- @slot Header slot -->
-            <slot name="header">
-                <!-- @slot Before title slot -->
-                <slot name="title::before" />
-                <strong
-                    v-if="$slots.title || title"
-                    :id="hasTitleId"
-                    class="vv-alert__title"
-                >
-                    <!-- @slot Title slot -->
-                    <slot name="title">
-                        {{ title }}
-                    </slot>
-                </strong>
-                <!-- @slot After title slot -->
-                <slot name="title::after" />
-            </slot>
-            <!-- @slot Close button slot -->
-            <slot name="close" v-bind="{ close }">
-                <button
-                    v-if="dismissable || autoClose"
-                    class="vv-alert__close"
-                    type="button"
-                    :aria-label="closeLabel"
-                    @click.stop="close"
-                >
-                    <div class="vv-alert__close-mask" />
-                </button>
-            </slot>
-        </div>
-        <div v-if="$slots.default || content" class="vv-alert__content">
-            <!-- @slot Content slot -->
-            <slot>
-                {{ content }}
-            </slot>
-        </div>
-        <div v-if="$slots.footer || footer" class="vv-alert__footer">
-            <!-- @slot Footer slot -->
-            <slot name="footer">
-                {{ footer }}
-            </slot>
-        </div>
-    </div>
-</template>

package/src/components/VvAlert/index.ts

@@ -1,164 +0,0 @@
-import type { AlertModifier } from '@/types'
-import type { ExtractPropTypes, PropType } from 'vue'
-import { AlertRole } from '@/constants'
-import { IconProps, IdProps } from '@/props'
-
-export const VvAlertProps = {
-    ...IdProps,
-    ...IconProps,
-    /**
-     * Component BEM modifiers
-     */
-    modifiers: {
-        type: [String, Array] as PropType<AlertModifier | AlertModifier[]>,
-        default: undefined,
-    },
-    /**
-     * The alert is dismissable
-     * @default false
-     * @type boolean
-     */
-    dismissable: {
-        type: Boolean,
-        default: false,
-    },
-    /**
-     * The alert auto close after the specified time in milliseconds
-     * @default 0
-     * @type number
-     */
-    autoClose: {
-        type: Number,
-        default: 0,
-    },
-    /**
-     * The alert close label
-     * @default 'Close'
-     * @type string
-     */
-    closeLabel: {
-        type: String,
-        default: 'Close',
-    },
-    /**
-     * The alert title
-     * @default ''
-     * @type string
-     */
-    title: {
-        type: String,
-        default: undefined,
-    },
-    /**
-     * The alert content
-     * @default ''
-     * @type string
-     */
-    content: {
-        type: String,
-        default: undefined,
-    },
-    /**
-     * The alert footer
-     * @default ''
-     * @type string
-     */
-    footer: {
-        type: String,
-        default: undefined,
-    },
-    /**
-     * The alert role
-     * @default 'alert'
-     * @type string
-     * @values 'alert', 'alertdialog'
-     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alert_Role
-     * @see https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Alertdialog_role
-     */
-    role: {
-        type: String as PropType<`${AlertRole}`>,
-        default: AlertRole.alert,
-    },
-}
-
-export const VvAlertEvents = ['close']
-
-export function useVvAlert(props: Readonly<ExtractPropTypes<typeof VvAlertProps>>,	emit: (event: string, ...args: unknown[]) => void) {
-    const { bus } = useInjectedAlertGroup()
-
-    const hasId = useUniqueId(computed(() => props.id))
-    const hasTitleId = computed(() => `${hasId.value}-title`)
-
-    // auto close
-    let timeout: ReturnType<typeof setTimeout>
-
-    // close
-    const close = () => {
-        if (timeout) {
-            clearTimeout(timeout)
-        }
-        emit('close', hasId.value)
-        bus?.emit('close', hasId.value)
-    }
-    watch(
-        () => props.autoClose,
-        (value) => {
-            if (value > 0) {
-                timeout = setTimeout(close, value)
-                return
-            }
-            if (timeout) {
-                clearTimeout(timeout)
-            }
-        },
-        {
-            immediate: true,
-        },
-    )
-
-    // listeners
-    const isMouseover = ref(false)
-    const onMouseover = () => {
-        isMouseover.value = true
-        if (timeout) {
-            clearTimeout(timeout)
-        }
-    }
-    const onMouseleave = () => {
-        isMouseover.value = false
-        if (props.autoClose > 0) {
-            timeout = setTimeout(close, props.autoClose)
-        }
-    }
-
-    // icon
-    const { hasIcon } = useComponentIcon(computed(() => props.icon))
-
-    // props
-    const hasClass = useModifiers(
-        'vv-alert',
-        computed(() => props.modifiers),
-        computed(() => ({
-            'dismissable': props.autoClose > 0 || props.dismissable,
-            'auto-close': props.autoClose > 0,
-            'hover': isMouseover.value,
-        })),
-    )
-    const hasStyle = computed(() => ({
-        '--alert-duration': `${props.autoClose}ms`,
-    }))
-
-    return {
-        close,
-        hasIcon,
-        hasTitleId,
-        hasProps: computed(() => ({
-            onMouseover,
-            onMouseleave,
-            'class': hasClass.value,
-            'style': hasStyle.value,
-            'role': props.role,
-            'aria-labelledby': hasTitleId.value,
-        })),
-    }
-}