@bw-ui/datatable-command
Version:
Command palette plugin for @bw-ui/datatable - Cmd+K quick actions
2 lines (1 loc) • 13.1 kB
JavaScript
var j={placeholder:"Type a command...",shortcut:!0,maxResults:50},N={name:"command",init(G){let{eventBus:w,table:o,options:z}=G;if(!o){console.error("CommandPlugin: table is undefined");return}let y={...j,...z},c=null,d=null,s=null,C=!1,a=[],p=0,g=[],k=null,x={},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 V(){var e=[],t=o.getState?o.getState():{},l=t.columns||[];return l.length>0&&(e.push({id:"sort-asc",label:"Sort Ascending",icon:r.sortAsc,keywords:["sort","asc","ascending","a-z","order"],isGroup:!0,children:l.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:l.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 H(){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 O(){return V().concat(H()).concat(g)}function R(){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 P(){R(),c=document.createElement("div"),c.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>",d=document.createElement("input"),d.type="text",d.className="bw-command-input",d.placeholder=y.placeholder,d.spellcheck=!1;var l=document.createElement("span");l.className="bw-command-kbd",l.textContent="ESC",t.appendChild(d),t.appendChild(l),s=document.createElement("div"),s.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(s),e.appendChild(i),c.appendChild(e),c.addEventListener("click",function(f){f.target===c&&u()}),d.addEventListener("input",function(){A(d.value)}),d.addEventListener("keydown",U),document.body.appendChild(c)}function A(e){if(s){var t=(e||"").toLowerCase().trim(),l=O();if(a=[],l.forEach(function(n){var h=!t||n.label.toLowerCase().indexOf(t)!==-1||(n.keywords||[]).join(" ").toLowerCase().indexOf(t)!==-1;if(n.isGroup&&n.children){var m=n.children.filter(function(v){return v.label.toLowerCase().indexOf(t)!==-1});if((h||m.length>0)&&(a.push({id:n.id,label:n.label,icon:n.icon||r.folder,isGroup:!0,expanded:x[n.id]||t.length>0,children:n.children}),x[n.id]||t.length>0)){var b=t?m:n.children;b.forEach(function(v){a.push({id:v.id,label:v.label,icon:v.icon,action:v.action,shortcut:v.shortcut,isChild:!0})})}}else h&&n.action&&a.push(n)}),a=a.slice(0,y.maxResults),a.length===0){s.innerHTML='<div class="bw-command-empty"><div class="bw-command-empty-icon">'+r.empty+"</div><div>No commands found</div></div>";return}p=0;for(var i=0;i<a.length;i++)if(a[i].action){p=i;break}var f="";a.forEach(function(n,h){var m=h===p,b="bw-command-item";m&&(b+=" bw-command-item--active"),n.isGroup&&(b+=" bw-command-item--group"),n.expanded&&(b+=" bw-command-item--expanded"),n.isChild&&(b+=" bw-command-item--child"),f+='<div class="'+b+'" data-index="'+h+'">',f+='<span class="bw-command-item-icon">'+(n.icon||r.search)+"</span>",f+='<span class="bw-command-item-label">'+n.label+"</span>",n.shortcut&&(f+='<span class="bw-command-item-shortcut">'+n.shortcut+"</span>"),n.isGroup&&(f+='<span class="bw-command-item-chevron">'+r.chevronRight+"</span>"),f+="</div>"}),s.innerHTML=f,s.querySelectorAll(".bw-command-item").forEach(function(n){n.addEventListener("click",function(){var h=parseInt(n.dataset.index,10),m=a[h];m&&(m.isGroup?M(m.id):m.action&&(m.action(),u()))})}),L()}}function M(e){x[e]=!x[e],A(d?d.value:"")}function L(){var e=s.querySelector(".bw-command-item--active");e&&e.scrollIntoView({block:"nearest",behavior:"smooth"})}function B(e){e<0&&(e=a.length-1),e>=a.length&&(e=0),p=e,s.querySelectorAll(".bw-command-item").forEach(function(t,l){t.classList.toggle("bw-command-item--active",l===p)}),L()}function U(e){if(a.length!==0)if(e.key==="ArrowDown")e.preventDefault(),B(p+1);else if(e.key==="ArrowUp")e.preventDefault(),B(p-1);else if(e.key==="Tab"){e.preventDefault();var t=a[p];t&&t.isGroup&&M(t.id)}else if(e.key==="Enter"){e.preventDefault();var t=a[p];t&&(t.isGroup?M(t.id):t.action&&(t.action(),u()))}else e.key==="Escape"&&(e.preventDefault(),u())}function E(){c||P(),C=!0,x={},c.classList.add("bw-command-modal--open"),d.value="",A(""),setTimeout(function(){d.focus()},50),w&&w.emit&&w.emit("command:open")}function u(){c&&(C=!1,c.classList.remove("bw-command-modal--open"),w&&w.emit&&w.emit("command:close"))}function S(){C?u():E()}y.shortcut&&(k=function(e){var t=navigator.platform.toUpperCase().indexOf("MAC")>=0,l=t?e.metaKey:e.ctrlKey;l&&e.key.toLowerCase()==="k"&&(e.preventDefault(),e.stopPropagation(),S())},document.addEventListener("keydown",k,!0));function T(e){e&&e.id&&e.label&&g.push(e)}function D(e){g=g.filter(function(t){return t.id!==e})}return o.openCommand=E,o.closeCommand=u,o.toggleCommand=S,o.addCommandAction=T,o.removeCommandAction=D,{name:"command",open:E,close:u,toggle:S,addAction:T,removeAction:D,destroy:function(){k&&document.removeEventListener("keydown",k,!0),c&&c.parentNode&&c.parentNode.removeChild(c),c=null,d=null,s=null,delete o.openCommand,delete o.closeCommand,delete o.toggleCommand,delete o.addCommandAction,delete o.removeCommandAction}}}};export{N as CommandPlugin,N as default};