noph-ui 0.17.10 → 0.17.12

package/dist/autocomplete/AutoComplete.svelte

@@ -0,0 +1,146 @@
+<script lang="ts">
+	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'
+
+	let {
+		options = [],
+		value = $bindable(),
+		variant = 'filled',
+		element = $bindable(),
+		onchange,
+		oninput,
+		reportValidity = $bindable(),
+		checkValidity = $bindable(),
+		clampMenuWidth = false,
+		children,
+		optionsFilter = (option) => {
+			return !value || option.value.includes(value)
+		},
+		oncomplete = (option) => {
+			value = option.value
+			console.log(menuElement)
+			menuElement?.hidePopover()
+		},
+		onblur,
+		onclick,
+		...attributes
+	}: AutoCompleteProps = $props()
+
+	const uid = $props.id()
+	let displayOptions = $derived(options.filter(optionsFilter))
+	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()
+		}
+	})
+</script>
+
+{#snippet item(option: AutoCompleteOption)}
+	<Item
+		onclick={() => {
+			oncomplete(option)
+			element?.focus()
+		}}
+		disabled={option.disabled}
+		onkeydown={(event) => {
+			if (event.key === 'ArrowDown') {
+				;(event.currentTarget?.nextElementSibling as HTMLElement)?.focus()
+				event.preventDefault()
+			}
+			if (event.key === 'ArrowUp') {
+				;(event.currentTarget?.previousElementSibling as HTMLElement)?.focus()
+				event.preventDefault()
+			}
+			if (event.key === 'Enter') {
+				oncomplete(option)
+			}
+			if (event.key === 'Tab') {
+				menuElement?.hidePopover()
+			}
+		}}
+		variant="button"
+		>{option.value}
+	</Item>
+{/snippet}
+
+<TextField
+	{variant}
+	bind:clientWidth
+	bind:value
+	style="anchor-name:--{uid};"
+	onclick={async (
+		event: MouseEvent & {
+			currentTarget: EventTarget & HTMLInputElement
+		},
+	) => {
+		if (displayOptions.length) {
+			menuElement?.showPopover()
+		}
+		onclick?.(event)
+	}}
+	onfocus={() => {
+		if (displayOptions.length) {
+			menuElement?.showPopover()
+		}
+	}}
+	bind:reportValidity
+	bind:checkValidity
+	bind:element
+	{...attributes}>{@render children?.()}</TextField
+>
+<Menu
+	style="position-anchor:--{uid};{clampMenuWidth || useVirtualList
+		? 'width'
+		: 'min-width'}:{clientWidth}px"
+	role="listbox"
+	--np-menu-justify-self="none"
+	--np-menu-position-area="bottom span-right"
+	--np-menu-margin="2px 0"
+	--np-menu-container-shape={variant === 'outlined'
+		? '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}
+		<VirtualList height="250px" itemHeight={56} items={displayOptions}>
+			{#snippet row(option)}
+				{@render item(option)}
+			{/snippet}
+		</VirtualList>
+	{:else}
+		{#each displayOptions as option, index (index)}
+			{@render item(option)}
+		{/each}
+	{/if}
+</Menu>

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

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

package/dist/autocomplete/index.d.ts

@@ -0,0 +1 @@
+export { default as AutoComplete } from './AutoComplete.svelte';

package/dist/autocomplete/index.js

@@ -0,0 +1 @@
+export { default as AutoComplete } from './AutoComplete.svelte';

package/dist/autocomplete/types.d.ts

@@ -0,0 +1,12 @@
+import type { InputFieldProps } from '../types.ts';
+export interface AutoCompleteOption {
+    value: string;
+    disabled?: boolean;
+    selected?: boolean | undefined | null;
+}
+export interface AutoCompleteProps extends Omit<InputFieldProps, 'clientWidth' | 'clientHeight'> {
+    options: AutoCompleteOption[];
+    optionsFilter?: (option: AutoCompleteOption) => boolean;
+    oncomplete?: (option: AutoCompleteOption) => void;
+    clampMenuWidth?: boolean;
+}

package/dist/autocomplete/types.js

@@ -0,0 +1 @@
+export {};

package/dist/checkbox/Checkbox.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { CheckboxProps } from './types.ts';
-declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "element" | "group" | "indeterminate" | "checked">;
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "element" | "group" | "checked" | "indeterminate">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/index.d.ts

@@ -1,3 +1,4 @@
+export * from './autocomplete/index.js';
 export * from './button/index.js';
 export * from './card/index.js';
 export * from './checkbox/index.js';

package/dist/index.js

@@ -1,3 +1,4 @@
+export * from './autocomplete/index.js';
 export * from './button/index.js';
 export * from './card/index.js';
 export * from './checkbox/index.js';

package/dist/menu/Menu.svelte

@@ -8,6 +8,7 @@
 		showPopover = $bindable(),
 		hidePopover = $bindable(),
 		style,
+		popover = 'auto',
 		...attributes
 	}: MenuProps = $props()
 
@@ -119,7 +120,7 @@
 		menuOpen = newState === 'open'
 		attributes.ontoggle?.(event)
 	}}
-	popover="auto"
+	{popover}
 	class={['np-menu-container', attributes.class]}
 >
 	<div class="np-menu">

package/dist/tabs/Tab.svelte

@@ -15,7 +15,19 @@
 		...attributes
 	}: TabProps = $props()
 	let activeTab: { value: string | number; node: HTMLElement } = getContext('activeTab')
-	let isActive = $derived(activeTab.value === value)
+	let element: HTMLElement | undefined = $state()
+	let isActive = $state(activeTab.value === value)
+
+	$effect(() => {
+		if (activeTab.value === value) {
+			if (element && element !== activeTab.node) {
+				setTabActive(element)
+			}
+			isActive = true
+		} else {
+			isActive = false
+		}
+	})
 
 	const setTabActive = (el: HTMLElement) => {
 		const oldTab = activeTab.node as HTMLElement | undefined
@@ -27,10 +39,12 @@
 				'--np-tab-indicator-start',
 				`${oldIndicatorRect.x - newIndicator.getBoundingClientRect().x}px`,
 			)
+			newIndicator?.style.setProperty('--np-tab-indicator-width', `${oldIndicatorRect.width}px`)
 		}
 		activeTab.value = value
 		activeTab.node = el
 	}
+
 	const setActiveTab = (el: HTMLElement) => {
 		if (isActive) {
 			activeTab.node = el
@@ -83,6 +97,7 @@
 		{...attributes}
 		tabindex={isActive ? 0 : -1}
 		role="tab"
+		bind:this={element}
 		{href}
 		class={[
 			'np-tab',
@@ -101,6 +116,7 @@
 		{...attributes}
 		tabindex={isActive ? 0 : -1}
 		role="tab"
+		bind:this={element}
 		class={[
 			'np-tab',
 			variant === 'secondary' && 'np-tab-secondary',
@@ -177,9 +193,11 @@
 
 	@keyframes slide {
 		0% {
+			width: var(--np-tab-indicator-width, 100%);
 			transform: translateX(var(--np-tab-indicator-start));
 		}
 		100% {
+			width: 100%;
 			transform: translateX(0);
 		}
 	}

package/dist/tabs/Tabs.svelte

@@ -13,6 +13,9 @@
 	$effect(() => {
 		value = active.value
 	})
+	$effect(() => {
+		active.value = value
+	})
 </script>
 
 <div {...attributes} class={[attributes.class]}>

package/dist/text-field/TextField.svelte

@@ -24,6 +24,8 @@
 		children,
 		onfocus,
 		onblur,
+		clientWidth = $bindable(),
+		clientHeight = $bindable(),
 		...attributes
 	}: TextFieldProps = $props()
 
@@ -95,6 +97,7 @@
 	})
 </script>
 
+<!-- svelte-ignore a11y_click_events_have_key_events -->
 <div
 	style={(variant === 'outlined'
 		? '--_label-text-color:var(--np-outlined-text-field-label-text-color);--top-space:1rem;--bottom-space:1rem;--floating-label-top:-0.5rem;--floating-label-left:-2.25rem;--_focus-outline-width:3px;'
@@ -104,11 +107,16 @@
 				(children ? '--top-space:2rem;--bottom-space:1rem;' : '')) + style}
 	class={['text-field', attributes.class]}
 	bind:this={element}
+	bind:clientWidth
+	bind:clientHeight
 	role="button"
-	tabindex="-1"
+	tabindex="0"
 	onfocus={() => {
 		inputElement?.focus()
 	}}
+	onclick={() => {
+		inputElement?.click()
+	}}
 >
 	<div
 		class="field"
@@ -403,6 +411,7 @@
 
 	.input-wrapper {
 		display: flex;
+		flex-wrap: wrap;
 		align-items: baseline;
 		min-width: 0;
 	}
@@ -484,7 +493,7 @@
 		margin-bottom: var(--bottom-space, 0.5rem);
 	}
 	.content .input-wrapper .input {
-		min-width: 0;
+		min-width: 20px;
 	}
 	:global(.content .input-wrapper .np-chip-set) {
 		margin-top: calc(var(--top-space, 1.5rem) - 4px);

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">;
+declare const TextField: import("svelte").Component<TextFieldProps, {}, "element" | "value" | "reportValidity" | "checkValidity" | "inputElement" | "clientWidth" | "clientHeight">;
 type TextField = ReturnType<typeof TextField>;
 export default TextField;

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

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

package/dist/types.d.ts

@@ -1,3 +1,4 @@
+export * from './autocomplete/types.js';
 export * from './button/types.ts';
 export * from './card/types.ts';
 export * from './checkbox/types.ts';

package/dist/types.js

@@ -1,3 +1,4 @@
+export * from './autocomplete/types.js';
 export * from './button/types.ts';
 export * from './card/types.ts';
 export * from './checkbox/types.ts';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "noph-ui",
-  "version": "0.17.10",
+  "version": "0.17.12",
   "license": "MIT",
   "homepage": "https://noph.dev",
   "repository": {
@@ -53,27 +53,27 @@
     "svelte": "^5.32.1"
   },
   "devDependencies": {
-    "@eslint/js": "^9.28.0",
+    "@eslint/js": "^9.29.0",
     "@material/material-color-utilities": "^0.3.0",
-    "@playwright/test": "^1.52.0",
+    "@playwright/test": "^1.53.0",
     "@sveltejs/adapter-vercel": "^5.7.2",
-    "@sveltejs/kit": "^2.21.2",
+    "@sveltejs/kit": "^2.21.5",
     "@sveltejs/package": "^2.3.11",
     "@sveltejs/vite-plugin-svelte": "^5.1.0",
     "@types/eslint": "^9.6.1",
-    "eslint": "^9.28.0",
+    "eslint": "^9.29.0",
     "eslint-config-prettier": "^10.1.5",
-    "eslint-plugin-svelte": "^3.9.1",
+    "eslint-plugin-svelte": "^3.9.2",
     "globals": "^16.2.0",
     "prettier": "^3.5.3",
     "prettier-plugin-svelte": "^3.4.0",
     "publint": "^0.3.12",
-    "svelte": "^5.33.16",
+    "svelte": "^5.34.3",
     "svelte-check": "^4.2.1",
     "typescript": "^5.8.3",
-    "typescript-eslint": "^8.33.1",
+    "typescript-eslint": "^8.34.1",
     "vite": "^6.3.5",
-    "vitest": "^3.2.2"
+    "vitest": "^3.2.3"
   },
   "svelte": "./dist/index.js",
   "types": "./dist/index.d.ts",