@bw-ui/datatable-command
Version:
Command palette plugin for @bw-ui/datatable - Cmd+K quick actions
3 lines (2 loc) • 13.6 kB
JavaScript
var BWCommand=(()=>{var T=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var q=Object.getOwnPropertyNames;var K=Object.prototype.hasOwnProperty;var I=(f,a)=>{for(var o in a)T(f,o,{get:a[o],enumerable:!0})},J=(f,a,o,y)=>{if(a&&typeof a=="object"||typeof a=="function")for(let u of q(a))!K.call(f,u)&&u!==o&&T(f,u,{get:()=>a[u],enumerable:!(y=F(a,u))||y.enumerable});return f};var Y=f=>J(T({},"__esModule",{value:!0}),f);var Z={};I(Z,{CommandPlugin:()=>D,default:()=>D});var Q={placeholder:"Type a command...",shortcut:!0,maxResults:50},D={name:"command",init(f){let{eventBus:a,table:o,options:y}=f;if(!o){console.error("CommandPlugin: table is undefined");return}let u={...Q,...y},d=null,l=null,m=null,M=!1,c=[],h=0,C=[],A=null,k={},r={search:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>',sortAsc:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 8l4-4 4 4M7 4v16"/><path d="M11 12h4M11 16h7M11 20h10"/></svg>',sortDesc:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 16l4 4 4-4M7 20V4"/><path d="M11 12h4M11 8h7M11 4h10"/></svg>',check:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="3" width="18" height="18" rx="2"/><path d="m9 12 2 2 4-4"/></svg>',x:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="10"/><path d="m15 9-6 6M9 9l6 6"/></svg>',filter:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><polygon points="22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3"/></svg>',arrowUp:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 19V5M5 12l7-7 7 7"/></svg>',arrowDown:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M12 5v14M5 12l7 7 7-7"/></svg>',download:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4M7 10l5 5 5-5M12 15V3"/></svg>',copy:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 01-2-2V4a2 2 0 012-2h9a2 2 0 012 2v1"/></svg>',undo:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M3 7v6h6"/><path d="M21 17a9 9 0 00-9-9 9 9 0 00-6 2.3L3 13"/></svg>',redo:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 7v6h-6"/><path d="M3 17a9 9 0 019-9 9 9 0 016 2.3l3 2.7"/></svg>',chevronRight:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="m9 18 6-6-6-6"/></svg>',folder:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M22 19a2 2 0 01-2 2H4a2 2 0 01-2-2V5a2 2 0 012-2h5l2 3h9a2 2 0 012 2z"/></svg>',empty:'<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5"><circle cx="12" cy="12" r="10"/><path d="M8 15s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01"/></svg>'};function H(){var e=[],t=o.getState?o.getState():{},s=t.columns||[];return s.length>0&&(e.push({id:"sort-asc",label:"Sort Ascending",icon:r.sortAsc,keywords:["sort","asc","ascending","a-z","order"],isGroup:!0,children:s.map(function(i){return{id:"sort-asc-"+i.id,label:"Sort "+(i.header||i.id)+" \u2191",icon:r.sortAsc,action:function(){o.sort&&o.sort(i.id,"asc")}}})}),e.push({id:"sort-desc",label:"Sort Descending",icon:r.sortDesc,keywords:["sort","desc","descending","z-a","order"],isGroup:!0,children:s.map(function(i){return{id:"sort-desc-"+i.id,label:"Sort "+(i.header||i.id)+" \u2193",icon:r.sortDesc,action:function(){o.sort&&o.sort(i.id,"desc")}}})})),o.selectAll&&e.push({id:"select-all",label:"Select All Rows",icon:r.check,keywords:["select","all","check","mark"],shortcut:"\u2318A",action:function(){o.selectAll()}}),o.clearSelection&&e.push({id:"clear-selection",label:"Clear Selection",icon:r.x,keywords:["clear","deselect","uncheck","none"],action:function(){o.clearSelection()}}),o.clearFilters&&e.push({id:"clear-filters",label:"Clear All Filters",icon:r.filter,keywords:["clear","filter","reset","remove","search"],action:function(){o.clearFilters()}}),o.clearSort&&e.push({id:"clear-sort",label:"Clear Sort",icon:r.x,keywords:["clear","sort","reset","unsort"],action:function(){o.clearSort()}}),o.reset&&e.push({id:"reset-all",label:"Reset All (Filters + Sort)",icon:r.x,keywords:["reset","clear","all","filter","sort"],action:function(){o.reset()}}),o.scrollToTop&&e.push({id:"scroll-top",label:"Go to Top",icon:r.arrowUp,keywords:["top","first","start","beginning","home"],shortcut:"Home",action:function(){o.scrollToTop()}}),o.scrollToBottom&&e.push({id:"scroll-bottom",label:"Go to Bottom",icon:r.arrowDown,keywords:["bottom","last","end"],shortcut:"End",action:function(){o.scrollToBottom()}}),e}function O(){var e=[];return typeof o.exportCSV=="function"&&e.push({id:"export-csv",label:"Export to CSV",icon:r.download,keywords:["export","csv","download","save","file"],action:function(){o.exportCSV()}}),typeof o.exportJSON=="function"&&e.push({id:"export-json",label:"Export to JSON",icon:r.download,keywords:["export","json","download","save","file"],action:function(){o.exportJSON()}}),typeof o.copy=="function"&&e.push({id:"copy",label:"Copy Selected Rows",icon:r.copy,keywords:["copy","clipboard","selected"],shortcut:"\u2318C",action:function(){o.copy()}}),typeof o.undo=="function"&&e.push({id:"undo",label:"Undo",icon:r.undo,keywords:["undo","back","revert","cancel"],shortcut:"\u2318Z",action:function(){o.undo()}}),typeof o.redo=="function"&&e.push({id:"redo",label:"Redo",icon:r.redo,keywords:["redo","forward","repeat"],shortcut:"\u2318Y",action:function(){o.redo()}}),e}function R(){return H().concat(O()).concat(C)}function P(){if(!document.getElementById("bw-command-styles")){var e=".bw-command-modal { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6); backdrop-filter:blur(4px); display:flex; align-items:flex-start; justify-content:center; padding-top:10vh; z-index:10000; opacity:0; visibility:hidden; transition:opacity 0.2s,visibility 0.2s; }.bw-command-modal--open { opacity:1; visibility:visible; }.bw-command-box { background:#fff; border-radius:16px; box-shadow:0 25px 60px rgba(0,0,0,0.35); width:100%; max-width:580px; overflow:hidden; transform:scale(0.95) translateY(-10px); transition:transform 0.2s; }.bw-command-modal--open .bw-command-box { transform:scale(1) translateY(0); }.bw-command-header { display:flex; align-items:center; padding:16px 20px; border-bottom:1px solid #e5e7eb; gap:12px; }.bw-command-icon { width:20px; height:20px; color:#9ca3af; flex-shrink:0; }.bw-command-input { flex:1; padding:0; border:none; font-size:17px; outline:none; background:transparent; color:#111827; }.bw-command-input::placeholder { color:#9ca3af; }.bw-command-kbd { padding:4px 8px; font-size:11px; font-weight:500; color:#6b7280; background:#f3f4f6; border-radius:6px; border:1px solid #e5e7eb; }.bw-command-list { max-height:400px; overflow-y:auto; padding:8px; }.bw-command-group { padding:12px 12px 6px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:#9ca3af; }.bw-command-item { padding:10px 12px; cursor:pointer; display:flex; align-items:center; gap:12px; border-radius:10px; transition:background 0.1s; margin:2px 0; }.bw-command-item:hover { background:#f3f4f6; }.bw-command-item--active { background:#3b82f6 !important; color:#fff; }.bw-command-item--active .bw-command-item-icon { color:#fff; }.bw-command-item--active .bw-command-item-shortcut { color:rgba(255,255,255,0.7); background:rgba(255,255,255,0.2); border-color:rgba(255,255,255,0.2); }.bw-command-item--active .bw-command-item-chevron { color:#fff; }.bw-command-item--group { font-weight:500; }.bw-command-item-icon { width:18px; height:18px; color:#6b7280; flex-shrink:0; }.bw-command-item-label { flex:1; font-size:14px; }.bw-command-item-shortcut { font-size:11px; padding:3px 8px; background:#f3f4f6; border-radius:5px; color:#6b7280; border:1px solid #e5e7eb; }.bw-command-item-chevron { width:16px; height:16px; color:#9ca3af; transition:transform 0.15s; }.bw-command-item--expanded .bw-command-item-chevron { transform:rotate(90deg); }.bw-command-children { padding-left:20px; }.bw-command-empty { padding:40px 20px; text-align:center; color:#9ca3af; }.bw-command-empty-icon { width:48px; height:48px; margin:0 auto 12px; color:#d1d5db; }.bw-command-footer { display:flex; align-items:center; padding:12px 16px; font-size:12px; color:#9ca3af; border-top:1px solid #e5e7eb; background:#f9fafb; gap:16px; flex-wrap:wrap; }.bw-command-footer kbd { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:22px; padding:0 6px; font-size:11px; background:#fff; border:1px solid #e5e7eb; border-radius:5px; color:#6b7280; margin-right:4px; }",t=document.createElement("style");t.id="bw-command-styles",t.textContent=e,document.head.appendChild(t)}}function U(){P(),d=document.createElement("div"),d.className="bw-command-modal";var e=document.createElement("div");e.className="bw-command-box";var t=document.createElement("div");t.className="bw-command-header",t.innerHTML='<span class="bw-command-icon">'+r.search+"</span>",l=document.createElement("input"),l.type="text",l.className="bw-command-input",l.placeholder=u.placeholder,l.spellcheck=!1;var s=document.createElement("span");s.className="bw-command-kbd",s.textContent="ESC",t.appendChild(l),t.appendChild(s),m=document.createElement("div"),m.className="bw-command-list";var i=document.createElement("div");i.className="bw-command-footer",i.innerHTML="<span><kbd>\u2191</kbd><kbd>\u2193</kbd> Navigate</span><span><kbd>Tab</kbd> Expand</span><span><kbd>\u21B5</kbd> Select</span><span><kbd>Esc</kbd> Close</span>",e.appendChild(t),e.appendChild(m),e.appendChild(i),d.appendChild(e),d.addEventListener("click",function(b){b.target===d&&v()}),l.addEventListener("input",function(){E(l.value)}),l.addEventListener("keydown",j),document.body.appendChild(d)}function E(e){if(m){var t=(e||"").toLowerCase().trim(),s=R();if(c=[],s.forEach(function(n){var w=!t||n.label.toLowerCase().indexOf(t)!==-1||(n.keywords||[]).join(" ").toLowerCase().indexOf(t)!==-1;if(n.isGroup&&n.children){var p=n.children.filter(function(g){return g.label.toLowerCase().indexOf(t)!==-1});if((w||p.length>0)&&(c.push({id:n.id,label:n.label,icon:n.icon||r.folder,isGroup:!0,expanded:k[n.id]||t.length>0,children:n.children}),k[n.id]||t.length>0)){var x=t?p:n.children;x.forEach(function(g){c.push({id:g.id,label:g.label,icon:g.icon,action:g.action,shortcut:g.shortcut,isChild:!0})})}}else w&&n.action&&c.push(n)}),c=c.slice(0,u.maxResults),c.length===0){m.innerHTML='<div class="bw-command-empty"><div class="bw-command-empty-icon">'+r.empty+"</div><div>No commands found</div></div>";return}h=0;for(var i=0;i<c.length;i++)if(c[i].action){h=i;break}var b="";c.forEach(function(n,w){var p=w===h,x="bw-command-item";p&&(x+=" bw-command-item--active"),n.isGroup&&(x+=" bw-command-item--group"),n.expanded&&(x+=" bw-command-item--expanded"),n.isChild&&(x+=" bw-command-item--child"),b+='<div class="'+x+'" data-index="'+w+'">',b+='<span class="bw-command-item-icon">'+(n.icon||r.search)+"</span>",b+='<span class="bw-command-item-label">'+n.label+"</span>",n.shortcut&&(b+='<span class="bw-command-item-shortcut">'+n.shortcut+"</span>"),n.isGroup&&(b+='<span class="bw-command-item-chevron">'+r.chevronRight+"</span>"),b+="</div>"}),m.innerHTML=b,m.querySelectorAll(".bw-command-item").forEach(function(n){n.addEventListener("click",function(){var w=parseInt(n.dataset.index,10),p=c[w];p&&(p.isGroup?S(p.id):p.action&&(p.action(),v()))})}),N()}}function S(e){k[e]=!k[e],E(l?l.value:"")}function N(){var e=m.querySelector(".bw-command-item--active");e&&e.scrollIntoView({block:"nearest",behavior:"smooth"})}function G(e){e<0&&(e=c.length-1),e>=c.length&&(e=0),h=e,m.querySelectorAll(".bw-command-item").forEach(function(t,s){t.classList.toggle("bw-command-item--active",s===h)}),N()}function j(e){if(c.length!==0)if(e.key==="ArrowDown")e.preventDefault(),G(h+1);else if(e.key==="ArrowUp")e.preventDefault(),G(h-1);else if(e.key==="Tab"){e.preventDefault();var t=c[h];t&&t.isGroup&&S(t.id)}else if(e.key==="Enter"){e.preventDefault();var t=c[h];t&&(t.isGroup?S(t.id):t.action&&(t.action(),v()))}else e.key==="Escape"&&(e.preventDefault(),v())}function L(){d||U(),M=!0,k={},d.classList.add("bw-command-modal--open"),l.value="",E(""),setTimeout(function(){l.focus()},50),a&&a.emit&&a.emit("command:open")}function v(){d&&(M=!1,d.classList.remove("bw-command-modal--open"),a&&a.emit&&a.emit("command:close"))}function B(){M?v():L()}u.shortcut&&(A=function(e){var t=navigator.platform.toUpperCase().indexOf("MAC")>=0,s=t?e.metaKey:e.ctrlKey;s&&e.key.toLowerCase()==="k"&&(e.preventDefault(),e.stopPropagation(),B())},document.addEventListener("keydown",A,!0));function z(e){e&&e.id&&e.label&&C.push(e)}function V(e){C=C.filter(function(t){return t.id!==e})}return o.openCommand=L,o.closeCommand=v,o.toggleCommand=B,o.addCommandAction=z,o.removeCommandAction=V,{name:"command",open:L,close:v,toggle:B,addAction:z,removeAction:V,destroy:function(){A&&document.removeEventListener("keydown",A,!0),d&&d.parentNode&&d.parentNode.removeChild(d),d=null,l=null,m=null,delete o.openCommand,delete o.closeCommand,delete o.toggleCommand,delete o.addCommandAction,delete o.removeCommandAction}}}};return Y(Z);})();
BWCommand=BWCommand.CommandPlugin;