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

package/src/components/common/HintSlot.ts

@@ -0,0 +1,174 @@
+import type { ExtractPropTypes, Ref, Slots } from 'vue'
+
+/**
+ * Merge array of string
+ * @param {string[] | string} items
+ * @returns {string} merged string
+ */
+function joinLines(items: string[] | string | unknown[] | undefined) {
+    if (Array.isArray(items)) {
+        return items.filter(item => isString(item)).join(' ')
+    }
+    return items
+}
+
+export type HintSlotProps = Readonly<
+    ExtractPropTypes<{
+        hintLabel: {
+            type: StringConstructor
+            default: ''
+            required: true
+        }
+        modelValue: unknown
+        valid: BooleanConstructor
+        validLabel: (StringConstructor | ArrayConstructor)[]
+        invalid: BooleanConstructor
+        invalidLabel: (StringConstructor | ArrayConstructor)[]
+        loading: BooleanConstructor
+        loadingLabel: StringConstructor
+    }>
+>
+
+/**
+ * Return a vue component (HintSlot) to render and manage hint, errors, valid, loading state and messages
+ * @param {HintSlotProps} propsOrRef vue props
+ * @param {Slots} slots vue slots
+ * @returns {Component} vue component
+ */
+export function HintSlotFactory(
+    propsOrRef: HintSlotProps | Ref<HintSlotProps>,
+    slots: Slots,
+) {
+    const props = computed(() => {
+        if (isRef(propsOrRef)) {
+            return propsOrRef.value
+        }
+        return propsOrRef
+    })
+
+    // label
+    const invalidLabel = computed(() => joinLines(props.value.invalidLabel))
+    const validLabel = computed(() => joinLines(props.value.validLabel))
+    const loadingLabel = computed(() => props.value.loadingLabel)
+    const hintLabel = computed(() => props.value.hintLabel)
+
+    // type
+    const hasLoadingLabelOrSlot = computed(() =>
+        Boolean(props.value.loading && (slots.loading || loadingLabel.value)),
+    )
+    const hasInvalidLabelOrSlot = computed(
+        () =>
+            !hasLoadingLabelOrSlot.value
+            && Boolean(
+                props.value.invalid && (slots.invalid || invalidLabel.value),
+            ),
+    )
+    const hasValidLabelOrSlot = computed(
+        () =>
+            !hasLoadingLabelOrSlot.value
+            && !hasInvalidLabelOrSlot.value
+            && Boolean(props.value.valid && (slots.valid || validLabel.value)),
+    )
+    const hasHintLabelOrSlot = computed(
+        () =>
+            !hasLoadingLabelOrSlot.value
+            && !hasInvalidLabelOrSlot.value
+            && !hasValidLabelOrSlot.value
+            && Boolean(slots.hint || hintLabel.value),
+    )
+    const isVisible = computed(
+        () =>
+            hasInvalidLabelOrSlot.value
+            || hasValidLabelOrSlot.value
+            || hasLoadingLabelOrSlot.value
+            || hasHintLabelOrSlot.value,
+    )
+    const hintSlotScope = computed(() => ({
+        modelValue: props.value.modelValue,
+        valid: props.value.valid,
+        invalid: props.value.invalid,
+        loading: props.value.loading,
+    }))
+    // component
+    const HintSlot = defineComponent({
+        name: 'HintSlot',
+        props: {
+            tag: {
+                type: String,
+                default: 'small',
+            },
+        },
+        setup() {
+            return {
+                isVisible,
+                invalidLabel,
+                validLabel,
+                loadingLabel,
+                hintLabel,
+                hasInvalidLabelOrSlot,
+                hasValidLabelOrSlot,
+                hasLoadingLabelOrSlot,
+                hasHintLabelOrSlot,
+            }
+        },
+        render() {
+            if (this.isVisible) {
+                let role
+                if (this.hasInvalidLabelOrSlot) {
+                    role = 'alert'
+                }
+                if (this.hasValidLabelOrSlot) {
+                    role = 'status'
+                }
+                if (this.hasLoadingLabelOrSlot) {
+                    return h(
+                        this.tag,
+                        {
+                            role,
+                        },
+                        this.$slots.loading?.() ?? this.loadingLabel,
+                    )
+                }
+                if (this.hasInvalidLabelOrSlot) {
+                    return h(
+                        this.tag,
+                        {
+                            role,
+                        },
+                        this.$slots.invalid?.()
+                        ?? this.$slots.invalid
+                        ?? this.invalidLabel,
+                    )
+                }
+                if (this.hasValidLabelOrSlot) {
+                    return h(
+                        this.tag,
+                        {
+                            role,
+                        },
+                        this.$slots.valid?.() ?? this.validLabel,
+                    )
+                }
+                return h(
+                    this.tag,
+                    {
+                        role,
+                    },
+                    this.$slots.hint?.() ?? this.$slots.hint ?? this.hintLabel,
+                )
+            }
+            return null
+        },
+    })
+
+    return {
+        hasInvalidLabelOrSlot,
+        hasHintLabelOrSlot,
+        hasValidLabelOrSlot,
+        hasLoadingLabelOrSlot,
+        hintSlotScope,
+        HintSlot,
+    }
+}
+
+export default HintSlotFactory

package/src/components/common/VvInputClearAction.ts

@@ -0,0 +1,61 @@
+import type { PropType } from 'vue'
+import type { VvIconProps } from '../VvIcon'
+import VvIcon from '../VvIcon/VvIcon.vue'
+
+export default defineComponent({
+    components: {
+        VvIcon,
+    },
+    props: {
+        inputType: {
+            type: String as PropType<'input-text' | 'select'>,
+            default: 'input-text',
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        label: {
+            type: String,
+            default: 'Clear',
+        },
+        icon: {
+            type: [String, Object] as PropType<string | VvIconProps>,
+            default: 'close',
+        },
+    },
+    emits: ['clear'],
+    setup(props, { emit }) {
+        const { hasIcon } = useComponentIcon(computed(() => props.icon))
+        function onClick(e: Event) {
+            e?.stopPropagation()
+            if (!props.disabled) {
+                emit('clear')
+            }
+        }
+        return {
+            hasIcon,
+            onClick,
+        }
+    },
+    render() {
+        const icon = this.hasIcon
+            ? h(VvIcon, {
+                    ...this.hasIcon,
+                    class: `vv-${this.inputType}__icon`,
+                })
+            : undefined
+
+        return h(
+            'button',
+            {
+                disabled: this.disabled,
+                class: `vv-${this.inputType}__action`,
+                ariaLabel: this.label,
+                type: 'button',
+                onClick: this.onClick,
+            },
+            icon,
+        )
+    },
+})

package/src/components/common/VvInputPasswordAction.ts

@@ -0,0 +1,77 @@
+import type { VvIconProps } from '../VvIcon'
+import { ACTION_ICONS } from '../VvIcon'
+import VvIcon from '../VvIcon/VvIcon.vue'
+
+export default defineComponent({
+    components: {
+        VvIcon,
+    },
+    props: {
+        inputType: {
+            type: String as PropType<'input-text'>,
+            default: 'input-text',
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        labelShow: {
+            type: String,
+            default: 'Show password',
+        },
+        labelHide: {
+            type: String,
+            default: 'Hide password',
+        },
+        iconShow: {
+            type: [String, Object] as PropType<string | VvIconProps>,
+            default: ACTION_ICONS.showPassword,
+        },
+        iconHide: {
+            type: [String, Object] as PropType<string | VvIconProps>,
+            default: ACTION_ICONS.hidePassword,
+        },
+    },
+    emits: ['toggle-password'],
+    setup(props, { emit }) {
+        const active = ref(false)
+        const activeIcon = computed(() =>
+            active.value ? props.iconHide : props.iconShow,
+        )
+        const { hasIcon } = useComponentIcon(activeIcon)
+
+        function onClick(e: Event) {
+            e?.stopPropagation()
+            if (!props.disabled) {
+                active.value = !active.value
+                emit('toggle-password', active.value)
+            }
+        }
+
+        return {
+            active,
+            activeIcon,
+            hasIcon,
+            onClick,
+        }
+    },
+    render() {
+        const icon = this.hasIcon
+            ? h(VvIcon, {
+                    ...this.hasIcon,
+                    class: `vv-${this.inputType}__icon`,
+                })
+            : undefined
+        return h(
+            'button',
+            {
+                disabled: this.disabled,
+                class: `vv-${this.inputType}__action`,
+                ariaLabel: this.active ? this.labelHide : this.labelShow,
+                type: 'button',
+                onClick: this.onClick,
+            },
+            icon,
+        )
+    },
+})

package/src/components/common/VvInputStepAction.ts

@@ -0,0 +1,54 @@
+import VvIcon from '../VvIcon/VvIcon.vue'
+
+export default defineComponent({
+    components: {
+        VvIcon,
+    },
+    props: {
+        inputType: {
+            type: String as PropType<'input-text'>,
+            default: 'input-text',
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        label: {
+            type: String,
+        },
+        mode: {
+            type: String,
+            validator: (v: string) => ['up', 'down'].includes(v),
+            default: 'up',
+        },
+    },
+    emits: ['step-up', 'step-down'],
+    setup(props, { emit }) {
+        const isUp = computed(() => props.mode === 'up')
+
+        const onClick = (e: Event) => {
+            e?.stopPropagation()
+            if (!props.disabled) {
+                emit(isUp.value ? 'step-up' : 'step-down')
+            }
+        }
+
+        return {
+            isUp,
+            onClick,
+        }
+    },
+    render() {
+        return h('button', {
+            class: [
+                `vv-${this.inputType}__action`,
+                `vv-${this.inputType}__action-chevron`,
+                this.isUp ? `vv-${this.inputType}__action-chevron-up` : undefined,
+            ],
+            disabled: this.disabled,
+            ariaLabel: this.label,
+            type: 'button',
+            onClick: this.onClick,
+        })
+    },
+})

package/src/components/index.ts

@@ -0,0 +1,34 @@
+export { default as VvAccordion } from './VvAccordion/VvAccordion.vue'
+export { default as VvAccordionGroup } from './VvAccordionGroup/VvAccordionGroup.vue'
+export { default as VvAction } from './VvAction/VvAction.vue'
+export { default as VvAlert } from './VvAlert/VvAlert.vue'
+export { default as VvAlertGroup } from './VvAlertGroup/VvAlertGroup.vue'
+export { default as VvAvatar } from './VvAvatar/VvAvatar.vue'
+export { default as VvAvatarGroup } from './VvAvatarGroup/VvAvatarGroup.vue'
+export { default as VvBadge } from './VvBadge/VvBadge.vue'
+export { default as VvBreadcrumb } from './VvBreadcrumb/VvBreadcrumb.vue'
+export { default as VvButton } from './VvButton/VvButton.vue'
+export { default as VvButtonGroup } from './VvButtonGroup/VvButtonGroup.vue'
+export { default as VvCard } from './VvCard/VvCard.vue'
+export { default as VvCheckbox } from './VvCheckbox/VvCheckbox.vue'
+export { default as VvCheckboxGroup } from './VvCheckboxGroup/VvCheckboxGroup.vue'
+export { default as VvCombobox } from './VvCombobox/VvCombobox.vue'
+export { default as VvDialog } from './VvDialog/VvDialog.vue'
+export { default as VvDropdown } from './VvDropdown/VvDropdown.vue'
+export { default as VvDropdownAction } from './VvDropdown/VvDropdownAction.vue'
+export { default as VvDropdownItem } from './VvDropdown/VvDropdownItem.vue'
+export { default as VvDropdownOptgroup } from './VvDropdown/VvDropdownOptgroup.vue'
+export { default as VvDropdownOption } from './VvDropdown/VvDropdownOption.vue'
+export { default as VvIcon } from './VvIcon/VvIcon.vue'
+export { default as VvInputFile } from './VvInputFile/VvInputFile.vue'
+export { default as VvInputText } from './VvInputText/VvInputText.vue'
+export { default as VvNav } from './VvNav/VvNav.vue'
+export { default as VvNavItem } from './VvNav/VvNavItem.vue'
+export { default as VvNavSeparator } from './VvNav/VvNavSeparator.vue'
+export { default as VvProgress } from './VvProgress/VvProgress.vue'
+export { default as VvRadio } from './VvRadio/VvRadio.vue'
+export { default as VvRadioGroup } from './VvRadioGroup/VvRadioGroup.vue'
+export { default as VvSelect } from './VvSelect/VvSelect.vue'
+export { default as VvTab } from './VvTab/VvTab.vue'
+export { default as VvTextarea } from './VvTextarea/VvTextarea.vue'
+export { default as VvTooltip } from './VvTooltip/VvTooltip.vue'

package/src/composables/alert/useAlerInject.ts

@@ -0,0 +1,8 @@
+import { INJECTION_KEY_ALERT_GROUP } from '../../constants'
+
+/**
+ * Injects alert group
+ */
+export function useInjectedAlertGroup() {
+    return inject(INJECTION_KEY_ALERT_GROUP, {})
+}

package/src/composables/alert/useAlert.ts

@@ -0,0 +1,106 @@
+import type { Alert } from '@/types/alert'
+import {
+    DEFAULT_ALERT_AUTO_CLOSE,
+    DEFAULT_ALERT_DISMISSABLE,
+    DEFAULT_ALERT_GROUP,
+    DEFAULT_ALERT_INFO_ICON,
+    DEFAULT_ALERT_MODIFIERS,
+    DefaultAlertIconMap,
+} from '@/constants'
+
+type AlertInGroup = Alert & { timestamp: number, group: string }
+
+const groups = reactive(
+    new Map<string, Map<string, AlertInGroup>>([
+        [DEFAULT_ALERT_GROUP, new Map<string, AlertInGroup>()],
+    ]),
+)
+
+/**
+ * @description Composable to access alert groups, alerts and functions to add, remove and get alerts by group.
+ * @example
+ *  const { groups, alerts, addAlert, removeAlert, getAlerts } = useAlert()
+ *  addAlert({
+ *      title: 'Success!',
+ *      modifiers: 'success',
+ *  })
+ *
+ *  `<vv-alert-group :items="alerts" :onClose="removeAlert" />`
+ *
+ *  @returns  {
+ *      alerts: ComputedRef<Alert[]> reactive list of alerts default group,
+ *      groups: ReactiveRef<Map<string, Map<string, Alert>>>,
+ *      addAlert: Function to add alert,
+ *      removeAlert: Function to remove alert,
+ *      getAlerts: Function to get alerts by group
+ *  } the reactive list of alerts, groups, addAlert, removeAlert and getAlerts functions
+ */
+export function useAlert() {
+    const addAlert = (
+        {
+            id = crypto.randomUUID(),
+            group = DEFAULT_ALERT_GROUP,
+            title,
+            icon = DEFAULT_ALERT_INFO_ICON,
+            content,
+            footer,
+            modifiers = DEFAULT_ALERT_MODIFIERS,
+            dismissable = DEFAULT_ALERT_DISMISSABLE,
+            autoClose = DEFAULT_ALERT_AUTO_CLOSE,
+            timestamp = Date.now(),
+        } = {} as Partial<AlertInGroup>,
+    ) => {
+        if (!groups.has(group)) {
+            groups.set(group, new Map<string, AlertInGroup>())
+        }
+        const groupMap = groups.get(group)
+        const normalizedModifiers
+            = typeof modifiers === 'string' ? modifiers.split(' ') : modifiers
+
+        if (!icon) {
+            const alertModifier = normalizedModifiers.find(modifier =>
+                DefaultAlertIconMap.has(modifier),
+            )
+
+            if (alertModifier) {
+                icon = DefaultAlertIconMap.get(alertModifier) as string
+            }
+        }
+        groupMap?.set(id.toString(), {
+            id,
+            group,
+            title,
+            icon,
+            content,
+            footer,
+            modifiers,
+            dismissable,
+            autoClose,
+            timestamp,
+        })
+    }
+
+    const removeAlert = (id: string | number, group = DEFAULT_ALERT_GROUP) => {
+        const groupMap = groups.get(group)
+        groupMap?.delete(id.toString())
+    }
+
+    const getAlerts = (group = DEFAULT_ALERT_GROUP) => {
+        return computed(() => {
+            const groupMap = groups.get(group)
+            return groupMap && groupMap instanceof Map
+                ? [...groupMap.values()].toSorted(
+                        (a, b) => a.timestamp - b.timestamp,
+                    )
+                : []
+        })
+    }
+
+    return {
+        groups,
+        alerts: getAlerts(),
+        addAlert,
+        removeAlert,
+        getAlerts,
+    }
+}

package/src/composables/alert/useAlertProvide.ts

@@ -0,0 +1,23 @@
+import type { Ref } from 'vue'
+import mitt from 'mitt'
+import { INJECTION_KEY_ALERT_GROUP } from '@/constants'
+
+/**
+ * Share the alert group name with all its children.
+ * @param {Ref<string | undefined>} name the alert group name
+ */
+export function useAlertProvideGroup({
+    name,
+}: {
+    name: Ref<string | undefined>
+}) {
+    const bus = mitt<{
+        close: string
+    }>()
+    provide(INJECTION_KEY_ALERT_GROUP, {
+        name,
+        bus,
+    })
+
+    return bus
+}

package/src/composables/dropdown/useDropdownContextmenu.ts

@@ -0,0 +1,23 @@
+import type { Ref } from 'vue'
+import type VvDropdown from '@/components/VvDropdown/VvDropdown.vue'
+import { computed, getCurrentInstance, onMounted, onUnmounted, unref } from 'vue'
+
+export function useDropdownContextmenu(dropdownEl: Ref<typeof VvDropdown>, targetEl?: Ref<HTMLElement> | HTMLElement) {
+    const { x, y, getBoundingClientRect, onScroll } = useDropdownVirtualElement(dropdownEl)
+    const onContextmenu = (event: MouseEvent) => {
+        x.value = event.clientX
+        y.value = event.clientY
+        event.preventDefault()
+        dropdownEl.value.show()
+    }
+    const target = computed(() => unref(targetEl))
+    if (target && getCurrentInstance()) {
+        onMounted(() => {
+            target.value?.addEventListener('contextmenu', onContextmenu, false)
+        })
+        onUnmounted(() => {
+            target.value?.removeEventListener('contextmenu', onContextmenu)
+        })
+    }
+    return { x, y, getBoundingClientRect, onContextmenu, onScroll }
+}

package/src/composables/dropdown/useDropdownInject.ts

@@ -0,0 +1,26 @@
+import {
+    INJECTION_KEY_DROPDOWN_ACTION,
+    INJECTION_KEY_DROPDOWN_ITEM,
+    INJECTION_KEY_DROPDOWN_TRIGGER,
+} from '../../constants'
+
+/**
+ * Injects dropdown reference and the event bus
+ */
+export function useInjectedDropdownTrigger() {
+    return inject(INJECTION_KEY_DROPDOWN_TRIGGER, {})
+}
+
+/**
+ * Injects dropdown item role
+ */
+export function useInjectedDropdownItem() {
+    return inject(INJECTION_KEY_DROPDOWN_ITEM, {})
+}
+
+/**
+ * Injects dropdown action role
+ */
+export function useInjectedDropdownAction() {
+    return inject(INJECTION_KEY_DROPDOWN_ACTION, {})
+}

package/src/composables/dropdown/useDropdownProvide.ts

@@ -0,0 +1,96 @@
+import type { Ref } from 'vue'
+import type { DropdownItemState } from '../../constants'
+import mitt from 'mitt'
+import { Fragment } from 'vue'
+import {
+    ActionRoles,
+    DropdownItemRole,
+
+    DropdownRole,
+    INJECTION_KEY_DROPDOWN_ACTION,
+    INJECTION_KEY_DROPDOWN_ITEM,
+    INJECTION_KEY_DROPDOWN_TRIGGER,
+} from '../../constants'
+
+/**
+ * Share the dropdown reference and the event bus with all its children.
+ * @param {Ref<HTMLElement | null>} reference the dropdown reference
+ */
+export function useDropdownProvideTrigger({
+    reference,
+    id,
+    expanded,
+    aria,
+}: {
+    reference: Ref<HTMLElement | null | undefined>
+    id: Ref<string | number>
+    expanded: Ref<boolean>
+    aria: Ref<{
+        'aria-controls': string
+        'aria-haspopup': boolean
+        'aria-expanded': boolean
+    }>
+}) {
+    const bus = mitt<{
+        click: Event
+        mouseover: Event
+        mouseleave: Event
+    }>()
+    const component = defineComponent({
+        name: 'VvDropdownTriggerProvider',
+        setup() {
+            provide(INJECTION_KEY_DROPDOWN_TRIGGER, {
+                reference,
+                id,
+                expanded,
+                aria,
+                bus,
+            })
+        },
+        render() {
+            return h(Fragment, {}, this.$slots.default?.())
+        },
+    })
+
+    return {
+        bus,
+        component,
+    }
+}
+
+/**
+ * Share the dropdown item role with all its children.
+ * @param {Ref<string>} role the dropdown item role
+ */
+export function useDropdownProvideItem({
+    role,
+    ...others
+}: Omit<DropdownItemState, 'role'> & {
+    role: Ref<`${DropdownRole}`>
+}) {
+    const itemRole = computed(() =>
+        role.value === DropdownRole.listbox
+            ? DropdownItemRole.option
+            : DropdownItemRole.presentation,
+    )
+    provide(INJECTION_KEY_DROPDOWN_ITEM, {
+        role: itemRole,
+        ...others,
+    })
+    return { itemRole }
+}
+
+/**
+ * Share the dropdown item role with all its children.
+ * @param {Ref<string>} role the dropdown item role
+ */
+export function useDropdownProvideAction({
+    expanded,
+}: {
+    expanded?: Ref<boolean>
+}) {
+    provide(INJECTION_KEY_DROPDOWN_ACTION, {
+        role: ref(ActionRoles.menuitem),
+        expanded,
+    })
+}