@onsvisual/svelte-components 1.1.49 → 1.1.51

package/dist/components/Header/Header.svelte

@@ -33,6 +33,11 @@
 	 * @type {object}
 	 */
 	export let themeOverrides = {};
+	/**
+	 * Optional: Set an additional CSS class for the container
+	 * @type {string|null}
+	 */
+	export let cls = null;
 	/**
 	 * Display compact header without menus
 	 * @type {boolean}
@@ -133,7 +138,7 @@
 </script>
 
 <header
-	class="ons-header"
+	class="ons-header {cls}"
 	class:ons-header--basic={!compact && !legacy}
 	class:ons-header__full={width === "full"}
 	role="banner"
@@ -250,6 +255,7 @@
 			{/if}
 		{/if}
 	</Theme>
+	<slot name="after" />
 </header>
 
 <style>

package/dist/components/Header/Header.svelte.d.ts

@@ -3,6 +3,7 @@
 /** @typedef {typeof __propDef.slots}  HeaderSlots */
 export default class Header extends SvelteComponentTyped<{
     theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
+    cls?: string | null | undefined;
     width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
     themeOverrides?: object | undefined;
     search?: boolean | undefined;
@@ -23,6 +24,7 @@ export default class Header extends SvelteComponentTyped<{
     [evt: string]: CustomEvent<any>;
 }, {
     before: {};
+    after: {};
 }> {
 }
 export type HeaderProps = typeof __propDef.props;
@@ -32,6 +34,7 @@ import { SvelteComponentTyped } from "svelte";
 declare const __propDef: {
     props: {
         theme?: "light" | "dark" | "paleblue" | "blue" | "navyblue" | "grey" | null | undefined;
+        cls?: string | null | undefined;
         width?: "narrow" | "medium" | "wide" | "wider" | "full" | undefined;
         themeOverrides?: object | undefined;
         search?: boolean | undefined;
@@ -54,6 +57,7 @@ declare const __propDef: {
     };
     slots: {
         before: {};
+        after: {};
     };
 };
 export {};

package/dist/components/Tooltip/Tooltip.svelte

@@ -1,4 +1,7 @@
 <script>
+	import { onMount } from "svelte";
+	import { createPopper } from "@popperjs/core";
+
 	/**
 	 * Define the text to be displayed on the tooltip
 	 * @type {string}
@@ -6,7 +9,7 @@
 	export let text = "";
 	/**
 	 * Define the position of the tooltip relative to the element
-	 * @type {"top"|"bottom"|"left"|"right"|"middle"}
+	 * @type {"top"|"bottom"|"left"|"right"}
 	 */
 	export let position = "bottom";
 	/**
@@ -20,45 +23,78 @@
 	 */
 	export let zIndex = 1;
 
-	let isHovered = false;
+	let wrapper, tooltip; // HTML element bindings
+	let showToolip = null;
 
-	function mouseOver() {
-		isHovered = true;
-	}
-	function mouseLeave() {
-		isHovered = false;
+	function init() {
+		const popper = createPopper(wrapper, tooltip, {
+			placement: position,
+			modifiers: [
+				{
+					name: "offset",
+					options: {
+						offset: [0, 8]
+					}
+				}
+			]
+		});
+
+		function show() {
+			// Make the tooltip visible
+			showToolip = "";
+
+			// Enable the event listeners
+			popper.setOptions((options) => ({
+				...options,
+				modifiers: [...options.modifiers, { name: "eventListeners", enabled: true }]
+			}));
+
+			// Update its position
+			popper.update();
+		}
+
+		function hide() {
+			// Hide the tooltip
+			showToolip = null;
+
+			// Disable the event listeners
+			popper.setOptions((options) => ({
+				...options,
+				modifiers: [...options.modifiers, { name: "eventListeners", enabled: false }]
+			}));
+		}
+
+		const showEvents = ["mouseenter", "focus"];
+		const hideEvents = ["mouseleave", "blur"];
+
+		for (const event of showEvents) wrapper.addEventListener(event, show);
+		for (const event of hideEvents) wrapper.addEventListener(event, hide);
+
+		return {
+			destroy: () => {
+				for (const event of showEvents) wrapper.removeEventListener(event, show);
+				for (const event of hideEvents) wrapper.removeEventListener(event, hide);
+				popper.destroy();
+			}
+		};
 	}
+	onMount(init);
 </script>
 
-<div
-	role="tooltip"
-	class="tooltip-wrapper"
-	on:mouseenter={mouseOver}
-	on:mouseleave={mouseLeave}
-	on:focusin={mouseOver}
-	on:focusout={mouseLeave}
->
+<div class="tooltip-wrapper" bind:this={wrapper}>
 	<slot />
-	{#if isHovered}
-		<div
-			class="tooltip tooltip-{position}"
-			style:z-index={zIndex}
-			style:width={width != null ? `${width}px` : null}
-			style:white-space={width == null ? "nowrap" : "wrap"}
-		>
-			{text}
-		</div>
-	{/if}
+</div>
+
+<div class="tooltip" role="tooltip" data-show={showToolip} bind:this={tooltip}>
+	{text}
+	<div class="tooltip-arrow" data-popper-arrow></div>
 </div>
 
 <style>
 	.tooltip-wrapper {
 		display: inline-block;
-		position: relative;
 	}
 	.tooltip {
-		position: absolute;
-		pointer-events: none;
 		font-size: 14px;
 		line-height: 1.4;
 		color: var(--ons-color-page-light);
@@ -67,61 +103,42 @@
 		border-radius: 4px;
 		box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
 		word-break: keep-all;
+		display: none;
 	}
-	.tooltip-top {
-		bottom: calc(100% + 8px);
-		left: 50%;
-		transform: translateX(-50%);
-	}
-	.tooltip-bottom {
-		top: calc(100% + 8px);
-		left: 50%;
-		transform: translateX(-50%);
-	}
-	.tooltip-left {
-		top: 50%;
-		right: calc(100% + 8px);
-		transform: translateY(-50%);
+	.tooltip[data-show] {
+		display: block;
 	}
-	.tooltip-right {
-		top: 50%;
-		left: calc(100% + 8px);
-		transform: translateY(-50%);
+	.tooltip-arrow,
+	.tooltip-arrow::before {
+		position: absolute;
+		width: 10px;
+		height: 10px;
+		background: inherit;
 	}
-	.tooltip-middle {
-		top: calc(50% + 8px);
-		left: 50%;
-		transform: translateX(-50%);
+
+	.tooltip-arrow {
+		visibility: hidden;
 	}
-	.tooltip::before {
-		content: " ";
-		position: absolute;
-		border-width: 8px;
-		border-style: solid;
+
+	.tooltip-arrow::before {
+		visibility: visible;
+		content: "";
+		transform: rotate(45deg);
 	}
-	.tooltip-bottom::before,
-	.tooltip-middle::before {
-		bottom: calc(100% - 1px);
-		right: 50%;
-		border-color: transparent transparent var(--ons-color-text) transparent;
-		transform: translateX(50%);
+
+	:global(.tooltip[data-popper-placement^="top"] > .tooltip-arrow) {
+		bottom: -5px;
 	}
-	.tooltip-top::before {
-		top: calc(100% - 1px);
-		right: 50%;
-		border-color: var(--ons-color-text) transparent transparent transparent;
-		transform: translateX(50%);
+
+	:global(.tooltip[data-popper-placement^="bottom"] > .tooltip-arrow) {
+		top: -5px;
 	}
-	.tooltip-left::before {
-		left: calc(100% - 1px);
-		top: 50%;
-		border-color: transparent transparent transparent var(--ons-color-text);
-		transform: translateY(-50%);
+
+	:global(.tooltip[data-popper-placement^="left"] > .tooltip-arrow) {
+		right: -5px;
 	}
-	.tooltip-right::before {
-		right: calc(100% - 1px);
-		top: 50%;
-		border-color: transparent var(--ons-color-text) transparent transparent;
-		transform: translateY(-50%);
+
+	:global(.tooltip[data-popper-placement^="right"] > .tooltip-arrow) {
+		left: -5px;
 	}
 </style>

package/dist/components/Tooltip/Tooltip.svelte.d.ts

@@ -4,7 +4,7 @@
 export default class Tooltip extends SvelteComponentTyped<{
     width?: number | null | undefined;
     text?: string | undefined;
-    position?: "top" | "bottom" | "left" | "right" | "middle" | undefined;
+    position?: "top" | "bottom" | "left" | "right" | undefined;
     zIndex?: number | undefined;
 }, {
     [evt: string]: CustomEvent<any>;
@@ -20,7 +20,7 @@ declare const __propDef: {
     props: {
         width?: number | null | undefined;
         text?: string | undefined;
-        position?: "top" | "bottom" | "left" | "right" | "middle" | undefined;
+        position?: "top" | "bottom" | "left" | "right" | undefined;
         zIndex?: number | undefined;
     };
     events: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.1.49",
+	"version": "1.1.51",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",
@@ -37,6 +37,7 @@
 		"./css/main.css": "./dist/css/main.css"
 	},
 	"peerDependencies": {
+		"@popperjs/core": "^2.11.8",
 		"accessible-autocomplete": "^3.0.1",
 		"d3-scale": "^4.0.2",
 		"d3-shape": "^3.2.0",