@ninebone/table 0.1.38 → 0.1.40

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 {
@@ -32,109 +58,23 @@ nine-table-sheet.active {
 /* --- 세로 스크롤바가 활성화되었을 때만 CSS로 2열 너비 확장 및 요소 표시 --- */
 nine-table-sheet.vscroll-visible {
     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 var(--scrollbar-size);
-}
-
-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;
-}
 
-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;

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

@@ -3350,7 +3350,7 @@ const Qo = class Qo {
         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", "nine-table-vscrollbar", "nine-table-hscrollbar", "table"], l = o.map(
-        (c) => `@import "https://cdn.jsdelivr.net/npm/@ninebone/table@0.1.38/dist/css/${c}";`
+        (c) => `@import "https://cdn.jsdelivr.net/npm/@ninebone/table@0.1.40/dist/css/${c}";`
       ), a = [];
       nine.cssPath && o.forEach((c) => {
         a.push(`@import "${nine.cssPath}/${c}";`);

package/dist/nine-table.umd.js

@@ -273,7 +273,7 @@
             
             <div class="ng-col-mover-grip"></div>
             <div class="ng-col-mover-indi"></div>
-        `,v.log("3333*****************"),p(this,Je,{mainBody:this.querySelector(".ng-sheet-body .ng-container-body"),hscrollbar:this.querySelector("nine-table-hscrollbar"),vscrollbar:this.querySelector("nine-table-vscrollbar"),content:this.querySelector(".ng-sheet-body .ng-sheet-body-content"),scrollHolder:this.querySelector(".ng-sheet-body .ng-virtual-height-holder")}),v.log("444*****************")},"#render"));d(this,Ir,h(()=>{v.log("**********************","#syncHeaderAndFooterHeights");const e=this.querySelector(".ng-container-left table"),s=this.querySelector(".ng-container-body table"),i=this.querySelector(".ng-container-right table"),r=Array.from(e.querySelectorAll("thead tr:not(.col-indicator-rowgroup)")),o=Array.from(s.querySelectorAll("thead tr:not(.col-indicator-rowgroup)")),l=Array.from(i.querySelectorAll("thead tr:not(.col-indicator-rowgroup)"));t(this,Ri).call(this,r,o,l);const a=Array.from(e.querySelectorAll("tfoot tr")),c=Array.from(s.querySelectorAll("tfoot tr")),u=Array.from(i.querySelectorAll("tfoot tr"));t(this,Ri).call(this,a,c,u)},"#syncHeaderAndFooterHeights"));d(this,Ri,h((e,s,i)=>{var o,l,a;const r=Math.max(e.length,s.length,i.length);for(let c=0;c<r;c++){const u=[((o=e[c])==null?void 0:o.getBoundingClientRect().height)||0,((l=s[c])==null?void 0:l.getBoundingClientRect().height)||0,((a=i[c])==null?void 0:a.getBoundingClientRect().height)||0],g=Math.max(...u);g>0&&(e[c]&&(e[c].style.height=`${g}px`),s[c]&&(s[c].style.height=`${g}px`),i[c]&&(i[c].style.height=`${g}px`))}},"#applyMaxHeights"));d(this,qr,h(()=>{const e=this.querySelector(".ng-sheet-body");if(!e)return;let s=null;e.addEventListener("mouseover",i=>{const r=i.target.closest("tr");if(!r||!r.dataset.row&&r.dataset.row!=="0")return;const o=r.dataset.row;s!==o&&(s=o,e.querySelectorAll(`tr[data-row="${o}"]`).forEach(l=>{l.classList.add("hover")}))}),e.addEventListener("mouseout",i=>{const r=i.target.closest("tr");if(!r)return;const o=i.relatedTarget;r.contains(o)||(e.querySelectorAll("tr.hover").forEach(l=>{l.classList.remove("hover")}),s=null)})},"#initRowHoverEvent"));v.log("11111"),p(this,zt,new Hn(this)),v.log("222"),p(this,ae,this.getRootNode().host),v.log("333")}connectedCallback(){t(this,Tr).call(this)}get index(){return t(this,wi)}get colResizer(){return t(this,Ee)}get filtering(){return t(this,Ei)}get grouping(){return t(this,ws)}get colMover(){return t(this,xs)}get colFix(){return t(this,Ai)}get rowManager(){return t(this,zt)}get selection(){return t(this,vi)}get navigation(){return t(this,Si)}get templateLength(){return t(this,qt).tbody.tr.length||0}get elements(){return t(this,Je)}get isAutoFitCol(){var i,r;const e=this.getAttribute("auto-fit-col")==="true"||((i=t(this,ae))==null?void 0:i.getAttribute("auto-fit-col"))==="true",s=((r=t(this,qt).table)==null?void 0:r.getAttribute("auto-fit-col"))==="true";return e||s}get sourceTable(){return t(this,qt).table}get source(){return t(this,qt)}recompileAndRefresh(){var e;t(this,qt).table&&(fe.recompile(t(this,qt).table),["left","right","body"].forEach(s=>{["header","body","footer"].forEach(i=>{const r=this.querySelector(`.ng-sheet-${i} .ng-container-${s}`);r&&r.querySelectorAll("table").forEach(o=>o.remove())})}),t(this,Li).call(this),t(this,Qe).call(this),t(this,zt).initialize(),this.isAutoFitCol?this.autoFit(!0):(e=this.querySelector("nine-table-hscrollbar"))==null||e.refresh(),requestAnimationFrame(()=>{var s;t(this,Qe).call(this),(s=t(this,zt))==null||s.refresh()}))}refreshLayout(){!this.classList.contains("active")||!t(this,qt).table||requestAnimationFrame(()=>{var e,s,i;t(this,Qe).call(this),this.isAutoFitCol?this.autoFit(!0):(e=this.querySelector("nine-table-hscrollbar"))==null||e.refresh(),t(this,Lr).call(this),(s=t(this,Ee))==null||s.refreshLayout(),(i=t(this,zt))==null||i.refresh()})}get view(){var e;return!t(this,Ze)&&((e=t(this,ae))!=null&&e.data)&&p(this,Ze,new Vi(this)),t(this,Ze)}disconnectedCallback(){var e,s;(e=t(this,Ee))==null||e.destroy(),(s=t(this,xs))==null||s.destroy(),this.innerHTML=""}};wi=new WeakMap,ae=new WeakMap,zt=new WeakMap,vi=new WeakMap,Si=new WeakMap,Ee=new WeakMap,xs=new WeakMap,Ai=new WeakMap,Ar=new WeakMap,Ei=new WeakMap,ws=new WeakMap,Ze=new WeakMap,qt=new WeakMap,Je=new WeakMap,Er=new WeakSet,Yl=h(function(){return t(this,ae).hasAttribute("simple")||t(this,ae).getAttribute("theme")==="simple"},"#isSimple"),Lr=new WeakMap,Rr=new WeakMap,Qe=new WeakMap,Li=new WeakMap,Cr=new WeakMap,Tr=new WeakMap,kr=new WeakMap,Ir=new WeakMap,Ri=new WeakMap,qr=new WeakMap,h(Ci,"NineTableSheet"),E(Ci,"SCROLLBAR_SIZE",16);let Xi=Ci;customElements.get("nine-table-sheet")||customElements.define("nine-table-sheet",Xi);const Do=class Do{constructor(n){d(this,it);d(this,Mr,h(()=>{t(this,Hr).call(this),new ResizeObserver(n=>{for(let e of n)t(this,it).getAttribute("auto-height")==="true"&&t(this,Ti).call(this)}).observe(t(this,it))},"#init"));d(this,Ti,h(()=>{const n=Array.from(t(this,it).shadowRoot.querySelectorAll("nine-table-sheet.active"));if(n.length===0)return;const e=parseInt(t(this,it).getAttribute("max-display-row"),10)||10,s=Math.max(...n.map(u=>u.getRowHeight())),i=t(this,it).shadowRoot.querySelector("nine-table-toolbar"),r=t(this,it).shadowRoot.querySelector("nine-table-sheets-footer"),o=i?i.getBoundingClientRect().height:0,l=r?r.getBoundingClientRect().height:0,a=Xi.SCROLLBAR_SIZE,c=e*s+o+l+a;t(this,it).style.height=`${c}px`},"#applyAutoHeight"));d(this,Hr,h(()=>{const e=Array.from(t(this,it).children).filter(c=>c.tagName.toUpperCase()==="TABLE"),s=t(this,it).getAttribute("auto-height")==="true",i=e.length,r=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","nine-table-vscrollbar","nine-table-hscrollbar","table"],l=o.map(c=>`@import "https://cdn.jsdelivr.net/npm/@ninebone/table@0.1.38/dist/css/${c}";`),a=[];nine.cssPath&&o.forEach(c=>{a.push(`@import "${nine.cssPath}/${c}";`)}),t(this,it).shadowRoot.innerHTML=`
+        `,v.log("3333*****************"),p(this,Je,{mainBody:this.querySelector(".ng-sheet-body .ng-container-body"),hscrollbar:this.querySelector("nine-table-hscrollbar"),vscrollbar:this.querySelector("nine-table-vscrollbar"),content:this.querySelector(".ng-sheet-body .ng-sheet-body-content"),scrollHolder:this.querySelector(".ng-sheet-body .ng-virtual-height-holder")}),v.log("444*****************")},"#render"));d(this,Ir,h(()=>{v.log("**********************","#syncHeaderAndFooterHeights");const e=this.querySelector(".ng-container-left table"),s=this.querySelector(".ng-container-body table"),i=this.querySelector(".ng-container-right table"),r=Array.from(e.querySelectorAll("thead tr:not(.col-indicator-rowgroup)")),o=Array.from(s.querySelectorAll("thead tr:not(.col-indicator-rowgroup)")),l=Array.from(i.querySelectorAll("thead tr:not(.col-indicator-rowgroup)"));t(this,Ri).call(this,r,o,l);const a=Array.from(e.querySelectorAll("tfoot tr")),c=Array.from(s.querySelectorAll("tfoot tr")),u=Array.from(i.querySelectorAll("tfoot tr"));t(this,Ri).call(this,a,c,u)},"#syncHeaderAndFooterHeights"));d(this,Ri,h((e,s,i)=>{var o,l,a;const r=Math.max(e.length,s.length,i.length);for(let c=0;c<r;c++){const u=[((o=e[c])==null?void 0:o.getBoundingClientRect().height)||0,((l=s[c])==null?void 0:l.getBoundingClientRect().height)||0,((a=i[c])==null?void 0:a.getBoundingClientRect().height)||0],g=Math.max(...u);g>0&&(e[c]&&(e[c].style.height=`${g}px`),s[c]&&(s[c].style.height=`${g}px`),i[c]&&(i[c].style.height=`${g}px`))}},"#applyMaxHeights"));d(this,qr,h(()=>{const e=this.querySelector(".ng-sheet-body");if(!e)return;let s=null;e.addEventListener("mouseover",i=>{const r=i.target.closest("tr");if(!r||!r.dataset.row&&r.dataset.row!=="0")return;const o=r.dataset.row;s!==o&&(s=o,e.querySelectorAll(`tr[data-row="${o}"]`).forEach(l=>{l.classList.add("hover")}))}),e.addEventListener("mouseout",i=>{const r=i.target.closest("tr");if(!r)return;const o=i.relatedTarget;r.contains(o)||(e.querySelectorAll("tr.hover").forEach(l=>{l.classList.remove("hover")}),s=null)})},"#initRowHoverEvent"));v.log("11111"),p(this,zt,new Hn(this)),v.log("222"),p(this,ae,this.getRootNode().host),v.log("333")}connectedCallback(){t(this,Tr).call(this)}get index(){return t(this,wi)}get colResizer(){return t(this,Ee)}get filtering(){return t(this,Ei)}get grouping(){return t(this,ws)}get colMover(){return t(this,xs)}get colFix(){return t(this,Ai)}get rowManager(){return t(this,zt)}get selection(){return t(this,vi)}get navigation(){return t(this,Si)}get templateLength(){return t(this,qt).tbody.tr.length||0}get elements(){return t(this,Je)}get isAutoFitCol(){var i,r;const e=this.getAttribute("auto-fit-col")==="true"||((i=t(this,ae))==null?void 0:i.getAttribute("auto-fit-col"))==="true",s=((r=t(this,qt).table)==null?void 0:r.getAttribute("auto-fit-col"))==="true";return e||s}get sourceTable(){return t(this,qt).table}get source(){return t(this,qt)}recompileAndRefresh(){var e;t(this,qt).table&&(fe.recompile(t(this,qt).table),["left","right","body"].forEach(s=>{["header","body","footer"].forEach(i=>{const r=this.querySelector(`.ng-sheet-${i} .ng-container-${s}`);r&&r.querySelectorAll("table").forEach(o=>o.remove())})}),t(this,Li).call(this),t(this,Qe).call(this),t(this,zt).initialize(),this.isAutoFitCol?this.autoFit(!0):(e=this.querySelector("nine-table-hscrollbar"))==null||e.refresh(),requestAnimationFrame(()=>{var s;t(this,Qe).call(this),(s=t(this,zt))==null||s.refresh()}))}refreshLayout(){!this.classList.contains("active")||!t(this,qt).table||requestAnimationFrame(()=>{var e,s,i;t(this,Qe).call(this),this.isAutoFitCol?this.autoFit(!0):(e=this.querySelector("nine-table-hscrollbar"))==null||e.refresh(),t(this,Lr).call(this),(s=t(this,Ee))==null||s.refreshLayout(),(i=t(this,zt))==null||i.refresh()})}get view(){var e;return!t(this,Ze)&&((e=t(this,ae))!=null&&e.data)&&p(this,Ze,new Vi(this)),t(this,Ze)}disconnectedCallback(){var e,s;(e=t(this,Ee))==null||e.destroy(),(s=t(this,xs))==null||s.destroy(),this.innerHTML=""}};wi=new WeakMap,ae=new WeakMap,zt=new WeakMap,vi=new WeakMap,Si=new WeakMap,Ee=new WeakMap,xs=new WeakMap,Ai=new WeakMap,Ar=new WeakMap,Ei=new WeakMap,ws=new WeakMap,Ze=new WeakMap,qt=new WeakMap,Je=new WeakMap,Er=new WeakSet,Yl=h(function(){return t(this,ae).hasAttribute("simple")||t(this,ae).getAttribute("theme")==="simple"},"#isSimple"),Lr=new WeakMap,Rr=new WeakMap,Qe=new WeakMap,Li=new WeakMap,Cr=new WeakMap,Tr=new WeakMap,kr=new WeakMap,Ir=new WeakMap,Ri=new WeakMap,qr=new WeakMap,h(Ci,"NineTableSheet"),E(Ci,"SCROLLBAR_SIZE",16);let Xi=Ci;customElements.get("nine-table-sheet")||customElements.define("nine-table-sheet",Xi);const Do=class Do{constructor(n){d(this,it);d(this,Mr,h(()=>{t(this,Hr).call(this),new ResizeObserver(n=>{for(let e of n)t(this,it).getAttribute("auto-height")==="true"&&t(this,Ti).call(this)}).observe(t(this,it))},"#init"));d(this,Ti,h(()=>{const n=Array.from(t(this,it).shadowRoot.querySelectorAll("nine-table-sheet.active"));if(n.length===0)return;const e=parseInt(t(this,it).getAttribute("max-display-row"),10)||10,s=Math.max(...n.map(u=>u.getRowHeight())),i=t(this,it).shadowRoot.querySelector("nine-table-toolbar"),r=t(this,it).shadowRoot.querySelector("nine-table-sheets-footer"),o=i?i.getBoundingClientRect().height:0,l=r?r.getBoundingClientRect().height:0,a=Xi.SCROLLBAR_SIZE,c=e*s+o+l+a;t(this,it).style.height=`${c}px`},"#applyAutoHeight"));d(this,Hr,h(()=>{const e=Array.from(t(this,it).children).filter(c=>c.tagName.toUpperCase()==="TABLE"),s=t(this,it).getAttribute("auto-height")==="true",i=e.length,r=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","nine-table-vscrollbar","nine-table-hscrollbar","table"],l=o.map(c=>`@import "https://cdn.jsdelivr.net/npm/@ninebone/table@0.1.40/dist/css/${c}";`),a=[];nine.cssPath&&o.forEach(c=>{a.push(`@import "${nine.cssPath}/${c}";`)}),t(this,it).shadowRoot.innerHTML=`
             <style>
                 ${[...l,...a].join(`
 `)}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ninebone/table",
-  "version": "0.1.38",
+  "version": "0.1.40",
   "description": "Grid component for real-time collaboration (Vanilla JS based)",
   "type": "module",
   "main": "./dist/nine-table.umd.js",