@volverjs/ui-vue 0.0.10-beta.7 → 0.0.10-beta.70

package/src/components/VvButtonGroup/VvButtonGroup.vue

@@ -1,74 +0,0 @@
-<script lang="ts">
-	export default {
-		name: 'VvButtonGroup',
-	}
-</script>
-
-<script setup lang="ts">
-	import type { ButtonGroupState } from '../../types/group'
-	import { INJECTION_KEY_BUTTON_GROUP } from '../../constants'
-	import { VvButtonGroupProps, VvButtonGroupEvents } from '.'
-
-	// emit and props
-	const emit = defineEmits(VvButtonGroupEvents)
-	const props = defineProps(VvButtonGroupProps)
-
-	// data
-	const {
-		disabled,
-		toggle,
-		modifiers,
-		multiple,
-		unselectable,
-		itemModifiers,
-	} = toRefs(props)
-	watchEffect(() => {
-		if (typeof props.modelValue === 'string' && multiple.value) {
-			// eslint-disable-next-line
-			console.warn(
-				`[VvButtonGroup]: modelValue is a string but multiple is true.`,
-			)
-		}
-	})
-	const modelValue = computed({
-		get: () => {
-			if (!multiple.value) {
-				return Array.isArray(props.modelValue)
-					? props.modelValue[0]
-					: props.modelValue
-			}
-			return props.modelValue
-		},
-		set: (newValue) => {
-			if (
-				newValue !== undefined &&
-				(Array.isArray(props.modelValue) || multiple.value) &&
-				!Array.isArray(newValue)
-			) {
-				return emit('update:modelValue', [newValue])
-			}
-			return emit('update:modelValue', newValue)
-		},
-	})
-
-	// provide
-	useProvideGroupState<ButtonGroupState>({
-		key: INJECTION_KEY_BUTTON_GROUP,
-		modelValue,
-		disabled,
-		toggle,
-		multiple,
-		unselectable,
-		modifiers: itemModifiers,
-	})
-
-	// style
-	const bemCssClasses = useModifiers('vv-button-group', modifiers)
-</script>
-
-<template>
-	<div :class="bemCssClasses" role="group">
-		<!-- @slot Default slot -->
-		<slot />
-	</div>
-</template>

package/src/components/VvButtonGroup/index.ts

@@ -1,28 +0,0 @@
-import { DisabledProps, ModifiersProps, UnselectableProps } from '../../props'
-
-export const VvButtonGroupProps = {
-	...ModifiersProps,
-	...DisabledProps,
-	...UnselectableProps,
-	/**
-	 * String or String[] of css classes (modifiers) that will be provided to each button'
-	 */
-	itemModifiers: {
-		type: [String, Array] as PropType<string | string[]>,
-		default: '',
-	},
-	toggle: { type: Boolean, default: false },
-	multiple: { type: Boolean, default: false },
-	modelValue: {
-		type: [String, Number, Boolean, Array] as PropType<
-			| string
-			| number
-			| boolean
-			| (string | number | boolean)[]
-			| undefined
-		>,
-		default: undefined,
-	},
-}
-
-export const VvButtonGroupEvents = ['update:modelValue']

package/src/components/VvCard/VvCard.vue

@@ -1,37 +0,0 @@
-<script lang="ts">
-	export default {
-		name: 'VvCard',
-	}
-</script>
-
-<script setup lang="ts">
-	import { VvCardProps } from '.'
-
-	// props and attrs
-	const props = defineProps(VvCardProps)
-
-	// styles
-	const { modifiers } = toRefs(props)
-	const bemCssClasses = useModifiers('vv-card', modifiers)
-</script>
-
-<template>
-	<article :class="bemCssClasses">
-		<header v-if="$slots.header || title" class="vv-card__header">
-			<!-- @slot Title slot -->
-			<slot name="header">
-				{{ title }}
-			</slot>
-		</header>
-		<!-- @slot Default slot -->
-		<slot />
-		<div v-if="$slots.content" class="vv-card__content">
-			<!-- @slot Content slot -->
-			<slot name="content" />
-		</div>
-		<footer v-if="$slots.footer" class="vv-card__footer">
-			<!-- @slot Footer slot -->
-			<slot name="footer" />
-		</footer>
-	</article>
-</template>

package/src/components/VvCard/index.ts

@@ -1,6 +0,0 @@
-import { ModifiersProps } from '@/props'
-
-export const VvCardProps = {
-	...ModifiersProps,
-	title: String,
-}

package/src/components/VvCheckbox/VvCheckbox.vue

@@ -1,198 +0,0 @@
-<script lang="ts">
-	export default {
-		name: 'VvCheckbox',
-	}
-</script>
-
-<script setup lang="ts">
-	import { VvCheckboxProps, VvCheckboxEvents, useGroupProps } from '.'
-	import { HintSlotFactory } from '../common/HintSlot'
-
-	// props, emits and slots
-	const props = defineProps(VvCheckboxProps)
-	const emit = defineEmits(VvCheckboxEvents)
-	const slots = useSlots()
-
-	// props merged with volver defaults (now only for labels)
-	const propsDefaults = useDefaults<typeof VvCheckboxProps>(
-		'VvCheckbox',
-		VvCheckboxProps,
-		props,
-	)
-
-	// data
-	const {
-		id,
-		disabled,
-		readonly,
-		valid,
-		invalid,
-		propsSwitch,
-		modelValue,
-		indeterminate,
-		isInGroup,
-	} = useGroupProps(props, emit)
-	const hasId = useUniqueId(id)
-	const hasHintId = computed(() => `${hasId.value}-hint`)
-	const tabindex = computed(() => (isDisabled.value ? -1 : props.tabindex))
-
-	// template ref
-	const input = ref()
-
-	// computed
-	const isBinary = computed(
-		() => props.uncheckedValue !== undefined && !isInGroup.value,
-	)
-	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(() => {
-		if (isBinary.value) {
-			return modelValue.value === props.value
-		}
-		return Array.isArray(modelValue.value)
-			? contains(props.value, modelValue.value)
-			: equals(props.value, modelValue.value)
-	})
-	const isIndeterminated = computed(() => {
-		if (indeterminate.value) {
-			return true
-		}
-		if (
-			!isChecked.value &&
-			isBinary.value &&
-			props.uncheckedValue !== modelValue.value
-		) {
-			return true
-		}
-		return false
-	})
-	const hasValue = computed(() => {
-		if (isBinary.value) {
-			return undefined
-		}
-		return ['string', 'number', 'boolean'].includes(typeof props.value)
-			? props.value
-			: true
-	})
-	const localModelValue = computed({
-		get() {
-			return isChecked.value
-		},
-		set(newValue) {
-			if (isBinary.value) {
-				modelValue.value = newValue ? props.value : props.uncheckedValue
-			} else if (Array.isArray(modelValue.value) || isInGroup.value) {
-				const toReturn = new Set(
-					Array.isArray(modelValue.value)
-						? modelValue.value
-						: modelValue.value !== undefined
-						? [modelValue.value]
-						: [],
-				)
-				if (newValue) {
-					toReturn.add(props.value)
-				} else {
-					toReturn.delete(props.value)
-				}
-				modelValue.value = [...toReturn]
-			} else {
-				modelValue.value = newValue ? props.value : undefined
-			}
-			emit('change', newValue)
-		},
-	})
-
-	// styles
-	const { modifiers } = toRefs(props)
-	const bemCssClasses = useModifiers(
-		'vv-checkbox',
-		modifiers,
-		computed(() => ({
-			switch: propsSwitch.value,
-			valid: valid.value,
-			invalid: invalid.value,
-			disabled: disabled.value,
-			readonly: readonly.value,
-			indeterminate: indeterminate.value,
-		})),
-	)
-
-	watchEffect(() => {
-		if (isBinary.value && Array.isArray(modelValue.value)) {
-			// eslint-disable-next-line no-console
-			console.warn(
-				`[VvCheckbox] The model value is an array but the component is in binary mode.`,
-			)
-		}
-	})
-
-	// indeterminate
-	watch(
-		() => isIndeterminated.value,
-		(newValue) => {
-			if (newValue) {
-				input.value.indeterminate = true
-			} else {
-				input.value.indeterminate = false
-			}
-		},
-	)
-	onMounted(() => {
-		if (isIndeterminated.value) {
-			input.value.indeterminate = true
-		}
-	})
-
-	// hint
-	const {
-		HintSlot,
-		hasHintLabelOrSlot,
-		hasInvalidLabelOrSlot,
-		hintSlotScope,
-	} = HintSlotFactory(propsDefaults, slots)
-</script>
-
-<template>
-	<label :class="bemCssClasses" :for="hasId">
-		<input
-			:id="hasId"
-			ref="input"
-			v-model="localModelValue"
-			type="checkbox"
-			class="vv-checkbox__input"
-			:name="name"
-			:disabled="isDisabled"
-			:value="hasValue"
-			:tabindex="tabindex"
-			:aria-invalid="isInvalid"
-			:aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
-			:aria-errormessage="hasInvalidLabelOrSlot ? hasHintId : undefined"
-		/>
-		<!-- @slot Use this slot for check label -->
-		<slot :value="modelValue">
-			{{ label }}
-		</slot>
-		<HintSlot :id="hasHintId" class="vv-checkbox__hint">
-			<template v-if="$slots.hint" #hint>
-				<slot name="hint" v-bind="hintSlotScope" />
-			</template>
-			<template v-if="$slots.loading" #loading>
-				<slot name="loading" v-bind="hintSlotScope" />
-			</template>
-			<template v-if="$slots.valid" #valid>
-				<slot name="valid" v-bind="hintSlotScope" />
-			</template>
-			<template v-if="$slots.invalid" #invalid>
-				<slot name="invalid" v-bind="hintSlotScope" />
-			</template>
-		</HintSlot>
-	</label>
-</template>

package/src/components/VvCheckbox/index.ts

@@ -1,65 +0,0 @@
-import type { ExtractPropTypes, Ref } from 'vue'
-import type { InputGroupState } from '../../types/group'
-import { CheckboxRadioProps, ModifiersProps } from '../../props'
-import { INJECTION_KEY_CHECK_GROUP } from '../../constants'
-
-export const VvCheckboxProps = {
-	...CheckboxRadioProps,
-	...ModifiersProps,
-	/**
-	 * If true, the input will be indeterminated
-	 */
-	indeterminate: Boolean,
-	/**
-	 * Value associated with the unchecked state
-	 */
-	uncheckedValue: [String, Number, Boolean],
-	/**
-	 * If true, the input will be displayed as a switch
-	 */
-	switch: Boolean,
-}
-
-export const VvCheckboxEvents = ['click', 'update:modelValue', 'change', 'blur']
-
-export type VvCheckboxPropsTypes = ExtractPropTypes<typeof VvCheckboxProps>
-
-/**
- * Merges local and group props
- */
-export function useGroupProps(
-	props: VvCheckboxPropsTypes,
-	emit: (event: (typeof VvCheckboxEvents)[number], value: unknown) => void,
-) {
-	const { group, isInGroup, getGroupOrLocalRef } =
-		useInjectedGroupState<InputGroupState>(INJECTION_KEY_CHECK_GROUP)
-
-	// local props
-	const { id, switch: propsSwitch, indeterminate } = toRefs(props)
-
-	// global props
-	const modelValue = getGroupOrLocalRef('modelValue', props, emit)
-	const valid = getGroupOrLocalRef('valid', props) as Ref<boolean>
-	const invalid = getGroupOrLocalRef('invalid', props) as Ref<boolean>
-	const readonly = computed(() =>
-		Boolean(props.readonly || group?.value?.readonly.value),
-	)
-	const disabled = computed(() =>
-		Boolean(props.disabled || group?.value?.disabled.value),
-	)
-
-	return {
-		// local props
-		id,
-		propsSwitch,
-		indeterminate,
-		// global props
-		group,
-		isInGroup,
-		modelValue,
-		valid,
-		invalid,
-		readonly,
-		disabled,
-	}
-}

package/src/components/VvCheckboxGroup/VvCheckboxGroup.vue

@@ -1,99 +0,0 @@
-<script lang="ts">
-	export default {
-		name: 'VvCheckboxGroup',
-	}
-</script>
-
-<script setup lang="ts">
-	import type { Option } from '../../types/generic'
-	import type { InputGroupState } from '../../types/group'
-	import { INJECTION_KEY_CHECK_GROUP } from '../../constants'
-	import { HintSlotFactory } from '../common/HintSlot'
-	import VvCheckbox from '../VvCheckbox/VvCheckbox.vue'
-	import { VvCheckboxGroupProps, VvCheckboxGroupEvents } from '.'
-
-	// props, emit and slots
-	const props = defineProps(VvCheckboxGroupProps)
-	const emit = defineEmits(VvCheckboxGroupEvents)
-	const slots = useSlots()
-
-	// props merged with volver defaults (now only for labels)
-	const propsDefaults = useDefaults<typeof VvCheckboxGroupProps>(
-		'VvCheckboxGroup',
-		VvCheckboxGroupProps,
-		props,
-	)
-
-	// data
-	const modelValue = useVModel(props, 'modelValue', emit)
-	const { disabled, readonly, vertical, valid, invalid, modifiers } =
-		toRefs(props)
-
-	useProvideGroupState<InputGroupState>({
-		key: INJECTION_KEY_CHECK_GROUP,
-		modelValue,
-		disabled,
-		readonly,
-		valid,
-		invalid,
-	})
-
-	// options
-	const { getOptionLabel, getOptionValue } = useOptions(props)
-
-	// stypes
-	const bemCssClasses = useModifiers(
-		'vv-checkbox-group',
-		modifiers,
-		computed(() => ({
-			disabled: disabled.value,
-			readonly: readonly.value,
-			horizontal: !vertical.value,
-			valid: valid.value,
-			invalid: invalid.value,
-		})),
-	)
-
-	// 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, hintSlotScope } = HintSlotFactory(propsDefaults, slots)
-</script>
-
-<template>
-	<fieldset :class="bemCssClasses">
-		<legend v-if="label" v-text="label" />
-		<div class="vv-checkbox-group__wrapper">
-			<!-- #region options set up -->
-			<template v-if="options.length > 0">
-				<VvCheckbox
-					v-for="(option, index) in options"
-					:key="index"
-					v-bind="getOptionProps(option, index)"
-				/>
-			</template>
-			<!-- #endregion -->
-			<slot v-else />
-		</div>
-		<HintSlot class="vv-checkbox-group__hint">
-			<template v-if="$slots.hint" #hint>
-				<slot name="hint" v-bind="hintSlotScope" />
-			</template>
-			<template v-if="$slots.loading" #loading>
-				<slot name="loading" v-bind="hintSlotScope" />
-			</template>
-			<template v-if="$slots.valid" #valid>
-				<slot name="valid" v-bind="hintSlotScope" />
-			</template>
-			<template v-if="$slots.invalid" #invalid>
-				<slot name="invalid" v-bind="hintSlotScope" />
-			</template>
-		</HintSlot>
-	</fieldset>
-</template>

package/src/components/VvCheckboxGroup/index.ts

@@ -1,5 +0,0 @@
-import { CheckboxRadioGroupProps } from '../../props'
-
-export const VvCheckboxGroupProps = CheckboxRadioGroupProps
-
-export const VvCheckboxGroupEvents = ['update:modelValue', 'change']