Fix component deprecated errors
This commit is contained in:
parent
57ec5ca9aa
commit
bcbf7e3121
6 changed files with 6 additions and 177 deletions
|
|
@ -112,7 +112,7 @@
|
|||
aria-haspopup="true"
|
||||
style="color: {getTextColor(activeItem.variant)};"
|
||||
>
|
||||
<svelte:component this={activeItem.icon} class="nav-icon" />
|
||||
<activeItem.icon class="nav-icon" />
|
||||
<span>{activeItem.text}</span>
|
||||
<ChevronDownIcon class="chevron {isOpen ? 'open' : ''}" />
|
||||
</button>
|
||||
|
|
@ -126,7 +126,7 @@
|
|||
class:active={item === activeItem}
|
||||
onclick={() => (isOpen = false)}
|
||||
>
|
||||
<svelte:component this={item.icon} class="nav-icon" />
|
||||
<item.icon class="nav-icon" />
|
||||
<span>{item.text}</span>
|
||||
</a>
|
||||
{/each}
|
||||
|
|
|
|||
|
|
@ -17,7 +17,7 @@
|
|||
</script>
|
||||
|
||||
<a {href} class="pill {variant}" class:active>
|
||||
<svelte:component this={icon} />
|
||||
<icon />
|
||||
<span>{text}</span>
|
||||
</a>
|
||||
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@
|
|||
style="position: relative; overflow: hidden; background-color: {backgroundColor}; height: {containerHeight}; display: flex; justify-content: center; align-items: center;"
|
||||
>
|
||||
<div style="position: relative; width: 100%; height: 100%;">
|
||||
<svelte:component this={SVGComponent} />
|
||||
<SVGComponent />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -119,8 +119,7 @@
|
|||
onmouseenter={() => (hoveredIndex = index)}
|
||||
onmouseleave={() => (hoveredIndex = null)}
|
||||
>
|
||||
<svelte:component
|
||||
this={item.icon}
|
||||
<item.icon
|
||||
class="nav-icon {hoveredIndex === index ? 'animate' : ''}"
|
||||
/>
|
||||
<span>{item.text}</span>
|
||||
|
|
|
|||
|
|
@ -1,170 +0,0 @@
|
|||
<script lang="ts">
|
||||
interface Column<T> {
|
||||
key: string
|
||||
label: string
|
||||
render?: (item: T) => string
|
||||
component?: any
|
||||
width?: string
|
||||
}
|
||||
|
||||
interface Props<T> {
|
||||
data: T[]
|
||||
columns: Column<T>[]
|
||||
isLoading?: boolean
|
||||
emptyMessage?: string
|
||||
onRowClick?: (item: T) => void
|
||||
unstyled?: boolean
|
||||
}
|
||||
|
||||
let {
|
||||
data = [],
|
||||
columns = [],
|
||||
isLoading = false,
|
||||
emptyMessage = 'No data found',
|
||||
onRowClick,
|
||||
unstyled = false
|
||||
}: Props<any> = $props()
|
||||
|
||||
function getCellValue(item: any, column: Column<any>) {
|
||||
if (column.render) {
|
||||
return column.render(item)
|
||||
}
|
||||
|
||||
// Handle nested properties
|
||||
const keys = column.key.split('.')
|
||||
let value = item
|
||||
for (const key of keys) {
|
||||
value = value?.[key]
|
||||
}
|
||||
|
||||
return value
|
||||
}
|
||||
</script>
|
||||
|
||||
<div class="data-table-wrapper" class:unstyled>
|
||||
{#if isLoading}
|
||||
<div class="loading">
|
||||
<div class="spinner"></div>
|
||||
<p>Loading...</p>
|
||||
</div>
|
||||
{:else if data.length === 0}
|
||||
<div class="empty-state">
|
||||
<p>{emptyMessage}</p>
|
||||
</div>
|
||||
{:else}
|
||||
<table class="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
{#each columns as column}
|
||||
<th style={column.width ? `width: ${column.width}` : ''}>
|
||||
{column.label}
|
||||
</th>
|
||||
{/each}
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{#each data as item}
|
||||
<tr class:clickable={!!onRowClick} onclick={() => onRowClick?.(item)}>
|
||||
{#each columns as column}
|
||||
<td>
|
||||
{#if column.component}
|
||||
<svelte:component this={column.component} {item} />
|
||||
{:else}
|
||||
{getCellValue(item, column)}
|
||||
{/if}
|
||||
</td>
|
||||
{/each}
|
||||
</tr>
|
||||
{/each}
|
||||
</tbody>
|
||||
</table>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style lang="scss">
|
||||
.data-table-wrapper {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
|
||||
|
||||
&.unstyled {
|
||||
border-radius: 0;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
|
||||
.loading {
|
||||
padding: $unit-8x;
|
||||
text-align: center;
|
||||
color: $grey-40;
|
||||
|
||||
.spinner {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border: 3px solid $grey-80;
|
||||
border-top-color: $primary-color;
|
||||
border-radius: 50%;
|
||||
margin: 0 auto $unit-2x;
|
||||
animation: spin 0.8s linear infinite;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: $unit-8x;
|
||||
text-align: center;
|
||||
color: $grey-40;
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.data-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
|
||||
thead {
|
||||
background-color: $grey-95;
|
||||
border-bottom: 1px solid $grey-85;
|
||||
}
|
||||
|
||||
th {
|
||||
padding: $unit-3x $unit-4x;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
font-size: 0.875rem;
|
||||
color: $grey-30;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
tbody tr {
|
||||
border-bottom: 1px solid $grey-90;
|
||||
transition: background-color 0.2s ease;
|
||||
|
||||
&:hover {
|
||||
background-color: $grey-97;
|
||||
}
|
||||
|
||||
&.clickable {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
}
|
||||
|
||||
td {
|
||||
padding: $unit-4x;
|
||||
color: $grey-20;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -246,7 +246,7 @@
|
|||
<h4>{field.label}</h4>
|
||||
</div>
|
||||
{:else if field.type === 'custom' && field.component}
|
||||
<svelte:component this={field.component} {...field.props} bind:data />
|
||||
<field.component {...field.props} bind:data />
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Reference in a new issue