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

package/src/assets/icons/index.js

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

package/src/components/VvAccordion/VvAccordion.ts

@@ -1,34 +0,0 @@
-import type { ExtractPropTypes } from 'vue'
-
-export const VvAccordionProps = {
-	/**
-	 * Accordion header title
-	 */
-	title: String,
-	/**
-	 * Accordion content description
-	 */
-	content: String,
-	/**
-	 * (Optional) Defines if item is open. Event "update:open" is emitted on accordion header click
-	 */
-	open: Boolean,
-	/**
-	 * Change icon position to right side
-	 */
-	iconRight: Boolean,
-	/**
-	 * Add border to accordion item
-	 */
-	bordered: Boolean,
-	/**
-	 * String or String[] of css classes (modifiers) that will be concatenated to prefix 'vv-accordion--'
-	 */
-	modifiers: [String, Array],
-	disabled: Boolean
-}
-
-export const VvAccordionEvents = ['update:open']
-
-type _VvAccordionPropsType = typeof VvAccordionProps
-export type VvAccordionPropsTypes = ExtractPropTypes<_VvAccordionPropsType>

package/src/components/VvAccordion/useAccordionProps.ts

@@ -1,45 +0,0 @@
-import type { VvAccordionPropsTypes } from './VvAccordion'
-import type IAccordionGroupState from '@/composables/group/types/IAccordionGroupState'
-
-import { toRefs } from 'vue'
-
-//Composables
-import { useInjectedGroupState } from '../../composables/group/useInjectedGroupState'
-
-//Constasts
-import { VV_ACCORDION_GROUP } from '../../constants'
-
-/**
- * Estreae tutte le prop del componente VvButton che possono essere
- * "sovrascritte" quando il buttone si trova in un gruppo.
- */
-export function toAccordionRefs(
-	props: VvAccordionPropsTypes,
-	emit: (event: any, ...args: any[]) => void
-) {
-	const { group, isInGroup, getGroupOrLocalRef } =
-		useInjectedGroupState<IAccordionGroupState>(VV_ACCORDION_GROUP)
-
-	//Local props
-	const { modifiers } = toRefs(props)
-
-	//Group based props
-	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
-	const bordered = getGroupOrLocalRef('bordered', props)
-	const disabled = getGroupOrLocalRef('disabled', props)
-	const iconRight = getGroupOrLocalRef('iconRight', props)
-	const accordion = getGroupOrLocalRef('accordion', props)
-
-	return {
-		//Group based props
-		modelValue,
-		disabled,
-		bordered,
-		iconRight,
-		isInGroup,
-		group,
-		accordion,
-		//Local props
-		modifiers
-	}
-}

package/src/components/VvBadge/VvBadge.ts

@@ -1,4 +0,0 @@
-export const VvBadgeProps = {
-	value: [String, Number],
-	color: String
-}

package/src/components/VvButton/VvButton.ts

@@ -1,117 +0,0 @@
-import type { PropType, ExtractPropTypes } from 'vue'
-
-export enum ButtonIconPosition {
-	left = 'left',
-	right = 'right',
-	top = 'top',
-	bottom = 'bottom'
-}
-
-export enum ButtonTag {
-	nuxtLink = 'nuxt-link',
-	routerLink = 'router-link',
-	a = 'a',
-	button = 'button'
-}
-
-export enum ButtonTarget {
-	_blank = '_blank',
-	_self = '_self',
-	_parent = '_parent',
-	_top = '_top'
-}
-
-export const VvButtonEvents = ['update:modelValue']
-
-export const VvButtonProps = {
-	/**
-	 * Button icon
-	 */
-	icon: String,
-	/**
-	 * Button icon position
-	 */
-	iconPosition: {
-		type: String as PropType<ButtonIconPosition>,
-		default: ButtonIconPosition.left,
-		validator: (value: string) => value in ButtonIconPosition
-	},
-	/**
-	 * Button label
-	 */
-	label: String,
-	/**
-	 * Loading status
-	 */
-	loading: Boolean,
-	/**
-	 * Loading icon
-	 */
-	loadingIcon: { type: String, default: 'eos-icons:bubble-loading' },
-	/**
-	 * Loading label
-	 */
-	loadingLabel: {
-		type: String,
-		default: 'Loading...'
-	},
-	/**
-	 * The router-link/nuxt-link property, if it is defined the button is rendered as a ruouter-link or nuxt-link.
-	 * @see Documentation of [router-link](https://router.vuejs.org/api/#router-link) and [nuxt-link](https://nuxtjs.org/api/components-nuxt-link/)
-	 */
-	to: {
-		type: [String, Object]
-	},
-	/**
-	 * Link href
-	 */
-	href: String,
-	/**
-	 * Link target
-	 */
-	target: {
-		type: String as PropType<ButtonTarget>,
-		validator: (value: string) => value in ButtonTarget
-	},
-	/**
-	 * Create block level button that span the full width of a parent.
-	 */
-	block: Boolean,
-	/**
-	 * Button active state.
-	 */
-	active: Boolean,
-	/**
-	 * Button rounded.
-	 */
-	rounded: Boolean,
-	/**
-	 * Button disabled
-	 */
-	disabled: Boolean,
-	/**
-	 * Button with min-width
-	 */
-	fullBleed: Boolean,
-	/**
-	 * Button action mode
-	 */
-	action: Boolean,
-	/**
-	 * Button action mode
-	 */
-	actionQuiet: Boolean,
-	/**
-	 * Button selected mode
-	 */
-	selected: Boolean,
-	/**
-	 * The variant of the button
-	 * @values
-	 * @defaultvalue default
-	 */
-	modifiers: [Array, String]
-}
-
-type _VvButtonPropsType = typeof VvButtonProps
-export type VvButtonPropsTypes = ExtractPropTypes<_VvButtonPropsType>

package/src/components/VvButton/useButtonGroupProps.ts

@@ -1,51 +0,0 @@
-import { toRefs } from 'vue'
-import type IButtonGroupState from '../../composables/group/types/IButtonGroupState'
-
-//Composables
-import { useInjectedGroupState } from '../../composables/group/useInjectedGroupState'
-
-//Constasts
-import { VV_BUTTON_GROUP } from '../../constants'
-
-import type { VvButtonPropsTypes } from './VvButton'
-
-/**
- * Estreae tutte le prop del componente VvButton che possono essere
- * "sovrascritte" quando il buttone si trova in un gruppo.
- */
-export function toButtonRefs(props: VvButtonPropsTypes) {
-	const { group, isInGroup, getGroupOrLocalRef } =
-		useInjectedGroupState<IButtonGroupState>(VV_BUTTON_GROUP)
-
-	//Local props
-	const { modifiers, fullBleed, iconPosition, icon, label, block, selected } =
-		toRefs(props)
-
-	//Group based props
-	const modelValue = getGroupOrLocalRef('modelValue', props)
-	const disabled = getGroupOrLocalRef('disabled', props)
-	const toggle = getGroupOrLocalRef('toggle', props)
-	const rounded = getGroupOrLocalRef('rounded', props)
-	const action = getGroupOrLocalRef('action', props)
-	const actionQuiet = getGroupOrLocalRef('actionQuiet', props)
-
-	return {
-		//Group based props
-		modelValue,
-		disabled,
-		toggle,
-		isInGroup,
-		group,
-		//Local props
-		modifiers,
-		action,
-		actionQuiet,
-		selected,
-		block,
-		rounded,
-		fullBleed,
-		iconPosition,
-		icon,
-		label
-	}
-}

package/src/components/VvButtonGroup/VvButtonGroup.ts

@@ -1,37 +0,0 @@
-export const VvButtonGroupProps = {
-	disabled: { type: Boolean, default: false },
-	/**
-	 * True = show buttons vertically
-	 */
-	vertical: { type: Boolean, default: false },
-	/**
-	 * True = no padding between buttons
-	 */
-	compact: { type: Boolean, default: false },
-	/**
-	 * True = il button group si comporterà come un toggle, materrà attivo l'ultimo pulsante cliccato.
-	 */
-	toggle: { type: Boolean, default: false },
-	/**
-	 * True = display as block
-	 */
-	block: { type: Boolean, default: false },
-	/**
-	 * True = display btn-broup as rounded (first and last child .vv-button)
-	 */
-	rounded: { type: Boolean, default: false },
-	/**
-	 * Button action mode
-	 */
-	action: Boolean,
-	/**
-	 * Button action mode
-	 */
-	actionQuiet: Boolean,
-	/**
-	 * Active button (name)
-	 */
-	modelValue: { type: String, default: undefined }
-}
-
-export const VvButtonGroupEvents = ['update:modelValue']

package/src/components/VvCheck/VvCheck.ts

@@ -1,48 +0,0 @@
-import type { ExtractPropTypes } from 'vue'
-import { ValidProps, ErrorProps } from '../../props'
-
-export const VvCheckProps = {
-	...ValidProps,
-	...ErrorProps,
-	/**
-	 * Valore della check
-	 */
-	value: null,
-	/**
-	 * VModel
-	 * @description
-	 * Se Binary = true, modelValue puo essere Object,Boolean,Number
-	 * Altrimenti modelValue sarà un Array
-	 */
-	modelValue: null,
-	/**
-	 * True - ritorna un valore del checkbox binario (es True/False) invece di un valori multipli
-	 */
-	binary: Boolean,
-	/**
-	 * Se binary=true, valore associato allo stato checked (ritornato al posto di TRUE)
-	 */
-	trueValue: { type: null, default: true },
-	/**
-	 * Se binary=true, valore associato allo stato unchecked (ritornato al posto di FALSE)
-	 */
-	falseValue: { type: null, default: false },
-	/**
-	 * True - visualizza il VvCheck come un pulsante Switch/Toggle
-	 */
-	switch: Boolean,
-	label: String,
-	disabled: Boolean,
-	readonly: Boolean
-}
-
-export const VvCheckEvents = [
-	'click',
-	'update:modelValue',
-	'change',
-	'focus',
-	'blur'
-]
-
-type _VvCheckPropsType = typeof VvCheckProps
-export type VvCheckPropsTypes = ExtractPropTypes<_VvCheckPropsType>

package/src/components/VvCheck/VvCheck.vue

@@ -1,149 +0,0 @@
-<template>
-	<label :class="checkClass" v-bind="checkAttrs" @click="onClick">
-		<input
-			ref="input"
-			:class="checkInputClass"
-			v-bind="checkInputAttrs"
-			@input="onChange" />
-		<!-- @slot Use this slot for check label -->
-		<slot :value="modelValue">
-			{{ label }}
-		</slot>
-	</label>
-</template>
-
-<script setup lang="ts">
-import type { InputHTMLAttributes, LabelHTMLAttributes } from 'vue'
-
-import { computed, useAttrs, ref } from 'vue'
-import ObjectUtilities from '../../utils/ObjectUtilities'
-import { VvCheckProps, VvCheckEvents } from './VvCheck'
-
-//Composables
-import { toCheckInputRefs } from './useCheckProps'
-import { useComponentFocus } from '../../composables/focus/useComponentFocus'
-import { useBemModifiers } from '@/composables/useModifiers'
-
-//Props, Emits, Slots e Attrs
-const props = defineProps(VvCheckProps)
-const emit = defineEmits(VvCheckEvents)
-const attrs = useAttrs()
-
-//Data
-const { disabled, readonly, valid, error, propsSwitch, modelValue } =
-	toCheckInputRefs(props, emit)
-
-//Template References
-const input = ref()
-
-// FOCUS
-const { focused } = useComponentFocus(input, emit)
-
-//Component computed
-const isChecked = computed(() => {
-	if (props.binary)
-		return ObjectUtilities.equals(modelValue.value, props.trueValue)
-
-	return Array.isArray(modelValue.value)
-		? ObjectUtilities.contains(props.value, modelValue.value)
-		: ObjectUtilities.equals(props.value, modelValue.value)
-})
-
-// Styles & Bindings
-const { bemCssClasses: bemCheckClass } = useBemModifiers('vv-input-checkbox', {
-	switch: propsSwitch,
-	valid,
-	invalid: error
-})
-const { bemCssClasses: bemCheckInputClass } = useBemModifiers(
-	'vv-input-check__input',
-	{
-		checked: isChecked,
-		disabled,
-		readonly
-	}
-)
-const checkClass = computed(() => {
-	const cssClass = attrs.class as string
-	return {
-		[cssClass]: true,
-		...bemCheckClass.value
-	}
-})
-const checkInputClass = computed(() => {
-	return {
-		...bemCheckInputClass.value,
-		'focus-visible': focused.value
-	}
-})
-const checkAttrs = computed(() => {
-	const { id, name, style } = attrs
-	const dataAttrs = ObjectUtilities.pickBy(attrs, (k: string) =>
-		k.startsWith('data-')
-	)
-	return {
-		for: (id || name) as string,
-		style,
-		...dataAttrs
-	} as LabelHTMLAttributes
-})
-const checkInputAttrs = computed(() => {
-	const { id = '', name = '' } = attrs
-	return {
-		type: 'checkbox',
-		id: id || name,
-		name,
-		value: props.value,
-		disabled: disabled.value,
-		readonly: readonly.value,
-		checked: isChecked.value,
-		...checkInputAriaAttrs.value
-	} as InputHTMLAttributes
-})
-const checkInputAriaAttrs = computed(() => {
-	const { name } = attrs
-	const dataAttrs = ObjectUtilities.pickBy(attrs, (k: string) =>
-		k.startsWith('aria-')
-	)
-	return {
-		'aria-label': name,
-		'aria-checked': isChecked.value,
-		...dataAttrs
-	}
-})
-
-//Methods
-function onChange() {
-	if (props.binary) {
-		modelValue.value = isChecked.value ? props.falseValue : props.trueValue
-		return
-	}
-
-	if (modelValue.value === null) {
-		modelValue.value = [props.value]
-		return
-	}
-
-	if (Array.isArray(modelValue.value)) {
-		modelValue.value = !isChecked.value
-			? [...modelValue.value, props.value]
-			: ObjectUtilities.removeFromList(props.value, modelValue.value)
-		return
-	}
-
-	console.warn('Cannot change value - VvCheck modelValue is not an array')
-}
-function onClick(event: MouseEvent | undefined) {
-	if (!disabled.value) {
-		emit('click', event)
-		emit('change', isChecked.value ? props.value : null)
-		focused.value = true
-	}
-}
-</script>
-
-<script lang="ts">
-export default {
-	inheritAttrs: false
-}
-</script>

package/src/components/VvCheck/useCheckProps.ts

@@ -1,41 +0,0 @@
-import type { VvCheckPropsTypes } from './VvCheck'
-import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
-
-import { toRefs } from 'vue'
-
-//Composables
-import { useInjectedGroupState } from '../../composables/group/useInjectedGroupState'
-
-//Constasts
-import { VV_CHECK_GROUP } from '../../constants'
-
-/**
- * Estreae tutte le prop del componente VvButton che possono essere
- * "sovrascritte" quando il buttone si trova in un gruppo.
- */
-export function toCheckInputRefs(
-	props: VvCheckPropsTypes,
-	emit: (event: any, ...args: any[]) => void
-) {
-	const { group, isInGroup, getGroupOrLocalRef } =
-		useInjectedGroupState<IInputGroupState>(VV_CHECK_GROUP)
-
-	//Local props
-	const { valid, error, switch: propsSwitch } = 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,
-		propsSwitch,
-		modelValue,
-		readonly,
-		disabled
-	}
-}

package/src/components/VvCheckGroup/VvCheckGroup.ts

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

package/src/components/VvCheckGroup/VvCheckGroup.vue

@@ -1,84 +0,0 @@
-<template>
-	<fieldset :class="groupClass">
-		<legend v-if="label" v-text="label" />
-		<div class="vv-input-checkbox-group__wrapper">
-			<!-- #region options set up -->
-			<template v-if="options.length > 0">
-				<vv-check
-					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-checkbox-group__hint" />
-	</fieldset>
-</template>
-
-<script setup lang="ts">
-import type { IInputGroupState } from '@/composables/group/types/IInputGroup'
-
-import { useSlots, computed, toRefs } from 'vue'
-import { VvCheckGroupProps, VvCheckGroupEvents } from './VvCheckGroup'
-
-//Costanti
-import { VV_CHECK_GROUP } from '../../constants'
-
-//Composables
-import { useVModel } from '@vueuse/core'
-import { useProvideGroupState } from '../../composables/group/useProvideGroupState'
-import { useOptions } from '../../composables/options/useOptions'
-import { useBemModifiers } from '@/composables/useModifiers'
-
-//Components
-import VvCheck from '../../components/VvCheck/VvCheck.vue'
-import { HintSlotFactory } from '../common/HintSlot'
-
-//Props, Emits, Slots e Attrs
-const props = defineProps(VvCheckGroupProps)
-const emit = defineEmits(VvCheckGroupEvents)
-const slots = useSlots()
-
-//Data
-const modelValue = useVModel(props, 'modelValue', emit)
-const { disabled, readonly, error, valid } = toRefs(props)
-
-// #region group
-const groupState: IInputGroupState = {
-	key: VV_CHECK_GROUP,
-	modelValue,
-	disabled,
-	readonly
-}
-useProvideGroupState(groupState)
-// #endregion group
-
-// OPTIONS
-const { getOptionLabel, getOptionValue } = useOptions(props)
-
-//Styles & Bindings
-const { bemCssClasses: groupClass } = useBemModifiers(
-	'vv-input-checkbox-group',
-	{
-		horizontal: computed(() => !props.vertical),
-		valid,
-		invalid: error
-	}
-)
-
-//Methods
-const getOptionProps = (option: any, oIndex: number) => {
-	return {
-		id: `${props.name}_opt${oIndex}`,
-		name: props.name,
-		label: getOptionLabel(option),
-		value: getOptionValue(option)
-	}
-}
-
-const HintSlot = HintSlotFactory(props, slots)
-</script>

package/src/components/VvDialog/VvDialog.ts

@@ -1,17 +0,0 @@
-import { VV_DIALOG_SIZES } from './constants'
-
-export const VvDialogEvents = ['open', 'close', 'update:open']
-
-export const VvDialogProps = {
-	id: { type: String, required: true },
-	title: String,
-	open: Boolean,
-	transition: { type: String, default: 'fade-block' },
-	size: {
-		type: String,
-		default: VV_DIALOG_SIZES.normal,
-		validator: (value: string) =>
-			Object.values(VV_DIALOG_SIZES).includes(value)
-	},
-	autoClose: { type: Boolean, default: true }
-}

package/src/components/VvDialog/constants.ts

@@ -1,5 +0,0 @@
-export const VV_DIALOG_SIZES = {
-	normal: '',
-	small: 'small',
-	fullscreen: 'fullscreen'
-}