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

package/src/components/VvInputText/VvInputTextActions.ts

@@ -0,0 +1,100 @@
+import type { Component, Ref } from 'vue'
+import type { VvInputTextPropsTypes } from '.'
+import { INPUT_TYPES } from '.'
+import VvInputClearAction from '../common/VvInputClearAction'
+import VvInputPasswordAction from '../common/VvInputPasswordAction'
+import VvInputStepAction from '../common/VvInputStepAction'
+import VvIcon from '../VvIcon/VvIcon.vue'
+
+export default function VvInputTextActionsFactory(
+    type: typeof INPUT_TYPES[keyof typeof INPUT_TYPES],
+    parentProps: VvInputTextPropsTypes,
+    isDirty: Ref<boolean>,
+): Component {
+    return {
+        name: 'VvInputTextActions',
+        components: {
+            VvIcon,
+            VvInputPasswordAction,
+            VvInputStepAction,
+            VvInputClearAction,
+        },
+        setup() {
+            const isDisabled = computed(() => {
+                return parentProps.disabled || parentProps.readonly
+            })
+
+            return {
+                isDirty,
+                isDisabled,
+                labelStepUp: parentProps.labelStepUp,
+                labelStepDown: parentProps.labelStepDown,
+                labelShowPassword: parentProps.labelShowPassword,
+                labelHidePassword: parentProps.labelHidePassword,
+                labelClear: parentProps.labelClear,
+                iconShowPassword: parentProps.iconShowPassword,
+                iconHidePassword: parentProps.iconHidePassword,
+            }
+        },
+        render() {
+            let actions = null
+            switch (type) {
+                case INPUT_TYPES.SEARCH: {
+                    const { onClear } = this.$attrs
+                    actions = [
+                        h(VvInputClearAction, {
+                            disabled: this.isDisabled || !this.isDirty,
+                            label: this.labelClear,
+                            onClear,
+                        }),
+                    ]
+                    break
+                }
+                case INPUT_TYPES.PASSWORD: {
+                    const { onTogglePassword } = this.$attrs
+                    actions = [
+                        h(VvInputPasswordAction, {
+                            disabled: this.isDisabled,
+                            onTogglePassword,
+                            labelShow: this.labelShowPassword,
+                            labelHide: this.labelHidePassword,
+                            iconShow: this.iconShowPassword,
+                            iconHide: this.iconHidePassword,
+                        }),
+                    ]
+                    break
+                }
+                case INPUT_TYPES.NUMBER: {
+                    const { onStepUp, onStepDown } = this.$attrs
+                    actions = [
+                        h(VvInputStepAction, {
+                            mode: 'up',
+                            disabled:
+								this.isDisabled
+								|| (parentProps.max !== undefined
+								    && parentProps.modelValue === parentProps.max),
+                            label: this.labelStepUp,
+                            onStepUp,
+                            onStepDown,
+                        }),
+                        h(VvInputStepAction, {
+                            mode: 'down',
+                            disabled:
+								this.isDisabled
+								|| (parentProps.min !== undefined
+								    && parentProps.modelValue === parentProps.min),
+                            label: this.labelStepDown,
+                            onStepUp,
+                            onStepDown,
+                        }),
+                    ]
+                    break
+                }
+            }
+
+            return Array.isArray(actions)
+                ? h('div', { class: 'vv-input-text__actions-group' }, actions)
+                : actions
+        },
+    }
+}

package/src/components/VvInputText/index.ts

@@ -0,0 +1,234 @@
+import type { FactoryOpts } from 'imask'
+import type { ExtractPropTypes, PropType } from 'vue'
+import type { VvIconProps } from '../VvIcon'
+import { InputTextareaProps, StorageProps } from '../../props'
+import { ACTION_ICONS } from '../VvIcon'
+
+export const INPUT_TYPES = {
+    TEXT: 'text',
+    PASSWORD: 'password',
+    NUMBER: 'number',
+    EMAIL: 'email',
+    TEL: 'tel',
+    URL: 'url',
+    COLOR: 'color',
+    SEARCH: 'search',
+    DATE: 'date',
+    TIME: 'time',
+    DATETIME_LOCAL: 'datetime-local',
+    MONTH: 'month',
+    WEEK: 'week',
+} as const
+export type InputType = ValueOf<typeof INPUT_TYPES>
+
+export const VvInputTextEvents = [
+    'update:modelValue',
+    'update:masked',
+    'accept',
+    'accept:typed',
+    'accept:masked',
+    'accept:unmasked',
+    'complete',
+    'complete:typed',
+    'complete:masked',
+    'complete:unmasked',
+    'suggestion:selected',
+    'suggestion:removed',
+    'focus',
+    'blur',
+    'keyup',
+    'keydown',
+    'keypress',
+    'clear',
+]
+
+export const VvInputTextProps = {
+    ...InputTextareaProps,
+    ...StorageProps,
+    /**
+     * Input value
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+     */
+    modelValue: [String, Number, Date],
+    /**
+     * Type of form control
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#type
+     */
+    type: {
+        type: String as PropType<InputType>,
+        default: INPUT_TYPES.TEXT,
+        validator: (value: InputType) =>
+            Object.values(INPUT_TYPES).includes(value),
+    },
+    /**
+     * Minimum value
+     * Available for input types: date, month, week, time, datetime-local, number, range.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#min
+     */
+    min: [Number, Date, String],
+    /**
+     * Maximum value
+     * Available for input types: date, month, week, time, datetime-local, number, range.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#max
+     */
+    max: [Number, Date, String],
+    /**
+     * Incremental values that are valid
+     * Available for input types: date, month, week, time, datetime-local and number
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#step
+     */
+    step: { type: [String, Number], default: 1 },
+    /**
+     * Pattern the value must match to be valid
+     * Available for input types: text, search, url, tel, email and password
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#pattern
+     */
+    pattern: String,
+    /**
+     * Whether to allow multiple values
+     * Available for input type email
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#multiple
+     */
+    multiple: Boolean,
+    /**
+     * VvIcon name for show password button
+     * @see VvIcon
+     */
+    iconShowPassword: {
+        type: [String, Object] as PropType<string | VvIconProps>,
+        default: ACTION_ICONS.showPassword,
+    },
+    /**
+     * VvIcon name for hide password button
+     * @see VvIcon
+     */
+    iconHidePassword: {
+        type: [String, Object] as PropType<string | VvIconProps>,
+        default: ACTION_ICONS.hidePassword,
+    },
+    /**
+     * VvIcon name for clear button
+     * @see VvIcon
+     */
+    iconClear: {
+        type: [String, Object] as PropType<string | VvIconProps>,
+        default: ACTION_ICONS.clear,
+    },
+    /**
+     * VvIcon name for remove suggestion button
+     * @see VvIcon
+     */
+    iconRemoveSuggestion: {
+        type: [String, Object] as PropType<string | VvIconProps>,
+        default: ACTION_ICONS.remove,
+    },
+    /**
+     * Label for step up button
+     */
+    labelStepUp: {
+        type: String,
+        default: 'Increase value',
+    },
+    /**
+     * Label for step down button
+     */
+    labelStepDown: {
+        type: String,
+        default: 'Decrease value',
+    },
+    /**
+     * Label for show password button
+     */
+    labelShowPassword: {
+        type: String,
+        default: 'Show password',
+    },
+    /**
+     * Label for hide password button
+     */
+    labelHidePassword: {
+        type: String,
+        default: 'Hide password',
+    },
+    /**
+     * Label for clear button
+     */
+    labelClear: {
+        type: String,
+        default: 'Clear',
+    },
+    /**
+     * Label for remove suggestion button
+     */
+    labelRemoveSuggestion: {
+        type: String,
+        default: 'Remove suggestion',
+    },
+    /**
+     * iMask options
+     * @see https://imask.js.org/guide.html
+     */
+    iMask: {
+        type: Object as PropType<FactoryOpts>,
+        default: undefined,
+    },
+    /**
+     * Masked value
+     */
+    masked: {
+        type: String,
+        default: undefined,
+    },
+    /**
+     * Adjust input width to content
+     */
+    autoWidth: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Hide type number, password and search actions
+     */
+    hideActions: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Add unit label to input
+     */
+    unit: {
+        type: String,
+    },
+    /**
+     * Select input text on focus
+     */
+    selectOnFocus: {
+        type: Boolean,
+        default: false,
+    },
+    /**
+     * Maximum number of suggestions
+     */
+    maxSuggestions: {
+        type: Number,
+        default: 5,
+    },
+    /**
+     * External suggestions to display
+     */
+    suggestions: {
+        type: Array as PropType<(string | number | Date)[]>,
+        default: undefined,
+    },
+    /**
+     * The input mode to use for the input
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/inputmode
+     */
+    inputMode: {
+        type: String,
+        default: 'text',
+    },
+
+}
+
+export type VvInputTextPropsTypes = ExtractPropTypes<typeof VvInputTextProps>

package/src/components/VvNav/VvNav.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import { VvNavEvents, VvNavProps } from '@/components/VvNav'
+import VvNavItem from './VvNavItem.vue'
+
+const props = defineProps(VvNavProps)
+const emit = defineEmits(VvNavEvents)
+
+const { modifiers } = toRefs(props)
+
+function onClick(event: Event) {
+    const target = event.target as HTMLElement
+    if (target?.dataset.index) {
+        const index = Number.parseInt(target.dataset.index)
+        const item = props.items?.[index]
+        if (!item || item?.disabled) {
+            return
+        }
+        emit('click', item)
+    }
+}
+
+// bem css classes
+const bemCssClasses = useModifiers('vv-nav', modifiers)
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvNav',
+}
+</script>
+
+<template>
+    <nav :class="bemCssClasses">
+        <ul class="vv-nav__menu" role="menu" @click.stop="onClick">
+            <slot>
+                <VvNavItem
+                    v-for="({ on = {}, data, ...item }, index) in items"
+                    :key="index"
+                    :data-index="index"
+                    v-bind="item"
+                    v-on="on"
+                >
+                    <slot name="item" v-bind="{ item, data, index }" />
+                </VvNavItem>
+            </slot>
+        </ul>
+    </nav>
+</template>

package/src/components/VvNav/VvNavItem.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import VvAction from '@/components/VvAction/VvAction.vue'
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvNavItem',
+    inheritAttrs: false,
+}
+</script>
+
+<template>
+    <li class="vv-nav__item" role="presentation">
+        <slot name="before" />
+        <VvAction v-bind="$attrs" class="vv-nav__item-label" role="menuitem">
+            <slot />
+        </VvAction>
+        <slot name="after" />
+    </li>
+</template>

package/src/components/VvNav/VvNavSeparator.vue

@@ -0,0 +1,11 @@
+<script lang="ts">
+export default {
+    name: 'VvNavSeparator',
+}
+</script>
+
+<template>
+    <li class="vv-nav__separator" role="separator">
+        <slot />
+    </li>
+</template>

package/src/components/VvNav/index.ts

@@ -0,0 +1,8 @@
+import { ModifiersProps, NavProps } from '@/props'
+
+export const VvNavProps = {
+    ...ModifiersProps,
+    ...NavProps,
+}
+
+export const VvNavEvents = ['click']

package/src/components/VvProgress/VvProgress.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { VvProgressProps } from '.'
+
+// props
+const props = defineProps(VvProgressProps)
+
+const { value, max, label: ariaLabel } = toRefs(props)
+const indeterminate = computed(() => props.value === undefined)
+
+// styles
+const { modifiers } = toRefs(props)
+const bemCssClasses = useModifiers(
+    'vv-progress',
+    modifiers,
+    computed(() => ({ indeterminate: indeterminate.value })),
+)
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvProgress',
+}
+</script>
+
+<template>
+    <progress
+        v-bind="{
+            class: bemCssClasses,
+            ariaLabel,
+            max,
+            value,
+        }"
+    />
+</template>

package/src/components/VvProgress/index.ts

@@ -0,0 +1,32 @@
+import { ModifiersProps } from '../../props'
+
+export const VvProgressProps = {
+    ...ModifiersProps,
+    /**
+     * Progress value
+     * This attribute specifies how much of the task that has been completed.
+     * It must be a valid floating point number between 0 and max, or between 0 and 1 if max is omitted.
+     * If there is no value attribute, the progress bar is indeterminate.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-max
+     */
+    value: {
+        type: [Number, String],
+        default: undefined,
+    },
+    /**
+     * Progress max
+     * This attribute describes how much work the task indicated by the progress element requires.
+     * The max attribute, if present, must have a value greater than 0 and be a valid floating point number. The default value is 1.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress#attr-max
+     */
+    max: {
+        type: [Number, String],
+    },
+    /**
+     * Progress aria-label
+     */
+    label: {
+        type: String,
+        required: true,
+    },
+}

package/src/components/VvRadio/VvRadio.vue

@@ -0,0 +1,126 @@
+<script setup lang="ts">
+import { useGroupProps, VvRadioEvents, VvRadioProps } from '.'
+import { HintSlotFactory } from '../common/HintSlot'
+
+// props, emit and slots
+const props = defineProps(VvRadioProps)
+
+const emit = defineEmits(VvRadioEvents)
+
+const slots = useSlots()
+
+// props merged with volver defaults (now only for labels)
+const propsDefaults = useDefaults<typeof VvRadioProps>(
+    'VvRadio',
+    VvRadioProps,
+    props,
+)
+
+// data
+const { id, disabled, readonly, modelValue, valid, invalid }
+    = useGroupProps(props, emit)
+const hasId = useUniqueId(id)
+const hasHintId = computed(() => `${hasId.value}-hint`)
+const tabindex = computed(() => (isDisabled.value ? -1 : props.tabindex))
+
+// template refs
+const input = ref()
+
+// computed
+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(() =>
+    Array.isArray(modelValue.value)
+        ? contains(props.value, modelValue.value)
+        : equals(props.value, modelValue.value),
+)
+const hasValue = computed(() =>
+    ['string', 'number', 'boolean'].includes(typeof props.value)
+        ? props.value
+        : true,
+)
+const localModelValue = computed({
+    get() {
+        return isChecked.value ? hasValue.value : null
+    },
+    set(newValue) {
+        if (Array.isArray(modelValue.value)) {
+            modelValue.value = [props.value]
+        } else {
+            modelValue.value = props.value
+        }
+        emit('change', newValue)
+    },
+})
+
+// styles
+const { modifiers } = toRefs(props)
+const bemCssClasses = useModifiers(
+    'vv-radio',
+    modifiers,
+    computed(() => ({
+        valid: valid.value,
+        invalid: invalid.value,
+        disabled: disabled.value,
+        readonly: readonly.value,
+    })),
+)
+
+// hint
+const {
+    HintSlot,
+    hasHintLabelOrSlot,
+    hasInvalidLabelOrSlot,
+    hintSlotScope,
+} = HintSlotFactory(propsDefaults, slots)
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvRadio',
+}
+</script>
+
+<template>
+    <label :class="bemCssClasses" :for="hasId">
+        <input
+            :id="hasId"
+            ref="input"
+            v-model="localModelValue"
+            type="radio"
+            class="vv-radio__input"
+            :name
+            :disabled="isDisabled"
+            :value="hasValue"
+            :tabindex
+            :aria-invalid="isInvalid"
+            :aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
+            :aria-errormessage="hasInvalidLabelOrSlot ? hasHintId : undefined"
+        >
+        <slot :value="modelValue">
+            {{ label }}
+        </slot>
+        <HintSlot :id="hasHintId" class="vv-radio__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/VvRadio/index.ts

@@ -0,0 +1,46 @@
+import type { ExtractPropTypes } from 'vue'
+import type { InputGroupState } from '../../types/group'
+import { INJECTION_KEY_RADIO_GROUP } from '../../constants'
+import { CheckboxRadioProps } from '../../props'
+
+export const VvRadioProps = CheckboxRadioProps
+
+export const VvRadioEvents = ['click', 'update:modelValue', 'change', 'blur']
+
+export type VvRadioPropsType = ExtractPropTypes<typeof VvRadioProps>
+
+/**
+ * Merges local and group props
+ */
+export function useGroupProps(
+    props: VvRadioPropsType,
+    emit: (event: (typeof VvRadioEvents)[number], value: unknown) => void,
+) {
+    const { id } = toRefs(props)
+    const { group, isInGroup, getGroupOrLocalRef }
+        = useGroupStateInject<InputGroupState>(INJECTION_KEY_RADIO_GROUP)
+
+    // global props
+    const modelValue = getGroupOrLocalRef('modelValue', props, emit)
+    const valid = getGroupOrLocalRef('valid', props)
+    const invalid = getGroupOrLocalRef('invalid', props)
+    const readonly = computed(() =>
+        Boolean(props.readonly || group?.readonly.value),
+    )
+    const disabled = computed(() =>
+        Boolean(props.disabled || group?.disabled.value),
+    )
+
+    return {
+        // local props
+        id,
+        // global props
+        group,
+        isInGroup,
+        modelValue,
+        valid,
+        invalid,
+        readonly,
+        disabled,
+    }
+}