2 lines
12 KiB
JavaScript
2 lines
12 KiB
JavaScript
import{Component as t,NewState as e,RefreshState as n,Util as o}from"@web/state";import{VirtualScroll as r,State as l}from"@web/base";t.register("DataTable",t=>{t.state||(t.state=e({}));const o=t.state;Object.assign(o,{list:[],fields:[],_renderedList:[],prevHeight:0,postHeight:0,_listStartIndex:0,selectedRowCount:0});const i=(()=>{let t=!!window.__DT_PERF_MODE__;const e={refreshTime:0,refreshCount:0,scrollCount:0,totalNodes:0};return t&&!window.__statePerformanceTelemetry&&(window.__statePerformanceTelemetry={scanCount:0,reuseCount:0,moveCount:0}),{get stats(){return e},enable:()=>{t=!0},disable:()=>{t=!1},onScroll:()=>{t&&e.scrollCount++},startFrame:()=>{var e,n,o;return t?{start:performance.now(),scan:(null==(e=window.__statePerformanceTelemetry)?void 0:e.scanCount)||0,move:(null==(n=window.__statePerformanceTelemetry)?void 0:n.moveCount)||0,reuse:(null==(o=window.__statePerformanceTelemetry)?void 0:o.reuseCount)||0}:null},endFrame:(n,o)=>{if(!t||!n)return;e.refreshCount++,e.totalNodes+=o;const r=performance.now()-n.start;e.refreshTime+=r;const l=window.__statePerformanceTelemetry;if(l){const t=l.scanCount-n.scan,e=l.moveCount-n.move,i=l.reuseCount-n.reuse;(t>0||r>2)&&console.log(`[DataTable Frame] Time: ${r.toFixed(2)}ms, Scans: ${t}, Moves: ${e}, Reuses: ${i}, Rows: ${o}`)}}}})();o.perf=i.stats;const s=((t,e)=>{let n=null,o=null,r=[];const l=(t,e)=>!!(n&&t>=n.minRow&&t<=n.maxRow&&e>=n.minCol&&e<=n.maxCol)||r.some(n=>t>=n.minRow&&t<=n.maxRow&&e>=n.minCol&&e<=n.maxCol);let i=!1;const s=()=>{var o;let s=1/0,a=-1/0;n&&(s=Math.min(s,n.minRow),a=Math.max(a,n.maxRow)),r.forEach(t=>{s=Math.min(s,t.minRow),a=Math.max(a,t.maxRow)});const d=s!==1/0;if(!d&&!i)return;i=d;const c=t.querySelector(".dt-body");if(!c)return;const m=c.children;for(let t=0;t<m.length;t++){const n=m[t];if(!n.classList.contains("dt-body-row"))continue;const r=((null==(o=n._ref)?void 0:o.rIdx)??-1)+e._listStartIndex,i=n.children;if(!d||r<s||r>a)for(let t=0;t<i.length;t++)i[t].classList.contains("dt-cell-selected")&&i[t].classList.remove("dt-cell-selected");else for(let t=0;t<i.length;t++){const e=l(r,t),n=i[t].classList.contains("dt-cell-selected");e&&!n?i[t].classList.add("dt-cell-selected"):!e&&n&&i[t].classList.remove("dt-cell-selected")}}},a=()=>{let t=0;n&&(t+=n.maxRow-n.minRow+1),r.forEach(e=>t+=e.maxRow-e.minRow+1),e.selectedRowCount=t},d=(t=!1)=>{t||(n=null,o=null,r=[],s(),a())},c=()=>{if(!n)return null;let t=n.minRow,e=n.maxRow,o=n.minCol,l=n.maxCol;return r.forEach(n=>{t=Math.min(t,n.minRow),e=Math.max(e,n.maxRow),o=Math.min(o,n.minCol),l=Math.max(l,n.maxCol)}),{minRow:t,maxRow:e,minCol:o,maxCol:l}};return{applySelectionUI:s,clearAllActive:d,startSelect:(i,c,m)=>{const h=l(i,c),u=n&&(n.minRow!==n.maxRow||n.minCol!==n.maxCol)||r.length>0;m.shiftKey&&o?n={minRow:Math.min(o.row,i),maxRow:Math.max(o.row,i),minCol:Math.min(o.col,c),maxCol:Math.max(o.col,c)}:(!h||m.ctrlKey||m.metaKey?(m.ctrlKey||m.metaKey?n&&!h&&r.push(n):d(),o={row:i,col:c},n={minRow:i,maxRow:i,minCol:c,maxCol:c}):u||(t._potentialCancel={row:i,col:c}),e.isSelecting=!0),s(),a(),t.focus()},updateSelect:(r,l)=>{e.isSelecting&&o&&(n={minRow:Math.min(o.row,r),maxRow:Math.max(o.row,r),minCol:Math.min(o.col,l),maxCol:Math.max(o.col,l)},t._potentialCancel=null,s(),a())},endSelect:()=>{if(t._potentialCancel){const{row:e,col:n}=t._potentialCancel;l(e,n)&&d(),t._potentialCancel=null}e.isSelecting=!1},deleteSelected:()=>{const t=c();if(!t)return;const n=t.minRow,o=t.maxRow,r=e.list.filter((t,e)=>!(e>=n&&e<=o));e.list=r,d()},getSelectionBounds:c,copy:async()=>{const t=c();if(!t)return;const n=e.list.slice(t.minRow,t.maxRow+1).map(n=>e.fields.slice(t.minCol,t.maxCol+1).map(t=>{let e=String(n[t.id]??"");return(e.includes("\t")||e.includes("\n")||e.includes('"'))&&(e='"'+e.replace(/"/g,'""')+'"'),e}).join("\t")).join("\n");await navigator.clipboard.writeText(n)},paste:async()=>{try{const n=await navigator.clipboard.readText();if(!n)return;const o=c();if(!o)return;const r=n.split(/\r?\n/).filter(t=>t.length>0).map(t=>{const e=[];let n="",o=!1;for(let r=0;r<t.length;r++){const l=t[r];'"'===l?o&&'"'===t[r+1]?(n+='"',r++):o=!o:"\t"!==l||o?n+=l:(e.push(n),n="")}return e.push(n),e}),l=o.minRow,i=o.minCol,s=o.maxRow,a=o.maxCol,d=t.querySelector(".dt-body"),m=d?Array.from(d.childNodes).filter(t=>{var e;return null==(e=t.classList)?void 0:e.contains("dt-body-row")}):[];r.forEach((n,o)=>{const r=l+o;if(r>s||r>=e.list.length)return;const d=e.list[r];let c=!1;if(n.forEach((t,n)=>{const o=i+n;if(o>a||o>=e.fields.length)return;const r=e.fields[o];d[r.id]=t,c=!0}),c&&t.refreshNode){const n=m.find(t=>{var n;return((null==(n=t._ref)?void 0:n.rIdx)??-1)+e._listStartIndex===r});n&&t.refreshNode(n)}})}catch(t){console.error("Paste Error:",t)}}}})(t,o),a=((t,e,n)=>{const o=r({itemHeight:40});let l=null;const i=()=>{if(!l)return;const t=o.calc(l,e.list);if(t){if(e.prevHeight===t.prevHeight&&e.postHeight===t.postHeight&&e._listStartIndex===t.listStartIndex&&e._renderedList.length===t.renderedList.length)return;Object.assign(e,{prevHeight:t.prevHeight,postHeight:t.postHeight,_listStartIndex:t.listStartIndex,_renderedList:t.renderedList}),null==n||n(t.renderedList.length)}};return{init:()=>{l=t.querySelector(".dt-main")},reset:n=>{e._listStartIndex=0,e._renderedList=o.reset(n,l||t)||[],e.list===n&&o.init(n,i)},refresh:i,onScroll:i}})(t,o,e=>{t.hideEditor(),s.applySelectionUI()});let d,c,m;t.format=(t,e)=>e.formatter?e.formatter(t,e):"string"==typeof t?t:null==t?"":"object"==typeof t?JSON.stringify(t):String(t),t.refreshNode=t=>n(t),t.refresh=()=>{const e=i.startFrame();if(a.refresh(),d||(d=t.querySelector(".dt-spacer-prev")),d){const t=o.prevHeight||0;d.style.height=t+"px",d.style.display=t>0?"block":"none"}if(c||(c=t.querySelector(".dt-spacer-post")),c){const t=o.postHeight||0;c.style.height=t+"px",c.style.display=t>0?"block":"none"}i.endFrame(e,o._renderedList.length)},t.onScroll=()=>{i.onScroll(),t.refresh()},t.onMainMouseDown=e=>{var n,r;const l=e.target.closest(".dt-cell");if(!l)return;const i=l.closest(".dt-row");if(!i||i.classList.contains("dt-header-row"))return;const s=(null==(n=l._ref)?void 0:n.fIdx)??Array.from(i.children).indexOf(l),a=((null==(r=i._ref)?void 0:r.rIdx)??Array.from(t.querySelectorAll(".dt-body-row")).indexOf(i))+o._listStartIndex;t.startSelect(a,s,e)},t.onMainMouseOver=e=>{var n,r;if(!o.isSelecting)return;const l=e.target.closest(".dt-cell");if(!l)return;const i=l.closest(".dt-row");if(!i||i.classList.contains("dt-header-row"))return;const s=(null==(n=l._ref)?void 0:n.fIdx)??Array.from(i.children).indexOf(l),a=((null==(r=i._ref)?void 0:r.rIdx)??Array.from(t.querySelectorAll(".dt-body-row")).indexOf(i))+o._listStartIndex;t.updateSelect(a,s)},t.onMainDblClick=e=>{var n,o;const r=e.target.closest(".dt-cell");if(!r)return;const l=r.closest(".dt-row");if(!l||l.classList.contains("dt-header-row"))return;const i=null==(n=l._ref)?void 0:n.item,s=null==(o=r._ref)?void 0:o.f;i&&s&&t.editCell(i,s,r)},o.__watch("list",t=>{a.init(),a.reset(t)}),o.__watch("fields",e=>{if(!e)return;const n=e.map(t=>`var(--w-${t.id}, ${t.width||150}px)`).join(" ");t.style.setProperty("--dt-grid-template",n)});let h=null;t.editCell=(e,o,r)=>{const i=t.querySelector(".dt-editor-overlay"),s=i.querySelector("AutoForm"),a=r.getBoundingClientRect(),d=t.getBoundingClientRect();h=r;let c=a.width;"textarea"===o.type||"TagsInput"===o.type?c=Math.max(a.width,300):"radio"===o.type&&(c=Math.max(a.width,240)),i.style.display="flex",i.style.left=a.left-d.left+"px",i.style.top=a.top-d.top+"px",i.style.width=c+"px",i.style.height="",i.style.minHeight="",i.style.alignItems="center","textarea"===o.type||"TagsInput"===o.type?(i.style.minHeight=("textarea"===o.type?150:a.height)+"px",i.style.height="auto",i.style.alignItems="flex-start"):i.style.height=a.height+"px",l.editingSchema=[{...o,name:o.id,label:""}],l.editingData=e,n(i),setTimeout(()=>{const t=s.querySelector(".form-control, .form-select, .form-check-input, input");t&&t.focus()},30)},t.hideEditor=(e=!0)=>{m||(m=t.querySelector(".dt-editor-overlay")),m&&"none"!==m.style.display&&(m.style.display="none",e&&h&&n(h),l.editingSchema=null,l.editingData=null,h=null,t.focus())},t.startSelect=s.startSelect,t.updateSelect=s.updateSelect,t.deleteSelected=s.deleteSelected,t.addEventListener("keydown",e=>{if(e.ctrlKey||e.metaKey){const t=e.key.toLowerCase();"c"===t&&(e.preventDefault(),s.copy()),"v"===t&&(e.preventDefault(),s.paste())}"Escape"===e.key&&t.hideEditor(!1)});const u=e=>{const n=t.querySelector(".dt-editor-overlay");n&&"none"!==n.style.display&&!n.contains(e.target)&&t.hideEditor(!0),t.contains(e.target)||(null==n?void 0:n.contains(e.target))||s.clearAllActive()};window.addEventListener("mouseup",s.endSelect),document.addEventListener("mousedown",u),t._onUnload=()=>{document.removeEventListener("mousedown",u),window.removeEventListener("mouseup",s.endSelect)}},o.makeDom('\n<div class="dt-root d-flex flex-column h-100 border bg-body text-body overflow-hidden" style="position:relative; user-select:none; outline: none; min-height: 0" onunload="this._onUnload()" tabindex="0">\n\t<div class="dt-main flex-grow-1 overflow-auto" $onscroll="this.onScroll()" \n\t\t$onmousedown="this.onMainMouseDown(event)"\n\t\t$onmouseover="this.onMainMouseOver(event)"\n\t\t$ondblclick="this.onMainDblClick(event)"\n\t\tstyle="overflow-anchor:none; min-height: 0">\n\t\t<div class="dt-header border-bottom bg-light sticky-top" style="z-index:20">\n\t\t\t<div class="dt-row dt-header-row fw-bold text-muted small">\n\t\t\t\t<div $each="this.state?.fields || []" class="dt-cell border-end px-2 d-flex align-items-center">\n\t\t\t\t\t<span $text="item.name" class="text-truncate"></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</div>\n\t\t<div class="dt-body" style="position:relative">\n\t\t\t<div class="dt-spacer-prev flex-shrink-0" style="display:none"></div>\n\t\t\t<div $each="this.state?._renderedList || []" key="id" index="rIdx" class="dt-row dt-body-row border-bottom bg-white">\n\t\t\t\t<div $each="this.state?.fields || []" as="f" index="fIdx" class="dt-cell border-end px-2 d-flex align-items-center">\n\t\t\t\t\t<span $text="this.format(item[f.id], f)" class="text-truncate"></span>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t<div class="dt-spacer-post flex-shrink-0" style="display:none"></div>\n\t\t</div>\n\t</div>\n\n\t\x3c!-- Shared Editor Overlay --\x3e\n\t<div class="dt-editor-overlay" style="display: none" $onclick="event.stopPropagation()" $onmousedown="event.stopPropagation()">\n\t\t<AutoForm inline class="h-100 w-100" $onsubmit="thisNode.closest(\'DataTable\').hideEditor(true)"/>\n\t</div>\n\n\t<div class="dt-footer border-top bg-light d-flex align-items-center px-2 py-1 small text-muted" style="height:32px">\n\t\t<div class="flex-grow-1">\n\t\t\tTotal: <span $text="this.state?.list?.length || 0"></span> | \n\t\t\tSelected Rows: <span $text="this.state?.selectedRowCount || 0"></span>\n\t\t</div>\n\t\t<button class="btn btn-xs btn-outline-danger py-0 px-2" style="font-size: 11px" $disabled="!this.state?.selectedRowCount" $onclick="this.deleteSelected()">\n\t\t\t<i class="bi bi-trash me-1"></i>Delete Selected\n\t\t</button>\n\t</div>\n</div>\n'),o.makeDom("\n<style>\n\tDataTable { display: block; }\n\t.dt-root { font-size: 0.875rem; }\n\t.dt-row {\n\t\tdisplay: grid;\n\t\tgrid-template-columns: var(--dt-grid-template);\n\t\twidth: max-content;\n\t\tmin-width: 100%;\n\t\theight: 40px;\n\t}\n\t.dt-header-row {\n\t\tbackground-color: var(--bs-tertiary-bg);\n\t}\n\t.dt-cell {\n\t\tbackground: inherit;\n\t\twhite-space: nowrap;\n\t\tflex-shrink: 0;\n\t}\n\t.dt-body-row:hover {\n\t\tbackground-color: var(--bs-secondary-bg) !important;\n\t}\n\t.dt-cell-selected {\n\t\tbackground-color: var(--bs-primary-bg-subtle) !important;\n\t}\n\t.dt-editor-overlay {\n\t\tposition: absolute;\n\t\tz-index: 1000;\n\t\tbackground: var(--bs-body-bg);\n\t\tbox-shadow: 0 4px 16px rgba(0,0,0,0.25);\n\t\tborder: 1px solid var(--bs-primary);\n\t\talign-items: center;\n\t\toverflow: visible;\n\t\ttransition: top 0.1s ease, left 0.1s ease, width 0.1s ease, height 0.1s ease, min-height 0.1s ease;\n\t}\n\t.dt-editor-overlay .auto-form-root, .dt-editor-overlay form {\n\t\theight: 100%;\n\t\twidth: 100%;\n\t}\n\t.dt-editor-overlay .form-control, .dt-editor-overlay .form-select {\n\t\tborder: none !important;\n\t\tborder-radius: 0 !important;\n\t\theight: 100% !important;\n\t\twidth: 100% !important;\n\t\tbox-shadow: none !important;\n\t\tpadding: 0 8px !important;\n\t}\n\t.dt-editor-overlay .form-check.form-switch {\n\t\tpadding-left: 2.5em;\n\t\tmargin: 0;\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t}\n\t.btn-xs {\n\t\tpadding: 1px 5px;\n\t\tline-height: 1.5;\n\t}\n</style>\n")),"undefined"!=typeof document&&n(document.documentElement);
|