@r2digisolutions/ui 0.28.2 → 0.28.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/components/container/DataTableShell/DataTableShell.svelte +83 -88
  2. package/package.json +1 -1
package/dist/components/container/DataTableShell/DataTableShell.svelte CHANGED
@@ -251,111 +251,106 @@
251
251
  <div class="min-w-full">
252
252
  <!-- HEADER -->
253
253
  <div
254
- class="sticky top-0 z-10 border-b border-neutral-200/80 bg-gradient-to-br from-neutral-100/95 via-neutral-50/95 to-neutral-100/95 text-[11px] tracking-wide text-neutral-500 uppercase backdrop-blur-xl dark:border-neutral-800/80 dark:bg-gradient-to-br dark:from-neutral-950/95 dark:via-neutral-950/95 dark:to-neutral-900/95 dark:text-neutral-400"
254
+ class="sticky top-0 z-10 grid w-max items-center gap-0 border-b border-neutral-200/80 bg-neutral-50/95 text-[11px] tracking-wide text-neutral-500 uppercase backdrop-blur-xl dark:border-neutral-800/80 dark:bg-neutral-950/95 dark:text-neutral-400"
255
+ style={`grid-template-columns:${gridTemplate}`}
255
256
  >
256
- <div class="grid w-max items-center gap-0" style={`grid-template-columns:${gridTemplate}`}>
257
- {#if controller.multiSelect}
258
- <div
259
- class={`sticky top-0 left-0 z-20 flex items-center justify-center border-r border-neutral-200/60 bg-neutral-100/95 px-2 ${
260
- density === 'compact' ? 'py-1.5' : 'py-2.5'
261
- } backdrop-blur-xl dark:border-neutral-800/70 dark:bg-neutral-950/95`}
262
- >
263
- <input
264
- type="checkbox"
265
- bind:this={selectAllEl}
266
- onchange={handleToggleAll}
267
- class="h-3.5 w-3.5 rounded border-neutral-300 bg-neutral-50 text-purple-500 focus:ring-purple-500 dark:border-neutral-600 dark:bg-neutral-900"
268
- data-stop-row-toggle="true"
269
- />
270
- </div>
271
- {/if}
257
+ {#if controller.multiSelect}
258
+ <div
259
+ class={`sticky top-0 left-0 z-20 flex items-center justify-center border-r border-neutral-200/60 bg-neutral-50/95 px-2 ${
260
+ density === 'compact' ? 'py-1.5' : 'py-2.5'
261
+ } backdrop-blur-xl dark:border-neutral-800/70 dark:bg-neutral-950/95`}
262
+ >
263
+ <input
264
+ type="checkbox"
265
+ bind:this={selectAllEl}
266
+ onchange={handleToggleAll}
267
+ class="h-3.5 w-3.5 rounded border-neutral-300 bg-neutral-50 text-purple-500 focus:ring-purple-500 dark:border-neutral-600 dark:bg-neutral-900"
268
+ data-stop-row-toggle="true"
269
+ />
270
+ </div>
271
+ {/if}
272
272
 
273
- {#each controller.mainColumns as col (col.id)}
274
- {@const sticky = stickyOffsets[col.id as keyof T]}
273
+ {#each controller.mainColumns as col (col.id)}
274
+ {@const sticky = stickyOffsets[col.id as keyof T]}
275
+ <div
276
+ role="columnheader"
277
+ tabindex="0"
278
+ class={`relative flex items-center border-r border-neutral-200/60 px-3 ${
279
+ density === 'compact' ? 'py-1.5' : 'py-2.5'
280
+ } text-left text-[11px] font-semibold text-neutral-600 dark:border-neutral-800/70 dark:text-neutral-300 ${
281
+ col.sticky === 'left'
282
+ ? 'z-10 bg-neutral-50/95 shadow-[1px_0_0_rgba(15,23,42,0.15)] backdrop-blur-xl dark:bg-neutral-950/95'
283
+ : ''
284
+ }`}
285
+ style={col.sticky === 'left' && sticky?.left !== undefined
286
+ ? `position: sticky; left: ${sticky.left}px; top: 0;`
287
+ : ''}
288
+ ondblclick={() => col.sortable && controller.toggleSort(col.id as keyof T)}
289
+ >
290
+ <button
291
+ type="button"
292
+ class="flex w-full items-center justify-between gap-1"
293
+ onclick={() => col.sortable && controller.toggleSort(col.id as keyof T)}
294
+ data-stop-row-toggle="true"
295
+ >
296
+ {#if headerCell}
297
+ {@render headerCell(col)}
298
+ {:else}
299
+ <span class="line-clamp-1">{col.label}</span>
300
+ {/if}
301
+ {#if col.sortable}
302
+ <span
303
+ class={`text-[9px] ${
304
+ controller.sortColumn === col.id
305
+ ? 'text-purple-500'
306
+ : 'text-neutral-300 dark:text-neutral-600'
307
+ }`}
308
+ >
309
+ {#if controller.sortColumn === col.id}
310
+ {controller.sortDirection === 'asc' ? '▲' : '▼'}
311
+ {:else}
312
+ ↕
313
+ {/if}
314
+ </span>
315
+ {/if}
316
+ </button>
275
317
  <div
276
318
  role="columnheader"
277
319
  tabindex="0"
278
- class={`relative flex items-center border-r border-neutral-200/60 px-3 ${
279
- density === 'compact' ? 'py-1.5' : 'py-2.5'
280
- } text-left text-[11px] font-semibold text-neutral-600 dark:border-neutral-800/70 dark:text-neutral-300 ${
281
- col.sticky === 'left'
282
- ? 'z-10 bg-neutral-100/95 shadow-[1px_0_0_rgba(15,23,42,0.15)] backdrop-blur-xl dark:bg-neutral-950/95'
283
- : ''
284
- }`}
285
- style={col.sticky === 'left' && sticky?.left !== undefined
286
- ? `position: sticky; left: ${sticky.left}px; top: 0;`
287
- : ''}
288
- ondblclick={() => col.sortable && controller.toggleSort(col.id as keyof T)}
320
+ class="absolute inset-y-1 right-0 flex w-2 cursor-col-resize items-center justify-end"
321
+ onmousedown={(e) =>
322
+ onResizeDown(e, col.id as keyof T, e.currentTarget.parentElement as HTMLDivElement)}
323
+ data-stop-row-toggle="true"
289
324
  >
290
- <button
291
- type="button"
292
- class="flex w-full items-center justify-between gap-1"
293
- onclick={() => col.sortable && controller.toggleSort(col.id as keyof T)}
294
- data-stop-row-toggle="true"
295
- >
296
- {#if headerCell}
297
- {@render headerCell(col)}
298
- {:else}
299
- <span class="line-clamp-1">{col.label}</span>
300
- {/if}
301
- {#if col.sortable}
302
- <span
303
- class={`text-[9px] ${
304
- controller.sortColumn === col.id
305
- ? 'text-purple-500'
306
- : 'text-neutral-300 dark:text-neutral-600'
307
- }`}
308
- >
309
- {#if controller.sortColumn === col.id}
310
- {controller.sortDirection === 'asc' ? '▲' : '▼'}
311
- {:else}
312
- ↕
313
- {/if}
314
- </span>
315
- {/if}
316
- </button>
317
325
  <div
318
- role="columnheader"
319
- tabindex="0"
320
- class="absolute inset-y-1 right-0 flex w-2 cursor-col-resize items-center justify-end"
321
- onmousedown={(e) =>
322
- onResizeDown(
323
- e,
324
- col.id as keyof T,
325
- e.currentTarget.parentElement as HTMLDivElement
326
- )}
327
- data-stop-row-toggle="true"
328
- >
329
- <div
330
- class="h-6 w-[2px] rounded-full bg-neutral-200 hover:bg-neutral-400 dark:bg-neutral-700 dark:hover:bg-neutral-400"
331
- ></div>
332
- </div>
326
+ class="h-6 w-[2px] rounded-full bg-neutral-200 hover:bg-neutral-400 dark:bg-neutral-700 dark:hover:bg-neutral-400"
327
+ ></div>
333
328
  </div>
334
- {/each}
329
+ </div>
330
+ {/each}
335
331
 
336
- <div
337
- class={`sticky top-0 right-0 z-20 flex items-center justify-end border-l border-neutral-200/60 bg-neutral-100/95 px-2 ${
338
- density === 'compact' ? 'py-1.5' : 'py-2.5'
339
- } backdrop-blur-xl dark:border-neutral-800/70 dark:bg-neutral-950/95`}
340
- ></div>
341
- </div>
332
+ <div
333
+ class={`sticky top-0 right-0 z-20 flex items-center justify-end border-l border-neutral-200/60 bg-neutral-50/95 px-2 ${
334
+ density === 'compact' ? 'py-1.5' : 'py-2.5'
335
+ } backdrop-blur-xl dark:border-neutral-800/70 dark:bg-neutral-950/95`}
336
+ ></div>
342
337
  </div>
343
338
 
344
339
  <!-- BODY -->
345
340
  {#if controller.currentRows.length}
346
341
  {#if viewMode === 'list'}
347
- <div class="divide-y divide-neutral-200/80 dark:divide-neutral-800/80">
342
+ <div class="bg-white dark:bg-neutral-950">
348
343
  {#each controller.currentRows as row, index (rowIdFor(row, index))}
349
344
  {@const id = rowIdFor(row, index)}
350
345
 
351
346
  <div class="group relative">
352
- <!-- Fila principal como GRID ancho completo -->
347
+ <!-- Fila principal -->
353
348
  <div
354
349
  role="row"
355
350
  tabindex="0"
356
- class={`relative grid w-max items-stretch bg-neutral-50/60 text-xs text-neutral-800 transition-colors odd:bg-neutral-50/70 even:bg-neutral-100/60 hover:bg-neutral-100/90 dark:bg-neutral-950/70 dark:text-neutral-100 dark:odd:bg-neutral-950/70 dark:even:bg-neutral-900/70 dark:hover:bg-neutral-900/80 ${
351
+ class={`relative grid w-max items-stretch border-b border-neutral-200/80 bg-white text-xs text-neutral-800 transition-colors even:bg-neutral-50 hover:bg-neutral-100 dark:border-neutral-800/80 dark:bg-neutral-950 dark:even:bg-neutral-900 dark:hover:bg-neutral-900 ${
357
352
  controller.selectedIds.has(id)
358
- ? 'bg-purple-50/60 ring-1 ring-purple-400/60 dark:bg-purple-950/25'
353
+ ? 'bg-purple-50/60 ring-1 ring-purple-400/60 hover:bg-purple-50/60 dark:bg-purple-950/25 dark:hover:bg-purple-950/25'
359
354
  : ''
360
355
  }`}
361
356
  style={`grid-template-columns:${gridTemplate}`}
@@ -364,7 +359,7 @@
364
359
  >
365
360
  {#if controller.multiSelect}
366
361
  <div
367
- class={`sticky left-0 z-10 flex items-center justify-center border-r border-neutral-200/60 bg-neutral-50/95 px-2 ${
362
+ class={`sticky left-0 z-10 flex items-center justify-center border-r border-neutral-200/60 bg-white/95 px-2 ${
368
363
  density === 'compact' ? 'py-1.5' : 'py-2.5'
369
364
  } backdrop-blur-xl dark:border-neutral-800/70 dark:bg-neutral-950/95`}
370
365
  data-stop-row-toggle="true"
@@ -386,7 +381,7 @@
386
381
  density === 'compact' ? 'py-1.5' : 'py-2.5'
387
382
  } dark:border-neutral-800/70 ${
388
383
  col.sticky === 'left'
389
- ? 'z-[5] bg-neutral-50/95 shadow-[1px_0_0_rgba(15,23,42,0.10)] backdrop-blur-xl dark:bg-neutral-950/95'
384
+ ? 'z-[5] bg-white/95 shadow-[1px_0_0_rgba(15,23,42,0.10)] backdrop-blur-xl dark:bg-neutral-950/95'
390
385
  : ''
391
386
  }`}
392
387
  style={col.sticky === 'left' && sticky?.left !== undefined
@@ -417,7 +412,7 @@
417
412
  {/each}
418
413
 
419
414
  <div
420
- class={`sticky right-0 z-10 flex items-center justify-end border-l border-neutral-200/60 bg-neutral-50/95 px-2 ${
415
+ class={`sticky right-0 z-10 flex items-center justify-end border-l border-neutral-200/60 bg-white/95 px-2 ${
421
416
  density === 'compact' ? 'py-1.5' : 'py-2.5'
422
417
  } backdrop-blur-xl dark:border-neutral-800/70 dark:bg-neutral-950/95`}
423
418
  data-stop-row-toggle="true"
@@ -456,7 +451,7 @@
456
451
 
457
452
  {#if controller.overflowColumns.length}
458
453
  <div
459
- class="border-t border-dashed border-neutral-200/70 bg-neutral-50/80 px-3 py-2 text-[11px] text-neutral-600 dark:border-neutral-800/70 dark:bg-neutral-950/60 dark:text-neutral-300"
454
+ class="border-b border-dashed border-neutral-200/70 bg-white px-3 py-2 text-[11px] text-neutral-600 dark:border-neutral-800/70 dark:bg-neutral-950 dark:text-neutral-300"
460
455
  >
461
456
  {#if overflow}
462
457
  {@render overflow(row)}
@@ -484,7 +479,7 @@
484
479
 
485
480
  {#if rowCollapse && openRows.has(id)}
486
481
  <div
487
- class="border-t border-dashed border-neutral-200/70 bg-neutral-50/90 px-3 py-3 text-[11px] text-neutral-700 dark:border-neutral-800/70 dark:bg-neutral-950/70 dark:text-neutral-100"
482
+ class="border-b border-dashed border-neutral-200/70 bg-white px-3 py-3 text-[11px] text-neutral-700 dark:border-neutral-800/70 dark:bg-neutral-950 dark:text-neutral-100"
488
483
  >
489
484
  {@render rowCollapse(row)}
490
485
  </div>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@r2digisolutions/ui",
3
- "version": "0.28.2",
3
+ "version": "0.28.4",
4
4
  "private": false,
5
5
  "packageManager": "bun@1.3.4",
6
6
  "publishConfig": {