@volverjs/ui-vue 0.0.10-beta.5 → 0.0.10-beta.51

package/src/components/VvTab/VvTab.vue

@@ -1,77 +1,87 @@
 <script setup lang="ts">
-	import { VvTabProps, VvTabEvents } from '@/components/VvTab'
-	import VvNav from '@/components/VvNav/VvNav.vue'
-	import type { NavItemTab } from '@/types/nav'
+import type { NavItemTab } from '@/types/nav'
+import VvNav from '@/components/VvNav/VvNav.vue'
+import { VvTabEvents, VvTabProps } from '@/components/VvTab'
 
-	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,
-		})),
-	)
+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(' ') ?? []),
+    ]
+})
+function 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)
+// bem css classes
+const bemCssClasses = useModifiers('vv-tab', modifiers)
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvTab',
+}
 </script>
 
 <template>
-	<div :class="bemCssClasses">
-		<!-- #region nav -->
-		<VvNav
-			v-bind="{
-				items: navItems,
-				modifiers: hasNavModifiers,
-			}"
-			@click="onNavClick"
-		/>
-		<!-- #endregion -->
+    <div :class="bemCssClasses">
+        <!-- #region nav -->
+        <VvNav
+            v-bind="{
+                items: navItems,
+                modifiers: hasNavModifiers,
+            }"
+            @click="onNavClick"
+        >
+            <template #item="{ item, data, index }">
+                <slot name="nav-item" v-bind="{ item, data, index }" />
+            </template>
+        </VvNav>
+        <!-- #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>
+        <!-- #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 +1,19 @@
-import { ModifiersProps } from '@/props'
 import type { NavItemTab } from '@/types/nav'
+import { ModifiersProps } from '@/props'
 
 export const VvTabProps = {
-	...ModifiersProps,
-	navModifiers: {
-		type: [String, Array] as PropType<string | string[]>,
-	},
-	modelValue: {
-		type: String,
-		default: '',
-	},
-	items: {
-		type: Array as PropType<NavItemTab[]>,
-		default: () => [],
-	},
+    ...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 +1,224 @@
-<script lang="ts">
-	export default {
-		name: 'VvTextarea',
-	}
+<script setup lang="ts">
+import type { TextareaHTMLAttributes } from 'vue'
+import HintSlotFactory from '../common/HintSlot'
+import VvIcon from '../VvIcon/VvIcon.vue'
+import { VvTextareaEvents, VvTextareaProps } 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 { 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 !== undefined,
+        'icon-after': hasIconAfter.value !== undefined,
+        '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
+function onClear() {
+    localModelValue.value = undefined
+}
 </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,
-			focused: 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 lang="ts">
+export default {
+    name: 'VvTextarea',
+}
 </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>
+    <div :class="bemCssClasses">
+        <label v-if="label" :for="hasId" class="vv-textarea__label">
+            {{ label }} <span v-if="required">*</span>
+        </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"
+                    v-bind="hasIconBefore"
+                    class="vv-textarea__icon"
+                />
+                <textarea
+                    :id="hasId"
+                    ref="textarea"
+                    v-model="localModelValue"
+                    v-bind="hasAttrs"
+                    @keyup="emit('keyup', $event)"
+                />
+                <VvIcon
+                    v-if="hasIconAfter"
+                    v-bind="hasIconAfter"
+                    class="vv-textarea__icon vv-textarea__icon-after"
+                />
+            </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>