@ninebone/datagrid 0.0.5 → 0.0.6
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/nine-table.js +2 -2
- package/dist/nine-table.umd.js +2 -2
- package/package.json +2 -1
package/dist/nine-table.js
CHANGED
|
@@ -2811,7 +2811,7 @@ var N = class {
|
|
|
2811
2811
|
let e = Array.from(this.#e.children).filter((e) => e.tagName.toUpperCase() === "TABLE"), t = this.#e.getAttribute("auto-height") === "true", n = e.length, r = e.map((e, t) => {
|
|
2812
2812
|
let r = t === 0 ? "active" : "", i = e.id || `sheet${t + 1}`;
|
|
2813
2813
|
return `<nine-table-sheet class="${r}" data-index="${t}" data-sheet-id="${i}" id="${i}"></nine-table-sheet>` + (t < n - 1 ? `<nine-splitter class="h" data-split-index="${t}"></nine-splitter>` : "");
|
|
2814
|
-
}).join(""), i = ["@import \"https://cdn.jsdelivr.net/npm/@ninebone/datagrid@0.0.
|
|
2814
|
+
}).join(""), i = ["@import \"https://cdn.jsdelivr.net/npm/@ninebone/datagrid@0.0.6/dist/css/nine-table.css\";"];
|
|
2815
2815
|
nine["nine-table"] && nine["nine-table"].cssFile && i.push(`@import "${nine["nine-table"].cssFile}";`), this.#e.shadowRoot.innerHTML = `
|
|
2816
2816
|
<style>
|
|
2817
2817
|
${i.join("\n")}
|
|
@@ -2878,7 +2878,7 @@ var N = class {
|
|
|
2878
2878
|
#n;
|
|
2879
2879
|
#r = 0;
|
|
2880
2880
|
constructor() {
|
|
2881
|
-
super(), ["NINE-TABLE"].includes(this.tagName) && n.log("Welcome nine-table", "0.0.
|
|
2881
|
+
super(), ["NINE-TABLE"].includes(this.tagName) && n.log("Welcome nine-table", "0.0.6"), this.#e = this.attachShadow({ mode: "open" }), this.#t = new o(this);
|
|
2882
2882
|
}
|
|
2883
2883
|
connectedCallback() {
|
|
2884
2884
|
setTimeout(() => {
|
package/dist/nine-table.umd.js
CHANGED
|
@@ -75,7 +75,7 @@
|
|
|
75
75
|
|
|
76
76
|
<div class="ng-col-mover-grip"></div>
|
|
77
77
|
<div class="ng-col-mover-indi"></div>
|
|
78
|
-
`,this.#p={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`)}};#S=()=>{let e=this.querySelector(`.ng-container-left table`),t=this.querySelector(`.ng-container-body table`),n=this.querySelector(`.ng-container-right table`),r=Array.from(e.querySelectorAll(`thead tr:not(.col-indicator-rowgroup)`)),i=Array.from(t.querySelectorAll(`thead tr:not(.col-indicator-rowgroup)`)),a=Array.from(n.querySelectorAll(`thead tr:not(.col-indicator-rowgroup)`));this.#C(r,i,a);let o=Array.from(e.querySelectorAll(`tfoot tr`)),s=Array.from(t.querySelectorAll(`tfoot tr`)),c=Array.from(n.querySelectorAll(`tfoot tr`));this.#C(o,s,c)};#C=(e,t,n)=>{setTimeout(()=>{let r=Math.max(e.length,t.length,n.length);for(let i=0;i<r;i++){let r=[e[i]?.getBoundingClientRect().height||0,t[i]?.getBoundingClientRect().height||0,n[i]?.getBoundingClientRect().height||0],a=Math.max(...r);a>0&&(e[i]&&(e[i].style.height=`${a}px`),t[i]&&(t[i].style.height=`${a}px`),n[i]&&(n[i].style.height=`${a}px`))}})};#w=()=>{let e=this.querySelector(`.ng-sheet-body`);if(!e)return;let t=null;e.addEventListener(`mouseover`,n=>{let r=n.target.closest(`tr`);if(!r||!r.dataset.row&&r.dataset.row!==`0`)return;let i=r.dataset.row;t!==i&&(t=i,e.querySelectorAll(`tr[data-row="${i}"]`).forEach(e=>{e.classList.add(`hover`)}))}),e.addEventListener(`mouseout`,n=>{let r=n.target.closest(`tr`);if(!r)return;let i=n.relatedTarget;r.contains(i)||(e.querySelectorAll(`tr.hover`).forEach(e=>{e.classList.remove(`hover`)}),t=null)})};disconnectedCallback(){this.#a?.destroy(),this.#o?.destroy(),this.innerHTML=``}};customElements.get(`nine-table-sheet`)||customElements.define(`nine-table-sheet`,N);var P=class{#e;constructor(e){this.#e=e,this.#t()}#t=()=>{this.#r(),new ResizeObserver(e=>{for(let t of e)this.#e.getAttribute(`auto-height`)===`true`&&this.#n()}).observe(this.#e)};set loading(e){e?this.#e.classList.add(`loading`):this.#e.classList.remove(`loading`)}#n=()=>{let e=Array.from(this.#e.shadowRoot.querySelectorAll(`nine-table-sheet.active`));if(e.length===0)return;let t=parseInt(this.#e.getAttribute(`max-display-row`),10)||10,n=Math.max(...e.map(e=>e.getRowHeight())),r=this.#e.shadowRoot.querySelector(`nine-table-toolbar`),i=this.#e.shadowRoot.querySelector(`nine-table-sheets-footer`),a=r?r.getBoundingClientRect().height:0,o=i?i.getBoundingClientRect().height:0,s=N.SCROLLBAR_SIZE,c=t*n+a+o+s;this.#e.style.height=`${c}px`};#r=()=>{let e=Array.from(this.#e.children).filter(e=>e.tagName.toUpperCase()===`TABLE`),t=this.#e.getAttribute(`auto-height`)===`true`,n=e.length,r=e.map((e,t)=>{let r=t===0?`active`:``,i=e.id||`sheet${t+1}`;return`<nine-table-sheet class="${r}" data-index="${t}" data-sheet-id="${i}" id="${i}"></nine-table-sheet>`+(t<n-1?`<nine-splitter class="h" data-split-index="${t}"></nine-splitter>`:``)}).join(``),i=[`@import "https://cdn.jsdelivr.net/npm/@ninebone/datagrid@0.0.
|
|
78
|
+
`,this.#p={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`)}};#S=()=>{let e=this.querySelector(`.ng-container-left table`),t=this.querySelector(`.ng-container-body table`),n=this.querySelector(`.ng-container-right table`),r=Array.from(e.querySelectorAll(`thead tr:not(.col-indicator-rowgroup)`)),i=Array.from(t.querySelectorAll(`thead tr:not(.col-indicator-rowgroup)`)),a=Array.from(n.querySelectorAll(`thead tr:not(.col-indicator-rowgroup)`));this.#C(r,i,a);let o=Array.from(e.querySelectorAll(`tfoot tr`)),s=Array.from(t.querySelectorAll(`tfoot tr`)),c=Array.from(n.querySelectorAll(`tfoot tr`));this.#C(o,s,c)};#C=(e,t,n)=>{setTimeout(()=>{let r=Math.max(e.length,t.length,n.length);for(let i=0;i<r;i++){let r=[e[i]?.getBoundingClientRect().height||0,t[i]?.getBoundingClientRect().height||0,n[i]?.getBoundingClientRect().height||0],a=Math.max(...r);a>0&&(e[i]&&(e[i].style.height=`${a}px`),t[i]&&(t[i].style.height=`${a}px`),n[i]&&(n[i].style.height=`${a}px`))}})};#w=()=>{let e=this.querySelector(`.ng-sheet-body`);if(!e)return;let t=null;e.addEventListener(`mouseover`,n=>{let r=n.target.closest(`tr`);if(!r||!r.dataset.row&&r.dataset.row!==`0`)return;let i=r.dataset.row;t!==i&&(t=i,e.querySelectorAll(`tr[data-row="${i}"]`).forEach(e=>{e.classList.add(`hover`)}))}),e.addEventListener(`mouseout`,n=>{let r=n.target.closest(`tr`);if(!r)return;let i=n.relatedTarget;r.contains(i)||(e.querySelectorAll(`tr.hover`).forEach(e=>{e.classList.remove(`hover`)}),t=null)})};disconnectedCallback(){this.#a?.destroy(),this.#o?.destroy(),this.innerHTML=``}};customElements.get(`nine-table-sheet`)||customElements.define(`nine-table-sheet`,N);var P=class{#e;constructor(e){this.#e=e,this.#t()}#t=()=>{this.#r(),new ResizeObserver(e=>{for(let t of e)this.#e.getAttribute(`auto-height`)===`true`&&this.#n()}).observe(this.#e)};set loading(e){e?this.#e.classList.add(`loading`):this.#e.classList.remove(`loading`)}#n=()=>{let e=Array.from(this.#e.shadowRoot.querySelectorAll(`nine-table-sheet.active`));if(e.length===0)return;let t=parseInt(this.#e.getAttribute(`max-display-row`),10)||10,n=Math.max(...e.map(e=>e.getRowHeight())),r=this.#e.shadowRoot.querySelector(`nine-table-toolbar`),i=this.#e.shadowRoot.querySelector(`nine-table-sheets-footer`),a=r?r.getBoundingClientRect().height:0,o=i?i.getBoundingClientRect().height:0,s=N.SCROLLBAR_SIZE,c=t*n+a+o+s;this.#e.style.height=`${c}px`};#r=()=>{let e=Array.from(this.#e.children).filter(e=>e.tagName.toUpperCase()===`TABLE`),t=this.#e.getAttribute(`auto-height`)===`true`,n=e.length,r=e.map((e,t)=>{let r=t===0?`active`:``,i=e.id||`sheet${t+1}`;return`<nine-table-sheet class="${r}" data-index="${t}" data-sheet-id="${i}" id="${i}"></nine-table-sheet>`+(t<n-1?`<nine-splitter class="h" data-split-index="${t}"></nine-splitter>`:``)}).join(``),i=[`@import "https://cdn.jsdelivr.net/npm/@ninebone/datagrid@0.0.6/dist/css/nine-table.css";`];nine[`nine-table`]&&nine[`nine-table`].cssFile&&i.push(`@import "${nine[`nine-table`].cssFile}";`),this.#e.shadowRoot.innerHTML=`
|
|
79
79
|
<style>
|
|
80
80
|
${i.join(`
|
|
81
81
|
`)}
|
|
@@ -101,7 +101,7 @@
|
|
|
101
101
|
|
|
102
102
|
if (!data && !host) return "";
|
|
103
103
|
return ${i};
|
|
104
|
-
`),this.#n.set(i,e)),e(t,n,this.#e)}return i}catch{return e}}},I=class extends HTMLElement{#e;#t;#n;#r=0;constructor(){super(),[`NINE-TABLE`].includes(this.tagName)&&r.log(`Welcome nine-table`,`0.0.
|
|
104
|
+
`),this.#n.set(i,e)),e(t,n,this.#e)}return i}catch{return e}}},I=class extends HTMLElement{#e;#t;#n;#r=0;constructor(){super(),[`NINE-TABLE`].includes(this.tagName)&&r.log(`Welcome nine-table`,`0.0.6`),this.#e=this.attachShadow({mode:`open`}),this.#t=new s(this)}connectedCallback(){setTimeout(()=>{this.#r=this.querySelectorAll(`table`)?.length,this.fields=new c(this),this.exprEngine=new F(this),this.#a(),this.#n=new P(this),this.#i()})}disconnectedCallback(){}#i=()=>{let e=0,t=setInterval(()=>{e++;let n=this.shadow.querySelectorAll(`nine-table-sheet`);if(e>=50&&clearInterval(t),n.length>=this.#r){let e=0;n.forEach(t=>{t.loaded&&e++}),e>=this.#r&&(clearInterval(t),this.loaded=!0,this.dispatchEvent(new CustomEvent(i.EVENT.LOAD,{bubbles:!0,detail:{target:this}})))}},100)};get shadow(){return this.#e}get dataManager(){return this.#t}get data(){return this.#t.data}get row(){return this.#t.row}addProvider(e){e&&typeof e==`object`&&setTimeout(()=>{Object.entries(e).forEach(([e,t])=>{typeof t==`function`&&(this[e]=t)}),this.rerenderer()})}setData(e){this.#t.data.set(e),this.refresh()}refresh(){this.activeSheet?.invalidate()}set loading(e){this.#n&&(this.#n.loading=e)}rerenderer(){this.activeSheet?.querySelectorAll(`tbody.body th,tbody.body td`).forEach(e=>{Array.from(e.children).find(e=>e.tagName.toLowerCase().startsWith(`cell-`)&&typeof e.rerenderer==`function`)?.rerenderer()})}sheet=e=>{if(e===null||e<0)return this.activeSheet;let t=Array.from(this.shadow.querySelectorAll(`nine-table-sheet`));return typeof e==`number`?t[e]||null:typeof e==`string`?this.shadow.querySelector(`nine-table-sheet#${e}, nine-table-sheet[data-sheet-id="${e}"]`)||null:t[0]||null};get sheets(){return Array.from(this.shadow.querySelectorAll(`nine-table-sheet`))}get activeSheet(){return this.shadow.querySelector(`nine-table-sheet.active`)||null}#a(){let e=new Set;this.querySelectorAll(`[data-source]`).forEach(t=>{let n=t.getAttribute(`data-source`);if(!n)return;let r=n.matchAll(/(?:host\.)?([a-zA-Z0-9_$]+)\s*\(/g);for(let t of r){let n=t[1];n&&n!==`host`&&e.add(n)}}),e.forEach(e=>{let t=null;Object.defineProperty(this,e,{set:e=>{t=e,this.rerenderer()},get:()=>t,configurable:!0,enumerable:!0})})}execute=e=>{setTimeout(()=>{this.loading=!0,setTimeout(()=>{try{e.call(this)}finally{this.loading=!1}})})}};customElements.get(`nine-table`)||customElements.define(`nine-table`,I),customElements.get(`nine-table-simple`)||customElements.define(`nine-table-simple`,class extends I{connectedCallback(){this.setAttribute(`theme`,`simple`),super.connectedCallback()}});var L=class extends HTMLElement{constructor(){super()}applyBaseStyle(){}connectedCallback(){}},R=new Map,z=class extends L{#e;#t;#n;#r;#i;constructor(){super()}get host(){return this.#e}get sheet(){return this.#t}get cell(){return this.#r}get tr(){return this.#n}get attr(){return this.#i}connectedCallback(){super.connectedCallback(),this.#e=this.getRootNode().host,this.#r=this.closest(`th,td`),this.#n=this.#r.closest(`tr`),this.#t=this.#n.closest(`nine-table-sheet`),this.#r.classList.add(this.tagName),this.#i={};for(let e=0;e<this.#r.attributes.length;e++){let t=this.#r.attributes[e].name;[`text-align`,`class`,`cell-type`,`data-bind`,`data-expr`,`data-col`,`tabindex`].includes(t)||(this.#i[t]=this.#r.attributes[e].value)}if(!this.#r)return;let e=this.shadowRoot||this;e.querySelectorAll(`button, ng-expand-button`).forEach(e=>{e.addEventListener(`click`,()=>{let e=this.getAttribute(`onbuttonclick`)||this.getAttribute(`onButtonClick`)||this.#r?.getAttribute(`onbuttonclick`)||this.#r?.getAttribute(`onButtonClick`),t=this.data,n=parseInt(this.#r.dataset.row,10);if(e&&this.#e){e=e.replace(`()`,``);let r=e.match(/^(\w+)\s*\(/)?.[1]||e;typeof this.#e[r]==`function`?this.#e[r].call(this.#e,t,n,this.#r):typeof this.#e.exprFunction==`function`&&this.#e.exprFunction(e).call(this,t,n)}})});let t=e.querySelector(`.renderer`);t&&this.getAttribute(`link`)===`true`&&(t.classList.add(`link`),t.addEventListener(`click`,()=>{let e=this.getAttribute(`onlinkclick`)||this.getAttribute(`onLinkClick`),t=this.data,n=parseInt(this.#r.dataset.row,10);if(e&&this.#e){e=e.replace(`()`,``);let r=e.match(/^(\w+)\s*\(/)?.[1]||e;typeof this.#e[r]==`function`?this.#e[r].call(this.#e,t,n,this.#r):typeof this.#e.exprFunction==`function`&&this.#e.exprFunction(e).call(this,t,n)}this.#e?.dispatchEvent(new CustomEvent(ninegrid.EVENT.LINK_CLICK,{detail:{target:this.#r,data:t,currow:n},bubbles:!0,composed:!0}))}))}get data(){let e=this.#n?.data;if(!e)return null;if(!e.v)return e;let t=this.#e;return new Proxy(e,{get(e,n){if(n===`__ng`)return e.__ng;if(n===`v`)return e.v;let r=t?.fields?.indexOf?.(n)??-1;return r>=0?e.v[r]:e[n]}})}get value(){if(!this.#r||!this.#n?.data)return``;let e=this.#r.dataset?.bind;if(!e)return``;let t=this.#n.data;if(t.v&&Array.isArray(t.v)){let n=this.#e.fields.get().indexOf(e)??-1;return n>=0?t.v[n]??``:``}return t[e]??``}set value(e){if(!this.#r||!this.#e?.data)return;let t=parseInt(this.#r.dataset.row,10),n=this.#r.dataset.bind;if(isNaN(t)||!n)return;let r=this.getAttribute(`update-row-state`)!==`false`;this.#e.data.setValue(t,n,e,r)}get row(){return parseInt(this.#r?.dataset?.row,10)}get index(){return parseInt(this.#r?.dataset?.index,10)}isValid(){return!this.#r.classList.contains(`invalid`)}isInvalid(){return!this.isValid()}getDisplayText=(e=``)=>{if(!this.#r||!this.#r.closest(`tbody`)||!this.#n.data)return e;let t=this.#r.dataset.expr,n=this.#r.dataset.bind,r=parseInt(this.#r.dataset.row,10);if(t)try{return this.#n.getAttribute(`grouping`)===`true`?this.getGroupExprValue(t,this.#n.data,r,this.#r):this.#e.exprEngine.evaluate(t,this.#n.data,r)}catch{return e}return n?this.value??e:e};refresh(){if(!this.#r||!this.#n)return;let e=this.value;return this.#r.classList.remove(`invalid`),[`color`,`background`,`background-color`,`visible`,`enable`,`validator`].forEach(e=>{let t=this.#i[e];if(t){let n=this.#e.exprEngine.evaluate(t,this.#n.data,parseInt(this.#r.dataset.row,10));e===`validator`?n||this.#r.classList.add(`invalid`):e===`visible`?this.style.display=n?``:`none`:e===`enable`?(this.querySelectorAll(`input, button, textarea, select`).forEach(e=>{e.disabled=!n}),n?this.#r.removeAttribute(`disabled`):this.#r.setAttribute(`disabled`,`true`)):this.#r.style[e]=n}}),e}getExprValue(e,t,n){return!this.#e||!this.#e.exprEngine||e==null||e===``?e:this.#e.exprEngine.evaluate(e,t,n)}getGroupExprValue=(e,t,n,r)=>{if(!e)return``;try{n=parseInt(n,10);let i=e.replace(`()`,``).trim();if(this.#e&&typeof this.#e[i]==`function`)return this.#e[i].call(this,t,n,r);let a=i.match(/^(\w+)\s*\(\s*([\w\-]*)\s*\)/);if(a){let e=t[GROUP_IDX.CHILDREN],n=this.#e?.data?.getArray?this.#e.data.getArray():[],r=e?e.map(e=>n[e]).filter(Boolean):[],[,i,o]=a,s=this.#e;switch(i.toLowerCase()){case`count`:return r.length;case`sum`:{let e=s?.fields?.indexOf?.(o)??-1;return r.reduce((t,n)=>{let r=e>=0?n.v?.[e]:n[o];return t+(Number(r)||0)},0)}case`avg`:{if(r.length===0)return 0;let e=s?.fields?.indexOf?.(o)??-1;return r.reduce((t,n)=>{let r=e>=0?n.v?.[e]:n[o];return t+(Number(r)||0)},0)/r.length}}}if(this.#e&&typeof this.#e.exprFunction==`function`)return this.#e.exprFunction(e).call(this,t,n,this.#e.data);if(e.includes(`data.`)||e.includes(`childRecords`)||e.includes(`groupRecord`)){let i=R.get(`grp_`+e);return i||(i=Function(`groupRecord`,`row`,`cell`,`host`,`
|
|
105
105
|
const indices = groupRecord[3]; // GROUP_IDX.CHILDREN = 3
|
|
106
106
|
const allRecords = host?.data?.getArray ? host.data.getArray() : [];
|
|
107
107
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ninebone/datagrid",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.6",
|
|
4
4
|
"description": "Blazing-fast virtualized HTML table for massive datasets with inline editing",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"datagrid",
|
|
@@ -40,6 +40,7 @@
|
|
|
40
40
|
"build:css": "node scripts/bundle-css.js",
|
|
41
41
|
"build": "vite build && npm run build:css",
|
|
42
42
|
"watch": "vite build --watch",
|
|
43
|
+
"version": "npm run build",
|
|
43
44
|
"release": "npm version patch && npm publish --access public"
|
|
44
45
|
},
|
|
45
46
|
"peerDependencies": {
|