@toolbox-web/grid 1.22.0 → 1.22.1
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/all.js +1 -1
- package/all.js.map +1 -1
- package/index.js +1 -1
- package/lib/plugins/editing/EditingPlugin.d.ts.map +1 -1
- package/lib/plugins/editing/index.js +1 -1
- package/lib/plugins/editing/index.js.map +1 -1
- package/package.json +1 -1
- package/umd/grid.all.umd.js +1 -1
- package/umd/grid.all.umd.js.map +1 -1
- package/umd/plugins/editing.umd.js +1 -1
- package/umd/plugins/editing.umd.js.map +1 -1
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("../../core/internal/keyboard"),require("../../core/internal/rows"),require("../../core/plugin/base-plugin")):"function"==typeof define&&define.amd?define(["exports","../../core/internal/keyboard","../../core/internal/rows","../../core/plugin/base-plugin"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).TbwGridPlugin_editing={},e.TbwGrid,e.TbwGrid,e.TbwGrid)}(this,function(e,t,i,n){"use strict";function o(e){switch(e.type){case"number":return function(e){return t=>{const i=e.editorParams,n=document.createElement("input");n.type="number",n.value=null!=t.value?String(t.value):"",void 0!==i?.min&&(n.min=String(i.min)),void 0!==i?.max&&(n.max=String(i.max)),void 0!==i?.step&&(n.step=String(i.step)),i?.placeholder&&(n.placeholder=i.placeholder);const o=()=>t.commit(""===n.value?null:Number(n.value));return n.addEventListener("blur",o),n.addEventListener("keydown",e=>{"Enter"===e.key&&o(),"Escape"===e.key&&t.cancel()}),n}}(e);case"boolean":return e=>{const t=document.createElement("input");return t.type="checkbox",t.checked=!!e.value,t.addEventListener("change",()=>e.commit(t.checked)),t};case"date":return function(e){return t=>{const i=e.editorParams,n=document.createElement("input");return n.type="date",t.value instanceof Date?n.valueAsDate=t.value:"string"==typeof t.value&&t.value&&(n.value=t.value.split("T")[0]),i?.min&&(n.min=i.min),i?.max&&(n.max=i.max),i?.placeholder&&(n.placeholder=i.placeholder),n.addEventListener("change",()=>{"string"==typeof t.value?t.commit(n.value):t.commit(n.valueAsDate)}),n.addEventListener("keydown",e=>{"Escape"===e.key&&t.cancel()}),n}}(e);case"select":return function(e){return t=>{const i=e.editorParams,n=document.createElement("select");if(e.multi&&(n.multiple=!0),i?.includeEmpty){const e=document.createElement("option");e.value="",e.textContent=i.emptyLabel??"",n.appendChild(e)}const o=function(e){const t=e.options;return t?"function"==typeof t?t():t:[]}(e);o.forEach(i=>{const o=document.createElement("option");o.value=String(i.value),o.textContent=i.label,e.multi&&Array.isArray(t.value)&&t.value.includes(i.value)?o.selected=!0:e.multi||t.value!==i.value||(o.selected=!0),n.appendChild(o)});const r=()=>{if(e.multi){const e=Array.from(n.selectedOptions).map(e=>e.value);t.commit(e)}else t.commit(n.value)};return n.addEventListener("change",r),n.addEventListener("blur",r),n.addEventListener("keydown",e=>{"Escape"===e.key&&t.cancel()}),n}}(e);default:return function(e){return t=>{const i=e.editorParams,n=document.createElement("input");n.type="text",n.value=null!=t.value?String(t.value):"",void 0!==i?.maxLength&&(n.maxLength=i.maxLength),i?.pattern&&(n.pattern=i.pattern),i?.placeholder&&(n.placeholder=i.placeholder);const o=()=>{const e=n.value;(null!==t.value&&void 0!==t.value||""!==e)&&("string"==typeof t.value&&e===t.value.replace(/[\n\r]/g,"")||("number"==typeof t.value&&""!==e?t.commit(Number(e)):t.commit(e)))};return n.addEventListener("blur",o),n.addEventListener("keydown",e=>{"Enter"===e.key&&o(),"Escape"===e.key&&t.cancel()}),n}}(e)}}function r(e){return"string"==typeof e&&("__proto__"!==e&&"constructor"!==e&&"prototype"!==e)}function s(e,t,i){return e instanceof HTMLInputElement?"checkbox"===e.type?e.checked:"number"===e.type?""===e.value?null:Number(e.value):"date"===e.type?"string"==typeof i?e.value:e.valueAsDate:"number"==typeof i?""===e.value?null:Number(e.value):null==i&&""===e.value||"string"==typeof i&&e.value===i.replace(/[\n\r]/g,"")?i:e.value:"number"===t?.type&&""!==e.value||"number"==typeof i&&""!==e.value?Number(e.value):null==i&&""===e.value?i:e.value}function d(e){}class l extends n.BaseGridPlugin{static manifest={ownedProperties:[{property:"editable",level:"column",description:'the "editable" column property',isUsed:e=>!0===e},{property:"editor",level:"column",description:'the "editor" column property'},{property:"editorParams",level:"column",description:'the "editorParams" column property'}],events:[{type:"cell-edit-committed",description:"Emitted when a cell edit is committed (for plugin-to-plugin coordination)"}],queries:[{type:"isEditing",description:"Returns whether any cell is currently being edited"}]};name="editing";styles="@layer tbw-plugins{tbw-grid{--tbw-editing-bg: var(--tbw-color-selection);--tbw-editing-row-bg: var(--tbw-editing-bg);--tbw-editing-border: var(--tbw-border-input, 1px solid var(--tbw-color-border-strong));--tbw-padding-editing-input: var(--tbw-cell-padding-input, 2px 6px);--tbw-font-size-editor: inherit;--tbw-editing-row-outline-color: var(--tbw-color-accent);--tbw-editing-row-outline-width: 1px;--tbw-invalid-bg: light-dark(#fef2f2, #450a0a);--tbw-invalid-border-color: light-dark(#ef4444, #f87171)}tbw-grid:not(.tbw-grid-mode) .data-grid-row:has(.editing){background:var(--tbw-editing-row-bg);outline:var(--tbw-editing-row-outline-width) solid var(--tbw-editing-row-outline-color);outline-offset:calc(-1 * var(--tbw-editing-row-outline-width))}tbw-grid .data-grid-row>.cell.editing{overflow:hidden;padding:0;display:flex;min-height:calc(var(--tbw-row-height) + 2px);align-items:center;justify-content:center}tbw-grid .data-grid-row>.cell.editing input:not([type=checkbox]),tbw-grid .data-grid-row>.cell.editing select,tbw-grid .data-grid-row>.cell.editing textarea{width:100%;height:100%;flex:1 1 auto;min-width:0;border:var(--tbw-editing-border);padding:var(--tbw-padding-editing-input);font-size:var(--tbw-font-size-editor)}tbw-grid .tbw-editor-host{display:contents}tbw-grid .data-grid-row>.cell[data-invalid=true]{background:var(--tbw-invalid-bg);outline:1px solid var(--tbw-invalid-border-color);outline-offset:-1px}}";get defaultConfig(){return{mode:"row",editOn:"click"}}get#e(){return"grid"===this.config.mode}#t=-1;#i;#n;#o=-1;#r=new Map;#s=new Set;#d=new Set;#l=new Map;#c=!1;#a=-1;#u=new Map;#h=!1;#f=!1;#g=!1;attach(e){super.attach(e);const t=this.disconnectSignal,n=e;n._activeEditRows=-1,n._rowEditSnapshots=new Map,Object.defineProperty(e,"changedRows",{get:()=>this.changedRows,configurable:!0}),Object.defineProperty(e,"changedRowIds",{get:()=>this.changedRowIds,configurable:!0}),e.resetChangedRows=e=>this.resetChangedRows(e),e.beginBulkEdit=(e,t)=>{t&&this.beginCellEdit(e,t)},document.addEventListener("keydown",e=>{if(!this.#e&&"Escape"===e.key&&-1!==this.#t){if(this.config.onBeforeEditClose){if(!1===this.config.onBeforeEditClose(e))return}this.#w(this.#t,!0)}},{capture:!0,signal:t}),document.addEventListener("mousedown",e=>{if(this.#e)return;if(-1===this.#t)return;const t=n.findRenderedRowElement?.(this.#t);if(!t)return;if((e.composedPath&&e.composedPath()||[]).includes(t))return;const i=e.target;if(!i||!this.grid.containsFocus?.(i)){if(this.config.onBeforeEditClose){if(!1===this.config.onBeforeEditClose(e))return}queueMicrotask(()=>{-1!==this.#t&&this.#w(this.#t,!1)})}},{signal:t}),this.config.focusTrap&&this.gridElement.addEventListener("focusout",e=>{if(this.#e)return;if(-1===this.#t)return;const t=e.relatedTarget;t&&this.grid.containsFocus?.(t)||t&&this.gridElement.contains(t)||queueMicrotask(()=>{-1!==this.#t&&this.#E()})},{signal:t}),this.gridElement.addEventListener("cell-change",e=>{const t=e.detail;if("user"===t.source)return;const i=`${t.rowIndex}:${t.field}`,n=this.#l.get(i);n&&n(t.newValue)},{signal:t}),this.#e&&(n._isGridEditMode=!0,this.gridElement.classList.add("tbw-grid-mode"),this.requestRender(),this.gridElement.addEventListener("focusin",e=>{const t=e.target;if(t.matches(i.FOCUSABLE_EDITOR_SELECTOR)){if(this.#f)return t.blur(),void this.gridElement.focus();this.#h=!0}},{signal:t}),this.gridElement.addEventListener("focusout",e=>{const t=e.relatedTarget;t&&(this.gridElement.contains(t)||this.grid.containsFocus?.(t))&&t.matches(i.FOCUSABLE_EDITOR_SELECTOR)||(this.#h=!1)},{signal:t}),this.gridElement.addEventListener("keydown",e=>{if("Escape"===e.key&&this.#h){if(this.config.onBeforeEditClose){if(!1===this.config.onBeforeEditClose(e))return}const t=document.activeElement;t&&this.gridElement.contains(t)&&(t.blur(),this.gridElement.focus()),this.#h=!1,this.#f=!0,e.preventDefault(),e.stopPropagation()}},{capture:!0,signal:t}),this.gridElement.addEventListener("mousedown",e=>{e.target.matches(i.FOCUSABLE_EDITOR_SELECTOR)&&(this.#f=!1)},{signal:t}))}detach(){this.gridElement._isGridEditMode=!1,this.gridElement.classList.remove("tbw-grid-mode"),this.#t=-1,this.#i=void 0,this.#n=void 0,this.#o=-1,this.#r.clear(),this.#s.clear(),this.#d.clear(),this.#l.clear(),this.#h=!1,this.#f=!1,this.#g=!1,super.detach()}handleQuery(e){if("isEditing"===e.type)return this.#e||-1!==this.#t}onCellClick(e){if(this.#e)return!1;const t=this.grid,i=this.config.editOn??t.effectiveConfig?.editOn;if(!1===i||"manual"===i)return!1;if("click"!==i&&"dblclick"!==i)return!1;const n="dblclick"===e.originalEvent.type;if("click"===i&&n)return!1;if("dblclick"===i&&!n)return!1;const{rowIndex:o}=e,r=t._columns?.some(e=>e.editable);return!!r&&(e.originalEvent.stopPropagation(),this.beginBulkEdit(o),!0)}onKeyDown(e){const i=this.grid;if("Escape"===e.key){if(this.#e&&this.#h){if(this.config.onBeforeEditClose){if(!1===this.config.onBeforeEditClose(e))return!0}const t=document.activeElement;return t&&this.gridElement.contains(t)&&t.blur(),this.#h=!1,this.requestAfterRender(),!0}if(-1!==this.#t&&!this.#e){if(this.config.onBeforeEditClose){if(!1===this.config.onBeforeEditClose(e))return!0}return this.#w(this.#t,!0),!0}}if(this.#e&&!this.#h&&("ArrowUp"===e.key||"ArrowDown"===e.key||"ArrowLeft"===e.key||"ArrowRight"===e.key))return!1;if(this.#e&&this.#h&&("ArrowUp"===e.key||"ArrowDown"===e.key))return!0;if(("ArrowUp"===e.key||"ArrowDown"===e.key)&&-1!==this.#t&&!this.#e){if(this.config.onBeforeEditClose){if(!1===this.config.onBeforeEditClose(e))return!0}const n=i._rows.length-1,o=this.#t;return this.#w(o,!1),"ArrowDown"===e.key?i._focusRow=Math.min(n,i._focusRow+1):i._focusRow=Math.max(0,i._focusRow-1),e.preventDefault(),t.ensureCellVisible(i),this.requestAfterRender(),!0}if("Tab"===e.key&&(-1!==this.#t||this.#e)){if(e.preventDefault(),this.#g)return this.#w(this.#t,!1),!0;const t=!e.shiftKey;return this.#p(t),!0}if(" "===e.key||"Spacebar"===e.key){if(-1!==this.#t)return!1;const t=i._focusRow,n=i._focusCol;if(t>=0&&n>=0){const o=i._visibleColumns[n],s=i._rows[t];if(o?.editable&&"boolean"===o.type&&s){const i=o.field;if(r(i)){const n=!s[i];return this.#v(t,o,n,s),e.preventDefault(),this.requestRender(),!0}}}return!1}if(!("Enter"!==e.key||e.shiftKey||e.ctrlKey||e.altKey||e.metaKey)){if(this.#e&&!this.#h)return this.#E(),!0;if(-1!==this.#t){if(this.config.onBeforeEditClose){if(!1===this.config.onBeforeEditClose(e))return!0}return!1}const t=this.config.editOn??i.effectiveConfig?.editOn;if(!1===t||"manual"===t)return!1;const n=i._focusRow,o=i._focusCol;if(n>=0){const t=i._columns?.some(e=>e.editable);if(t){const t=i._visibleColumns[o],r=i._rows[n],s=t?.field??"",d=s&&r?r[s]:void 0,l=this.gridElement.querySelector(`[data-row="${n}"][data-col="${o}"]`),c=new CustomEvent("cell-activate",{cancelable:!0,bubbles:!0,detail:{rowIndex:n,colIndex:o,field:s,value:d,row:r,cellEl:l,trigger:"keyboard",originalEvent:e}});this.gridElement.dispatchEvent(c);const a=new CustomEvent("activate-cell",{cancelable:!0,bubbles:!0,detail:{row:n,col:o}});return this.gridElement.dispatchEvent(a),c.defaultPrevented||a.defaultPrevented?(e.preventDefault(),!0):(this.beginBulkEdit(n),!0)}}return!1}if("F2"===e.key){if(-1!==this.#t||this.#e)return!1;if(!1===(this.config.editOn??i.effectiveConfig?.editOn))return!1;const t=i._focusRow,n=i._focusCol;if(t>=0&&n>=0){const o=i._visibleColumns[n];if(o?.editable&&o.field)return e.preventDefault(),this.beginCellEdit(t,o.field),!0}return!1}return!1}processColumns(e){const t=this.grid,i=t.effectiveConfig?.typeDefaults,n=t.__frameworkAdapter;return i||n?.getTypeDefault?e.map(e=>{if(!e.type)return e;let t;if(i?.[e.type]?.editorParams&&(t=i[e.type].editorParams),!t&&n?.getTypeDefault){const i=n.getTypeDefault(e.type);i?.editorParams&&(t=i.editorParams)}return t?{...e,editorParams:{...t,...e.editorParams}}:e}):e}afterRender(){const e=this.grid;if(this.#c&&(this.#c=!1,this.#m(e)),-1!==this.#a){const t=this.#a;this.#a=-1,e.animateRow?.(t,"change")}if(!this.#e&&0!==this.#d.size)for(const t of this.#d){const[i,n]=t.split(":"),o=parseInt(i,10),r=parseInt(n,10),s=e.findRenderedRowElement?.(o);if(!s)continue;const d=s.querySelector(`.cell[data-col="${r}"]`);if(!d||d.classList.contains("editing"))continue;const l=e._rows[o],c=e._visibleColumns[r];l&&c&&this.#R(l,o,c,r,d,!0)}}afterCellRender(e){if(!this.#e)return;const{row:t,rowIndex:i,column:n,colIndex:o,cellElement:r}=e;n.editable&&(r.classList.contains("editing")||this.#R(t,i,n,o,r,!0))}onScrollRender(){this.afterRender()}get changedRows(){const e=[];for(const t of this.#s){const i=this.grid.getRow(t);i&&e.push(i)}return e}get changedRowIds(){return Array.from(this.#s)}get activeEditRow(){return this.#t}get activeEditCol(){return this.#o}isRowEditing(e){return this.#t===e}isCellEditing(e,t){return this.#d.has(`${e}:${t}`)}isRowChanged(e){const t=this.grid,i=t._rows[e];if(!i)return!1;try{const e=t.getRowId?.(i);return!!e&&this.#s.has(e)}catch{return!1}}isRowChangedById(e){return this.#s.has(e)}setInvalid(e,t,i=""){let n=this.#u.get(e);n||(n=new Map,this.#u.set(e,n)),n.set(t,i),this.#b(e,t,!0)}clearInvalid(e,t){const i=this.#u.get(e);i&&(i.delete(t),0===i.size&&this.#u.delete(e)),this.#b(e,t,!1)}clearRowInvalid(e){const t=this.#u.get(e);if(t){const i=Array.from(t.keys());this.#u.delete(e),i.forEach(t=>this.#b(e,t,!1))}}clearAllInvalid(){const e=Array.from(this.#u.entries());this.#u.clear(),e.forEach(([e,t])=>{t.forEach((t,i)=>this.#b(e,i,!1))})}isCellInvalid(e,t){return this.#u.get(e)?.has(t)??!1}getInvalidMessage(e,t){return this.#u.get(e)?.get(t)}hasInvalidCells(e){const t=this.#u.get(e);return!!t&&t.size>0}getInvalidFields(e){return new Map(this.#u.get(e)??[])}#b(e,t,i){const n=this.grid,o=n._visibleColumns?.findIndex(e=>e.field===t);if(-1===o||void 0===o)return;const r=n._rows,s=r?.findIndex(t=>{try{return n.getRowId?.(t)===e}catch{return!1}});if(-1===s||void 0===s)return;const d=n.findRenderedRowElement?.(s),l=d?.querySelector(`.cell[data-col="${o}"]`);if(l)if(i){l.setAttribute("data-invalid","true");const i=this.#u.get(e)?.get(t);i&&l.setAttribute("title",i)}else l.removeAttribute("data-invalid"),l.removeAttribute("title")}resetChangedRows(e){const t=this.changedRows,i=this.changedRowIds;this.#s.clear(),this.#y(),e||this.emit("changed-rows-reset",{rows:t,ids:i});const n=this.grid;n._rowPool?.forEach(e=>e.classList.remove("changed"))}beginCellEdit(e,t){const i=this.grid,n=i._visibleColumns.findIndex(e=>e.field===t);if(-1===n)return;const o=i._visibleColumns[n];if(!o?.editable)return;const r=i.findRenderedRowElement?.(e),s=r?.querySelector(`.cell[data-col="${n}"]`);s&&(this.#g=!0,this.#C(e,n,s))}beginBulkEdit(e){const t=this.grid;if(!1===(this.config.editOn??t.effectiveConfig?.editOn))return;const n=t._columns?.some(e=>e.editable);if(!n)return;const o=t.findRenderedRowElement?.(e);if(!o)return;this.#g=!1;const r=t._rows[e];this.#I(e,r),Array.from(o.children).forEach((i,n)=>{const o=t._visibleColumns[n];if(o?.editable){const t=i;t.classList.contains("editing")||this.#R(r,e,o,n,t,!0)}}),setTimeout(()=>{let e=o.querySelector(`.cell[data-col="${t._focusCol}"]`);if(e?.classList.contains("editing")||(e=o.querySelector(".cell.editing")),e?.classList.contains("editing")){const t=e.querySelector(i.FOCUSABLE_EDITOR_SELECTOR);try{t?.focus({preventScroll:!0})}catch{}}},0)}commitActiveRowEdit(){-1!==this.#t&&this.#w(this.#t,!1)}cancelActiveRowEdit(){-1!==this.#t&&this.#w(this.#t,!0)}#C(e,t,i){const n=this.grid,o=n._rows[e],r=n._visibleColumns[t];o&&r?.editable&&(i.classList.contains("editing")||(this.#t!==e&&this.#I(e,o),this.#o=t,this.#R(o,e,r,t,i,!1)))}#E(){const e=this.grid,t=e._focusRow,n=e._focusCol;if(t<0||n<0)return;const o=e.findRenderedRowElement?.(t),r=o?.querySelector(`.cell[data-col="${n}"]`);if(r?.classList.contains("editing")){const e=r.querySelector(i.FOCUSABLE_EDITOR_SELECTOR);e&&(this.#f=!1,e.focus(),this.#h=!0,e instanceof HTMLInputElement&&("text"===e.type||"number"===e.type)&&e.select())}}#p(e){const n=this.grid,o=n._rows,r=this.#e?n._focusRow:this.#t,s=n._visibleColumns.map((e,t)=>e.editable?t:-1).filter(e=>e>=0);if(0===s.length)return;const d=s.indexOf(n._focusCol)+(e?1:-1);if(d>=0&&d<s.length){n._focusCol=s[d];const e=n.findRenderedRowElement?.(r),o=e?.querySelector(`.cell[data-col="${s[d]}"]`);if(o?.classList.contains("editing")){const e=o.querySelector(i.FOCUSABLE_EDITOR_SELECTOR);e?.focus({preventScroll:!0})}return void t.ensureCellVisible(n,{forceHorizontalScroll:!0})}const l=r+(e?1:-1);l>=0&&l<o.length&&(this.#e?(n._focusRow=l,n._focusCol=e?s[0]:s[s.length-1],t.ensureCellVisible(n,{forceHorizontalScroll:!0}),this.requestAfterRender(),setTimeout(()=>{const e=n.findRenderedRowElement?.(l),t=e?.querySelector(`.cell[data-col="${n._focusCol}"]`);if(t?.classList.contains("editing")){const e=t.querySelector(i.FOCUSABLE_EDITOR_SELECTOR);e?.focus({preventScroll:!0})}},0)):(this.#w(r,!1),n._focusRow=l,n._focusCol=e?s[0]:s[s.length-1],this.beginBulkEdit(l),t.ensureCellVisible(n,{forceHorizontalScroll:!0})))}#y(){const e=this.grid;e._activeEditRows=this.#t,e._rowEditSnapshots=this.#r}#I(e,t){if(this.#t!==e){this.#r.set(e,{...t}),this.#t=e,this.#n=t;const i=this.grid;try{this.#i=i.getRowId?.(t)??void 0}catch{this.#i=void 0}this.#y(),this.#e||this.emit("edit-open",{rowIndex:e,rowId:this.#i??"",row:t})}}#w(e,t){if(this.#t!==e)return;const i=this.grid,n=this.#r.get(e),o=i.findRenderedRowElement?.(e);let r=this.#i;const d=r?i._getRowEntry(r):void 0,l=d?.row??this.#n??i._rows[e];if(!r&&l)try{r=i.getRowId?.(l)}catch{}if(!t&&o&&l){o.querySelectorAll(".cell.editing").forEach(t=>{const n=Number(t.getAttribute("data-col"));if(isNaN(n))return;const o=i._visibleColumns[n];if(!o)return;if(t.hasAttribute("data-editor-managed"))return;const r=t.querySelector("input,textarea,select");if(r){const t=o.field,i=l[t],n=s(r,o,i);i!==n&&this.#v(e,o,n,l)}})}if(t||this.#e||!l||this.emit("before-edit-close",{rowIndex:e,rowId:r??"",row:l}),t&&n&&l)Object.keys(n).forEach(e=>{l[e]=n[e]}),r&&(this.#s.delete(r),this.clearRowInvalid(r));else if(!t&&l){const t=this.#_(n,l),i=r?this.#s.has(r):t,o=this.emitCancelable("row-commit",{rowIndex:e,rowId:r??"",row:l,oldValue:n,newValue:l,changed:i,changedRows:this.changedRows,changedRowIds:this.changedRowIds});o&&n?(Object.keys(n).forEach(e=>{l[e]=n[e]}),r&&(this.#s.delete(r),this.clearRowInvalid(r))):!o&&t&&this.isAnimationEnabled&&(this.#a=e)}this.#r.delete(e),this.#t=-1,this.#i=void 0,this.#n=void 0,this.#o=-1,this.#g=!1,this.#y();for(const s of this.#d)s.startsWith(`${e}:`)&&this.#d.delete(s);for(const s of this.#l.keys())s.startsWith(`${e}:`)&&this.#l.delete(s);this.#c=!0,o?(o.querySelectorAll(".cell.editing").forEach(e=>{e.classList.remove("editing"),function(e){e.__editingCellCount=0,e.removeAttribute("data-has-editing")}(e.parentElement)}),i.refreshVirtualWindow(!0)):(this.#m(i),this.#c=!1),!this.#e&&l&&this.emit("edit-close",{rowIndex:e,rowId:r??"",row:l,reverted:t})}#v(e,t,i,n){const o=t.field;if(!r(o))return;const s=n[o];if(s===i)return;const l=this.grid;let c;try{c=this.grid.getRowId(n)}catch{}const a=!c||!this.#s.has(c),u=c?e=>this.grid.updateRow(c,e,"cascade"):d;let h=!1;const f=c?e=>{h=!0,this.setInvalid(c,o,e??"")}:()=>{};if(this.emitCancelable("cell-commit",{row:n,rowId:c??"",field:o,oldValue:s,value:i,rowIndex:e,changedRows:this.changedRows,changedRowIds:this.changedRowIds,firstTimeForRow:a,updateRow:u,setInvalid:f}))return;c&&!h&&this.isCellInvalid(c,o)&&this.clearInvalid(c,o),n[o]=i,c&&this.#s.add(c),this.#y(),this.emitPluginEvent("cell-edit-committed",{rowIndex:e,field:o,oldValue:s,newValue:i});const g=l.findRenderedRowElement?.(e);g&&g.classList.add("changed")}#R(e,t,n,l,c,a){if(!n.editable)return;if(c.classList.contains("editing"))return;let u;try{u=this.grid.getRowId(e)}catch{}const h=u?e=>this.grid.updateRow(u,e,"cascade"):d,f=r(n.field)?e[n.field]:void 0;c.classList.add("editing"),this.#d.add(`${t}:${l}`);const g=c.parentElement;g&&function(e){const t=(e.__editingCellCount??0)+1;e.__editingCellCount=t,e.setAttribute("data-has-editing","")}(g);let w=!1;const E=i=>{if(w||!this.#e&&-1===this.#t)return;const o=this.grid,r=u?o._getRowEntry(u):void 0,s=r?.row??e,d=r?.index??t;this.#v(d,n,i,s)},p=()=>{if(w=!0,r(n.field)){const t=this.grid,i=u?t._getRowEntry(u):void 0;(i?.row??e)[n.field]=f}},v=document.createElement("div");v.className="tbw-editor-host",c.innerHTML="",c.appendChild(v),v.addEventListener("keydown",e=>{if("Enter"===e.key){if(this.#e){e.stopPropagation(),e.preventDefault();const t=v.querySelector("input,textarea,select");return void(t&&E(s(t,n,f)))}if(this.config.onBeforeEditClose){if(!1===this.config.onBeforeEditClose(e))return}e.stopPropagation(),e.preventDefault(),w=!0,this.#w(t,!1)}if("Escape"===e.key){if(this.#e)return e.stopPropagation(),void e.preventDefault();if(this.config.onBeforeEditClose){if(!1===this.config.onBeforeEditClose(e))return}e.stopPropagation(),e.preventDefault(),p(),this.#w(t,!0)}});const m=n,R=m.__editorTemplate,b=function(e,t){if(t.editor)return t.editor;if(t.__editorTemplate)return"template";if(!t.type)return;const i=e.effectiveConfig?.typeDefaults;if(i?.[t.type]?.editor)return i[t.type].editor;const n=e.__frameworkAdapter;if(n?.getTypeDefault){const e=n.getTypeDefault(t.type);if(e?.editor)return e.editor}}(this.grid,m)??o(n),y=f,C=`${t}:${n.field}`,I=[];this.#l.set(C,e=>{for(const t of I)t(e)});const _=e=>{I.push(e)};if("template"===b&&R)this.#k(v,m,e,f,E,p,a,t),_(e=>{const t=v.querySelector("input,textarea,select");t&&(t instanceof HTMLInputElement&&"checkbox"===t.type?t.checked=!!e:t.value=String(e??""))});else if("string"==typeof b){const e=document.createElement(b);e.value=y,e.addEventListener("change",()=>E(e.value)),_(t=>{e.value=t}),v.appendChild(e),a||queueMicrotask(()=>{const e=v.querySelector(i.FOCUSABLE_EDITOR_SELECTOR);e?.focus({preventScroll:!0})})}else if("function"==typeof b){const t=b({row:e,rowId:u??"",value:y,field:n.field,column:n,commit:E,cancel:p,updateRow:h,onValueChange:_});if("string"==typeof t)v.innerHTML=t,function(e,t,i,n){const o=e.querySelector("input,textarea,select");o&&(o.addEventListener("blur",()=>{i(s(o,t,n))}),o instanceof HTMLInputElement&&"checkbox"===o.type?o.addEventListener("change",()=>i(o.checked)):o instanceof HTMLSelectElement&&o.addEventListener("change",()=>i(s(o,t,n))))}(v,n,E,f),_(e=>{const t=v.querySelector("input,textarea,select");t&&(t instanceof HTMLInputElement&&"checkbox"===t.type?t.checked=!!e:t.value=String(e??""))});else if(t instanceof Node){v.appendChild(t);t instanceof HTMLInputElement||t instanceof HTMLSelectElement||t instanceof HTMLTextAreaElement?_(e=>{t instanceof HTMLInputElement&&"checkbox"===t.type?t.checked=!!e:t.value=String(e??"")}):c.setAttribute("data-editor-managed","")}a||queueMicrotask(()=>{const e=v.querySelector(i.FOCUSABLE_EDITOR_SELECTOR);e?.focus({preventScroll:!0})})}else if(b&&"object"==typeof b){const t=document.createElement("div");t.setAttribute("data-external-editor",""),t.setAttribute("data-field",n.field),v.appendChild(t),c.setAttribute("data-editor-managed","");const i={row:e,rowId:u??"",value:y,field:n.field,column:n,commit:E,cancel:p,updateRow:h,onValueChange:_};if(b.mount)try{b.mount({placeholder:t,context:i,spec:b})}catch(k){console.warn(`[tbw-grid] External editor mount error for column '${n.field}':`,k)}else this.grid.dispatchEvent(new CustomEvent("mount-external-editor",{detail:{placeholder:t,spec:b,context:i}}))}}#k(e,t,i,n,o,d,l,c){const a=t.__editorTemplate;if(!a)return;const u=a.cloneNode(!0),h=t.__compiledEditor;h?u.innerHTML=h({row:i,value:n,field:t.field,column:t,commit:o,cancel:d}):u.querySelectorAll("*").forEach(e=>{1===e.childNodes.length&&e.firstChild?.nodeType===Node.TEXT_NODE&&(e.textContent=e.textContent?.replace(/{{\s*value\s*}}/g,null==n?"":String(n)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g,(e,t)=>{if(!r(t))return"";const n=i[t];return null==n?"":String(n)})||"")});const f=u.querySelector("input,textarea,select");if(f){f instanceof HTMLInputElement&&"checkbox"===f.type?f.checked=!!n:f.value=String(n??"");let e=!1;f.addEventListener("blur",()=>{e||o(s(f,t,n))}),f.addEventListener("keydown",i=>{const r=i;if("Enter"===r.key){if(this.config.onBeforeEditClose){if(!1===this.config.onBeforeEditClose(r))return}r.stopPropagation(),r.preventDefault(),e=!0,o(s(f,t,n)),this.#w(c,!1)}if("Escape"===r.key){if(this.config.onBeforeEditClose){if(!1===this.config.onBeforeEditClose(r))return}r.stopPropagation(),r.preventDefault(),d(),this.#w(c,!0)}}),f instanceof HTMLInputElement&&"checkbox"===f.type&&f.addEventListener("change",()=>o(f.checked)),l||setTimeout(()=>f.focus({preventScroll:!0}),0)}e.appendChild(u)}#_(e,t){if(!e)return!1;const i=e,n=t,o=new Set([...Object.keys(i),...Object.keys(n)]);for(const r of o)if(i[r]!==n[r])return!0;return!1}#m(e){queueMicrotask(()=>{try{const t=e._focusRow,i=e._focusCol,n=e.findRenderedRowElement?.(t);if(n){Array.from(e._bodyEl.querySelectorAll(".cell-focus")).forEach(e=>e.classList.remove("cell-focus"));const o=n.querySelector(`.cell[data-row="${t}"][data-col="${i}"]`);o&&(o.classList.add("cell-focus"),o.setAttribute("aria-selected","true"),o.hasAttribute("tabindex")||o.setAttribute("tabindex","-1"),o.focus({preventScroll:!0}))}}catch{}})}}e.EditingPlugin=l,e.defaultEditorFor=o,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("../../core/internal/keyboard"),require("../../core/internal/rows"),require("../../core/plugin/base-plugin")):"function"==typeof define&&define.amd?define(["exports","../../core/internal/keyboard","../../core/internal/rows","../../core/plugin/base-plugin"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).TbwGridPlugin_editing={},e.TbwGrid,e.TbwGrid,e.TbwGrid)}(this,function(e,t,i,n){"use strict";function o(e){switch(e.type){case"number":return function(e){return t=>{const i=e.editorParams,n=document.createElement("input");n.type="number",n.value=null!=t.value?String(t.value):"",void 0!==i?.min&&(n.min=String(i.min)),void 0!==i?.max&&(n.max=String(i.max)),void 0!==i?.step&&(n.step=String(i.step)),i?.placeholder&&(n.placeholder=i.placeholder);const o=()=>t.commit(""===n.value?null:Number(n.value));return n.addEventListener("blur",o),n.addEventListener("keydown",e=>{"Enter"===e.key&&o(),"Escape"===e.key&&t.cancel()}),n}}(e);case"boolean":return e=>{const t=document.createElement("input");return t.type="checkbox",t.checked=!!e.value,t.addEventListener("change",()=>e.commit(t.checked)),t};case"date":return function(e){return t=>{const i=e.editorParams,n=document.createElement("input");return n.type="date",t.value instanceof Date?n.valueAsDate=t.value:"string"==typeof t.value&&t.value&&(n.value=t.value.split("T")[0]),i?.min&&(n.min=i.min),i?.max&&(n.max=i.max),i?.placeholder&&(n.placeholder=i.placeholder),n.addEventListener("change",()=>{"string"==typeof t.value?t.commit(n.value):t.commit(n.valueAsDate)}),n.addEventListener("keydown",e=>{"Escape"===e.key&&t.cancel()}),n}}(e);case"select":return function(e){return t=>{const i=e.editorParams,n=document.createElement("select");if(e.multi&&(n.multiple=!0),i?.includeEmpty){const e=document.createElement("option");e.value="",e.textContent=i.emptyLabel??"",n.appendChild(e)}const o=function(e){const t=e.options;return t?"function"==typeof t?t():t:[]}(e);o.forEach(i=>{const o=document.createElement("option");o.value=String(i.value),o.textContent=i.label,e.multi&&Array.isArray(t.value)&&t.value.includes(i.value)?o.selected=!0:e.multi||t.value!==i.value||(o.selected=!0),n.appendChild(o)});const r=()=>{if(e.multi){const e=Array.from(n.selectedOptions).map(e=>e.value);t.commit(e)}else t.commit(n.value)};return n.addEventListener("change",r),n.addEventListener("blur",r),n.addEventListener("keydown",e=>{"Escape"===e.key&&t.cancel()}),n}}(e);default:return function(e){return t=>{const i=e.editorParams,n=document.createElement("input");n.type="text",n.value=null!=t.value?String(t.value):"",void 0!==i?.maxLength&&(n.maxLength=i.maxLength),i?.pattern&&(n.pattern=i.pattern),i?.placeholder&&(n.placeholder=i.placeholder);const o=()=>{const e=n.value;(null!==t.value&&void 0!==t.value||""!==e)&&("string"==typeof t.value&&e===t.value.replace(/[\n\r]/g,"")||("number"==typeof t.value&&""!==e?t.commit(Number(e)):t.commit(e)))};return n.addEventListener("blur",o),n.addEventListener("keydown",e=>{"Enter"===e.key&&o(),"Escape"===e.key&&t.cancel()}),n}}(e)}}function r(e){return"string"==typeof e&&("__proto__"!==e&&"constructor"!==e&&"prototype"!==e)}function s(e,t,i){return e instanceof HTMLInputElement?"checkbox"===e.type?e.checked:"number"===e.type?""===e.value?null:Number(e.value):"date"===e.type?"string"==typeof i?e.value:e.valueAsDate:"number"==typeof i?""===e.value?null:Number(e.value):null==i&&""===e.value||"string"==typeof i&&e.value===i.replace(/[\n\r]/g,"")?i:e.value:"number"===t?.type&&""!==e.value||"number"==typeof i&&""!==e.value?Number(e.value):null==i&&""===e.value?i:e.value}function d(e){}class l extends n.BaseGridPlugin{static manifest={ownedProperties:[{property:"editable",level:"column",description:'the "editable" column property',isUsed:e=>!0===e},{property:"editor",level:"column",description:'the "editor" column property'},{property:"editorParams",level:"column",description:'the "editorParams" column property'}],events:[{type:"cell-edit-committed",description:"Emitted when a cell edit is committed (for plugin-to-plugin coordination)"}],queries:[{type:"isEditing",description:"Returns whether any cell is currently being edited"}]};name="editing";styles="@layer tbw-plugins{tbw-grid{--tbw-editing-bg: var(--tbw-color-selection);--tbw-editing-row-bg: var(--tbw-editing-bg);--tbw-editing-border: var(--tbw-border-input, 1px solid var(--tbw-color-border-strong));--tbw-padding-editing-input: var(--tbw-cell-padding-input, 2px 6px);--tbw-font-size-editor: inherit;--tbw-editing-row-outline-color: var(--tbw-color-accent);--tbw-editing-row-outline-width: 1px;--tbw-invalid-bg: light-dark(#fef2f2, #450a0a);--tbw-invalid-border-color: light-dark(#ef4444, #f87171)}tbw-grid:not(.tbw-grid-mode) .data-grid-row:has(.editing){background:var(--tbw-editing-row-bg);outline:var(--tbw-editing-row-outline-width) solid var(--tbw-editing-row-outline-color);outline-offset:calc(-1 * var(--tbw-editing-row-outline-width))}tbw-grid .data-grid-row>.cell.editing{overflow:hidden;padding:0;display:flex;min-height:calc(var(--tbw-row-height) + 2px);align-items:center;justify-content:center}tbw-grid .data-grid-row>.cell.editing input:not([type=checkbox]),tbw-grid .data-grid-row>.cell.editing select,tbw-grid .data-grid-row>.cell.editing textarea{width:100%;height:100%;flex:1 1 auto;min-width:0;border:var(--tbw-editing-border);padding:var(--tbw-padding-editing-input);font-size:var(--tbw-font-size-editor)}tbw-grid .tbw-editor-host{display:contents}tbw-grid .data-grid-row>.cell[data-invalid=true]{background:var(--tbw-invalid-bg);outline:1px solid var(--tbw-invalid-border-color);outline-offset:-1px}}";get defaultConfig(){return{mode:"row",editOn:"click"}}get#e(){return"grid"===this.config.mode}#t=-1;#i;#n;#o=-1;#r=new Map;#s=new Set;#d=new Set;#l=new Map;#c=!1;#a=-1;#u=new Map;#h=!1;#f=!1;#g=!1;attach(e){super.attach(e);const t=this.disconnectSignal,n=e;n._activeEditRows=-1,n._rowEditSnapshots=new Map,Object.defineProperty(e,"changedRows",{get:()=>this.changedRows,configurable:!0}),Object.defineProperty(e,"changedRowIds",{get:()=>this.changedRowIds,configurable:!0}),e.resetChangedRows=e=>this.resetChangedRows(e),e.beginBulkEdit=(e,t)=>{t&&this.beginCellEdit(e,t)},document.addEventListener("keydown",e=>{if(!this.#e&&"Escape"===e.key&&-1!==this.#t){if(this.config.onBeforeEditClose){if(!1===this.config.onBeforeEditClose(e))return}this.#w(this.#t,!0)}},{capture:!0,signal:t}),document.addEventListener("mousedown",e=>{if(this.#e)return;if(-1===this.#t)return;const t=n.findRenderedRowElement?.(this.#t);if(!t)return;if((e.composedPath&&e.composedPath()||[]).includes(t))return;const i=e.target;if(!i||this.gridElement.contains(i)||!this.grid.containsFocus?.(i)){if(this.config.onBeforeEditClose){if(!1===this.config.onBeforeEditClose(e))return}queueMicrotask(()=>{-1!==this.#t&&this.#w(this.#t,!1)})}},{signal:t}),this.config.focusTrap&&this.gridElement.addEventListener("focusout",e=>{if(this.#e)return;if(-1===this.#t)return;const t=e.relatedTarget;t&&this.grid.containsFocus?.(t)||t&&this.gridElement.contains(t)||queueMicrotask(()=>{-1!==this.#t&&this.#E()})},{signal:t}),this.gridElement.addEventListener("cell-change",e=>{const t=e.detail;if("user"===t.source)return;const i=`${t.rowIndex}:${t.field}`,n=this.#l.get(i);n&&n(t.newValue)},{signal:t}),this.#e&&(n._isGridEditMode=!0,this.gridElement.classList.add("tbw-grid-mode"),this.requestRender(),this.gridElement.addEventListener("focusin",e=>{const t=e.target;if(t.matches(i.FOCUSABLE_EDITOR_SELECTOR)){if(this.#f)return t.blur(),void this.gridElement.focus();this.#h=!0}},{signal:t}),this.gridElement.addEventListener("focusout",e=>{const t=e.relatedTarget;t&&(this.gridElement.contains(t)||this.grid.containsFocus?.(t))&&t.matches(i.FOCUSABLE_EDITOR_SELECTOR)||(this.#h=!1)},{signal:t}),this.gridElement.addEventListener("keydown",e=>{if("Escape"===e.key&&this.#h){if(this.config.onBeforeEditClose){if(!1===this.config.onBeforeEditClose(e))return}const t=document.activeElement;t&&this.gridElement.contains(t)&&(t.blur(),this.gridElement.focus()),this.#h=!1,this.#f=!0,e.preventDefault(),e.stopPropagation()}},{capture:!0,signal:t}),this.gridElement.addEventListener("mousedown",e=>{e.target.matches(i.FOCUSABLE_EDITOR_SELECTOR)&&(this.#f=!1)},{signal:t}))}detach(){this.gridElement._isGridEditMode=!1,this.gridElement.classList.remove("tbw-grid-mode"),this.#t=-1,this.#i=void 0,this.#n=void 0,this.#o=-1,this.#r.clear(),this.#s.clear(),this.#d.clear(),this.#l.clear(),this.#h=!1,this.#f=!1,this.#g=!1,super.detach()}handleQuery(e){if("isEditing"===e.type)return this.#e||-1!==this.#t}onCellClick(e){if(this.#e)return!1;const t=this.grid,i=this.config.editOn??t.effectiveConfig?.editOn;if(!1===i||"manual"===i)return!1;if("click"!==i&&"dblclick"!==i)return!1;const n="dblclick"===e.originalEvent.type;if("click"===i&&n)return!1;if("dblclick"===i&&!n)return!1;const{rowIndex:o}=e,r=t._columns?.some(e=>e.editable);return!!r&&(e.originalEvent.stopPropagation(),this.beginBulkEdit(o),!0)}onKeyDown(e){const i=this.grid;if("Escape"===e.key){if(this.#e&&this.#h){if(this.config.onBeforeEditClose){if(!1===this.config.onBeforeEditClose(e))return!0}const t=document.activeElement;return t&&this.gridElement.contains(t)&&t.blur(),this.#h=!1,this.requestAfterRender(),!0}if(-1!==this.#t&&!this.#e){if(this.config.onBeforeEditClose){if(!1===this.config.onBeforeEditClose(e))return!0}return this.#w(this.#t,!0),!0}}if(this.#e&&!this.#h&&("ArrowUp"===e.key||"ArrowDown"===e.key||"ArrowLeft"===e.key||"ArrowRight"===e.key))return!1;if(this.#e&&this.#h&&("ArrowUp"===e.key||"ArrowDown"===e.key))return!0;if(("ArrowUp"===e.key||"ArrowDown"===e.key)&&-1!==this.#t&&!this.#e){if(this.config.onBeforeEditClose){if(!1===this.config.onBeforeEditClose(e))return!0}const n=i._rows.length-1,o=this.#t;return this.#w(o,!1),"ArrowDown"===e.key?i._focusRow=Math.min(n,i._focusRow+1):i._focusRow=Math.max(0,i._focusRow-1),e.preventDefault(),t.ensureCellVisible(i),this.requestAfterRender(),!0}if("Tab"===e.key&&(-1!==this.#t||this.#e)){if(e.preventDefault(),this.#g)return this.#w(this.#t,!1),!0;const t=!e.shiftKey;return this.#p(t),!0}if(" "===e.key||"Spacebar"===e.key){if(-1!==this.#t)return!1;const t=i._focusRow,n=i._focusCol;if(t>=0&&n>=0){const o=i._visibleColumns[n],s=i._rows[t];if(o?.editable&&"boolean"===o.type&&s){const i=o.field;if(r(i)){const n=!s[i];return this.#v(t,o,n,s),e.preventDefault(),this.requestRender(),!0}}}return!1}if(!("Enter"!==e.key||e.shiftKey||e.ctrlKey||e.altKey||e.metaKey)){if(this.#e&&!this.#h)return this.#E(),!0;if(-1!==this.#t){if(this.config.onBeforeEditClose){if(!1===this.config.onBeforeEditClose(e))return!0}return!1}const t=this.config.editOn??i.effectiveConfig?.editOn;if(!1===t||"manual"===t)return!1;const n=i._focusRow,o=i._focusCol;if(n>=0){const t=i._columns?.some(e=>e.editable);if(t){const t=i._visibleColumns[o],r=i._rows[n],s=t?.field??"",d=s&&r?r[s]:void 0,l=this.gridElement.querySelector(`[data-row="${n}"][data-col="${o}"]`),c=new CustomEvent("cell-activate",{cancelable:!0,bubbles:!0,detail:{rowIndex:n,colIndex:o,field:s,value:d,row:r,cellEl:l,trigger:"keyboard",originalEvent:e}});this.gridElement.dispatchEvent(c);const a=new CustomEvent("activate-cell",{cancelable:!0,bubbles:!0,detail:{row:n,col:o}});return this.gridElement.dispatchEvent(a),c.defaultPrevented||a.defaultPrevented?(e.preventDefault(),!0):(this.beginBulkEdit(n),!0)}}return!1}if("F2"===e.key){if(-1!==this.#t||this.#e)return!1;if(!1===(this.config.editOn??i.effectiveConfig?.editOn))return!1;const t=i._focusRow,n=i._focusCol;if(t>=0&&n>=0){const o=i._visibleColumns[n];if(o?.editable&&o.field)return e.preventDefault(),this.beginCellEdit(t,o.field),!0}return!1}return!1}processColumns(e){const t=this.grid,i=t.effectiveConfig?.typeDefaults,n=t.__frameworkAdapter;return i||n?.getTypeDefault?e.map(e=>{if(!e.type)return e;let t;if(i?.[e.type]?.editorParams&&(t=i[e.type].editorParams),!t&&n?.getTypeDefault){const i=n.getTypeDefault(e.type);i?.editorParams&&(t=i.editorParams)}return t?{...e,editorParams:{...t,...e.editorParams}}:e}):e}afterRender(){const e=this.grid;if(this.#c&&(this.#c=!1,this.#m(e)),-1!==this.#a){const t=this.#a;this.#a=-1,e.animateRow?.(t,"change")}if(!this.#e&&0!==this.#d.size)for(const t of this.#d){const[i,n]=t.split(":"),o=parseInt(i,10),r=parseInt(n,10),s=e.findRenderedRowElement?.(o);if(!s)continue;const d=s.querySelector(`.cell[data-col="${r}"]`);if(!d||d.classList.contains("editing"))continue;const l=e._rows[o],c=e._visibleColumns[r];l&&c&&this.#R(l,o,c,r,d,!0)}}afterCellRender(e){if(!this.#e)return;const{row:t,rowIndex:i,column:n,colIndex:o,cellElement:r}=e;n.editable&&(r.classList.contains("editing")||this.#R(t,i,n,o,r,!0))}onScrollRender(){this.afterRender()}get changedRows(){const e=[];for(const t of this.#s){const i=this.grid.getRow(t);i&&e.push(i)}return e}get changedRowIds(){return Array.from(this.#s)}get activeEditRow(){return this.#t}get activeEditCol(){return this.#o}isRowEditing(e){return this.#t===e}isCellEditing(e,t){return this.#d.has(`${e}:${t}`)}isRowChanged(e){const t=this.grid,i=t._rows[e];if(!i)return!1;try{const e=t.getRowId?.(i);return!!e&&this.#s.has(e)}catch{return!1}}isRowChangedById(e){return this.#s.has(e)}setInvalid(e,t,i=""){let n=this.#u.get(e);n||(n=new Map,this.#u.set(e,n)),n.set(t,i),this.#b(e,t,!0)}clearInvalid(e,t){const i=this.#u.get(e);i&&(i.delete(t),0===i.size&&this.#u.delete(e)),this.#b(e,t,!1)}clearRowInvalid(e){const t=this.#u.get(e);if(t){const i=Array.from(t.keys());this.#u.delete(e),i.forEach(t=>this.#b(e,t,!1))}}clearAllInvalid(){const e=Array.from(this.#u.entries());this.#u.clear(),e.forEach(([e,t])=>{t.forEach((t,i)=>this.#b(e,i,!1))})}isCellInvalid(e,t){return this.#u.get(e)?.has(t)??!1}getInvalidMessage(e,t){return this.#u.get(e)?.get(t)}hasInvalidCells(e){const t=this.#u.get(e);return!!t&&t.size>0}getInvalidFields(e){return new Map(this.#u.get(e)??[])}#b(e,t,i){const n=this.grid,o=n._visibleColumns?.findIndex(e=>e.field===t);if(-1===o||void 0===o)return;const r=n._rows,s=r?.findIndex(t=>{try{return n.getRowId?.(t)===e}catch{return!1}});if(-1===s||void 0===s)return;const d=n.findRenderedRowElement?.(s),l=d?.querySelector(`.cell[data-col="${o}"]`);if(l)if(i){l.setAttribute("data-invalid","true");const i=this.#u.get(e)?.get(t);i&&l.setAttribute("title",i)}else l.removeAttribute("data-invalid"),l.removeAttribute("title")}resetChangedRows(e){const t=this.changedRows,i=this.changedRowIds;this.#s.clear(),this.#y(),e||this.emit("changed-rows-reset",{rows:t,ids:i});const n=this.grid;n._rowPool?.forEach(e=>e.classList.remove("changed"))}beginCellEdit(e,t){const i=this.grid,n=i._visibleColumns.findIndex(e=>e.field===t);if(-1===n)return;const o=i._visibleColumns[n];if(!o?.editable)return;const r=i.findRenderedRowElement?.(e),s=r?.querySelector(`.cell[data-col="${n}"]`);s&&(this.#g=!0,this.#C(e,n,s))}beginBulkEdit(e){const t=this.grid;if(!1===(this.config.editOn??t.effectiveConfig?.editOn))return;const n=t._columns?.some(e=>e.editable);if(!n)return;const o=t.findRenderedRowElement?.(e);if(!o)return;this.#g=!1;const r=t._rows[e];this.#I(e,r),Array.from(o.children).forEach((i,n)=>{const o=t._visibleColumns[n];if(o?.editable){const t=i;t.classList.contains("editing")||this.#R(r,e,o,n,t,!0)}}),setTimeout(()=>{let e=o.querySelector(`.cell[data-col="${t._focusCol}"]`);if(e?.classList.contains("editing")||(e=o.querySelector(".cell.editing")),e?.classList.contains("editing")){const t=e.querySelector(i.FOCUSABLE_EDITOR_SELECTOR);try{t?.focus({preventScroll:!0})}catch{}}},0)}commitActiveRowEdit(){-1!==this.#t&&this.#w(this.#t,!1)}cancelActiveRowEdit(){-1!==this.#t&&this.#w(this.#t,!0)}#C(e,t,i){const n=this.grid,o=n._rows[e],r=n._visibleColumns[t];o&&r?.editable&&(i.classList.contains("editing")||(this.#t!==e&&this.#I(e,o),this.#o=t,this.#R(o,e,r,t,i,!1)))}#E(){const e=this.grid,t=e._focusRow,n=e._focusCol;if(t<0||n<0)return;const o=e.findRenderedRowElement?.(t),r=o?.querySelector(`.cell[data-col="${n}"]`);if(r?.classList.contains("editing")){const e=r.querySelector(i.FOCUSABLE_EDITOR_SELECTOR);e&&(this.#f=!1,e.focus(),this.#h=!0,e instanceof HTMLInputElement&&("text"===e.type||"number"===e.type)&&e.select())}}#p(e){const n=this.grid,o=n._rows,r=this.#e?n._focusRow:this.#t,s=n._visibleColumns.map((e,t)=>e.editable?t:-1).filter(e=>e>=0);if(0===s.length)return;const d=s.indexOf(n._focusCol)+(e?1:-1);if(d>=0&&d<s.length){n._focusCol=s[d];const e=n.findRenderedRowElement?.(r),o=e?.querySelector(`.cell[data-col="${s[d]}"]`);if(o?.classList.contains("editing")){const e=o.querySelector(i.FOCUSABLE_EDITOR_SELECTOR);e?.focus({preventScroll:!0})}return void t.ensureCellVisible(n,{forceHorizontalScroll:!0})}const l=r+(e?1:-1);l>=0&&l<o.length&&(this.#e?(n._focusRow=l,n._focusCol=e?s[0]:s[s.length-1],t.ensureCellVisible(n,{forceHorizontalScroll:!0}),this.requestAfterRender(),setTimeout(()=>{const e=n.findRenderedRowElement?.(l),t=e?.querySelector(`.cell[data-col="${n._focusCol}"]`);if(t?.classList.contains("editing")){const e=t.querySelector(i.FOCUSABLE_EDITOR_SELECTOR);e?.focus({preventScroll:!0})}},0)):(this.#w(r,!1),n._focusRow=l,n._focusCol=e?s[0]:s[s.length-1],this.beginBulkEdit(l),t.ensureCellVisible(n,{forceHorizontalScroll:!0})))}#y(){const e=this.grid;e._activeEditRows=this.#t,e._rowEditSnapshots=this.#r}#I(e,t){if(this.#t!==e){-1!==this.#t&&this.#w(this.#t,!1),this.#r.set(e,{...t}),this.#t=e,this.#n=t;const i=this.grid;try{this.#i=i.getRowId?.(t)??void 0}catch{this.#i=void 0}this.#y(),this.#e||this.emit("edit-open",{rowIndex:e,rowId:this.#i??"",row:t})}}#w(e,t){if(this.#t!==e)return;const i=this.grid,n=this.#r.get(e),o=i.findRenderedRowElement?.(e);let r=this.#i;const d=r?i._getRowEntry(r):void 0,l=d?.row??this.#n??i._rows[e];if(!r&&l)try{r=i.getRowId?.(l)}catch{}if(!t&&o&&l){o.querySelectorAll(".cell.editing").forEach(t=>{const n=Number(t.getAttribute("data-col"));if(isNaN(n))return;const o=i._visibleColumns[n];if(!o)return;if(t.hasAttribute("data-editor-managed"))return;const r=t.querySelector("input,textarea,select");if(r){const t=o.field,i=l[t],n=s(r,o,i);i!==n&&this.#v(e,o,n,l)}})}if(t||this.#e||!l||this.emit("before-edit-close",{rowIndex:e,rowId:r??"",row:l}),t&&n&&l)Object.keys(n).forEach(e=>{l[e]=n[e]}),r&&(this.#s.delete(r),this.clearRowInvalid(r));else if(!t&&l){const t=this.#_(n,l),i=r?this.#s.has(r):t,o=this.emitCancelable("row-commit",{rowIndex:e,rowId:r??"",row:l,oldValue:n,newValue:l,changed:i,changedRows:this.changedRows,changedRowIds:this.changedRowIds});o&&n?(Object.keys(n).forEach(e=>{l[e]=n[e]}),r&&(this.#s.delete(r),this.clearRowInvalid(r))):!o&&t&&this.isAnimationEnabled&&(this.#a=e)}this.#r.delete(e),this.#t=-1,this.#i=void 0,this.#n=void 0,this.#o=-1,this.#g=!1,this.#y();for(const s of this.#d)s.startsWith(`${e}:`)&&this.#d.delete(s);for(const s of this.#l.keys())s.startsWith(`${e}:`)&&this.#l.delete(s);this.#c=!0,o?(o.querySelectorAll(".cell.editing").forEach(e=>{e.classList.remove("editing"),function(e){e.__editingCellCount=0,e.removeAttribute("data-has-editing")}(e.parentElement)}),i.refreshVirtualWindow(!0)):(this.#m(i),this.#c=!1),!this.#e&&l&&this.emit("edit-close",{rowIndex:e,rowId:r??"",row:l,reverted:t})}#v(e,t,i,n){const o=t.field;if(!r(o))return;const s=n[o];if(s===i)return;const l=this.grid;let c;try{c=this.grid.getRowId(n)}catch{}const a=!c||!this.#s.has(c),u=c?e=>this.grid.updateRow(c,e,"cascade"):d;let h=!1;const f=c?e=>{h=!0,this.setInvalid(c,o,e??"")}:()=>{};if(this.emitCancelable("cell-commit",{row:n,rowId:c??"",field:o,oldValue:s,value:i,rowIndex:e,changedRows:this.changedRows,changedRowIds:this.changedRowIds,firstTimeForRow:a,updateRow:u,setInvalid:f}))return;c&&!h&&this.isCellInvalid(c,o)&&this.clearInvalid(c,o),n[o]=i,c&&this.#s.add(c),this.#y(),this.emitPluginEvent("cell-edit-committed",{rowIndex:e,field:o,oldValue:s,newValue:i});const g=l.findRenderedRowElement?.(e);g&&g.classList.add("changed")}#R(e,t,n,l,c,a){if(!n.editable)return;if(c.classList.contains("editing"))return;let u;try{u=this.grid.getRowId(e)}catch{}const h=u?e=>this.grid.updateRow(u,e,"cascade"):d,f=r(n.field)?e[n.field]:void 0;c.classList.add("editing"),this.#d.add(`${t}:${l}`);const g=c.parentElement;g&&function(e){const t=(e.__editingCellCount??0)+1;e.__editingCellCount=t,e.setAttribute("data-has-editing","")}(g);let w=!1;const E=i=>{if(w||!this.#e&&-1===this.#t)return;const o=this.grid,r=u?o._getRowEntry(u):void 0,s=r?.row??e,d=r?.index??t;this.#v(d,n,i,s)},p=()=>{if(w=!0,r(n.field)){const t=this.grid,i=u?t._getRowEntry(u):void 0;(i?.row??e)[n.field]=f}},v=document.createElement("div");v.className="tbw-editor-host",c.innerHTML="",c.appendChild(v),v.addEventListener("keydown",e=>{if("Enter"===e.key){if(this.#e){e.stopPropagation(),e.preventDefault();const t=v.querySelector("input,textarea,select");return void(t&&E(s(t,n,f)))}if(this.config.onBeforeEditClose){if(!1===this.config.onBeforeEditClose(e))return}e.stopPropagation(),e.preventDefault(),w=!0,this.#w(t,!1)}if("Escape"===e.key){if(this.#e)return e.stopPropagation(),void e.preventDefault();if(this.config.onBeforeEditClose){if(!1===this.config.onBeforeEditClose(e))return}e.stopPropagation(),e.preventDefault(),p(),this.#w(t,!0)}});const m=n,R=m.__editorTemplate,b=function(e,t){if(t.editor)return t.editor;if(t.__editorTemplate)return"template";if(!t.type)return;const i=e.effectiveConfig?.typeDefaults;if(i?.[t.type]?.editor)return i[t.type].editor;const n=e.__frameworkAdapter;if(n?.getTypeDefault){const e=n.getTypeDefault(t.type);if(e?.editor)return e.editor}}(this.grid,m)??o(n),y=f,C=`${t}:${n.field}`,I=[];this.#l.set(C,e=>{for(const t of I)t(e)});const _=e=>{I.push(e)};if("template"===b&&R)this.#k(v,m,e,f,E,p,a,t),_(e=>{const t=v.querySelector("input,textarea,select");t&&(t instanceof HTMLInputElement&&"checkbox"===t.type?t.checked=!!e:t.value=String(e??""))});else if("string"==typeof b){const e=document.createElement(b);e.value=y,e.addEventListener("change",()=>E(e.value)),_(t=>{e.value=t}),v.appendChild(e),a||queueMicrotask(()=>{const e=v.querySelector(i.FOCUSABLE_EDITOR_SELECTOR);e?.focus({preventScroll:!0})})}else if("function"==typeof b){const t=b({row:e,rowId:u??"",value:y,field:n.field,column:n,commit:E,cancel:p,updateRow:h,onValueChange:_});if("string"==typeof t)v.innerHTML=t,function(e,t,i,n){const o=e.querySelector("input,textarea,select");o&&(o.addEventListener("blur",()=>{i(s(o,t,n))}),o instanceof HTMLInputElement&&"checkbox"===o.type?o.addEventListener("change",()=>i(o.checked)):o instanceof HTMLSelectElement&&o.addEventListener("change",()=>i(s(o,t,n))))}(v,n,E,f),_(e=>{const t=v.querySelector("input,textarea,select");t&&(t instanceof HTMLInputElement&&"checkbox"===t.type?t.checked=!!e:t.value=String(e??""))});else if(t instanceof Node){v.appendChild(t);t instanceof HTMLInputElement||t instanceof HTMLSelectElement||t instanceof HTMLTextAreaElement?_(e=>{t instanceof HTMLInputElement&&"checkbox"===t.type?t.checked=!!e:t.value=String(e??"")}):c.setAttribute("data-editor-managed","")}a||queueMicrotask(()=>{const e=v.querySelector(i.FOCUSABLE_EDITOR_SELECTOR);e?.focus({preventScroll:!0})})}else if(b&&"object"==typeof b){const t=document.createElement("div");t.setAttribute("data-external-editor",""),t.setAttribute("data-field",n.field),v.appendChild(t),c.setAttribute("data-editor-managed","");const i={row:e,rowId:u??"",value:y,field:n.field,column:n,commit:E,cancel:p,updateRow:h,onValueChange:_};if(b.mount)try{b.mount({placeholder:t,context:i,spec:b})}catch(k){console.warn(`[tbw-grid] External editor mount error for column '${n.field}':`,k)}else this.grid.dispatchEvent(new CustomEvent("mount-external-editor",{detail:{placeholder:t,spec:b,context:i}}))}}#k(e,t,i,n,o,d,l,c){const a=t.__editorTemplate;if(!a)return;const u=a.cloneNode(!0),h=t.__compiledEditor;h?u.innerHTML=h({row:i,value:n,field:t.field,column:t,commit:o,cancel:d}):u.querySelectorAll("*").forEach(e=>{1===e.childNodes.length&&e.firstChild?.nodeType===Node.TEXT_NODE&&(e.textContent=e.textContent?.replace(/{{\s*value\s*}}/g,null==n?"":String(n)).replace(/{{\s*row\.([a-zA-Z0-9_]+)\s*}}/g,(e,t)=>{if(!r(t))return"";const n=i[t];return null==n?"":String(n)})||"")});const f=u.querySelector("input,textarea,select");if(f){f instanceof HTMLInputElement&&"checkbox"===f.type?f.checked=!!n:f.value=String(n??"");let e=!1;f.addEventListener("blur",()=>{e||o(s(f,t,n))}),f.addEventListener("keydown",i=>{const r=i;if("Enter"===r.key){if(this.config.onBeforeEditClose){if(!1===this.config.onBeforeEditClose(r))return}r.stopPropagation(),r.preventDefault(),e=!0,o(s(f,t,n)),this.#w(c,!1)}if("Escape"===r.key){if(this.config.onBeforeEditClose){if(!1===this.config.onBeforeEditClose(r))return}r.stopPropagation(),r.preventDefault(),d(),this.#w(c,!0)}}),f instanceof HTMLInputElement&&"checkbox"===f.type&&f.addEventListener("change",()=>o(f.checked)),l||setTimeout(()=>f.focus({preventScroll:!0}),0)}e.appendChild(u)}#_(e,t){if(!e)return!1;const i=e,n=t,o=new Set([...Object.keys(i),...Object.keys(n)]);for(const r of o)if(i[r]!==n[r])return!0;return!1}#m(e){queueMicrotask(()=>{try{const t=e._focusRow,i=e._focusCol,n=e.findRenderedRowElement?.(t);if(n){Array.from(e._bodyEl.querySelectorAll(".cell-focus")).forEach(e=>e.classList.remove("cell-focus"));const o=n.querySelector(`.cell[data-row="${t}"][data-col="${i}"]`);o&&(o.classList.add("cell-focus"),o.setAttribute("aria-selected","true"),o.hasAttribute("tabindex")||o.setAttribute("tabindex","-1"),o.focus({preventScroll:!0}))}}catch{}})}}e.EditingPlugin=l,e.defaultEditorFor=o,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
|
|
2
2
|
//# sourceMappingURL=editing.umd.js.map
|