noph-ui 0.18.3 → 0.18.4

package/dist/chip/ChipSet.svelte

@@ -1,20 +1,35 @@
 <script lang="ts">
-	import type { ChipSetProps } from './types.ts'
+	import { setContext } from 'svelte'
+	import type { ChipSetContext, ChipSetProps } from './types.ts'
 
 	let { children, ...attributes }: ChipSetProps = $props()
+	let chipSet: ChipSetContext = $state({
+		chips: [],
+	})
+	setContext('chipSet', chipSet)
 </script>
 
 {#if children}
-	<div class={['np-chip-set', attributes.class]} style={attributes.style} role="toolbar">
+	<div
+		class={['np-chip-set', chipSet.chips.length > 0 && 'np-chip-set-has-chips', attributes.class]}
+		style={attributes.style}
+		role="toolbar"
+	>
 		{@render children()}
 	</div>
 {/if}
 
 <style>
+	.np-chip-set-has-chips {
+		margin-right: 0.5rem;
+		padding-block: 2px;
+		padding-right: 2px;
+	}
 	.np-chip-set {
 		display: flex;
 		flex-wrap: wrap;
 		gap: 0.5rem;
+		overflow: auto;
 		align-items: center;
 		min-width: 0;
 	}

package/dist/chip/FilterChip.svelte

@@ -3,7 +3,8 @@
 	import CheckIcon from '../icons/CheckIcon.svelte'
 	import CloseIcon from '../icons/CloseIcon.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
-	import type { FilterChipProps } from './types.ts'
+	import { getContext, onMount } from 'svelte'
+	import type { ChipSetContext, FilterChipProps } from './types.ts'
 
 	let {
 		selected = $bindable(),
@@ -23,6 +24,17 @@
 	}: FilterChipProps = $props()
 
 	let chipLabel: HTMLLabelElement | undefined = $state()
+	let chipSet: ChipSetContext = getContext('chipSet')
+
+	onMount(() => {
+		chipSet.chips.push({ label: label, name: name, value: value })
+		return () => {
+			const index = chipSet.chips.findIndex((chip) => chip.value === value)
+			if (index !== -1) {
+				chipSet.chips.splice(index, 1)
+			}
+		}
+	})
 
 	$effect(() => {
 		if (group && value) {

package/dist/chip/InputChip.svelte

@@ -2,8 +2,8 @@
 	import IconButton from '../button/IconButton.svelte'
 	import CloseIcon from '../icons/CloseIcon.svelte'
 	import Ripple from '../ripple/Ripple.svelte'
-	import { onMount } from 'svelte'
-	import type { InputChipProps } from './types.ts'
+	import { getContext, onMount } from 'svelte'
+	import type { ChipSetContext, InputChipProps } from './types.ts'
 
 	let {
 		selected = $bindable(),
@@ -20,6 +20,7 @@
 
 	let chipLabel: HTMLDivElement | undefined = $state()
 	let visible = $state(false)
+	let chipSet: ChipSetContext = getContext('chipSet')
 
 	onMount(() => {
 		const observer = new IntersectionObserver((entries) => {
@@ -34,8 +35,15 @@
 		if (element) {
 			observer.observe(element)
 		}
+		chipSet.chips.push({ label: label, name: name, value: value })
 
-		return () => observer.disconnect()
+		return () => {
+			observer.disconnect()
+			const index = chipSet.chips.findIndex((chip) => chip.value === value)
+			if (index !== -1) {
+				chipSet.chips.splice(index, 1)
+			}
+		}
 	})
 </script>
 

package/dist/chip/types.d.ts

@@ -46,4 +46,11 @@ export interface InputChipProps extends HTMLAttributes<HTMLDivElement> {
         currentTarget: EventTarget & HTMLButtonElement;
     }) => void;
 }
+export interface ChipSetContext {
+    chips: {
+        label: string;
+        name: string | undefined;
+        value: string | number | undefined;
+    }[];
+}
 export {};

package/dist/text-field/TextField.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { isFirstInvalidControlInForm } from './report-validity.js'
-	import type { FocusEventHandler } from 'svelte/elements'
+	import type { FocusEventHandler, EventHandler } from 'svelte/elements'
 	import type { TextFieldProps } from './types.ts'
 
 	let {
@@ -22,6 +22,8 @@
 		reportValidity = $bindable(),
 		checkValidity = $bindable(),
 		children,
+		oninput,
+		oninvalid,
 		onfocus,
 		onblur,
 		focused = $bindable(false),
@@ -65,15 +67,22 @@
 		value = ''
 	}
 
-	const onInput = () => {
+	const onInputEvent = (
+		event: Event & {
+			currentTarget: (EventTarget & HTMLInputElement) | HTMLTextAreaElement
+		},
+	) => {
 		doValidity = true
+		;(oninput as EventHandler)?.(event)
 	}
 
-	const onInvalid = (event: Event) => {
-		event.preventDefault()
-		const { currentTarget } = event as Event & {
+	const onInvalidEvent = (
+		event: Event & {
 			currentTarget: HTMLInputElement | HTMLTextAreaElement
-		}
+		},
+	) => {
+		event.preventDefault()
+		const { currentTarget } = event
 		errorRaw = true
 		if (errorText === '') {
 			errorTextRaw = currentTarget.validationMessage
@@ -81,34 +90,43 @@
 		if (focusOnInvalid && isFirstInvalidControlInForm(currentTarget.form, currentTarget)) {
 			currentTarget.focus()
 		}
-	}
-
-	const onBlur = () => {
-		queueMicrotask(() => {
-			if (doValidity && inputElement) {
-				focusOnInvalid = false
-				if (checkValidity()) {
-					errorRaw = error
-					errorTextRaw = errorText
-				}
-				focusOnInvalid = true
+		;(oninvalid as EventHandler)?.(event)
+	}
+
+	const onFocusEvent = (
+		event: FocusEvent & {
+			currentTarget: EventTarget & (HTMLInputElement | HTMLTextAreaElement)
+		},
+	) => {
+		focused = true
+		;(onfocus as FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>)?.(event)
+	}
+
+	const onBlurEvent = (
+		event: FocusEvent & {
+			currentTarget: EventTarget & (HTMLInputElement | HTMLTextAreaElement)
+		},
+	) => {
+		focused = false
+		if (doValidity) {
+			focusOnInvalid = false
+			if (checkValidity()) {
+				errorRaw = error
+				errorTextRaw = errorText
 			}
-		})
+		} else {
+			focusOnInvalid = true
+		}
+		;(onblur as FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>)?.(event)
 	}
 
 	$effect(() => {
 		if (inputElement) {
 			inputElement.form?.addEventListener('reset', onReset)
-			inputElement.addEventListener('input', onInput)
-			inputElement.addEventListener('invalid', onInvalid)
-			inputElement.addEventListener('blur', onBlur)
 		}
 		return () => {
 			if (inputElement) {
-				inputElement.removeEventListener('reset', onReset)
-				inputElement.removeEventListener('input', onInput)
-				inputElement.removeEventListener('invalid', onInvalid)
-				inputElement.removeEventListener('blur', onBlur)
+				inputElement.form?.removeEventListener('reset', onReset)
 			}
 		}
 	})
@@ -192,14 +210,10 @@
 							<textarea
 								aria-label={label}
 								{...attributes}
-								onfocus={(event) => {
-									focused = true
-									;(onfocus as FocusEventHandler<HTMLTextAreaElement>)?.(event)
-								}}
-								onblur={(event) => {
-									focused = false
-									;(onblur as FocusEventHandler<HTMLTextAreaElement>)?.(event)
-								}}
+								oninput={onInputEvent}
+								oninvalid={onInvalidEvent}
+								onfocus={onFocusEvent}
+								onblur={onBlurEvent}
 								bind:value
 								bind:this={inputElement}
 								class="input"
@@ -218,14 +232,10 @@
 									{...attributes}
 									bind:value
 									bind:this={inputElement}
-									onfocus={(event) => {
-										focused = true
-										;(onfocus as FocusEventHandler<HTMLInputElement>)?.(event)
-									}}
-									onblur={(event) => {
-										focused = false
-										;(onblur as FocusEventHandler<HTMLInputElement>)?.(event)
-									}}
+									oninput={onInputEvent}
+									oninvalid={onInvalidEvent}
+									onfocus={onFocusEvent}
+									onblur={onBlurEvent}
 									class="input"
 									aria-invalid={errorRaw}
 								/>
@@ -514,7 +524,6 @@
 	}
 	:global(.content .input-wrapper .np-chip-set) {
 		margin-top: calc(var(--top-space, 1.5rem) - 4px);
-		margin-right: 0.5rem;
 	}
 
 	.prefix {

package/package.json

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