svelte-tably 1.0.0-next.14 → 1.0.0-next.15
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.
- package/dist/table/Table.svelte +24 -20
- package/package.json +1 -1
package/dist/table/Table.svelte
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
</script>
|
|
14
14
|
|
|
15
15
|
<script lang="ts">
|
|
16
|
-
import { untrack, type Snippet } from 'svelte'
|
|
16
|
+
import { tick, untrack, type Snippet } from 'svelte'
|
|
17
17
|
import { fly } from 'svelte/transition'
|
|
18
18
|
import { sineInOut } from 'svelte/easing'
|
|
19
19
|
import reorder, { type ItemState } from 'runic-reorder'
|
|
@@ -231,6 +231,27 @@
|
|
|
231
231
|
|
|
232
232
|
|
|
233
233
|
let expandedRow = $state([]) as T[]
|
|
234
|
+
let expandTick = false
|
|
235
|
+
function toggleExpand(item: T, value?: boolean) {
|
|
236
|
+
if(expandTick) return
|
|
237
|
+
expandTick = true
|
|
238
|
+
requestAnimationFrame(() => expandTick = false)
|
|
239
|
+
|
|
240
|
+
let indexOf = expandedRow.indexOf(item)
|
|
241
|
+
if(value === undefined) {
|
|
242
|
+
value = indexOf === -1
|
|
243
|
+
}
|
|
244
|
+
if(!value) {
|
|
245
|
+
expandedRow.splice(indexOf, 1)
|
|
246
|
+
return
|
|
247
|
+
}
|
|
248
|
+
if(table.expandable?.options.multiple === true) {
|
|
249
|
+
expandedRow.push(item)
|
|
250
|
+
}
|
|
251
|
+
else {
|
|
252
|
+
expandedRow[0] = item
|
|
253
|
+
}
|
|
254
|
+
}
|
|
234
255
|
|
|
235
256
|
function addRowColumnEvents(
|
|
236
257
|
node: HTMLTableColElement,
|
|
@@ -394,23 +415,6 @@
|
|
|
394
415
|
|
|
395
416
|
{#snippet rowSnippet(item: T, itemState?: ItemState<T>)}
|
|
396
417
|
{@const index = itemState?.index ?? 0}
|
|
397
|
-
{@const toggleExpand = (value?: boolean) => {
|
|
398
|
-
let indexOf = expandedRow.indexOf(item)
|
|
399
|
-
if(value !== undefined) {
|
|
400
|
-
value = indexOf === -1
|
|
401
|
-
}
|
|
402
|
-
|
|
403
|
-
if(!value) {
|
|
404
|
-
expandedRow.splice(indexOf, 1)
|
|
405
|
-
return
|
|
406
|
-
}
|
|
407
|
-
if(table.expandable?.options.multiple === true) {
|
|
408
|
-
expandedRow.push(item)
|
|
409
|
-
}
|
|
410
|
-
else {
|
|
411
|
-
expandedRow[0] = item
|
|
412
|
-
}
|
|
413
|
-
}}
|
|
414
418
|
|
|
415
419
|
{@const ctx: RowCtx<T> = {
|
|
416
420
|
get index() {
|
|
@@ -434,7 +438,7 @@
|
|
|
434
438
|
return expandedRow.includes(item)
|
|
435
439
|
},
|
|
436
440
|
set expanded(value) {
|
|
437
|
-
toggleExpand(value)
|
|
441
|
+
toggleExpand(item, value)
|
|
438
442
|
}
|
|
439
443
|
}}
|
|
440
444
|
|
|
@@ -458,7 +462,7 @@
|
|
|
458
462
|
if(['INPUT', 'TEXTAREA', 'BUTTON', 'A'].includes(target.tagName)) {
|
|
459
463
|
return
|
|
460
464
|
}
|
|
461
|
-
|
|
465
|
+
ctx.expanded = !ctx.expanded
|
|
462
466
|
}
|
|
463
467
|
}}
|
|
464
468
|
>
|