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

package/src/components/VvRadioGroup/VvRadioGroup.vue

@@ -1,106 +0,0 @@
-<script setup lang="ts">
-import type { Option } from '../../types/generic'
-import type { InputGroupState } from '../../types/group'
-import { VvRadioGroupEvents, VvRadioGroupProps } from '.'
-import { INJECTION_KEY_RADIO_GROUP } from '../../constants'
-import { HintSlotFactory } from '../common/HintSlot'
-import VvRadio from '../VvRadio/VvRadio.vue'
-
-// props, emit and slots
-const props = defineProps(VvRadioGroupProps)
-
-const emit = defineEmits(VvRadioGroupEvents)
-
-const slots = useSlots()
-
-// props merged with volver defaults (now only for labels)
-const propsDefaults = useDefaults<typeof VvRadioGroupProps>(
-    'VvRadioGroup',
-    VvRadioGroupProps,
-    props,
-)
-
-// data
-const modelValue = useVModel(props, 'modelValue', emit)
-const { disabled, readonly, vertical, valid, invalid, modifiers }
-		= toRefs(props)
-
-useGroupStateProvide<InputGroupState>(INJECTION_KEY_RADIO_GROUP, {
-    modelValue,
-    disabled,
-    readonly,
-    valid,
-    invalid,
-})
-
-// options
-const { getOptionLabel, getOptionValue } = useOptions(props)
-
-// styles
-const bemCssClasses = useModifiers(
-    'vv-radio-group',
-    modifiers,
-    computed(() => ({
-        disabled: disabled.value,
-        readonly: readonly.value,
-        required: props.required,
-        horizontal: !vertical.value,
-        valid: valid.value,
-        invalid: invalid.value,
-    })),
-)
-
-// methods
-function getOptionProps(option: string | Option, index: number) {
-    return {
-        id: `${props.name}_opt${index}`,
-        name: props.name,
-        label: getOptionLabel(option),
-        value: getOptionValue(option),
-        required: props.required,
-    }
-}
-
-// hint
-const { HintSlot, hintSlotScope } = HintSlotFactory(propsDefaults, slots)
-</script>
-
-<script lang="ts">
-export default {
-    name: 'VvRadioGroup',
-}
-</script>
-
-<template>
-    <fieldset :class="bemCssClasses">
-        <legend v-if="label" v-text="label" />
-        <div class="vv-radio-group__wrapper">
-            <!-- #region options -->
-            <template v-if="options.length > 0">
-                <VvRadio
-                    v-for="(option, index) in options"
-                    :key="index"
-                    v-bind="getOptionProps(option, index)"
-                />
-            </template>
-            <!-- #endregion -->
-            <!-- #region default -->
-            <slot v-else />
-            <!-- #endregion -->
-        </div>
-        <HintSlot class="vv-radio-group__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>
-    </fieldset>
-</template>

package/src/components/VvRadioGroup/index.ts

@@ -1,5 +0,0 @@
-import { CheckboxRadioGroupProps } from '../../props'
-
-export const VvRadioGroupProps = CheckboxRadioGroupProps
-
-export const VvRadioGroupEvents = ['update:modelValue', 'change']

package/src/components/VvSelect/VvSelect.vue

@@ -1,269 +0,0 @@
-<script setup lang="ts" generic="T extends string | Option">
-import type { SelectHTMLAttributes } from 'vue'
-import type { VvSelectEmits } from '.'
-import type { Option } from '../../types/generic'
-import { useVvSelectProps } from '.'
-import HintSlotFactory from '../common/HintSlot'
-import VvIcon from '../VvIcon/VvIcon.vue'
-
-// props, emit and slots
-// WARNING: This is a provisiaonal implementation, it may change in the future
-const props = defineProps(useVvSelectProps<T>())
-const emit = defineEmits<VvSelectEmits>()
-const slots = useSlots()
-
-// props merged with volver defaults (now only for labels)
-const VvSelectProps = useVvSelectProps<T>()
-const propsDefaults = useDefaults<typeof VvSelectProps>(
-    'VvSelect',
-    VvSelectProps,
-    props,
-)
-
-// template refs
-const selectEl = ref<HTMLSelectElement>()
-
-// hint
-const {
-    HintSlot,
-    hasHintLabelOrSlot,
-    hasInvalidLabelOrSlot,
-    hintSlotScope,
-} = HintSlotFactory(propsDefaults, slots)
-
-// focus
-const { focused } = useComponentFocus(selectEl, emit)
-
-// group
-function isGroup(option: T) {
-    if (typeof option === 'string') {
-        return false
-    }
-    return option.options?.length
-}
-
-// data
-const {
-    id,
-    modifiers,
-    disabled,
-    readonly,
-    loading,
-    icon,
-    iconPosition,
-    invalid,
-    valid,
-    floating,
-    multiple,
-} = toRefs(props)
-const hasId = useUniqueId(id)
-const hasHintId = computed(() => `${hasId.value}-hint`)
-
-// tabindex
-const isDisabledOrReadonly = computed(() => props.disabled || props.readonly)
-const hasTabindex = computed(() => {
-    return isDisabledOrReadonly.value ? -1 : props.tabindex
-})
-
-// modelValue
-const localModelValue = computed({
-    get: () => {
-        return props.modelValue
-    },
-    set: (newValue) => {
-        if (Array.isArray(newValue)) {
-            newValue = newValue.filter(item => item !== undefined)
-            if (newValue.length === 0 && !props.unselectable && selectEl.value) {
-                selectEl.value.value = String(props.modelValue)
-                return
-            }
-        }
-        emit('update:modelValue', newValue)
-    },
-})
-const isDirty = computed(() => {
-    if (Array.isArray(localModelValue.value)) {
-        return localModelValue.value.length > 0
-    }
-    return localModelValue.value !== undefined && localModelValue.value !== null
-})
-
-// visibility
-const isVisible = useElementVisibility(selectEl)
-watch(isVisible, (newValue) => {
-    if (newValue && props.autofocus) {
-        focused.value = true
-    }
-})
-// icons
-const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition)
-
-// invalid
-const isInvalid = computed(() => {
-    if (props.invalid === true) {
-        return true
-    }
-    if (props.valid === true) {
-        return false
-    }
-    return undefined
-})
-
-// styles
-const bemCssClasses = useModifiers(
-    'vv-select',
-    modifiers,
-    computed(() => ({
-        'valid': valid.value,
-        'invalid': invalid.value,
-        'loading': loading.value,
-        'disabled': disabled.value,
-        'readonly': readonly.value,
-        'icon-before': hasIconBefore.value !== undefined,
-        'icon-after': hasIconAfter.value !== undefined,
-        'dirty': isDirty.value,
-        'focus': focused.value,
-        'floating': floating.value,
-        'multiple': multiple.value,
-    })),
-)
-
-// options
-const {
-    getOptionLabel,
-    getOptionValue,
-    isOptionDisabled,
-    getOptionGrouped,
-} = useOptions(props)
-
-/**
- * Auto select the first option if autoOpen is enabled
- */
-watch(
-    () => props.options,
-    (newValue) => {
-        if (newValue?.length && props.autoselectFirst && !isDirty.value) {
-            const firstOptionValue = getOptionValue(newValue[0])
-            localModelValue.value = props.multiple ? [firstOptionValue] : firstOptionValue
-        }
-    },
-    { immediate: true },
-)
-
-// attrs
-const hasAttrs: SelectHTMLAttributes = computed(() => {
-    return {
-        'name': props.name,
-        'tabindex': hasTabindex.value,
-        'disabled': isDisabledOrReadonly.value,
-        'required': props.required,
-        'size': props.size,
-        'autocomplete': props.autocomplete,
-        'multiple': props.multiple,
-        'aria-invalid': isInvalid.value,
-        'aria-describedby': hasHintLabelOrSlot.value
-            ? hasHintId.value
-            : undefined,
-        'aria-errormessage': hasInvalidLabelOrSlot.value
-            ? hasHintId.value
-            : undefined,
-    }
-})
-
-// slots
-const slotProps = computed(() => ({
-    valid: props.valid,
-    invalid: props.invalid,
-    modelValue: props.modelValue,
-}))
-</script>
-
-<script lang="ts">
-export default {
-    name: 'VvSelect',
-}
-</script>
-
-<template>
-    <div :class="bemCssClasses">
-        <label v-if="label" :for="hasId">{{ label }}</label>
-        <!-- #region native select -->
-        <div class="vv-select__wrapper">
-            <div v-if="$slots.before" class="vv-select__input-before">
-                <!-- @slot Slot before input -->
-                <slot name="before" v-bind="slotProps" />
-            </div>
-            <div class="vv-select__inner">
-                <VvIcon
-                    v-if="hasIconBefore"
-                    v-bind="hasIconBefore"
-                    class="vv-select__icon"
-                />
-                <select
-                    :id="hasId"
-                    ref="selectEl"
-                    v-bind="hasAttrs"
-                    v-model="localModelValue"
-                >
-                    <option
-                        v-if="placeholder"
-                        :value="undefined"
-                        :disabled="!unselectable"
-                        :hidden="!unselectable"
-                    >
-                        {{ placeholder }}
-                    </option>
-                    <template v-for="(option, index) in options">
-                        <option
-                            v-if="!isGroup(option)"
-                            :key="index"
-                            :disabled="isOptionDisabled(option)"
-                            :value="getOptionValue(option)"
-                        >
-                            {{ getOptionLabel(option) }}
-                        </option>
-                        <optgroup
-                            v-else
-                            :key="`group-${index}`"
-                            :disabled="isOptionDisabled(option)"
-                            :label="getOptionLabel(option)"
-                        >
-                            <option
-                                v-for="(item, i) in getOptionGrouped(option)"
-                                :key="`group-${index}-item-${i}`"
-                                :disabled="isOptionDisabled(item)"
-                                :value="getOptionValue(item)"
-                            >
-                                {{ getOptionLabel(item) }}
-                            </option>
-                        </optgroup>
-                    </template>
-                </select>
-                <VvIcon
-                    v-if="hasIconAfter"
-                    v-bind="hasIconAfter"
-                    class="vv-select__icon vv-select__icon-after"
-                />
-            </div>
-            <div v-if="$slots.after" class="vv-select__input-after">
-                <!-- @slot Slot after input -->
-                <slot name="after" v-bind="slotProps" />
-            </div>
-        </div>
-        <!-- #endregion native select -->
-        <HintSlot :id="hasHintId" class="vv-select__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>
-    </div>
-</template>

package/src/components/VvSelect/index.ts

@@ -1,94 +0,0 @@
-import type { MaybeElement } from '@vueuse/core'
-import type { Option } from '../../types/generic'
-import {
-    AutocompleteProps,
-    AutofocusProps,
-    DisabledProps,
-    FloatingLabelProps,
-    HintProps,
-    IconProps,
-    IdNameProps,
-    InvalidProps,
-    LabelProps,
-    LoadingProps,
-    ModifiersProps,
-    OptionsProps,
-    ReadonlyProps,
-    TabindexProps,
-    UnselectableProps,
-    ValidProps,
-} from '../../props'
-
-export type VvSelectEmits = {
-    'update:modelValue': [any]
-    'focus': [MaybeElement]
-    'blur': [MaybeElement]
-}
-
-export const VvSelectProps = {
-    ...IdNameProps,
-    ...AutofocusProps,
-    ...AutocompleteProps,
-    ...TabindexProps,
-    ...ValidProps,
-    ...InvalidProps,
-    ...HintProps,
-    ...LoadingProps,
-    ...DisabledProps,
-    ...ReadonlyProps,
-    ...ModifiersProps,
-    ...OptionsProps,
-    ...IconProps,
-    ...FloatingLabelProps,
-    ...UnselectableProps,
-    ...LabelProps,
-    /**
-     * This Boolean attribute indicates that multiple options can be selected in the list.
-     * If it is not specified, then only one option can be selected at a time.
-     * When multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple
-     */
-    multiple: Boolean,
-    /**
-     * A Boolean attribute indicating that an option with a non-empty string value must be selected.
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required
-     */
-    required: Boolean,
-    /**
-     * If the control is presented as a scrolling list box (e.g. when multiple is specified),
-     * this attribute represents the number of rows in the list that should be visible at one time.
-     * Browsers are not required to present a select element as a scrolled list box. The default value is 0.
-     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size
-     */
-    size: [String, Number],
-    /**
-     * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
-     */
-    modelValue: {
-        type: [String, Number, Boolean, Object, Array],
-        default: undefined,
-    },
-    /**
-     * Select first option automatically
-     */
-    autoselectFirst: {
-        type: Boolean,
-        default: false,
-    },
-    /**
-     * Select placeholder
-     */
-    placeholder: String,
-}
-
-// WARNING: This is a provisiaonal implementation, it may change in the future
-export function useVvSelectProps<T extends Option | string>() {
-    return {
-        ...VvSelectProps,
-        options: {
-            ...VvSelectProps.options,
-            type: Array as PropType<T[]>,
-            default: () => [],
-        },
-    }
-}

package/src/components/VvTab/VvTab.vue

@@ -1,87 +0,0 @@
-<script setup lang="ts">
-import type { NavItemTab } from '@/types/nav'
-import VvNav from '@/components/VvNav/VvNav.vue'
-import { VvTabEvents, VvTabProps } from '@/components/VvTab'
-
-const props = defineProps(VvTabProps)
-const emit = defineEmits(VvTabEvents)
-const { modifiers, items } = toRefs(props)
-const tabKeys = computed(() => {
-    return items.value.reduce<string[]>((acc, item) => {
-        if (item.tab) {
-            acc.push(item.tab)
-        }
-        return acc
-    }, [])
-})
-const localModelValue = ref<string | undefined>()
-const activeTabKey = computed({
-    get: () => {
-        return (
-            props.modelValue || localModelValue.value || tabKeys.value?.[0]
-        )
-    },
-    set: (newValue) => {
-        localModelValue.value = newValue
-        emit('update:modelValue', newValue)
-    },
-})
-const hasNavModifiers = computed(() => {
-    return [
-        'tabs',
-        ...(Array.isArray(props.navModifiers)
-            ? props.navModifiers
-            : props.navModifiers?.split(' ') ?? []),
-    ]
-})
-function onNavClick(item: NavItemTab) {
-    if (item.tab) {
-        activeTabKey.value = item.tab
-    }
-}
-const navItems = computed(() =>
-    props.items.map(item => ({
-        current: item.tab === activeTabKey.value,
-        ...item,
-    })),
-)
-
-// bem css classes
-const bemCssClasses = useModifiers('vv-tab', modifiers)
-</script>
-
-<script lang="ts">
-export default {
-    name: 'VvTab',
-}
-</script>
-
-<template>
-    <div :class="bemCssClasses">
-        <!-- #region nav -->
-        <VvNav
-            v-bind="{
-                items: navItems,
-                modifiers: hasNavModifiers,
-            }"
-            @click="onNavClick"
-        >
-            <template #item="{ item, data, index }">
-                <slot name="nav-item" v-bind="{ item, data, index }" />
-            </template>
-        </VvNav>
-        <!-- #endregion -->
-
-        <!-- #region panels -->
-        <template v-for="(item, index) in items" :key="index">
-            <article
-                v-if="item.tab"
-                :class="{ target: activeTabKey === item.tab }"
-                class="vv-tab__panel"
-            >
-                <slot :name="`panel::${item.tab}`" />
-            </article>
-        </template>
-        <!-- #endregion -->
-    </div>
-</template>

package/src/components/VvTab/index.ts

@@ -1,19 +0,0 @@
-import type { NavItemTab } from '@/types/nav'
-import { ModifiersProps } from '@/props'
-
-export const VvTabProps = {
-    ...ModifiersProps,
-    navModifiers: {
-        type: [String, Array] as PropType<string | string[]>,
-    },
-    modelValue: {
-        type: String,
-        default: '',
-    },
-    items: {
-        type: Array as PropType<NavItemTab[]>,
-        default: () => [],
-    },
-}
-
-export const VvTabEvents = ['update:modelValue']