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

package/src/components/VvTextarea/VvTextarea.vue

@@ -1,328 +0,0 @@
-<script setup lang="ts">
-import type { TextareaHTMLAttributes } from 'vue'
-import { VvTextareaEvents, VvTextareaProps } from '.'
-import HintSlotFactory from '../common/HintSlot'
-import VvDropdown from '../VvDropdown/VvDropdown.vue'
-import VvDropdownOption from '../VvDropdown/VvDropdownOption.vue'
-import VvIcon from '../VvIcon/VvIcon.vue'
-
-// props, emit and slots
-const props = defineProps(VvTextareaProps)
-
-const emit = defineEmits(VvTextareaEvents)
-
-const slots = useSlots()
-
-// props merged with volver defaults (now only for labels)
-const propsDefaults = useDefaults<typeof VvTextareaProps>(
-    'VvTextarea',
-    VvTextareaProps,
-    props,
-)
-
-// template refs
-const textareaEl = ref<HTMLTextAreaElement>()
-const wrapperEl = ref<HTMLDivElement>()
-const suggestionsDropdownEl = ref<InstanceType<typeof VvDropdown>>()
-
-// data
-const {
-    id,
-    icon,
-    iconPosition,
-    iconRemoveSuggestion,
-    labelRemoveSuggestion,
-    label,
-    modelValue,
-    count,
-    valid,
-    invalid,
-    loading,
-    modifiers,
-    debounce,
-    minlength,
-    maxlength,
-    storageKey,
-    storageType,
-} = toRefs(props)
-const hasId = useUniqueId(id)
-const hasHintId = computed(() => `${hasId.value}-hint`)
-// BUG - https://www.samanthaming.com/tidbits/88-css-placeholder-shown/
-const hasPlaceholder = computed(() =>
-    props.floating && isEmpty(props.placeholder) ? ' ' : props.placeholder,
-)
-
-// debounce
-const localModelValue = useDebouncedInput(modelValue, emit, debounce?.value)
-
-// icons
-const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition)
-const { hasIcon: hasIconRemoveSuggestion }
-		= useComponentIcon(iconRemoveSuggestion)
-
-// focus
-const { focused } = useComponentFocus(textareaEl, emit)
-const isFocused = computed(
-    () => focused.value && !props.disabled && !props.readonly,
-)
-watch(isFocused, (newValue) => {
-    if (newValue && propsDefaults.value.selectOnFocus && textareaEl.value) {
-        textareaEl.value.select()
-    }
-    if (newValue && suggestions.value?.size) {
-        suggestionsDropdownEl.value?.show()
-        return
-    }
-    if (isDirty.value && suggestions.value) {
-        const suggestionsLimit = props.maxSuggestions
-
-        if (
-            suggestions.value.size >= suggestionsLimit
-            && !suggestions.value.has(localModelValue.value)
-        ) {
-            suggestions.value = new Set(
-                [...suggestions.value].slice(
-                    suggestions.value.size - suggestionsLimit + 1,
-                ),
-            )
-        }
-        suggestions.value.add(localModelValue.value)
-    }
-})
-
-// visibility
-const isVisible = useElementVisibility(textareaEl)
-watch(isVisible, (newValue) => {
-    if (newValue && props.autofocus) {
-        focused.value = true
-    }
-})
-
-// count
-const { formatted: countFormatted } = useTextCount(localModelValue, {
-    mode: count?.value,
-    upperLimit: Number(maxlength?.value),
-    lowerLimit: Number(minlength?.value),
-})
-
-// tabindex
-const isClickable = computed(() => !props.disabled && !props.readonly)
-const hasTabindex = computed(() =>
-    isClickable.value ? props.tabindex : -1,
-)
-
-// dirty
-const isDirty = computed(() => !isEmpty(modelValue))
-
-// invalid
-const isInvalid = computed(() => {
-    if (props.invalid === true) {
-        return true
-    }
-    if (props.valid === true) {
-        return false
-    }
-    return undefined
-})
-
-// suggestions
-const suggestions = usePersistence<Set<string>>(
-    storageKey,
-    storageType,
-    new Set(),
-)
-const filteredSuggestions = computed(() => {
-    if (!suggestions.value) {
-        return []
-    }
-    return [...suggestions.value]
-        .filter(
-            suggestion =>
-                isEmpty(localModelValue.value)
-                || (`${suggestion}`
-                    .toLowerCase()
-                    .includes(`${localModelValue.value}`.toLowerCase())
-                    && suggestion !== localModelValue.value),
-        )
-        .reverse()
-})
-const hasSuggestions = computed(
-    () =>
-        storageKey?.value
-        && suggestions.value
-        && suggestions.value.size > 0,
-)
-function onSuggestionSelect(suggestion: string) {
-    localModelValue.value = suggestion
-    suggestionsDropdownEl.value?.hide()
-}
-function onSuggestionRemove(suggestion: string) {
-    suggestions.value?.delete(suggestion)
-}
-
-// hint
-const {
-    HintSlot,
-    hasHintLabelOrSlot,
-    hasInvalidLabelOrSlot,
-    hintSlotScope,
-} = HintSlotFactory(propsDefaults, slots)
-
-// styles
-const bemCssClasses = useModifiers(
-    'vv-textarea',
-    modifiers,
-    computed(() => ({
-        'valid': valid.value,
-        'invalid': invalid.value,
-        'loading': loading.value,
-        'disabled': props.disabled,
-        'readonly': props.readonly,
-        'required': props.required,
-        'icon-before': hasIconBefore.value !== undefined,
-        'icon-after': hasIconAfter.value !== undefined,
-        'floating': props.floating && !isEmpty(props.label),
-        'dirty': isDirty.value,
-        'focus': focused.value,
-        'resizable': props.resizable,
-    })),
-)
-
-// attrs
-const hasAttrs = computed(
-    () =>
-        ({
-            'name': props.name,
-            'placeholder': hasPlaceholder.value,
-            'tabindex': hasTabindex.value,
-            'disabled': props.disabled,
-            'readonly': props.readonly,
-            'required': props.required,
-            'autocomplete': props.autocomplete,
-            'minlength': props.minlength,
-            'maxlength': props.maxlength,
-            'cols': props.cols,
-            'rows': props.rows,
-            'wrap': props.wrap,
-            'spellcheck': props.spellcheck,
-            'aria-invalid': isInvalid.value,
-            'aria-describedby': hasHintLabelOrSlot.value
-                ? hasHintId.value
-                : undefined,
-            'aria-errormessage': hasInvalidLabelOrSlot.value
-                ? hasHintId.value
-                : undefined,
-        }) as TextareaHTMLAttributes,
-)
-
-// slots props
-const slotProps = computed(() => ({
-    valid: props.valid,
-    invalid: props.invalid,
-    modelValue: props.modelValue,
-    hintLabel: props.hintLabel,
-    maxlength: props.maxlength,
-    minlength: props.minlength,
-    clear: onClear,
-}))
-
-// methods
-function onClear() {
-    localModelValue.value = undefined
-}
-</script>
-
-<script lang="ts">
-export default {
-    name: 'VvTextarea',
-}
-</script>
-
-<template>
-    <div :class="bemCssClasses">
-        <label v-if="label" :for="hasId" class="vv-textarea__label">
-            {{ label }}
-        </label>
-        <div ref="wrapperEl" class="vv-textarea__wrapper">
-            <!-- @slot Slot to replace icon before textarea -->
-            <div v-if="$slots.before" class="vv-textarea__input-before">
-                <!-- @slot Slot before input -->
-                <slot name="before" v-bind="slotProps" />
-            </div>
-            <div class="vv-textarea__inner">
-                <VvIcon
-                    v-if="hasIconBefore"
-                    v-bind="hasIconBefore"
-                    class="vv-textarea__icon"
-                />
-                <textarea
-                    :id="hasId"
-                    ref="textareaEl"
-                    v-model="localModelValue"
-                    v-bind="hasAttrs"
-                    @keyup="emit('keyup', $event)"
-                />
-                <VvIcon
-                    v-if="hasIconAfter"
-                    v-bind="hasIconAfter"
-                    class="vv-textarea__icon vv-textarea__icon-after"
-                />
-            </div>
-            <div v-if="$slots.after" class="vv-textarea__input-after">
-                <!-- @slot Slot after input -->
-                <slot name="after" v-bind="slotProps" />
-            </div>
-            <span v-if="count" class="vv-textarea__limit">
-                <!-- @slot Slot to replace count -->
-                <slot name="count" v-bind="slotProps">
-                    {{ countFormatted }}
-                </slot>
-            </span>
-        </div>
-        <HintSlot :id="hasHintId" class="vv-textarea__hint">
-            <template v-if="$slots.hint" #hint>
-                <slot name="hint" v-bind="hintSlotScope" />
-            </template>
-            <template v-if="$slots.loading" #loading>
-                <slot name="loading" v-bind="hintSlotScope" />
-            </template>
-            <template v-if="$slots.valid" #valid>
-                <slot name="valid" v-bind="hintSlotScope" />
-            </template>
-            <template v-if="$slots.invalid" #invalid>
-                <slot name="invalid" v-bind="hintSlotScope" />
-            </template>
-        </HintSlot>
-        <VvDropdown
-            v-if="hasSuggestions"
-            ref="suggestionsDropdownEl"
-            :reference="wrapperEl"
-            :autofocus-first="false"
-            :trigger-width="true"
-        >
-            <template #items>
-                <VvDropdownOption
-                    v-for="value in filteredSuggestions"
-                    :key="value"
-                    @click.stop="onSuggestionSelect(value)"
-                >
-                    <div class="flex-1">
-                        <slot name="suggestion" v-bind="{ value }">
-                            {{ value }}
-                        </slot>
-                    </div>
-                    <button
-                        v-if="suggestions && hasIconRemoveSuggestion"
-                        type="button"
-                        tabindex="-1"
-                        class="cursor-pointer"
-                        :title="labelRemoveSuggestion"
-                        @click.stop="onSuggestionRemove(value)"
-                    >
-                        <VvIcon v-bind="hasIconRemoveSuggestion" />
-                    </button>
-                </VvDropdownOption>
-            </template>
-        </VvDropdown>
-    </div>
-</template>

package/src/components/VvTextarea/index.ts

@@ -1,82 +0,0 @@
-import type { ExtractPropTypes } from 'vue'
-import type { VvIconProps } from '../VvIcon'
-import { InputTextareaProps, StorageProps } from '../../props'
-import { ACTION_ICONS } from '../VvIcon'
-
-export const WRAP = {
-    hard: 'hard',
-    soft: 'soft',
-}
-
-export const SPELLCHECK = {
-    true: true,
-    false: false,
-    default: 'default',
-}
-
-export const VvTextareaEvents = ['update:modelValue', 'focus', 'blur', 'keyup']
-
-export const VvTextareaProps = {
-    ...InputTextareaProps,
-    ...StorageProps,
-    /**
-     * Textarea value
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#value
-     */
-    modelValue: String,
-    /**
-     * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20.
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#cols
-     */
-    cols: { type: [String, Number], default: 20 },
-    /**
-     * The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#rows
-     */
-    rows: { type: [String, Number], default: 2 },
-    /**
-     * Indicates how the control should wrap the value for form submission.
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap
-     */
-    wrap: { type: String, default: WRAP.soft },
-    /**
-     * Specifies whether the <textarea> is subject to spell checking by the underlying browser/OS.
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap
-     */
-    spellcheck: { type: [Boolean, String], default: SPELLCHECK.default },
-    /**
-     * VvIcon name for remove suggestion button
-     * @see VVIcon
-     */
-    iconRemoveSuggestion: {
-        type: [String, Object] as PropType<string | VvIconProps>,
-        default: ACTION_ICONS.remove,
-    },
-    /**
-     * Label for remove suggestion button
-     */
-    labelRemoveSuggestion: {
-        type: String,
-        default: 'Remove suggestion',
-    },
-    /**
-     * Maximum number of suggestions
-     */
-    maxSuggestions: {
-        type: Number,
-        default: 5,
-    },
-    /**
-     * Select input text on focus
-     */
-    selectOnFocus: {
-        type: Boolean,
-        default: false,
-    },
-    /**
-     * If true, the textarea will be resizable
-     */
-    resizable: Boolean,
-}
-
-export type VvTextareaPropsTypes = ExtractPropTypes<typeof VvTextareaProps>

package/src/components/VvTooltip/VvTooltip.vue

@@ -1,29 +0,0 @@
-<script setup lang="ts">
-import { VvTooltipProps } from '.'
-
-const props = defineProps(VvTooltipProps)
-const { modifiers } = toRefs(props)
-
-// styles
-const bemCssClasses = useModifiers(
-    'vv-tooltip',
-    modifiers,
-    computed(() => ({
-        [props.position]: true,
-    })),
-)
-</script>
-
-<script lang="ts">
-export default {
-    name: 'VvTooltip',
-}
-</script>
-
-<template>
-    <span :class="bemCssClasses" role="tooltip" inert>
-        <slot>
-            {{ value }}
-        </slot>
-    </span>
-</template>

package/src/components/VvTooltip/index.ts

@@ -1,18 +0,0 @@
-import type { PropType } from 'vue'
-import { Side } from '../../constants'
-import { ModifiersProps } from '../../props'
-
-export const VvTooltipProps = {
-    ...ModifiersProps,
-    /**
-     * Define the tooltip position
-     * @default Side.bottom
-     */
-    position: {
-        type: String as PropType<`${Side}`>,
-        default: Side.bottom,
-    },
-    value: {
-        type: String,
-    },
-}

package/src/components/common/HintSlot.ts

@@ -1,174 +0,0 @@
-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/index.ts

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

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