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

package/src/components/VvInputText/VvInputTextActions.ts

@@ -1,98 +0,0 @@
-import type { Component } from 'vue'
-import type { VvInputTextPropsTypes } from '.'
-import { INPUT_TYPES } from '.'
-import VvIcon from '../VvIcon/VvIcon.vue'
-import VvInputClearAction from '../VvInputText/VvInputClearAction'
-import VvInputPasswordAction from '../VvInputText/VvInputPasswordAction'
-import VvInputStepAction from '../VvInputText/VvInputStepAction'
-
-export default function VvInputTextActionsFactory(
-    type: string,
-    parentProps: VvInputTextPropsTypes,
-): Component {
-    return {
-        name: 'VvInputTextActions',
-        components: {
-            VvIcon,
-            VvInputPasswordAction,
-            VvInputStepAction,
-            VvInputClearAction,
-        },
-        setup() {
-            const isDisabled = computed(() => {
-                return parentProps.disabled || parentProps.readonly
-            })
-
-            return {
-                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,
-                            label: this.labelShowPassword,
-                            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

@@ -1,215 +0,0 @@
-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',
-    'focus',
-    'blur',
-    'keyup',
-    'keydown',
-    'keypress',
-]
-
-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,
-    },
-}
-
-export type VvInputTextPropsTypes = ExtractPropTypes<typeof VvInputTextProps>

package/src/components/VvNav/VvNav.vue

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

@@ -1,18 +0,0 @@
-<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">
-        <VvAction v-bind="$attrs" class="vv-nav__item-label" role="menuitem">
-            <slot />
-        </VvAction>
-    </li>
-</template>

package/src/components/VvNav/VvNavSeparator.vue

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

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

package/src/components/VvProgress/VvProgress.vue

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

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

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

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