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

package/src/components/VvButton/index.ts

@@ -1,125 +0,0 @@
-import type { ExtractPropTypes, PropType } from 'vue'
-import type { ButtonGroupState } from '../../types/group'
-import { INJECTION_KEY_BUTTON_GROUP, Side } from '../../constants'
-import {
-    ActionProps,
-    IconProps,
-    IdProps,
-    LoadingProps,
-    ModifiersProps,
-    UnselectableProps,
-} from '../../props'
-
-export const VvButtonEvents = ['update:modelValue']
-
-export const VvButtonProps = {
-    ...ActionProps,
-    ...IdProps,
-    ...ModifiersProps,
-    ...UnselectableProps,
-    ...LoadingProps,
-    ...IconProps,
-    /**
-     * Button icon position
-     */
-    iconPosition: {
-        type: String as PropType<`${Side}`>,
-        default: Side.left,
-        validator: (value: Side) => Object.values(Side).includes(value),
-    },
-    /**
-     * Loading icon
-     */
-    loadingIcon: { type: String, default: 'eos-icons:bubble-loading' },
-    /**
-     * Enable button toggle
-     */
-    toggle: {
-        type: Boolean,
-        default: false,
-    },
-    /**
-     * Button toggle value
-     */
-    value: {
-        type: [String, Number, Boolean],
-        default: undefined,
-    },
-    /**
-     * Value associated with the unchecked state
-     */
-    uncheckedValue: {
-        type: [String, Number, Boolean],
-        default: undefined,
-    },
-    /**
-     * Button toggle model value
-     */
-    modelValue: {
-        type: [String, Number, Boolean],
-        default: undefined,
-    },
-}
-
-export type VvButtonPropsTypes = ExtractPropTypes<typeof VvButtonProps>
-
-/**
- * Merges local and group props
- */
-export function useGroupProps(
-    props: VvButtonPropsTypes,
-    emit: (event: (typeof VvButtonEvents)[number], value: unknown) => void,
-) {
-    const { group, isInGroup, getGroupOrLocalRef }
-		= useGroupStateInject<ButtonGroupState>(INJECTION_KEY_BUTTON_GROUP)
-
-    // local props
-    const { id, iconPosition, icon, label, pressed } = toRefs(props)
-
-    // group props
-    const modelValue = getGroupOrLocalRef('modelValue', props, emit)
-    const toggle = getGroupOrLocalRef('toggle', props)
-    const unselectable = getGroupOrLocalRef('unselectable', props)
-    const multiple = computed(() => group?.multiple.value ?? false)
-    // merge local and group modifiers
-    const modifiers = computed(() => {
-        let localModifiers = props.modifiers
-        let groupModifiers = group?.modifiers.value
-
-        const toReturn = new Set<string>()
-        if (localModifiers) {
-            if (!Array.isArray(localModifiers)) {
-                localModifiers = localModifiers.split(' ')
-            }
-            localModifiers.forEach(modifier => toReturn.add(modifier))
-        }
-        if (groupModifiers) {
-            if (!Array.isArray(groupModifiers)) {
-                groupModifiers = groupModifiers.split(' ')
-            }
-            groupModifiers.forEach(modifier => toReturn.add(modifier))
-        }
-        return Array.from(toReturn)
-    })
-    const disabled = computed(() =>
-        Boolean(props.disabled || group?.disabled.value),
-    )
-
-    return {
-        // group props
-        group,
-        isInGroup,
-        modelValue,
-        toggle,
-        unselectable,
-        multiple,
-        modifiers,
-        disabled,
-        // local props
-        id,
-        pressed,
-        iconPosition,
-        icon,
-        label,
-    }
-}

package/src/components/VvButtonGroup/VvButtonGroup.vue

@@ -1,82 +0,0 @@
-<script setup lang="ts">
-import type { ButtonGroupState } from '../../types/group'
-import { VvButtonGroupEvents, VvButtonGroupProps } from '.'
-import { INJECTION_KEY_BUTTON_GROUP } from '../../constants'
-
-const props = defineProps(VvButtonGroupProps)
-
-// emit and props
-const emit = defineEmits(VvButtonGroupEvents)
-
-// data
-const {
-    disabled,
-    toggle,
-    modifiers,
-    multiple,
-    unselectable,
-    itemModifiers,
-} = toRefs(props)
-watchEffect(() => {
-    if (typeof props.modelValue === 'string' && multiple.value) {
-        console.warn(
-            `[VvButtonGroup]: modelValue is a string but multiple is true.`,
-        )
-    }
-})
-const modelValue = computed({
-    get: () => {
-        if (!multiple.value) {
-            return Array.isArray(props.modelValue)
-                ? props.modelValue[0]
-                : props.modelValue
-        }
-        return props.modelValue
-    },
-    set: (newValue) => {
-        if (
-            newValue !== undefined
-            && (Array.isArray(props.modelValue) || multiple.value)
-            && !Array.isArray(newValue)
-        ) {
-            return emit('update:modelValue', [newValue])
-        }
-        return emit('update:modelValue', newValue)
-    },
-})
-
-// provide
-useGroupStateProvide<ButtonGroupState>(INJECTION_KEY_BUTTON_GROUP, {
-    modelValue,
-    disabled,
-    toggle,
-    multiple,
-    unselectable,
-    modifiers: itemModifiers,
-})
-
-// style
-const bemCssClasses = useModifiers('vv-button-group', modifiers)
-</script>
-
-<script lang="ts">
-export default {
-    name: 'VvButtonGroup',
-}
-</script>
-
-<template>
-    <fieldset :class="bemCssClasses" role="group">
-        <legend
-            v-if="$slots.legend || legendLabel"
-            class="vv-button-group__legend"
-        >
-            <!-- @slot Legend slot -->
-            <slot name="legend">
-                {{ legendLabel }}
-            </slot>
-        </legend>
-        <!-- @slot Default slot -->
-        <slot />
-    </fieldset>
-</template>

package/src/components/VvButtonGroup/index.ts

@@ -1,29 +0,0 @@
-import { DisabledProps, ModifiersProps, UnselectableProps } from '../../props'
-
-export const VvButtonGroupProps = {
-    ...ModifiersProps,
-    ...DisabledProps,
-    ...UnselectableProps,
-    legendLabel: { type: String },
-    /**
-     * String or String[] of css classes (modifiers) that will be provided to each button'
-     */
-    itemModifiers: {
-        type: [String, Array] as PropType<string | string[]>,
-        default: '',
-    },
-    toggle: { type: Boolean, default: false },
-    multiple: { type: Boolean, default: false },
-    modelValue: {
-        type: [String, Number, Boolean, Array] as PropType<
-            | string
-            | number
-            | boolean
-            | (string | number | boolean)[]
-            | undefined
-        >,
-        default: undefined,
-    },
-}
-
-export const VvButtonGroupEvents = ['update:modelValue']

package/src/components/VvCard/VvCard.vue

@@ -1,37 +0,0 @@
-<script setup lang="ts">
-import { VvCardProps } from '.'
-
-// props and attrs
-const props = defineProps(VvCardProps)
-
-// styles
-const { modifiers } = toRefs(props)
-const bemCssClasses = useModifiers('vv-card', modifiers)
-</script>
-
-<script lang="ts">
-export default {
-    name: 'VvCard',
-}
-</script>
-
-<template>
-    <article :class="bemCssClasses">
-        <header v-if="$slots.header || title" class="vv-card__header">
-            <!-- @slot Title slot -->
-            <slot name="header">
-                {{ title }}
-            </slot>
-        </header>
-        <!-- @slot Default slot -->
-        <slot />
-        <div v-if="$slots.content" class="vv-card__content">
-            <!-- @slot Content slot -->
-            <slot name="content" />
-        </div>
-        <footer v-if="$slots.footer" class="vv-card__footer">
-            <!-- @slot Footer slot -->
-            <slot name="footer" />
-        </footer>
-    </article>
-</template>

package/src/components/VvCard/index.ts

@@ -1,6 +0,0 @@
-import { ModifiersProps } from '@/props'
-
-export const VvCardProps = {
-    ...ModifiersProps,
-    title: String,
-}

package/src/components/VvCheckbox/VvCheckbox.vue

@@ -1,200 +0,0 @@
-<script setup lang="ts">
-import { useGroupProps, VvCheckboxEvents, VvCheckboxProps } from '.'
-import { HintSlotFactory } from '../common/HintSlot'
-
-// props, emits and slots
-const props = defineProps(VvCheckboxProps)
-
-const emit = defineEmits(VvCheckboxEvents)
-
-const slots = useSlots()
-
-// props merged with volver defaults (now only for labels)
-const propsDefaults = useDefaults<typeof VvCheckboxProps>(
-    'VvCheckbox',
-    VvCheckboxProps,
-    props,
-)
-
-// data
-const {
-    id,
-    disabled,
-    readonly,
-    valid,
-    invalid,
-    propsSwitch,
-    modelValue,
-    indeterminate,
-    isInGroup,
-} = useGroupProps(props, emit)
-const hasId = useUniqueId(id)
-const hasHintId = computed(() => `${hasId.value}-hint`)
-const tabindex = computed(() => (isDisabled.value ? -1 : props.tabindex))
-
-// template ref
-const input = ref()
-
-// computed
-const isBinary = computed(
-    () => props.uncheckedValue !== undefined && !isInGroup.value,
-)
-const isDisabled = computed(() => disabled.value || readonly.value)
-const isInvalid = computed(() => {
-    if (invalid.value === true) {
-        return true
-    }
-    if (valid.value === true) {
-        return false
-    }
-    return undefined
-})
-const isChecked = computed(() => {
-    if (isBinary.value) {
-        return modelValue.value === props.value
-    }
-    return Array.isArray(modelValue.value)
-        ? contains(props.value, modelValue.value)
-        : equals(props.value, modelValue.value)
-})
-const isIndeterminated = computed(() => {
-    if (indeterminate.value) {
-        return true
-    }
-    if (
-        !isChecked.value
-        && isBinary.value
-        && props.uncheckedValue !== modelValue.value
-    ) {
-        return true
-    }
-    return false
-})
-const hasValue = computed(() => {
-    if (isBinary.value) {
-        return undefined
-    }
-    return ['string', 'number', 'boolean'].includes(typeof props.value)
-        ? props.value
-        : true
-})
-const localModelValue = computed({
-    get() {
-        return isChecked.value
-    },
-    set(newValue) {
-        if (isBinary.value) {
-            modelValue.value = newValue ? props.value : props.uncheckedValue
-        }
-        else if (Array.isArray(modelValue.value) || isInGroup.value) {
-            const currentValue = modelValue.value ?? []
-            const toReturn = new Set(
-                Array.isArray(currentValue) ? currentValue : [currentValue],
-            )
-            if (newValue) {
-                toReturn.add(props.value)
-            }
-            else {
-                toReturn.delete(props.value)
-            }
-            modelValue.value = [...toReturn]
-        }
-        else {
-            modelValue.value = newValue ? props.value : undefined
-        }
-        emit('change', newValue)
-    },
-})
-
-// styles
-const { modifiers } = toRefs(props)
-const bemCssClasses = useModifiers(
-    'vv-checkbox',
-    modifiers,
-    computed(() => ({
-        switch: propsSwitch.value,
-        valid: valid.value,
-        invalid: invalid.value,
-        disabled: disabled.value,
-        readonly: readonly.value,
-        indeterminate: indeterminate.value,
-    })),
-)
-
-watchEffect(() => {
-    if (isBinary.value && Array.isArray(modelValue.value)) {
-        console.warn(
-            `[VvCheckbox] The model value is an array but the component is in binary mode.`,
-        )
-    }
-})
-
-// indeterminate
-watch(
-    () => isIndeterminated.value,
-    (newValue) => {
-        if (newValue) {
-            input.value.indeterminate = true
-        }
-        else {
-            input.value.indeterminate = false
-        }
-    },
-)
-onMounted(() => {
-    if (isIndeterminated.value) {
-        input.value.indeterminate = true
-    }
-})
-
-// hint
-const {
-    HintSlot,
-    hasHintLabelOrSlot,
-    hasInvalidLabelOrSlot,
-    hintSlotScope,
-} = HintSlotFactory(propsDefaults, slots)
-</script>
-
-<script lang="ts">
-export default {
-    name: 'VvCheckbox',
-}
-</script>
-
-<template>
-    <label :class="bemCssClasses" :for="hasId">
-        <input
-            :id="hasId"
-            ref="input"
-            v-model="localModelValue"
-            type="checkbox"
-            class="vv-checkbox__input"
-            :name
-            :disabled="isDisabled"
-            :value="hasValue"
-            :tabindex
-            :aria-invalid="isInvalid"
-            :aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
-            :aria-errormessage="hasInvalidLabelOrSlot ? hasHintId : undefined"
-        >
-        <!-- @slot Use this slot for check label -->
-        <slot :value="modelValue">
-            {{ label }}
-        </slot>
-        <HintSlot :id="hasHintId" class="vv-checkbox__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>
-    </label>
-</template>

package/src/components/VvCheckbox/index.ts

@@ -1,65 +0,0 @@
-import type { ExtractPropTypes, Ref } from 'vue'
-import type { InputGroupState } from '../../types/group'
-import { INJECTION_KEY_CHECK_GROUP } from '../../constants'
-import { CheckboxRadioProps, ModifiersProps } from '../../props'
-
-export const VvCheckboxProps = {
-    ...CheckboxRadioProps,
-    ...ModifiersProps,
-    /**
-     * If true, the input will be indeterminated
-     */
-    indeterminate: Boolean,
-    /**
-     * Value associated with the unchecked state
-     */
-    uncheckedValue: [String, Number, Boolean],
-    /**
-     * If true, the input will be displayed as a switch
-     */
-    switch: Boolean,
-}
-
-export const VvCheckboxEvents = ['click', 'update:modelValue', 'change', 'blur']
-
-export type VvCheckboxPropsTypes = ExtractPropTypes<typeof VvCheckboxProps>
-
-/**
- * Merges local and group props
- */
-export function useGroupProps(
-    props: VvCheckboxPropsTypes,
-    emit: (event: (typeof VvCheckboxEvents)[number], value: unknown) => void,
-) {
-    const { group, isInGroup, getGroupOrLocalRef }
-		= useGroupStateInject<InputGroupState>(INJECTION_KEY_CHECK_GROUP)
-
-    // local props
-    const { id, switch: propsSwitch, indeterminate } = toRefs(props)
-
-    // global props
-    const modelValue = getGroupOrLocalRef('modelValue', props, emit)
-    const valid = getGroupOrLocalRef('valid', props) as Ref<boolean>
-    const invalid = getGroupOrLocalRef('invalid', props) as Ref<boolean>
-    const readonly = computed(() =>
-        Boolean(props.readonly || group?.readonly.value),
-    )
-    const disabled = computed(() =>
-        Boolean(props.disabled || group?.disabled.value),
-    )
-
-    return {
-        // local props
-        id,
-        propsSwitch,
-        indeterminate,
-        // global props
-        group,
-        isInGroup,
-        modelValue,
-        valid,
-        invalid,
-        readonly,
-        disabled,
-    }
-}

package/src/components/VvCheckboxGroup/VvCheckboxGroup.vue

@@ -1,102 +0,0 @@
-<script setup lang="ts">
-import type { Option } from '../../types/generic'
-import type { InputGroupState } from '../../types/group'
-import { VvCheckboxGroupEvents, VvCheckboxGroupProps } from '.'
-import { INJECTION_KEY_CHECK_GROUP } from '../../constants'
-import { HintSlotFactory } from '../common/HintSlot'
-import VvCheckbox from '../VvCheckbox/VvCheckbox.vue'
-
-// props, emit and slots
-const props = defineProps(VvCheckboxGroupProps)
-
-const emit = defineEmits(VvCheckboxGroupEvents)
-
-const slots = useSlots()
-
-// props merged with volver defaults (now only for labels)
-const propsDefaults = useDefaults<typeof VvCheckboxGroupProps>(
-    'VvCheckboxGroup',
-    VvCheckboxGroupProps,
-    props,
-)
-
-// data
-const modelValue = useVModel(props, 'modelValue', emit)
-const { disabled, readonly, vertical, valid, invalid, modifiers }
-		= toRefs(props)
-
-useGroupStateProvide<InputGroupState>(INJECTION_KEY_CHECK_GROUP, {
-    modelValue,
-    disabled,
-    readonly,
-    valid,
-    invalid,
-})
-
-// options
-const { getOptionLabel, getOptionValue } = useOptions(props)
-
-// stypes
-const bemCssClasses = useModifiers(
-    'vv-checkbox-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,
-    }
-}
-const { HintSlot, hintSlotScope } = HintSlotFactory(propsDefaults, slots)
-</script>
-
-<script lang="ts">
-export default {
-    name: 'VvCheckboxGroup',
-}
-</script>
-
-<template>
-    <fieldset :class="bemCssClasses">
-        <legend v-if="label" v-text="label" />
-        <div class="vv-checkbox-group__wrapper">
-            <!-- #region options set up -->
-            <template v-if="options.length > 0">
-                <VvCheckbox
-                    v-for="(option, index) in options"
-                    :key="index"
-                    v-bind="getOptionProps(option, index)"
-                />
-            </template>
-            <!-- #endregion -->
-            <slot v-else />
-        </div>
-        <HintSlot class="vv-checkbox-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/VvCheckboxGroup/index.ts

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