@vueuse/integrations 11.2.0 → 11.3.0

package/index.cjs

@@ -633,7 +633,7 @@ function useSortable(el, list, options = {}) {
   const { document = core.defaultDocument, ...resetOptions } = options;
   const defaultOptions = {
     onUpdate: (e) => {
-      moveArrayElement(list, e.oldIndex, e.newIndex);
+      moveArrayElement(list, e.oldIndex, e.newIndex, e);
     }
   };
   const start = () => {
@@ -660,7 +660,19 @@ function useSortable(el, list, options = {}) {
     option
   };
 }
-function moveArrayElement(list, from, to) {
+function insertNodeAt(parentElement, element, index) {
+  const refElement = parentElement.children[index];
+  parentElement.insertBefore(element, refElement);
+}
+function removeNode(node) {
+  if (node.parentNode)
+    node.parentNode.removeChild(node);
+}
+function moveArrayElement(list, from, to, e = null) {
+  if (e != null) {
+    removeNode(e.item);
+    insertNodeAt(e.from, e.item, from);
+  }
   const _valueIsRef = vueDemi.isRef(list);
   const array = _valueIsRef ? [...core.toValue(list)] : core.toValue(list);
   if (to >= 0 && to < array.length) {
@@ -674,7 +686,9 @@ function moveArrayElement(list, from, to) {
 }
 
 exports.createCookies = createCookies;
+exports.insertNodeAt = insertNodeAt;
 exports.moveArrayElement = moveArrayElement;
+exports.removeNode = removeNode;
 exports.useAsyncValidator = useAsyncValidator;
 exports.useAxios = useAxios;
 exports.useChangeCase = useChangeCase;

package/index.d.cts

@@ -422,6 +422,20 @@ interface UseSortableReturn {
 type UseSortableOptions = Options$3 & ConfigurableDocument;
 declare function useSortable<T>(selector: string, list: MaybeRefOrGetter$1<T[]>, options?: UseSortableOptions): UseSortableReturn;
 declare function useSortable<T>(el: MaybeRefOrGetter$1<HTMLElement | null | undefined>, list: MaybeRefOrGetter$1<T[]>, options?: UseSortableOptions): UseSortableReturn;
-declare function moveArrayElement<T>(list: MaybeRefOrGetter$1<T[]>, from: number, to: number): void;
+/**
+ * Inserts a element into the DOM at a given index.
+ * @param parentElement
+ * @param element
+ * @param {number} index
+ * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L81C1-L94C2
+ */
+declare function insertNodeAt(parentElement: Element, element: Element, index: number): void;
+/**
+ * Removes a node from the DOM.
+ * @param {Node} node
+ * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L96C1-L102C2
+ */
+declare function removeNode(node: Node): void;
+declare function moveArrayElement<T>(list: MaybeRefOrGetter$1<T[]>, from: number, to: number, e?: Sortable.SortableEvent | null): void;
 
-export { type AsyncValidatorError, type ChangeCaseType, type EasyUseAxiosReturn, type FuseOptions, type StrictUseAxiosReturn, type UseAsyncValidatorExecuteReturn, type UseAsyncValidatorOptions, type UseAsyncValidatorReturn, type UseAxiosOptions, type UseAxiosReturn, type UseDrauuOptions, type UseDrauuReturn, type UseFocusTrapOptions, type UseFocusTrapReturn, type UseFuseOptions, type UseFuseReturn, type UseIDBKeyvalReturn, type UseIDBOptions, type UseJwtOptions, type UseJwtReturn, type UseNProgressOptions, type UseNProgressReturn, type UseSortableOptions, type UseSortableReturn, createCookies, moveArrayElement, useAsyncValidator, useAxios, useChangeCase, useCookies, useDrauu, useFocusTrap, useFuse, useIDBKeyval, useJwt, useNProgress, useQRCode, useSortable };
+export { type AsyncValidatorError, type ChangeCaseType, type EasyUseAxiosReturn, type FuseOptions, type StrictUseAxiosReturn, type UseAsyncValidatorExecuteReturn, type UseAsyncValidatorOptions, type UseAsyncValidatorReturn, type UseAxiosOptions, type UseAxiosReturn, type UseDrauuOptions, type UseDrauuReturn, type UseFocusTrapOptions, type UseFocusTrapReturn, type UseFuseOptions, type UseFuseReturn, type UseIDBKeyvalReturn, type UseIDBOptions, type UseJwtOptions, type UseJwtReturn, type UseNProgressOptions, type UseNProgressReturn, type UseSortableOptions, type UseSortableReturn, createCookies, insertNodeAt, moveArrayElement, removeNode, useAsyncValidator, useAxios, useChangeCase, useCookies, useDrauu, useFocusTrap, useFuse, useIDBKeyval, useJwt, useNProgress, useQRCode, useSortable };

package/index.d.mts

@@ -422,6 +422,20 @@ interface UseSortableReturn {
 type UseSortableOptions = Options$3 & ConfigurableDocument;
 declare function useSortable<T>(selector: string, list: MaybeRefOrGetter$1<T[]>, options?: UseSortableOptions): UseSortableReturn;
 declare function useSortable<T>(el: MaybeRefOrGetter$1<HTMLElement | null | undefined>, list: MaybeRefOrGetter$1<T[]>, options?: UseSortableOptions): UseSortableReturn;
-declare function moveArrayElement<T>(list: MaybeRefOrGetter$1<T[]>, from: number, to: number): void;
+/**
+ * Inserts a element into the DOM at a given index.
+ * @param parentElement
+ * @param element
+ * @param {number} index
+ * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L81C1-L94C2
+ */
+declare function insertNodeAt(parentElement: Element, element: Element, index: number): void;
+/**
+ * Removes a node from the DOM.
+ * @param {Node} node
+ * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L96C1-L102C2
+ */
+declare function removeNode(node: Node): void;
+declare function moveArrayElement<T>(list: MaybeRefOrGetter$1<T[]>, from: number, to: number, e?: Sortable.SortableEvent | null): void;
 
-export { type AsyncValidatorError, type ChangeCaseType, type EasyUseAxiosReturn, type FuseOptions, type StrictUseAxiosReturn, type UseAsyncValidatorExecuteReturn, type UseAsyncValidatorOptions, type UseAsyncValidatorReturn, type UseAxiosOptions, type UseAxiosReturn, type UseDrauuOptions, type UseDrauuReturn, type UseFocusTrapOptions, type UseFocusTrapReturn, type UseFuseOptions, type UseFuseReturn, type UseIDBKeyvalReturn, type UseIDBOptions, type UseJwtOptions, type UseJwtReturn, type UseNProgressOptions, type UseNProgressReturn, type UseSortableOptions, type UseSortableReturn, createCookies, moveArrayElement, useAsyncValidator, useAxios, useChangeCase, useCookies, useDrauu, useFocusTrap, useFuse, useIDBKeyval, useJwt, useNProgress, useQRCode, useSortable };
+export { type AsyncValidatorError, type ChangeCaseType, type EasyUseAxiosReturn, type FuseOptions, type StrictUseAxiosReturn, type UseAsyncValidatorExecuteReturn, type UseAsyncValidatorOptions, type UseAsyncValidatorReturn, type UseAxiosOptions, type UseAxiosReturn, type UseDrauuOptions, type UseDrauuReturn, type UseFocusTrapOptions, type UseFocusTrapReturn, type UseFuseOptions, type UseFuseReturn, type UseIDBKeyvalReturn, type UseIDBOptions, type UseJwtOptions, type UseJwtReturn, type UseNProgressOptions, type UseNProgressReturn, type UseSortableOptions, type UseSortableReturn, createCookies, insertNodeAt, moveArrayElement, removeNode, useAsyncValidator, useAxios, useChangeCase, useCookies, useDrauu, useFocusTrap, useFuse, useIDBKeyval, useJwt, useNProgress, useQRCode, useSortable };

package/index.d.ts

@@ -422,6 +422,20 @@ interface UseSortableReturn {
 type UseSortableOptions = Options$3 & ConfigurableDocument;
 declare function useSortable<T>(selector: string, list: MaybeRefOrGetter$1<T[]>, options?: UseSortableOptions): UseSortableReturn;
 declare function useSortable<T>(el: MaybeRefOrGetter$1<HTMLElement | null | undefined>, list: MaybeRefOrGetter$1<T[]>, options?: UseSortableOptions): UseSortableReturn;
-declare function moveArrayElement<T>(list: MaybeRefOrGetter$1<T[]>, from: number, to: number): void;
+/**
+ * Inserts a element into the DOM at a given index.
+ * @param parentElement
+ * @param element
+ * @param {number} index
+ * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L81C1-L94C2
+ */
+declare function insertNodeAt(parentElement: Element, element: Element, index: number): void;
+/**
+ * Removes a node from the DOM.
+ * @param {Node} node
+ * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L96C1-L102C2
+ */
+declare function removeNode(node: Node): void;
+declare function moveArrayElement<T>(list: MaybeRefOrGetter$1<T[]>, from: number, to: number, e?: Sortable.SortableEvent | null): void;
 
-export { type AsyncValidatorError, type ChangeCaseType, type EasyUseAxiosReturn, type FuseOptions, type StrictUseAxiosReturn, type UseAsyncValidatorExecuteReturn, type UseAsyncValidatorOptions, type UseAsyncValidatorReturn, type UseAxiosOptions, type UseAxiosReturn, type UseDrauuOptions, type UseDrauuReturn, type UseFocusTrapOptions, type UseFocusTrapReturn, type UseFuseOptions, type UseFuseReturn, type UseIDBKeyvalReturn, type UseIDBOptions, type UseJwtOptions, type UseJwtReturn, type UseNProgressOptions, type UseNProgressReturn, type UseSortableOptions, type UseSortableReturn, createCookies, moveArrayElement, useAsyncValidator, useAxios, useChangeCase, useCookies, useDrauu, useFocusTrap, useFuse, useIDBKeyval, useJwt, useNProgress, useQRCode, useSortable };
+export { type AsyncValidatorError, type ChangeCaseType, type EasyUseAxiosReturn, type FuseOptions, type StrictUseAxiosReturn, type UseAsyncValidatorExecuteReturn, type UseAsyncValidatorOptions, type UseAsyncValidatorReturn, type UseAxiosOptions, type UseAxiosReturn, type UseDrauuOptions, type UseDrauuReturn, type UseFocusTrapOptions, type UseFocusTrapReturn, type UseFuseOptions, type UseFuseReturn, type UseIDBKeyvalReturn, type UseIDBOptions, type UseJwtOptions, type UseJwtReturn, type UseNProgressOptions, type UseNProgressReturn, type UseSortableOptions, type UseSortableReturn, createCookies, insertNodeAt, moveArrayElement, removeNode, useAsyncValidator, useAxios, useChangeCase, useCookies, useDrauu, useFocusTrap, useFuse, useIDBKeyval, useJwt, useNProgress, useQRCode, useSortable };

package/index.iife.js

@@ -745,7 +745,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     const { document = core.defaultDocument, ...resetOptions } = options;
     const defaultOptions = {
       onUpdate: (e) => {
-        moveArrayElement(list, e.oldIndex, e.newIndex);
+        moveArrayElement(list, e.oldIndex, e.newIndex, e);
       }
     };
     const start = () => {
@@ -772,7 +772,19 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       option
     };
   }
-  function moveArrayElement(list, from, to) {
+  function insertNodeAt(parentElement, element, index) {
+    const refElement = parentElement.children[index];
+    parentElement.insertBefore(element, refElement);
+  }
+  function removeNode(node) {
+    if (node.parentNode)
+      node.parentNode.removeChild(node);
+  }
+  function moveArrayElement(list, from, to, e = null) {
+    if (e != null) {
+      removeNode(e.item);
+      insertNodeAt(e.from, e.item, from);
+    }
     const _valueIsRef = vueDemi.isRef(list);
     const array = _valueIsRef ? [...core.toValue(list)] : core.toValue(list);
     if (to >= 0 && to < array.length) {
@@ -786,7 +798,9 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   }
 
   exports.createCookies = createCookies;
+  exports.insertNodeAt = insertNodeAt;
   exports.moveArrayElement = moveArrayElement;
+  exports.removeNode = removeNode;
   exports.useAsyncValidator = useAsyncValidator;
   exports.useAxios = useAxios;
   exports.useChangeCase = useChangeCase;

package/index.iife.min.js

@@ -1 +1 @@
-var _VueDemiGlobal=typeof globalThis<"u"?globalThis:typeof global<"u"?global:typeof self<"u"?self:this,VueDemi=function(l,n,T){if(l.install)return l;if(!n)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),l;if(n.version.slice(0,4)==="2.7."){let g=function(_,h){var I,G={},W={config:n.config,use:n.use.bind(n),mixin:n.mixin.bind(n),component:n.component.bind(n),provide:function(O,j){return G[O]=j,this},directive:function(O,j){return j?(n.directive(O,j),W):n.directive(O)},mount:function(O,j){return I||(I=new n(Object.assign({propsData:h},_,{provide:Object.assign(G,_.provide)})),I.$mount(O,j),I)},unmount:function(){I&&(I.$destroy(),I=void 0)}};return W};var N=g;for(var o in n)l[o]=n[o];l.isVue2=!0,l.isVue3=!1,l.install=function(){},l.Vue=n,l.Vue2=n,l.version=n.version,l.warn=n.util.warn,l.hasInjectionContext=function(){return!!l.getCurrentInstance()},l.createApp=g}else if(n.version.slice(0,2)==="2.")if(T){for(var o in T)l[o]=T[o];l.isVue2=!0,l.isVue3=!1,l.install=function(){},l.Vue=n,l.Vue2=n,l.version=n.version,l.hasInjectionContext=function(){return!!l.getCurrentInstance()}}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(n.version.slice(0,2)==="3."){for(var o in n)l[o]=n[o];l.isVue2=!1,l.isVue3=!0,l.install=function(){},l.Vue=n,l.Vue2=void 0,l.version=n.version,l.set=function(g,_,h){return Array.isArray(g)?(g.length=Math.max(g.length,_),g.splice(_,1,h),h):(g[_]=h,h)},l.del=function(g,_){if(Array.isArray(g)){g.splice(_,1);return}delete g[_]}}else console.error("[vue-demi] Vue version "+n.version+" is unsupported.");return l}(_VueDemiGlobal.VueDemi=_VueDemiGlobal.VueDemi||(typeof VueDemi<"u"?VueDemi:{}),_VueDemiGlobal.Vue||(typeof Vue<"u"?Vue:void 0),_VueDemiGlobal.VueCompositionAPI||(typeof VueCompositionAPI<"u"?VueCompositionAPI:void 0));(function(l,n,T,o,N,g,_,h,I,G,W,O,j,R,Z,V){"use strict";function D(t){var r=Object.create(null);return t&&Object.keys(t).forEach(function(e){if(e!=="default"){var a=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(r,e,a.get?a:{enumerable:!0,get:function(){return t[e]}})}}),r.default=t,Object.freeze(r)}var ee=D(g);const te=T.default||T;function ne(t,r,e={}){const{validateOption:a={},immediate:u=!0,manual:i=!1}=e,c=n.toRef(t),f=o.shallowRef(null),s=o.ref(!0),p=o.ref(!u||i),w=o.computed(()=>{var d;return((d=f.value)==null?void 0:d.errors)||[]}),b=o.computed(()=>{var d;return((d=f.value)==null?void 0:d.fields)||{}}),y=o.computed(()=>new te(n.toValue(r))),A=async()=>{s.value=!1,p.value=!1;try{await y.value.validate(c.value,a),p.value=!0,f.value=null}catch(d){f.value=d}finally{s.value=!0}return{pass:p.value,errorInfo:f.value,errors:w.value,errorFields:b.value}};i||o.watch([c,y],()=>A(),{immediate:u,deep:!0});const E={isFinished:s,pass:p,errors:w,errorInfo:f,errorFields:b,execute:A};function S(){return new Promise((d,P)=>{n.until(s).toBe(!0).then(()=>d(E)).catch(F=>P(F))})}return{...E,then(d,P){return S().then(d,P)}}}function oe(...t){const r=typeof t[0]=="string"?t[0]:void 0,e=typeof r=="string"?1:0,a={immediate:!!e,shallow:!0,abortPrevious:!0};let u={},i=N,c=a;const f=C=>!!C?.request;t.length>0+e&&(f(t[0+e])?i=t[0+e]:u=t[0+e]),t.length>1+e&&f(t[1+e])&&(i=t[1+e]),(t.length===2+e&&!f(t[1+e])||t.length===3+e)&&(c=t[t.length-1]||a);const{initialData:s,shallow:p,onSuccess:w=n.noop,onError:b=n.noop,immediate:y,resetOnExecute:A=!1}=c,E=o.shallowRef(),S=(p?o.shallowRef:o.ref)(s),d=o.ref(!1),P=o.ref(!1),F=o.ref(!1),m=o.shallowRef();let U=new AbortController;const k=C=>{d.value||!P.value||(U.abort(C),U=new AbortController,F.value=!0,P.value=!1,d.value=!1)},v=C=>{P.value=C,d.value=!C},L=()=>{A&&(S.value=s)},q=()=>new Promise((C,B)=>{n.until(d).toBe(!0).then(()=>m.value?B(m.value):C(K))}),Q={then:(...C)=>q().then(...C),catch:(...C)=>q().catch(...C)};let $=0;const J=(C=r,B={})=>{m.value=void 0;const X=typeof C=="string"?C:r??B.url;if(X===void 0)return m.value=new N.AxiosError(N.AxiosError.ERR_INVALID_URL),d.value=!0,Q;L(),c.abortPrevious!==!1&&k(),v(!0),$+=1;const he=$;return F.value=!1,i(X,{...u,...typeof C=="object"?C:B,signal:U.signal}).then(H=>{if(F.value)return;E.value=H;const Y=H.data;S.value=Y,w(Y)}).catch(H=>{m.value=H,b(H)}).finally(()=>{var H;(H=c.onFinish)==null||H.call(c),he===$&&v(!1)}),Q};y&&r&&J();const K={response:E,data:S,error:m,isFinished:d,isLoading:P,cancel:k,isAborted:F,isCanceled:F,abort:k,execute:J};return{...K,...Q}}const x=Object.entries(ee).filter(([t,r])=>typeof r=="function"&&t.endsWith("Case")).reduce((t,[r,e])=>(t[r]=e,t),{});function ae(t,r,e){const a=o.computed(()=>{const i=n.toValue(r);if(!x[i])throw new Error(`Invalid change case type "${i}"`);return i});if(typeof t=="function")return o.computed(()=>x[a.value](n.toValue(t),n.toValue(e)));const u=o.ref(t);return o.computed({get(){return x[a.value](u.value,n.toValue(e))},set(i){u.value=i}})}function re(t){const r=new _(t?t.headers.cookie:null);return(e,{doNotParse:a=!1,autoUpdateDependencies:u=!1}={})=>z(e,{doNotParse:a,autoUpdateDependencies:u},r)}function z(t,{doNotParse:r=!1,autoUpdateDependencies:e=!1}={},a=new _){const u=e?[...t||[]]:t;let i=a.getAll({doNotParse:!0});const c=o.ref(0),f=()=>{const s=a.getAll({doNotParse:!0});le(u||null,s,i)&&c.value++,i=s};return a.addChangeListener(f),n.tryOnScopeDispose(()=>{a.removeChangeListener(f)}),{get:(...s)=>(e&&u&&!u.includes(s[0])&&u.push(s[0]),c.value,a.get(s[0],{doNotParse:r,...s[1]})),getAll:(...s)=>(c.value,a.getAll({doNotParse:r,...s[0]})),set:(...s)=>a.set(...s),remove:(...s)=>a.remove(...s),addChangeListener:(...s)=>a.addChangeListener(...s),removeChangeListener:(...s)=>a.removeChangeListener(...s)}}function le(t,r,e){if(!t)return!0;for(const a of t)if(r[a]!==e[a])return!0;return!1}function ue(t,r){const e=o.ref();let a=[];const u=h.createEventHook(),i=h.createEventHook(),c=h.createEventHook(),f=h.createEventHook(),s=h.createEventHook(),p=o.ref(!1),w=o.ref(!1),b=o.ref(!1),y=o.ref(!1),A=o.ref({color:"black",size:3,arrowEnd:!1,cornerRadius:0,dasharray:void 0,fill:"transparent",mode:"draw",...r?.brush});o.watch(A,()=>{const v=e.value;v&&(v.brush=A.value,v.mode=A.value.mode)},{deep:!0});const E=()=>{var v;return(v=e.value)==null?void 0:v.undo()},S=()=>{var v;return(v=e.value)==null?void 0:v.redo()},d=()=>{var v;return(v=e.value)==null?void 0:v.clear()},P=()=>{var v;return(v=e.value)==null?void 0:v.cancel()},F=v=>{var L;return(L=e.value)==null?void 0:L.load(v)},m=()=>{var v;return(v=e.value)==null?void 0:v.dump()},U=()=>{var v;a.forEach(L=>L()),(v=e.value)==null||v.unmount()},k=()=>{e.value&&(p.value=e.value.canUndo(),w.value=e.value.canRedo(),b.value=e.value.altPressed,y.value=e.value.shiftPressed)};return o.watch(()=>h.unrefElement(t),v=>{!v||typeof SVGSVGElement>"u"||!(v instanceof SVGSVGElement)||(e.value&&U(),e.value=I.createDrauu({el:v,...r}),k(),a=[e.value.on("canceled",()=>i.trigger()),e.value.on("committed",L=>c.trigger(L)),e.value.on("start",()=>f.trigger()),e.value.on("end",()=>s.trigger()),e.value.on("changed",()=>{k(),u.trigger()})])},{flush:"post"}),n.tryOnScopeDispose(()=>U()),{drauuInstance:e,load:F,dump:m,clear:d,cancel:P,undo:E,redo:S,canUndo:p,canRedo:w,brush:A,onChanged:u.on,onCommitted:c.on,onStart:f.on,onEnd:s.on,onCanceled:i.on}}function se(t,r={}){let e;const{immediate:a,...u}=r,i=o.ref(!1),c=o.ref(!1),f=y=>e&&e.activate(y),s=y=>e&&e.deactivate(y),p=()=>{e&&(e.pause(),c.value=!0)},w=()=>{e&&(e.unpause(),c.value=!1)},b=o.computed(()=>{const y=n.toValue(t);return(Array.isArray(y)?y:[y]).map(A=>{const E=n.toValue(A);return typeof E=="string"?E:h.unrefElement(E)}).filter(n.notNullish)});return o.watch(b,y=>{y.length&&(e=G.createFocusTrap(y,{...u,onActivate(){i.value=!0,r.onActivate&&r.onActivate()},onDeactivate(){i.value=!1,r.onDeactivate&&r.onDeactivate()}}),a&&f())},{flush:"post"}),h.tryOnScopeDispose(()=>s()),{hasFocus:i,isPaused:c,activate:f,deactivate:s,pause:p,unpause:w}}function ce(t,r,e){const a=()=>{var c,f;return new W((c=n.toValue(r))!=null?c:[],(f=n.toValue(e))==null?void 0:f.fuseOptions)},u=o.ref(a());o.watch(()=>{var c;return(c=n.toValue(e))==null?void 0:c.fuseOptions},()=>{u.value=a()},{deep:!0}),o.watch(()=>n.toValue(r),c=>{u.value.setCollection(c)},{deep:!0});const i=o.computed(()=>{const c=n.toValue(e);if(c?.matchAllWhenSearchEmpty&&!n.toValue(t))return n.toValue(r).map((s,p)=>({item:s,refIndex:p}));const f=c?.resultLimit;return u.value.search(n.toValue(t),f?{limit:f}:void 0)});return{fuse:u,results:i}}function ie(t,r,e={}){const{flush:a="pre",deep:u=!0,shallow:i=!1,onError:c=d=>{console.error(d)},writeDefaults:f=!0}=e,s=o.ref(!1),p=(i?o.shallowRef:o.ref)(r),w=n.toValue(r);async function b(){try{const d=await O.get(t);d===void 0?w!=null&&f&&await O.set(t,w):p.value=d}catch(d){c(d)}s.value=!0}b();async function y(){try{p.value==null?await O.del(t):await O.update(t,()=>o.toRaw(p.value))}catch(d){c(d)}}const{pause:A,resume:E}=h.watchPausable(p,()=>y(),{flush:a,deep:u});async function S(d){A(),p.value=d,await y(),E()}return{set:S,isFinished:s,data:p}}function fe(t,r={}){const{onError:e,fallbackValue:a=null}=r,u=(f,s)=>{try{return j.jwtDecode(f,s)}catch(p){return e?.(p),a}},i=o.computed(()=>u(n.toValue(t),{header:!0})),c=o.computed(()=>u(n.toValue(t)));return{header:i,payload:c}}function de(t=null,r){const e=o.ref(t),a=o.computed({set:i=>i?R.start():R.done(),get:()=>typeof e.value=="number"&&e.value<1});r&&R.configure(r);const u=R.set;return R.set=i=>(e.value=i,u.call(R,i)),o.watchEffect(()=>{typeof e.value=="number"&&n.isClient&&u.call(R,e.value)}),n.tryOnScopeDispose(R.remove),{isLoading:a,progress:e,start:R.start,done:R.done,remove:()=>{e.value=null,R.remove()}}}function ve(t,r){const e=n.toRef(t),a=o.ref("");return o.watch(e,async u=>{e.value&&n.isClient&&(a.value=await Z.toDataURL(u,r))},{immediate:!0}),a}function pe(t,r,e={}){let a;const{document:u=h.defaultDocument,...i}=e,c={onUpdate:w=>{M(r,w.oldIndex,w.newIndex)}},f=()=>{const w=typeof t=="string"?u?.querySelector(t):h.unrefElement(t);!w||a!==void 0||(a=new V(w,{...c,...i}))},s=()=>{a?.destroy(),a=void 0},p=(w,b)=>{if(b!==void 0)a?.option(w,b);else return a?.option(w)};return h.tryOnMounted(f),h.tryOnScopeDispose(s),{stop:s,start:f,option:p}}function M(t,r,e){const a=o.isRef(t),u=a?[...h.toValue(t)]:h.toValue(t);if(e>=0&&e<u.length){const i=u.splice(r,1)[0];o.nextTick(()=>{u.splice(e,0,i),a&&(t.value=u)})}}l.createCookies=re,l.moveArrayElement=M,l.useAsyncValidator=ne,l.useAxios=oe,l.useChangeCase=ae,l.useCookies=z,l.useDrauu=ue,l.useFocusTrap=se,l.useFuse=ce,l.useIDBKeyval=ie,l.useJwt=fe,l.useNProgress=de,l.useQRCode=ve,l.useSortable=pe})(this.VueUse=this.VueUse||{},VueUse,AsyncValidator,VueDemi,axios,changeCase,UniversalCookie,VueUse,Drauu,focusTrap,Fuse,idbKeyval,jwt_decode,nprogress,QRCode,Sortable);
+var _VueDemiGlobal=typeof globalThis<"u"?globalThis:typeof global<"u"?global:typeof self<"u"?self:this,VueDemi=function(l,o,H){if(l.install)return l;if(!o)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),l;if(o.version.slice(0,4)==="2.7."){let g=function(_,w){var I,B={},G={config:o.config,use:o.use.bind(o),mixin:o.mixin.bind(o),component:o.component.bind(o),provide:function(O,F){return B[O]=F,this},directive:function(O,F){return F?(o.directive(O,F),G):o.directive(O)},mount:function(O,F){return I||(I=new o(Object.assign({propsData:w},_,{provide:Object.assign(B,_.provide)})),I.$mount(O,F),I)},unmount:function(){I&&(I.$destroy(),I=void 0)}};return G};var k=g;for(var r in o)l[r]=o[r];l.isVue2=!0,l.isVue3=!1,l.install=function(){},l.Vue=o,l.Vue2=o,l.version=o.version,l.warn=o.util.warn,l.hasInjectionContext=function(){return!!l.getCurrentInstance()},l.createApp=g}else if(o.version.slice(0,2)==="2.")if(H){for(var r in H)l[r]=H[r];l.isVue2=!0,l.isVue3=!1,l.install=function(){},l.Vue=o,l.Vue2=o,l.version=o.version,l.hasInjectionContext=function(){return!!l.getCurrentInstance()}}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(o.version.slice(0,2)==="3."){for(var r in o)l[r]=o[r];l.isVue2=!1,l.isVue3=!0,l.install=function(){},l.Vue=o,l.Vue2=void 0,l.version=o.version,l.set=function(g,_,w){return Array.isArray(g)?(g.length=Math.max(g.length,_),g.splice(_,1,w),w):(g[_]=w,w)},l.del=function(g,_){if(Array.isArray(g)){g.splice(_,1);return}delete g[_]}}else console.error("[vue-demi] Vue version "+o.version+" is unsupported.");return l}(_VueDemiGlobal.VueDemi=_VueDemiGlobal.VueDemi||(typeof VueDemi<"u"?VueDemi:{}),_VueDemiGlobal.Vue||(typeof Vue<"u"?Vue:void 0),_VueDemiGlobal.VueCompositionAPI||(typeof VueCompositionAPI<"u"?VueCompositionAPI:void 0));(function(l,o,H,r,k,g,_,w,I,B,G,O,F,R,D,ee){"use strict";function te(t){var a=Object.create(null);return t&&Object.keys(t).forEach(function(e){if(e!=="default"){var n=Object.getOwnPropertyDescriptor(t,e);Object.defineProperty(a,e,n.get?n:{enumerable:!0,get:function(){return t[e]}})}}),a.default=t,Object.freeze(a)}var ne=te(g);const oe=H.default||H;function re(t,a,e={}){const{validateOption:n={},immediate:u=!0,manual:i=!1}=e,s=o.toRef(t),f=r.shallowRef(null),c=r.ref(!0),p=r.ref(!u||i),h=r.computed(()=>{var d;return((d=f.value)==null?void 0:d.errors)||[]}),b=r.computed(()=>{var d;return((d=f.value)==null?void 0:d.fields)||{}}),y=r.computed(()=>new oe(o.toValue(a))),A=async()=>{c.value=!1,p.value=!1;try{await y.value.validate(s.value,n),p.value=!0,f.value=null}catch(d){f.value=d}finally{c.value=!0}return{pass:p.value,errorInfo:f.value,errors:h.value,errorFields:b.value}};i||r.watch([s,y],()=>A(),{immediate:u,deep:!0});const E={isFinished:c,pass:p,errors:h,errorInfo:f,errorFields:b,execute:A};function S(){return new Promise((d,P)=>{o.until(c).toBe(!0).then(()=>d(E)).catch(m=>P(m))})}return{...E,then(d,P){return S().then(d,P)}}}function ae(...t){const a=typeof t[0]=="string"?t[0]:void 0,e=typeof a=="string"?1:0,n={immediate:!!e,shallow:!0,abortPrevious:!0};let u={},i=k,s=n;const f=C=>!!C?.request;t.length>0+e&&(f(t[0+e])?i=t[0+e]:u=t[0+e]),t.length>1+e&&f(t[1+e])&&(i=t[1+e]),(t.length===2+e&&!f(t[1+e])||t.length===3+e)&&(s=t[t.length-1]||n);const{initialData:c,shallow:p,onSuccess:h=o.noop,onError:b=o.noop,immediate:y,resetOnExecute:A=!1}=s,E=r.shallowRef(),S=(p?r.shallowRef:r.ref)(c),d=r.ref(!1),P=r.ref(!1),m=r.ref(!1),j=r.shallowRef();let T=new AbortController;const U=C=>{d.value||!P.value||(T.abort(C),T=new AbortController,m.value=!0,P.value=!1,d.value=!1)},v=C=>{P.value=C,d.value=!C},L=()=>{A&&(S.value=c)},K=()=>new Promise((C,W)=>{o.until(d).toBe(!0).then(()=>j.value?W(j.value):C(Y))}),$={then:(...C)=>K().then(...C),catch:(...C)=>K().catch(...C)};let z=0;const X=(C=a,W={})=>{j.value=void 0;const Z=typeof C=="string"?C:a??W.url;if(Z===void 0)return j.value=new k.AxiosError(k.AxiosError.ERR_INVALID_URL),d.value=!0,$;L(),s.abortPrevious!==!1&&U(),v(!0),z+=1;const ye=z;return m.value=!1,i(Z,{...u,...typeof C=="object"?C:W,signal:T.signal}).then(N=>{if(m.value)return;E.value=N;const V=N.data;S.value=V,h(V)}).catch(N=>{j.value=N,b(N)}).finally(()=>{var N;(N=s.onFinish)==null||N.call(s),ye===z&&v(!1)}),$};y&&a&&X();const Y={response:E,data:S,error:j,isFinished:d,isLoading:P,cancel:U,isAborted:m,isCanceled:m,abort:U,execute:X};return{...Y,...$}}const Q=Object.entries(ne).filter(([t,a])=>typeof a=="function"&&t.endsWith("Case")).reduce((t,[a,e])=>(t[a]=e,t),{});function le(t,a,e){const n=r.computed(()=>{const i=o.toValue(a);if(!Q[i])throw new Error(`Invalid change case type "${i}"`);return i});if(typeof t=="function")return r.computed(()=>Q[n.value](o.toValue(t),o.toValue(e)));const u=r.ref(t);return r.computed({get(){return Q[n.value](u.value,o.toValue(e))},set(i){u.value=i}})}function ue(t){const a=new _(t?t.headers.cookie:null);return(e,{doNotParse:n=!1,autoUpdateDependencies:u=!1}={})=>M(e,{doNotParse:n,autoUpdateDependencies:u},a)}function M(t,{doNotParse:a=!1,autoUpdateDependencies:e=!1}={},n=new _){const u=e?[...t||[]]:t;let i=n.getAll({doNotParse:!0});const s=r.ref(0),f=()=>{const c=n.getAll({doNotParse:!0});se(u||null,c,i)&&s.value++,i=c};return n.addChangeListener(f),o.tryOnScopeDispose(()=>{n.removeChangeListener(f)}),{get:(...c)=>(e&&u&&!u.includes(c[0])&&u.push(c[0]),s.value,n.get(c[0],{doNotParse:a,...c[1]})),getAll:(...c)=>(s.value,n.getAll({doNotParse:a,...c[0]})),set:(...c)=>n.set(...c),remove:(...c)=>n.remove(...c),addChangeListener:(...c)=>n.addChangeListener(...c),removeChangeListener:(...c)=>n.removeChangeListener(...c)}}function se(t,a,e){if(!t)return!0;for(const n of t)if(a[n]!==e[n])return!0;return!1}function ce(t,a){const e=r.ref();let n=[];const u=w.createEventHook(),i=w.createEventHook(),s=w.createEventHook(),f=w.createEventHook(),c=w.createEventHook(),p=r.ref(!1),h=r.ref(!1),b=r.ref(!1),y=r.ref(!1),A=r.ref({color:"black",size:3,arrowEnd:!1,cornerRadius:0,dasharray:void 0,fill:"transparent",mode:"draw",...a?.brush});r.watch(A,()=>{const v=e.value;v&&(v.brush=A.value,v.mode=A.value.mode)},{deep:!0});const E=()=>{var v;return(v=e.value)==null?void 0:v.undo()},S=()=>{var v;return(v=e.value)==null?void 0:v.redo()},d=()=>{var v;return(v=e.value)==null?void 0:v.clear()},P=()=>{var v;return(v=e.value)==null?void 0:v.cancel()},m=v=>{var L;return(L=e.value)==null?void 0:L.load(v)},j=()=>{var v;return(v=e.value)==null?void 0:v.dump()},T=()=>{var v;n.forEach(L=>L()),(v=e.value)==null||v.unmount()},U=()=>{e.value&&(p.value=e.value.canUndo(),h.value=e.value.canRedo(),b.value=e.value.altPressed,y.value=e.value.shiftPressed)};return r.watch(()=>w.unrefElement(t),v=>{!v||typeof SVGSVGElement>"u"||!(v instanceof SVGSVGElement)||(e.value&&T(),e.value=I.createDrauu({el:v,...a}),U(),n=[e.value.on("canceled",()=>i.trigger()),e.value.on("committed",L=>s.trigger(L)),e.value.on("start",()=>f.trigger()),e.value.on("end",()=>c.trigger()),e.value.on("changed",()=>{U(),u.trigger()})])},{flush:"post"}),o.tryOnScopeDispose(()=>T()),{drauuInstance:e,load:m,dump:j,clear:d,cancel:P,undo:E,redo:S,canUndo:p,canRedo:h,brush:A,onChanged:u.on,onCommitted:s.on,onStart:f.on,onEnd:c.on,onCanceled:i.on}}function ie(t,a={}){let e;const{immediate:n,...u}=a,i=r.ref(!1),s=r.ref(!1),f=y=>e&&e.activate(y),c=y=>e&&e.deactivate(y),p=()=>{e&&(e.pause(),s.value=!0)},h=()=>{e&&(e.unpause(),s.value=!1)},b=r.computed(()=>{const y=o.toValue(t);return(Array.isArray(y)?y:[y]).map(A=>{const E=o.toValue(A);return typeof E=="string"?E:w.unrefElement(E)}).filter(o.notNullish)});return r.watch(b,y=>{y.length&&(e=B.createFocusTrap(y,{...u,onActivate(){i.value=!0,a.onActivate&&a.onActivate()},onDeactivate(){i.value=!1,a.onDeactivate&&a.onDeactivate()}}),n&&f())},{flush:"post"}),w.tryOnScopeDispose(()=>c()),{hasFocus:i,isPaused:s,activate:f,deactivate:c,pause:p,unpause:h}}function fe(t,a,e){const n=()=>{var s,f;return new G((s=o.toValue(a))!=null?s:[],(f=o.toValue(e))==null?void 0:f.fuseOptions)},u=r.ref(n());r.watch(()=>{var s;return(s=o.toValue(e))==null?void 0:s.fuseOptions},()=>{u.value=n()},{deep:!0}),r.watch(()=>o.toValue(a),s=>{u.value.setCollection(s)},{deep:!0});const i=r.computed(()=>{const s=o.toValue(e);if(s?.matchAllWhenSearchEmpty&&!o.toValue(t))return o.toValue(a).map((c,p)=>({item:c,refIndex:p}));const f=s?.resultLimit;return u.value.search(o.toValue(t),f?{limit:f}:void 0)});return{fuse:u,results:i}}function de(t,a,e={}){const{flush:n="pre",deep:u=!0,shallow:i=!1,onError:s=d=>{console.error(d)},writeDefaults:f=!0}=e,c=r.ref(!1),p=(i?r.shallowRef:r.ref)(a),h=o.toValue(a);async function b(){try{const d=await O.get(t);d===void 0?h!=null&&f&&await O.set(t,h):p.value=d}catch(d){s(d)}c.value=!0}b();async function y(){try{p.value==null?await O.del(t):await O.update(t,()=>r.toRaw(p.value))}catch(d){s(d)}}const{pause:A,resume:E}=w.watchPausable(p,()=>y(),{flush:n,deep:u});async function S(d){A(),p.value=d,await y(),E()}return{set:S,isFinished:c,data:p}}function ve(t,a={}){const{onError:e,fallbackValue:n=null}=a,u=(f,c)=>{try{return F.jwtDecode(f,c)}catch(p){return e?.(p),n}},i=r.computed(()=>u(o.toValue(t),{header:!0})),s=r.computed(()=>u(o.toValue(t)));return{header:i,payload:s}}function pe(t=null,a){const e=r.ref(t),n=r.computed({set:i=>i?R.start():R.done(),get:()=>typeof e.value=="number"&&e.value<1});a&&R.configure(a);const u=R.set;return R.set=i=>(e.value=i,u.call(R,i)),r.watchEffect(()=>{typeof e.value=="number"&&o.isClient&&u.call(R,e.value)}),o.tryOnScopeDispose(R.remove),{isLoading:n,progress:e,start:R.start,done:R.done,remove:()=>{e.value=null,R.remove()}}}function he(t,a){const e=o.toRef(t),n=r.ref("");return r.watch(e,async u=>{e.value&&o.isClient&&(n.value=await D.toDataURL(u,a))},{immediate:!0}),n}function we(t,a,e={}){let n;const{document:u=w.defaultDocument,...i}=e,s={onUpdate:h=>{J(a,h.oldIndex,h.newIndex,h)}},f=()=>{const h=typeof t=="string"?u?.querySelector(t):w.unrefElement(t);!h||n!==void 0||(n=new ee(h,{...s,...i}))},c=()=>{n?.destroy(),n=void 0},p=(h,b)=>{if(b!==void 0)n?.option(h,b);else return n?.option(h)};return w.tryOnMounted(f),w.tryOnScopeDispose(c),{stop:c,start:f,option:p}}function q(t,a,e){const n=t.children[e];t.insertBefore(a,n)}function x(t){t.parentNode&&t.parentNode.removeChild(t)}function J(t,a,e,n=null){n!=null&&(x(n.item),q(n.from,n.item,a));const u=r.isRef(t),i=u?[...w.toValue(t)]:w.toValue(t);if(e>=0&&e<i.length){const s=i.splice(a,1)[0];r.nextTick(()=>{i.splice(e,0,s),u&&(t.value=i)})}}l.createCookies=ue,l.insertNodeAt=q,l.moveArrayElement=J,l.removeNode=x,l.useAsyncValidator=re,l.useAxios=ae,l.useChangeCase=le,l.useCookies=M,l.useDrauu=ce,l.useFocusTrap=ie,l.useFuse=fe,l.useIDBKeyval=de,l.useJwt=ve,l.useNProgress=pe,l.useQRCode=he,l.useSortable=we})(this.VueUse=this.VueUse||{},VueUse,AsyncValidator,VueDemi,axios,changeCase,UniversalCookie,VueUse,Drauu,focusTrap,Fuse,idbKeyval,jwt_decode,nprogress,QRCode,Sortable);

package/index.mjs

@@ -612,7 +612,7 @@ function useSortable(el, list, options = {}) {
   const { document = defaultDocument, ...resetOptions } = options;
   const defaultOptions = {
     onUpdate: (e) => {
-      moveArrayElement(list, e.oldIndex, e.newIndex);
+      moveArrayElement(list, e.oldIndex, e.newIndex, e);
     }
   };
   const start = () => {
@@ -639,7 +639,19 @@ function useSortable(el, list, options = {}) {
     option
   };
 }
-function moveArrayElement(list, from, to) {
+function insertNodeAt(parentElement, element, index) {
+  const refElement = parentElement.children[index];
+  parentElement.insertBefore(element, refElement);
+}
+function removeNode(node) {
+  if (node.parentNode)
+    node.parentNode.removeChild(node);
+}
+function moveArrayElement(list, from, to, e = null) {
+  if (e != null) {
+    removeNode(e.item);
+    insertNodeAt(e.from, e.item, from);
+  }
   const _valueIsRef = isRef(list);
   const array = _valueIsRef ? [...toValue$1(list)] : toValue$1(list);
   if (to >= 0 && to < array.length) {
@@ -652,4 +664,4 @@ function moveArrayElement(list, from, to) {
   }
 }
 
-export { createCookies, moveArrayElement, useAsyncValidator, useAxios, useChangeCase, useCookies, useDrauu, useFocusTrap, useFuse, useIDBKeyval, useJwt, useNProgress, useQRCode, useSortable };
+export { createCookies, insertNodeAt, moveArrayElement, removeNode, useAsyncValidator, useAxios, useChangeCase, useCookies, useDrauu, useFocusTrap, useFuse, useIDBKeyval, useJwt, useNProgress, useQRCode, useSortable };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vueuse/integrations",
-  "version": "11.2.0",
+  "version": "11.3.0",
   "description": "Integration wrappers for utility libraries",
   "author": "Anthony Fu <https://github.com/antfu>",
   "license": "MIT",
@@ -145,8 +145,8 @@
     }
   },
   "dependencies": {
-    "@vueuse/core": "11.2.0",
-    "@vueuse/shared": "11.2.0",
+    "@vueuse/core": "11.3.0",
+    "@vueuse/shared": "11.3.0",
     "vue-demi": ">=0.14.10"
   }
 }

package/useSortable/component.cjs

@@ -9,7 +9,7 @@ function useSortable(el, list, options = {}) {
   const { document = core.defaultDocument, ...resetOptions } = options;
   const defaultOptions = {
     onUpdate: (e) => {
-      moveArrayElement(list, e.oldIndex, e.newIndex);
+      moveArrayElement(list, e.oldIndex, e.newIndex, e);
     }
   };
   const start = () => {
@@ -36,7 +36,19 @@ function useSortable(el, list, options = {}) {
     option
   };
 }
-function moveArrayElement(list, from, to) {
+function insertNodeAt(parentElement, element, index) {
+  const refElement = parentElement.children[index];
+  parentElement.insertBefore(element, refElement);
+}
+function removeNode(node) {
+  if (node.parentNode)
+    node.parentNode.removeChild(node);
+}
+function moveArrayElement(list, from, to, e = null) {
+  if (e != null) {
+    removeNode(e.item);
+    insertNodeAt(e.from, e.item, from);
+  }
   const _valueIsRef = vueDemi.isRef(list);
   const array = _valueIsRef ? [...core.toValue(list)] : core.toValue(list);
   if (to >= 0 && to < array.length) {

package/useSortable/component.mjs

@@ -7,7 +7,7 @@ function useSortable(el, list, options = {}) {
   const { document = defaultDocument, ...resetOptions } = options;
   const defaultOptions = {
     onUpdate: (e) => {
-      moveArrayElement(list, e.oldIndex, e.newIndex);
+      moveArrayElement(list, e.oldIndex, e.newIndex, e);
     }
   };
   const start = () => {
@@ -34,7 +34,19 @@ function useSortable(el, list, options = {}) {
     option
   };
 }
-function moveArrayElement(list, from, to) {
+function insertNodeAt(parentElement, element, index) {
+  const refElement = parentElement.children[index];
+  parentElement.insertBefore(element, refElement);
+}
+function removeNode(node) {
+  if (node.parentNode)
+    node.parentNode.removeChild(node);
+}
+function moveArrayElement(list, from, to, e = null) {
+  if (e != null) {
+    removeNode(e.item);
+    insertNodeAt(e.from, e.item, from);
+  }
   const _valueIsRef = isRef(list);
   const array = _valueIsRef ? [...toValue(list)] : toValue(list);
   if (to >= 0 && to < array.length) {

package/useSortable.cjs

@@ -9,7 +9,7 @@ function useSortable(el, list, options = {}) {
   const { document = core.defaultDocument, ...resetOptions } = options;
   const defaultOptions = {
     onUpdate: (e) => {
-      moveArrayElement(list, e.oldIndex, e.newIndex);
+      moveArrayElement(list, e.oldIndex, e.newIndex, e);
     }
   };
   const start = () => {
@@ -36,7 +36,19 @@ function useSortable(el, list, options = {}) {
     option
   };
 }
-function moveArrayElement(list, from, to) {
+function insertNodeAt(parentElement, element, index) {
+  const refElement = parentElement.children[index];
+  parentElement.insertBefore(element, refElement);
+}
+function removeNode(node) {
+  if (node.parentNode)
+    node.parentNode.removeChild(node);
+}
+function moveArrayElement(list, from, to, e = null) {
+  if (e != null) {
+    removeNode(e.item);
+    insertNodeAt(e.from, e.item, from);
+  }
   const _valueIsRef = vueDemi.isRef(list);
   const array = _valueIsRef ? [...core.toValue(list)] : core.toValue(list);
   if (to >= 0 && to < array.length) {
@@ -49,5 +61,7 @@ function moveArrayElement(list, from, to) {
   }
 }
 
+exports.insertNodeAt = insertNodeAt;
 exports.moveArrayElement = moveArrayElement;
+exports.removeNode = removeNode;
 exports.useSortable = useSortable;

package/useSortable.d.cts

@@ -20,6 +20,20 @@ interface UseSortableReturn {
 type UseSortableOptions = Options & ConfigurableDocument;
 declare function useSortable<T>(selector: string, list: MaybeRefOrGetter<T[]>, options?: UseSortableOptions): UseSortableReturn;
 declare function useSortable<T>(el: MaybeRefOrGetter<HTMLElement | null | undefined>, list: MaybeRefOrGetter<T[]>, options?: UseSortableOptions): UseSortableReturn;
-declare function moveArrayElement<T>(list: MaybeRefOrGetter<T[]>, from: number, to: number): void;
+/**
+ * Inserts a element into the DOM at a given index.
+ * @param parentElement
+ * @param element
+ * @param {number} index
+ * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L81C1-L94C2
+ */
+declare function insertNodeAt(parentElement: Element, element: Element, index: number): void;
+/**
+ * Removes a node from the DOM.
+ * @param {Node} node
+ * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L96C1-L102C2
+ */
+declare function removeNode(node: Node): void;
+declare function moveArrayElement<T>(list: MaybeRefOrGetter<T[]>, from: number, to: number, e?: Sortable.SortableEvent | null): void;
 
-export { type UseSortableOptions, type UseSortableReturn, moveArrayElement, useSortable };
+export { type UseSortableOptions, type UseSortableReturn, insertNodeAt, moveArrayElement, removeNode, useSortable };

package/useSortable.d.mts

@@ -20,6 +20,20 @@ interface UseSortableReturn {
 type UseSortableOptions = Options & ConfigurableDocument;
 declare function useSortable<T>(selector: string, list: MaybeRefOrGetter<T[]>, options?: UseSortableOptions): UseSortableReturn;
 declare function useSortable<T>(el: MaybeRefOrGetter<HTMLElement | null | undefined>, list: MaybeRefOrGetter<T[]>, options?: UseSortableOptions): UseSortableReturn;
-declare function moveArrayElement<T>(list: MaybeRefOrGetter<T[]>, from: number, to: number): void;
+/**
+ * Inserts a element into the DOM at a given index.
+ * @param parentElement
+ * @param element
+ * @param {number} index
+ * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L81C1-L94C2
+ */
+declare function insertNodeAt(parentElement: Element, element: Element, index: number): void;
+/**
+ * Removes a node from the DOM.
+ * @param {Node} node
+ * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L96C1-L102C2
+ */
+declare function removeNode(node: Node): void;
+declare function moveArrayElement<T>(list: MaybeRefOrGetter<T[]>, from: number, to: number, e?: Sortable.SortableEvent | null): void;
 
-export { type UseSortableOptions, type UseSortableReturn, moveArrayElement, useSortable };
+export { type UseSortableOptions, type UseSortableReturn, insertNodeAt, moveArrayElement, removeNode, useSortable };

package/useSortable.d.ts

@@ -20,6 +20,20 @@ interface UseSortableReturn {
 type UseSortableOptions = Options & ConfigurableDocument;
 declare function useSortable<T>(selector: string, list: MaybeRefOrGetter<T[]>, options?: UseSortableOptions): UseSortableReturn;
 declare function useSortable<T>(el: MaybeRefOrGetter<HTMLElement | null | undefined>, list: MaybeRefOrGetter<T[]>, options?: UseSortableOptions): UseSortableReturn;
-declare function moveArrayElement<T>(list: MaybeRefOrGetter<T[]>, from: number, to: number): void;
+/**
+ * Inserts a element into the DOM at a given index.
+ * @param parentElement
+ * @param element
+ * @param {number} index
+ * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L81C1-L94C2
+ */
+declare function insertNodeAt(parentElement: Element, element: Element, index: number): void;
+/**
+ * Removes a node from the DOM.
+ * @param {Node} node
+ * @see https://github.com/Alfred-Skyblue/vue-draggable-plus/blob/a3829222095e1949bf2c9a20979d7b5930e66f14/src/utils/index.ts#L96C1-L102C2
+ */
+declare function removeNode(node: Node): void;
+declare function moveArrayElement<T>(list: MaybeRefOrGetter<T[]>, from: number, to: number, e?: Sortable.SortableEvent | null): void;
 
-export { type UseSortableOptions, type UseSortableReturn, moveArrayElement, useSortable };
+export { type UseSortableOptions, type UseSortableReturn, insertNodeAt, moveArrayElement, removeNode, useSortable };

package/useSortable.iife.js

@@ -133,7 +133,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     const { document = core.defaultDocument, ...resetOptions } = options;
     const defaultOptions = {
       onUpdate: (e) => {
-        moveArrayElement(list, e.oldIndex, e.newIndex);
+        moveArrayElement(list, e.oldIndex, e.newIndex, e);
       }
     };
     const start = () => {
@@ -160,7 +160,19 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
       option
     };
   }
-  function moveArrayElement(list, from, to) {
+  function insertNodeAt(parentElement, element, index) {
+    const refElement = parentElement.children[index];
+    parentElement.insertBefore(element, refElement);
+  }
+  function removeNode(node) {
+    if (node.parentNode)
+      node.parentNode.removeChild(node);
+  }
+  function moveArrayElement(list, from, to, e = null) {
+    if (e != null) {
+      removeNode(e.item);
+      insertNodeAt(e.from, e.item, from);
+    }
     const _valueIsRef = vueDemi.isRef(list);
     const array = _valueIsRef ? [...core.toValue(list)] : core.toValue(list);
     if (to >= 0 && to < array.length) {
@@ -173,7 +185,9 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     }
   }
 
+  exports.insertNodeAt = insertNodeAt;
   exports.moveArrayElement = moveArrayElement;
+  exports.removeNode = removeNode;
   exports.useSortable = useSortable;
 
 })(this.VueUse = this.VueUse || {}, VueUse, Sortable, VueDemi);

package/useSortable.iife.min.js

@@ -1 +1 @@
-var _VueDemiGlobal=typeof globalThis<"u"?globalThis:typeof global<"u"?global:typeof self<"u"?self:this,VueDemi=function(n,e,a){if(n.install)return n;if(!e)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),n;if(e.version.slice(0,4)==="2.7."){let t=function(o,f){var i,r={},l={config:e.config,use:e.use.bind(e),mixin:e.mixin.bind(e),component:e.component.bind(e),provide:function(d,c){return r[d]=c,this},directive:function(d,c){return c?(e.directive(d,c),l):e.directive(d)},mount:function(d,c){return i||(i=new e(Object.assign({propsData:f},o,{provide:Object.assign(r,o.provide)})),i.$mount(d,c),i)},unmount:function(){i&&(i.$destroy(),i=void 0)}};return l};var p=t;for(var s in e)n[s]=e[s];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=e,n.Vue2=e,n.version=e.version,n.warn=e.util.warn,n.hasInjectionContext=function(){return!!n.getCurrentInstance()},n.createApp=t}else if(e.version.slice(0,2)==="2.")if(a){for(var s in a)n[s]=a[s];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=e,n.Vue2=e,n.version=e.version,n.hasInjectionContext=function(){return!!n.getCurrentInstance()}}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(e.version.slice(0,2)==="3."){for(var s in e)n[s]=e[s];n.isVue2=!1,n.isVue3=!0,n.install=function(){},n.Vue=e,n.Vue2=void 0,n.version=e.version,n.set=function(t,o,f){return Array.isArray(t)?(t.length=Math.max(t.length,o),t.splice(o,1,f),f):(t[o]=f,f)},n.del=function(t,o){if(Array.isArray(t)){t.splice(o,1);return}delete t[o]}}else console.error("[vue-demi] Vue version "+e.version+" is unsupported.");return n}(_VueDemiGlobal.VueDemi=_VueDemiGlobal.VueDemi||(typeof VueDemi<"u"?VueDemi:{}),_VueDemiGlobal.Vue||(typeof Vue<"u"?Vue:void 0),_VueDemiGlobal.VueCompositionAPI||(typeof VueCompositionAPI<"u"?VueCompositionAPI:void 0));(function(n,e,a,s){"use strict";function p(o,f,i={}){let r;const{document:l=e.defaultDocument,...d}=i,c={onUpdate:u=>{t(f,u.oldIndex,u.newIndex)}},v=()=>{const u=typeof o=="string"?l?.querySelector(o):e.unrefElement(o);!u||r!==void 0||(r=new a(u,{...c,...d}))},b=()=>{r?.destroy(),r=void 0},h=(u,y)=>{if(y!==void 0)r?.option(u,y);else return r?.option(u)};return e.tryOnMounted(v),e.tryOnScopeDispose(b),{stop:b,start:v,option:h}}function t(o,f,i){const r=s.isRef(o),l=r?[...e.toValue(o)]:e.toValue(o);if(i>=0&&i<l.length){const d=l.splice(f,1)[0];s.nextTick(()=>{l.splice(i,0,d),r&&(o.value=l)})}}n.moveArrayElement=t,n.useSortable=p})(this.VueUse=this.VueUse||{},VueUse,Sortable,VueDemi);
+var _VueDemiGlobal=typeof globalThis<"u"?globalThis:typeof global<"u"?global:typeof self<"u"?self:this,VueDemi=function(n,e,v){if(n.install)return n;if(!e)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),n;if(e.version.slice(0,4)==="2.7."){let i=function(r,d){var o,c={},l={config:e.config,use:e.use.bind(e),mixin:e.mixin.bind(e),component:e.component.bind(e),provide:function(t,s){return c[t]=s,this},directive:function(t,s){return s?(e.directive(t,s),l):e.directive(t)},mount:function(t,s){return o||(o=new e(Object.assign({propsData:d},r,{provide:Object.assign(c,r.provide)})),o.$mount(t,s),o)},unmount:function(){o&&(o.$destroy(),o=void 0)}};return l};var b=i;for(var f in e)n[f]=e[f];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=e,n.Vue2=e,n.version=e.version,n.warn=e.util.warn,n.hasInjectionContext=function(){return!!n.getCurrentInstance()},n.createApp=i}else if(e.version.slice(0,2)==="2.")if(v){for(var f in v)n[f]=v[f];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=e,n.Vue2=e,n.version=e.version,n.hasInjectionContext=function(){return!!n.getCurrentInstance()}}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(e.version.slice(0,2)==="3."){for(var f in e)n[f]=e[f];n.isVue2=!1,n.isVue3=!0,n.install=function(){},n.Vue=e,n.Vue2=void 0,n.version=e.version,n.set=function(i,r,d){return Array.isArray(i)?(i.length=Math.max(i.length,r),i.splice(r,1,d),d):(i[r]=d,d)},n.del=function(i,r){if(Array.isArray(i)){i.splice(r,1);return}delete i[r]}}else console.error("[vue-demi] Vue version "+e.version+" is unsupported.");return n}(_VueDemiGlobal.VueDemi=_VueDemiGlobal.VueDemi||(typeof VueDemi<"u"?VueDemi:{}),_VueDemiGlobal.Vue||(typeof Vue<"u"?Vue:void 0),_VueDemiGlobal.VueCompositionAPI||(typeof VueCompositionAPI<"u"?VueCompositionAPI:void 0));(function(n,e,v,f){"use strict";function b(o,c,l={}){let t;const{document:s=e.defaultDocument,...a}=l,p={onUpdate:u=>{d(c,u.oldIndex,u.newIndex,u)}},y=()=>{const u=typeof o=="string"?s?.querySelector(o):e.unrefElement(o);!u||t!==void 0||(t=new v(u,{...p,...a}))},h=()=>{t?.destroy(),t=void 0},g=(u,A)=>{if(A!==void 0)t?.option(u,A);else return t?.option(u)};return e.tryOnMounted(y),e.tryOnScopeDispose(h),{stop:h,start:y,option:g}}function i(o,c,l){const t=o.children[l];o.insertBefore(c,t)}function r(o){o.parentNode&&o.parentNode.removeChild(o)}function d(o,c,l,t=null){t!=null&&(r(t.item),i(t.from,t.item,c));const s=f.isRef(o),a=s?[...e.toValue(o)]:e.toValue(o);if(l>=0&&l<a.length){const p=a.splice(c,1)[0];f.nextTick(()=>{a.splice(l,0,p),s&&(o.value=a)})}}n.insertNodeAt=i,n.moveArrayElement=d,n.removeNode=r,n.useSortable=b})(this.VueUse=this.VueUse||{},VueUse,Sortable,VueDemi);

package/useSortable.mjs

@@ -7,7 +7,7 @@ function useSortable(el, list, options = {}) {
   const { document = defaultDocument, ...resetOptions } = options;
   const defaultOptions = {
     onUpdate: (e) => {
-      moveArrayElement(list, e.oldIndex, e.newIndex);
+      moveArrayElement(list, e.oldIndex, e.newIndex, e);
     }
   };
   const start = () => {
@@ -34,7 +34,19 @@ function useSortable(el, list, options = {}) {
     option
   };
 }
-function moveArrayElement(list, from, to) {
+function insertNodeAt(parentElement, element, index) {
+  const refElement = parentElement.children[index];
+  parentElement.insertBefore(element, refElement);
+}
+function removeNode(node) {
+  if (node.parentNode)
+    node.parentNode.removeChild(node);
+}
+function moveArrayElement(list, from, to, e = null) {
+  if (e != null) {
+    removeNode(e.item);
+    insertNodeAt(e.from, e.item, from);
+  }
   const _valueIsRef = isRef(list);
   const array = _valueIsRef ? [...toValue(list)] : toValue(list);
   if (to >= 0 && to < array.length) {
@@ -47,4 +59,4 @@ function moveArrayElement(list, from, to) {
   }
 }
 
-export { moveArrayElement, useSortable };
+export { insertNodeAt, moveArrayElement, removeNode, useSortable };