@volverjs/ui-vue 0.0.1-beta.8 → 0.0.2

package/src/composables/{icons/useComponentIcons.ts → useComponentIcons.ts}

@@ -1,5 +1,4 @@
-import type { Slot, Ref } from 'vue'
-import { computed } from 'vue'
+import { type Slot, type Ref, computed } from 'vue'
 
 interface ComponentIconProps {
 	icon: Ref<string>
@@ -15,30 +14,30 @@ interface ComponentIconSlots {
 
 export function useComponentIcons(
 	props: ComponentIconProps,
-	slots: ComponentIconSlots
+	slots: ComponentIconSlots,
 ) {
 	const { icon, iconPosition } = props
 
 	const hasIconLeft = computed(
 		() =>
-			!!((icon.value && iconPosition.value === 'left') || slots.iconLeft)
+			!!((icon.value && iconPosition.value === 'left') || slots.iconLeft),
 	)
 	const hasIconRight = computed(
 		() =>
 			!!(
 				(icon.value && iconPosition.value === 'right') ||
 				slots.iconRight
-			)
+			),
 	)
 	const hasIconTop = computed(
-		() => !!((icon.value && iconPosition.value === 'top') || slots.iconTop)
+		() => !!((icon.value && iconPosition.value === 'top') || slots.iconTop),
 	)
 	const hasIconBottom = computed(
 		() =>
 			!!(
 				(icon.value && iconPosition.value === 'bottom') ||
 				slots.iconBottom
-			)
+			),
 	)
 
 	return {
@@ -47,41 +46,51 @@ export function useComponentIcons(
 		hasIconLeft,
 		hasIconRight,
 		hasIconTop,
-		hasIconBottom
+		hasIconBottom,
 	}
 }
 
 export function useComponentIcon(
-	icon: Ref<string>,
+	icon: Ref<string | object | undefined> | undefined,
 	iconPosition: Ref<string>,
-	slots: ComponentIconSlots
+	slots?: ComponentIconSlots,
 ) {
 	const hasIconLeft = computed(
 		() =>
-			!!((icon.value && iconPosition.value === 'left') || slots.iconLeft)
+			!!(
+				(icon?.value && iconPosition.value === 'left') ||
+				slots?.iconLeft
+			),
 	)
 	const hasIconRight = computed(
 		() =>
 			!!(
-				(icon.value && iconPosition.value === 'right') ||
-				slots.iconRight
-			)
+				(icon?.value && iconPosition.value === 'right') ||
+				slots?.iconRight
+			),
 	)
 	const hasIconTop = computed(
-		() => !!((icon.value && iconPosition.value === 'top') || slots.iconTop)
+		() =>
+			!!((icon?.value && iconPosition.value === 'top') || slots?.iconTop),
 	)
 	const hasIconBottom = computed(
 		() =>
 			!!(
-				(icon.value && iconPosition.value === 'bottom') ||
-				slots.iconBottom
-			)
+				(icon?.value && iconPosition.value === 'bottom') ||
+				slots?.iconBottom
+			),
 	)
-
+	const hasIcon = computed(() => {
+		if (typeof icon?.value === 'string') {
+			return { name: icon?.value }
+		}
+		return icon?.value
+	})
 	return {
+		hasIcon,
 		hasIconLeft,
 		hasIconRight,
 		hasIconTop,
-		hasIconBottom
+		hasIconBottom,
 	}
 }

package/src/composables/useDebouncedInput.ts

@@ -0,0 +1,25 @@
+import { type Ref, computed } from 'vue'
+
+export function useDebouncedInput(
+	modelValue: Ref | undefined,
+	emit: (event: string, value: unknown) => void,
+	ms: string | number = 0,
+): Ref {
+	let timeout: NodeJS.Timeout
+
+	if (typeof ms === 'string') {
+		ms = parseInt(ms)
+	}
+
+	return computed({
+		get: () => modelValue?.value,
+		set: (value) => {
+			if (timeout) {
+				clearTimeout(timeout)
+			}
+			timeout = setTimeout(() => {
+				emit('update:modelValue', value)
+			}, ms as number)
+		},
+	})
+}

package/src/composables/useModifiers.ts

@@ -1,5 +1,5 @@
 import { computed, unref, type Ref } from 'vue'
-import ObjectUtilities from '@/utils/ObjectUtilities'
+import { kebabCase } from '@/utils/ObjectUtilities'
 
 interface IBemModifiers {
 	[key: string]:
@@ -23,34 +23,33 @@ export function useBemModifiers(prefix: string, modifiers: IBemModifiers) {
 
 	const bemCssClasses = computed(() => {
 		return (
-			Object.keys(modifiers).reduce((acc, k) => {
-				const _modifier = unref(modifiers[k] as Ref<any>) || false
+			Object.keys(modifiers).reduce((acc, item) => {
+				const _modifier =
+					unref(modifiers[item] as Ref<string | string[]>) || false
 
 				if (!_modifier) return acc
 
-				if (k === 'modifiers') {
+				if (item === 'modifiers') {
 					const _reduceModifiers = Array.isArray(_modifier)
 						? _modifier
-						: [_modifier]
+						: _modifier.split(' ')
 					return {
 						...acc,
 						..._reduceModifiers.reduce(
 							(accVariant: object, currentVariant: string) => {
 								return {
 									...accVariant,
-									[`${prefix}--${ObjectUtilities.kebabCase(
-										currentVariant
-									)}`]: true
+									[`${prefix}--${kebabCase(currentVariant)}`]:
+										true,
 								}
 							},
-							{}
-						)
+							{},
+						),
 					}
 				} else {
 					return {
 						...acc,
-						[`${prefix}--${ObjectUtilities.kebabCase(k)}`]:
-							_modifier
+						[`${prefix}--${kebabCase(item)}`]: _modifier,
 					}
 				}
 			}, baseCssClass) || {}
@@ -58,7 +57,7 @@ export function useBemModifiers(prefix: string, modifiers: IBemModifiers) {
 	})
 
 	return {
-		bemCssClasses
+		bemCssClasses,
 	}
 }
 
@@ -67,7 +66,7 @@ export function toBem(prefix: string, modifiers: IBemModifiers) {
 
 	return (
 		Object.keys(modifiers).reduce((acc, k) => {
-			const _modifier = unref(modifiers[k] as Ref<any>) || false
+			const _modifier = unref(modifiers[k] as Ref<unknown>) || false
 
 			if (!_modifier) return acc
 
@@ -81,18 +80,17 @@ export function toBem(prefix: string, modifiers: IBemModifiers) {
 						(accVariant: object, currentVariant: string) => {
 							return {
 								...accVariant,
-								[`${prefix}--${ObjectUtilities.kebabCase(
-									currentVariant
-								)}`]: true
+								[`${prefix}--${kebabCase(currentVariant)}`]:
+									true,
 							}
 						},
-						{}
-					)
+						{},
+					),
 				}
 			} else {
 				return {
 					...acc,
-					[`${prefix}--${ObjectUtilities.kebabCase(k)}`]: _modifier
+					[`${prefix}--${kebabCase(k)}`]: _modifier,
 				}
 			}
 		}, baseCssClass) || {}

package/src/composables/useOptions.ts

@@ -0,0 +1,31 @@
+import { toRefs } from 'vue'
+import type { Option } from '@/types/generic'
+
+// eslint-disable-next-line
+export function useOptions(props: any) {
+	const { options, labelKey, valueKey } = toRefs(props)
+
+	// eslint-disable-next-line
+	const getOptionLabel = (option: string | Option) => {
+		if (typeof option !== 'object' && option !== null) return option
+
+		return typeof labelKey.value === 'function'
+			? labelKey.value(option)
+			: option[labelKey.value]
+	}
+
+	// eslint-disable-next-line
+	const getOptionValue = (option: any) => {
+		if (typeof option !== 'object' && option !== null) return option
+
+		return typeof valueKey.value === 'function'
+			? valueKey.value(option)
+			: option[valueKey.value]
+	}
+
+	return {
+		options,
+		getOptionLabel,
+		getOptionValue,
+	}
+}

package/src/composables/useTextCount.ts

@@ -0,0 +1,57 @@
+import { computed, unref, type Ref } from 'vue'
+
+export function useTextCount(
+	text: Ref<string | undefined | null> | string,
+	options?: {
+		mode?: string | boolean
+		upperLimit?: number
+		lowerLimit?: number
+	},
+) {
+	const length = computed(() => {
+		return (unref(text) ?? '').length
+	})
+
+	const gap = computed(() => {
+		if (
+			options?.lowerLimit !== undefined &&
+			length.value < options?.lowerLimit
+		) {
+			return length.value - options.lowerLimit
+		}
+		if (
+			options?.upperLimit !== undefined &&
+			length.value < options?.upperLimit
+		) {
+			return options.upperLimit - length.value
+		}
+		return 0
+	})
+
+	const formatted = computed(() => {
+		if (options?.mode === false) {
+			return ''
+		}
+
+		if (options?.mode === 'limit' && options?.upperLimit) {
+			return `${length.value} / ${
+				options.lowerLimit ? `${options.lowerLimit}-` : ''
+			}${options.upperLimit}`
+		}
+
+		if (options?.mode === 'countdown') {
+			if (gap.value === 0) {
+				return undefined
+			}
+			return gap
+		}
+
+		return length.value
+	})
+
+	return {
+		length,
+		gap,
+		formatted,
+	}
+}

package/src/constants.ts

@@ -1,7 +1,5 @@
-export const VV_BUTTON_GROUP = Symbol('VV_BUTTON_GROUP')
-
-export const VV_RADIO_GROUP = Symbol('VV_RADIO_GROUP')
-
-export const VV_CHECK_GROUP = Symbol('VV_CHECK_GROUP')
-
-export const VV_ACCORDION_GROUP = Symbol('VV_ACCORDION_GROUP')
+// Symbol not working after transpiling
+export const VV_BUTTON_GROUP = 'VV_BUTTON_GROUP'
+export const VV_RADIO_GROUP = 'VV_RADIO_GROUP'
+export const VV_CHECK_GROUP = 'VV_CHECK_GROUP'
+export const VV_ACCORDION_GROUP = 'VV_ACCORDION_GROUP'

package/src/icons.ts

@@ -0,0 +1,7 @@
+import normal from './assets/icons/normal.json'
+import detailed from './assets/icons/detailed.json'
+import simple from './assets/icons/simple.json'
+
+export default [normal, detailed, simple]
+
+export { normal }

package/src/index.ts

@@ -1,7 +1,14 @@
+import VolverPlugin from './Volver'
+import type { Volver } from './Volver'
+
 // export all components as vue plugin
-export * from './components'
+export * from './components/index'
+export { VolverPlugin }
 
-// export IconifyJSON default icons
-export { default as iconsSimple } from './assets/icons/simple.json'
-export { default as iconsNormal } from './assets/icons/normal.json'
-export { default as iconsDetailed } from './assets/icons/detailed.json'
+// https://vuejs.org/guide/typescript/options-api.html#augmenting-global-properties
+// Add custom property and extend vue type definition
+declare module 'vue' {
+	interface ComponentCustomProperties {
+		$ds?: typeof Volver.prototype
+	}
+}

package/src/props/index.ts

@@ -1,84 +1,252 @@
+import type { PropType } from 'vue'
+import type { Option } from '@/types/generic'
+
 export const ValidProps = {
 	valid: Boolean,
-	validLabel: [String, Array]
+	validLabel: [String, Array],
 }
 
-export const ErrorProps = {
-	error: Boolean,
-	errorLabel: [String, Array]
+export const InvalidProps = {
+	invalid: Boolean,
+	invalidLabel: [String, Array],
 }
 
 export const LoadingProps = {
 	loading: Boolean,
-	loadingLabel: String
+	loadingLabel: String,
 }
 
 export const DisabledProps = {
-	disabled: Boolean
+	/**
+	 * Whether the form control is disabled
+	 */
+	disabled: Boolean,
 }
 
 export const ReadonlyProps = {
-	readonly: Boolean
+	/**
+	 * The value is not editable
+	 */
+	readonly: Boolean,
 }
 
 export const ModifiersProps = {
-	modifiers: [String, Array]
+	/**
+	 * Component BEM modifiers
+	 */
+	modifiers: [String, Array] as PropType<string | Array<string>>,
 }
 
 export const HintProps = {
-	hintLabel: { type: String, default: '' }
+	hintLabel: { type: String, default: '' },
 }
 
 export const OptionsProps = {
 	/**
-	 * Lista delle radio options
+	 * List of options, can be string[] or object[]
 	 */
-	options: { type: Array, default: () => [] },
+	options: {
+		type: Array as PropType<Array<Option | string>>,
+		default: () => [],
+	},
 	/**
-	 * Se options è un array di oggetti, optionLabel = nome del campo da utilizzare come label oppure una funzione per ricavare la label
+	 * Used when options are objects: key to use for option label
 	 */
-	optionLabel: { type: [String, Function], default: () => 'label' },
+	labelKey: { type: [String, Function], default: 'label' },
 	/**
-	 * Se options è un array di oggetti, optionValue = nome del campo da utilizzare come value oppure una funzione per ricavare il value
+	 * Used when options are objects: key to use for option label
 	 */
-	optionValue: { type: [String, Function], default: () => 'value' }
+	valueKey: { type: [String, Function], default: 'value' },
 }
 
-export const LimitProps = {
+export const CountProps = {
 	/**
-	 * Conteggio caratteri
-	 * @description
-	 * Se false, non mostrare il conteggio caratteri
-	 * Se true, mostra quanti caratteri ho digitato sin ora e qualì'è la maxlength.
-	 * Se true e maxlength > 0, mostra quanti caratteri ho digitato sin ora e qualì'è la maxlength.
-	 * Se "countdown", mostra quanti caratteri mancano per raggiungere la maxlength.
+	 * Show character limit
 	 */
-	limit: {
+	count: {
 		type: [Boolean, String],
 		default: false,
-		validator: (value: string) => [true, false, 'countdown'].includes(value)
-	}
+		validator: (value: string) =>
+			[true, false, 'limit', 'countdown'].includes(value),
+	},
+}
+
+export const DebounceProps = {
+	/**
+	 * Milliseconds to wait before emitting the input event
+	 */
+	debounce: [Number, String],
+}
+
+export const ICON_POSITIONS = {
+	LEFT: 'left',
+	RIGHT: 'right',
+} as const
+export type IconPosition = ValueOf<typeof ICON_POSITIONS>
+
+export const IconProps = {
+	/**
+	 * VvIcon name or props
+	 * @see VVIcon
+	 */
+	icon: { type: [String, Object] },
+	/**
+	 * VvIcon position
+	 */
+	iconPosition: {
+		type: String as PropType<IconPosition>,
+		validation: (value: IconPosition) =>
+			Object.values(ICON_POSITIONS).includes(value),
+		default: ICON_POSITIONS.RIGHT,
+	},
 }
 
-export const InputProps = {
-	id: String,
+export const TabindexProps = {
+	/**
+	 * Global attribute tabindex
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/tabindex
+	 */
+	tabindex: { type: [String, Number], default: 0 },
+}
+
+export const FloatingProps = {
+	/**
+	 * If true the label will be floating
+	 */
+	floating: Boolean,
+}
+
+export const UnselectableProps = {
+	/**
+	 * If true the input will be unselectable
+	 */
+	unselectable: { type: Boolean, default: true },
+}
+
+export const IdNameProps = {
+	/**
+	 * Global attribute id
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id
+	 */
+	id: [String, Number],
+	/**
+	 * Input / Textarea name
+	 * Name of the form control. Submitted with the form as part of a name/value pair
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#name
+	 */
 	name: { type: String, required: true },
-	autocomplete: { type: String, default: 'off' },
+}
+
+export const AutofocusProps = {
+	/**
+	 * Global attribute autofocus
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus
+	 */
 	autofocus: Boolean,
+}
+
+export const AutocompleteProps = {
+	/**
+	 * Global attribute autocomplete
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete
+	 */
+	autocomplete: { type: String, default: 'off' },
+}
+
+export const InputTextareaProps = {
+	...IdNameProps,
+	...AutofocusProps,
+	...AutocompleteProps,
+	...TabindexProps,
+	...DisabledProps,
+	...ReadonlyProps,
+	...ValidProps,
+	...InvalidProps,
+	...HintProps,
+	...LoadingProps,
+	...ModifiersProps,
+	...CountProps,
+	...DebounceProps,
+	...IconProps,
+	...FloatingProps,
+	/**
+	 * Input / Textarea minlength
+	 * Minimum length (number of characters) of value
+	 * Available for input types: text, search, url, tel, email, password
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#minlength
+	 */
 	minlength: Number,
+	/**
+	 * Input / Textarea maxlength
+	 * Maximum length (number of characters) of value
+	 * Available for input types: text, search, url, tel, email, password
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#maxlength
+	 */
 	maxlength: Number,
-	label: String,
+	/**
+	 * Input / Textarea placeholder
+	 * Text that appears in the form control when it has no value set
+	 * Available for input types: text, search, url, tel, email, password, number
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
+	 */
 	placeholder: String,
+	/**
+	 * Input / Textarea required
+	 * A value is required or must be check for the form to be submittable
+	 * Available for all input types except color
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#required
+	 */
 	required: Boolean,
-	disabled: Boolean,
-	readonly: Boolean
+	/**
+	 * <label> value for the Input / Textarea
+	 */
+	label: String,
 }
 
-export const DebounceProps = {
+export const CheckboxRadioProps = {
+	...IdNameProps,
+	...TabindexProps,
+	...ValidProps,
+	...InvalidProps,
+	...HintProps,
+	...DisabledProps,
+	...ReadonlyProps,
+	/**
+	 * Input value
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#value
+	 */
+	value: [String, Number, Boolean],
+	/**
+	 * Input value
+	 */
+	modelValue: [Object, Number, Boolean, String],
+	/**
+	 * <label> for input
+	 */
+	label: String,
+}
+
+export const CheckboxRadioGroupProps = {
+	...ValidProps,
+	...InvalidProps,
+	...OptionsProps,
+	...HintProps,
+	...DisabledProps,
+	...ReadonlyProps,
+	/**
+	 * Input value
+	 */
+	modelValue: [String, Array],
+	/**
+	 * Input label
+	 */
+	label: String,
+	/**
+	 * Input name
+	 */
+	name: { type: String, required: true },
 	/**
-	 * Debounce time (millisecondi)
-	 * @descrition
-	 * Tempo che deve passare dall'ultima battuta prima che modelValue venga aggiornato.
+	 * If true, the group will be displayed in a vertical column
 	 */
-	debounce: Number
+	vertical: Boolean,
 }