@vue-dnd-kit/components
Version:
Components for Vue DnD Kit
3 lines (2 loc) • 8.61 kB
JavaScript
(function(i,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("@vue-dnd-kit/core")):typeof define=="function"&&define.amd?define(["exports","vue","@vue-dnd-kit/core"],e):(i=typeof globalThis<"u"?globalThis:i||self,e(i.VueDndKitComponents={},i.Vue,i.VueDndKitCore))})(this,function(i,e,A){"use strict";var c=(a=>(a.DRAGGABLE="dnd-kit-draggable",a.DRAGGABLE_DISABLED="dnd-kit-draggable-disabled",a.DRAGGABLE_ACTIVE="dnd-kit-draggable-active",a.DRAGGABLE_SELECTED="dnd-kit-draggable-selected",a.DRAGGABLE_ALLOWED="dnd-kit-draggable-allowed",a.DRAGGABLE_OVERED="dnd-kit-draggable-overed",a))(c||{}),E=(a=>(a.DROPPABLE="dnd-kit-droppable",a.DROPPABLE_DISABLED="dnd-kit-droppable-disabled",a.DROPPABLE_ACTIVE="dnd-kit-droppable-active",a))(E||{});const L=Object.freeze(Object.defineProperty({__proto__:null,DraggableClassNames:c,DroppableClassNames:E},Symbol.toStringTag,{value:"Module"})),B=e.defineComponent({__name:"Draggable",props:{tag:{default:"div"},container:{},data:{},groups:{},keyboardMoveStep:{},layer:{},sensorThrottle:{},sensorSetup:{},preventRootDrag:{type:Boolean},index:{},source:{}},emits:["start","end","leave","hover","move"],setup(a,{emit:s}){const r=e.createPropsRestProxy(a,["tag","container"]),t=s,{elementRef:o,handleDragStart:n,isAllowed:d,isDragging:p,isOvered:f}=A.useDraggable({container:a.container,data:e.computed(()=>({index:r.index,source:r.source,...r.data})),groups:r.groups,layer:r.layer,keyboard:{moveStep:r.keyboardMoveStep},sensor:{throttle:r.sensorThrottle,setup:r.sensorSetup},events:{onStart:l=>t("start",l),onLeave:l=>t("leave",l),onHover:l=>t("hover",l),onMove:l=>t("move",l),onEnd:l=>t("end",l)}}),{isSelected:m,handleSelect:u,handleToggleSelect:g,handleUnselect:k,isParentOfSelected:D}=A.useSelection(o);return(l,b)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(l.tag),{ref_key:"elementRef",ref:o,class:e.normalizeClass({[e.unref(c).DRAGGABLE]:!0,[e.unref(c).DRAGGABLE_ACTIVE]:e.unref(p),[e.unref(c).DRAGGABLE_SELECTED]:e.unref(m),[e.unref(c).DRAGGABLE_ALLOWED]:e.unref(d),[e.unref(c).DRAGGABLE_OVERED]:e.unref(f)}),disabled:e.unref(p),onPointerdown:b[0]||(b[0]=S=>!l.preventRootDrag&&e.unref(n)(S)),onKeydown:b[1]||(b[1]=e.withKeys(e.withModifiers(S=>!l.preventRootDrag&&e.unref(n)(S),["self"]),["space"]))},{default:e.withCtx(()=>[e.renderSlot(l.$slots,"default",{handleDragStart:e.unref(n),data:l.data,isAllowed:e.unref(d),isDragging:e.unref(p),isOvered:e.unref(f),isSelected:e.unref(m),isParentOfSelected:e.unref(D),handleSelect:e.unref(u),handleToggleSelect:e.unref(g),handleUnselect:e.unref(k)})]),_:3},40,["class","disabled"]))}}),y=e.defineComponent({__name:"Droppable",props:{tag:{default:"div"},data:{},groups:{},source:{}},emits:["drop","hover","leave"],setup(a,{emit:s}){const r=s,{elementRef:t,isAllowed:o,isOvered:n}=A.useDroppable({data:{source:a.source,...a.data},groups:a.groups,events:{onDrop:d=>r("drop",d),onHover:d=>r("hover",d),onLeave:d=>r("leave",d)}});return(d,p)=>(e.openBlock(),e.createBlock(e.resolveDynamicComponent(d.tag),{ref_key:"elementRef",ref:t,class:e.normalizeClass(["dnd-kit-droppable",{[e.unref(E).DROPPABLE_DISABLED]:!e.unref(o),[e.unref(E).DROPPABLE_ACTIVE]:e.unref(n)}])},{default:e.withCtx(()=>[e.renderSlot(d.$slots,"default",{isAllowed:e.unref(o),isOvered:e.unref(n)})]),_:3},8,["class"]))}}),R=e.defineComponent({__name:"Kanban",props:{tag:{default:"ul"},groups:{default:()=>["kanban-column"]}},emits:["drop","hover","leave"],setup(a,{emit:s}){const r=s;return(t,o)=>(e.openBlock(),e.createBlock(y,{tag:t.tag,groups:t.groups,class:"dnd-kit-kanban",onDrop:o[0]||(o[0]=n=>r("drop",n)),onHover:o[1]||(o[1]=n=>r("hover",n)),onLeave:o[2]||(o[2]=n=>r("leave",n))},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default")]),_:3},8,["tag","groups"]))}}),C={class:"dnd-kit-kanban-column-header"},T=e.defineComponent({__name:"KanbanColumn",props:{tag:{default:"li"},title:{},preventRootDrag:{type:Boolean,default:!0},groups:{default:()=>["kanban-column"]},source:{},index:{},container:{},keyboardMoveStep:{},layer:{},data:{},sensorThrottle:{},sensorSetup:{},bodyGroups:{default:()=>["kanban-item"]},bodyTag:{default:"ul"}},emits:["start","end","leave","hover","move","drop"],setup(a,{emit:s}){const r=s;return(t,o)=>(e.openBlock(),e.createBlock(B,{tag:t.tag,class:"dnd-kit-kanban-column","prevent-root-drag":t.preventRootDrag,groups:t.groups,onStart:o[1]||(o[1]=n=>r("start",n)),onEnd:o[2]||(o[2]=n=>r("end",n)),onLeave:o[3]||(o[3]=n=>r("leave",n)),onHover:o[4]||(o[4]=n=>r("hover",n)),onMove:o[5]||(o[5]=n=>r("move",n)),container:t.container,data:t.data,source:t.source,index:t.index,"keyboard-move-step":t.keyboardMoveStep,layer:t.layer,"sensor-throttle":t.sensorThrottle,"sensor-setup":t.sensorSetup},{default:e.withCtx(({handleDragStart:n,isAllowed:d,data:p,handleSelect:f,handleToggleSelect:m,isDragging:u,handleUnselect:g,isOvered:k,isParentOfSelected:D,isSelected:l})=>[e.createElementVNode("div",C,[e.renderSlot(t.$slots,"header",{title:t.title,handleDragStart:n,isAllowed:d,data:p,handleSelect:f,handleToggleSelect:m,isDragging:u,handleUnselect:g,isOvered:k,isParentOfSelected:D,isSelected:l},()=>[e.createElementVNode("span",null,e.toDisplayString(t.title)+" "+e.toDisplayString(t.index),1)])]),e.createVNode(y,{groups:t.bodyGroups,tag:t.bodyTag,onDrop:o[0]||(o[0]=b=>r("drop",b)),source:t.source[t.index].items,class:"dnd-kit-kanban-column-body"},{default:e.withCtx(()=>[e.renderSlot(t.$slots,"default",{handleDragStart:n,isAllowed:d,data:p,handleSelect:f,handleToggleSelect:m,isDragging:u,handleUnselect:g,isOvered:k,isParentOfSelected:D,isSelected:l})]),_:2},1032,["groups","tag","source"]),e.renderSlot(t.$slots,"footer",{handleDragStart:n,isAllowed:d,data:p,handleSelect:f,handleToggleSelect:m,isDragging:u,handleUnselect:g,isOvered:k,isParentOfSelected:D,isSelected:l})]),_:3},8,["tag","prevent-root-drag","groups","container","data","source","index","keyboard-move-step","layer","sensor-throttle","sensor-setup"]))}}),G=e.defineComponent({__name:"KanbanItem",props:{tag:{default:"li"},groups:{default:()=>["kanban-item"]},preventRootDrag:{type:Boolean,default:!0},source:{},index:{},data:{}},setup(a){return(s,r)=>(e.openBlock(),e.createBlock(B,{tag:s.tag,groups:s.groups,"prevent-root-drag":s.preventRootDrag,data:s.data,source:s.source,index:s.index},{default:e.withCtx(({data:t,handleDragStart:o,handleSelect:n,handleToggleSelect:d,handleUnselect:p,isAllowed:f,isDragging:m,isOvered:u,isSelected:g,isParentOfSelected:k})=>[e.renderSlot(s.$slots,"default",{handleDragStart:o,isAllowed:f,data:t,handleSelect:n,handleToggleSelect:d,isDragging:m,handleUnselect:p,isOvered:u,isParentOfSelected:k,isSelected:g})]),_:3},8,["tag","groups","prevent-root-drag","data","source","index"]))}}),h={class:"dnd-kit-table"},$=e.defineComponent({__name:"Table",setup(a){return(s,r)=>(e.openBlock(),e.createElementBlock("table",h,[e.renderSlot(s.$slots,"default")]))}}),V=e.defineComponent({__name:"TableBody",props:{columns:{},data:{}},emits:["drop"],setup(a,{emit:s}){const r=s,t=o=>{r("drop",o)};return(o,n)=>(e.openBlock(),e.createBlock(y,{tag:"tbody",onDrop:t},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.data,(d,p)=>(e.openBlock(),e.createBlock(B,{key:p,class:"dnd-kit-table-row",tag:"tr","prevent-root-drag":!1,source:o.data,index:p},{default:e.withCtx(()=>[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(o.columns,f=>(e.openBlock(),e.createElementBlock("td",{key:f.key,class:"dnd-kit-table-cell"},[e.renderSlot(o.$slots,"cell",{row:d,column:f,value:d[f.key]},()=>[e.createTextVNode(e.toDisplayString(d[f.key]),1)])]))),128))]),_:2},1032,["source","index"]))),128))]),_:3}))}}),_=e.defineComponent({__name:"TableHead",props:{columns:{}},emits:["drop"],setup(a,{emit:s}){const r=s;return(t,o)=>(e.openBlock(),e.createBlock(y,{tag:"thead",source:t.columns,onDrop:o[0]||(o[0]=n=>r("drop",n))},{default:e.withCtx(()=>[e.createElementVNode("tr",null,[(e.openBlock(!0),e.createElementBlock(e.Fragment,null,e.renderList(t.columns,(n,d)=>(e.openBlock(),e.createBlock(B,{key:n.key,class:"dnd-kit-table-header-cell",tag:"th",index:d,source:t.columns},{default:e.withCtx(()=>[e.createTextVNode(e.toDisplayString(d)+" ",1),e.renderSlot(t.$slots,"column",{column:n},()=>[e.createTextVNode(e.toDisplayString(n.name),1)])]),_:2},1032,["index","source"]))),128))])]),_:3},8,["source"]))}});i.Draggable=B,i.Droppable=y,i.Kanban=R,i.KanbanColumn=T,i.KanbanItem=G,i.Table=$,i.TableBody=V,i.TableHead=_,i.classNames=L,Object.defineProperty(i,Symbol.toStringTag,{value:"Module"})});
//# sourceMappingURL=vue-dnd-kit-components.umd.js.map