@volverjs/ui-vue 0.0.1-beta.11

package/src/components/VvButtonGroup/VvButtonGroup.ts

@@ -0,0 +1,37 @@
+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/VvButtonGroup/VvButtonGroup.vue

@@ -0,0 +1,55 @@
+<template>
+	<div :class="btnGroupClass" role="group">
+		<slot />
+	</div>
+</template>
+
+<script setup lang="ts">
+import type IButtonGroupState from '@/composables/group/types/IButtonGroupState'
+
+import { toRefs } from 'vue'
+import { VvButtonGroupProps, VvButtonGroupEvents } from './VvButtonGroup'
+import { VV_BUTTON_GROUP } from '../../constants'
+
+//Composables
+import { useVModel } from '@vueuse/core'
+import { useProvideGroupState } from '../../composables/group/useProvideGroupState'
+import { useBemModifiers } from '@/composables/useModifiers'
+
+//Emits, props, attrs, slots
+const emit = defineEmits(VvButtonGroupEvents)
+const props = defineProps(VvButtonGroupProps)
+
+//Data
+const modelValue = useVModel(props, 'modelValue', emit)
+const {
+	disabled,
+	vertical,
+	compact,
+	block,
+	rounded,
+	toggle,
+	action,
+	actionQuiet
+} = toRefs(props)
+
+//Computed
+const { bemCssClasses: btnGroupClass } = useBemModifiers('vv-button-group', {
+	vertical,
+	compact,
+	block
+})
+
+// #region group
+const groupState: IButtonGroupState = {
+	key: VV_BUTTON_GROUP,
+	modelValue,
+	disabled,
+	toggle,
+	rounded,
+	action,
+	actionQuiet
+}
+useProvideGroupState(groupState)
+// #endregion group
+</script>

package/src/components/VvCard/VvCard.ts

@@ -0,0 +1,4 @@
+export const VvCardProps = {
+	title: String,
+	modifiers: [String, Array]
+}

package/src/components/VvCard/VvCard.vue

@@ -0,0 +1,37 @@
+<template>
+	<article :class="cardClass" v-bind="cardAttrs">
+		<header v-if="$slots.header || title" class="vv-card__header">
+			<slot name="header">
+				{{ title }}
+			</slot>
+		</header>
+		<slot />
+		<div v-if="$slots.content" class="vv-card__content">
+			<slot name="content" />
+		</div>
+		<footer v-if="$slots.footer" class="vv-card__footer">
+			<slot name="footer" />
+		</footer>
+	</article>
+</template>
+
+<script setup lang="ts">
+import { toRefs, computed, useAttrs } from 'vue'
+import { VvCardProps } from './VvCard'
+
+//Components
+import { useBemModifiers } from '../../composables/useModifiers'
+
+//Props, Emits, attrs ...
+const props = defineProps(VvCardProps)
+const attrs = useAttrs()
+
+//Styles & bindings
+const { modifiers } = toRefs(props)
+const { bemCssClasses: cardClass } = useBemModifiers('vv-card', {
+	modifiers
+})
+const cardAttrs = computed(() => {
+	return attrs
+})
+</script>

package/src/components/VvCheck/VvCheck.ts

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

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

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

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

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

@@ -0,0 +1,17 @@
+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/VvDialog.vue

@@ -0,0 +1,91 @@
+<template>
+	<Transition :name="transitioName" v-on="dialogTransitionHandlers">
+		<dialog v-show="openDialog" v-bind="dialogAttrs" :class="dialogClass">
+			<article ref="modalWrapper" class="vv-dialog__wrapper">
+				<header v-if="$slots.header || title" class="vv-dialog__header">
+					<slot name="header">
+						{{ title }}
+						<button
+							type="button"
+							aria-label="Close"
+							class="vv-dialog__close"
+							@click.prevent="closeDialog">
+							<vv-icon name="close" />
+						</button>
+					</slot>
+				</header>
+				<div class="vv-dialog__content">
+					<!-- @slot default -->
+					<slot />
+				</div>
+				<footer v-if="$slots.footer" class="vv-dialog__footer">
+					<slot name="footer" />
+				</footer>
+			</article>
+		</dialog>
+	</Transition>
+</template>
+
+<script setup lang="ts">
+import type { DialogHTMLAttributes } from 'vue'
+
+import { computed, ref } from 'vue'
+import { useVModel, onClickOutside } from '@vueuse/core'
+import { VvDialogEvents, VvDialogProps } from './VvDialog'
+
+//Components
+import VvIcon from '../VvIcon/VvIcon.vue'
+
+//Constants
+import { VV_DIALOG_SIZES } from './constants'
+
+//Props, emits, slots, attrs
+const props = defineProps(VvDialogProps)
+const emit = defineEmits(VvDialogEvents)
+
+//Data
+const openDialog = useVModel(props, 'open', emit)
+const htmlAttrIsOpen = ref(true)
+
+//Template reference
+const modalWrapper = ref(null)
+
+//Style e binding
+const dialogAttrs = computed(() => {
+	const { id } = props
+	return {
+		id,
+		open: htmlAttrIsOpen.value
+	} as DialogHTMLAttributes
+})
+const dialogClass = computed(() => {
+	return {
+		'vv-dialog': true,
+		'vv-dialog--small': props.size === VV_DIALOG_SIZES.small,
+		'vv-dialog--fullscreen': props.size === VV_DIALOG_SIZES.fullscreen
+	}
+})
+
+//Transitions
+const transitioName = computed(() => `vv-dialog--${props.transition}`)
+const dialogTransitionHandlers = {
+	'after-enter': () => {
+		htmlAttrIsOpen.value = true
+		emit('open')
+	},
+	'after-leave': () => {
+		htmlAttrIsOpen.value = false
+		emit('close')
+	}
+}
+
+//Click outside
+onClickOutside(modalWrapper, () => {
+	if (props.autoClose) openDialog.value = false
+})
+
+//Methods
+function closeDialog() {
+	openDialog.value = false
+}
+</script>

package/src/components/VvDialog/constants.ts

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

package/src/components/VvDropdown/VvDropdown.ts

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