2 lines
3.3 KiB
JavaScript
2 lines
3.3 KiB
JavaScript
var n,t,e,a,i,s=n=>{throw TypeError(n)},d=(n,t,e)=>t.has(n)||s("Cannot "+e),r=(n,t,e)=>(d(n,t,"read from private field"),e?e.call(n):t.get(n)),o=(n,t,e)=>t.has(n)?s("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(n):t.set(n,e),l=(n,t,e)=>(d(n,t,"access private method"),e);class c extends HTMLElement{constructor(){super(),o(this,t),o(this,n,[]),this.attachShadow({mode:"open"})}connectedCallback(){l(this,t,e).call(this)}get data(){return r(this,n)}set data(a){((n,t,e,a)=>{d(n,t,"write to private field"),a?a.call(n,e):t.set(n,e)})(this,n,a),l(this,t,e).call(this)}}n=new WeakMap,t=new WeakSet,e=function(){this.shadowRoot.innerHTML=`\n <style>\n :host {\n display: flex;\n gap: 16px;\n padding: 16px;\n overflow-x: auto;\n font-family: system-ui, -apple-system, sans-serif;\n }\n .column {\n background: #f1f2f4;\n border-radius: 8px;\n width: 280px;\n min-width: 280px;\n display: flex;\n flex-direction: column;\n max-height: 100%;\n }\n .column-header {\n padding: 12px;\n font-weight: bold;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n .items-container {\n flex: 1;\n padding: 8px;\n min-height: 50px;\n }\n .item {\n background: white;\n border-radius: 4px;\n padding: 12px;\n margin-bottom: 8px;\n box-shadow: 0 1px 3px rgba(0,0,0,0.1);\n cursor: grab;\n }\n .item:active {\n cursor: grabbing;\n }\n .item.dragging {\n opacity: 0.5;\n }\n .items-container.drag-over {\n background: rgba(0,0,0,0.05);\n }\n </style>\n ${r(this,n).map(n=>`\n <div class="column" data-id="${n.id}">\n <div class="column-header">\n <span>${n.title}</span>\n </div>\n <div class="items-container" data-column-id="${n.id}">\n ${(n.items||[]).map(t=>`\n <div class="item" draggable="true" data-id="${t.id}" data-column-id="${n.id}">\n ${t.content}\n </div>\n `).join("")}\n </div>\n </div>\n `).join("")}\n `,l(this,t,a).call(this)},a=function(){const n=this.shadowRoot.querySelectorAll(".item"),e=this.shadowRoot.querySelectorAll(".items-container");n.forEach(n=>{n.addEventListener("dragstart",t=>{n.classList.add("dragging"),t.dataTransfer.setData("text/plain",JSON.stringify({itemId:n.dataset.id,fromColumnId:n.dataset.columnId}))}),n.addEventListener("dragend",()=>{n.classList.remove("dragging")})}),e.forEach(n=>{n.addEventListener("dragover",t=>{t.preventDefault(),n.classList.add("drag-over")}),n.addEventListener("dragleave",()=>{n.classList.remove("drag-over")}),n.addEventListener("drop",e=>{e.preventDefault(),n.classList.remove("drag-over");const a=JSON.parse(e.dataTransfer.getData("text/plain"));l(this,t,i).call(this,a.itemId,a.fromColumnId,n.dataset.columnId)})})},i=function(a,i,s){if(i===s)return;const d=r(this,n).find(n=>n.id===i),o=r(this,n).find(n=>n.id===s),c=d.items.findIndex(n=>n.id===a),[m]=d.items.splice(c,1);o.items.push(m),l(this,t,e).call(this),this.dispatchEvent(new CustomEvent("@update",{detail:r(this,n),bubbles:!0,composed:!0}))},customElements.define("web-kanban",c);export{c as Kanban};
|