@volverjs/ui-vue 0.0.13-beta.8 → 0.0.13

package/src/components/VvAccordionGroup/VvAccordionGroup.vue

@@ -0,0 +1,237 @@
+<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()].toSpliced(0, 1)
+    }
+    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({
+    /** Expanded accordions names */
+    expandedAccordions,
+    /** Expand accordion by name, expand all if no name is provided */
+    expand,
+    /** Collapse accordion by name, collapse all if no name is provided */
+    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

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

@@ -0,0 +1,163 @@
+<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 rootEl = ref<HTMLElement | null>(null)
+defineExpose({
+    /** Reference to the root element */
+    $el: rootEl,
+})
+
+// drowpdown trigger
+const {
+    reference: dropdownTriggerReference,
+    bus: dropdownEventBus,
+    aria: dropdownAria,
+    expanded: dropdownExpanded,
+} = useInjectedDropdownTrigger()
+watch(
+    () => rootEl.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="rootEl"
+        :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

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

package/src/components/VvAlert/VvAlert.vue

@@ -0,0 +1,82 @@
+<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 the alert */
+    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
+                    || hasIcon
+                    || 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

@@ -0,0 +1,170 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import type { AlertModifier } from '@/types'
+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,
+        },
+    )
+
+    onBeforeUnmount(() => {
+        if (timeout) {
+            clearTimeout(timeout)
+        }
+    })
+
+    // 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,
+        })),
+    }
+}