@volverjs/ui-vue 0.0.1-beta.6 → 0.0.1

package/src/components/VvInputText/index.ts

@@ -0,0 +1,140 @@
+import type { ExtractPropTypes, PropType } from 'vue'
+import { InputTextareaProps } from '@/props'
+
+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 TYPES_ICON = {
+	PASSWORD_SHOW: 'eye-on',
+	PASSWORD_HIDE: 'eye-off',
+	DATE: 'calendar',
+	TIME: 'time',
+	COLOR: 'color',
+	SEARCH: 'close',
+} as const
+
+export const VvInputTextEvents = ['update:modelValue', 'focus', 'blur', 'keyup']
+
+export const VvInputTextProps = {
+	...InputTextareaProps,
+	/**
+	 * Input value
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+	 */
+	modelValue: [String, Number],
+	/**
+	 * 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,
+		default: TYPES_ICON.PASSWORD_SHOW,
+	},
+	/**
+	 * VvIcon name for hide password button
+	 * @see VVIcon
+	 */
+	iconHidePassword: {
+		type: String,
+		default: TYPES_ICON.PASSWORD_HIDE,
+	},
+	/**
+	 * VvIcon name for clear button
+	 * @see VVIcon
+	 */
+	iconClear: {
+		type: String,
+		default: TYPES_ICON.SEARCH,
+	},
+	/**
+	 * 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',
+	},
+}
+
+export type VvInputTextPropsTypes = ExtractPropTypes<typeof VvInputTextProps>

package/src/components/VvProgress/VvProgress.vue

@@ -1,34 +1,34 @@
-<template>
-	<progress v-bind="properties" />
-</template>
+<script lang="ts">
+	export default {
+		name: 'VvProgress',
+	}
+</script>
 
 <script setup lang="ts">
-import { useBemModifiers } from '../../composables/useModifiers'
-import { computed, toRefs } from 'vue'
-import { VvProgressProps } from './VvProgress'
-
-//Props, emits, slots, attrs
-const props = defineProps(VvProgressProps)
+	import { computed, toRefs } from 'vue'
+	import { useBemModifiers } from '@/composables/useModifiers'
+	import { VvProgressProps } from '@/components/VvProgress'
 
-// data
-const { modifiers } = toRefs(props)
+	// props
+	const props = defineProps(VvProgressProps)
+	const { value, max, label: ariaLabel } = toRefs(props)
+	const indeterminate = computed(() => props.value === undefined)
 
-//Styles & bindings
-const { bemCssClasses: progressClass } = useBemModifiers('vv-progress', {
-	modifiers,
-	indeterminate: computed(() => !props.determinate)
-})
-
-/**
- * Compute component properties
- */
-const properties = computed(() => {
-	return {
-		'aria-label': props.ariaLabel,
-		role: 'progressbar',
-		class: progressClass.value,
-		value: props.value,
-		max: props.max
-	}
-})
+	// styles
+	const { bemCssClasses: hasClass } = useBemModifiers('vv-progress', {
+		modifiers: props.modifiers,
+		indeterminate,
+	})
 </script>
+
+<template>
+	<progress
+		role="progressbar"
+		v-bind="{
+			class: hasClass,
+			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

@@ -1,130 +1,101 @@
-<template>
-	<label :class="radioClass" v-bind="radioAttrs" @click="onClick">
-		<input
-			ref="input"
-			:class="radioInputClass"
-			v-bind="radioInputAttrs"
-			@input="onChange" />
-		<slot :value="modelValue">
-			{{ label }}
-		</slot>
-	</label>
-</template>
+<script lang="ts">
+	export default {
+		name: 'VvRadio',
+	}
+</script>
 
 <script setup lang="ts">
-import type { InputHTMLAttributes, LabelHTMLAttributes } from 'vue'
-
-import { computed, useAttrs, ref } from 'vue'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-import { VvRadioProps, VvRadioEvents } from './VvRadio'
-
-//Composables
-import { toRadioInputRefs } from './useRadioProps'
-import { useComponentFocus } from '../../composables/focus/useComponentFocus'
-import { useBemModifiers } from '@/composables/useModifiers'
+	import { computed, ref, useSlots } from 'vue'
+	import { nanoid } from 'nanoid'
+	import { contains, equals } from '@/utils/ObjectUtilities'
+	import { useBemModifiers } from '@/composables/useModifiers'
+	import {
+		VvRadioProps,
+		VvRadioEvents,
+		useGroupProps,
+	} from '@/components/VvRadio'
+	import { HintSlotFactory } from '@/components/common/HintSlot'
 
-//Props, Emits, Slots e Attrs
-const props = defineProps(VvRadioProps)
-const emit = defineEmits(VvRadioEvents)
-const attrs = useAttrs()
+	// props, emit and slots
+	const props = defineProps(VvRadioProps)
+	const emit = defineEmits(VvRadioEvents)
+	const slots = useSlots()
 
-//Data
-const { disabled, readonly, modelValue, valid, error } = toRadioInputRefs(
-	props,
-	emit
-)
-
-//Template References
-const input = ref()
-
-//Component computed
-const isChecked = computed(() => {
-	return Array.isArray(modelValue.value)
-		? ObjectUtilities.contains(props.value, modelValue.value)
-		: ObjectUtilities.equals(props.value, modelValue.value)
-})
+	// data
+	const { disabled, readonly, modelValue, valid, invalid } = useGroupProps(
+		props,
+		emit,
+	)
+	const id = computed(() => String(props.id || nanoid()))
+	const tabindex = computed(() => (isDisabled.value ? -1 : props.tabindex))
 
-// #region FOCUS
-const { focused } = useComponentFocus(input, emit)
-// #endregion FOCUS
+	// template refs
+	const input = ref()
 
-//Styles & Bindings
-const { bemCssClasses: bemRadioClass } = useBemModifiers('vv-input-radio', {
-	valid,
-	invalid: error
-})
-const { bemCssClasses: bemInputRadioClass } = useBemModifiers(
-	'vv-input-radio__input',
-	{
-		checked: isChecked,
-		disabled,
-		readonly
-	}
-)
-const radioClass = computed(() => {
-	const { class: cssClass } = attrs
-	return {
-		class: cssClass,
-		...bemRadioClass.value
-	}
-})
-const radioInputClass = computed(() => {
-	return {
-		'focus-visible': focused.value,
-		...bemInputRadioClass.value
-	}
-})
-const radioAttrs = computed(() => {
-	const { id, name, style } = attrs
-	const dataAttrs = ObjectUtilities.pickBy(attrs, (k: string) =>
-		k.startsWith('data-')
+	// 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),
 	)
-	return {
-		for: (id || name) as string,
-		style,
-		...dataAttrs
-	} as LabelHTMLAttributes
-})
-const radioInputAttrs = computed(() => {
-	const { id = '', name = '' } = attrs as InputHTMLAttributes
-	return {
-		type: 'radio',
-		id: id || name,
-		name,
-		value: props.value,
-		disabled: disabled.value,
-		readonly: readonly.value,
-		checked: isChecked.value,
-		...radioInputAriaAttrs.value
-	} as InputHTMLAttributes
-})
-const radioInputAriaAttrs = computed(() => {
-	const { name } = attrs
-	const dataAttrs = ObjectUtilities.pickBy(attrs, (k: string) =>
-		k.startsWith('aria-')
+	const hasValue = computed(() =>
+		['string', 'number', 'boolean'].includes(typeof props.value)
+			? props.value
+			: true,
 	)
-	return {
-		'aria-label': name,
-		'aria-checked': isChecked.value,
-		...dataAttrs
-	}
-})
+	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)
+		},
+	})
 
-//Methods
-function onChange() {
-	if (!isChecked.value) emit('change', props.value)
-	modelValue.value = props.value
-}
-function onClick(event: Event) {
-	if (!disabled.value) {
-		emit('click', event)
-		focused.value = true
-	}
-}
-</script>
+	// styles
+	const { bemCssClasses } = useBemModifiers('vv-radio', {
+		valid,
+		invalid,
+		disabled,
+		readonly,
+	})
 
-<script lang="ts">
-export default {
-	inheritAttrs: false
-}
+	// hint
+	const { HintSlot } = HintSlotFactory(props, slots)
 </script>
+
+<template>
+	<label :class="bemCssClasses" :for="id">
+		<input
+			:id="id"
+			ref="input"
+			v-model="localModelValue"
+			type="radio"
+			class="vv-radio__input"
+			:name="name"
+			:disabled="isDisabled"
+			:value="hasValue"
+			:tabindex="tabindex"
+			:aria-invalid="isInvalid"
+		/>
+		<slot :value="modelValue">
+			{{ label }}
+		</slot>
+		<HintSlot class="vv-radio__hint" :params="{ value: modelValue }" />
+	</label>
+</template>

package/src/components/VvRadio/index.ts

@@ -0,0 +1,40 @@
+import type { ExtractPropTypes, Ref } from 'vue'
+import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
+import { CheckboxRadioProps } from '@/props'
+import { useInjectedGroupState } from '@/composables/group/useInjectedGroupState'
+import { VV_RADIO_GROUP } from '@/constants'
+
+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 { group, isInGroup, getGroupOrLocalRef } =
+		useInjectedGroupState<IInputGroupState>(VV_RADIO_GROUP)
+
+	// global props
+	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
+	const readonly = getGroupOrLocalRef('readonly', props) as Ref<boolean>
+	const disabled = getGroupOrLocalRef('disabled', props) as Ref<boolean>
+	const valid = getGroupOrLocalRef('valid', props) as Ref<boolean>
+	const invalid = getGroupOrLocalRef('invalid', props) as Ref<boolean>
+
+	return {
+		// global props
+		group,
+		isInGroup,
+		modelValue,
+		readonly,
+		disabled,
+		valid,
+		invalid,
+	}
+}

package/src/components/VvRadioGroup/VvRadioGroup.vue

@@ -1,80 +1,87 @@
-<template>
-	<fieldset :class="groupClass">
-		<legend v-if="label" v-text="label" />
-		<div class="vv-input-radio-group__wrapper">
-			<!-- #region options set up -->
-			<template v-if="options.length > 0">
-				<vv-radio
-					v-for="(o, oIndex) in options"
-					:key="oIndex"
-					v-bind="getOptionProps(o, oIndex)" />
-			</template>
-			<!-- #endregion options set up -->
-			<!-- #region default -->
-			<slot v-else />
-			<!-- #endregion default -->
-		</div>
-		<!-- @slot error,valid,hint,loading vanno vanno qua -->
-		<HintSlot class="vv-input-radio-group__hint" />
-	</fieldset>
-</template>
+<script lang="ts">
+	export default {
+		name: 'VvRadioGroup',
+	}
+</script>
 
 <script setup lang="ts">
-import { useSlots, computed, toRefs } from 'vue'
-import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
-import { VvRadioGroupProps, VvRadioGroupEvents } from './VvRadioGroup'
-
-//Composables
-import { useVModel } from '@vueuse/core'
-import { useProvideGroupState } from '../../composables/group/useProvideGroupState'
-import { useOptions } from '../../composables/options/useOptions'
-import { useBemModifiers } from '@/composables/useModifiers'
-
-//Constants
-import { VV_RADIO_GROUP } from '../../constants'
+	import type { Option } from '@/types/generic'
+	import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
+	import { useSlots, computed, toRefs } from 'vue'
+	import { useVModel } from '@vueuse/core'
+	import { useProvideGroupState } from '@/composables/group/useProvideGroupState'
+	import { useOptions } from '@/composables/useOptions'
+	import { useBemModifiers } from '@/composables/useModifiers'
+	import { VV_RADIO_GROUP } from '@/constants'
+	import { HintSlotFactory } from '@/components/common/HintSlot'
+	import VvRadio from '@/components/VvRadio/VvRadio.vue'
+	import {
+		VvRadioGroupProps,
+		VvRadioGroupEvents,
+	} from '@/components/VvRadioGroup'
 
-//Components
-import VvRadio from '../../components/VvRadio/VvRadio.vue'
-import { HintSlotFactory } from '../common/HintSlot'
+	// props, emit and slots
+	const props = defineProps(VvRadioGroupProps)
+	const emit = defineEmits(VvRadioGroupEvents)
+	const slots = useSlots()
 
-//Props, Emits, Slots e Attrs
-const emit = defineEmits(VvRadioGroupEvents)
-const props = defineProps(VvRadioGroupProps)
-const slots = useSlots()
+	// data
+	const modelValue = useVModel(props, 'modelValue', emit)
+	const { disabled, readonly, vertical, valid, invalid } = toRefs(props)
 
-//Data
-const modelValue = useVModel(props, 'modelValue', emit)
-const { disabled, readonly, vertical, valid, error } = toRefs(props)
-
-// #region group
-const groupState: IInputGroupState = {
-	key: VV_RADIO_GROUP,
-	modelValue,
-	disabled,
-	readonly
-}
-useProvideGroupState(groupState)
-// #endregion group
+	const groupState: IInputGroupState = {
+		key: VV_RADIO_GROUP,
+		modelValue,
+		disabled,
+		readonly,
+		valid,
+		invalid,
+	}
+	useProvideGroupState(groupState)
 
-//OPTIONS
-const { getOptionLabel, getOptionValue } = useOptions(props)
+	// options
+	const { getOptionLabel, getOptionValue } = useOptions(props)
 
-//Styles & Bindings
-const { bemCssClasses: groupClass } = useBemModifiers('vv-input-radio-group', {
-	horizontal: computed(() => !vertical.value),
-	valid,
-	invalid: error
-})
+	// styles
+	const { bemCssClasses: groupClass } = useBemModifiers('vv-radio-group', {
+		disabled,
+		readonly,
+		horizontal: computed(() => !vertical.value),
+		valid,
+		invalid,
+	})
 
-//Methods
-function getOptionProps(option: any, oIndex: number) {
-	return {
-		id: `${props.name}_opt${oIndex}`,
-		name: props.name,
-		label: getOptionLabel(option),
-		value: getOptionValue(option)
+	// methods
+	const getOptionProps = (option: string | Option, index: number) => {
+		return {
+			id: `${props.name}_opt${index}`,
+			name: props.name,
+			label: getOptionLabel(option),
+			value: getOptionValue(option),
+		}
 	}
-}
 
-const HintSlot = HintSlotFactory(props, slots)
+	// hint
+	const { HintSlot } = HintSlotFactory(props, slots)
 </script>
+
+<template>
+	<fieldset :class="groupClass">
+		<legend v-if="label" v-text="label" />
+		<div class="vv-radio-group__wrapper">
+			<!-- #region options -->
+			<template v-if="options.length > 0">
+				<vv-radio
+					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" />
+	</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']