@vielzeug/dnd 26.10.14 → 26.10.16
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/_dev.cjs.map +1 -1
- package/dist/_dev.js +5 -1
- package/dist/_dev.js.map +1 -1
- package/dist/_shared.cjs.map +1 -1
- package/dist/_shared.js +22 -1
- package/dist/_shared.js.map +1 -1
- package/dist/_touch.cjs.map +1 -1
- package/dist/_touch.js +150 -1
- package/dist/_touch.js.map +1 -1
- package/dist/dnd.cjs +1 -1
- package/dist/dnd.cjs.map +1 -1
- package/dist/dnd.iife.js +1 -1
- package/dist/dnd.iife.js.map +1 -1
- package/dist/dnd.js +697 -1
- package/dist/dnd.js.map +1 -1
- package/dist/drop-zone.cjs.map +1 -1
- package/dist/drop-zone.js +115 -1
- package/dist/drop-zone.js.map +1 -1
- package/dist/drop.js +3 -1
- package/dist/errors.cjs.map +1 -1
- package/dist/errors.js +13 -1
- package/dist/errors.js.map +1 -1
- package/dist/index.js +4 -1
- package/dist/sortable.cjs +1 -1
- package/dist/sortable.cjs.map +1 -1
- package/dist/sortable.js +414 -1
- package/dist/sortable.js.map +1 -1
- package/package.json +6 -6
package/dist/dnd.js
CHANGED
|
@@ -1,2 +1,698 @@
|
|
|
1
|
-
import{matchKey as e}from"@vielzeug/keymap";import{createDragGesture as t}from"@vielzeug/gesture";function createDisposable(e){let t=!1,n=new AbortController,dispose=()=>{t||(t=!0,n.abort(),e?.())};return{get disposalSignal(){return n.signal},dispose,get disposed(){return t},[Symbol.dispose]:dispose}}function resolveDisabled(e){return e===!0}var DndError=class extends Error{constructor(e,t){super(e,t),this.name=new.target.name,Object.setPrototypeOf(this,new.target.prototype)}},DndScopeError=class extends DndError{constructor(e=`Invalid scope: use createSortableScope() to create scopes.`){super(e)}};function matchesAccept(e,t){return!t.length||t.some(t=>{let n=t.trim().toLowerCase(),r=e.type.toLowerCase();return n?n.startsWith(`.`)?e.name.toLowerCase().endsWith(n):n.endsWith(`/*`)?r.startsWith(n.slice(0,-1)):r===n:!1})}function itemsMatchAccept(e,t){return!t.length||Array.from(e).some(e=>e.kind===`file`&&t.some(t=>{let n=t.trim();return n.endsWith(`/*`)?e.type.startsWith(n.slice(0,-1)):n.startsWith(`.`)?!0:e.type===n}))}function applyFileFilters(e,t,n){let r=[],i=[];for(let n of e)(matchesAccept(n,t)?r:i).push(n);return n!==void 0&&r.length>n&&i.push(...r.splice(n)),{accepted:r,rejected:i}}function normalizeAccept(e){return e.map(e=>{let t=e.trim().toLowerCase(),n=/^\.[a-z0-9][a-z0-9._+-]*$/.test(t),r=/^[a-z0-9!#$&^_.+-]+\/(?:\*|[a-z0-9!#$&^_.+-]+)$/.test(t);if(!n&&!r)throw new DndError(`Invalid accept pattern: "${e}"`);return t})}function notify$1(e,t,...n){if(t)try{t(...n)}catch{`${e}`}}function createDropZone(e){let t=normalizeAccept(e.accept??[]);if(e.maxFiles!==void 0&&(!Number.isSafeInteger(e.maxFiles)||e.maxFiles<0))throw new DndError(`maxFiles must be a non-negative safe integer`);let{dropEffect:n=`copy`,element:r,maxFiles:i,onDrop:a,onDropRejected:o,onHoverChange:s,onValidatingChange:c}=e,l=0,u=!1,d=!1,f=new Set,setValidating=e=>{d!==e&&(d=e,notify$1(`onValidatingChange`,c,e))},updateCounter=e=>{let t=l>0&&u;l=Math.max(0,e),l===0&&(u=!1);let n=l>0&&u;n!==t&¬ify$1(`onHoverChange`,s,n)},resetCounter=()=>{updateCounter(0)},p=createDisposable(()=>{for(let e of f)e.abort();f.clear(),setValidating(!1),resetCounter()}),settle=(e,t)=>{e.length>0&¬ify$1(`onDrop`,a,[...e]),t.length>0&¬ify$1(`onDropRejected`,o,[...t])},settleForPaste=(t,n)=>{t.length>0&&(e.onPaste?notify$1(`onPaste`,e.onPaste,[...t]):notify$1(`onDrop`,a,[...t])),n.length>0&¬ify$1(`onDropRejected`,o,[...n])},dispatchWithValidation=(n,r)=>{let{accepted:a,rejected:o}=applyFileFilters(n,t,i),s=e.onValidate,c=s&&a.length>0?new AbortController:null;c&&(f.add(c),setValidating(!0));let finishValidation=()=>{c&&(f.delete(c),p.disposed||setValidating(f.size>0))},l;try{l=c&&s?s([...a],{signal:c.signal}):!0}catch(e){l=Promise.reject(e)}Promise.resolve(l).then(e=>{finishValidation(),!p.disposed&&(e===!0?r(a,o):r([],[...o,...a]))},()=>{finishValidation(),!p.disposed&&r([],[...o,...a])})},handleDragEnter=n=>{if(!resolveDisabled(e.disabled)){if(n.preventDefault(),l===0){let e=n.dataTransfer?.items;u=!t.length||!e?.length||itemsMatchAccept(e,t)}!u&&n.dataTransfer&&(n.dataTransfer.dropEffect=`none`),updateCounter(l+1)}},handleDragOver=t=>{resolveDisabled(e.disabled)||(t.preventDefault(),t.dataTransfer&&(t.dataTransfer.dropEffect=u?n:`none`))},handleDragLeave=e=>{updateCounter(l-1)},handleDrop=t=>{if(resetCounter(),resolveDisabled(e.disabled))return;t.preventDefault();let n=t.dataTransfer?.files;n&&dispatchWithValidation(Array.from(n),settle)},handlePaste=t=>{if(resolveDisabled(e.disabled))return;let n=t.clipboardData?.files;n?.length&&(t.preventDefault(),dispatchWithValidation(Array.from(n),settleForPaste))};return r.addEventListener(`dragenter`,handleDragEnter,{signal:p.disposalSignal}),r.addEventListener(`dragover`,handleDragOver,{signal:p.disposalSignal}),r.addEventListener(`dragleave`,handleDragLeave,{signal:p.disposalSignal}),r.addEventListener(`drop`,handleDrop,{signal:p.disposalSignal}),e.paste&&r.addEventListener(`paste`,handlePaste,{signal:p.disposalSignal}),window.addEventListener(`dragend`,resetCounter,{signal:p.disposalSignal}),window.addEventListener(`drop`,resetCounter,{signal:p.disposalSignal}),{get disposalSignal(){return p.disposalSignal},dispose:p.dispose,get disposed(){return p.disposed},get hovered(){return l>0&&u},[Symbol.dispose]:p[Symbol.dispose],get validating(){return d}}}var n=2147483647;function makeDataTransfer(){return{dropEffect:`move`,effectAllowed:`move`,getData:()=>``,setData(){},setDragImage(){}}}function createDefaultPreview(e){let t=e.getBoundingClientRect(),r=e.ownerDocument.createElement(`div`);return r.setAttribute(`aria-hidden`,`true`),r.setAttribute(`data-dnd-touch-preview`,``),r.setAttribute(`inert`,``),Object.assign(r.style,{background:`transparent`,border:`2px solid currentColor`,boxSizing:`border-box`,height:`${t.height}px`,left:`${t.left}px`,opacity:`0.7`,pointerEvents:`none`,position:`fixed`,top:`${t.top}px`,transition:`none`,width:`${t.width}px`,zIndex:String(n)}),r}function createScopeTouchController(e,r){let{activationDistance:i=6,preview:a}=e;if(!Number.isFinite(i)||i<0)throw new DndError(`touch.activationDistance must be a non-negative finite number`);let o=makeDataTransfer(),s=new Map,c=null,l=null,resetSession=()=>{l?.preview?.remove(),c=null,l=null},u=createDisposable(()=>{resetSession(),s.clear()}),eventTarget=e=>{let t=e.composedPath().find(e=>e.nodeType===1)??e.target;return t&&t.nodeType===1?t:null},elementBelow=(e,t)=>{let n=e.source.style.display,r=e.preview?.style.display??``;e.source.style.display=`none`,e.preview&&(e.preview.style.display=`none`);try{return e.source.ownerDocument.elementFromPoint(t.x,t.y)}finally{e.source.style.display=n,e.preview&&(e.preview.style.display=r)}},dispatch=(e,t,n,r=!1)=>{let i=new((e.ownerDocument.defaultView?.Event)??Event)(t,{bubbles:!0,cancelable:!0});return Object.defineProperties(i,{__dndTouch:{configurable:!0,value:!0},__dndTouchPreview:{configurable:!0,value:r},clientX:{configurable:!0,value:n.x},clientY:{configurable:!0,value:n.y},dataTransfer:{configurable:!0,value:o}}),e.dispatchEvent(i),i.defaultPrevented},renderPreview=e=>{if(a===!1)return null;let t;try{let n=a?.(e);t=a?n?.cloneNode(!0)??null:createDefaultPreview(e)}catch(e){`${String(e)}`,t=null}return t?(t.setAttribute(`aria-hidden`,`true`),t.setAttribute(`data-dnd-touch-preview`,``),t.setAttribute(`inert`,``),t.removeAttribute(`id`),t.querySelectorAll(`[id]`).forEach(e=>{e.removeAttribute(`id`)}),t.style.pointerEvents=`none`,t.style.position=`fixed`,t.style.zIndex=String(n),e.ownerDocument.body.appendChild(t),t):null},start=e=>{let t=c;if(c=null,!t)return;let n=renderPreview(t);l={current:e.current,lastTarget:t,preview:n,previewOrigin:n?e.current:null,source:t},dispatch(t,`dragstart`,e.current,n!==null)},move=e=>{if(!l)return;if(l.current=e.current,l.preview&&l.previewOrigin){let t=e.current.x-l.previewOrigin.x,n=e.current.y-l.previewOrigin.y;l.preview.style.transform=`translate3d(${t}px, ${n}px, 0)`}let t=elementBelow(l,e.current);t&&t!==l.lastTarget&&(l.lastTarget&&dispatch(l.lastTarget,`dragleave`,e.current),l.lastTarget=t),t&&dispatch(t,`dragover`,e.current),e.event.preventDefault()},end=e=>{if(c=null,!l)return;let t=l;try{let n=!1;if(e.reason===`release`){let r=elementBelow(t,e.current);r&&(n=dispatch(r,`drop`,e.current))}o.dropEffect=n?`move`:`none`,dispatch(t.source,`dragend`,e.current,t.preview!==null)}finally{o.dropEffect=`move`,resetSession()}};return Object.assign(u,{cancel(){for(let e of s.values())if(e.cancel())return!0;return!1},register(e){let n=t(e,{activationDistance:i,onEnd:end,onMove:move,onStart:start,pointerCapture:!1,shouldStart:e=>{if(e.pointerType!==`touch`||l)return!1;let t=eventTarget(e);return c=t?r(t):null,c!==null},signal:u.disposalSignal});return s.set(e,n),()=>{n.dispose(),s.delete(e),c&&e.contains(c)&&(c=null),l&&e.contains(l.source)&&resetSession()}}})}var r=Symbol(`SortableScope`),i=`data-dnd-handle`,a=`data-dnd-item`,o=new WeakMap,s={container:!0,edgeThreshold:32,speed:18,viewport:!1};function getSortableScopeState(e){let t=o.get(e);if(!t)throw new DndScopeError;if(e.disposed)throw new DndScopeError(`Cannot register a sortable with a disposed scope.`);return t}function resolveAutoScrollOptions(e){if(e===!1)return null;if(e===!0||e===void 0)return s;if(!Number.isFinite(e.edgeThreshold??32)||(e.edgeThreshold??32)<0||!Number.isFinite(e.speed??18)||(e.speed??18)<=0)throw new DndError(`Auto-scroll edgeThreshold must be non-negative and speed must be positive`);return{container:e.container??!0,edgeThreshold:e.edgeThreshold??32,speed:e.speed??18,viewport:e.viewport??!1}}function hasOrderChanged(e,t){return t.length!==e.length||t.some((t,n)=>t!==e[n])}function isTouchDragEvent(e){return e.__dndTouch===!0}function immutableIds(e){return Object.freeze([...e])}function notify(e,t,...n){if(t)try{t(...n)}catch{`${e}`}}function scheduleHide(e){typeof requestAnimationFrame==`function`&&(e.hideFrame=requestAnimationFrame(()=>{e.hideFrame=null,e.draggedEl.style.display=`none`}))}function cancelHide(e){e.hideFrame!==null&&(cancelAnimationFrame(e.hideFrame),e.hideFrame=null)}function restoreSessionElement(e){cancelHide(e),e.draggedEl.style.display=e.originalDisplay,e.draggedEl.removeAttribute(`data-dragging`)}function snapshotOrder(e,t){e.initialOrders.has(t)||e.initialOrders.set(t,t.getOrderedIds())}function projectedChanges(e){let t=e.target;return[...e.initialOrders].flatMap(([n,r])=>{let i=r.filter(t=>t!==e.draggedId);if(n===t&&e.placeholder.parentElement===n.element){let t=[...n.element.children],r=t.indexOf(e.placeholder),a=n.getOrderedItems().filter(n=>n!==e.draggedEl&&t.indexOf(n)<r).length;i.splice(a,0,e.draggedId)}return hasOrderChanged(r,i)?[{after:i,before:r,handle:n}]:[]})}function cancelSession(e,t){let n=e.active;n&&(restoreSessionElement(n),n.originalParent.insertBefore(n.draggedEl,n.originalNextSibling?.parentNode===n.originalParent?n.originalNextSibling:null),n.placeholder.remove(),e.active=null,n.source.notifyDragEnd(n.draggedId,t),n.source.notifyInteraction({index:n.source.getOrderedIds().indexOf(n.draggedId),itemId:n.draggedId,total:n.source.getOrderedIds().length,type:`cancel`}))}function commitSession(e,t){let n=e.active;if(!n)return;let r=n.target,i=n.placeholder.parentElement,a=projectedChanges(n);for(let{after:e,before:t,handle:n}of a)n.notifyBeforeReorder(immutableIds(t),immutableIds(e));restoreSessionElement(n),r&&e.handles.has(r)&&i?i.insertBefore(n.draggedEl,n.placeholder):n.originalParent.insertBefore(n.draggedEl,n.originalNextSibling?.parentNode===n.originalParent?n.originalNextSibling:null),n.placeholder.remove(),e.active=null,n.source.notifyDragEnd(n.draggedId,t);let o=[];for(let[t,r]of n.initialOrders){if(!e.handles.has(t))continue;let n=t.getOrderedIds();hasOrderChanged(r,n)&&o.push({after:n,before:r,handle:t})}if(r&&r!==n.source){let t=o.find(e=>e.handle===n.source),i=o.find(e=>e.handle===r);if(t&&i){e.commitMove({itemId:n.draggedId,source:n.source.element,sourceBeforeIds:t.before,sourceIds:t.after,target:r.element,targetBeforeIds:i.before,targetIds:i.after});let a=i.after.indexOf(n.draggedId),o=i.after.length;n.source.notifyInteraction({index:a,itemId:n.draggedId,total:o,type:`drop`}),r.notifyInteraction({index:a,itemId:n.draggedId,total:o,type:`drop`})}return}for(let{after:e,before:t,handle:r}of o)r.commitReorder({after:e,before:t,item:n.draggedId});let s=o.find(e=>e.handle===n.source),c=s?s.after:n.source.getOrderedIds(),l=c.indexOf(n.draggedId);n.source.notifyInteraction({index:l,itemId:n.draggedId,total:c.length,type:`drop`})}function finishSession(e,t,n){if(!e.active)return;let{active:r}=e;n||!t.dataTransfer||t.dataTransfer.dropEffect===`none`||!r.target||!e.handles.has(r.target)||r.source.isDisabled()||r.target.isDisabled()?cancelSession(e,t):commitSession(e,t)}function maybeAutoScroll(e,t,n,r){if(!r)return;let{container:i,edgeThreshold:a,speed:o,viewport:s}=r,c=t.getBoundingClientRect();if(n===`vertical`){i&&e.clientY<c.top+a?t.scrollTop-=o:i&&e.clientY>c.bottom-a&&(t.scrollTop+=o),s&&e.clientY<a?window.scrollBy({left:0,top:-o}):s&&e.clientY>window.innerHeight-a&&window.scrollBy({left:0,top:o});return}i&&e.clientX<c.left+a?t.scrollLeft-=o:i&&e.clientX>c.right-a&&(t.scrollLeft+=o),s&&e.clientX<a?window.scrollBy({left:-o,top:0}):s&&e.clientX>window.innerWidth-a&&window.scrollBy({left:o,top:0})}function keyboardTargetIndex(t,n,r,i){let a=t.indexOf(n);if(a<0)return null;let o=i===`vertical`?`ArrowDown`:`ArrowRight`,s=i===`vertical`?`ArrowUp`:`ArrowLeft`,c=e(r,o),l=e(r,s),u;if(c)u=Math.min(t.length-1,a+1);else if(l)u=Math.max(0,a-1);else if(e(r,`Home`))u=0;else if(e(r,`End`))u=t.length-1;else return null;return u===a?null:u}function createSortableScope(e={}){let t={active:null,commitMove(t){notify(`onMove`,e.onMove,Object.freeze({...t,sourceBeforeIds:immutableIds(t.sourceBeforeIds),sourceIds:immutableIds(t.sourceIds),targetBeforeIds:immutableIds(t.targetBeforeIds),targetIds:immutableIds(t.targetIds)}))},disposables:new Set,handles:new Set,touch:null},n=createDisposable(()=>{t.touch?.dispose();for(let e of[...t.disposables])e();t.disposables.clear(),t.handles.clear()}),i={get disposalSignal(){return n.disposalSignal},dispose:n.dispose,get disposed(){return n.disposed},get isDragging(){return t.active!==null},[r]:!0,[Symbol.dispose]:n[Symbol.dispose]};return o.set(i,t),e.touch&&(t.touch=createScopeTouchController(e.touch===!0?{}:e.touch,e=>{if(t.active)return null;for(let n of t.handles){let t=n.resolveTouchTarget(e);if(t)return t}return null})),i}function createSortable(e){let{autoScroll:t=!0,axis:n=`vertical`,element:r,getKey:o,handle:s,keyboard:c=!0,placeholderClass:l=`dnd-placeholder`,scope:u=createSortableScope()}=e;if(n!==`vertical`&&n!==`horizontal`)throw new DndError(`axis must be "vertical" or "horizontal"`);let d=s?.trim()||null;if((s===void 0||d)&&d)try{r.querySelector(d)}catch(e){throw new DndError(`Invalid handle selector: "${s}"`,{cause:e})}let f=resolveAutoScrollOptions(t),p=getSortableScopeState(u);if([...p.handles].some(e=>e.element===r))throw new DndError(`A sortable is already registered for this element in the selected scope.`);let getItems=()=>(e.items?e.items():Array.from(r.children)).filter(e=>e.parentElement===r&&e.hasAttribute(a)),getOrderedIds=()=>getItems().map(e=>o(e)),m=new Map,h=r.getAttribute(`role`),rememberElement=e=>{let t=m.get(e);if(t)return t;let n={dataDndHandle:e.getAttribute(i),dataDndItem:e.getAttribute(a),draggable:e.getAttribute(`draggable`),role:e.getAttribute(`role`),tabIndex:e.getAttribute(`tabindex`),touchAction:e.style.touchAction};return m.set(e,n),n},restoreAttribute=(e,t,n)=>{n===null?e.removeAttribute(t):e.setAttribute(t,n)},syncItems=(e=getItems())=>{e.forEach(e=>{let t=rememberElement(e);t.role===null&&e.setAttribute(`role`,`listitem`),t.tabIndex===null&&(e.tabIndex=0),s===void 0?(e.setAttribute(`draggable`,`true`),p.touch&&(e.style.touchAction=`none`)):d&&e.querySelectorAll(d).forEach(e=>{rememberElement(e),e.setAttribute(i,``),e.setAttribute(`draggable`,`true`),p.touch&&(e.style.touchAction=`none`)})})},markItems=()=>{let t=new Set,n=e.items?e.items():Array.from(r.children),i=n.filter(e=>e instanceof HTMLElement&&e.parentElement===r),s=[];i.length,n.length;for(let e of i)try{let n=o(e);if(n){if(t.has(n)){`${n}`;continue}t.add(n),s.push(e)}}catch(e){`${String(e)}`}cleanupItems();for(let e of s)rememberElement(e),e.setAttribute(a,``);syncItems(s)},cleanupItems=()=>{for(let[e,t]of m)restoreAttribute(e,i,t.dataDndHandle),restoreAttribute(e,a,t.dataDndItem),restoreAttribute(e,`draggable`,t.draggable),restoreAttribute(e,`role`,t.role),restoreAttribute(e,`tabindex`,t.tabIndex),e.style.touchAction=t.touchAction;m.clear()},createPlaceholder=e=>{let t=document.createElement(`div`);return t.className=l,t.setAttribute(`aria-hidden`,`true`),n===`horizontal`?t.style.width=`${e.offsetWidth}px`:t.style.height=`${e.offsetHeight}px`,t},g={commitReorder:t=>notify(`onReorder`,e.onReorder,Object.freeze({after:immutableIds(t.after),before:immutableIds(t.before),item:t.item})),element:r,getOrderedIds,getOrderedItems:getItems,isDisabled:()=>resolveDisabled(e.disabled),notifyBeforeReorder:(t,n)=>notify(`onBeforeReorder`,e.onBeforeReorder,t,n),notifyDragEnd:(t,n)=>notify(`onDragEnd`,e.onDragEnd,t,n),notifyDragStart:(t,n)=>notify(`onDragStart`,e.onDragStart,t,n),notifyInteraction:t=>notify(`onInteraction`,e.onInteraction,Object.freeze(t)),resolveTouchTarget:t=>{if(resolveDisabled(e.disabled)||!r.contains(t))return null;let n=t.closest(`[${a}]`);if(!n||!getItems().includes(n))return null;if(s===void 0)return n;if(!d)return null;let i=t.closest(d);return i&&n.contains(i)?i:null}},handleDragStart=t=>{if(p.active||g.isDisabled())return;let n=t.target,r=n.closest(`[${a}]`);if(!r||!getItems().includes(r))return;if(s!==void 0){let e=d?n.closest(d):null;if(!e||!r.contains(e))return}let i=r.parentElement;if(!i)return;let c=createPlaceholder(r),l=r.nextSibling,u=o(r),f=new Map;f.set(g,g.getOrderedIds()),r.setAttribute(`data-dragging`,``),i.insertBefore(c,l);let m={draggedEl:r,draggedId:u,hideFrame:null,initialOrders:f,originalDisplay:r.style.display,originalNextSibling:l,originalParent:i,placeholder:c,source:g,target:g};if((!isTouchDragEvent(t)||t.__dndTouchPreview)&&scheduleHide(m),p.active=m,t.dataTransfer)try{if(t.dataTransfer.effectAllowed=`move`,t.dataTransfer.setData(`text/plain`,u),e.dragImage){let n=typeof e.dragImage==`function`?e.dragImage(u,r,t):e.dragImage,[i,a]=e.dragImageOffset??[0,0];n&&t.dataTransfer.setDragImage(n,i,a)}}catch(e){`${e instanceof Error?e.message:String(e)}`}g.notifyDragStart(m.draggedId,t),g.notifyInteraction({index:g.getOrderedIds().indexOf(u),itemId:u,total:g.getOrderedIds().length,type:`pickup`})},handleDragOver=e=>{let t=p.active;if(!t||t.source.isDisabled()||g.isDisabled())return;e.preventDefault(),maybeAutoScroll(e,r,n,f),snapshotOrder(t,g);let{draggedEl:i,placeholder:o}=t,s=e.target.closest(`[${a}]`);if(s&&!getItems().includes(s))return;if(!s){o.parentElement!==r&&r.appendChild(o),t.target=g;return}if(s===i||s===o)return;let c=s.getBoundingClientRect(),l=n===`vertical`?e.clientY>=c.top+c.height/2:e.clientX>=c.left+c.width/2;r.insertBefore(o,l?s.nextSibling:s),t.target=g},handleDrop=e=>{let t=p.active;t&&(t.source.isDisabled()||g.isDisabled()||(e.preventDefault(),t.target=g))},handleDragEnd=e=>{p.active?.source===g&&finishSession(p,e,!1)},handleKeydown=e=>{if(!c||g.isDisabled())return;let t=e.target,i=t?.closest(`[${a}]`);if(!t||!i||!getItems().includes(i))return;let s=t.closest(`input, textarea, select, button, a[href], [contenteditable]:not([contenteditable="false"]), [role="button"], [role="link"]`),l=d?t.closest(d):null;if(s&&(!l||!i.contains(l)))return;let u=getItems(),f=u.indexOf(i),p=keyboardTargetIndex(u,i,e,n);if(p===null)return;let m=u[p];if(!m)return;let h=u.map(o),_=[...u];_.splice(f,1),_.splice(p,0,i);let v=_.map(o),y=o(i);e.preventDefault(),g.notifyBeforeReorder(immutableIds(h),immutableIds(v)),r.insertBefore(i,p>f?m.nextSibling:m),i.focus(),g.commitReorder({after:v,before:h,item:y}),g.notifyInteraction({index:p,itemId:y,previousIndex:f,total:v.length,type:`move`})};markItems();let _,v=createDisposable(()=>{p.disposables.delete(v.dispose),p.active&&(p.active.source===g||p.active.target===g)&&!p.touch?.cancel()&&finishSession(p,new Event(`dragend`),!0),_?.(),p.handles.delete(g),restoreAttribute(r,`role`,h),cleanupItems()});return p.handles.add(g),_=p.touch?.register(r),h===null&&r.setAttribute(`role`,`list`),r.addEventListener(`dragstart`,handleDragStart,{signal:v.disposalSignal}),r.addEventListener(`dragover`,handleDragOver,{signal:v.disposalSignal}),r.addEventListener(`drop`,handleDrop,{signal:v.disposalSignal}),r.addEventListener(`dragend`,handleDragEnd,{signal:v.disposalSignal}),r.addEventListener(`keydown`,handleKeydown,{signal:v.disposalSignal}),p.disposables.add(v.dispose),{get disposalSignal(){return v.disposalSignal},dispose:v.dispose,get disposed(){return v.disposed},get isDragging(){return p.active?.source===g},[Symbol.dispose]:v[Symbol.dispose],refresh:()=>{markItems()}}}function applyReorder(e,t,n){let r=new Map;for(let t of e){let e=n(t);if(r.has(e))throw new DndError(`Duplicate item key: "${e}"`);r.set(e,t)}let i=[];for(let e of t){if(!r.has(e))continue;let t=r.get(e);i.push(t),r.delete(e)}for(let e of r.values())i.push(e);return i}export{DndError,DndScopeError,applyReorder,createDropZone,createSortable,createSortableScope,matchesAccept};
|
|
1
|
+
import { matchKey as e } from "@vielzeug/keymap";
|
|
2
|
+
import { createDragGesture as t } from "@vielzeug/gesture";
|
|
3
|
+
//#endregion
|
|
4
|
+
//#region src/_shared.ts
|
|
5
|
+
function createDisposable(e) {
|
|
6
|
+
let t = !1, n = new AbortController(), dispose = () => {
|
|
7
|
+
t || (t = !0, n.abort(), e?.());
|
|
8
|
+
};
|
|
9
|
+
return {
|
|
10
|
+
get disposalSignal() {
|
|
11
|
+
return n.signal;
|
|
12
|
+
},
|
|
13
|
+
dispose,
|
|
14
|
+
get disposed() {
|
|
15
|
+
return t;
|
|
16
|
+
},
|
|
17
|
+
[Symbol.dispose]: dispose
|
|
18
|
+
};
|
|
19
|
+
}
|
|
20
|
+
function resolveDisabled(e) {
|
|
21
|
+
return e === !0;
|
|
22
|
+
}
|
|
23
|
+
//#endregion
|
|
24
|
+
//#region src/errors.ts
|
|
25
|
+
var DndError = class extends Error {
|
|
26
|
+
constructor(e, t) {
|
|
27
|
+
super(e, t), this.name = new.target.name, Object.setPrototypeOf(this, new.target.prototype);
|
|
28
|
+
}
|
|
29
|
+
}, DndScopeError = class extends DndError {
|
|
30
|
+
constructor(e = "Invalid scope: use createSortableScope() to create scopes.") {
|
|
31
|
+
super(e);
|
|
32
|
+
}
|
|
33
|
+
};
|
|
34
|
+
//#endregion
|
|
35
|
+
//#region src/drop-zone.ts
|
|
36
|
+
function matchesAccept(e, t) {
|
|
37
|
+
return !t.length || t.some((t) => {
|
|
38
|
+
let n = t.trim().toLowerCase(), r = e.type.toLowerCase();
|
|
39
|
+
return n ? n.startsWith(".") ? e.name.toLowerCase().endsWith(n) : n.endsWith("/*") ? r.startsWith(n.slice(0, -1)) : r === n : !1;
|
|
40
|
+
});
|
|
41
|
+
}
|
|
42
|
+
function itemsMatchAccept(e, t) {
|
|
43
|
+
return !t.length || Array.from(e).some((e) => e.kind === "file" && t.some((t) => {
|
|
44
|
+
let n = t.trim();
|
|
45
|
+
return n.endsWith("/*") ? e.type.startsWith(n.slice(0, -1)) : n.startsWith(".") ? !0 : e.type === n;
|
|
46
|
+
}));
|
|
47
|
+
}
|
|
48
|
+
function applyFileFilters(e, t, n) {
|
|
49
|
+
let r = [], i = [];
|
|
50
|
+
for (let n of e) (matchesAccept(n, t) ? r : i).push(n);
|
|
51
|
+
return n !== void 0 && r.length > n && i.push(...r.splice(n)), {
|
|
52
|
+
accepted: r,
|
|
53
|
+
rejected: i
|
|
54
|
+
};
|
|
55
|
+
}
|
|
56
|
+
function normalizeAccept(e) {
|
|
57
|
+
return e.map((e) => {
|
|
58
|
+
let t = e.trim().toLowerCase(), n = /^\.[a-z0-9][a-z0-9._+-]*$/.test(t), r = /^[a-z0-9!#$&^_.+-]+\/(?:\*|[a-z0-9!#$&^_.+-]+)$/.test(t);
|
|
59
|
+
if (!n && !r) throw new DndError(`Invalid accept pattern: "${e}"`);
|
|
60
|
+
return t;
|
|
61
|
+
});
|
|
62
|
+
}
|
|
63
|
+
function notify$1(e, t, ...n) {
|
|
64
|
+
if (t) try {
|
|
65
|
+
t(...n);
|
|
66
|
+
} catch {
|
|
67
|
+
`${e}`;
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
function createDropZone(e) {
|
|
71
|
+
let t = normalizeAccept(e.accept ?? []);
|
|
72
|
+
if (e.maxFiles !== void 0 && (!Number.isSafeInteger(e.maxFiles) || e.maxFiles < 0)) throw new DndError("maxFiles must be a non-negative safe integer");
|
|
73
|
+
let { dropEffect: n = "copy", element: r, maxFiles: i, onDrop: a, onDropRejected: o, onHoverChange: s, onValidatingChange: c } = e, l = 0, u = !1, d = !1, f = /* @__PURE__ */ new Set(), setValidating = (e) => {
|
|
74
|
+
d !== e && (d = e, notify$1("onValidatingChange", c, e));
|
|
75
|
+
}, updateCounter = (e) => {
|
|
76
|
+
let t = l > 0 && u;
|
|
77
|
+
l = Math.max(0, e), l === 0 && (u = !1);
|
|
78
|
+
let n = l > 0 && u;
|
|
79
|
+
n !== t && notify$1("onHoverChange", s, n);
|
|
80
|
+
}, resetCounter = () => {
|
|
81
|
+
updateCounter(0);
|
|
82
|
+
}, p = createDisposable(() => {
|
|
83
|
+
for (let e of f) e.abort();
|
|
84
|
+
f.clear(), setValidating(!1), resetCounter();
|
|
85
|
+
}), settle = (e, t) => {
|
|
86
|
+
e.length > 0 && notify$1("onDrop", a, [...e]), t.length > 0 && notify$1("onDropRejected", o, [...t]);
|
|
87
|
+
}, settleForPaste = (t, n) => {
|
|
88
|
+
t.length > 0 && (e.onPaste ? notify$1("onPaste", e.onPaste, [...t]) : notify$1("onDrop", a, [...t])), n.length > 0 && notify$1("onDropRejected", o, [...n]);
|
|
89
|
+
}, dispatchWithValidation = (n, r) => {
|
|
90
|
+
let { accepted: a, rejected: o } = applyFileFilters(n, t, i), s = e.onValidate, c = s && a.length > 0 ? new AbortController() : null;
|
|
91
|
+
c && (f.add(c), setValidating(!0));
|
|
92
|
+
let finishValidation = () => {
|
|
93
|
+
c && (f.delete(c), p.disposed || setValidating(f.size > 0));
|
|
94
|
+
}, l;
|
|
95
|
+
try {
|
|
96
|
+
l = c && s ? s([...a], { signal: c.signal }) : !0;
|
|
97
|
+
} catch (e) {
|
|
98
|
+
l = Promise.reject(e);
|
|
99
|
+
}
|
|
100
|
+
Promise.resolve(l).then((e) => {
|
|
101
|
+
finishValidation(), !p.disposed && (e === !0 ? r(a, o) : r([], [...o, ...a]));
|
|
102
|
+
}, () => {
|
|
103
|
+
finishValidation(), !p.disposed && r([], [...o, ...a]);
|
|
104
|
+
});
|
|
105
|
+
}, handleDragEnter = (n) => {
|
|
106
|
+
if (!resolveDisabled(e.disabled)) {
|
|
107
|
+
if (n.preventDefault(), l === 0) {
|
|
108
|
+
let e = n.dataTransfer?.items;
|
|
109
|
+
u = !t.length || !e?.length || itemsMatchAccept(e, t);
|
|
110
|
+
}
|
|
111
|
+
!u && n.dataTransfer && (n.dataTransfer.dropEffect = "none"), updateCounter(l + 1);
|
|
112
|
+
}
|
|
113
|
+
}, handleDragOver = (t) => {
|
|
114
|
+
resolveDisabled(e.disabled) || (t.preventDefault(), t.dataTransfer && (t.dataTransfer.dropEffect = u ? n : "none"));
|
|
115
|
+
}, handleDragLeave = (e) => {
|
|
116
|
+
updateCounter(l - 1);
|
|
117
|
+
}, handleDrop = (t) => {
|
|
118
|
+
if (resetCounter(), resolveDisabled(e.disabled)) return;
|
|
119
|
+
t.preventDefault();
|
|
120
|
+
let n = t.dataTransfer?.files;
|
|
121
|
+
n && dispatchWithValidation(Array.from(n), settle);
|
|
122
|
+
}, handlePaste = (t) => {
|
|
123
|
+
if (resolveDisabled(e.disabled)) return;
|
|
124
|
+
let n = t.clipboardData?.files;
|
|
125
|
+
n?.length && (t.preventDefault(), dispatchWithValidation(Array.from(n), settleForPaste));
|
|
126
|
+
};
|
|
127
|
+
return r.addEventListener("dragenter", handleDragEnter, { signal: p.disposalSignal }), r.addEventListener("dragover", handleDragOver, { signal: p.disposalSignal }), r.addEventListener("dragleave", handleDragLeave, { signal: p.disposalSignal }), r.addEventListener("drop", handleDrop, { signal: p.disposalSignal }), e.paste && r.addEventListener("paste", handlePaste, { signal: p.disposalSignal }), window.addEventListener("dragend", resetCounter, { signal: p.disposalSignal }), window.addEventListener("drop", resetCounter, { signal: p.disposalSignal }), {
|
|
128
|
+
get disposalSignal() {
|
|
129
|
+
return p.disposalSignal;
|
|
130
|
+
},
|
|
131
|
+
dispose: p.dispose,
|
|
132
|
+
get disposed() {
|
|
133
|
+
return p.disposed;
|
|
134
|
+
},
|
|
135
|
+
get hovered() {
|
|
136
|
+
return l > 0 && u;
|
|
137
|
+
},
|
|
138
|
+
[Symbol.dispose]: p[Symbol.dispose],
|
|
139
|
+
get validating() {
|
|
140
|
+
return d;
|
|
141
|
+
}
|
|
142
|
+
};
|
|
143
|
+
}
|
|
144
|
+
//#endregion
|
|
145
|
+
//#region src/_touch.ts
|
|
146
|
+
var n = 2147483647;
|
|
147
|
+
function makeDataTransfer() {
|
|
148
|
+
return {
|
|
149
|
+
dropEffect: "move",
|
|
150
|
+
effectAllowed: "move",
|
|
151
|
+
getData: () => "",
|
|
152
|
+
setData() {},
|
|
153
|
+
setDragImage() {}
|
|
154
|
+
};
|
|
155
|
+
}
|
|
156
|
+
function createDefaultPreview(e) {
|
|
157
|
+
let t = e.getBoundingClientRect(), r = e.ownerDocument.createElement("div");
|
|
158
|
+
return r.setAttribute("aria-hidden", "true"), r.setAttribute("data-dnd-touch-preview", ""), r.setAttribute("inert", ""), Object.assign(r.style, {
|
|
159
|
+
background: "transparent",
|
|
160
|
+
border: "2px solid currentColor",
|
|
161
|
+
boxSizing: "border-box",
|
|
162
|
+
height: `${t.height}px`,
|
|
163
|
+
left: `${t.left}px`,
|
|
164
|
+
opacity: "0.7",
|
|
165
|
+
pointerEvents: "none",
|
|
166
|
+
position: "fixed",
|
|
167
|
+
top: `${t.top}px`,
|
|
168
|
+
transition: "none",
|
|
169
|
+
width: `${t.width}px`,
|
|
170
|
+
zIndex: String(n)
|
|
171
|
+
}), r;
|
|
172
|
+
}
|
|
173
|
+
function createScopeTouchController(e, r) {
|
|
174
|
+
let { activationDistance: i = 6, preview: a } = e;
|
|
175
|
+
if (!Number.isFinite(i) || i < 0) throw new DndError("touch.activationDistance must be a non-negative finite number");
|
|
176
|
+
let o = makeDataTransfer(), s = /* @__PURE__ */ new Map(), c = null, l = null, resetSession = () => {
|
|
177
|
+
l?.preview?.remove(), c = null, l = null;
|
|
178
|
+
}, u = createDisposable(() => {
|
|
179
|
+
resetSession(), s.clear();
|
|
180
|
+
}), eventTarget = (e) => {
|
|
181
|
+
let t = e.composedPath().find((e) => e.nodeType === 1) ?? e.target;
|
|
182
|
+
return t && t.nodeType === 1 ? t : null;
|
|
183
|
+
}, elementBelow = (e, t) => {
|
|
184
|
+
let n = e.source.style.display, r = e.preview?.style.display ?? "";
|
|
185
|
+
e.source.style.display = "none", e.preview && (e.preview.style.display = "none");
|
|
186
|
+
try {
|
|
187
|
+
return e.source.ownerDocument.elementFromPoint(t.x, t.y);
|
|
188
|
+
} finally {
|
|
189
|
+
e.source.style.display = n, e.preview && (e.preview.style.display = r);
|
|
190
|
+
}
|
|
191
|
+
}, dispatch = (e, t, n, r = !1) => {
|
|
192
|
+
let i = new ((e.ownerDocument.defaultView?.Event) ?? Event)(t, {
|
|
193
|
+
bubbles: !0,
|
|
194
|
+
cancelable: !0
|
|
195
|
+
});
|
|
196
|
+
return Object.defineProperties(i, {
|
|
197
|
+
__dndTouch: {
|
|
198
|
+
configurable: !0,
|
|
199
|
+
value: !0
|
|
200
|
+
},
|
|
201
|
+
__dndTouchPreview: {
|
|
202
|
+
configurable: !0,
|
|
203
|
+
value: r
|
|
204
|
+
},
|
|
205
|
+
clientX: {
|
|
206
|
+
configurable: !0,
|
|
207
|
+
value: n.x
|
|
208
|
+
},
|
|
209
|
+
clientY: {
|
|
210
|
+
configurable: !0,
|
|
211
|
+
value: n.y
|
|
212
|
+
},
|
|
213
|
+
dataTransfer: {
|
|
214
|
+
configurable: !0,
|
|
215
|
+
value: o
|
|
216
|
+
}
|
|
217
|
+
}), e.dispatchEvent(i), i.defaultPrevented;
|
|
218
|
+
}, renderPreview = (e) => {
|
|
219
|
+
if (a === !1) return null;
|
|
220
|
+
let t;
|
|
221
|
+
try {
|
|
222
|
+
let n = a?.(e);
|
|
223
|
+
t = a ? n?.cloneNode(!0) ?? null : createDefaultPreview(e);
|
|
224
|
+
} catch (e) {
|
|
225
|
+
`${String(e)}`, t = null;
|
|
226
|
+
}
|
|
227
|
+
return t ? (t.setAttribute("aria-hidden", "true"), t.setAttribute("data-dnd-touch-preview", ""), t.setAttribute("inert", ""), t.removeAttribute("id"), t.querySelectorAll("[id]").forEach((e) => {
|
|
228
|
+
e.removeAttribute("id");
|
|
229
|
+
}), t.style.pointerEvents = "none", t.style.position = "fixed", t.style.zIndex = String(n), e.ownerDocument.body.appendChild(t), t) : null;
|
|
230
|
+
}, start = (e) => {
|
|
231
|
+
let t = c;
|
|
232
|
+
if (c = null, !t) return;
|
|
233
|
+
let n = renderPreview(t);
|
|
234
|
+
l = {
|
|
235
|
+
current: e.current,
|
|
236
|
+
lastTarget: t,
|
|
237
|
+
preview: n,
|
|
238
|
+
previewOrigin: n ? e.current : null,
|
|
239
|
+
source: t
|
|
240
|
+
}, dispatch(t, "dragstart", e.current, n !== null);
|
|
241
|
+
}, move = (e) => {
|
|
242
|
+
if (!l) return;
|
|
243
|
+
if (l.current = e.current, l.preview && l.previewOrigin) {
|
|
244
|
+
let t = e.current.x - l.previewOrigin.x, n = e.current.y - l.previewOrigin.y;
|
|
245
|
+
l.preview.style.transform = `translate3d(${t}px, ${n}px, 0)`;
|
|
246
|
+
}
|
|
247
|
+
let t = elementBelow(l, e.current);
|
|
248
|
+
t && t !== l.lastTarget && (l.lastTarget && dispatch(l.lastTarget, "dragleave", e.current), l.lastTarget = t), t && dispatch(t, "dragover", e.current), e.event.preventDefault();
|
|
249
|
+
}, end = (e) => {
|
|
250
|
+
if (c = null, !l) return;
|
|
251
|
+
let t = l;
|
|
252
|
+
try {
|
|
253
|
+
let n = !1;
|
|
254
|
+
if (e.reason === "release") {
|
|
255
|
+
let r = elementBelow(t, e.current);
|
|
256
|
+
r && (n = dispatch(r, "drop", e.current));
|
|
257
|
+
}
|
|
258
|
+
o.dropEffect = n ? "move" : "none", dispatch(t.source, "dragend", e.current, t.preview !== null);
|
|
259
|
+
} finally {
|
|
260
|
+
o.dropEffect = "move", resetSession();
|
|
261
|
+
}
|
|
262
|
+
};
|
|
263
|
+
return Object.assign(u, {
|
|
264
|
+
cancel() {
|
|
265
|
+
for (let e of s.values()) if (e.cancel()) return !0;
|
|
266
|
+
return !1;
|
|
267
|
+
},
|
|
268
|
+
register(e) {
|
|
269
|
+
let n = t(e, {
|
|
270
|
+
activationDistance: i,
|
|
271
|
+
onEnd: end,
|
|
272
|
+
onMove: move,
|
|
273
|
+
onStart: start,
|
|
274
|
+
pointerCapture: !1,
|
|
275
|
+
shouldStart: (e) => {
|
|
276
|
+
if (e.pointerType !== "touch" || l) return !1;
|
|
277
|
+
let t = eventTarget(e);
|
|
278
|
+
return c = t ? r(t) : null, c !== null;
|
|
279
|
+
},
|
|
280
|
+
signal: u.disposalSignal
|
|
281
|
+
});
|
|
282
|
+
return s.set(e, n), () => {
|
|
283
|
+
n.dispose(), s.delete(e), c && e.contains(c) && (c = null), l && e.contains(l.source) && resetSession();
|
|
284
|
+
};
|
|
285
|
+
}
|
|
286
|
+
});
|
|
287
|
+
}
|
|
288
|
+
//#endregion
|
|
289
|
+
//#region src/sortable.ts
|
|
290
|
+
var r = Symbol("SortableScope"), i = "data-dnd-handle", a = "data-dnd-item", o = /* @__PURE__ */ new WeakMap(), s = {
|
|
291
|
+
container: !0,
|
|
292
|
+
edgeThreshold: 32,
|
|
293
|
+
speed: 18,
|
|
294
|
+
viewport: !1
|
|
295
|
+
};
|
|
296
|
+
function getSortableScopeState(e) {
|
|
297
|
+
let t = o.get(e);
|
|
298
|
+
if (!t) throw new DndScopeError();
|
|
299
|
+
if (e.disposed) throw new DndScopeError("Cannot register a sortable with a disposed scope.");
|
|
300
|
+
return t;
|
|
301
|
+
}
|
|
302
|
+
function resolveAutoScrollOptions(e) {
|
|
303
|
+
if (e === !1) return null;
|
|
304
|
+
if (e === !0 || e === void 0) return s;
|
|
305
|
+
if (!Number.isFinite(e.edgeThreshold ?? 32) || (e.edgeThreshold ?? 32) < 0 || !Number.isFinite(e.speed ?? 18) || (e.speed ?? 18) <= 0) throw new DndError("Auto-scroll edgeThreshold must be non-negative and speed must be positive");
|
|
306
|
+
return {
|
|
307
|
+
container: e.container ?? !0,
|
|
308
|
+
edgeThreshold: e.edgeThreshold ?? 32,
|
|
309
|
+
speed: e.speed ?? 18,
|
|
310
|
+
viewport: e.viewport ?? !1
|
|
311
|
+
};
|
|
312
|
+
}
|
|
313
|
+
function hasOrderChanged(e, t) {
|
|
314
|
+
return t.length !== e.length || t.some((t, n) => t !== e[n]);
|
|
315
|
+
}
|
|
316
|
+
function isTouchDragEvent(e) {
|
|
317
|
+
return e.__dndTouch === !0;
|
|
318
|
+
}
|
|
319
|
+
function immutableIds(e) {
|
|
320
|
+
return Object.freeze([...e]);
|
|
321
|
+
}
|
|
322
|
+
function notify(e, t, ...n) {
|
|
323
|
+
if (t) try {
|
|
324
|
+
t(...n);
|
|
325
|
+
} catch {
|
|
326
|
+
`${e}`;
|
|
327
|
+
}
|
|
328
|
+
}
|
|
329
|
+
function scheduleHide(e) {
|
|
330
|
+
typeof requestAnimationFrame == "function" && (e.hideFrame = requestAnimationFrame(() => {
|
|
331
|
+
e.hideFrame = null, e.draggedEl.style.display = "none";
|
|
332
|
+
}));
|
|
333
|
+
}
|
|
334
|
+
function cancelHide(e) {
|
|
335
|
+
e.hideFrame !== null && (cancelAnimationFrame(e.hideFrame), e.hideFrame = null);
|
|
336
|
+
}
|
|
337
|
+
function restoreSessionElement(e) {
|
|
338
|
+
cancelHide(e), e.draggedEl.style.display = e.originalDisplay, e.draggedEl.removeAttribute("data-dragging");
|
|
339
|
+
}
|
|
340
|
+
function snapshotOrder(e, t) {
|
|
341
|
+
e.initialOrders.has(t) || e.initialOrders.set(t, t.getOrderedIds());
|
|
342
|
+
}
|
|
343
|
+
function projectedChanges(e) {
|
|
344
|
+
let t = e.target;
|
|
345
|
+
return [...e.initialOrders].flatMap(([n, r]) => {
|
|
346
|
+
let i = r.filter((t) => t !== e.draggedId);
|
|
347
|
+
if (n === t && e.placeholder.parentElement === n.element) {
|
|
348
|
+
let t = [...n.element.children], r = t.indexOf(e.placeholder), a = n.getOrderedItems().filter((n) => n !== e.draggedEl && t.indexOf(n) < r).length;
|
|
349
|
+
i.splice(a, 0, e.draggedId);
|
|
350
|
+
}
|
|
351
|
+
return hasOrderChanged(r, i) ? [{
|
|
352
|
+
after: i,
|
|
353
|
+
before: r,
|
|
354
|
+
handle: n
|
|
355
|
+
}] : [];
|
|
356
|
+
});
|
|
357
|
+
}
|
|
358
|
+
function cancelSession(e, t) {
|
|
359
|
+
let n = e.active;
|
|
360
|
+
n && (restoreSessionElement(n), n.originalParent.insertBefore(n.draggedEl, n.originalNextSibling?.parentNode === n.originalParent ? n.originalNextSibling : null), n.placeholder.remove(), e.active = null, n.source.notifyDragEnd(n.draggedId, t), n.source.notifyInteraction({
|
|
361
|
+
index: n.source.getOrderedIds().indexOf(n.draggedId),
|
|
362
|
+
itemId: n.draggedId,
|
|
363
|
+
total: n.source.getOrderedIds().length,
|
|
364
|
+
type: "cancel"
|
|
365
|
+
}));
|
|
366
|
+
}
|
|
367
|
+
function commitSession(e, t) {
|
|
368
|
+
let n = e.active;
|
|
369
|
+
if (!n) return;
|
|
370
|
+
let r = n.target, i = n.placeholder.parentElement, a = projectedChanges(n);
|
|
371
|
+
for (let { after: e, before: t, handle: n } of a) n.notifyBeforeReorder(immutableIds(t), immutableIds(e));
|
|
372
|
+
restoreSessionElement(n), r && e.handles.has(r) && i ? i.insertBefore(n.draggedEl, n.placeholder) : n.originalParent.insertBefore(n.draggedEl, n.originalNextSibling?.parentNode === n.originalParent ? n.originalNextSibling : null), n.placeholder.remove(), e.active = null, n.source.notifyDragEnd(n.draggedId, t);
|
|
373
|
+
let o = [];
|
|
374
|
+
for (let [t, r] of n.initialOrders) {
|
|
375
|
+
if (!e.handles.has(t)) continue;
|
|
376
|
+
let n = t.getOrderedIds();
|
|
377
|
+
hasOrderChanged(r, n) && o.push({
|
|
378
|
+
after: n,
|
|
379
|
+
before: r,
|
|
380
|
+
handle: t
|
|
381
|
+
});
|
|
382
|
+
}
|
|
383
|
+
if (r && r !== n.source) {
|
|
384
|
+
let t = o.find((e) => e.handle === n.source), i = o.find((e) => e.handle === r);
|
|
385
|
+
if (t && i) {
|
|
386
|
+
e.commitMove({
|
|
387
|
+
itemId: n.draggedId,
|
|
388
|
+
source: n.source.element,
|
|
389
|
+
sourceBeforeIds: t.before,
|
|
390
|
+
sourceIds: t.after,
|
|
391
|
+
target: r.element,
|
|
392
|
+
targetBeforeIds: i.before,
|
|
393
|
+
targetIds: i.after
|
|
394
|
+
});
|
|
395
|
+
let a = i.after.indexOf(n.draggedId), o = i.after.length;
|
|
396
|
+
n.source.notifyInteraction({
|
|
397
|
+
index: a,
|
|
398
|
+
itemId: n.draggedId,
|
|
399
|
+
total: o,
|
|
400
|
+
type: "drop"
|
|
401
|
+
}), r.notifyInteraction({
|
|
402
|
+
index: a,
|
|
403
|
+
itemId: n.draggedId,
|
|
404
|
+
total: o,
|
|
405
|
+
type: "drop"
|
|
406
|
+
});
|
|
407
|
+
}
|
|
408
|
+
return;
|
|
409
|
+
}
|
|
410
|
+
for (let { after: e, before: t, handle: r } of o) r.commitReorder({
|
|
411
|
+
after: e,
|
|
412
|
+
before: t,
|
|
413
|
+
item: n.draggedId
|
|
414
|
+
});
|
|
415
|
+
let s = o.find((e) => e.handle === n.source), c = s ? s.after : n.source.getOrderedIds(), l = c.indexOf(n.draggedId);
|
|
416
|
+
n.source.notifyInteraction({
|
|
417
|
+
index: l,
|
|
418
|
+
itemId: n.draggedId,
|
|
419
|
+
total: c.length,
|
|
420
|
+
type: "drop"
|
|
421
|
+
});
|
|
422
|
+
}
|
|
423
|
+
function finishSession(e, t, n) {
|
|
424
|
+
if (!e.active) return;
|
|
425
|
+
let { active: r } = e;
|
|
426
|
+
n || !t.dataTransfer || t.dataTransfer.dropEffect === "none" || !r.target || !e.handles.has(r.target) || r.source.isDisabled() || r.target.isDisabled() ? cancelSession(e, t) : commitSession(e, t);
|
|
427
|
+
}
|
|
428
|
+
function maybeAutoScroll(e, t, n, r) {
|
|
429
|
+
if (!r) return;
|
|
430
|
+
let { container: i, edgeThreshold: a, speed: o, viewport: s } = r, c = t.getBoundingClientRect();
|
|
431
|
+
n === "vertical" ? (i && e.clientY < c.top + a ? t.scrollTop -= o : i && e.clientY > c.bottom - a && (t.scrollTop += o), s && e.clientY < a ? window.scrollBy({
|
|
432
|
+
left: 0,
|
|
433
|
+
top: -o
|
|
434
|
+
}) : s && e.clientY > window.innerHeight - a && window.scrollBy({
|
|
435
|
+
left: 0,
|
|
436
|
+
top: o
|
|
437
|
+
})) : (i && e.clientX < c.left + a ? t.scrollLeft -= o : i && e.clientX > c.right - a && (t.scrollLeft += o), s && e.clientX < a ? window.scrollBy({
|
|
438
|
+
left: -o,
|
|
439
|
+
top: 0
|
|
440
|
+
}) : s && e.clientX > window.innerWidth - a && window.scrollBy({
|
|
441
|
+
left: o,
|
|
442
|
+
top: 0
|
|
443
|
+
}));
|
|
444
|
+
}
|
|
445
|
+
function keyboardTargetIndex(t, n, r, i) {
|
|
446
|
+
let a = t.indexOf(n);
|
|
447
|
+
if (a < 0) return null;
|
|
448
|
+
let o = i === "vertical" ? "ArrowDown" : "ArrowRight", s = i === "vertical" ? "ArrowUp" : "ArrowLeft", c = e(r, o), l = e(r, s), u;
|
|
449
|
+
if (c) u = Math.min(t.length - 1, a + 1);
|
|
450
|
+
else if (l) u = Math.max(0, a - 1);
|
|
451
|
+
else if (e(r, "Home")) u = 0;
|
|
452
|
+
else if (e(r, "End")) u = t.length - 1;
|
|
453
|
+
else return null;
|
|
454
|
+
return u === a ? null : u;
|
|
455
|
+
}
|
|
456
|
+
function createSortableScope(e = {}) {
|
|
457
|
+
let t = {
|
|
458
|
+
active: null,
|
|
459
|
+
commitMove(t) {
|
|
460
|
+
notify("onMove", e.onMove, Object.freeze({
|
|
461
|
+
...t,
|
|
462
|
+
sourceBeforeIds: immutableIds(t.sourceBeforeIds),
|
|
463
|
+
sourceIds: immutableIds(t.sourceIds),
|
|
464
|
+
targetBeforeIds: immutableIds(t.targetBeforeIds),
|
|
465
|
+
targetIds: immutableIds(t.targetIds)
|
|
466
|
+
}));
|
|
467
|
+
},
|
|
468
|
+
disposables: /* @__PURE__ */ new Set(),
|
|
469
|
+
handles: /* @__PURE__ */ new Set(),
|
|
470
|
+
touch: null
|
|
471
|
+
}, n = createDisposable(() => {
|
|
472
|
+
t.touch?.dispose();
|
|
473
|
+
for (let e of [...t.disposables]) e();
|
|
474
|
+
t.disposables.clear(), t.handles.clear();
|
|
475
|
+
}), i = {
|
|
476
|
+
get disposalSignal() {
|
|
477
|
+
return n.disposalSignal;
|
|
478
|
+
},
|
|
479
|
+
dispose: n.dispose,
|
|
480
|
+
get disposed() {
|
|
481
|
+
return n.disposed;
|
|
482
|
+
},
|
|
483
|
+
get isDragging() {
|
|
484
|
+
return t.active !== null;
|
|
485
|
+
},
|
|
486
|
+
[r]: !0,
|
|
487
|
+
[Symbol.dispose]: n[Symbol.dispose]
|
|
488
|
+
};
|
|
489
|
+
return o.set(i, t), e.touch && (t.touch = createScopeTouchController(e.touch === !0 ? {} : e.touch, (e) => {
|
|
490
|
+
if (t.active) return null;
|
|
491
|
+
for (let n of t.handles) {
|
|
492
|
+
let t = n.resolveTouchTarget(e);
|
|
493
|
+
if (t) return t;
|
|
494
|
+
}
|
|
495
|
+
return null;
|
|
496
|
+
})), i;
|
|
497
|
+
}
|
|
498
|
+
function createSortable(e) {
|
|
499
|
+
let { autoScroll: t = !0, axis: n = "vertical", element: r, getKey: o, handle: s, keyboard: c = !0, placeholderClass: l = "dnd-placeholder", scope: u = createSortableScope() } = e;
|
|
500
|
+
if (n !== "vertical" && n !== "horizontal") throw new DndError("axis must be \"vertical\" or \"horizontal\"");
|
|
501
|
+
let d = s?.trim() || null;
|
|
502
|
+
if ((s === void 0 || d) && d) try {
|
|
503
|
+
r.querySelector(d);
|
|
504
|
+
} catch (e) {
|
|
505
|
+
throw new DndError(`Invalid handle selector: "${s}"`, { cause: e });
|
|
506
|
+
}
|
|
507
|
+
let f = resolveAutoScrollOptions(t), p = getSortableScopeState(u);
|
|
508
|
+
if ([...p.handles].some((e) => e.element === r)) throw new DndError("A sortable is already registered for this element in the selected scope.");
|
|
509
|
+
let getItems = () => (e.items ? e.items() : Array.from(r.children)).filter((e) => e.parentElement === r && e.hasAttribute(a)), getOrderedIds = () => getItems().map((e) => o(e)), m = /* @__PURE__ */ new Map(), h = r.getAttribute("role"), rememberElement = (e) => {
|
|
510
|
+
let t = m.get(e);
|
|
511
|
+
if (t) return t;
|
|
512
|
+
let n = {
|
|
513
|
+
dataDndHandle: e.getAttribute(i),
|
|
514
|
+
dataDndItem: e.getAttribute(a),
|
|
515
|
+
draggable: e.getAttribute("draggable"),
|
|
516
|
+
role: e.getAttribute("role"),
|
|
517
|
+
tabIndex: e.getAttribute("tabindex"),
|
|
518
|
+
touchAction: e.style.touchAction
|
|
519
|
+
};
|
|
520
|
+
return m.set(e, n), n;
|
|
521
|
+
}, restoreAttribute = (e, t, n) => {
|
|
522
|
+
n === null ? e.removeAttribute(t) : e.setAttribute(t, n);
|
|
523
|
+
}, syncItems = (e = getItems()) => {
|
|
524
|
+
e.forEach((e) => {
|
|
525
|
+
let t = rememberElement(e);
|
|
526
|
+
t.role === null && e.setAttribute("role", "listitem"), t.tabIndex === null && (e.tabIndex = 0), s === void 0 ? (e.setAttribute("draggable", "true"), p.touch && (e.style.touchAction = "none")) : d && e.querySelectorAll(d).forEach((e) => {
|
|
527
|
+
rememberElement(e), e.setAttribute(i, ""), e.setAttribute("draggable", "true"), p.touch && (e.style.touchAction = "none");
|
|
528
|
+
});
|
|
529
|
+
});
|
|
530
|
+
}, markItems = () => {
|
|
531
|
+
let t = /* @__PURE__ */ new Set(), n = e.items ? e.items() : Array.from(r.children), i = n.filter((e) => e instanceof HTMLElement && e.parentElement === r), s = [];
|
|
532
|
+
i.length, n.length;
|
|
533
|
+
for (let e of i) try {
|
|
534
|
+
let n = o(e);
|
|
535
|
+
if (n) {
|
|
536
|
+
if (t.has(n)) {
|
|
537
|
+
`${n}`;
|
|
538
|
+
continue;
|
|
539
|
+
}
|
|
540
|
+
t.add(n), s.push(e);
|
|
541
|
+
}
|
|
542
|
+
} catch (e) {
|
|
543
|
+
`${String(e)}`;
|
|
544
|
+
}
|
|
545
|
+
cleanupItems();
|
|
546
|
+
for (let e of s) rememberElement(e), e.setAttribute(a, "");
|
|
547
|
+
syncItems(s);
|
|
548
|
+
}, cleanupItems = () => {
|
|
549
|
+
for (let [e, t] of m) restoreAttribute(e, i, t.dataDndHandle), restoreAttribute(e, a, t.dataDndItem), restoreAttribute(e, "draggable", t.draggable), restoreAttribute(e, "role", t.role), restoreAttribute(e, "tabindex", t.tabIndex), e.style.touchAction = t.touchAction;
|
|
550
|
+
m.clear();
|
|
551
|
+
}, createPlaceholder = (e) => {
|
|
552
|
+
let t = document.createElement("div");
|
|
553
|
+
return t.className = l, t.setAttribute("aria-hidden", "true"), n === "horizontal" ? t.style.width = `${e.offsetWidth}px` : t.style.height = `${e.offsetHeight}px`, t;
|
|
554
|
+
}, g = {
|
|
555
|
+
commitReorder: (t) => notify("onReorder", e.onReorder, Object.freeze({
|
|
556
|
+
after: immutableIds(t.after),
|
|
557
|
+
before: immutableIds(t.before),
|
|
558
|
+
item: t.item
|
|
559
|
+
})),
|
|
560
|
+
element: r,
|
|
561
|
+
getOrderedIds,
|
|
562
|
+
getOrderedItems: getItems,
|
|
563
|
+
isDisabled: () => resolveDisabled(e.disabled),
|
|
564
|
+
notifyBeforeReorder: (t, n) => notify("onBeforeReorder", e.onBeforeReorder, t, n),
|
|
565
|
+
notifyDragEnd: (t, n) => notify("onDragEnd", e.onDragEnd, t, n),
|
|
566
|
+
notifyDragStart: (t, n) => notify("onDragStart", e.onDragStart, t, n),
|
|
567
|
+
notifyInteraction: (t) => notify("onInteraction", e.onInteraction, Object.freeze(t)),
|
|
568
|
+
resolveTouchTarget: (t) => {
|
|
569
|
+
if (resolveDisabled(e.disabled) || !r.contains(t)) return null;
|
|
570
|
+
let n = t.closest(`[${a}]`);
|
|
571
|
+
if (!n || !getItems().includes(n)) return null;
|
|
572
|
+
if (s === void 0) return n;
|
|
573
|
+
if (!d) return null;
|
|
574
|
+
let i = t.closest(d);
|
|
575
|
+
return i && n.contains(i) ? i : null;
|
|
576
|
+
}
|
|
577
|
+
}, handleDragStart = (t) => {
|
|
578
|
+
if (p.active || g.isDisabled()) return;
|
|
579
|
+
let n = t.target, r = n.closest(`[${a}]`);
|
|
580
|
+
if (!r || !getItems().includes(r)) return;
|
|
581
|
+
if (s !== void 0) {
|
|
582
|
+
let e = d ? n.closest(d) : null;
|
|
583
|
+
if (!e || !r.contains(e)) return;
|
|
584
|
+
}
|
|
585
|
+
let i = r.parentElement;
|
|
586
|
+
if (!i) return;
|
|
587
|
+
let c = createPlaceholder(r), l = r.nextSibling, u = o(r), f = /* @__PURE__ */ new Map();
|
|
588
|
+
f.set(g, g.getOrderedIds()), r.setAttribute("data-dragging", ""), i.insertBefore(c, l);
|
|
589
|
+
let m = {
|
|
590
|
+
draggedEl: r,
|
|
591
|
+
draggedId: u,
|
|
592
|
+
hideFrame: null,
|
|
593
|
+
initialOrders: f,
|
|
594
|
+
originalDisplay: r.style.display,
|
|
595
|
+
originalNextSibling: l,
|
|
596
|
+
originalParent: i,
|
|
597
|
+
placeholder: c,
|
|
598
|
+
source: g,
|
|
599
|
+
target: g
|
|
600
|
+
};
|
|
601
|
+
if ((!isTouchDragEvent(t) || t.__dndTouchPreview) && scheduleHide(m), p.active = m, t.dataTransfer) try {
|
|
602
|
+
if (t.dataTransfer.effectAllowed = "move", t.dataTransfer.setData("text/plain", u), e.dragImage) {
|
|
603
|
+
let n = typeof e.dragImage == "function" ? e.dragImage(u, r, t) : e.dragImage, [i, a] = e.dragImageOffset ?? [0, 0];
|
|
604
|
+
n && t.dataTransfer.setDragImage(n, i, a);
|
|
605
|
+
}
|
|
606
|
+
} catch (e) {
|
|
607
|
+
`${e instanceof Error ? e.message : String(e)}`;
|
|
608
|
+
}
|
|
609
|
+
g.notifyDragStart(m.draggedId, t), g.notifyInteraction({
|
|
610
|
+
index: g.getOrderedIds().indexOf(u),
|
|
611
|
+
itemId: u,
|
|
612
|
+
total: g.getOrderedIds().length,
|
|
613
|
+
type: "pickup"
|
|
614
|
+
});
|
|
615
|
+
}, handleDragOver = (e) => {
|
|
616
|
+
let t = p.active;
|
|
617
|
+
if (!t || t.source.isDisabled() || g.isDisabled()) return;
|
|
618
|
+
e.preventDefault(), maybeAutoScroll(e, r, n, f), snapshotOrder(t, g);
|
|
619
|
+
let { draggedEl: i, placeholder: o } = t, s = e.target.closest(`[${a}]`);
|
|
620
|
+
if (s && !getItems().includes(s)) return;
|
|
621
|
+
if (!s) {
|
|
622
|
+
o.parentElement !== r && r.appendChild(o), t.target = g;
|
|
623
|
+
return;
|
|
624
|
+
}
|
|
625
|
+
if (s === i || s === o) return;
|
|
626
|
+
let c = s.getBoundingClientRect(), l = n === "vertical" ? e.clientY >= c.top + c.height / 2 : e.clientX >= c.left + c.width / 2;
|
|
627
|
+
r.insertBefore(o, l ? s.nextSibling : s), t.target = g;
|
|
628
|
+
}, handleDrop = (e) => {
|
|
629
|
+
let t = p.active;
|
|
630
|
+
t && (t.source.isDisabled() || g.isDisabled() || (e.preventDefault(), t.target = g));
|
|
631
|
+
}, handleDragEnd = (e) => {
|
|
632
|
+
p.active?.source === g && finishSession(p, e, !1);
|
|
633
|
+
}, handleKeydown = (e) => {
|
|
634
|
+
if (!c || g.isDisabled()) return;
|
|
635
|
+
let t = e.target, i = t?.closest(`[${a}]`);
|
|
636
|
+
if (!t || !i || !getItems().includes(i)) return;
|
|
637
|
+
let s = t.closest("input, textarea, select, button, a[href], [contenteditable]:not([contenteditable=\"false\"]), [role=\"button\"], [role=\"link\"]"), l = d ? t.closest(d) : null;
|
|
638
|
+
if (s && (!l || !i.contains(l))) return;
|
|
639
|
+
let u = getItems(), f = u.indexOf(i), p = keyboardTargetIndex(u, i, e, n);
|
|
640
|
+
if (p === null) return;
|
|
641
|
+
let m = u[p];
|
|
642
|
+
if (!m) return;
|
|
643
|
+
let h = u.map(o), _ = [...u];
|
|
644
|
+
_.splice(f, 1), _.splice(p, 0, i);
|
|
645
|
+
let v = _.map(o), y = o(i);
|
|
646
|
+
e.preventDefault(), g.notifyBeforeReorder(immutableIds(h), immutableIds(v)), r.insertBefore(i, p > f ? m.nextSibling : m), i.focus(), g.commitReorder({
|
|
647
|
+
after: v,
|
|
648
|
+
before: h,
|
|
649
|
+
item: y
|
|
650
|
+
}), g.notifyInteraction({
|
|
651
|
+
index: p,
|
|
652
|
+
itemId: y,
|
|
653
|
+
previousIndex: f,
|
|
654
|
+
total: v.length,
|
|
655
|
+
type: "move"
|
|
656
|
+
});
|
|
657
|
+
};
|
|
658
|
+
markItems();
|
|
659
|
+
let _, v = createDisposable(() => {
|
|
660
|
+
p.disposables.delete(v.dispose), p.active && (p.active.source === g || p.active.target === g) && !p.touch?.cancel() && finishSession(p, new Event("dragend"), !0), _?.(), p.handles.delete(g), restoreAttribute(r, "role", h), cleanupItems();
|
|
661
|
+
});
|
|
662
|
+
return p.handles.add(g), _ = p.touch?.register(r), h === null && r.setAttribute("role", "list"), r.addEventListener("dragstart", handleDragStart, { signal: v.disposalSignal }), r.addEventListener("dragover", handleDragOver, { signal: v.disposalSignal }), r.addEventListener("drop", handleDrop, { signal: v.disposalSignal }), r.addEventListener("dragend", handleDragEnd, { signal: v.disposalSignal }), r.addEventListener("keydown", handleKeydown, { signal: v.disposalSignal }), p.disposables.add(v.dispose), {
|
|
663
|
+
get disposalSignal() {
|
|
664
|
+
return v.disposalSignal;
|
|
665
|
+
},
|
|
666
|
+
dispose: v.dispose,
|
|
667
|
+
get disposed() {
|
|
668
|
+
return v.disposed;
|
|
669
|
+
},
|
|
670
|
+
get isDragging() {
|
|
671
|
+
return p.active?.source === g;
|
|
672
|
+
},
|
|
673
|
+
[Symbol.dispose]: v[Symbol.dispose],
|
|
674
|
+
refresh: () => {
|
|
675
|
+
markItems();
|
|
676
|
+
}
|
|
677
|
+
};
|
|
678
|
+
}
|
|
679
|
+
function applyReorder(e, t, n) {
|
|
680
|
+
let r = /* @__PURE__ */ new Map();
|
|
681
|
+
for (let t of e) {
|
|
682
|
+
let e = n(t);
|
|
683
|
+
if (r.has(e)) throw new DndError(`Duplicate item key: "${e}"`);
|
|
684
|
+
r.set(e, t);
|
|
685
|
+
}
|
|
686
|
+
let i = [];
|
|
687
|
+
for (let e of t) {
|
|
688
|
+
if (!r.has(e)) continue;
|
|
689
|
+
let t = r.get(e);
|
|
690
|
+
i.push(t), r.delete(e);
|
|
691
|
+
}
|
|
692
|
+
for (let e of r.values()) i.push(e);
|
|
693
|
+
return i;
|
|
694
|
+
}
|
|
695
|
+
//#endregion
|
|
696
|
+
export { DndError, DndScopeError, applyReorder, createDropZone, createSortable, createSortableScope, matchesAccept };
|
|
697
|
+
|
|
2
698
|
//# sourceMappingURL=dnd.js.map
|