noph-ui 0.17.13 → 0.18.1

package/dist/autocomplete/AutoComplete.svelte

@@ -2,7 +2,6 @@
 	import Item from '../list/Item.svelte'
 	import Menu from '../menu/Menu.svelte'
 	import VirtualList from '../select/VirtualList.svelte'
-	import { tick } from 'svelte'
 	import type { AutoCompleteOption, AutoCompleteProps } from './types.ts'
 	import TextField from '../text-field/TextField.svelte'
 
@@ -11,56 +10,39 @@
 		value = $bindable(),
 		variant = 'filled',
 		element = $bindable(),
-		onchange,
-		oninput,
+		populated,
 		reportValidity = $bindable(),
 		checkValidity = $bindable(),
 		clampMenuWidth = false,
 		children,
-		optionsFilter = (option) => {
-			return !value || option.value.includes(value)
-		},
+		optionsFilter,
 		oncomplete = (option) => {
-			value = option.value
-			console.log(menuElement)
+			value = option.label
+			finalPopulated = populated
 			menuElement?.hidePopover()
 		},
-		onblur,
+		onkeydown,
 		onclick,
+		oninput,
+		focused = $bindable(false),
 		...attributes
 	}: AutoCompleteProps = $props()
 
 	const uid = $props.id()
-	let displayOptions = $derived(options.filter(optionsFilter))
+	let defaultOptionsFilter = (option: AutoCompleteOption) => {
+		return !value || option.label.includes(value)
+	}
+	let displayOptions = $derived(options.filter(optionsFilter || defaultOptionsFilter))
 	let useVirtualList = $derived(displayOptions.length > 4000)
 	let clientWidth = $state(0)
-	let menuOpen = $state(false)
 	let menuElement: HTMLDivElement | undefined = $state()
-
-	const handleOptionSelect = (event: Event, option: AutoCompleteOption) => {
-		value = option.value
-		menuElement?.hidePopover()
-		event.preventDefault()
-		// tick().then(() => {
-		// 	if (checkValidity?.()) {
-		// 		errorRaw = error
-		// 		errorTextRaw = errorText
-		// 	}
-		// 	element?.dispatchEvent(new Event('change', { bubbles: true }))
-		// })
-	}
-	$effect(() => {
-		if (displayOptions.length) {
-			menuElement?.showPopover()
-		} else {
-			menuElement?.hidePopover()
-		}
-	})
+	let finalPopulated = $state(populated)
 </script>
 
 {#snippet item(option: AutoCompleteOption)}
 	<Item
-		onclick={() => {
+		onclick={(event) => {
+			event.preventDefault()
 			oncomplete(option)
 			element?.focus()
 		}}
@@ -78,44 +60,57 @@
 				oncomplete(option)
 			}
 			if (event.key === 'Tab') {
+				finalPopulated = populated
 				menuElement?.hidePopover()
 			}
 		}}
 		variant="button"
-		>{option.value}
+		>{option.label}
 	</Item>
 {/snippet}
 
 <TextField
 	{variant}
+	type="text"
+	populated={finalPopulated}
 	bind:clientWidth
 	bind:value
+	bind:focused
 	style="anchor-name:--{uid};"
-	onclick={async (
-		event: MouseEvent & {
-			currentTarget: EventTarget & HTMLInputElement
-		},
-	) => {
-		if (displayOptions.length) {
-			menuElement?.showPopover()
-		}
+	onclick={(event) => {
+		finalPopulated = true
+		menuElement?.showPopover()
 		onclick?.(event)
 	}}
-	onfocus={() => {
-		if (displayOptions.length) {
-			menuElement?.showPopover()
+	oninput={(event) => {
+		menuElement?.showPopover()
+		oninput?.(event)
+	}}
+	onkeydown={(event) => {
+		if (event.key === 'Tab' || event.key === 'Escape') {
+			menuElement?.hidePopover()
+		} else {
+			if (event.key === 'ArrowDown' || event.key === 'ArrowUp') {
+				event.preventDefault()
+				finalPopulated = true
+				menuElement?.showPopover()
+				;(menuElement?.firstElementChild?.firstElementChild as HTMLElement)?.focus()
+			}
 		}
+		onkeydown?.(event)
 	}}
 	bind:reportValidity
 	bind:checkValidity
 	bind:element
-	{...attributes}>{@render children?.()}</TextField
->
+	{...attributes}
+	>{@render children?.()}
+</TextField>
 <Menu
 	style="position-anchor:--{uid};{clampMenuWidth || useVirtualList
 		? 'width'
 		: 'min-width'}:{clientWidth}px"
 	role="listbox"
+	class={[!displayOptions.length && 'np-auto-complete-empty']}
 	--np-menu-justify-self="none"
 	--np-menu-position-area="bottom span-right"
 	--np-menu-margin="2px 0"
@@ -123,13 +118,6 @@
 		? 'var(--np-outlined-select-text-field-container-shape)'
 		: 'var(--np-filled-select-text-field-container-shape)'}
 	anchor={element}
-	ontoggle={({ newState }) => {
-		if (newState === 'open') {
-			menuOpen = true
-		} else {
-			menuOpen = false
-		}
-	}}
 	bind:element={menuElement}
 >
 	{#if useVirtualList}
@@ -144,3 +132,10 @@
 		{/each}
 	{/if}
 </Menu>
+
+<style>
+	:global(.np-auto-complete-empty) {
+		display: none !important;
+		opacity: 0 !important;
+	}
+</style>

package/dist/autocomplete/AutoComplete.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { AutoCompleteProps } from './types.ts';
-declare const AutoComplete: import("svelte").Component<AutoCompleteProps, {}, "element" | "value" | "reportValidity" | "checkValidity">;
+declare const AutoComplete: import("svelte").Component<AutoCompleteProps, {}, "element" | "value" | "reportValidity" | "checkValidity" | "focused">;
 type AutoComplete = ReturnType<typeof AutoComplete>;
 export default AutoComplete;

package/dist/autocomplete/types.d.ts

@@ -1,6 +1,7 @@
 import type { InputFieldProps } from '../types.ts';
 export interface AutoCompleteOption {
-    value: string;
+    value?: string | number;
+    label: string;
     disabled?: boolean;
     selected?: boolean | undefined | null;
 }

package/dist/chip/types.d.ts

@@ -41,7 +41,7 @@ export interface InputChipProps extends HTMLAttributes<HTMLDivElement> {
     ariaLabelRemove?: string;
     element?: HTMLDivElement;
     name?: string;
-    value?: string;
+    value?: string | number;
     onremove?: (event: MouseEvent & {
         currentTarget: EventTarget & HTMLButtonElement;
     }) => void;

package/dist/tabs/Tab.svelte

@@ -35,11 +35,16 @@
 		const oldIndicatorRect = oldIndicator?.getBoundingClientRect()
 		if (oldIndicatorRect) {
 			const newIndicator = el.querySelector<HTMLElement>('.np-indicator')
-			newIndicator?.style.setProperty(
-				'--np-tab-indicator-start',
-				`${oldIndicatorRect.x - newIndicator.getBoundingClientRect().x}px`,
-			)
-			newIndicator?.style.setProperty('--np-tab-indicator-width', `${oldIndicatorRect.width}px`)
+			if (newIndicator) {
+				newIndicator.style.setProperty(
+					'--np-tab-indicator-start',
+					`${oldIndicatorRect.x - newIndicator.getBoundingClientRect().x}px`,
+				)
+				newIndicator.style.setProperty(
+					'--np-tab-indicator-scale',
+					`${oldIndicatorRect.width / newIndicator.clientWidth}`,
+				)
+			}
 		}
 		activeTab.value = value
 		activeTab.node = el
@@ -99,12 +104,7 @@
 		role="tab"
 		bind:this={element}
 		{href}
-		class={[
-			'np-tab',
-			variant === 'secondary' && 'np-tab-secondary',
-			isActive && 'np-tab-content-active',
-			attributes.class,
-		]}
+		class={['np-tab', isActive && 'np-tab-content-active', attributes.class]}
 		onclick={onClick}
 		onkeydown={onKeyDown}
 	>
@@ -117,12 +117,7 @@
 		tabindex={isActive ? 0 : -1}
 		role="tab"
 		bind:this={element}
-		class={[
-			'np-tab',
-			variant === 'secondary' && 'np-tab-secondary',
-			isActive && 'np-tab-content-active',
-			attributes.class,
-		]}
+		class={['np-tab', isActive && 'np-tab-content-active', attributes.class]}
 		onclick={onClick}
 		onkeydown={onKeyDown}
 	>
@@ -188,17 +183,16 @@
 	}
 	.np-tab-content-active .np-indicator {
 		opacity: 1;
+		transform-origin: left center;
 		animation: slide 0.3s ease-in-out;
 	}
 
 	@keyframes slide {
 		0% {
-			width: var(--np-tab-indicator-width, 100%);
-			transform: translateX(var(--np-tab-indicator-start));
+			transform: translateX(var(--np-tab-indicator-start)) scaleX(var(--np-tab-indicator-scale, 1));
 		}
 		100% {
-			width: 100%;
-			transform: translateX(0);
+			transform: translateX(0) scaleX(1);
 		}
 	}
 

package/dist/text-field/TextField.svelte

@@ -24,6 +24,7 @@
 		children,
 		onfocus,
 		onblur,
+		focused = $bindable(false),
 		clientWidth = $bindable(),
 		clientHeight = $bindable(),
 		...attributes
@@ -33,7 +34,6 @@
 	let errorTextRaw: string = $state(errorText)
 	let focusOnInvalid = $state(true)
 	let doValidity = $state(false)
-	let focused = $state(false)
 
 	reportValidity = () => {
 		if (inputElement) {

package/dist/text-field/TextField.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { TextFieldProps } from './types.ts';
-declare const TextField: import("svelte").Component<TextFieldProps, {}, "element" | "value" | "reportValidity" | "checkValidity" | "inputElement" | "clientWidth" | "clientHeight">;
+declare const TextField: import("svelte").Component<TextFieldProps, {}, "element" | "value" | "reportValidity" | "checkValidity" | "inputElement" | "clientWidth" | "clientHeight" | "focused">;
 type TextField = ReturnType<typeof TextField>;
 export default TextField;

package/dist/text-field/types.d.ts

@@ -18,6 +18,7 @@ interface FieldProps {
     checkValidity?: () => boolean;
     clientWidth?: number;
     clientHeight?: number;
+    focused?: boolean;
 }
 export interface InputFieldProps extends HTMLInputAttributes, FieldProps {
     type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url' | 'datetime-local';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.17.13",
+  "version": "0.18.1",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {