@volverjs/ui-vue 0.0.13-beta.9 → 0.0.14

package/src/components/VvButton/index.ts

@@ -0,0 +1,125 @@
+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 [...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

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

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

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

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

package/src/components/VvCheckbox/VvCheckbox.vue

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

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

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

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