refactor(svelte): replacing class:something by class={{something:...}}

AmadeusITGroup · Jan 9, 2025 · 9e63819 · 9e63819
1 parent 35d5c61
commit 9e63819
Show file tree

Hide file tree

Showing 23 changed files with 65 additions and 98 deletions.
diff --git a/demo/src/lib/layout/Dropdown.svelte b/demo/src/lib/layout/Dropdown.svelte
@@ -52,15 +52,14 @@
 		{@render buttonSnip()}
 	</button>
 	{#if open}
-		<div use:directive class="dropdown-menu dropdown-menu-{placement} position-absolute" class:show={open} data-bs-popper="absolute">
+		<div use:directive class={[`dropdown-menu dropdown-menu-${placement} position-absolute`, {show: open}]} data-bs-popper="absolute">
 			<!-- svelte-ignore a11y_no_static_element_interactions -->
 			{#each items as item, index (item.id)}
 				<svelte:element
 					this={item.tag}
 					use:giveFocus={index}
-					class="dropdown-item d-flex align-items-center"
+					class={['dropdown-item d-flex align-items-center', {active: item.isSelected}]}
 					href={item.tag === 'a' ? item.href : undefined}
-					class:active={item.isSelected}
 					aria-current={item.isSelected ? 'page' : false}
 					onpointerdown={onpointerDown}
 					onclick={() => {

diff --git a/demo/src/lib/layout/Header.svelte b/demo/src/lib/layout/Header.svelte
@@ -30,13 +30,17 @@
 </svelte:head>
 
 <header
-	class="au-header bg-light pt-3 px-4 px-lg-5 d-flex mb-4 align-items-center title"
-	class:au-rounded={!tabs.length}
-	class:au-rounded-header={tabs.length}
-	class:pb-5={tabs.length}
-	class:pb-3={!tabs.length}
+	class={[
+		'au-header bg-light pt-3 px-4 px-lg-5 d-flex mb-4 align-items-center title',
+		{
+			'au-rounded': !tabs.length,
+			'au-rounded-header': tabs.length,
+			'pb-5': tabs.length,
+			'pb-3': !tabs.length,
+		},
+	]}
 >
-	<div class="w-100 d-flex flex-wrap flex-row-reverse justify-content-between align-items-center" class:pb-3={tabs.length}>
+	<div class={['w-100 d-flex flex-wrap flex-row-reverse justify-content-between align-items-center', {'pb-3': tabs.length}]}>
 		<div class="d-flex ms-auto gap-2 justify-content-center">
 			{#if status === 'inprogress'}<span class="badge text-bg-warning">In progress</span>{/if}
 			{#if status === 'beta'}<span class="badge text-bg-info">Beta</span>{/if}
@@ -73,9 +77,8 @@
 					<a
 						href={`${$pathToRoot$}docs/${$selectedApiFramework$}${path}`}
 						role="tab"
-						class="nav-link au-nav-link-onlightbg"
+						class={['nav-link au-nav-link-onlightbg', {active: isActive}]}
 						aria-selected={isActive}
-						class:active={isActive}
 					>
 						{title}
 					</a>

diff --git a/demo/src/lib/layout/Sample.svelte b/demo/src/lib/layout/Sample.svelte
@@ -138,7 +138,7 @@
 			<ul class="nav nav-underline p-3 border-start border-end">
 				{#each files as file}
 					<li class="nav-item">
-						<button class="nav-link" class:active={selectedFileName === file} onclick={() => (selectedFileName = file)}>{file}</button>
+						<button class={['nav-link', {active: selectedFileName === file}]} onclick={() => (selectedFileName = file)}>{file}</button>
 					</li>
 				{/each}
 			</ul>

diff --git a/demo/src/lib/layout/playground/PlaygroundValue.svelte b/demo/src/lib/layout/playground/PlaygroundValue.svelte
@@ -22,8 +22,7 @@
 	{#if type === 'boolean'}
 		<div class="form-check form-switch me-1">
 			<input
-				class="form-check-input boolean"
-				class:empty={api.isEmpty}
+				class={['form-check-input boolean', {empty: api.isEmpty}]}
 				type="checkbox"
 				role="switch"
 				checked={valueOrDefault}
@@ -32,16 +31,16 @@
 			/>
 		</div>
 	{:else if type === 'number'}
-		<input class="number form-control" class:empty={api.isEmpty} {placeholder} value={api.value} oninput={api.onChange} aria-label={ariaLabel} />
+		<input class={['number form-control', {empty: api.isEmpty}]} {placeholder} value={api.value} oninput={api.onChange} aria-label={ariaLabel} />
 	{:else if type === 'function' && api.selectValues}
-		<select class="form-select function" class:empty={api.isEmpty} bind:value onchange={api.onChange} aria-label={ariaLabel}>
+		<select class={['form-select function', {empty: api.isEmpty}]} bind:value onchange={api.onChange} aria-label={ariaLabel}>
 			<option hidden disabled value={undefined} selected></option>
 			{#each api.selectValues as option}
 				<option value={option}>{getPropValueLabel(option)}</option>
 			{/each}
 		</select>
 	{:else}
-		<input class="form-control" class:empty={api.isEmpty} {placeholder} value={api.value} oninput={api.onChange} aria-label={ariaLabel} />
+		<input class={['form-control', {empty: api.isEmpty}]} {placeholder} value={api.value} oninput={api.onChange} aria-label={ariaLabel} />
 	{/if}
 </td>
 <td class="checkbox align-middle">

diff --git a/demo/src/routes/+layout.svelte b/demo/src/routes/+layout.svelte
@@ -111,23 +111,20 @@
 				<div class="align-items-center d-none d-md-flex gap-3">
 					<div class="d-flex align-items-center"></div>
 					<a
-						class="nav-link"
+						class={['nav-link', {active: $page.route.id?.startsWith('/docs/')}]}
 						href="{$pathToRoot$}docs/{$selectedFramework$}/getting-started/introduction"
-						class:active={$page.route.id?.startsWith('/docs/')}
 						aria-current={$page.route.id?.startsWith('/docs/') ? 'page' : undefined}>Documentation</a
 					>
 					{#if import.meta.env.API}
 						<a
-							class="nav-link"
+							class={['nav-link', {active: isApi}]}
 							href="{$pathToRoot$}api/{$selectedApiFramework$}/bootstrap/types"
-							class:active={isApi}
 							aria-current={isApi ? 'page' : undefined}>API</a
 						>
 					{/if}
 					<a
-						class="nav-link"
+						class={['nav-link', {active: $page.route.id?.startsWith('/blog/')}]}
 						href="{$pathToRoot$}blog/2024-12-06"
-						class:active={$page.route.id?.startsWith('/blog/')}
 						aria-current={$page.route.id?.startsWith('/blog/') ? 'page' : undefined}>Blog</a
 					>
 					<div class="vr my-1"></div>

diff --git a/demo/src/routes/menu/CollapsibleSection.svelte b/demo/src/routes/menu/CollapsibleSection.svelte
@@ -56,7 +56,7 @@
 		>{headerText}
 		<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 100 100" class="ms-1">
 			<rect class="horizontal" x="20" y="45" width="60" height="10" fill="currentColor" />
-			<rect class="vertical" class:expanded={$visible$} x="45" y="20" width="10" height="60" fill="currentColor" />
+			<rect class={['vertical', {expanded: $visible$}]} x="45" y="20" width="10" height="60" fill="currentColor" />
 		</svg>
 	</button>
 	<div class="contents" use:directive>

diff --git a/demo/src/routes/menu/MobileMenu.svelte b/demo/src/routes/menu/MobileMenu.svelte
@@ -30,27 +30,24 @@
 <MobileDialog title="AgnosUI" {open} {onclose}>
 	<nav class="navbar navbar-light flex-column align-items-stretch">
 		<a
-			class="nav-item nav-link"
+			class={['nav-item nav-link', {active: $page.route.id?.startsWith('/docs/')}]}
 			href="{$pathToRoot$}docs/{$selectedFramework$}/getting-started/introduction"
-			class:active={$page.route.id?.startsWith('/docs/')}
 			aria-current={$page.route.id?.startsWith('/docs/') ? 'page' : undefined}
 		>
 			Documentation
 		</a>
 		{#if import.meta.env.API}
 			<hr />
 			<a
-				class="nav-link"
+				class={['nav-link', {active: isApi}]}
 				href="{$pathToRoot$}api/{$selectedApiFramework$}/bootstrap/types"
-				class:active={isApi}
 				aria-current={isApi ? 'page' : undefined}>API</a
 			>
 		{/if}
 		<hr />
 		<a
-			class="nav-item nav-link"
+			class={['nav-item nav-link', {active: $page.route.id?.startsWith('/blog/')}]}
 			href="{$pathToRoot$}blog/2024-12-06"
-			class:active={$page.route.id?.startsWith('/blog/')}
 			aria-current={$page.route.id?.startsWith('/blog/') ? 'page' : undefined}
 		>
 			Blog

diff --git a/demo/src/routes/menu/SideMenu.svelte b/demo/src/routes/menu/SideMenu.svelte
@@ -125,8 +125,7 @@
 		{#if path}
 			{@const isCurrent = $page.url.pathname?.includes(path)}
 			<a
-				class="menu-item menu-item-sidenav d-flex align-items-center justify-content-between"
-				class:active={isCurrent}
+				class={['menu-item menu-item-sidenav d-flex align-items-center justify-content-between', {active: isCurrent}]}
 				aria-current={isCurrent ? 'page' : undefined}
 				href="{$pathToRoot$}{path}"
 			>
@@ -139,8 +138,7 @@
 					{#each submenu as { label, status, path, subpath, slug } (slug)}
 						{@const isCurrent = $page.url.pathname?.includes(path)}
 						<a
-							class="menu-item menu-item-sidenav d-flex align-items-center justify-content-between"
-							class:active={isCurrent}
+							class={['menu-item menu-item-sidenav d-flex align-items-center justify-content-between', {active: isCurrent}]}
 							aria-current={isCurrent ? 'page' : undefined}
 							href="{$pathToRoot$}{path}{subpath ?? ''}"
 						>

diff --git a/svelte/bootstrap/src/components/pagination/PaginationDefaultPages.svelte b/svelte/bootstrap/src/components/pagination/PaginationDefaultPages.svelte
@@ -7,7 +7,7 @@
 </script>
 
 {#each state.pages as page}
-	<li class="page-item" class:active={page === state.page} class:disabled={page === -1 || state.disabled}>
+	<li class={['page-item', {active: page === state.page, disabled: page === -1 || state.disabled}]}>
 		{#if page === -1}
 			<div class="page-link au-ellipsis" aria-hidden="true">
 				<Slot content={state.ellipsisLabel} props={widget} />

diff --git a/svelte/bootstrap/src/components/pagination/PaginationDefaultStructure.svelte b/svelte/bootstrap/src/components/pagination/PaginationDefaultStructure.svelte
@@ -10,7 +10,7 @@
 
 <ul class="au-pagination pagination {sizeClass} {state.className}">
 	{#if state.boundaryLinks}
-		<li class="page-item" class:disabled={state.previousDisabled}>
+		<li class={['page-item', {disabled: state.previousDisabled}]}>
 			<a class="page-link" use:directives.pageFirst>
 				<span aria-hidden="true">
 					<Slot content={state.firstPageLabel} props={widget} />
@@ -19,7 +19,7 @@
 		</li>
 	{/if}
 	{#if state.directionLinks}
-		<li class="page-item" class:disabled={state.previousDisabled}>
+		<li class={['page-item', {disabled: state.previousDisabled}]}>
 			<a class="page-link" use:directives.pagePrev>
 				<span aria-hidden="true">
 					<Slot content={state.previousPageLabel} props={widget} />
@@ -29,7 +29,7 @@
 	{/if}
 	<Slot content={state.pagesDisplay} props={widget} />
 	{#if state.directionLinks}
-		<li class="page-item" class:disabled={state.nextDisabled}>
+		<li class={['page-item', {disabled: state.nextDisabled}]}>
 			<a class="page-link" use:directives.pageNext>
 				<span aria-hidden="true">
 					<Slot content={state.nextPageLabel} props={widget} />
@@ -38,7 +38,7 @@
 		</li>
 	{/if}
 	{#if state.boundaryLinks}
-		<li class="page-item" class:disabled={state.nextDisabled}>
+		<li class={['page-item', {disabled: state.nextDisabled}]}>
 			<a class="page-link" use:directives.pageLast>
 				<span aria-hidden="true">
 					<Slot content={state.lastPageLabel} props={widget} />

diff --git a/svelte/bootstrap/src/components/progressbar/ProgressbarDefaultStructure.svelte b/svelte/bootstrap/src/components/progressbar/ProgressbarDefaultStructure.svelte
@@ -7,9 +7,11 @@
 
 <div class="progress" style:height={state.height}>
 	<div
-		class={`progress-bar ${state.type ? `text-bg-${state.type}` : ''}`}
-		class:progress-bar-striped={state.striped}
-		class:progress-bar-animated={state.animated}
+		class={[
+			'progress-bar',
+			state.type ? `text-bg-${state.type}` : '',
+			{'progress-bar-striped': state.striped, 'progress-bar-animated': state.animated},
+		]}
 		style:width={`${state.percentage}%`}
 	>
 		<Slot content={state.children} props={{state, api, directives}} />

diff --git a/svelte/bootstrap/src/components/select/Select.svelte b/svelte/bootstrap/src/components/select/Select.svelte
@@ -62,7 +62,7 @@
 		<ul use:hasFocusDirective use:floatingDirective use:menuAttributesDirective class="dropdown-menu show">
 			{#each state.visibleItems as itemContext (itemContext.id)}
 				{@const isHighlighted = itemContext === state.highlighted}
-				<li class="dropdown-item position-relative" class:text-bg-primary={isHighlighted} use:itemAttributesDirective={itemContext}>
+				<li class={['dropdown-item position-relative', {'text-bg-primary': isHighlighted}]} use:itemAttributesDirective={itemContext}>
 					<Slot content={state.itemLabel} props={{state, directives: widget.directives, api: widget.api, itemContext}} />
 				</li>
 			{/each}

diff --git a/svelte/bootstrap/src/components/toast/Toast.svelte b/svelte/bootstrap/src/components/toast/Toast.svelte
@@ -34,14 +34,7 @@
 {/snippet}
 
 {#if !state.hidden}
-	<div
-		class="toast"
-		class:toast-dismissible={state.dismissible}
-		class:d-flex={!state.header}
-		use:transitionDirective
-		use:autoHideDirective
-		use:bodyDirective
-	>
+	<div class={{'toast-dismissible': state.dismissible, 'd-flex': !state.header}} use:transitionDirective use:autoHideDirective use:bodyDirective>
 		<Slot content={state.structure} props={widget} />
 	</div>
 {/if}
diff --git a/svelte/demo/src/bootstrap/samples/accordion/CustomHeaders.route.svelte b/svelte/demo/src/bootstrap/samples/accordion/CustomHeaders.route.svelte
@@ -12,8 +12,7 @@
 		{#snippet structure({state, directives})}
 			<div
 				use:directives.headerDirective
-				class="accordion-button accordion-header custom-header justify-content-between"
-				class:collapsed={!state.visible}
+				class={['accordion-button accordion-header custom-header justify-content-between', {collapsed: !state.visible}]}
 				role="heading"
 				aria-level={2}
 			>
@@ -35,8 +34,7 @@
 		{#snippet structure({state, directives})}
 			<div
 				use:directives.headerDirective
-				class="accordion-button accordion-header custom-header justify-content-between"
-				class:collapsed={!state.visible}
+				class={['accordion-button accordion-header custom-header justify-content-between', {collapsed: !state.visible}]}
 				role="heading"
 				aria-level={2}
 			>
@@ -64,8 +62,7 @@
 		{#snippet structure({state, directives})}
 			<div
 				use:directives.headerDirective
-				class="accordion-header accordion-button custom-header justify-content-between"
-				class:collapsed={!state.visible}
+				class={['accordion-header accordion-button custom-header justify-content-between', {collapsed: !state.visible}]}
 				role="heading"
 				aria-level={2}
 			>

diff --git a/svelte/demo/src/bootstrap/samples/floatingUI/FloatingUI.route.svelte b/svelte/demo/src/bootstrap/samples/floatingUI/FloatingUI.route.svelte
@@ -42,8 +42,7 @@
 		<div
 			use:floatingDirective
 			data-popper-placement={fState.placement}
-			class="popover bs-popover-auto position-absolute"
-			class:invisible={fState.middlewareData?.hide?.referenceHidden}
+			class={['popover bs-popover-auto position-absolute', {invisible: fState.middlewareData?.hide?.referenceHidden}]}
 			role="tooltip"
 		>
 			<div class="popover-arrow position-absolute" use:arrowDirective></div>