@stonecrop/atable 0.34.0 → 0.35.0

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.
@@ -1,5 +1,6 @@
1
1
 
2
2
  .atable-cell {
3
+ background-color: inherit;
3
4
  border-radius: 0px;
4
5
  box-sizing: border-box;
5
6
  margin: 0px;
@@ -207,7 +208,7 @@
207
208
  vertical-align: middle;
208
209
  white-space: nowrap;
209
210
  border-top: 1px solid var(--sc-row-border-color);
210
- background: white;
211
+ background: inherit;
211
212
  user-select: none;
212
213
  position: relative;
213
214
  }
@@ -291,7 +292,7 @@
291
292
  z-index: 100;
292
293
  min-width: 10rem;
293
294
  padding: 0.25rem 0;
294
- background: white;
295
+ background: var(--sc-overlay-background);
295
296
  border: 1px solid var(--sc-row-border-color);
296
297
  border-left: 4px solid var(--sc-row-border-color);
297
298
  border-radius: 0;
@@ -347,7 +348,23 @@
347
348
  }
348
349
 
349
350
  .atable-row {
350
- background-color: white;
351
+ background-color: var(--sc-cell-background);
352
+ }
353
+ .atable--zebra tbody .atable-row:nth-child(odd) {
354
+ background-color: var(--sc-row-color-zebra-light);
355
+ }
356
+ .atable--zebra tbody .atable-row:nth-child(even) {
357
+ background-color: var(--sc-row-color-zebra-dark);
358
+ }
359
+ .atable--zebra tbody .atable-row:nth-child(odd) > td {
360
+ background-color: var(--sc-row-color-zebra-light);
361
+ }
362
+ .atable--zebra tbody .atable-row:nth-child(even) > td {
363
+ background-color: var(--sc-row-color-zebra-dark);
364
+ }
365
+ .atable--zebra tbody .atable-row > td:focus,
366
+ .atable--zebra tbody .atable-row > td:focus-within {
367
+ background-color: var(--sc-focus-cell-background);
351
368
  }
352
369
  .atable-row-clickable {
353
370
  cursor: pointer;
@@ -391,13 +408,24 @@
391
408
  padding-top: var(--sc-atable-row-padding);
392
409
  padding-bottom: var(--sc-atable-row-padding);
393
410
  }
394
- .atable-expanded-row {
395
- border-left: 2px solid var(--sc-row-border-color);
411
+ .expansion-index {
412
+ border-top: 1px solid var(--sc-row-border-color);
396
413
  }
397
414
  .atable-expanded-content {
415
+ box-sizing: border-box;
416
+ width: 100%;
398
417
  border-top: 1px solid var(--sc-row-border-color);
418
+ border-right: 1px solid var(--sc-row-border-color);
419
+ border-bottom: 1px solid var(--sc-row-border-color);
420
+ border-left: 4px solid var(--sc-row-border-color);
399
421
  padding: 1.5rem;
400
422
  }
423
+ .atable-expanded-content > * {
424
+ display: block;
425
+ width: 100%;
426
+ max-width: 100%;
427
+ box-sizing: border-box;
428
+ }
401
429
  /* sticky cells in modified rows should be a solid color to properly hide non-sticky cells */
402
430
  .atable-row:has(td.cell-modified) > td.sticky-column,
403
431
  .atable-row:has(td.cell-modified) > th.sticky-column,
@@ -406,9 +434,9 @@
406
434
  background: var(--sc-cell-changed-color);
407
435
  }
408
436
 
409
- .atable-row.changed-row-gradient[data-v-f159cfbe]:has(td.cell-modified) {
410
- --cell-color-start: color-mix(in srgb, var(--sc-cell-changed-color), #fff 20%);
411
- --cell-color-end: color-mix(in srgb, var(--sc-cell-changed-color), #fff 60%);
437
+ .atable-row.changed-row-gradient[data-v-e0056486]:has(td.cell-modified) {
438
+ --cell-color-start: color-mix(in srgb, var(--sc-cell-changed-color), var(--sc-gray-5) 20%);
439
+ --cell-color-end: color-mix(in srgb, var(--sc-cell-changed-color), var(--sc-gray-5) 60%);
412
440
  background: linear-gradient(90deg, var(--cell-color-start), var(--cell-color-end));
413
441
  }
414
442
 
@@ -450,29 +478,29 @@
450
478
  }
451
479
  }
452
480
 
453
- .column-filter[data-v-f9c23db9] {
481
+ .column-filter[data-v-fc482b5d] {
454
482
  display: flex;
455
483
  align-items: center;
456
484
  gap: 0.25rem;
457
485
  width: 100%;
458
486
  }
459
- .filter-input[data-v-f9c23db9],
460
- .filter-select[data-v-f9c23db9] {
487
+ .filter-input[data-v-fc482b5d],
488
+ .filter-select[data-v-fc482b5d] {
461
489
  background-color: var(--sc-form-background) !important;
462
490
  padding: 0.15rem 0.2rem;
463
491
  border: 1px solid var(--sc-form-border);
464
- border-radius: 3px;
492
+ border-radius: var(--sc-border-radius);
465
493
  font-size: 0.875rem;
466
494
  color: var(--sc-cell-text-color);
467
495
  width: 100%;
468
496
  box-sizing: border-box;
469
497
  }
470
- .filter-input[data-v-f9c23db9]:focus,
471
- .filter-select[data-v-f9c23db9]:focus {
498
+ .filter-input[data-v-fc482b5d]:focus,
499
+ .filter-select[data-v-fc482b5d]:focus {
472
500
  outline: none;
473
501
  border-color: var(--sc-input-active-border-color);
474
502
  }
475
- .checkbox-filter[data-v-f9c23db9] {
503
+ .checkbox-filter[data-v-fc482b5d] {
476
504
  display: flex;
477
505
  align-items: center;
478
506
  gap: 0.25rem;
@@ -480,29 +508,29 @@
480
508
  color: var(--sc-cell-text-color);
481
509
  cursor: pointer;
482
510
  }
483
- .filter-checkbox[data-v-f9c23db9] {
511
+ .filter-checkbox[data-v-fc482b5d] {
484
512
  margin: 0;
485
513
  }
486
- .date-range-filter[data-v-f9c23db9] {
514
+ .date-range-filter[data-v-fc482b5d] {
487
515
  display: flex;
488
516
  gap: 0.25rem;
489
517
  align-items: center;
490
518
  width: 100%;
491
519
  }
492
- .date-range-filter .filter-input[data-v-f9c23db9] {
520
+ .date-range-filter .filter-input[data-v-fc482b5d] {
493
521
  flex: 1;
494
522
  min-width: 0;
495
523
  }
496
- .date-separator[data-v-f9c23db9] {
524
+ .date-separator[data-v-fc482b5d] {
497
525
  color: var(--sc-gray-50);
498
526
  font-weight: 500;
499
527
  padding: 0 0.25rem;
500
528
  flex-shrink: 0;
501
529
  }
502
- .clear-btn[data-v-f9c23db9] {
530
+ .clear-btn[data-v-fc482b5d] {
503
531
  background: var(--sc-gray-10);
504
532
  border: 1px solid var(--sc-form-border);
505
- border-radius: 3px;
533
+ border-radius: var(--sc-border-radius);
506
534
  color: var(--sc-gray-70);
507
535
  cursor: pointer;
508
536
  font-size: 1rem;
@@ -511,6 +539,10 @@
511
539
  flex-shrink: 0;
512
540
  }
513
541
 
542
+ .atable-header-row,
543
+ .atable-filters-row {
544
+ background-color: var(--sc-cell-background);
545
+ }
514
546
  .atable-header-row th {
515
547
  padding-left: 0.5ch !important;
516
548
  font-weight: 700;
@@ -551,7 +583,13 @@ th {
551
583
 
552
584
  .amodal {
553
585
  position: absolute;
554
- background-color: var(--sc-row-color-zebra-dark);
586
+ width: max-content;
587
+ max-width: 100%;
588
+ box-sizing: border-box;
589
+ margin-top: 0.25rem;
590
+ padding: 10px;
591
+ border: 1px solid var(--sc-input-border-color);
592
+ background: var(--sc-input-field-background);
555
593
  z-index: 200;
556
594
  }
557
595
 
@@ -620,15 +658,16 @@ td.sticky-index {
620
658
  position: sticky;
621
659
  z-index: 100;
622
660
  order: 0;
623
- background: white;
661
+ background: inherit;
624
662
  }
625
663
  .sticky-column-edge,
626
664
  .atable th.sticky-column-edge {
627
665
  border-right: 1px solid var(--sc-row-border-color);
628
666
  }
629
667
 
630
- .atable[data-v-53c8fbad] {
668
+ .atable[data-v-a1149691] {
631
669
  position: relative;
670
+ background: var(--sc-cell-background);
632
671
  font-family: var(--sc-atable-font-family);
633
672
  -webkit-font-smoothing: antialiased;
634
673
  -moz-osx-font-smoothing: grayscale;
@@ -641,7 +680,7 @@ td.sticky-index {
641
680
  height: 1px;
642
681
  /* border-left:4px solid var(--sc-form-border); */
643
682
  }
644
- .atable th[data-v-53c8fbad] {
683
+ .atable th[data-v-a1149691] {
645
684
  border-width: 0px;
646
685
  border-style: solid;
647
686
  border-radius: 0px;
@@ -656,16 +695,15 @@ td.sticky-index {
656
695
  order: 1;
657
696
  box-sizing: border-box;
658
697
  }
659
- .atable th[data-v-53c8fbad]:focus {
698
+ .atable th[data-v-a1149691]:focus {
660
699
  outline: none;
661
700
  }
662
701
 
663
- .aloading[data-v-a930a25b] {
702
+ .aloading[data-v-6353ec92] {
664
703
  width: 100%;
665
704
  border-top: 1px solid var(--sc-row-border-color);
666
705
  border-bottom: 1px solid var(--sc-row-border-color);
667
706
  display: flex;
668
- background-color: white;
669
707
  border-left: 4px solid var(--sc-row-border-color);
670
708
  padding-left: 0.5ch !important;
671
709
  padding-right: 0.5ch;
@@ -677,7 +715,7 @@ td.sticky-index {
677
715
  overflow: hidden;
678
716
  position: relative;
679
717
  }
680
- .aloading-bar[data-v-a930a25b] {
718
+ .aloading-bar[data-v-6353ec92] {
681
719
  width: 100%;
682
720
  height: 100%;
683
721
  position: absolute;
@@ -689,10 +727,10 @@ td.sticky-index {
689
727
  rgba(var(--sc-table-loading-color), 1) 50%,
690
728
  rgba(var(--sc-table-loading-color), 0) 100%
691
729
  );
692
- animation: gradient-a930a25b infinite 2s;
730
+ animation: gradient-6353ec92 infinite 2s;
693
731
  z-index: 0;
694
732
  }
695
- .aloading-header[data-v-a930a25b] {
733
+ .aloading-header[data-v-6353ec92] {
696
734
  color: var(--sc-cell-text-color);
697
735
  font-family: var(--sc-atable-font-family);
698
736
  -webkit-font-smoothing: antialiased;
@@ -703,12 +741,12 @@ td.sticky-index {
703
741
  font-weight: normal;
704
742
  z-index: 1;
705
743
  }
706
- .aloading-header[data-v-a930a25b]::after {
744
+ .aloading-header[data-v-6353ec92]::after {
707
745
  content: '...';
708
- animation: ellipse-a930a25b 2s;
746
+ animation: ellipse-6353ec92 2s;
709
747
  animation-iteration-count: infinite;
710
748
  }
711
- @keyframes gradient-a930a25b {
749
+ @keyframes gradient-6353ec92 {
712
750
  0% {
713
751
  left: -100%;
714
752
  }
@@ -716,7 +754,7 @@ td.sticky-index {
716
754
  left: 100%;
717
755
  }
718
756
  }
719
- @keyframes ellipse-a930a25b {
757
+ @keyframes ellipse-6353ec92 {
720
758
  0% {
721
759
  content: '';
722
760
  }
@@ -734,12 +772,11 @@ td.sticky-index {
734
772
  }
735
773
  }
736
774
 
737
- .aloading[data-v-e1165876] {
775
+ .aloading[data-v-1daa5d43] {
738
776
  width: 100%;
739
777
  border-top: 1px solid var(--sc-row-border-color);
740
778
  border-bottom: 1px solid var(--sc-row-border-color);
741
779
  display: flex;
742
- background-color: white;
743
780
  border-left: 4px solid var(--sc-row-border-color);
744
781
  padding-left: 0.5ch !important;
745
782
  padding-right: 0.5ch;
@@ -751,17 +788,17 @@ td.sticky-index {
751
788
  overflow: hidden;
752
789
  position: relative;
753
790
  }
754
- .aloading-bar[data-v-e1165876] {
791
+ .aloading-bar[data-v-1daa5d43] {
755
792
  width: 50%;
756
793
  height: 3px;
757
794
  position: absolute;
758
795
  left: -100%;
759
796
  bottom: 0;
760
797
  background: var(--sc-row-border-color);
761
- animation: bar-left-e1165876 infinite 2s;
798
+ animation: bar-left-1daa5d43 infinite 2s;
762
799
  z-index: 0;
763
800
  }
764
- .aloading-header[data-v-e1165876] {
801
+ .aloading-header[data-v-1daa5d43] {
765
802
  color: var(--sc-cell-text-color);
766
803
  font-family: var(--sc-atable-font-family);
767
804
  -webkit-font-smoothing: antialiased;
@@ -772,12 +809,12 @@ td.sticky-index {
772
809
  font-weight: normal;
773
810
  z-index: 1;
774
811
  }
775
- .aloading-header[data-v-e1165876]::after {
812
+ .aloading-header[data-v-1daa5d43]::after {
776
813
  content: '...';
777
- animation: ellipse-e1165876 2s;
814
+ animation: ellipse-1daa5d43 2s;
778
815
  animation-iteration-count: infinite;
779
816
  }
780
- @keyframes bar-left-e1165876 {
817
+ @keyframes bar-left-1daa5d43 {
781
818
  0% {
782
819
  left: -50%;
783
820
  }
@@ -785,7 +822,7 @@ td.sticky-index {
785
822
  left: 100%;
786
823
  }
787
824
  }
788
- @keyframes ellipse-e1165876 {
825
+ @keyframes ellipse-1daa5d43 {
789
826
  0% {
790
827
  content: '';
791
828
  }
package/dist/atable.js CHANGED
@@ -1746,7 +1746,7 @@ var ARow_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__
1746
1746
  }, void 0, true)], 8, _hoisted_3$4)], 8, _hoisted_2$6)) : createCommentVNode("", true)], 64);
1747
1747
  };
1748
1748
  }
1749
- }), [["__scopeId", "data-v-f159cfbe"]]);
1749
+ }), [["__scopeId", "data-v-e0056486"]]);
1750
1750
  //#endregion
1751
1751
  //#region src/components/AGanttConnection.vue?vue&type=script&setup=true&lang.ts
1752
1752
  var _hoisted_1$6 = { class: "gantt-connection-overlay" };
@@ -2016,7 +2016,7 @@ var ATableColumnFilter_default = /*#__PURE__*/ _plugin_vue_export_helper_default
2016
2016
  }, "×")) : createCommentVNode("", true)]);
2017
2017
  };
2018
2018
  }
2019
- }), [["__scopeId", "data-v-f9c23db9"]]);
2019
+ }), [["__scopeId", "data-v-fc482b5d"]]);
2020
2020
  //#endregion
2021
2021
  //#region src/components/ATableHeader.vue?vue&type=script&setup=true&lang.ts
2022
2022
  var _hoisted_1$4 = { key: 0 };
@@ -2136,19 +2136,19 @@ var ATableModal_default = /* @__PURE__ */ defineComponent({
2136
2136
  props: { store: {} },
2137
2137
  setup(__props) {
2138
2138
  const amodalRef = useTemplateRef("amodal");
2139
- const { width: modalWidth, height: modalHeight } = useElementBounding(amodalRef);
2139
+ const { width: modalWidth } = useElementBounding(amodalRef);
2140
2140
  const amodalStyles = computed(() => {
2141
2141
  if (!(__props.store.modal.height && __props.store.modal.width && __props.store.modal.left && __props.store.modal.bottom)) return {};
2142
- const table = __props.store.modal.cell?.closest("table");
2143
- if (!table) return {};
2144
- const maxHeight = table.offsetHeight || 0;
2145
- const maxWidth = table.offsetWidth || 0;
2146
- let modalY = __props.store.modal.cell?.offsetTop || 0;
2147
- const headerHeight = table.querySelector("thead")?.offsetHeight || 0;
2148
- modalY += headerHeight;
2149
- modalY = modalY + modalHeight.value < maxHeight ? modalY : modalY - (modalHeight.value + __props.store.modal.height);
2150
- let modalX = __props.store.modal.cell?.offsetLeft || 0;
2151
- modalX = modalX + modalWidth.value <= maxWidth ? modalX : modalX - (modalWidth.value - __props.store.modal.width);
2142
+ const cell = __props.store.modal.cell;
2143
+ if (!cell) return {};
2144
+ const container = cell.closest(".atable-container") ?? cell.closest("table");
2145
+ if (!(container instanceof HTMLElement)) return {};
2146
+ const cellRect = cell.getBoundingClientRect();
2147
+ const containerRect = container.getBoundingClientRect();
2148
+ const modalY = cellRect.bottom - containerRect.top;
2149
+ let modalX = cellRect.left - containerRect.left;
2150
+ const maxWidth = container.clientWidth || containerRect.width;
2151
+ if (modalWidth.value && modalX + modalWidth.value > maxWidth) modalX = Math.max(0, maxWidth - modalWidth.value);
2152
2152
  return {
2153
2153
  left: `${modalX}px`,
2154
2154
  top: `${modalY}px`
@@ -2658,107 +2658,110 @@ var ATable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
2658
2658
  moveRow: store.moveRow
2659
2659
  });
2660
2660
  return (_ctx, _cache) => {
2661
- return openBlock(), createElementBlock("div", _hoisted_1$2, [withDirectives((openBlock(), createElementBlock("table", {
2662
- ref: "table",
2663
- class: "atable",
2664
- style: normalizeStyle({ width: unref(store).config.fullWidth ? "100%" : "auto" })
2665
- }, [
2666
- renderSlot(_ctx.$slots, "header", { data: unref(store) }, () => [createVNode(ATableHeader_default, {
2667
- columns: unref(store).columns,
2668
- store: unref(store)
2669
- }, null, 8, ["columns", "store"])], true),
2670
- createElementVNode("tbody", null, [renderSlot(_ctx.$slots, "body", { data: unref(store) }, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(visibleRows), (row, filteredIndex) => {
2671
- return openBlock(), createBlock(ARow_default, {
2672
- key: `${row.originalIndex}-${filteredIndex}`,
2673
- row,
2674
- "row-index": row.originalIndex,
2675
- store: unref(store),
2676
- "onRow:action": handleRowAction,
2677
- "onRow:click": handleRowClick
2678
- }, {
2679
- default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(getProcessedColumnsForRow(row), (column, colIndex) => {
2680
- return openBlock(), createElementBlock(Fragment, { key: column.name }, [column.isGantt ? (openBlock(), createBlock(resolveDynamicComponent(column.ganttComponent || "AGanttCell"), {
2681
- key: 0,
2682
- store: unref(store),
2683
- "columns-count": unref(store).columns.length - pinnedColumnCount.value,
2684
- color: row.gantt?.color,
2685
- start: row.gantt?.startIndex,
2686
- end: row.gantt?.endIndex,
2687
- colspan: column.colspan,
2688
- pinned: column.pinned,
2689
- "row-index": row.originalIndex,
2690
- "col-index": column.originalIndex ?? colIndex,
2691
- style: normalizeStyle({
2692
- textAlign: column?.align || "center",
2693
- minWidth: column?.width || "40ch",
2694
- width: unref(store).config.fullWidth ? "auto" : null
2695
- }),
2696
- "onConnection:create": handleConnectionCreate
2697
- }, null, 40, [
2698
- "store",
2699
- "columns-count",
2700
- "color",
2701
- "start",
2702
- "end",
2703
- "colspan",
2704
- "pinned",
2705
- "row-index",
2706
- "col-index",
2707
- "style"
2708
- ])) : (openBlock(), createBlock(resolveDynamicComponent(column.cellComponent || "ACell"), {
2709
- key: 1,
2710
- store: unref(store),
2711
- pinned: column.pinned,
2712
- "row-index": row.originalIndex,
2713
- "col-index": colIndex,
2714
- style: normalizeStyle({
2715
- textAlign: column?.align || "center",
2716
- width: unref(store).config.fullWidth ? "auto" : null
2717
- }),
2718
- spellcheck: "false"
2719
- }, null, 8, [
2720
- "store",
2721
- "pinned",
2722
- "row-index",
2723
- "col-index",
2724
- "style"
2725
- ]))], 64);
2726
- }), 128))]),
2727
- _: 2
2728
- }, 1032, [
2729
- "row",
2730
- "row-index",
2731
- "store"
2732
- ]);
2733
- }), 128))], true)]),
2734
- renderSlot(_ctx.$slots, "footer", {
2735
- data: unref(store),
2736
- page: unref(pagination)
2737
- }, () => [createVNode(ATablePaginationFooter_default, {
2738
- "column-count": footerColumnCount.value,
2739
- "show-footer": unref(showFooter),
2740
- "has-more": unref(hasMore),
2741
- "has-prev": unref(hasPrev),
2742
- "has-next": unref(hasNext),
2743
- "has-local-next": unref(hasLocalNext),
2744
- "has-ever-had-more": unref(hasEverHadMore),
2745
- "loaded-count": unref(loadedCount),
2746
- loading: unref(paginationLoading),
2747
- next: unref(paginationNext),
2748
- prev: unref(paginationPrev)
2749
- }, null, 8, [
2750
- "column-count",
2751
- "show-footer",
2752
- "has-more",
2753
- "has-prev",
2754
- "has-next",
2755
- "has-local-next",
2756
- "has-ever-had-more",
2757
- "loaded-count",
2758
- "loading",
2759
- "next",
2760
- "prev"
2761
- ])], true),
2661
+ return withDirectives((openBlock(), createElementBlock("div", _hoisted_1$2, [
2662
+ createElementVNode("table", {
2663
+ ref: "table",
2664
+ class: normalizeClass(["atable", { "atable--zebra": unref(store).config.zebra }]),
2665
+ style: normalizeStyle({ width: unref(store).config.fullWidth ? "100%" : "auto" })
2666
+ }, [
2667
+ renderSlot(_ctx.$slots, "header", { data: unref(store) }, () => [createVNode(ATableHeader_default, {
2668
+ columns: unref(store).columns,
2669
+ store: unref(store)
2670
+ }, null, 8, ["columns", "store"])], true),
2671
+ createElementVNode("tbody", null, [renderSlot(_ctx.$slots, "body", { data: unref(store) }, () => [(openBlock(true), createElementBlock(Fragment, null, renderList(unref(visibleRows), (row, filteredIndex) => {
2672
+ return openBlock(), createBlock(ARow_default, {
2673
+ key: `${row.originalIndex}-${filteredIndex}`,
2674
+ row,
2675
+ "row-index": row.originalIndex,
2676
+ store: unref(store),
2677
+ "onRow:action": handleRowAction,
2678
+ "onRow:click": handleRowClick
2679
+ }, {
2680
+ content: withCtx((slotProps) => [renderSlot(_ctx.$slots, "content", mergeProps({ ref_for: true }, slotProps), void 0, true)]),
2681
+ default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(getProcessedColumnsForRow(row), (column, colIndex) => {
2682
+ return openBlock(), createElementBlock(Fragment, { key: column.name }, [column.isGantt ? (openBlock(), createBlock(resolveDynamicComponent(column.ganttComponent || "AGanttCell"), {
2683
+ key: 0,
2684
+ store: unref(store),
2685
+ "columns-count": unref(store).columns.length - pinnedColumnCount.value,
2686
+ color: row.gantt?.color,
2687
+ start: row.gantt?.startIndex,
2688
+ end: row.gantt?.endIndex,
2689
+ colspan: column.colspan,
2690
+ pinned: column.pinned,
2691
+ "row-index": row.originalIndex,
2692
+ "col-index": column.originalIndex ?? colIndex,
2693
+ style: normalizeStyle({
2694
+ textAlign: column?.align || "center",
2695
+ minWidth: column?.width || "40ch",
2696
+ width: unref(store).config.fullWidth ? "auto" : null
2697
+ }),
2698
+ "onConnection:create": handleConnectionCreate
2699
+ }, null, 40, [
2700
+ "store",
2701
+ "columns-count",
2702
+ "color",
2703
+ "start",
2704
+ "end",
2705
+ "colspan",
2706
+ "pinned",
2707
+ "row-index",
2708
+ "col-index",
2709
+ "style"
2710
+ ])) : (openBlock(), createBlock(resolveDynamicComponent(column.cellComponent || "ACell"), {
2711
+ key: 1,
2712
+ store: unref(store),
2713
+ pinned: column.pinned,
2714
+ "row-index": row.originalIndex,
2715
+ "col-index": colIndex,
2716
+ style: normalizeStyle({
2717
+ textAlign: column?.align || "center",
2718
+ width: unref(store).config.fullWidth ? "auto" : null
2719
+ }),
2720
+ spellcheck: "false"
2721
+ }, null, 8, [
2722
+ "store",
2723
+ "pinned",
2724
+ "row-index",
2725
+ "col-index",
2726
+ "style"
2727
+ ]))], 64);
2728
+ }), 128))]),
2729
+ _: 2
2730
+ }, 1032, [
2731
+ "row",
2732
+ "row-index",
2733
+ "store"
2734
+ ]);
2735
+ }), 128))], true)]),
2736
+ renderSlot(_ctx.$slots, "footer", {
2737
+ data: unref(store),
2738
+ page: unref(pagination)
2739
+ }, () => [createVNode(ATablePaginationFooter_default, {
2740
+ "column-count": footerColumnCount.value,
2741
+ "show-footer": unref(showFooter),
2742
+ "has-more": unref(hasMore),
2743
+ "has-prev": unref(hasPrev),
2744
+ "has-next": unref(hasNext),
2745
+ "has-local-next": unref(hasLocalNext),
2746
+ "has-ever-had-more": unref(hasEverHadMore),
2747
+ "loaded-count": unref(loadedCount),
2748
+ loading: unref(paginationLoading),
2749
+ next: unref(paginationNext),
2750
+ prev: unref(paginationPrev)
2751
+ }, null, 8, [
2752
+ "column-count",
2753
+ "show-footer",
2754
+ "has-more",
2755
+ "has-prev",
2756
+ "has-next",
2757
+ "has-local-next",
2758
+ "has-ever-had-more",
2759
+ "loaded-count",
2760
+ "loading",
2761
+ "next",
2762
+ "prev"
2763
+ ])], true)
2764
+ ], 6),
2762
2765
  renderSlot(_ctx.$slots, "modal", { data: unref(store) }, () => [withDirectives(createVNode(ATableModal_default, { store: unref(store) }, {
2763
2766
  default: withCtx(() => [(openBlock(), createBlock(resolveDynamicComponent(unref(store).modal.component), mergeProps({
2764
2767
  key: `${unref(store).modal.rowIndex}:${unref(store).modal.colIndex}`,
@@ -2771,15 +2774,16 @@ var ATable_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE_
2771
2774
  "store"
2772
2775
  ]))]),
2773
2776
  _: 1
2774
- }, 8, ["store"]), [[vShow, unref(store).modal.visible]])], true)
2775
- ], 4)), [[unref(vOnClickOutside), unref(store).closeModal]]), unref(store).isGanttView && unref(store).isDependencyGraphEnabled ? (openBlock(), createBlock(AGanttConnection_default, {
2776
- key: 0,
2777
- store: unref(store),
2778
- "onConnection:delete": handleConnectionDelete
2779
- }, null, 8, ["store"])) : createCommentVNode("", true)]);
2777
+ }, 8, ["store"]), [[vShow, unref(store).modal.visible]])], true),
2778
+ unref(store).isGanttView && unref(store).isDependencyGraphEnabled ? (openBlock(), createBlock(AGanttConnection_default, {
2779
+ key: 0,
2780
+ store: unref(store),
2781
+ "onConnection:delete": handleConnectionDelete
2782
+ }, null, 8, ["store"])) : createCommentVNode("", true)
2783
+ ])), [[unref(vOnClickOutside), unref(store).closeModal]]);
2780
2784
  };
2781
2785
  }
2782
- }), [["__scopeId", "data-v-53c8fbad"]]);
2786
+ }), [["__scopeId", "data-v-a1149691"]]);
2783
2787
  //#endregion
2784
2788
  //#region src/components/ATableLoading.vue
2785
2789
  var _sfc_main$1 = {};
@@ -2788,7 +2792,7 @@ var _hoisted_2$1 = { class: "aloading-header" };
2788
2792
  function _sfc_render$1(_ctx, _cache) {
2789
2793
  return openBlock(), createElementBlock("div", _hoisted_1$1, [createElementVNode("h2", _hoisted_2$1, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), _cache[0] || (_cache[0] = createElementVNode("div", { class: "aloading-bar" }, null, -1))]);
2790
2794
  }
2791
- var ATableLoading_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-a930a25b"]]);
2795
+ var ATableLoading_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main$1, [["render", _sfc_render$1], ["__scopeId", "data-v-6353ec92"]]);
2792
2796
  //#endregion
2793
2797
  //#region src/components/ATableLoadingBar.vue
2794
2798
  var _sfc_main = {};
@@ -2797,7 +2801,7 @@ var _hoisted_2 = { class: "aloading-header" };
2797
2801
  function _sfc_render(_ctx, _cache) {
2798
2802
  return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode("h2", _hoisted_2, [renderSlot(_ctx.$slots, "default", {}, void 0, true)]), _cache[0] || (_cache[0] = createElementVNode("div", { class: "aloading-bar" }, null, -1))]);
2799
2803
  }
2800
- var ATableLoadingBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-e1165876"]]);
2804
+ var ATableLoadingBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-1daa5d43"]]);
2801
2805
  //#endregion
2802
2806
  //#region src/index.ts
2803
2807
  /**