uikit/dist/js/components/sortable.min.js

UIkit is a lightweight and modular front-end framework for developing fast and powerful web interfaces.

/*! UIkit 3.25.14 | https://www.getuikit.com | (c) 2014 - 2026 YOOtheme | MIT License */(function(e,w){typeof exports=="object"&&typeof module<"u"?module.exports=w(require("uikit-util")):typeof define=="function"&&define.amd?define("uikitsortable",["uikit-util"],w):(e=typeof globalThis<"u"?globalThis:e||self,e.UIkitSortable=w(e.UIkit.util))})(this,(function(e){"use strict";function w(o,s="update"){o._connected&&o._updates.length&&(o._updateCount||(o._updateCount=0,requestAnimationFrame(()=>o._updateCount=0)),o._queued||(o._queued=new Set,e.fastdom.read(()=>{o._connected&&A(o,o._queued),o._queued=null})),o._updateCount++<20&&o._queued.add(s.type||s))}function A(o,s){for(const{read:n,write:t,events:c=[]}of o._updates){if(!s.has("update")&&!c.some(a=>s.has(a)))continue;let r;n&&(r=n.call(o,o._data,s),r&&e.isPlainObject(r)&&e.assign(o._data,r)),t&&r!==!1&&e.fastdom.write(()=>{o._connected&&t.call(o,o._data,s)})}}function H(o){return I(e.observeResize,o,"resize")}function x(o){return I(e.observeMutation,o)}function I(o,s,n){return{observe:o,handler(){w(this,n)},...s}}x({options:{childList:!0}}),x({options:{attributes:!0,attributeFilter:["style"]}}),H({handler(o){for(const{target:s,borderBoxSize:[{inlineSize:n,blockSize:t}]}of o)if(s===this.$el&&!n&&!t)return;this.$emit("resize")},target:({$el:o})=>[o,...e.children(o)]});function L(o){const s=[[]],n=o.some((t,c)=>c&&o[c-1].offsetParent!==t.offsetParent);for(const t of o){if(!e.isVisible(t))continue;const c=y(t,n);for(let r=s.length-1;r>=0;r--){const a=s[r];if(!a[0]){a.push(t);break}const h=y(a[0],n);if(c.top>=h.bottom-1&&c.top!==h.top){s.push([t]);break}if(c.bottom-1>h.top||c.top===h.top){let f=a.length-1;for(;f>=0;f--){const p=y(a[f],n);if(c.left>=p.left)break}a.splice(f+1,0,t);break}if(r===0){s.unshift([t]);break}}}return s}function y(o,s=!1){let{offsetTop:n,offsetLeft:t,offsetHeight:c,offsetWidth:r}=o;return s&&([n,t]=e.offsetPosition(o)),{top:n,left:t,bottom:n+c,right:t+r}}function D(){return new Promise(o=>requestAnimationFrame(o))}function P(o){return new Promise(s=>setTimeout(s,o))}const C="uk-transition-leave",S="uk-transition-enter";function E(o,s,n,t=0){const c=T(s,!0),r={opacity:1},a={opacity:0},h=()=>c===T(s),f=l=>()=>h()?l():Promise.reject(),p=f(async()=>{e.addClass(s,C),await(t?$(s).reduce(async(l,i,b,u)=>{if(await l,!e.isInView(i)||!h()){e.css(i,a);return}await P(t);const d=e.Transition.start(i,a,n/2,"ease");u.length-1===b&&await d},Promise.resolve()):e.Transition.start(s,a,n/2,"ease")),e.removeClass(s,C)}),m=f(async()=>{const l=e.height(s);e.addClass(s,S),o(),e.css(t?e.children(s):s,a),e.height(s,l),await P(),e.height(s,"");const i=e.height(s);e.css(s,"alignContent","flex-start"),e.height(s,l);let b=[],u=n/2;if(t){const d=$(s);e.css(e.children(s),a),b=d.reduce(async(g,v,Z,k)=>{if(await g,!e.isInView(v)||!h()){e.resetProps(v,r);return}await P(t);const U=e.Transition.start(v,r,n/2,"ease").then(()=>h()&&e.resetProps(v,r));k.length-1===Z&&await U},Promise.resolve()),u+=d.length*t}if(!t||l!==i){const d={height:i,...t?{}:r};b.push(e.Transition.start(s,d,u,"ease"))}await Promise.all(b),e.removeClass(s,S),h()&&(e.resetProps(s,{height:"",alignContent:"",...r}),delete s.dataset.transition)});return e.hasClass(s,C)?_(s).then(m):e.hasClass(s,S)?_(s).then(p).then(m):p().then(m)}function T(o,s){return s&&(o.dataset.transition=1+T(o)),e.toNumber(o.dataset.transition)||0}function _(o){return Promise.all(e.children(o).filter(e.Transition.inProgress).map(s=>new Promise(n=>e.once(s,"transitionend transitioncanceled",n))))}function $(o){return L(e.children(o)).flat().filter(e.isVisible)}async function M(o,s,n){await D();let t=e.children(s);const c=t.map(d=>F(d,!0)),r={...e.css(s,["height","padding"]),display:"block"},a=t.filter(d=>e.isInView(d)),h=t.concat(s);await Promise.all(h.map(e.Transition.cancel)),e.css(h,"transitionProperty","none"),await o();const f=e.children(s).filter(d=>!e.includes(t,d));t=t.concat(f),await Promise.resolve(),e.css(h,"transitionProperty","");const p=e.attr(s,"style"),m=e.css(s,["height","padding"]),[l,i]=B(s,t,c),b=t.map(d=>({style:e.attr(d,"style")}));a.push(...t.filter(d=>e.isInView(d))),t.forEach((d,g)=>i[g]&&e.css(d,i[g])),e.css(s,r),e.trigger(s,"scroll"),await D();const u=t.map((d,g)=>{if(e.parent(d)===s&&a.includes(d))return e.Transition.start(d,l[g],n,"ease",!f.includes(d))}).concat(e.Transition.start(s,m,n,"ease",!0));try{await Promise.all(u),t.forEach((d,g)=>{e.attr(d,b[g]),e.parent(d)===s&&e.css(d,"display",l[g].opacity===0?"none":"")}),e.attr(s,"style",p)}catch{e.attr(t,"style",""),e.resetProps(s,r)}}function F(o,s){const n=e.css(o,"zIndex");return e.isVisible(o)?{display:"",opacity:s?e.css(o,"opacity"):"0",pointerEvents:"none",position:"absolute",zIndex:n==="auto"?e.index(o):n,...z(o)}:!1}function B(o,s,n){const t=s.map((r,a)=>e.parent(r)&&a in n?n[a]?e.isVisible(r)?z(r):{opacity:0}:{opacity:e.isVisible(r)?1:0}:!1),c=t.map((r,a)=>{const h=e.parent(s[a])===o&&(n[a]||F(s[a]));if(!h)return!1;if(!r)delete h.opacity;else if(!("opacity"in r)){const{opacity:f}=h;f%1?r.opacity=1:delete h.opacity}return h});return[t,c]}function z(o){const{height:s,width:n}=e.dimensions(o);let{top:t,left:c}=e.position(o);const r=e.offsetViewport(o.ownerDocument);return t=e.clamp(t,r.top-s-r.height,r.bottom+r.height),c=e.clamp(c,r.left-n-r.width,r.right+r.width),{height:s,width:n,top:t,left:c,transform:"",...e.css(o,["marginTop","marginLeft"])}}var R={props:{duration:Number,animation:Boolean},data:{duration:150,animation:"slide"},methods:{animate(o,s=this.$el){const n=this.animation;return(n==="fade"?E:n==="delayed-fade"?(...c)=>E(...c,40):n?M:()=>(o(),Promise.resolve()))(o,s,this.duration).catch(e.noop)}}},j={connected(){e.addClass(this.$el,this.$options.id)}},N={mixins:[j,R],props:{group:String,threshold:Number,clsItem:String,clsPlaceholder:String,clsDrag:String,clsDragState:String,clsBase:String,clsNoDrag:String,clsEmpty:String,clsCustom:String,handle:String},data:{group:!1,threshold:5,clsItem:"uk-sortable-item",clsPlaceholder:"uk-sortable-placeholder",clsDrag:"uk-sortable-drag",clsDragState:"uk-drag",clsBase:"uk-sortable",clsNoDrag:"uk-sortable-nodrag",clsEmpty:"uk-sortable-empty",clsCustom:"",handle:!1,pos:{}},events:{name:e.pointerDown,passive:!1,handler(o){this.init(o)}},computed:{target:(o,s)=>(s.tBodies||[s])[0],items(){return e.children(this.target)},isEmpty(){return!this.items.length},handles({handle:o},s){return o?e.$$(o,s):this.items}},watch:{isEmpty(o){e.toggleClass(this.target,this.clsEmpty,o)},handles(o,s){const n={touchAction:"none",userSelect:"none"};e.resetProps(s,n),e.css(o,n)}},update:{write(o){if(!this.drag||!e.parent(this.placeholder))return;const{pos:{x:s,y:n},origin:{offsetTop:t,offsetLeft:c},placeholder:r}=this;e.css(this.drag,{top:n-t,left:s-c});const a=this.getSortable(document.elementFromPoint(s,n));if(!a)return;const{items:h}=a;if(h.some(e.Transition.inProgress))return;const f=J(h,{x:s,y:n});if(h.length&&(!f||f===r))return;const p=this.getSortable(r),m=K(a.target,f,r,{x:s,y:n},a===p&&o.moved!==f);m!==!1&&(m&&r===m||(a!==p?(p.remove(r),o.moved=f):delete o.moved,a.insert(r,m),this.touched.add(a)))},events:["move"]},methods:{init(o){const{target:s,button:n,defaultPrevented:t}=o,[c]=this.items.filter(r=>r.contains(s));!c||t||n>0||e.isInput(s)||s.closest(`.${this.clsNoDrag}`)||this.handle&&!s.closest(this.handle)||(o.preventDefault(),this.pos=e.getEventPos(o),this.touched=new Set([this]),this.placeholder=c,this.origin={target:s,index:e.index(c),...this.pos},e.on(document,e.pointerMove,this.move),e.on(document,e.pointerUp,this.end),this.threshold||this.start(o))},start(o){this.drag=G(this.$container,this.placeholder);const{left:s,top:n}=e.dimensions(this.placeholder);e.assign(this.origin,{offsetLeft:this.pos.x-s,offsetTop:this.pos.y-n}),e.addClass(this.drag,this.clsDrag,this.clsCustom),e.addClass(this.placeholder,this.clsPlaceholder),e.addClass(this.items,this.clsItem),e.addClass(document.documentElement,this.clsDragState),e.trigger(this.$el,"start",[this,this.placeholder]),O(this.pos),this.move(o)},move:X(function(o){e.assign(this.pos,e.getEventPos(o)),!this.drag&&(Math.abs(this.pos.x-this.origin.x)>this.threshold||Math.abs(this.pos.y-this.origin.y)>this.threshold)&&this.start(o),this.$emit("move")}),end(){if(e.off(document,e.pointerMove,this.move),e.off(document,e.pointerUp,this.end),!this.drag)return;W();const o=this.getSortable(this.placeholder);this===o?this.origin.index!==e.index(this.placeholder)&&e.trigger(this.$el,"moved",[this,this.placeholder]):(e.trigger(o.$el,"added",[o,this.placeholder]),e.trigger(this.$el,"removed",[this,this.placeholder])),e.trigger(this.$el,"stop",[this,this.placeholder]),e.remove(this.drag),this.drag=null;for(const{clsPlaceholder:s,clsItem:n}of this.touched)for(const t of this.touched)e.removeClass(t.items,s,n);this.touched=null,e.removeClass(document.documentElement,this.clsDragState)},insert(o,s){e.addClass(this.items,this.clsItem),s&&s.previousElementSibling!==o?this.animate(()=>e.before(s,o)):!s&&this.target.lastElementChild!==o&&this.animate(()=>e.append(this.target,o))},remove(o){this.target.contains(o)&&this.animate(()=>e.remove(o))},getSortable(o){do{const s=this.$getComponent(o,"sortable");if(s&&(s===this||this.group!==!1&&s.group===this.group))return s}while(o=e.parent(o))}}};let V;function O(o){let s=Date.now();V=setInterval(()=>{let{x:n,y:t}=o;t+=document.scrollingElement.scrollTop;const c=(Date.now()-s)*.3;s=Date.now(),e.scrollParents(document.elementFromPoint(n,o.y)).reverse().some(r=>{let{scrollTop:a,scrollHeight:h}=r;const{top:f,bottom:p,height:m}=e.offsetViewport(r);if(f<t&&f+35>t)a-=c;else if(p>t&&p-35<t)a+=c;else return;if(a>0&&a<h-m)return r.scrollTop=a,!0})},15)}function W(){clearInterval(V)}function G(o,s){let n;if(e.isTag(s,"li","tr")){n=e.$("<div>"),e.append(n,s.cloneNode(!0).children);for(const t of s.getAttributeNames())e.attr(n,t,s.getAttribute(t))}else n=s.cloneNode(!0);return e.append(o,n),e.css(n,"margin","0","important"),e.css(n,{boxSizing:"border-box",width:s.offsetWidth,height:s.offsetHeight,padding:e.css(s,"padding")}),e.height(n.firstElementChild,e.height(s.firstElementChild)),n}function J(o,s){return o[e.findIndex(o,n=>e.pointInRect(s,e.dimensions(n)))]}function K(o,s,n,t,c){if(!e.children(o).length)return;const r=e.dimensions(s);if(!c)return Q(o,n)||t.y<r.top+r.height/2?s:s.nextElementSibling;const a=e.dimensions(n),h=q([r.top,r.bottom],[a.top,a.bottom]),[f,p,m,l]=h?[t.x,"width","left","right"]:[t.y,"height","top","bottom"],i=a[p]<r[p]?r[p]-a[p]:0;return a[m]<r[m]?i&&f<r[m]+i?!1:s.nextElementSibling:i&&f>r[l]-i?!1:s}function Q(o,s){const n=e.children(o).length===1;n&&e.append(o,s);const t=e.children(o),c=t.some((r,a)=>{const h=e.dimensions(r);return t.slice(a+1).some(f=>{const p=e.dimensions(f);return!q([h.left,h.right],[p.left,p.right])})});return n&&e.remove(s),c}function q(o,s){return o[1]>s[0]&&s[1]>o[0]}function X(o){let s;return function(...n){s||(s=!0,o.call(this,...n),requestAnimationFrame(()=>s=!1))}}var Y="sortable";return typeof window<"u"&&window.UIkit&&window.UIkit.component(Y,N),N}));