@ninebone/datagrid 0.0.12 → 0.0.13
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/css/nine-table.css +9 -13
- package/dist/nine-table.js +2 -2
- package/dist/nine-table.umd.js +2 -2
- package/package.json +1 -1
package/dist/css/nine-table.css
CHANGED
|
@@ -546,24 +546,20 @@ tbody {
|
|
|
546
546
|
}
|
|
547
547
|
}
|
|
548
548
|
|
|
549
|
-
|
|
550
|
-
|
|
551
|
-
|
|
552
|
-
}
|
|
553
|
-
|
|
554
|
-
.selected-start {
|
|
555
|
-
background-color: transparent;
|
|
556
|
-
}
|
|
549
|
+
.selected {
|
|
550
|
+
background-color: var(--cell-selection-bg);
|
|
551
|
+
}
|
|
557
552
|
|
|
558
|
-
|
|
559
|
-
|
|
560
|
-
.selected-left { border-left: 2px solid var(--cell-selection-border-color); }
|
|
561
|
-
.selected-right { border-right: 2px solid var(--cell-selection-border-color); }
|
|
553
|
+
.selected-start {
|
|
554
|
+
background-color: transparent;
|
|
562
555
|
}
|
|
563
556
|
|
|
557
|
+
.selected-top { border-top: 2px solid var(--cell-selection-border-color); }
|
|
558
|
+
.selected-bottom { border-bottom: 2px solid var(--cell-selection-border-color); }
|
|
559
|
+
.selected-left { border-left: 2px solid var(--cell-selection-border-color); }
|
|
560
|
+
.selected-right { border-right: 2px solid var(--cell-selection-border-color); }
|
|
564
561
|
}
|
|
565
562
|
|
|
566
|
-
|
|
567
563
|
nine-table-col-expand {
|
|
568
564
|
position: absolute;
|
|
569
565
|
right: 2px;
|
package/dist/nine-table.js
CHANGED
|
@@ -2852,7 +2852,7 @@ var N = class {
|
|
|
2852
2852
|
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) => {
|
|
2853
2853
|
let r = t === 0 ? "active" : "", i = e.id || `sheet${t + 1}`;
|
|
2854
2854
|
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>` : "");
|
|
2855
|
-
}).join(""), i = ["@import \"https://cdn.jsdelivr.net/npm/@ninebone/datagrid@0.0.
|
|
2855
|
+
}).join(""), i = ["@import \"https://cdn.jsdelivr.net/npm/@ninebone/datagrid@0.0.13/dist/css/nine-table.css\";"];
|
|
2856
2856
|
nine["nine-table"] && nine["nine-table"].cssFile && i.push(`@import "${nine["nine-table"].cssFile}";`), this.#e.shadowRoot.innerHTML = `
|
|
2857
2857
|
<style>
|
|
2858
2858
|
${i.join("\n")}
|
|
@@ -2921,7 +2921,7 @@ var N = class {
|
|
|
2921
2921
|
#r = 0;
|
|
2922
2922
|
#i = "";
|
|
2923
2923
|
constructor() {
|
|
2924
|
-
super(), ["NINE-TABLE"].includes(this.tagName) && n.log("Welcome nine-table", "0.0.
|
|
2924
|
+
super(), ["NINE-TABLE"].includes(this.tagName) && n.log("Welcome nine-table", "0.0.13"), this.#e = this.attachShadow({ mode: "open" }), this.#t = new o(this);
|
|
2925
2925
|
}
|
|
2926
2926
|
connectedCallback() {
|
|
2927
2927
|
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.13/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
|
`)}
|
|
@@ -102,7 +102,7 @@
|
|
|
102
102
|
|
|
103
103
|
if (!data && !host) return "";
|
|
104
104
|
return ${i};
|
|
105
|
-
`),this.#n.set(i,e)),e(t,n,this.#e)}return i}catch{return e}}},I=class extends HTMLElement{#e;#t;#n;#r=0;#i=``;constructor(){super(),[`NINE-TABLE`].includes(this.tagName)&&r.log(`Welcome nine-table`,`0.0.
|
|
105
|
+
`),this.#n.set(i,e)),e(t,n,this.#e)}return i}catch{return e}}},I=class extends HTMLElement{#e;#t;#n;#r=0;#i=``;constructor(){super(),[`NINE-TABLE`].includes(this.tagName)&&r.log(`Welcome nine-table`,`0.0.13`),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.#o(),this.#n=new P(this),this.#a()})}disconnectedCallback(){}#a=()=>{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}get customStyle(){return this.#i}scrollTo=(e,t)=>{this.#e.querySelectorAll(`nine-table-sheet.active`).forEach(n=>{n.scrollTo(e,t)})};currentRow=()=>{let e=this.currentRows();return e.length===0?-1:e[0]};currentRows=()=>{let e=[];return this.#e.querySelectorAll(`nine-table-sheet.active`).forEach(t=>{let n=t.view.getArray(t.selection.minRow).m._[i.META.INDEX.ROWID];e.push(n)}),e};addRow=(e,t=!0)=>this.data.add(e,t);insertRow=(e,t,n=!0)=>{let r=this.#e.querySelector(`nine-table-sheet.active`);if(!r)return;let a=r.view.get(e).m._[i.META.INDEX.ROWID],o=this.data.insert(a,t,n);return r.view.getArray().findIndex(e=>!e||!e.m||!e.m._?!1:e.m._[i.META.INDEX.ROWID]===o)};removeRow=e=>{let t=this.#e.querySelector(`nine-table-sheet.active`);if(!t)return;let n=t.view.get(e).m._[i.META.INDEX.ROWID];this.data.remove(n)};currentIndex=()=>{let e=this.currentIndexs();return e.length===0?-1:e[0]};currentIndexs=()=>{let e=[];return this.#e.querySelectorAll(`nine-table-sheet.active`).forEach(t=>{e.push(t.selection.minRow)}),e};addProvider(e){if(!e||typeof e!=`object`)return;let{style:t,...n}=e;if(t&&typeof t==`string`){this.#i=t;let e=this.#e.getElementById(`nine-table-scoped-custom-style`);e&&(e.textContent=t)}Object.keys(n).length>0&&setTimeout(()=>{Object.entries(n).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}#o(){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.#n.dataset.row,10),n=this.#r.dataset.bind;!isNaN(t)&&n&&this.#e.data.setValue(t,n,e)}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`,`
|
|
106
106
|
const indices = groupRecord[3]; // GROUP_IDX.CHILDREN = 3
|
|
107
107
|
const allRecords = host?.data?.getArray ? host.data.getArray() : [];
|
|
108
108
|
|