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

package/src/components/VvRadioGroup/VvRadioGroup.vue

@@ -0,0 +1,107 @@
+<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, isOptionDisabled } = 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,
+        disabled: isOptionDisabled(option),
+    }
+}
+
+// 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

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

package/src/components/VvSelect/VvSelect.vue

@@ -0,0 +1,273 @@
+<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 VvInputClearAction from '../common/VvInputClearAction'
+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
+})
+
+const isUnselectable = computed(() => {
+    if (isDisabledOrReadonly.value) {
+        return false
+    }
+    return props.unselectable
+})
+
+// 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 && !isDisabledOrReadonly.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 },
+)
+
+/**
+ * Function triggered on clear button click
+ */
+function onClear() {
+    if (Array.isArray(localModelValue.value)) {
+        localModelValue.value = []
+    } else {
+        localModelValue.value = undefined
+    }
+    emit('clear')
+}
+
+// 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="!isUnselectable" :hidden="!isUnselectable">
+                        {{ 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>
+            <VvInputClearAction
+                v-if="isUnselectable && propsDefaults.showClearAction"
+                input-type="select"
+                :label="labelClear"
+                :icon="iconClear"
+                :disabled="!isDirty"
+                @clear="onClear"
+            />
+            <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

@@ -0,0 +1,97 @@
+import type { MaybeElement } from '@vueuse/core'
+import type { Option } from '../../types/generic'
+import {
+    AutocompleteProps,
+    AutofocusProps,
+    ClearProps,
+    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]
+    'clear': []
+}
+
+export const VvSelectProps = {
+    ...IdNameProps,
+    ...AutofocusProps,
+    ...AutocompleteProps,
+    ...TabindexProps,
+    ...ValidProps,
+    ...InvalidProps,
+    ...HintProps,
+    ...LoadingProps,
+    ...DisabledProps,
+    ...ReadonlyProps,
+    ...ModifiersProps,
+    ...OptionsProps,
+    ...IconProps,
+    ...FloatingLabelProps,
+    ...UnselectableProps,
+    ...LabelProps,
+    ...ClearProps,
+    /**
+     * 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

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

@@ -0,0 +1,19 @@
+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']