@volverjs/ui-vue 0.0.10-beta.8 → 0.0.10

package/src/components/VvSelect/VvSelect.vue

@@ -1,247 +0,0 @@
-<script lang="ts">
-	export default {
-		name: 'VvSelect',
-	}
-</script>
-
-<script setup lang="ts">
-	import type { SelectHTMLAttributes } from 'vue'
-	import VvIcon from '../VvIcon/VvIcon.vue'
-	import HintSlotFactory from '../common/HintSlot'
-	import { VvSelectProps, VvSelectEmits } from '.'
-	import type { Option } from '@/types/generic'
-
-	// props, emit and slots
-	const props = defineProps(VvSelectProps)
-	const emit = defineEmits(VvSelectEmits)
-	const slots = useSlots()
-
-	// props merged with volver defaults (now only for labels)
-	const propsDefaults = useDefaults<typeof VvSelectProps>(
-		'VvSelect',
-		VvSelectProps,
-		props,
-	)
-
-	// template refs
-	const select = ref()
-
-	// hint
-	const {
-		HintSlot,
-		hasHintLabelOrSlot,
-		hasInvalidLabelOrSlot,
-		hintSlotScope,
-	} = HintSlotFactory(propsDefaults, slots)
-
-	// data
-	const {
-		id,
-		modifiers,
-		disabled,
-		readonly,
-		loading,
-		icon,
-		iconPosition,
-		invalid,
-		valid,
-		floating,
-		multiple,
-	} = toRefs(props)
-
-	// computed
-	const hasId = useUniqueId(id)
-	const hasHintId = computed(() => `${hasId.value}-hint`)
-
-	// focus
-	const { focused } = useComponentFocus(select, emit)
-
-	// visibility
-	const isVisible = useElementVisibility(select)
-	watch(isVisible, (newValue) => {
-		if (newValue && props.autofocus) {
-			focused.value = true
-		}
-	})
-
-	// icons
-	const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-		icon,
-		iconPosition,
-	)
-
-	// dirty
-	const isDirty = computed(() => !isEmpty(props.modelValue))
-
-	// disabled
-	const isDisabled = computed(() => props.disabled || props.readonly)
-	const hasTabindex = computed(() => {
-		return isDisabled.value ? -1 : props.tabindex
-	})
-
-	// invalid
-	const isInvalid = computed(() => {
-		if (props.invalid === true) {
-			return true
-		}
-		if (props.valid === true) {
-			return false
-		}
-		return undefined
-	})
-
-	// styles
-	const bemCssClasses = useModifiers(
-		'vv-select',
-		modifiers,
-		computed(() => ({
-			valid: valid.value,
-			invalid: invalid.value,
-			loading: loading.value,
-			disabled: disabled.value,
-			readonly: readonly.value,
-			'icon-before': hasIconBefore.value,
-			'icon-after': hasIconAfter.value,
-			dirty: isDirty.value,
-			focus: focused.value,
-			floating: floating.value,
-			multiple: multiple.value,
-		})),
-	)
-
-	// attrs
-	const hasAttrs: SelectHTMLAttributes = computed(() => {
-		return {
-			name: props.name,
-			tabindex: hasTabindex.value,
-			disabled: isDisabled.value,
-			required: props.required,
-			size: props.size,
-			autocomplete: props.autocomplete,
-			multiple: props.multiple,
-			'aria-invalid': isInvalid.value,
-			'aria-describedby': hasHintLabelOrSlot.value
-				? hasHintId.value
-				: undefined,
-			'aria-errormessage': hasInvalidLabelOrSlot.value
-				? hasHintId.value
-				: undefined,
-		}
-	})
-
-	// slots
-	const slotProps = computed(() => ({
-		valid: props.valid,
-		invalid: props.invalid,
-		modelValue: props.modelValue,
-	}))
-
-	const {
-		getOptionLabel,
-		getOptionValue,
-		isOptionDisabled,
-		getOptionGrouped,
-	} = useOptions(props)
-
-	const localModelValue = computed({
-		get: () => {
-			return props.modelValue
-		},
-		set: (newValue) => {
-			if (Array.isArray(newValue)) {
-				newValue = newValue.filter((item) => item !== undefined)
-			}
-			emit('update:modelValue', newValue)
-		},
-	})
-
-	// Grouped options
-	const isGroup = (option: string | Option) => {
-		if (typeof option === 'string') return false
-		return option && option.options && option.options.length > 0
-	}
-</script>
-
-<template>
-	<div :class="bemCssClasses">
-		<label v-if="label" :for="hasId">{{ label }}</label>
-		<!-- #region native select -->
-		<div class="vv-select__wrapper">
-			<div v-if="$slots.before" class="vv-select__input-before">
-				<!-- @slot Slot before input -->
-				<slot name="before" v-bind="slotProps" />
-			</div>
-			<div class="vv-select__inner">
-				<VvIcon
-					v-if="hasIconBefore"
-					class="vv-select__icon"
-					v-bind="hasIcon"
-				/>
-				<select
-					:id="hasId"
-					ref="select"
-					v-model="localModelValue"
-					v-bind="hasAttrs"
-				>
-					<option
-						v-if="placeholder"
-						:value="undefined"
-						:disabled="!unselectable"
-						:hidden="!unselectable"
-					>
-						{{ placeholder }}
-					</option>
-					<template v-for="(option, index) in options">
-						<option
-							v-if="!isGroup(option)"
-							:key="index"
-							:disabled="isOptionDisabled(option)"
-							:value="getOptionValue(option)"
-						>
-							{{ getOptionLabel(option) }}
-						</option>
-						<optgroup
-							v-else
-							:key="`group-${index}`"
-							:disabled="isOptionDisabled(option)"
-							:label="getOptionLabel(option)"
-						>
-							<option
-								v-for="(item, i) in getOptionGrouped(option)"
-								:key="`group-${index}-item-${i}`"
-								:disabled="isOptionDisabled(item)"
-								:value="getOptionValue(item)"
-							>
-								{{ getOptionLabel(item) }}
-							</option>
-						</optgroup>
-					</template>
-				</select>
-				<VvIcon
-					v-if="hasIconAfter"
-					class="vv-select__icon vv-select__icon-after"
-					v-bind="hasIcon"
-				/>
-			</div>
-			<div v-if="$slots.after" class="vv-select__input-after">
-				<!-- @slot Slot after input -->
-				<slot name="after" v-bind="slotProps" />
-			</div>
-		</div>
-		<!-- #endregion native select -->
-		<HintSlot :id="hasHintId" class="vv-select__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>
-	</div>
-</template>

package/src/components/VvSelect/index.ts

@@ -1,69 +0,0 @@
-import {
-	ValidProps,
-	InvalidProps,
-	HintProps,
-	LoadingProps,
-	DisabledProps,
-	ReadonlyProps,
-	ModifiersProps,
-	TabindexProps,
-	OptionsProps,
-	IconProps,
-	IdNameProps,
-	FloatingLabelProps,
-	UnselectableProps,
-	AutofocusProps,
-	AutocompleteProps,
-	LabelProps,
-} from '../../props'
-
-export const VvSelectProps = {
-	...IdNameProps,
-	...AutofocusProps,
-	...AutocompleteProps,
-	...TabindexProps,
-	...ValidProps,
-	...InvalidProps,
-	...HintProps,
-	...LoadingProps,
-	...DisabledProps,
-	...ReadonlyProps,
-	...ModifiersProps,
-	...OptionsProps,
-	...IconProps,
-	...FloatingLabelProps,
-	...UnselectableProps,
-	...LabelProps,
-	/**
-	 * This Boolean attribute indicates that multiple options can be selected in the list.
-	 * If it is not specified, then only one option can be selected at a time.
-	 * When multiple is specified, most browsers will show a scrolling list box instead of a single line dropdown.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple
-	 */
-	multiple: Boolean,
-	/**
-	 * A Boolean attribute indicating that an option with a non-empty string value must be selected.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-required
-	 */
-	required: Boolean,
-	/**
-	 * If the control is presented as a scrolling list box (e.g. when multiple is specified),
-	 * this attribute represents the number of rows in the list that should be visible at one time.
-	 * Browsers are not required to present a select element as a scrolled list box. The default value is 0.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-size
-	 */
-	size: [String, Number],
-	/**
-	 * modelValue can be a string, number, boolean, object or array of string, number, boolean, object
-	 */
-	modelValue: {
-		type: [String, Number, Boolean, Object, Array],
-		default: undefined,
-	},
-	/**
-	 * Select placeholder
-	 */
-	placeholder: String,
-}
-
-export const VvSelectEmits = ['update:modelValue', 'focus', 'blur']

package/src/components/VvTab/VvTab.vue

@@ -1,77 +0,0 @@
-<script setup lang="ts">
-	import { VvTabProps, VvTabEvents } from '@/components/VvTab'
-	import VvNav from '@/components/VvNav/VvNav.vue'
-	import type { NavItemTab } from '@/types/nav'
-
-	const props = defineProps(VvTabProps)
-	const emit = defineEmits(VvTabEvents)
-	const { modifiers, items } = toRefs(props)
-	const tabKeys = computed(() => {
-		return items.value.reduce<string[]>((acc, item) => {
-			if (item.tab) {
-				acc.push(item.tab)
-			}
-			return acc
-		}, [])
-	})
-	const localModelValue = ref<string | undefined>()
-	const activeTabKey = computed({
-		get: () => {
-			return (
-				props.modelValue || localModelValue.value || tabKeys.value?.[0]
-			)
-		},
-		set: (newValue) => {
-			localModelValue.value = newValue
-			emit('update:modelValue', newValue)
-		},
-	})
-	const hasNavModifiers = computed(() => {
-		return [
-			'tabs',
-			...(Array.isArray(props.navModifiers)
-				? props.navModifiers
-				: props.navModifiers?.split(' ') ?? []),
-		]
-	})
-	const onNavClick = (item: NavItemTab) => {
-		if (item.tab) {
-			activeTabKey.value = item.tab
-		}
-	}
-	const navItems = computed(() =>
-		props.items.map((item) => ({
-			current: item.tab === activeTabKey.value,
-			...item,
-		})),
-	)
-
-	// bem css classes
-	const bemCssClasses = useModifiers('vv-tab', modifiers)
-</script>
-
-<template>
-	<div :class="bemCssClasses">
-		<!-- #region nav -->
-		<VvNav
-			v-bind="{
-				items: navItems,
-				modifiers: hasNavModifiers,
-			}"
-			@click="onNavClick"
-		/>
-		<!-- #endregion -->
-
-		<!-- #region panels -->
-		<template v-for="(item, index) in items" :key="index">
-			<article
-				v-if="item.tab"
-				:class="{ target: activeTabKey === item.tab }"
-				class="vv-tab__panel"
-			>
-				<slot :name="`panel::${item.tab}`" />
-			</article>
-		</template>
-		<!-- #endregion -->
-	</div>
-</template>

package/src/components/VvTab/index.ts

@@ -1,19 +0,0 @@
-import { ModifiersProps } from '@/props'
-import type { NavItemTab } from '@/types/nav'
-
-export const VvTabProps = {
-	...ModifiersProps,
-	navModifiers: {
-		type: [String, Array] as PropType<string | string[]>,
-	},
-	modelValue: {
-		type: String,
-		default: '',
-	},
-	items: {
-		type: Array as PropType<NavItemTab[]>,
-		default: () => [],
-	},
-}
-
-export const VvTabEvents = ['update:modelValue']

package/src/components/VvTextarea/VvTextarea.vue

@@ -1,225 +0,0 @@
-<script lang="ts">
-	export default {
-		name: 'VvTextarea',
-	}
-</script>
-
-<script setup lang="ts">
-	import type { TextareaHTMLAttributes } from 'vue'
-	import HintSlotFactory from '../common/HintSlot'
-	import VvIcon from '../VvIcon/VvIcon.vue'
-	import { VvTextareaProps, VvTextareaEvents } from '.'
-
-	// props, emit and slots
-	const props = defineProps(VvTextareaProps)
-	const emit = defineEmits(VvTextareaEvents)
-	const slots = useSlots()
-
-	// props merged with volver defaults (now only for labels)
-	const propsDefaults = useDefaults<typeof VvTextareaProps>(
-		'VvTextarea',
-		VvTextareaProps,
-		props,
-	)
-
-	// template refs
-	const textarea = ref()
-
-	// data
-	const {
-		id,
-		icon,
-		iconPosition,
-		label,
-		modelValue,
-		count,
-		valid,
-		invalid,
-		loading,
-		modifiers,
-		debounce,
-		minlength,
-		maxlength,
-	} = toRefs(props)
-	const hasId = useUniqueId(id)
-	const hasHintId = computed(() => `${hasId.value}-hint`)
-	// BUG - https://www.samanthaming.com/tidbits/88-css-placeholder-shown/
-	const hasPlaceholder = computed(() =>
-		props.floating && isEmpty(props.placeholder) ? ' ' : props.placeholder,
-	)
-
-	// debounce
-	const localModelValue = useDebouncedInput(modelValue, emit, debounce?.value)
-
-	// icons
-	const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-		icon,
-		iconPosition,
-	)
-
-	// focus
-	const { focused } = useComponentFocus(textarea, emit)
-
-	// visibility
-	const isVisible = useElementVisibility(textarea)
-	watch(isVisible, (newValue) => {
-		if (newValue && props.autofocus) {
-			focused.value = true
-		}
-	})
-
-	// count
-	const { formatted: countFormatted } = useTextCount(localModelValue, {
-		mode: count?.value,
-		upperLimit: Number(maxlength?.value),
-		lowerLimit: Number(minlength?.value),
-	})
-
-	// tabindex
-	const isClickable = computed(() => !props.disabled && !props.readonly)
-	const hasTabindex = computed(() =>
-		isClickable.value ? props.tabindex : -1,
-	)
-
-	// dirty
-	const isDirty = computed(() => !isEmpty(modelValue))
-
-	// invalid
-	const isInvalid = computed(() => {
-		if (props.invalid === true) {
-			return true
-		}
-		if (props.valid === true) {
-			return false
-		}
-		return undefined
-	})
-
-	// hint
-	const {
-		HintSlot,
-		hasHintLabelOrSlot,
-		hasInvalidLabelOrSlot,
-		hintSlotScope,
-	} = HintSlotFactory(propsDefaults, slots)
-
-	// styles
-	const bemCssClasses = useModifiers(
-		'vv-textarea',
-		modifiers,
-		computed(() => ({
-			valid: valid.value,
-			invalid: invalid.value,
-			loading: loading.value,
-			disabled: props.disabled,
-			readonly: props.readonly,
-			'icon-before': hasIconBefore.value,
-			'icon-after': hasIconAfter.value,
-			floating: props.floating && !isEmpty(props.label),
-			dirty: isDirty.value,
-			focus: focused.value,
-			resizable: props.resizable,
-		})),
-	)
-
-	// attrs
-	const hasAttrs = computed(
-		() =>
-			({
-				name: props.name,
-				placeholder: hasPlaceholder.value,
-				tabindex: hasTabindex.value,
-				disabled: props.disabled,
-				readonly: props.readonly,
-				required: props.required,
-				autocomplete: props.autocomplete,
-				minlength: props.minlength,
-				maxlength: props.maxlength,
-				cols: props.cols,
-				rows: props.rows,
-				wrap: props.wrap,
-				spellcheck: props.spellcheck,
-				'aria-invalid': isInvalid.value,
-				'aria-describedby': hasHintLabelOrSlot.value
-					? hasHintId.value
-					: undefined,
-				'aria-errormessage': hasInvalidLabelOrSlot.value
-					? hasHintId.value
-					: undefined,
-			}) as TextareaHTMLAttributes,
-	)
-
-	// slots props
-	const slotProps = computed(() => ({
-		valid: props.valid,
-		invalid: props.invalid,
-		modelValue: props.modelValue,
-		hintLabel: props.hintLabel,
-		maxlength: props.maxlength,
-		minlength: props.minlength,
-		clear: onClear,
-	}))
-
-	// methods
-	const onClear = () => {
-		localModelValue.value = undefined
-	}
-</script>
-
-<template>
-	<div :class="bemCssClasses">
-		<label v-if="label" :for="hasId" class="vv-textarea__label">
-			{{ label }}
-		</label>
-		<div class="vv-textarea__wrapper">
-			<!-- @slot Slot to replace icon before textarea -->
-			<div v-if="$slots.before" class="vv-textarea__input-before">
-				<!-- @slot Slot before input -->
-				<slot name="before" v-bind="slotProps" />
-			</div>
-			<div class="vv-textarea__inner">
-				<VvIcon
-					v-if="hasIconBefore"
-					class="vv-textarea__icon"
-					v-bind="hasIcon"
-				/>
-				<textarea
-					:id="hasId"
-					ref="textarea"
-					v-model="localModelValue"
-					v-bind="hasAttrs"
-					@keyup="emit('keyup', $event)"
-				/>
-				<VvIcon
-					v-if="hasIconAfter"
-					class="vv-textarea__icon vv-textarea__icon-after"
-					v-bind="hasIcon"
-				/>
-			</div>
-			<div v-if="$slots.after" class="vv-textarea__input-after">
-				<!-- @slot Slot after input -->
-				<slot name="after" v-bind="slotProps" />
-			</div>
-			<span v-if="count" class="vv-textarea__limit">
-				<!-- @slot Slot to replace count -->
-				<slot name="count" v-bind="slotProps">
-					{{ countFormatted }}
-				</slot>
-			</span>
-		</div>
-		<HintSlot :id="hasHintId" class="vv-textarea__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>
-	</div>
-</template>

package/src/components/VvTextarea/index.ts

@@ -1,50 +0,0 @@
-import type { ExtractPropTypes } from 'vue'
-import { InputTextareaProps } from '../../props'
-
-export const WRAP = {
-	hard: 'hard',
-	soft: 'soft',
-}
-
-export const SPELLCHECK = {
-	true: true,
-	false: false,
-	default: 'default',
-}
-
-export const VvTextareaEvents = ['update:modelValue', 'focus', 'blur', 'keyup']
-
-export const VvTextareaProps = {
-	...InputTextareaProps,
-	/**
-	 * Textarea value
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#value
-	 */
-	modelValue: String,
-	/**
-	 * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#cols
-	 */
-	cols: { type: [String, Number], default: 20 },
-	/**
-	 * The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#rows
-	 */
-	rows: { type: [String, Number], default: 2 },
-	/**
-	 * Indicates how the control should wrap the value for form submission.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap
-	 */
-	wrap: { type: String, default: WRAP.soft },
-	/**
-	 * Specifies whether the <textarea> is subject to spell checking by the underlying browser/OS.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap
-	 */
-	spellcheck: { type: [Boolean, String], default: SPELLCHECK.default },
-	/**
-	 * If true, the textarea will be resizable
-	 */
-	resizable: Boolean,
-}
-
-export type VvTextareaPropsTypes = ExtractPropTypes<typeof VvTextareaProps>

package/src/components/VvTooltip/VvTooltip.vue

@@ -1,23 +0,0 @@
-<script setup lang="ts">
-	import { VvTooltipProps } from '.'
-
-	const props = defineProps(VvTooltipProps)
-	const { modifiers } = toRefs(props)
-
-	// styles
-	const bemCssClasses = useModifiers(
-		'vv-tooltip',
-		modifiers,
-		computed(() => ({
-			[props.position]: true,
-		})),
-	)
-</script>
-
-<template>
-	<span :class="bemCssClasses" role="tooltip" inert>
-		<slot>
-			{{ value }}
-		</slot>
-	</span>
-</template>