ui: Refactor data-attrs constants, enum for bool strings (#27002)
* refactor: Data-attribute constants + boolean string enum * refactor: Use CSS class string constants * refactor: Address review comments
This commit is contained in:
@@ -1,6 +1,7 @@
|
||||
<script lang="ts">
|
||||
import { ChevronLeft, ChevronRight, Settings } from '@lucide/svelte';
|
||||
import { ICON_CLASS_DEFAULT } from '$lib/constants';
|
||||
import { ICON_CLASS_DEFAULT, UI_DATA_ATTRS } from '$lib/constants';
|
||||
import { BooleanString } from '$lib/enums';
|
||||
import { useScrollCarousel } from '$lib/hooks/use-scroll-carousel.svelte';
|
||||
import type { SettingsSection, SettingsSectionTitle } from '$lib/types';
|
||||
import { onMount, tick } from 'svelte';
|
||||
@@ -20,7 +21,9 @@
|
||||
await tick();
|
||||
|
||||
if (carousel.scrollContainer) {
|
||||
const activeTab = carousel.scrollContainer.querySelector('[data-active="true"]');
|
||||
const activeTab = carousel.scrollContainer.querySelector(
|
||||
`[${UI_DATA_ATTRS.ACTIVE}="${BooleanString.TRUE}"]`
|
||||
);
|
||||
|
||||
if (activeTab instanceof HTMLElement) {
|
||||
carousel.scrollToCenter(activeTab);
|
||||
@@ -66,7 +69,7 @@
|
||||
)
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground'}"
|
||||
data-active={isActive(section)}
|
||||
{...{ [UI_DATA_ATTRS.ACTIVE]: isActive(section) }}
|
||||
href={getHref(section)}
|
||||
onclick={(e: MouseEvent) => {
|
||||
carousel.scrollToCenter(e.currentTarget as HTMLElement);
|
||||
@@ -82,7 +85,7 @@
|
||||
)
|
||||
? 'bg-accent text-accent-foreground'
|
||||
: 'text-muted-foreground'}"
|
||||
data-active={isActive(section)}
|
||||
{...{ [UI_DATA_ATTRS.ACTIVE]: isActive(section) }}
|
||||
onclick={(e: MouseEvent) => {
|
||||
onSectionChange?.(section.title);
|
||||
carousel.scrollToCenter(e.currentTarget as HTMLElement);
|
||||
|
||||
Reference in New Issue
Block a user