@onsvisual/svelte-components 1.1.17 → 1.1.19

package/dist/components/Select/Select.svelte

@@ -39,6 +39,11 @@
 	 * @type {boolean}
 	 */
 	export let autoClear = mode === "search";
+	/**
+	 * Auto focus the search input when it is created
+	 * @type {boolean}
+	 */
+	export let autoFocus = false;
 	/**
 	 * A label to describe the element (expected for accessibility)
 	 * @type {string|null}
@@ -183,6 +188,7 @@
 		inputElement = element.querySelector(`#${id}`);
 		// setInputValue(value?.[labelKey] || "");
 		inputElement.addEventListener("blur", inputChange);
+		if (autoFocus) inputElement.focus();
 	}
 
 	// In case input value is updated from outside component

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

@@ -13,6 +13,7 @@ export default class Select extends SvelteComponentTyped<{
     mode?: "default" | "search" | undefined;
     clearable?: boolean | undefined;
     autoClear?: boolean | undefined;
+    autoFocus?: boolean | undefined;
     labelKey?: string | undefined;
     groupKey?: string | null | undefined;
     renderFallback?: boolean | undefined;
@@ -43,6 +44,7 @@ declare const __propDef: {
         mode?: "default" | "search" | undefined;
         clearable?: boolean | undefined;
         autoClear?: boolean | undefined;
+        autoFocus?: boolean | undefined;
         labelKey?: string | undefined;
         groupKey?: string | null | undefined;
         renderFallback?: boolean | undefined;

package/dist/components/Toolbar/ToolbarButton.svelte

@@ -15,6 +15,7 @@
 		selected = false,
 		custom = false,
 		hasAriaControls = false,
+		hasTooltip = true,
 		sticky = false,
 		transient = false,
 		disableHelp = false
@@ -28,6 +29,7 @@
 		selected?: boolean;
 		custom?: boolean;
 		hasAriaControls?: boolean;
+		hasTooltip?: boolean;
 		sticky?: boolean;
 		transient?: boolean;
 		disableHelp?: boolean;
@@ -41,6 +43,9 @@
 	const activeModalId = getContext("activeModalId");
 	const currentActiveId = $derived(activeModalId);
 	const isActive = $derived($currentActiveId === id);
+	const orientation = getContext("orientation");
+	const currentOrientation = $derived(orientation);
+	let showTooltip = $state(false);
 
 	// Retrieve button registry from context
 	const { register, unregister } = getContext("buttonIds");
@@ -76,7 +81,7 @@
 
 <div class="toolbar-button-wrapper">
 	{#if custom}
-		<div on:click={handleClick} bind:this={buttonElement}>
+		<div onclick={handleClick} bind:this={buttonElement}>
 			<slot name="custom" />
 		</div>
 	{:else}
@@ -86,14 +91,22 @@
 			class={`toolbar-button ${disabled ? "disabled" : ""} ${
 				isActive && !transient ? "selected" : ""
 			} ${classes}`}
-			on:click={handleClick}
+			onclick={handleClick}
+			onmouseover={() => (showTooltip = true)}
+			onmouseout={() => (showTooltip = false)}
+			onfocus={() => (showTooltip = true)}
+			onblur={() => (showTooltip = false)}
 			{disabled}
 			bind:this={buttonElement}
 			id={`button-${id}`}
 			aria-controls={hasAriaControls ? `panel-${id}` : undefined}
 		>
 			{#if icon}
-				<Icon type={icon} selected={!transient ? (isActive ? true : false) : false} {disabled} />
+				<Icon
+					type={icon}
+					selected={!transient ? (isActive ? true : false) : false}
+					{disabled}
+				/><span class="ons-u-vh">{label}</span>
 			{:else}
 				{label}
 			{/if}
@@ -111,6 +124,15 @@
 			</HelpModal>
 		{/if}
 	{/if}
+
+	{#if hasTooltip && showTooltip}
+		<div
+			class="toolbar-tooltip ons-u-fs-s"
+			class:toolbar-tooltip-vertical={$currentOrientation === "vertical"}
+		>
+			{label}
+		</div>
+	{/if}
 </div>
 
 <!-- 
@@ -164,6 +186,44 @@ button:hover:disabled {
 		/* opacity: 0.5; */
 		cursor: not-allowed;
 	}
+	.toolbar-tooltip {
+		position: absolute;
+		z-index: 10;
+		pointer-events: none;
+		text-align: center;
+		width: calc(100% + 40px);
+		top: calc(100% + 8px);
+		left: 50%;
+		transform: translate(-50%, 0);
+		color: var(--ons-color-page-light);
+		background: var(--ons-color-text);
+		padding: 4px;
+		border-radius: 4px;
+		box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.25);
+	}
+	.toolbar-tooltip-vertical {
+		left: calc(100% + 8px);
+		top: 50%;
+		transform: translate(0, -50%);
+	}
+	.toolbar-tooltip::before {
+		content: " ";
+		position: absolute;
+		bottom: calc(100% - 1px); /* At the top of the tooltip */
+		right: 50%;
+		border-width: 8px;
+		border-style: solid;
+		border-color: transparent transparent var(--ons-color-text) transparent;
+		pointer-events: none;
+		transform: translate(50%, 0);
+	}
+	.toolbar-tooltip-vertical::before {
+		bottom: 50%;
+		right: 100%;
+		border-width: 8px;
+		border-color: transparent var(--ons-color-text) transparent transparent;
+		transform: translate(0, 50%);
+	}
 
 	.selected {
 		background: #e9eff4;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@onsvisual/svelte-components",
-	"version": "1.1.17",
+	"version": "1.1.19",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run build:package && npm run build:docs",