noph-ui 0.4.1 → 0.4.3

package/dist/menu/Menu.svelte

@@ -2,7 +2,14 @@
 	import { generateUUIDv4 } from '../utils.js'
 	import type { MenuProps } from './types.ts'
 
-	let { anchor, children, ...attributes }: MenuProps = $props()
+	let {
+		anchor,
+		children,
+		element = $bindable(),
+		showPopover = $bindable(),
+		hidePopover = $bindable(),
+		...attributes
+	}: MenuProps = $props()
 
 	let clientWidth = $state(0)
 	let clientHeight = $state(0)
@@ -10,30 +17,38 @@
 	let innerWidth = $state(0)
 	let scrollY = $state(0)
 	let scrollX = $state(0)
-	let popoverElement: HTMLDivElement | undefined = $state()
 	let anchorId = anchor?.style.getPropertyValue('anchor-name')
+
+	showPopover = () => {
+		element?.showPopover()
+	}
+
+	hidePopover = () => {
+		element?.hidePopover()
+	}
+
 	const refreshValues = () => {
-		if (popoverElement && anchor && !('anchorName' in document.documentElement.style)) {
+		if (element && anchor && !('anchorName' in document.documentElement.style)) {
 			const anchorRect = anchor.getBoundingClientRect()
 			if (anchorRect.bottom + clientHeight > innerHeight && anchorRect.top - clientHeight > 0) {
-				popoverElement.style.top = `${anchorRect.top - clientHeight - 2}px`
+				element.style.top = `${anchorRect.top - clientHeight - 2}px`
 			} else {
-				popoverElement.style.top = `${anchorRect.bottom + 2}px`
+				element.style.top = `${anchorRect.bottom + 2}px`
 			}
 			const left = anchorRect.left + anchorRect.width / 2 - clientWidth / 2
 			if (left > innerWidth - clientWidth) {
-				popoverElement.style.left = `${innerWidth - clientWidth - 8}px`
+				element.style.left = `${innerWidth - clientWidth - 8}px`
 			} else if (left < 8) {
-				popoverElement.style.left = '8px'
+				element.style.left = '8px'
 			} else {
-				popoverElement.style.left = `${anchorRect.left + anchorRect.width / 2 - clientWidth / 2}px`
+				element.style.left = `${anchorRect.left + anchorRect.width / 2 - clientWidth / 2}px`
 			}
 		}
 	}
 	$effect(refreshValues)
 
 	$effect(() => {
-		if (anchor && popoverElement) {
+		if (anchor && element) {
 			if (!('anchorName' in document.documentElement.style)) {
 				anchor.addEventListener('click', () => {
 					refreshValues()
@@ -47,7 +62,7 @@
 				)
 			} else if (!anchorId) {
 				const generatedId = `--${generateUUIDv4()}`
-				popoverElement.style.setProperty('position-anchor', generatedId)
+				element.style.setProperty('position-anchor', generatedId)
 				anchor.style.setProperty('anchor-name', generatedId)
 			}
 		}
@@ -63,7 +78,7 @@
 />
 
 <div
-	bind:this={popoverElement}
+	bind:this={element}
 	bind:clientWidth
 	bind:clientHeight
 	{...attributes}

package/dist/menu/Menu.svelte.d.ts

@@ -1,4 +1,4 @@
 import type { MenuProps } from './types.ts';
-declare const Menu: import("svelte").Component<MenuProps, {}, "">;
+declare const Menu: import("svelte").Component<MenuProps, {}, "element" | "showPopover" | "hidePopover">;
 type Menu = ReturnType<typeof Menu>;
 export default Menu;

package/dist/menu/types.d.ts

@@ -3,6 +3,9 @@ import type { HTMLAttributes, HTMLAnchorAttributes, HTMLButtonAttributes } from
 export interface MenuProps extends HTMLAttributes<HTMLDivElement> {
     children: Snippet;
     anchor?: HTMLElement | undefined;
+    showPopover?: () => void;
+    hidePopover?: () => void;
+    element?: HTMLDivElement;
 }
 interface ButtonProps extends HTMLButtonAttributes {
     selected?: boolean;

package/dist/text-field/TextField.svelte

@@ -16,19 +16,19 @@
 		noAsterisk = false,
 		variant = 'filled',
 		placeholder = ' ',
+		element = $bindable(),
 		...attributes
 	}: TextFieldProps = $props()
 
-	let contentEl: HTMLInputElement | HTMLTextAreaElement | undefined = $state()
 	let errorTextRaw = $state(errorText)
 
 	$effect(() => {
-		if (contentEl) {
-			contentEl.form?.addEventListener('reset', () => {
+		if (element) {
+			element.form?.addEventListener('reset', () => {
 				error = false
 				value = ''
 			})
-			contentEl.addEventListener('invalid', (event) => {
+			element.addEventListener('invalid', (event) => {
 				event.preventDefault()
 				const { currentTarget } = event as Event & {
 					currentTarget: HTMLInputElement | HTMLTextAreaElement
@@ -42,7 +42,7 @@
 				}
 			})
 
-			contentEl.addEventListener('change', (event) => {
+			element.addEventListener('change', (event) => {
 				const { currentTarget } = event as Event & {
 					currentTarget: HTMLInputElement | HTMLTextAreaElement
 				}
@@ -68,7 +68,7 @@
 		if (attributes.disabled) {
 			return
 		}
-		contentEl?.focus()
+		element?.focus()
 	}}
 >
 	<div
@@ -117,7 +117,7 @@
 							<textarea
 								{...attributes}
 								bind:value
-								bind:this={contentEl}
+								bind:this={element}
 								class="input"
 								aria-label={label}
 								{placeholder}
@@ -133,7 +133,7 @@
 								<input
 									{...attributes}
 									bind:value
-									bind:this={contentEl}
+									bind:this={element}
 									class="input"
 									{placeholder}
 									aria-label={label}

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

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

@@ -12,6 +12,7 @@ export interface InputFieldProps extends Omit<HTMLInputAttributes, 'class'> {
     start?: Snippet;
     end?: Snippet;
     noAsterisk?: boolean;
+    element?: HTMLInputElement;
 }
 export interface TextAreaFieldProps extends Omit<HTMLTextareaAttributes, 'class'> {
     label?: string;
@@ -25,5 +26,6 @@ export interface TextAreaFieldProps extends Omit<HTMLTextareaAttributes, 'class'
     start?: Snippet;
     end?: Snippet;
     noAsterisk?: boolean;
+    element?: HTMLTextAreaElement;
 }
 export type TextFieldProps = InputFieldProps | TextAreaFieldProps;

package/package.json

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