@volverjs/ui-vue 0.0.7 → 0.0.8-beta.3

package/src/components/VvAlert/VvAlert.vue

@@ -16,27 +16,45 @@
 
 <template>
 	<div v-bind="hasProps">
-		<div class="vv-alert__header">
+		<div
+			v-if="
+				$slots.header ||
+				$slots.title ||
+				$slots.close ||
+				$slots['title::before'] ||
+				$slots['title::after'] ||
+				title ||
+				dismissable ||
+				autoClose
+			"
+			class="vv-alert__header"
+		>
 			<VvIcon v-if="hasIcon" v-bind="hasIcon" class="vv-alert__icon" />
 			<!-- @slot Header slot -->
 			<slot name="header">
 				<!-- @slot Before title slot -->
 				<slot name="title::before" />
 				<strong :id="hasTitleId" class="vv-alert__title">
-					{{ title }}
+					<!-- @slot Title slot -->
+					<slot name="title">
+						{{ title }}
+					</slot>
 				</strong>
 				<!-- @slot After title slot -->
 				<slot name="title::after" />
 			</slot>
-			<button
-				v-if="dismissable || autoClose"
-				class="vv-alert__close"
-				type="button"
-				:aria-label="closeLabel"
-				@click.stop="close"
-			>
-				<div class="vv-alert__close-mask"></div>
-			</button>
+			<!-- @slot Close button slot -->
+			<slot name="close" v-bind="{ close }">
+				<button
+					v-if="dismissable || autoClose"
+					class="vv-alert__close"
+					type="button"
+					:aria-label="closeLabel"
+					@click.stop="close"
+				>
+					<div class="vv-alert__close-mask"></div>
+				</button>
+			</slot>
 		</div>
 		<div v-if="$slots.default || content" class="vv-alert__content">
 			<!-- @slot Content slot -->

package/src/components/VvCombobox/VvCombobox.vue

@@ -101,7 +101,9 @@
 	const onAfterExpand = () => {
 		if (searchable.value) {
 			if (inputSearchEl.value) {
-				inputSearchEl.value.focus()
+				inputSearchEl.value.focus({
+					preventScroll: true,
+				})
 			}
 		}
 	}

package/src/components/VvDropdown/VvDropdown.vue

@@ -210,7 +210,9 @@
 					floatingEl.value,
 				)
 				if (focusableElements.length > 0) {
-					focusableElements[0].focus()
+					focusableElements[0].focus({
+						preventScroll: true,
+					})
 				}
 			})
 		}
@@ -286,9 +288,13 @@
 					document.activeElement as HTMLElement,
 				)
 				if (activeElementIndex < focusableElements.length - 1) {
-					focusableElements[activeElementIndex + 1].focus()
+					focusableElements[activeElementIndex + 1].focus({
+						preventScroll: true,
+					})
 				} else {
-					focusableElements[0].focus()
+					focusableElements[0].focus({
+						preventScroll: true,
+					})
 				}
 			}
 		})
@@ -306,9 +312,13 @@
 					document.activeElement as HTMLElement,
 				)
 				if (activeElementIndex > 0) {
-					focusableElements[activeElementIndex - 1].focus()
+					focusableElements[activeElementIndex - 1].focus({
+						preventScroll: true,
+					})
 				} else {
-					focusableElements[focusableElements.length - 1].focus()
+					focusableElements[focusableElements.length - 1].focus({
+						preventScroll: true,
+					})
 				}
 			}
 		})

package/src/stories/Alert/Alert.settings.ts

@@ -87,6 +87,16 @@ export const argTypes = {
 			},
 		},
 	},
+	close: {
+		control: {
+			type: 'text',
+		},
+		table: {
+			type: {
+				summary: 'html',
+			},
+		},
+	},
 	default: {
 		control: {
 			type: 'text',

package/src/stories/Alert/Alert.test.ts

@@ -16,7 +16,7 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 
 	const alertHeaderEl =
 		element.getElementsByClassName('vv-alert__header')?.[0]
-	const closeButton = alertHeaderEl?.lastChild as HTMLElement
+	const closeButtonEl = element.getElementsByClassName('vv-alert__close')?.[0]
 	const alertContentEl =
 		element.getElementsByClassName('vv-alert__content')?.[0]
 	const alertFooterEl =
@@ -32,14 +32,18 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	// dismissable
 	if (args.dismissable) {
 		expect(element).toHaveClass('vv-alert--dismissable')
-		expect(closeButton).toHaveClass('vv-alert__close')
+		expect(closeButtonEl).not.toBeUndefined()
 	}
 
 	// autoclose
 	if (args.autoClose) {
 		expect(element).toHaveClass('vv-alert--auto-close')
-		expect(closeButton).toHaveClass('vv-alert__close')
-		expect(closeButton.firstChild).toHaveClass('vv-alert__close-mask')
+		expect(closeButtonEl).not.toBeUndefined()
+		expect(closeButtonEl.firstChild).toHaveClass('vv-alert__close-mask')
+	}
+
+	if (!args.autoClose && !args.dismissable) {
+		expect(closeButtonEl).toBeUndefined()
 	}
 
 	// icon

package/src/stories/Tooltip/Tooltip.test.ts

@@ -18,7 +18,9 @@ export async function defaultTest({ canvasElement, args }: PlayAttributes) {
 	}
 
 	// check if tooltip is visible after focus
-	await parentElement.focus()
+	await parentElement.focus({
+		preventScroll: true,
+	})
 	await sleep(1200)
 	await expect(window.getComputedStyle(element)).toHaveProperty(
 		'opacity',