Brunobkr/llama.cpp_AlgMor24_github

1<script lang="ts">2	import { boxWith, mergeProps } from "svelte-toolbelt";3	import type { MenuSubContentProps } from "../types.js";4	import { MenuOpenEvent, MenuContentState } from "../menu.svelte.js";5	import { SUB_CLOSE_KEYS } from "../utils.js";6	import { createId } from "../../../internal/create-id.js";7	import PopperLayer from "../../utilities/popper-layer/popper-layer.svelte";8	import { noop } from "../../../internal/noop.js";9	import { isHTMLElement } from "../../../internal/is.js";10	import { getFloatingContentCSSVars } from "../../../internal/floating-svelte/floating-utils.svelte.js";11	import PopperLayerForceMount from "../../utilities/popper-layer/popper-layer-force-mount.svelte";12 13	const uid = $props.id();14 15	let {16		id = createId(uid),17		ref = $bindable(null),18		children,19		child,20		loop = true,21		onInteractOutside = noop,22		forceMount = false,23		onEscapeKeydown = noop,24		interactOutsideBehavior = "defer-otherwise-close",25		escapeKeydownBehavior = "defer-otherwise-close",26		onOpenAutoFocus: onOpenAutoFocusProp = noop,27		onCloseAutoFocus: onCloseAutoFocusProp = noop,28		onFocusOutside = noop,29		side = "right",30		trapFocus = false,31		style,32		...restProps33	}: MenuSubContentProps = $props();34 35	const subContentState = MenuContentState.create({36		id: boxWith(() => id),37		loop: boxWith(() => loop),38		ref: boxWith(39			() => ref,40			(v) => (ref = v)41		),42		isSub: true,43		onCloseAutoFocus: boxWith(() => handleCloseAutoFocus),44	});45 46	function onkeydown(e: KeyboardEvent) {47		const isKeyDownInside = (e.currentTarget as HTMLElement).contains(e.target as HTMLElement);48		const isCloseKey = SUB_CLOSE_KEYS[49			subContentState.parentMenu.root.opts.dir.current50		].includes(e.key);51		if (isKeyDownInside && isCloseKey) {52			subContentState.parentMenu.onClose();53			const triggerNode = subContentState.parentMenu.triggerNode;54			triggerNode?.focus();55			e.preventDefault();56		}57	}58 59	const dataAttr = $derived(subContentState.parentMenu.root.getBitsAttr("sub-content"));60 61	const mergedProps = $derived(62		mergeProps(restProps, subContentState.props, {63			side,64			onkeydown,65			[dataAttr]: "",66		})67	);68 69	function handleOpenAutoFocus(e: Event) {70		onOpenAutoFocusProp(e);71		if (e.defaultPrevented) return;72		e.preventDefault();73		if (74			subContentState.parentMenu.root.isUsingKeyboard &&75			subContentState.parentMenu.contentNode76		) {77			MenuOpenEvent.dispatch(subContentState.parentMenu.contentNode);78		}79	}80 81	function handleCloseAutoFocus(e: Event) {82		onCloseAutoFocusProp(e);83		if (e.defaultPrevented) return;84		e.preventDefault();85	}86 87	function handleInteractOutside(e: PointerEvent) {88		onInteractOutside(e);89		if (e.defaultPrevented) return;90		subContentState.parentMenu.onClose();91	}92 93	function handleEscapeKeydown(e: KeyboardEvent) {94		onEscapeKeydown(e);95		if (e.defaultPrevented) return;96		subContentState.parentMenu.onClose();97	}98 99	function handleOnFocusOutside(e: FocusEvent) {100		onFocusOutside(e);101		if (e.defaultPrevented) return;102		if (!isHTMLElement(e.target)) return;103		if (e.target.id === subContentState.parentMenu.triggerNode?.id) return;104		const parentContent = subContentState.parentMenu.parentMenu?.contentNode;105		if (parentContent?.contains(e.target)) {106			subContentState.parentMenu.onClose();107			e.preventDefault();108			return;109		}110		// focus moved to a descendant sub-content rendered in a portal111		const subContentSelector = `[${subContentState.parentMenu.root.getBitsAttr("sub-content")}]`;112		if (e.target.closest(subContentSelector)) {113			e.preventDefault();114			return;115		}116		subContentState.parentMenu.onClose();117	}118</script>119 120{#if forceMount}121	<PopperLayerForceMount122		{...mergedProps}123		ref={subContentState.opts.ref}124		{interactOutsideBehavior}125		{escapeKeydownBehavior}126		onOpenAutoFocus={handleOpenAutoFocus}127		enabled={subContentState.parentMenu.opts.open.current}128		onInteractOutside={handleInteractOutside}129		onEscapeKeydown={handleEscapeKeydown}130		onFocusOutside={handleOnFocusOutside}131		preventScroll={false}132		{loop}133		{trapFocus}134		shouldRender={subContentState.shouldRender}135	>136		{#snippet popper({ props, wrapperProps })}137			{@const finalProps = mergeProps(138				props,139				mergedProps,140				{ style: getFloatingContentCSSVars("menu") },141				{ style }142			)}143			{#if child}144				{@render child({145					props: finalProps,146					wrapperProps,147					...subContentState.snippetProps,148				})}149			{:else}150				<div {...wrapperProps}>151					<div {...finalProps}>152						{@render children?.()}153					</div>154				</div>155			{/if}156		{/snippet}157	</PopperLayerForceMount>158{:else if !forceMount}159	<PopperLayer160		{...mergedProps}161		ref={subContentState.opts.ref}162		{interactOutsideBehavior}163		{escapeKeydownBehavior}164		onCloseAutoFocus={handleCloseAutoFocus}165		onOpenAutoFocus={handleOpenAutoFocus}166		open={subContentState.parentMenu.opts.open.current}167		onInteractOutside={handleInteractOutside}168		onEscapeKeydown={handleEscapeKeydown}169		onFocusOutside={handleOnFocusOutside}170		preventScroll={false}171		{loop}172		{trapFocus}173		shouldRender={subContentState.shouldRender}174	>175		{#snippet popper({ props, wrapperProps })}176			{@const finalProps = mergeProps(177				props,178				mergedProps,179				{ style: getFloatingContentCSSVars("menu") },180				{ style }181			)}182			{#if child}183				{@render child({184					props: finalProps,185					wrapperProps,186					...subContentState.snippetProps,187				})}188			{:else}189				<div {...wrapperProps}>190					<div {...finalProps}>191						{@render children?.()}192					</div>193				</div>194			{/if}195		{/snippet}196	</PopperLayer>197{/if}198