@r2digisolutions/ui 0.28.3 → 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 +74 -79
  2. package/package.json +1 -1
package/dist/components/container/DataTableShell/DataTableShell.svelte CHANGED
@@ -251,94 +251,89 @@
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-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"
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-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}
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-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)}
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-50/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 -->
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@r2digisolutions/ui",
3
- "version": "0.28.3",
3
+ "version": "0.28.4",
4
4
  "private": false,
5
5
  "packageManager": "bun@1.3.4",
6
6
  "publishConfig": {