@ninebone/table 0.1.37 → 0.1.39

package/dist/css/layout.css

@@ -1,3 +1,6 @@
+:host {
+    --scrollbar-size: 16px;
+}
 
 nine-table-filter-panel, cell-combo-panel {
     z-index: 2;

package/dist/css/nine-table-hscrollbar.css

@@ -0,0 +1,3 @@
+nine-table-hscrollbar {
+    display: none; /* 평소에는 기본 숨김 */
+}

package/dist/css/nine-table-sheet.css

@@ -8,21 +8,47 @@ nine-table-sheet {
     box-sizing: border-box;
     background: #ffffff;
     overflow: hidden;
-}
 
+    .ng-sheet-body {
+        display: block;
+        flex: 1 1 auto;
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+        overflow-x: hidden;
+        position: relative;
+        scrollbar-width: none;
+        &::-webkit-scrollbar { display: none; height: 0px; width: 0px; }
+    }
 
-nine-table-sheet .ng-sheet-body thead {
-    display: table-header-group;
-    position: sticky;
-    top: 0;
-    z-index: 10;
-}
-nine-table-sheet .ng-sheet-body tfoot {
-    display: table-footer-group;
-    position: sticky;
-    bottom: 0;
-    z-index: 10;
-    background: red;
+    .ng-sheet-body-content {
+        display: flex;
+        flex-direction: row;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+        position: sticky;
+    }
+
+
+
+    .ng-container-left, .ng-container-body, .ng-container-right {
+        flex-direction: column;
+        position: relative;
+        background: #ffffff;
+    }
+    .ng-container-body {
+        display: flex;
+    }
+
+    .ng-container-left, .ng-container-right {
+        border: none;
+    }
+
+    .ng-scroll-edge {
+        display: none; /* 평소에는 기본 숨김 */
+    }
 }
 
 nine-table-sheet.active {
@@ -31,110 +57,24 @@ nine-table-sheet.active {
 
 /* --- 세로 스크롤바가 활성화되었을 때만 CSS로 2열 너비 확장 및 요소 표시 --- */
 nine-table-sheet.vscroll-visible {
-    grid-template-columns: 1fr ${sbSize}px;
-}
+    grid-template-columns: 1fr var(--scrollbar-size);
 
-nine-table-sheet.vscroll-visible nine-table-vscrollbar {
-    display: flex;
-}
-
-nine-table-vscrollbar {
-    display: none; /* 평소에는 기본 숨김 */
-    border-top: 2px solid #333;
+    nine-table-vscrollbar {
+        display: flex;
+    }
 }
 
 /* --- 가로 스크롤바가 활성화되었을 때만 CSS로 행 높이 확장 및 요소 표시 --- */
 nine-table-sheet.hscroll-visible {
-    grid-template-rows: 1fr ${sbSize}px;
-}
-
-nine-table-sheet.hscroll-visible nine-table-hscrollbar,
-nine-table-sheet.hscroll-visible .ng-scroll-edge {
-    display: flex;
-}
-
-nine-table-hscrollbar,
-nine-table-sheet .ng-scroll-edge {
-    display: none; /* 평소에는 기본 숨김 */
-}
-
-nine-table-sheet .ng-main-content-wrapper {
-    grid-row: 1;
-    grid-column: 1;
-    display: flex;
-    flex-direction: column;
-    width: 100%;
-    height: 100%;
-    overflow: hidden;
-    position: relative;
-}
+    grid-template-rows: 1fr var(--scrollbar-size);
 
-nine-table-sheet .ng-sheet-header,
-nine-table-sheet .ng-sheet-footer {
-    display: flex;
-    flex-direction: row;
-    flex-shrink: 0;
-    width: 100%;
-    background: #f9fafb;
-    z-index: 3;
-    overflow: hidden;
-    box-sizing: border-box;
-}
-
-nine-table-sheet .ng-virtual-height-holder {
-    width: 100%;
-    pointer-events: none;
-    visibility: hidden;
-}
-
-nine-table-sheet .ng-sheet-body {
-    display: block;
-    flex: 1 1 auto;
-    width: 100%;
-    height: 100%;
-    overflow-y: auto;
-    overflow-x: hidden;
-    position: relative;
-    scrollbar-width: none;
-    &::-webkit-scrollbar { display: none; height: 0px; width: 0px; }
-}
-
-nine-table-sheet tbody {
-    position: relative;
-}
-
-nine-table-sheet .ng-sheet-body-content {
-    display: flex;
-    flex-direction: row;
-    width: 100%;
-    height: 100%;
-    left: 0;
-    top: 0;
-    position: sticky;
-}
-
-nine-table-sheet .ng-container-left,
-nine-table-sheet .ng-container-body,
-nine-table-sheet .ng-container-right {
-    display: flex;
-    flex-direction: column;
-    position: relative;
-    background: #ffffff;
+    nine-table-hscrollbar, ng-scroll-edge {
+        display: flex;
+    }
 }
 
-/* 3. 좌우 고정 영역 구분선 제거 */
-.ng-container-left,
-.ng-container-right {
-    border: none;
-}
 
-.ng-container-left, .ng-container-body, .ng-container-right {
-    --border-right: none;
-}
 
-nine-table-sheet tbody.foot {
-    height: 100vh;
-}
 
 nine-table-sheet .ng-container-left {
     --border-right: 1px solid #e5e7eb;
@@ -164,7 +104,7 @@ nine-table-sheet .ng-container-left, nine-table-sheet .ng-container-right {
 nine-table-vscrollbar {
     grid-row: 1;
     grid-column: 2;
-    width: ${sbSize}px;
+    width: var(--scrollbar-size);
     height: 100%;
     z-index: 50;
 }
@@ -174,8 +114,8 @@ nine-table-hscrollbar {
     grid-row: 2;
     grid-column: 1;
     flex-direction: row;
-    height: ${sbSize}px;
-    min-height: ${sbSize}px;
+    height: var(--scrollbar-size);
+    min-height: var(--scrollbar-size);
     background: #f9fafb;
     border-top: 1px solid #e5e7eb;
     z-index: 10;
@@ -187,8 +127,8 @@ nine-table-hscrollbar {
 nine-table-sheet .ng-scroll-edge {
     grid-row: 2;
     grid-column: 2;
-    width: ${sbSize}px;
-    height: ${sbSize}px;
+    width: var(--scrollbar-size);
+    height: var(--scrollbar-size);
     background: #f3f4f6;
     border-top: 1px solid #e5e7eb;
     z-index: 10;

package/dist/css/nine-table-vscrollbar.css

@@ -0,0 +1,4 @@
+nine-table-vscrollbar {
+    display: none; /* 평소에는 기본 숨김 */
+    border-top: 2px solid #333;
+}

package/dist/css/table.css

@@ -0,0 +1,22 @@
+thead {
+    display: table-header-group;
+    position: sticky;
+    top: 0;
+    z-index: 10;
+}
+
+tfoot {
+    display: table-footer-group;
+    position: sticky;
+    bottom: 0;
+    z-index: 10;
+    background: red;
+}
+
+tbody {
+    position: relative;
+}
+
+tbody.foot {
+    height: 100vh;
+}

package/dist/nine-table.js

@@ -3349,8 +3349,8 @@ const Qo = class Qo {
       const e = Array.from(t(this, et).children).filter((c) => c.tagName.toUpperCase() === "TABLE"), s = t(this, et).getAttribute("auto-height") === "true", i = e.length, n = e.map((c, u) => {
         const g = u === 0 ? "active" : "", f = c.id || `sheet${u + 1}`, b = `<nine-table-sheet class="${g}" data-index="${u}" data-sheet-id="${f}" id="${f}"></nine-table-sheet>`, m = u < i - 1 ? `<nine-splitter class="h" data-split-index="${u}"></nine-splitter>` : "";
         return b + m;
-      }).join(""), o = ["layout.css", "nine-table-sheet.css"], l = o.map(
-        (c) => `@import "https://cdn.jsdelivr.net/npm/@ninebone/table@0.1.37/dist/css/${c}";`
+      }).join(""), o = ["layout.css", "nine-table-sheet.css", "nine-table-vscrollbar", "nine-table-hscrollbar", "table"], l = o.map(
+        (c) => `@import "https://cdn.jsdelivr.net/npm/@ninebone/table@0.1.39/dist/css/${c}";`
       ), a = [];
       nine.cssPath && o.forEach((c) => {
         a.push(`@import "${nine.cssPath}/${c}";`);