@sellmate/design-system 0.0.46 → 0.0.47
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/cjs/design-system.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/cjs/sd-button.sd-checkbox.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table-backup.sd-tooltip.sd-tooltip-portal.entry.cjs.js.map +1 -1
- package/dist/cjs/sd-button_12.cjs.entry.js +221 -44
- package/dist/collection/components/sd-table-backup/sd-table-backup.css +27 -7
- package/dist/collection/components/sd-table-backup/sd-table-backup.js +278 -53
- package/dist/collection/components/sd-table-backup/sd-table-backup.js.map +1 -1
- package/dist/components/sd-table-backup.js +230 -47
- package/dist/components/sd-table-backup.js.map +1 -1
- package/dist/design-system/design-system.esm.js +1 -1
- package/dist/design-system/{p-36f24993.entry.js → p-423025fa.entry.js} +2 -2
- package/dist/design-system/p-423025fa.entry.js.map +1 -0
- package/dist/design-system/sd-button.sd-checkbox.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table-backup.sd-tooltip.sd-tooltip-portal.entry.esm.js.map +1 -1
- package/dist/esm/design-system.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/esm/sd-button.sd-checkbox.sd-icon.sd-input.sd-loading-spinner.sd-pagination.sd-portal.sd-select.sd-select-option.sd-table-backup.sd-tooltip.sd-tooltip-portal.entry.js.map +1 -1
- package/dist/esm/sd-button_12.entry.js +221 -44
- package/dist/types/components/sd-table-backup/sd-table-backup.d.ts +21 -3
- package/dist/types/components.d.ts +18 -8
- package/hydrate/index.js +229 -47
- package/hydrate/index.mjs +229 -47
- package/package.json +2 -2
- package/dist/design-system/p-36f24993.entry.js.map +0 -1
package/hydrate/index.mjs
CHANGED
|
@@ -8536,7 +8536,7 @@ let SdTable$1 = class SdTable {
|
|
|
8536
8536
|
}; }
|
|
8537
8537
|
};
|
|
8538
8538
|
|
|
8539
|
-
const sdTableBackupCss = ".sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:var(--table-height, auto);position:relative;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden;background:#ffffff}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position}.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable{height:var(--table-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--loading{overflow:hidden !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll{position:relative;height:var(--total-virtual-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr:not([aria-hidden=true]){width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]{padding:0;border:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true] td{display:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:\"\";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:\"\";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody .sd-table__loading{position:absolute;top:0;left:0;width:100
|
|
8539
|
+
const sdTableBackupCss = ".sd-table__wrapper .sd-table__container .sd-table__middle{overflow-y:auto;overflow-x:hidden;scroll-behavior:smooth}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar{opacity:0;background:#e5e5e5}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:horizontal{height:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar:vertical{width:8px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-thumb{height:80px;background-color:#cccccc;border-radius:4px}.sd-table__wrapper .sd-table__container .sd-table__middle::-webkit-scrollbar-track{background-color:transparent}.sd-table__wrapper{height:var(--table-height, auto);width:var(--table-width, 100%);color:#222222}.sd-table__wrapper .sd-table__container{width:100%;height:var(--table-container-height, auto);position:relative;border:1px solid #e1e1e1;border-radius:8px;font-size:12px;overflow:hidden;background:#ffffff}.sd-table__wrapper .sd-table__container .sd-table__middle{overflow:auto;will-change:scroll-position}.sd-table__wrapper .sd-table__container .sd-table__middle--scrollable{height:var(--table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle--loading{overflow:hidden !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table{background-color:white;display:table;width:100%;border-collapse:separate;border-spacing:0;table-layout:fixed}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll{position:relative;height:var(--total-virtual-height, --table-container-height, auto)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr:not([aria-hidden=true]){width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]{padding:0;border:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody.sd-table-tbody--virtual-scroll tr[aria-hidden=true]:not(.sd-table__virtual-row-spacer) td{display:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable td.sd-td--selected,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--selectable th.sd-th--selected{width:52px !important;max-width:52px !important;min-width:52px !important;padding:0 10px 0 24px;text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-header thead{position:sticky;top:0;z-index:120}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-right{position:sticky;background-color:#f5faff;z-index:110 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-left,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-right{position:sticky;background-color:white;z-index:100 !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-left{left:var(--sticky-left-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column .sticky-right{right:var(--sticky-right-offset, 0)}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column th.sticky-cell{position:sticky;z-index:102;background-color:#f5faff}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--sticky-column td.sticky-cell{position:sticky;z-index:101;background-color:white}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left th.sticky-left-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-left td.sticky-left-edge:after{content:\"\";position:absolute;top:0;left:100%;right:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset 12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge{overflow:visible}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right th.sticky-right-edge:after,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--scrolled-right td.sticky-right-edge:after{content:\"\";position:absolute;top:0;left:-20px;width:20px;height:100%;z-index:101 !important;box-shadow:inset -12px 0 20px -25px;opacity:1;pointer-events:none}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead{opacity:0.4}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table--no-data thead tr th.sd-th{border-bottom:1px solid rgba(225, 225, 225, 0.4) !important}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-td,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table sd-th,.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table .sd-th__content--label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;word-break:keep-all}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead{height:36px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr{width:100%}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th{background:#f5faff;height:36px;padding:0 16px;font-weight:500;vertical-align:middle;border-bottom:1px solid #e1e1e1;-webkit-user-select:none;user-select:none;position:relative}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content{display:flex;flex-flow:row nowrap;align-items:center;gap:4px}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--left{justify-content:flex-start}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--center{justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__content--right{justify-content:flex-end}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table thead tr th.sd-th .sd-th__resizer{position:absolute;top:50%;right:0;transform:translateY(-50%);width:4px;height:16px;cursor:col-resize;z-index:3;border-left:1px solid #cccccc;border-right:1px solid #cccccc}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody .sd-table__loading{position:absolute;top:0;left:0;width:var(--table-width, 100%);height:var(--table-container-height, 100%);min-height:var(--table-container-height, 100%);background:rgba(255, 255, 255, 0.6);z-index:200;display:flex;align-items:center;justify-content:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td{height:44px;padding:0 16px;border-bottom:1px solid #e1e1e1;background:white;vertical-align:middle}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--left{text-align:left}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--center{text-align:center}.sd-table__wrapper .sd-table__container .sd-table__middle .sd-table tbody tr td.sd-td--right{text-align:right}.sd-table__wrapper .sd-table__container .sd-table__bottom{background:white;text-align:center}.sd-table__wrapper .sd-table__container .sd-table__bottom .sd-table__no-data{padding-top:15%;color:#888888}.sd-table__wrapper .sd-table__pagination{position:relative;background:#f9f9f9;height:48px;display:flex;align-items:center;justify-content:center;border:1px solid #e1e1e1;border-top:none;border-radius:8px}.sd-table__wrapper .sd-table__pagination sd-select{position:absolute;right:10px;top:50%;transform:translateY(-50%)}.sd-table__wrapper .sd-table__virtual-spacer,.sd-table__wrapper .sd-table__virtual-row-spacer{padding:0}.sd-table__wrapper .sd-table__virtual-spacer .sd-table__skeleton,.sd-table__wrapper .sd-table__virtual-row-spacer .sd-table__skeleton{width:100%;height:100%;background:linear-gradient(90deg, rgba(246, 246, 246, 0.3) 0%, rgba(225, 225, 225, 0.5) 50%, rgba(246, 246, 246, 0.3) 100%);background-size:200% 100%;animation:skeleton-loading 1.5s ease-in-out infinite}@keyframes skeleton-loading{0%{background-position:200% 0}100%{background-position:-200% 0}}";
|
|
8540
8540
|
|
|
8541
8541
|
class SdTable {
|
|
8542
8542
|
constructor(hostRef) {
|
|
@@ -8559,6 +8559,7 @@ class SdTable {
|
|
|
8559
8559
|
noDataLabel = '데이터가 없습니다.';
|
|
8560
8560
|
isLoading = false;
|
|
8561
8561
|
pagination;
|
|
8562
|
+
headerCellRenderer;
|
|
8562
8563
|
bodyCellRenderer;
|
|
8563
8564
|
useInternalPagination = false;
|
|
8564
8565
|
useRowsPerPageSelect = false;
|
|
@@ -8568,9 +8569,15 @@ class SdTable {
|
|
|
8568
8569
|
{ label: '50개씩 보기', value: 50 },
|
|
8569
8570
|
{ label: '100개씩 보기', value: 100 },
|
|
8570
8571
|
];
|
|
8571
|
-
useVirtualScroll =
|
|
8572
|
-
virtualRowHeight = 44; // 가상 스크롤 사용시 각 행의 높이 - 가상 스크롤 사용시 필수값
|
|
8573
|
-
|
|
8572
|
+
useVirtualScroll = {}; // 가상 스크롤 사용 여부
|
|
8573
|
+
virtualRowHeight = 44; // 가상 스크롤 사용시 각 행의 높이 - 세로 가상 스크롤 사용시 필수값
|
|
8574
|
+
// 가상 스크롤 사용시 각 열의 너비 - 가로 가상 스크롤 사용시 필수값
|
|
8575
|
+
// 가상화하려는 컬럼의 넓이는 무조건 고정(resizable의 경우 넓이가 변동되는데 이때에는 고려 x)
|
|
8576
|
+
virtualColumnWidth = 120;
|
|
8577
|
+
virtualBufferSize = {
|
|
8578
|
+
vertical: 5,
|
|
8579
|
+
horizontal: 5,
|
|
8580
|
+
}; // 가상 스크롤 위아래 버퍼 크기
|
|
8574
8581
|
sdSelectChange;
|
|
8575
8582
|
sdPageChange;
|
|
8576
8583
|
sdRowsPerPageChange;
|
|
@@ -8580,17 +8587,34 @@ class SdTable {
|
|
|
8580
8587
|
columnWidths = [];
|
|
8581
8588
|
scrolledLeft = false;
|
|
8582
8589
|
scrolledRight = false;
|
|
8583
|
-
|
|
8584
|
-
|
|
8590
|
+
// 세로 가상 스크롤 상태값
|
|
8591
|
+
virtualStartIndex = 0;
|
|
8592
|
+
virtualEndIndex = 0;
|
|
8585
8593
|
scrollTopPosition = 0;
|
|
8594
|
+
// 가로 가상 스크롤 상태값
|
|
8595
|
+
virtualStartColIdx = 0;
|
|
8596
|
+
virtualEndColIdx = 0;
|
|
8597
|
+
scrollLeftPosition = 0;
|
|
8586
8598
|
scrollRequestAnimationFrame = null;
|
|
8587
8599
|
scrollContainer = null;
|
|
8588
8600
|
handleColumnsChange(newCols) {
|
|
8589
8601
|
this.columnWidths = newCols.map(c => parseInt(c.width || '120', 10));
|
|
8602
|
+
if (this.useVirtualScroll.horizontal) {
|
|
8603
|
+
requestAnimationFrame(() => {
|
|
8604
|
+
this.calculateVisibleColumnRange();
|
|
8605
|
+
});
|
|
8606
|
+
}
|
|
8607
|
+
}
|
|
8608
|
+
handleColumnWidthsChange() {
|
|
8609
|
+
if (this.useVirtualScroll.horizontal) {
|
|
8610
|
+
requestAnimationFrame(() => {
|
|
8611
|
+
this.calculateVisibleColumnRange();
|
|
8612
|
+
});
|
|
8613
|
+
}
|
|
8590
8614
|
}
|
|
8591
8615
|
handleRowsChange(newRows) {
|
|
8592
8616
|
this.innerRows = [...newRows];
|
|
8593
|
-
if (this.useVirtualScroll) {
|
|
8617
|
+
if (this.useVirtualScroll.vertical) {
|
|
8594
8618
|
requestAnimationFrame(() => {
|
|
8595
8619
|
this.calculateVisibleRange();
|
|
8596
8620
|
});
|
|
@@ -8602,7 +8626,7 @@ class SdTable {
|
|
|
8602
8626
|
handlePaginationChange(newVal) {
|
|
8603
8627
|
if (newVal?.page && newVal.page !== this.currentPage) {
|
|
8604
8628
|
this.currentPage = newVal.page;
|
|
8605
|
-
if (this.useVirtualScroll && this.scrollContainer) {
|
|
8629
|
+
if (this.useVirtualScroll.vertical && this.scrollContainer) {
|
|
8606
8630
|
this.scrollContainer.scrollTop = 0;
|
|
8607
8631
|
this.scrollTopPosition = 0;
|
|
8608
8632
|
this.calculateVisibleRange();
|
|
@@ -8629,13 +8653,21 @@ class SdTable {
|
|
|
8629
8653
|
const { scrollLeft, scrollWidth, clientWidth, scrollTop } = middle;
|
|
8630
8654
|
this.scrolledLeft = scrollLeft > 0;
|
|
8631
8655
|
this.scrolledRight = scrollLeft + clientWidth < scrollWidth;
|
|
8632
|
-
if (this.useVirtualScroll) {
|
|
8656
|
+
if (this.useVirtualScroll.vertical || this.useVirtualScroll.horizontal) {
|
|
8633
8657
|
if (this.scrollRequestAnimationFrame !== null) {
|
|
8634
8658
|
cancelAnimationFrame(this.scrollRequestAnimationFrame);
|
|
8635
8659
|
}
|
|
8636
8660
|
this.scrollRequestAnimationFrame = requestAnimationFrame(() => {
|
|
8637
|
-
|
|
8638
|
-
this.
|
|
8661
|
+
// 세로 가상 스크롤 계산
|
|
8662
|
+
if (this.useVirtualScroll.vertical && this.scrollTopPosition !== scrollTop) {
|
|
8663
|
+
this.scrollTopPosition = scrollTop;
|
|
8664
|
+
this.calculateVisibleRange();
|
|
8665
|
+
}
|
|
8666
|
+
// 가로 가상 스크롤 계산
|
|
8667
|
+
if (this.useVirtualScroll.horizontal && this.scrollLeftPosition !== scrollLeft) {
|
|
8668
|
+
this.scrollLeftPosition = scrollLeft;
|
|
8669
|
+
this.calculateVisibleColumnRange();
|
|
8670
|
+
}
|
|
8639
8671
|
this.scrollRequestAnimationFrame = null;
|
|
8640
8672
|
});
|
|
8641
8673
|
}
|
|
@@ -8660,7 +8692,7 @@ class SdTable {
|
|
|
8660
8692
|
return result;
|
|
8661
8693
|
}
|
|
8662
8694
|
get virtualRows() {
|
|
8663
|
-
if (!this.useVirtualScroll) {
|
|
8695
|
+
if (!this.useVirtualScroll.vertical) {
|
|
8664
8696
|
return this.paginatedRows.map((row, idx) => ({ row, actualIndex: idx }));
|
|
8665
8697
|
}
|
|
8666
8698
|
return this.paginatedRows
|
|
@@ -8671,18 +8703,40 @@ class SdTable {
|
|
|
8671
8703
|
}));
|
|
8672
8704
|
}
|
|
8673
8705
|
get topSpacerHeight() {
|
|
8674
|
-
if (!this.useVirtualScroll || this.virtualStartIndex === 0)
|
|
8706
|
+
if (!this.useVirtualScroll.vertical || this.virtualStartIndex === 0)
|
|
8675
8707
|
return 0;
|
|
8676
8708
|
return this.virtualStartIndex * this.virtualRowHeight;
|
|
8677
8709
|
}
|
|
8678
8710
|
get bottomSpacerHeight() {
|
|
8679
|
-
if (!this.useVirtualScroll)
|
|
8711
|
+
if (!this.useVirtualScroll.vertical)
|
|
8680
8712
|
return 0;
|
|
8681
8713
|
const remainingRows = this.paginatedRows.length - this.virtualEndIndex - 1;
|
|
8682
8714
|
return remainingRows > 0 ? remainingRows * this.virtualRowHeight : 0;
|
|
8683
8715
|
}
|
|
8716
|
+
getHorizontalSpacerWidth(position) {
|
|
8717
|
+
const stickyLeftCount = this.stickyColumn.left || 0;
|
|
8718
|
+
const stickyRightCount = this.stickyColumn.right || 0;
|
|
8719
|
+
const virtualColumnWidths = this.columnWidths.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
|
|
8720
|
+
const remainingCols = virtualColumnWidths.length - this.virtualEndColIdx - 1;
|
|
8721
|
+
if (position === 'right' && remainingCols <= 0)
|
|
8722
|
+
return 0;
|
|
8723
|
+
const targetIndex = position === 'left' ? [0, this.virtualStartColIdx] : [this.virtualEndColIdx + 1];
|
|
8724
|
+
return virtualColumnWidths.slice(...targetIndex).reduce((sum, width) => sum + width, 0);
|
|
8725
|
+
}
|
|
8726
|
+
get leftSpacerWidth() {
|
|
8727
|
+
if (!this.useVirtualScroll.horizontal || this.virtualStartColIdx === 0) {
|
|
8728
|
+
return 0;
|
|
8729
|
+
}
|
|
8730
|
+
return this.getHorizontalSpacerWidth('left');
|
|
8731
|
+
}
|
|
8732
|
+
get rightSpacerWidth() {
|
|
8733
|
+
if (!this.useVirtualScroll.horizontal) {
|
|
8734
|
+
return 0;
|
|
8735
|
+
}
|
|
8736
|
+
return this.getHorizontalSpacerWidth('right');
|
|
8737
|
+
}
|
|
8684
8738
|
get totalVirtualHeight() {
|
|
8685
|
-
if (!this.useVirtualScroll)
|
|
8739
|
+
if (!this.useVirtualScroll.vertical)
|
|
8686
8740
|
return 0;
|
|
8687
8741
|
return this.paginatedRows.length * this.virtualRowHeight;
|
|
8688
8742
|
}
|
|
@@ -8741,8 +8795,9 @@ class SdTable {
|
|
|
8741
8795
|
return true; // 전부 선택됨
|
|
8742
8796
|
return null; // 일부만 선택됨
|
|
8743
8797
|
}
|
|
8798
|
+
// 세로 가상 스크롤 렌더링 계산
|
|
8744
8799
|
calculateVisibleRange() {
|
|
8745
|
-
if (!this.useVirtualScroll) {
|
|
8800
|
+
if (!this.useVirtualScroll.vertical) {
|
|
8746
8801
|
this.virtualStartIndex = 0;
|
|
8747
8802
|
this.virtualEndIndex = this.paginatedRows.length - 1;
|
|
8748
8803
|
return;
|
|
@@ -8752,8 +8807,60 @@ class SdTable {
|
|
|
8752
8807
|
const startIndex = Math.floor(scrollTop / this.virtualRowHeight);
|
|
8753
8808
|
const visibleCount = Math.ceil(containerHeight / this.virtualRowHeight);
|
|
8754
8809
|
const endIndex = startIndex + visibleCount;
|
|
8755
|
-
|
|
8756
|
-
this.
|
|
8810
|
+
const bufferSize = this.virtualBufferSize.vertical || 5;
|
|
8811
|
+
this.virtualStartIndex = Math.max(0, startIndex - bufferSize);
|
|
8812
|
+
this.virtualEndIndex = Math.min(this.paginatedRows.length - 1, endIndex + bufferSize);
|
|
8813
|
+
}
|
|
8814
|
+
// 가로 가상 스크롤 렌더링 계산
|
|
8815
|
+
calculateVisibleColumnRange() {
|
|
8816
|
+
if (!this.useVirtualScroll.horizontal) {
|
|
8817
|
+
this.virtualStartColIdx = 0;
|
|
8818
|
+
this.virtualEndColIdx = this.visibleColumns.length - 1;
|
|
8819
|
+
return;
|
|
8820
|
+
}
|
|
8821
|
+
const scrollLeft = this.scrollLeftPosition;
|
|
8822
|
+
const containerWidth = this.scrollContainer?.clientWidth || 0;
|
|
8823
|
+
const stickyLeftCount = this.stickyColumn.left || 0;
|
|
8824
|
+
const stickyRightCount = this.stickyColumn.right || 0;
|
|
8825
|
+
// 가상 스크롤 컬럼 - sticky column 제외
|
|
8826
|
+
const virtualColumns = this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
|
|
8827
|
+
if (virtualColumns.length === 0) {
|
|
8828
|
+
this.virtualStartColIdx = 0;
|
|
8829
|
+
this.virtualEndColIdx = 0;
|
|
8830
|
+
return;
|
|
8831
|
+
}
|
|
8832
|
+
const stickyLeftWidth = this.columnWidths.slice(0, stickyLeftCount).reduce((sum, width) => sum + width, 0) +
|
|
8833
|
+
(this.selectable ? 52 : 0);
|
|
8834
|
+
const stickyRightWidth = this.columnWidths
|
|
8835
|
+
.slice(this.visibleColumns.length - stickyRightCount)
|
|
8836
|
+
.reduce((sum, width) => sum + width, 0);
|
|
8837
|
+
// 가상 스크롤 영역의 너비 계산
|
|
8838
|
+
const virtualScrollableWidth = containerWidth - stickyLeftWidth - stickyRightWidth;
|
|
8839
|
+
const virtualColumnWidths = this.columnWidths.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
|
|
8840
|
+
const virtualScrollLeft = Math.max(0, scrollLeft - stickyLeftWidth);
|
|
8841
|
+
const reducedVirtualWidth = virtualColumnWidths.reduce((acc, width, idx) => {
|
|
8842
|
+
acc.push((acc[idx - 1] || 0) + width);
|
|
8843
|
+
return acc;
|
|
8844
|
+
}, []);
|
|
8845
|
+
let startIdx = 0; // 가상 스크롤 시작 인덱스
|
|
8846
|
+
let endIdx = virtualColumns.length - 1; // 가상 스크롤 종료 인덱스
|
|
8847
|
+
// sticky left 영역 제외한 스크롤 위치
|
|
8848
|
+
for (let i = 0; i < reducedVirtualWidth.length; i++) {
|
|
8849
|
+
if (reducedVirtualWidth[i] > virtualScrollLeft) {
|
|
8850
|
+
startIdx = Math.max(0, i);
|
|
8851
|
+
break;
|
|
8852
|
+
}
|
|
8853
|
+
}
|
|
8854
|
+
const scrollRight = virtualScrollLeft + virtualScrollableWidth;
|
|
8855
|
+
for (let i = startIdx; i < reducedVirtualWidth.length; i++) {
|
|
8856
|
+
if (reducedVirtualWidth[i] >= scrollRight) {
|
|
8857
|
+
endIdx = Math.min(virtualColumns.length - 1, i);
|
|
8858
|
+
break;
|
|
8859
|
+
}
|
|
8860
|
+
}
|
|
8861
|
+
const bufferSize = this.virtualBufferSize.horizontal || 5;
|
|
8862
|
+
this.virtualStartColIdx = Math.max(0, startIdx - bufferSize);
|
|
8863
|
+
this.virtualEndColIdx = Math.min(virtualColumns.length - 1, endIdx + bufferSize);
|
|
8757
8864
|
}
|
|
8758
8865
|
// ----- Helpers -----
|
|
8759
8866
|
getStickyStyle(colIdx) {
|
|
@@ -8796,34 +8903,71 @@ class SdTable {
|
|
|
8796
8903
|
const value = typeof field === 'function' ? field(row) : field ? row[field] : row[name];
|
|
8797
8904
|
return format ? format(value, row) : value;
|
|
8798
8905
|
}
|
|
8906
|
+
getColumnRenderedInOrder() {
|
|
8907
|
+
const stickyLeftCount = this.stickyColumn.left || 0;
|
|
8908
|
+
const stickyRightCount = this.stickyColumn.right || 0;
|
|
8909
|
+
// Sticky left 컬럼들
|
|
8910
|
+
const stickyLeftCols = this.visibleColumns.slice(0, stickyLeftCount);
|
|
8911
|
+
const stickyRightCols = this.visibleColumns.slice(this.visibleColumns.length - stickyRightCount);
|
|
8912
|
+
const middleCols = this.useVirtualScroll.horizontal
|
|
8913
|
+
? this.visibleColumns
|
|
8914
|
+
.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount)
|
|
8915
|
+
.slice(this.virtualStartColIdx, this.virtualEndColIdx + 1)
|
|
8916
|
+
: this.visibleColumns.slice(stickyLeftCount, this.visibleColumns.length - stickyRightCount);
|
|
8917
|
+
return {
|
|
8918
|
+
stickyLeftCount,
|
|
8919
|
+
stickyRightCount,
|
|
8920
|
+
stickyLeftCols,
|
|
8921
|
+
middleCols,
|
|
8922
|
+
stickyRightCols,
|
|
8923
|
+
};
|
|
8924
|
+
}
|
|
8799
8925
|
// ----- Render -----
|
|
8800
|
-
|
|
8926
|
+
renderHead() {
|
|
8927
|
+
const { stickyLeftCount, stickyRightCount, stickyLeftCols, middleCols, stickyRightCols } = this.getColumnRenderedInOrder();
|
|
8801
8928
|
return (hAsync("thead", null, hAsync("tr", null, this.selectable && (hAsync("th", { class: {
|
|
8802
8929
|
'sd-th': true,
|
|
8803
8930
|
'sd-th--selected': true,
|
|
8804
8931
|
'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
|
|
8805
8932
|
}, style: {
|
|
8806
8933
|
'--sticky-left-offset': '0px',
|
|
8807
|
-
} }, hAsync("sd-checkbox", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (e) => this.toggleSelectAll(e.detail) }))),
|
|
8808
|
-
|
|
8809
|
-
|
|
8810
|
-
|
|
8811
|
-
|
|
8812
|
-
|
|
8813
|
-
|
|
8814
|
-
|
|
8815
|
-
|
|
8934
|
+
} }, hAsync("sd-checkbox", { checked: this.isAllChecked, disabled: !this.paginatedRows.length, onSdChange: (e) => this.toggleSelectAll(e.detail) }))), stickyLeftCols.map((col, idx) => {
|
|
8935
|
+
const rendered = this.headerCellRenderer?.(col);
|
|
8936
|
+
return (hAsync("th", { key: col.name, class: {
|
|
8937
|
+
'sd-th': true,
|
|
8938
|
+
[`${col.thClass}`]: Boolean(col.thClass),
|
|
8939
|
+
'sticky-left': true,
|
|
8940
|
+
'sticky-left-edge': idx === stickyLeftCount - 1,
|
|
8941
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(idx) } }, hAsync("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, hAsync("slot", { name: `header-cell-${col.name}` }, hAsync("div", { class: "sd-th__content--label" }, rendered ? (typeof rendered === 'string' ? (hAsync("span", { innerHTML: rendered })) : (rendered)) : (col.label))), col.usePageMoveIcon && hAsync("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (hAsync("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(idx, evt) }))));
|
|
8942
|
+
}), this.renderSpacerTd('left', -1), middleCols.map((col, relativeIdx) => {
|
|
8943
|
+
const actualColIdx = stickyLeftCount + this.virtualStartColIdx + relativeIdx;
|
|
8944
|
+
const rendered = this.headerCellRenderer?.(col);
|
|
8945
|
+
return (hAsync("th", { key: col.name, class: {
|
|
8946
|
+
'sd-th': true,
|
|
8947
|
+
[`${col.thClass}`]: Boolean(col.thClass),
|
|
8948
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, hAsync("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, hAsync("slot", { name: `header-cell-${col.name}` }, hAsync("div", { class: "sd-th__content--label" }, rendered ? (typeof rendered === 'string' ? (hAsync("span", { innerHTML: rendered })) : (rendered)) : (col.label))), col.usePageMoveIcon && hAsync("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (hAsync("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
|
|
8949
|
+
}), this.renderSpacerTd('right', -1), stickyRightCols.map((col, relativeIdx) => {
|
|
8950
|
+
const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
|
|
8951
|
+
const rendered = this.headerCellRenderer?.(col);
|
|
8952
|
+
return (hAsync("th", { key: col.name, class: {
|
|
8953
|
+
'sd-th': true,
|
|
8954
|
+
[`${col.thClass}`]: Boolean(col.thClass),
|
|
8955
|
+
'sticky-right': true,
|
|
8956
|
+
'sticky-right-edge': relativeIdx === 0,
|
|
8957
|
+
}, style: { ...col.thStyle, ...this.getStickyStyle(actualColIdx) } }, hAsync("div", { class: `sd-th__content sd-th__content--${col.align || 'left'}` }, hAsync("slot", { name: `header-cell-${col.name}` }, hAsync("div", { class: "sd-th__content--label" }, rendered ? (typeof rendered === 'string' ? (hAsync("span", { innerHTML: rendered })) : (rendered)) : (col.label))), col.usePageMoveIcon && hAsync("sd-icon", { name: "pageMove", size: "12", color: "#006AC1" }), col.tooltip && (hAsync("sd-tooltip", { ...col.tooltipOptions }, hAsync("div", { slot: "content" }, col.tooltip.map(text => (hAsync("p", null, text))))))), this.resizable && typeof window !== 'undefined' && (hAsync("div", { class: "sd-th__resizer", onMouseDown: (evt) => this.handleResize(actualColIdx, evt) }))));
|
|
8958
|
+
}))));
|
|
8816
8959
|
}
|
|
8817
8960
|
renderBody() {
|
|
8818
|
-
return (hAsync("tbody", { ...(!this.paginatedRows.length && { part: 'tbody-empty' }), class: `sd-table-tbody ${this.useVirtualScroll ? 'sd-table-tbody--virtual-scroll' : ''}`, style: { '--total-virtual-height': `${this.totalVirtualHeight}px` } }, this.isLoading && (hAsync("div", { class: "sd-table__loading" }, hAsync("sd-loading-spinner", null))), this.useVirtualScroll && this.topSpacerHeight > 0 && (hAsync("tr", { key: "virtual-top-spacer", style: {
|
|
8961
|
+
return (hAsync("tbody", { ...(!this.paginatedRows.length && { part: 'tbody-empty' }), class: `sd-table-tbody ${this.useVirtualScroll.vertical ? 'sd-table-tbody--virtual-scroll' : ''}`, style: { '--total-virtual-height': `${this.totalVirtualHeight}px` } }, this.isLoading && (hAsync("div", { class: "sd-table__loading" }, hAsync("sd-loading-spinner", null))), this.useVirtualScroll.vertical && this.topSpacerHeight > 0 && (hAsync("tr", { key: "virtual-top-spacer", class: "sd-table__virtual-row-spacer", style: {
|
|
8819
8962
|
height: `${this.topSpacerHeight}px`,
|
|
8820
|
-
}, "aria-hidden": "true" })), this.paginatedRows.length > 0 &&
|
|
8821
|
-
this.virtualRows.map(({ row, actualIndex }) => this.renderRow(row, actualIndex)), this.useVirtualScroll && this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "virtual-bottom-spacer", style: {
|
|
8963
|
+
}, "aria-hidden": "true" }, hAsync("td", { colSpan: this.visibleColumns.length + (this.selectable ? 1 : 0) }, hAsync("div", { class: "sd-table__skeleton" })))), this.paginatedRows.length > 0 &&
|
|
8964
|
+
this.virtualRows.map(({ row, actualIndex }) => this.renderRow(row, actualIndex)), this.useVirtualScroll.vertical && this.bottomSpacerHeight > 0 && (hAsync("tr", { key: "virtual-bottom-spacer", class: "sd-table__virtual-row-spacer", style: {
|
|
8822
8965
|
height: `${this.bottomSpacerHeight}px`,
|
|
8823
|
-
}, "aria-hidden": "true" }))));
|
|
8966
|
+
}, "aria-hidden": "true" }, hAsync("td", { colSpan: this.visibleColumns.length + (this.selectable ? 1 : 0) }, hAsync("div", { class: "sd-table__skeleton" }))))));
|
|
8824
8967
|
}
|
|
8825
8968
|
renderRow(row, rowIdx) {
|
|
8826
|
-
|
|
8969
|
+
const { stickyLeftCount, stickyRightCount, stickyLeftCols, middleCols, stickyRightCols } = this.getColumnRenderedInOrder();
|
|
8970
|
+
return (hAsync("tr", { key: row[this.rowKey], class: "hover:bg-Grey_Lighten-6", style: this.useVirtualScroll.vertical
|
|
8827
8971
|
? {
|
|
8828
8972
|
height: `${this.virtualRowHeight}px`,
|
|
8829
8973
|
}
|
|
@@ -8833,29 +8977,61 @@ class SdTable {
|
|
|
8833
8977
|
'sticky-left': Boolean(this.stickyColumn.left && this.stickyColumn.left > 0),
|
|
8834
8978
|
}, style: {
|
|
8835
8979
|
'--sticky-left-offset': '0px',
|
|
8836
|
-
} }, hAsync("sd-checkbox", { checked: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdChange: () => this.updateRowSelect(row) }))),
|
|
8980
|
+
} }, hAsync("sd-checkbox", { checked: this.isRowSelected(row), disabled: !this.paginatedRows.length, onSdChange: () => this.updateRowSelect(row) }))), stickyLeftCols.map((column, idx) => {
|
|
8837
8981
|
const rendered = this.bodyCellRenderer?.(column, row);
|
|
8838
8982
|
return (hAsync("td", { key: column.name, part: `td-${column.name}`, class: {
|
|
8839
8983
|
'sd-td': true,
|
|
8840
8984
|
[`sd-td--${column.align || 'left'}`]: true,
|
|
8841
|
-
'sticky-left':
|
|
8842
|
-
'sticky-
|
|
8843
|
-
'sticky-left-edge': Boolean(this.stickyColumn.left && colIdx === this.stickyColumn.left - 1),
|
|
8844
|
-
'sticky-right-edge': Boolean(this.stickyColumn.right &&
|
|
8845
|
-
colIdx === this.visibleColumns.length - this.stickyColumn.right),
|
|
8985
|
+
'sticky-left': true,
|
|
8986
|
+
'sticky-left-edge': idx === stickyLeftCount - 1,
|
|
8846
8987
|
[`${column.tdClass}`]: Boolean(column.tdClass),
|
|
8847
|
-
}, style: this.getStickyStyle(
|
|
8988
|
+
}, style: this.getStickyStyle(idx) }, hAsync("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (hAsync("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
|
|
8989
|
+
}), this.renderSpacerTd('left', rowIdx), middleCols.map((column, relativeIdx) => {
|
|
8990
|
+
const actualColIdx = stickyLeftCount + this.virtualStartColIdx + relativeIdx;
|
|
8991
|
+
const rendered = this.bodyCellRenderer?.(column, row);
|
|
8992
|
+
return (hAsync("td", { key: column.name, part: `td-${column.name}`, class: {
|
|
8993
|
+
'sd-td': true,
|
|
8994
|
+
[`sd-td--${column.align || 'left'}`]: true,
|
|
8995
|
+
[`${column.tdClass}`]: Boolean(column.tdClass),
|
|
8996
|
+
}, style: this.getStickyStyle(actualColIdx) }, hAsync("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (hAsync("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
|
|
8997
|
+
}), this.renderSpacerTd('right', rowIdx), stickyRightCols.map((column, relativeIdx) => {
|
|
8998
|
+
const actualColIdx = this.visibleColumns.length - stickyRightCount + relativeIdx;
|
|
8999
|
+
const rendered = this.bodyCellRenderer?.(column, row);
|
|
9000
|
+
return (hAsync("td", { key: column.name, part: `td-${column.name}`, class: {
|
|
9001
|
+
'sd-td': true,
|
|
9002
|
+
[`sd-td--${column.align || 'left'}`]: true,
|
|
9003
|
+
'sticky-right': true,
|
|
9004
|
+
'sticky-right-edge': relativeIdx === 0,
|
|
9005
|
+
[`${column.tdClass}`]: Boolean(column.tdClass),
|
|
9006
|
+
}, style: this.getStickyStyle(actualColIdx) }, hAsync("slot", { name: `body-cell-${column.name}-${rowIdx}` }, rendered ? (typeof rendered === 'string' ? (hAsync("span", { innerHTML: rendered })) : (rendered)) : (this.getCellValue(column, row)))));
|
|
8848
9007
|
})));
|
|
8849
9008
|
}
|
|
9009
|
+
renderSpacerTd(position, rowIdx) {
|
|
9010
|
+
const spacerWidth = position === 'left' ? this.leftSpacerWidth : this.rightSpacerWidth;
|
|
9011
|
+
const showSpacer = position === 'left'
|
|
9012
|
+
? this.useVirtualScroll.horizontal && this.leftSpacerWidth > 0
|
|
9013
|
+
: this.useVirtualScroll.horizontal && this.rightSpacerWidth > 0;
|
|
9014
|
+
if (!showSpacer)
|
|
9015
|
+
return null;
|
|
9016
|
+
return (hAsync("td", { key: `virtual-${position}-spacer-${rowIdx}`, class: "sd-table__virtual-spacer", style: {
|
|
9017
|
+
width: `${spacerWidth}px`,
|
|
9018
|
+
minWidth: `${spacerWidth}px`,
|
|
9019
|
+
maxWidth: `${spacerWidth}px`,
|
|
9020
|
+
padding: '0',
|
|
9021
|
+
border: 'none',
|
|
9022
|
+
}, "aria-hidden": "true" }, hAsync("div", { class: "sd-table__skeleton" })));
|
|
9023
|
+
}
|
|
8850
9024
|
render() {
|
|
8851
|
-
return (hAsync(Host, { key: '
|
|
9025
|
+
return (hAsync(Host, { key: '06caa893329f7de501804922dea824c01fc393bb' }, hAsync("div", { key: '7b806f1fa25c60e11dd22cf67177c4856a576e76', class: "sd-table__wrapper", style: {
|
|
8852
9026
|
'--table-width': this.width,
|
|
8853
9027
|
'--table-height': this.height,
|
|
8854
|
-
} }, hAsync("div", { key: '
|
|
9028
|
+
} }, hAsync("div", { key: '6d24df1310c746fe7742dbeee3750d62bd286c25', class: "sd-table__container", style: {
|
|
9029
|
+
'--table-container-height': `calc(${this.height} - ${this.pagination && this.innerRows.length > 0 ? 48 : 0}px)`,
|
|
9030
|
+
} }, hAsync("div", { key: 'de042c2e56baa207d1602b6d9cdcbe7d2c2780dd', class: {
|
|
8855
9031
|
'sd-table__middle': true,
|
|
8856
9032
|
'sd-table__middle--scrollable': this.paginatedRows.length > 0,
|
|
8857
9033
|
'sd-table__middle--loading': this.isLoading,
|
|
8858
|
-
} }, hAsync("table", { key: '
|
|
9034
|
+
} }, hAsync("table", { key: 'f392dbedf10677e704e0dd6fc1233dc931e2e017', part: "table", class: this.sdTableClasses }, this.renderHead(), this.renderBody())), hAsync("div", { key: '99fa9cff08bd0599a63a34caba645e9893ea963d', class: "sd-table__bottom" }, !this.paginatedRows.length && (hAsync("div", { key: '3e135dd33d5188abbe753b03c9a0c6c6f38210dc', class: "sd-table__no-data" }, hAsync("slot", { key: '144d91b72af6ca2b966e7d3de783eb09f6880b20', name: "no-data" }, this.noDataLabel))))), this.pagination && this.innerRows.length > 0 && (hAsync("div", { key: '0ce235dc30c09823f3bc37b47dfd4d1941d3dbd8', class: "sd-table__pagination" }, hAsync("sd-pagination", { key: 'e68be3464a8e8c6e99290e6ec3308d22c4238738', currentPage: !this.useInternalPagination ? this.pagination.page : this.currentPage, lastPage: !this.useInternalPagination ? this.pagination.lastPage : this.lastPageNumber, onPageChange: (e) => {
|
|
8859
9035
|
if (!this.useInternalPagination) {
|
|
8860
9036
|
this.sdPageChange.emit(e.detail);
|
|
8861
9037
|
}
|
|
@@ -8863,7 +9039,7 @@ class SdTable {
|
|
|
8863
9039
|
this.currentPage = e.detail;
|
|
8864
9040
|
this.sdPageChange.emit(this.currentPage);
|
|
8865
9041
|
}
|
|
8866
|
-
} }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: '
|
|
9042
|
+
} }), this.useRowsPerPageSelect && (hAsync("sd-select", { key: 'ba48f26b761cd65c5f52f4b4734be6c2a55120f1', value: this.pagination.rowsPerPage, options: this.rowsPerPageOption, width: "128px", onSdChange: (e) => {
|
|
8867
9043
|
const changedRowsPerPage = e.detail.value ? Number(e.detail.value) : 0;
|
|
8868
9044
|
if (!this.useInternalPagination) {
|
|
8869
9045
|
this.sdRowsPerPageChange.emit(changedRowsPerPage);
|
|
@@ -8887,6 +9063,7 @@ class SdTable {
|
|
|
8887
9063
|
}
|
|
8888
9064
|
static get watchers() { return {
|
|
8889
9065
|
"columns": ["handleColumnsChange"],
|
|
9066
|
+
"columnWidths": ["handleColumnWidthsChange"],
|
|
8890
9067
|
"rows": ["handleRowsChange"],
|
|
8891
9068
|
"selected": ["handleSelectedChange"],
|
|
8892
9069
|
"pagination": ["handlePaginationChange"]
|
|
@@ -8909,13 +9086,15 @@ class SdTable {
|
|
|
8909
9086
|
"noDataLabel": [1, "no-data-label"],
|
|
8910
9087
|
"isLoading": [4, "is-loading"],
|
|
8911
9088
|
"pagination": [16],
|
|
9089
|
+
"headerCellRenderer": [16],
|
|
8912
9090
|
"bodyCellRenderer": [16],
|
|
8913
9091
|
"useInternalPagination": [4, "use-internal-pagination"],
|
|
8914
9092
|
"useRowsPerPageSelect": [4, "use-rows-per-page-select"],
|
|
8915
9093
|
"rowsPerPageOption": [16],
|
|
8916
|
-
"useVirtualScroll": [
|
|
9094
|
+
"useVirtualScroll": [16],
|
|
8917
9095
|
"virtualRowHeight": [2, "virtual-row-height"],
|
|
8918
|
-
"
|
|
9096
|
+
"virtualColumnWidth": [2, "virtual-column-width"],
|
|
9097
|
+
"virtualBufferSize": [16],
|
|
8919
9098
|
"currentPage": [32],
|
|
8920
9099
|
"innerRows": [32],
|
|
8921
9100
|
"innerSelected": [32],
|
|
@@ -8924,7 +9103,10 @@ class SdTable {
|
|
|
8924
9103
|
"scrolledRight": [32],
|
|
8925
9104
|
"virtualStartIndex": [32],
|
|
8926
9105
|
"virtualEndIndex": [32],
|
|
8927
|
-
"scrollTopPosition": [32]
|
|
9106
|
+
"scrollTopPosition": [32],
|
|
9107
|
+
"virtualStartColIdx": [32],
|
|
9108
|
+
"virtualEndColIdx": [32],
|
|
9109
|
+
"scrollLeftPosition": [32]
|
|
8928
9110
|
},
|
|
8929
9111
|
"$listeners$": undefined,
|
|
8930
9112
|
"$lazyBundleId$": "-",
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sellmate/design-system",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.47",
|
|
4
4
|
"description": "Sellmate Design System - Web Components Library built with Stencil",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"web-components",
|
|
@@ -92,5 +92,5 @@
|
|
|
92
92
|
"@stencil/react-output-target": "^1.2.0",
|
|
93
93
|
"@stencil/vue-output-target": "^0.11.8"
|
|
94
94
|
},
|
|
95
|
-
"gitHead": "
|
|
95
|
+
"gitHead": "0f3da099c6c04c19ea1791acdd6bb805a2dad1d5"
|
|
96
96
|
}
|