svelte-toolkit/sui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

adjust styling

Browse Source
This commit is contained in:
Elijah Duffy
2025-07-04 03:17:43 -07:00
parent e6e58ab106
commit 104d99661c
4 changed files with 21 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/lib/Combobox.svelte
View File

@@ -169,13 +169,17 @@
const highlightedElement = pickerContainer.querySelector(`[data-id="${highlighted.value}"]`); const highlightedElement = pickerContainer.querySelector(`[data-id="${highlighted.value}"]`);
if (!highlightedElement) return; if (!highlightedElement) return;
const rect = highlightedElement.getBoundingClientRect(); const containerTop = pickerContainer.scrollTop;
const pickerRect = pickerContainer.getBoundingClientRect(); const containerHeight = pickerContainer.clientHeight;
const elementOffsetTop = (highlightedElement as HTMLElement).offsetTop;
const elementHeight = (highlightedElement as HTMLElement).offsetHeight;
if (rect.top - 20 < pickerRect.top) { const offset = 8; // px, adjust as needed
pickerContainer.scrollTop -= pickerRect.top - rect.top + 20;
} else if (rect.bottom + 20 > pickerRect.bottom) { if (elementOffsetTop < containerTop + offset) {
pickerContainer.scrollTop += rect.bottom - pickerRect.bottom + 20; pickerContainer.scrollTop = Math.max(elementOffsetTop - offset, 0);
} else if (elementOffsetTop + elementHeight > containerTop + containerHeight - offset) {
pickerContainer.scrollTop = elementOffsetTop + elementHeight - containerHeight + offset;
} }
}; };

4
src/lib/InputGroup.svelte
View File

@@ -9,4 +9,6 @@
let { class: classList, children }: Props = $props(); let { class: classList, children }: Props = $props();
</script> </script>
<div class={['mt-4 flex min-w-80 items-end gap-2', classList]}>{@render children?.()}</div> <div class={['mt-4 flex min-w-80 items-center justify-start gap-2', classList]}>
{@render children?.()}
</div>

2
src/lib/Label.svelte
View File

@@ -19,7 +19,7 @@
'transition-fontColor block', 'transition-fontColor block',
error && !bigError error && !bigError
? 'mt-1 text-sm font-normal text-red-500' ? 'mt-1 text-sm font-normal text-red-500'
: 'text-sui-text dark:text-sui-background mb-2 text-base font-medium', : 'text-sui-text dark:text-sui-background mb-1 text-base font-medium',
bigError && 'text-red-500!', bigError && 'text-red-500!',
classValue classValue
]} ]}

12
src/lib/RadioGroup.svelte
View File

@@ -29,11 +29,11 @@
const isVert = $derived(group.orientation === 'vertical'); const isVert = $derived(group.orientation === 'vertical');
</script> </script>
<div class={['flex w-fit flex-col', classValue]} {...group.root}> <div class={[classValue]} {...group.root}>
{#if label} {#if label}
<Label {...group.label}>{label}</Label> <Label {...group.label}>{label}</Label>
{/if} {/if}
<div class="flex {isVert ? 'flex-col gap-1' : 'flex-row gap-3'}"> <div class="flex {isVert ? 'flex-col gap-1' : 'flex-row justify-center gap-3'}">
{#each options as opt} {#each options as opt}
{@const item = group.getItem(getValue(opt))} {@const item = group.getItem(getValue(opt))}
<div <div
@@ -74,7 +74,9 @@
onvalidate={(e) => (valid = e.detail.valid)} onvalidate={(e) => (valid = e.detail.valid)}
/> />
<div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}> {#if required}
<Label for={group.label.for} error>{invalidMessage}</Label> <div class={['opacity-0 transition-opacity', !valid && 'opacity-100']}>
</div> <Label for={group.label.for} error>{invalidMessage}</Label>
</div>
{/if}
</div> </div>