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

package/src/components/VvDropdown/VvDropdown.ts

@@ -1,46 +0,0 @@
-import type { PropType } from 'vue'
-import { DisabledProps, ModifiersProps } from '../../props'
-
-export interface Option {
-	[key: string]: any
-}
-
-export const VvDropdownProps = {
-	...DisabledProps,
-	...ModifiersProps,
-	/**
-	 * modelValue can be an Object, a String or an Array of Object/String
-	 */
-	modelValue: [String, Array, Object],
-	/**
-	 * Label of "no results" options
-	 */
-	labelNoResult: { type: String, default: 'No results' },
-	/**
-	 * Select options, can be string[] or object[]
-	 */
-	options: {
-		type: Array as PropType<Array<Option | string>>,
-		required: true
-	},
-	/**
-	 * Use objects as modelValue (object or object[])
-	 */
-	useObject: Boolean,
-	/**
-	 * Manage modelValue as string[] or object[]
-	 */
-	multiple: Boolean,
-	/**
-	 * The max number of selected values
-	 */
-	maxValues: [Number, String],
-	/**
-	 * Used when options are objects: key to use for option label
-	 */
-	labelKey: { type: String, default: 'label' },
-	/**
-	 * Used when options are objects: key to use for option label
-	 */
-	valueKey: { type: String, default: 'value' }
-}

package/src/components/VvInputText/VvInputText.ts

@@ -1,49 +0,0 @@
-import { ValidProps, ErrorProps, HintProps, LoadingProps } from '../../props'
-import { TYPES, ICON_POSITIONS } from './constants'
-
-export const VvInputTextEvents = ['update:modelValue', 'focus', 'blur']
-
-export const VvInputTextProps = {
-	...ValidProps,
-	...ErrorProps,
-	...HintProps,
-	...LoadingProps,
-	modelValue: null,
-	type: {
-		type: String,
-		default: TYPES.TEXT,
-		validator: (value: string) => Object.values(TYPES).includes(value)
-	},
-	id: String,
-	name: { type: String, required: true },
-	autocomplete: { type: String, default: 'off' },
-	autofocus: Boolean,
-	minlength: Number,
-	maxlength: Number,
-	min: [Number, Date],
-	max: [Number, Date],
-	step: Number,
-	label: String,
-	disabled: Boolean,
-	readonly: Boolean,
-	placeholder: String,
-	/**
-	 * Nome dell'icona
-	 * @see DsIcon
-	 */
-	icon: { type: String, default: '' },
-	/**
-	 * Posizione dell'icona
-	 */
-	iconPosition: {
-		type: String,
-		validation: (value: string) =>
-			Object.values(ICON_POSITIONS).includes(value),
-		default: ICON_POSITIONS.RIGHT
-	},
-	/**
-	 * True = label flottante
-	 */
-	floating: Boolean,
-	debounce: Number
-}

package/src/components/VvInputText/constants.ts

@@ -1,34 +0,0 @@
-export const TYPES = {
-	TEXT: 'text',
-	PASSWORD: 'password',
-	DATE: 'date',
-	DATETIME_LOCAL: 'datetime-local',
-	NUMBER: 'number',
-	TIME: 'time',
-	EMAIL: 'email',
-	TEL: 'tel',
-	URL: 'url',
-	COLOR: 'color',
-	SEARCH: 'search',
-	FILE: 'file'
-}
-
-export const ICON_POSITIONS = {
-	LEFT: 'left',
-	RIGHT: 'right'
-}
-
-export const TYPES_ICON = {
-	PASSWORD_ON: 'eye-on',
-	PASSWORD_OFF: 'eye-off',
-	DATE: 'calendar',
-	TIME: 'time',
-	COLOR: 'color',
-	SEARCH: 'search'
-}
-
-export default {
-	TYPES,
-	ICON_POSITIONS,
-	TYPES_ICON
-}

package/src/components/VvInputText/useInputNumber.ts

@@ -1,40 +0,0 @@
-import type { Ref } from 'vue'
-import { computed, unref } from 'vue'
-import INPUT from './constants'
-
-interface useVvInputNumberProps {
-	type: Ref<string>
-	disabled: Ref<boolean>
-	readonly: Ref<boolean>
-	inputTemplateRef: Ref<HTMLInputElement>
-}
-
-/**
- * Funzionalità input number
- */
-export function useInputNumber(
-	inputModelValue: Ref<any>,
-	options: useVvInputNumberProps
-) {
-	const { type, disabled, readonly, inputTemplateRef } = options
-	const isNumber = computed(() => type.value === INPUT.TYPES.NUMBER)
-
-	function stepUp() {
-		if (!disabled.value && !readonly.value) {
-			inputTemplateRef.value.stepUp()
-			inputModelValue.value = unref(inputTemplateRef.value).value
-		}
-	}
-	function stepDown() {
-		if (!disabled.value && !readonly.value) {
-			inputTemplateRef.value.stepDown()
-			inputModelValue.value = unref(inputTemplateRef.value).value
-		}
-	}
-
-	return {
-		isNumber,
-		stepUp,
-		stepDown
-	}
-}

package/src/components/VvInputText/useInputPassword.ts

@@ -1,38 +0,0 @@
-import type { Ref } from 'vue'
-import { ref, computed } from 'vue'
-import INPUT from './constants'
-
-interface useVvInputPasswordProps {
-	type: Ref<string>
-	disabled: Ref<boolean>
-	readonly: Ref<boolean>
-}
-
-/**
- * Funzionalità input password.
- */
-export function useInputPassword(props: useVvInputPasswordProps) {
-	const { type, disabled, readonly } = props
-	const bHidePassword = ref(true)
-
-	const isPassword = computed(() => type.value === INPUT.TYPES.PASSWORD)
-	const isPasswordVisible = computed(() => !bHidePassword.value)
-	const passwordButtonIcon = computed(() =>
-		isPasswordVisible.value
-			? INPUT.TYPES_ICON.PASSWORD_OFF
-			: INPUT.TYPES_ICON.PASSWORD_ON
-	)
-
-	function toggleShowHidePassword() {
-		if (!disabled.value && !readonly.value) {
-			bHidePassword.value = !bHidePassword.value
-		}
-	}
-
-	return {
-		isPassword,
-		isPasswordVisible,
-		passwordButtonIcon,
-		toggleShowHidePassword
-	}
-}

package/src/components/VvNativeSelect/VvNativeSelect.ts

@@ -1,70 +0,0 @@
-import type { PropType } from 'vue'
-import {
-	ValidProps,
-	ErrorProps,
-	HintProps,
-	LoadingProps,
-	DisabledProps,
-	ReadonlyProps,
-	ModifiersProps
-} from '../../props'
-
-export interface Option {
-	[key: string]: any
-}
-
-export const VvNativeSelectProps = {
-	...ValidProps,
-	...ErrorProps,
-	...HintProps,
-	...LoadingProps,
-	...DisabledProps,
-	...ReadonlyProps,
-	...ModifiersProps,
-	/**
-	 * modelValue can be an Object, a String or an Array of Object/String
-	 */
-	modelValue: {
-		type: [String, Object],
-		required: true
-	},
-	/**
-	 * Select input label
-	 */
-	label: String,
-	/**
-	 * Select input placeholder
-	 */
-	placeholder: String,
-	/**
-	 * Select options, can be an Array of string or an array of objects
-	 */
-	options: {
-		type: Array as PropType<Array<Option | string>>,
-		required: true
-	},
-	/**
-	 * Use objects as modelValue (object or object[])
-	 */
-	useObject: Boolean,
-	/**
-	 * Used when options are objects: key to use for option label
-	 */
-	labelKey: { type: String, default: 'label' },
-	/**
-	 * Used when options are objects: key to use for option label
-	 */
-	valueKey: { type: String, default: 'value' },
-	/**
-	 * Icon name of icon in left position
-	 */
-	iconLeft: String,
-	/**
-	 * Icon name of icon in right position
-	 */
-	iconRight: String,
-	/**
-	 * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-native-select--'
-	 */
-	modifiers: [String, Array]
-}

package/src/components/VvNativeSelect/VvNativeSelect.vue

@@ -1,106 +0,0 @@
-<template>
-	<div :class="selectClasses">
-		<label v-if="label" :for="id">{{ label }}</label>
-		<!-- #region native select -->
-		<div class="vv-select__wrapper">
-			<slot name="icon-left">
-				<vv-icon v-if="iconLeft" :name="iconLeft" />
-			</slot>
-			<select
-				:id="id"
-				:value="
-					typeof modelValue === 'string'
-						? modelValue
-						: modelValue?.[valueKey]
-				"
-				:disabled="disabled || readonly"
-				@input="onInput">
-				<option v-if="placeholder" value="" disabled selected>
-					{{ placeholder }}
-				</option>
-				<option
-					v-for="(option, index) in options"
-					:key="index"
-					:disabled="
-						typeof option === 'object'
-							? option.disabled ?? disabled
-							: disabled
-					"
-					:value="getValue(option)">
-					{{ getLabel(option) }}
-				</option>
-			</select>
-			<slot name="icon-right">
-				<vv-icon v-if="iconRight" :name="iconRight" />
-			</slot>
-		</div>
-		<!-- #endregion native select -->
-		<HintSlot class="vv-select__hint" />
-	</div>
-</template>
-
-<script setup lang="ts">
-import { computed, toRefs, useSlots } from 'vue'
-import { v4 as uuidv4 } from 'uuid'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-import { VvNativeSelectProps, type Option } from './VvNativeSelect'
-import VvIcon from '../VvIcon/VvIcon.vue'
-import HintSlotFactory from '../common/HintSlot'
-import { useBemModifiers } from '../../composables/useModifiers'
-
-const props = defineProps(VvNativeSelectProps)
-const slots = useSlots()
-const emit = defineEmits(['update:modelValue'])
-//Hint component
-const HintSlot = HintSlotFactory(props, slots)
-
-// data
-const {
-	modifiers,
-	disabled,
-	readonly,
-	loading,
-	iconLeft,
-	iconRight,
-	error,
-	valid
-} = toRefs(props)
-
-const id = uuidv4()
-
-//Styles & css classes modifiers
-const { bemCssClasses: selectClasses } = useBemModifiers('vv-select', {
-	modifiers,
-	loading,
-	readonly,
-	iconLeft,
-	iconRight,
-	valid,
-	invalid: error,
-	dirty: computed(() => ObjectUtilities.isNotEmpty(props.modelValue))
-})
-
-function getValue(option: string | Option) {
-	return typeof option === 'string' ? option : option[props.valueKey]
-}
-
-function getLabel(option: string | Option) {
-	return typeof option === 'string' ? option : option[props.labelKey]
-}
-
-function onInput(event: Event) {
-	const target = event.target as HTMLSelectElement
-
-	// Find option object if useObject prop is true
-	const valueObject = props.useObject
-		? props.options?.find(
-				(option) => (option as Option)[props.valueKey] == target.value
-		  )
-		: null
-
-	// use valueObject if exist or the target value
-	const value = valueObject || target.value
-
-	emit('update:modelValue', value)
-}
-</script>

package/src/components/VvProgress/VvProgress.ts

@@ -1,28 +0,0 @@
-import { ModifiersProps } from '../../props'
-
-export const VvProgressProps = {
-	...ModifiersProps,
-	/**
-	 * Progress value
-	 */
-	value: {
-		type: [Number, String]
-	},
-	/**
-	 * Progress max value
-	 */
-	max: {
-		type: [Number, String]
-	},
-	/**
-	 * Progress label
-	 */
-	ariaLabel: {
-		type: String,
-		default: 'progress-bar'
-	},
-	/**
-	 * determinate attribute
-	 */
-	determinate: { type: Boolean, default: false }
-}

package/src/components/VvRadio/VvRadio.ts

@@ -1,25 +0,0 @@
-import type { ExtractPropTypes } from 'vue'
-import { ValidProps, ErrorProps } from '../../props'
-
-export const VvRadioProps = {
-	...ValidProps,
-	...ErrorProps,
-	/**
-	 * Valore del radio
-	 */
-	value: null,
-	modelValue: { type: [Object, Number, Boolean, String] },
-	label: { type: String, default: '' },
-	disabled: Boolean,
-	readonly: Boolean
-}
-
-export const VvRadioEvents = [
-	'click',
-	'update:modelValue',
-	'change',
-	'focus',
-	'blur'
-]
-
-export type VvRadioPropsType = ExtractPropTypes<typeof VvRadioProps>

package/src/components/VvRadio/useRadioProps.ts

@@ -1,40 +0,0 @@
-import type { VvRadioPropsType } from '../VvRadio/VvRadio'
-import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
-
-import { toRefs } from 'vue'
-
-//Composables
-import { useInjectedGroupState } from '../../composables/group/useInjectedGroupState'
-
-//Constasts
-import { VV_RADIO_GROUP } from '../../constants'
-
-/**
- * Estreae tutte le prop del componente VvButton che possono essere
- * "sovrascritte" quando il buttone si trova in un gruppo.
- */
-export function toRadioInputRefs(
-	props: VvRadioPropsType,
-	emit: (event: any, ...args: any[]) => void
-) {
-	const { group, isInGroup, getGroupOrLocalRef } =
-		useInjectedGroupState<IInputGroupState>(VV_RADIO_GROUP)
-
-	//Local props
-	const { valid, error } = toRefs(props)
-
-	//Global props
-	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
-	const readonly = getGroupOrLocalRef('readonly', props)
-	const disabled = getGroupOrLocalRef('disabled', props)
-
-	return {
-		group,
-		isInGroup,
-		valid,
-		error,
-		modelValue,
-		readonly,
-		disabled
-	}
-}

package/src/components/VvRadioGroup/VvRadioGroup.ts

@@ -1,25 +0,0 @@
-import { ValidProps, ErrorProps, OptionsProps, HintProps } from '../../props'
-
-export const VvRadioGroupEvents = ['update:modelValue']
-
-export const VvRadioGroupProps = {
-	...ValidProps,
-	...ErrorProps,
-	...OptionsProps,
-	...HintProps,
-	/**
-	 * VModel
-	 */
-	modelValue: null,
-	label: { type: String, default: '' },
-	/**
-	 * Nome da utilizzare per il radio group
-	 */
-	name: { type: String, default: '', required: true },
-	disabled: { type: Boolean, default: false },
-	readonly: { type: Boolean, default: false },
-	/**
-	 * True = show buttons vertically
-	 */
-	vertical: { type: Boolean, default: false }
-}

package/src/components/VvSelect/VvSelect.ts

@@ -1,91 +0,0 @@
-import type { PropType } from 'vue'
-import type { Option } from '../VvDropdown/VvDropdown'
-import {
-	ValidProps,
-	ErrorProps,
-	HintProps,
-	LoadingProps,
-	DisabledProps,
-	ReadonlyProps,
-	ModifiersProps
-} from '../../props'
-
-export const VvSelectProps = {
-	...ValidProps,
-	...ErrorProps,
-	...HintProps,
-	...LoadingProps,
-	...DisabledProps,
-	...ReadonlyProps,
-	...ModifiersProps,
-	/**
-	 * modelValue can be an Object, a String or an Array of Object/String
-	 */
-	modelValue: [String, Array, Object],
-	/**
-	 * Select input label
-	 */
-	label: String,
-	/**
-	 * Label of "no results" options
-	 */
-	labelNoResult: { type: String, default: 'No results' },
-	/**
-	 * Select input placeholder
-	 */
-	placeholder: String,
-	/**
-	 * Use input text to search on options
-	 */
-	searchable: Boolean,
-	/**
-	 * On searchable select is the input search placeholder
-	 */
-	searchPlaceholder: String,
-	/**
-	 * the input search debounce time in ms
-	 */
-	debounceSearch: {
-		type: [Number, String],
-		default: 0
-	},
-	/**
-	 * Select options, can be string[] or object[]
-	 */
-	options: {
-		type: Array as PropType<Array<Option | string>>,
-		required: true
-	},
-	/**
-	 * Use objects as modelValue (object or object[])
-	 */
-	useObject: Boolean,
-	/**
-	 * Manage modelValue as string[] or object[]
-	 */
-	multiple: Boolean,
-	/**
-	 * The max number of selected values
-	 */
-	maxValues: [Number, String],
-	/**
-	 * The select label separator visible to the user
-	 */
-	separator: { type: String, default: ', ' },
-	/**
-	 * Used when options are objects: key to use for option label
-	 */
-	labelKey: { type: String, default: 'label' },
-	/**
-	 * Used when options are objects: key to use for option label
-	 */
-	valueKey: { type: String, default: 'value' },
-	/**
-	 * Icon name of icon in left position
-	 */
-	iconLeft: String,
-	/**
-	 * Icon name of icon in right position
-	 */
-	iconRight: String
-}

package/src/components/VvTextarea/VvTextarea.ts

@@ -1,55 +0,0 @@
-import {
-	ValidProps,
-	ErrorProps,
-	HintProps,
-	LoadingProps,
-	DisabledProps,
-	ReadonlyProps
-} from '../../props'
-import { ICON_POSITIONS, WRAP } from './constants'
-
-export const VvTextareaEvents = ['update:modelValue', 'focus', 'blur']
-
-export const VvTextareaProps = {
-	...ValidProps,
-	...ErrorProps,
-	...HintProps,
-	...LoadingProps,
-	...DisabledProps,
-	...ReadonlyProps,
-	modelValue: null,
-	id: String,
-	name: { type: String, required: true },
-	autocomplete: { type: String, default: 'off' },
-	autofocus: Boolean,
-	minlength: Number,
-	maxlength: Number,
-	label: String,
-	placeholder: String,
-	/**
-	 * Nome dell'icona
-	 * @see DsIcon
-	 */
-	icon: { type: String, default: '' },
-	/**
-	 * Posizione dell'icona
-	 */
-	iconPosition: {
-		type: String,
-		validation: (value: string) =>
-			Object.values(ICON_POSITIONS).includes(value),
-		default: ICON_POSITIONS.RIGHT
-	},
-	/**
-	 * True = label flottante
-	 */
-	floating: Boolean,
-	debounce: Number,
-	cols: { type: Number, default: 50 },
-	rows: { type: Number, default: 5 },
-	/**
-	 * Specifica come il testo sarà wrappato
-	 * @see Documentation https://www.w3schools.com/tags/att_textarea_wrap.asp
-	 */
-	wrap: { type: String, default: WRAP.soft }
-}

package/src/components/VvTextarea/constants.ts

@@ -1,14 +0,0 @@
-export const ICON_POSITIONS = {
-	LEFT: 'left',
-	RIGHT: 'right'
-}
-
-export const WRAP = {
-	hard: 'hard',
-	soft: 'soft'
-}
-
-export default {
-	ICON_POSITIONS,
-	WRAP
-}

package/src/composables/focus/useComponentFocus.ts

@@ -1,22 +0,0 @@
-import type { Ref } from 'vue'
-import { watch } from 'vue'
-import { useFocus } from '@vueuse/core'
-
-/**
- *
- */
-export function useComponentFocus(
-	inputTemplateRef: Ref<HTMLInputElement>,
-	emit: (event: any, ...args: any[]) => void
-) {
-	const { focused } = useFocus(inputTemplateRef)
-
-	watch(focused, (bFocus) => {
-		if (bFocus) emit('focus', inputTemplateRef.value)
-		else emit('blur', inputTemplateRef.value)
-	})
-
-	return {
-		focused
-	}
-}