@ninebone/table 0.0.1

package/dist/nine-table.umd.js

@@ -0,0 +1,47 @@
+(function(e,t){typeof exports=="object"&&typeof module<"u"?t(require("@ninebone/util")):typeof define=="function"&&define.amd?define(["@ninebone/util"],t):(e=typeof globalThis<"u"?globalThis:e||self,t(e.NineboneUtil))})(this,function(e){"use strict";var $=Object.defineProperty;var H=e=>{throw TypeError(e)};var d=(e,t)=>$(e,"name",{value:t,configurable:!0});var L=(e,t,r)=>t.has(e)||H("Cannot "+r);var o=(e,t,r)=>(L(e,t,"read from private field"),r?r.call(e):t.get(e)),a=(e,t,r)=>t.has(e)?H("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,r),p=(e,t,r,f)=>(L(e,t,"write to private field"),f?f.call(e,r):t.set(e,r),r),x=(e,t,r)=>(L(e,t,"access private method"),r);var y,c,s,u,R,A,m,b,B,N,g,v;const C=class C extends e.trace.constructor{constructor(){super(),this.init("nine-table","green")}};d(C,"Trace");let t=C;const r=new t,S=class S{constructor(i,l){a(this,u);a(this,y);a(this,c);a(this,s);p(this,y,i),p(this,c,l),p(this,s,i.shadowRoot)}init(){x(this,u,R).call(this),x(this,u,A).call(this),o(this,c).length>0&&this.renderTable(0),r.log("TableView initialized with proper flex row layout for 3 columns.")}renderTable(i){o(this,c)[i]&&(this.tabBar.innerHTML="",o(this,c).forEach((l,n)=>{const h=document.createElement("div");h.className=`grid-tab-item ${n===i?"active":""}`,h.textContent=`Table ${n+1}`,h.addEventListener("click",()=>this.renderTable(n)),this.tabBar.appendChild(h)}),this.tableContainer.innerHTML="",this.tableContainer.appendChild(o(this,c)[i].cloneNode(!0)),r.log(`Rendered layout tab index: ${i}`))}destroy(){o(this,s).innerHTML="",r.log("TableView destroyed.")}};y=new WeakMap,c=new WeakMap,s=new WeakMap,u=new WeakSet,R=d(function(){o(this,s).innerHTML=`
+            <style>
+                :host { display: block; position: relative; overflow: hidden; height: 100%; }
+                .grid-root { display: flex; flex-direction: column; height: 100%; position: relative; }
+                
+                /* 탭 바와 푸터 사이에 가로로 3개 영역을 나란히 묶어주는 래퍼 추가 */
+                .grid-main-layout { display: flex; flex: 1; overflow: hidden; position: relative; }
+
+                .grid-sidebar-left { width: 150px; flex-shrink: 0; overflow: auto; border-right: 1px solid #e5e7eb; background: #f9fafb; }
+                .grid-viewport { flex: 1; overflow: auto; position: relative; background: #ffffff; display: flex; flex-direction: column; }
+                .grid-sidebar-right { width: 150px; flex-shrink: 0; overflow: auto; border-left: 1px solid #e5e7eb; background: #f9fafb; }
+                
+                .grid-footer-bar { display: flex; height: 16px; flex-shrink: 0; }
+                
+                /* 탭 내비게이션 및 테이블 뷰포트 */
+                .grid-tab-bar { display: flex; background: #f3f4f6; border-bottom: 1px solid #e5e7eb; height: 36px; align-items: center; padding: 0 8px; gap: 4px; flex-shrink: 0; }
+                .grid-tab-item { padding: 6px 14px; cursor: pointer; font-size: 13px; color: #4b5563; border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0; }
+                .grid-tab-item.active { background: #ffffff; border-color: #e5e7eb; color: #111827; font-weight: 600; }
+
+                .grid-table-container { flex: 1; overflow: auto; }
+                table { border-collapse: collapse; width: 100%; table-layout: fixed; }
+                th, td { box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 6px 8px; border: 1px solid #e5e7eb; }
+            </style>
+            
+            <div class="grid-root">
+                <!-- 최상단 탭 바 -->
+                <div class="grid-tab-bar"></div>
+
+                <!-- 가로 배치를 위한 중간 메인 래퍼 -->
+                <div class="grid-main-layout">
+                    <!-- 1. 좌측 통계/사이드 영역 -->
+                    <div class="grid-sidebar-left"></div>
+                    
+                    <!-- 2. 중앙 테이블 뷰포트 -->
+                    <div class="grid-viewport">
+                        <div class="grid-table-container"></div>
+                    </div>
+                    
+                    <!-- 3. 우측 통계/사이드 영역 -->
+                    <div class="grid-sidebar-right"></div>
+                </div>
+
+                <!-- 최하단 푸터 바 -->
+                <div class="grid-footer-bar"></div>
+            </div>
+        `},"#renderShell"),A=d(function(){this.sidebarLeft=o(this,s).querySelector(".grid-sidebar-left"),this.tableContainer=o(this,s).querySelector(".grid-table-container"),this.sidebarRight=o(this,s).querySelector(".grid-sidebar-right"),this.tabBar=o(this,s).querySelector(".grid-tab-bar")},"#bindElements"),d(S,"TableView");let f=S;const q=class q{constructor(i){a(this,b);a(this,m);p(this,m,i)}initializeTable(i){return x(this,b,B).call(this,i),x(this,b,N).call(this,i),i.classList.add("nine-table-element"),i}};m=new WeakMap,b=new WeakSet,B=d(function(i){var w;if(i.querySelector("colgroup"))return;const l=((w=i.querySelector("tbody tr"))==null?void 0:w.querySelectorAll("th, td").length)||1,n=document.createElement("colgroup"),h=Math.max(Math.floor((i.clientWidth||600)/l),100);for(let M=0;M<l;M++){const z=document.createElement("col");z.setAttribute("width",h),n.appendChild(z)}i.prepend(n)},"#ensureColgroup"),N=d(function(i){if(i.querySelector("thead"))return;const l=document.createElement("thead"),n=i.querySelector("colgroup");n?n.after(l):i.prepend(l)},"#ensureThead"),d(q,"TableInitializer");let k=q;const T=class T extends HTMLElement{constructor(){super();a(this,g,!1);a(this,v,[]);this.attachShadow({mode:"open"})}connectedCallback(){if(o(this,g))return;this.querySelectorAll("table").forEach(n=>{const w=new k(this).initializeTable(n);o(this,v).push(w),n.style.display="none"}),this.view=new f(this,o(this,v)),this.view.init(),p(this,g,!0),r.log("NineTable connected and layout initialized."),this.dispatchEvent(new CustomEvent("load",{bubbles:!0,detail:{target:this}}))}disconnectedCallback(){this.view&&this.view.destroy(),r.log("NineTable disconnected.")}};g=new WeakMap,v=new WeakMap,d(T,"NineTable");let E=T;customElements.get("nine-table")||customElements.define("nine-table",E)});
+//# sourceMappingURL=nine-table.umd.js.map

package/dist/nine-table.umd.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nine-table.umd.js","sources":["../src/external/NoPeer.js","../src/ui/TableView.js","../src/ui/TableInitializer.js","../src/core/nine-table.js"],"sourcesContent":["import { trace as traceOrigin } from '@ninebone/util';\n\nexport class Trace extends traceOrigin.constructor {\n    constructor() {\n        super();\n        this.init(\"nine-table\", \"green\");\n    }\n}\n\nexport const trace = new Trace();","import {trace} from \"@nopeer\";\n\nexport class TableView {\n    #container;\n    #layouts;\n    #shadowRoot;\n\n    constructor(container, layouts) {\n        this.#container = container;\n        this.#layouts = layouts;\n        this.#shadowRoot = container.shadowRoot;\n    }\n\n    init() {\n        this.#renderShell();\n        this.#bindElements();\n\n        if (this.#layouts.length > 0) {\n            this.renderTable(0);\n        }\n        trace.log('TableView initialized with proper flex row layout for 3 columns.');\n    }\n\n    #renderShell() {\n        this.#shadowRoot.innerHTML = `\n            <style>\n                :host { display: block; position: relative; overflow: hidden; height: 100%; }\n                .grid-root { display: flex; flex-direction: column; height: 100%; position: relative; }\n                \n                /* 탭 바와 푸터 사이에 가로로 3개 영역을 나란히 묶어주는 래퍼 추가 */\n                .grid-main-layout { display: flex; flex: 1; overflow: hidden; position: relative; }\n\n                .grid-sidebar-left { width: 150px; flex-shrink: 0; overflow: auto; border-right: 1px solid #e5e7eb; background: #f9fafb; }\n                .grid-viewport { flex: 1; overflow: auto; position: relative; background: #ffffff; display: flex; flex-direction: column; }\n                .grid-sidebar-right { width: 150px; flex-shrink: 0; overflow: auto; border-left: 1px solid #e5e7eb; background: #f9fafb; }\n                \n                .grid-footer-bar { display: flex; height: 16px; flex-shrink: 0; }\n                \n                /* 탭 내비게이션 및 테이블 뷰포트 */\n                .grid-tab-bar { display: flex; background: #f3f4f6; border-bottom: 1px solid #e5e7eb; height: 36px; align-items: center; padding: 0 8px; gap: 4px; flex-shrink: 0; }\n                .grid-tab-item { padding: 6px 14px; cursor: pointer; font-size: 13px; color: #4b5563; border: 1px solid transparent; border-bottom: none; border-radius: 4px 4px 0 0; }\n                .grid-tab-item.active { background: #ffffff; border-color: #e5e7eb; color: #111827; font-weight: 600; }\n\n                .grid-table-container { flex: 1; overflow: auto; }\n                table { border-collapse: collapse; width: 100%; table-layout: fixed; }\n                th, td { box-sizing: border-box; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; padding: 6px 8px; border: 1px solid #e5e7eb; }\n            </style>\n            \n            <div class=\"grid-root\">\n                <!-- 최상단 탭 바 -->\n                <div class=\"grid-tab-bar\"></div>\n\n                <!-- 가로 배치를 위한 중간 메인 래퍼 -->\n                <div class=\"grid-main-layout\">\n                    <!-- 1. 좌측 통계/사이드 영역 -->\n                    <div class=\"grid-sidebar-left\"></div>\n                    \n                    <!-- 2. 중앙 테이블 뷰포트 -->\n                    <div class=\"grid-viewport\">\n                        <div class=\"grid-table-container\"></div>\n                    </div>\n                    \n                    <!-- 3. 우측 통계/사이드 영역 -->\n                    <div class=\"grid-sidebar-right\"></div>\n                </div>\n\n                <!-- 최하단 푸터 바 -->\n                <div class=\"grid-footer-bar\"></div>\n            </div>\n        `;\n    }\n\n    #bindElements() {\n        this.sidebarLeft = this.#shadowRoot.querySelector('.grid-sidebar-left');\n        this.tableContainer = this.#shadowRoot.querySelector('.grid-table-container');\n        this.sidebarRight = this.#shadowRoot.querySelector('.grid-sidebar-right');\n        this.tabBar = this.#shadowRoot.querySelector('.grid-tab-bar');\n    }\n\n    renderTable(index) {\n        if (!this.#layouts[index]) return;\n\n        this.tabBar.innerHTML = '';\n        this.#layouts.forEach((_, idx) => {\n            const tab = document.createElement('div');\n            tab.className = `grid-tab-item ${idx === index ? 'active' : ''}`;\n            tab.textContent = `Table ${idx + 1}`;\n            tab.addEventListener('click', () => this.renderTable(idx));\n            this.tabBar.appendChild(tab);\n        });\n\n        this.tableContainer.innerHTML = '';\n        this.tableContainer.appendChild(this.#layouts[index].cloneNode(true));\n\n        trace.log(`Rendered layout tab index: ${index}`);\n    }\n\n    destroy() {\n        this.#shadowRoot.innerHTML = '';\n        trace.log('TableView destroyed.');\n    }\n}","export class TableInitializer {\n    #container;\n\n    constructor(container) {\n        this.#container = container;\n    }\n\n    // [Public] 테이블 초기화 진입점 (필요한 최소한의 마크업 보정만 수행)\n    initializeTable(tbl) {\n        this.#ensureColgroup(tbl);\n        this.#ensureThead(tbl);\n\n        tbl.classList.add('nine-table-element');\n        return tbl;\n    }\n\n    // [Private] colgroup 보정\n    #ensureColgroup(tbl) {\n        if (tbl.querySelector('colgroup')) return;\n\n        const colCount = tbl.querySelector('tbody tr')?.querySelectorAll('th, td').length || 1;\n        const colgroup = document.createElement('colgroup');\n        const defaultWidth = Math.max(Math.floor((tbl.clientWidth || 600) / colCount), 100);\n\n        for (let i = 0; i < colCount; i++) {\n            const col = document.createElement('col');\n            col.setAttribute('width', defaultWidth);\n            colgroup.appendChild(col);\n        }\n        tbl.prepend(colgroup);\n    }\n\n    // [Private] thead 보정\n    #ensureThead(tbl) {\n        if (tbl.querySelector('thead')) return;\n\n        const thead = document.createElement('thead');\n        const colgroup = tbl.querySelector('colgroup');\n        if (colgroup) {\n            colgroup.after(thead);\n        } else {\n            tbl.prepend(thead);\n        }\n    }\n}","import {trace} from \"@nopeer\";\nimport { TableView } from '../ui/TableView.js';\nimport { TableInitializer } from '../ui/TableInitializer.js';\n\nexport default class NineTable extends HTMLElement {\n    #created = false;\n    #layouts = [];\n\n    constructor() {\n        super();\n        // 최외곽 컴포넌트에만 Shadow DOM 적용\n        this.attachShadow({ mode: 'open' });\n    }\n\n    connectedCallback() {\n        if (this.#created) return;\n\n        // 1. 컴포넌트 내부의 원본 table 태그들 수집\n        const tables = this.querySelectorAll('table');\n        tables.forEach(tbl => {\n            const initializer = new TableInitializer(this);\n            const processedTbl = initializer.initializeTable(tbl);\n            this.#layouts.push(processedTbl);\n            tbl.style.display = 'none'; // 원본 숨김\n        });\n\n        // 2. 뷰 초기화 (Shadow DOM 내부에 일반 DOM 엘리먼트들 생성)\n        this.view = new TableView(this, this.#layouts);\n        this.view.init();\n\n        this.#created = true;\n        trace.log('NineTable connected and layout initialized.');\n\n        this.dispatchEvent(new CustomEvent('load', { bubbles: true, detail: { target: this } }));\n    }\n\n    disconnectedCallback() {\n        if (this.view) {\n            this.view.destroy();\n        }\n        trace.log('NineTable disconnected.');\n    }\n}\n\nif (!customElements.get('nine-table')) {\n    customElements.define('nine-table', NineTable);\n}"],"names":["_Trace","traceOrigin","__name","Trace","trace","_TableView","container","layouts","__privateAdd","_TableView_instances","_container","_layouts","_shadowRoot","__privateSet","__privateMethod","renderShell_fn","bindElements_fn","__privateGet","index","_","idx","tab","TableView","_TableInitializer","_TableInitializer_instances","tbl","ensureColgroup_fn","ensureThead_fn","colCount","_a","colgroup","defaultWidth","i","col","thead","TableInitializer","_NineTable","_created","processedTbl","NineTable"],"mappings":"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"}

package/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "@ninebone/table",
+  "version": "0.0.1",
+  "description": "Grid component for real-time collaboration (Vanilla JS based)",
+  "type": "module",
+  "main": "./dist/nine-table.umd.js",
+  "module": "./dist/nine-table.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/nine-table.js",
+      "require": "./dist/nine-table.umd.js"
+    }
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "watch": "vite build --watch",
+    "prepublishOnly": "npm run build",
+    "release": "npm version patch && npm publish --access public"
+  },
+  "peerDependencies": {
+    "@ninebone/util": "*"
+  },
+  "devDependencies": {
+    "@ninebone/util": "^1.0.13",
+    "vite": "^5.4.21"
+  }
+}