@vueuse/integrations 10.0.0-beta.2 → 10.0.0-beta.4

package/useJwt.iife.min.js

@@ -1 +1 @@
-var VueDemi=function(n,r,d){if(n.install)return n;if(!r)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),n;if(r.version.slice(0,4)==="2.7."){let i=function(o,t){var s,l={},u={config:r.config,use:r.use.bind(r),mixin:r.mixin.bind(r),component:r.component.bind(r),provide:function(f,c){return l[f]=c,this},directive:function(f,c){return c?(r.directive(f,c),u):r.directive(f)},mount:function(f,c){return s||(s=new r(Object.assign({propsData:t},o,{provide:Object.assign(l,o.provide)})),s.$mount(f,c),s)},unmount:function(){s&&(s.$destroy(),s=void 0)}};return u};var a=i;for(var e in r)n[e]=r[e];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=r,n.Vue2=r,n.version=r.version,n.warn=r.util.warn,n.createApp=i}else if(r.version.slice(0,2)==="2.")if(d){for(var e in d)n[e]=d[e];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=r,n.Vue2=r,n.version=r.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(r.version.slice(0,2)==="3."){for(var e in r)n[e]=r[e];n.isVue2=!1,n.isVue3=!0,n.install=function(){},n.Vue=r,n.Vue2=void 0,n.version=r.version,n.set=function(i,o,t){return Array.isArray(i)?(i.length=Math.max(i.length,o),i.splice(o,1,t),t):(i[o]=t,t)},n.del=function(i,o){if(Array.isArray(i)){i.splice(o,1);return}delete i[o]}}else console.error("[vue-demi] Vue version "+r.version+" is unsupported.");return n}(this.VueDemi=this.VueDemi||(typeof VueDemi!="undefined"?VueDemi:{}),this.Vue||(typeof Vue!="undefined"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI!="undefined"?VueCompositionAPI:void 0));(function(n,r,d,e){"use strict";function a(i,o={}){const{onError:t,fallbackValue:s=null}=o,l=(c,v)=>{try{return e(c,v)}catch(p){return t==null||t(p),s}},u=r.computed(()=>l(d.resolveUnref(i),{header:!0})),f=r.computed(()=>l(d.resolveUnref(i)));return{header:u,payload:f}}n.useJwt=a})(this.VueUse=this.VueUse||{},VueDemi,VueUse,jwt_decode);
+var VueDemi=function(n,r,d){if(n.install)return n;if(!r)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),n;if(r.version.slice(0,4)==="2.7."){let i=function(o,t){var s,l={},u={config:r.config,use:r.use.bind(r),mixin:r.mixin.bind(r),component:r.component.bind(r),provide:function(f,c){return l[f]=c,this},directive:function(f,c){return c?(r.directive(f,c),u):r.directive(f)},mount:function(f,c){return s||(s=new r(Object.assign({propsData:t},o,{provide:Object.assign(l,o.provide)})),s.$mount(f,c),s)},unmount:function(){s&&(s.$destroy(),s=void 0)}};return u};var a=i;for(var e in r)n[e]=r[e];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=r,n.Vue2=r,n.version=r.version,n.warn=r.util.warn,n.createApp=i}else if(r.version.slice(0,2)==="2.")if(d){for(var e in d)n[e]=d[e];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=r,n.Vue2=r,n.version=r.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(r.version.slice(0,2)==="3."){for(var e in r)n[e]=r[e];n.isVue2=!1,n.isVue3=!0,n.install=function(){},n.Vue=r,n.Vue2=void 0,n.version=r.version,n.set=function(i,o,t){return Array.isArray(i)?(i.length=Math.max(i.length,o),i.splice(o,1,t),t):(i[o]=t,t)},n.del=function(i,o){if(Array.isArray(i)){i.splice(o,1);return}delete i[o]}}else console.error("[vue-demi] Vue version "+r.version+" is unsupported.");return n}(this.VueDemi=this.VueDemi||(typeof VueDemi<"u"?VueDemi:{}),this.Vue||(typeof Vue<"u"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI<"u"?VueCompositionAPI:void 0));(function(n,r,d,e){"use strict";function a(i,o={}){const{onError:t,fallbackValue:s=null}=o,l=(c,v)=>{try{return e(c,v)}catch(p){return t?.(p),s}},u=r.computed(()=>l(d.toValue(i),{header:!0})),f=r.computed(()=>l(d.toValue(i)));return{header:u,payload:f}}n.useJwt=a})(this.VueUse=this.VueUse||{},VueDemi,VueUse,jwt_decode);

package/useJwt.mjs

@@ -1,5 +1,5 @@
 import { computed } from 'vue-demi';
-import { resolveUnref } from '@vueuse/shared';
+import { toValue } from '@vueuse/shared';
 import jwt_decode from 'jwt-decode';
 
 function useJwt(encodedJwt, options = {}) {
@@ -15,8 +15,8 @@ function useJwt(encodedJwt, options = {}) {
       return fallbackValue;
     }
   };
-  const header = computed(() => decodeWithFallback(resolveUnref(encodedJwt), { header: true }));
-  const payload = computed(() => decodeWithFallback(resolveUnref(encodedJwt)));
+  const header = computed(() => decodeWithFallback(toValue(encodedJwt), { header: true }));
+  const payload = computed(() => decodeWithFallback(toValue(encodedJwt)));
   return {
     header,
     payload

package/useNProgress.d.ts

@@ -1,6 +1,6 @@
 import * as vue_demi from 'vue-demi';
 import nprogress, { NProgressOptions } from 'nprogress';
-import { MaybeComputedRef } from '@vueuse/shared';
+import { MaybeRefOrGetter } from '@vueuse/shared';
 
 type UseNProgressOptions = Partial<NProgressOptions>;
 /**
@@ -8,7 +8,7 @@ type UseNProgressOptions = Partial<NProgressOptions>;
  *
  * @see https://vueuse.org/useNProgress
  */
-declare function useNProgress(currentProgress?: MaybeComputedRef<number | null | undefined>, options?: UseNProgressOptions): {
+declare function useNProgress(currentProgress?: MaybeRefOrGetter<number | null | undefined>, options?: UseNProgressOptions): {
     isLoading: vue_demi.WritableComputedRef<boolean>;
     progress: vue_demi.Ref<number | (() => number | null | undefined) | null | undefined>;
     start: () => nprogress.NProgress;

package/useNProgress.iife.min.js

@@ -1 +1 @@
-var VueDemi=function(i,n,f){if(i.install)return i;if(!n)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),i;if(n.version.slice(0,4)==="2.7."){let e=function(o,r){var s,v={},c={config:n.config,use:n.use.bind(n),mixin:n.mixin.bind(n),component:n.component.bind(n),provide:function(l,u){return v[l]=u,this},directive:function(l,u){return u?(n.directive(l,u),c):n.directive(l)},mount:function(l,u){return s||(s=new n(Object.assign({propsData:r},o,{provide:Object.assign(v,o.provide)})),s.$mount(l,u),s)},unmount:function(){s&&(s.$destroy(),s=void 0)}};return c};var d=e;for(var t in n)i[t]=n[t];i.isVue2=!0,i.isVue3=!1,i.install=function(){},i.Vue=n,i.Vue2=n,i.version=n.version,i.warn=n.util.warn,i.createApp=e}else if(n.version.slice(0,2)==="2.")if(f){for(var t in f)i[t]=f[t];i.isVue2=!0,i.isVue3=!1,i.install=function(){},i.Vue=n,i.Vue2=n,i.version=n.version}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 t in n)i[t]=n[t];i.isVue2=!1,i.isVue3=!0,i.install=function(){},i.Vue=n,i.Vue2=void 0,i.version=n.version,i.set=function(e,o,r){return Array.isArray(e)?(e.length=Math.max(e.length,o),e.splice(o,1,r),r):(e[o]=r,r)},i.del=function(e,o){if(Array.isArray(e)){e.splice(o,1);return}delete e[o]}}else console.error("[vue-demi] Vue version "+n.version+" is unsupported.");return i}(this.VueDemi=this.VueDemi||(typeof VueDemi!="undefined"?VueDemi:{}),this.Vue||(typeof Vue!="undefined"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI!="undefined"?VueCompositionAPI:void 0));(function(i,n,f,t){"use strict";function d(e=null,o){const r=t.ref(e),s=t.computed({set:c=>c?n.start():n.done(),get:()=>f.isNumber(r.value)&&r.value<1});o&&n.configure(o);const v=n.set;return n.set=c=>(r.value=c,v.call(n,c)),t.watchEffect(()=>{f.isNumber(r.value)&&f.isClient&&v.call(n,r.value)}),f.tryOnScopeDispose(n.remove),{isLoading:s,progress:r,start:n.start,done:n.done,remove:()=>{r.value=null,n.remove()}}}i.useNProgress=d})(this.VueUse=this.VueUse||{},nprogress,VueUse,VueDemi);
+var VueDemi=function(i,n,f){if(i.install)return i;if(!n)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),i;if(n.version.slice(0,4)==="2.7."){let e=function(o,r){var s,v={},c={config:n.config,use:n.use.bind(n),mixin:n.mixin.bind(n),component:n.component.bind(n),provide:function(l,u){return v[l]=u,this},directive:function(l,u){return u?(n.directive(l,u),c):n.directive(l)},mount:function(l,u){return s||(s=new n(Object.assign({propsData:r},o,{provide:Object.assign(v,o.provide)})),s.$mount(l,u),s)},unmount:function(){s&&(s.$destroy(),s=void 0)}};return c};var d=e;for(var t in n)i[t]=n[t];i.isVue2=!0,i.isVue3=!1,i.install=function(){},i.Vue=n,i.Vue2=n,i.version=n.version,i.warn=n.util.warn,i.createApp=e}else if(n.version.slice(0,2)==="2.")if(f){for(var t in f)i[t]=f[t];i.isVue2=!0,i.isVue3=!1,i.install=function(){},i.Vue=n,i.Vue2=n,i.version=n.version}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 t in n)i[t]=n[t];i.isVue2=!1,i.isVue3=!0,i.install=function(){},i.Vue=n,i.Vue2=void 0,i.version=n.version,i.set=function(e,o,r){return Array.isArray(e)?(e.length=Math.max(e.length,o),e.splice(o,1,r),r):(e[o]=r,r)},i.del=function(e,o){if(Array.isArray(e)){e.splice(o,1);return}delete e[o]}}else console.error("[vue-demi] Vue version "+n.version+" is unsupported.");return i}(this.VueDemi=this.VueDemi||(typeof VueDemi<"u"?VueDemi:{}),this.Vue||(typeof Vue<"u"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI<"u"?VueCompositionAPI:void 0));(function(i,n,f,t){"use strict";function d(e=null,o){const r=t.ref(e),s=t.computed({set:c=>c?n.start():n.done(),get:()=>f.isNumber(r.value)&&r.value<1});o&&n.configure(o);const v=n.set;return n.set=c=>(r.value=c,v.call(n,c)),t.watchEffect(()=>{f.isNumber(r.value)&&f.isClient&&v.call(n,r.value)}),f.tryOnScopeDispose(n.remove),{isLoading:s,progress:r,start:n.start,done:n.done,remove:()=>{r.value=null,n.remove()}}}i.useNProgress=d})(this.VueUse=this.VueUse||{},nprogress,VueUse,VueDemi);

package/useQRCode.cjs

@@ -5,12 +5,16 @@ var vueDemi = require('vue-demi');
 var QRCode = require('qrcode');
 
 function useQRCode(text, options) {
-  const src = shared.resolveRef(text);
+  const src = shared.toRef(text);
   const result = vueDemi.ref("");
-  vueDemi.watch(src, async (value) => {
-    if (src.value && shared.isClient)
-      result.value = await QRCode.toDataURL(value, options);
-  }, { immediate: true });
+  vueDemi.watch(
+    src,
+    async (value) => {
+      if (src.value && shared.isClient)
+        result.value = await QRCode.toDataURL(value, options);
+    },
+    { immediate: true }
+  );
   return result;
 }
 

package/useQRCode.d.ts

@@ -1,5 +1,5 @@
 import * as vue_demi from 'vue-demi';
-import { MaybeComputedRef } from '@vueuse/shared';
+import { MaybeRefOrGetter } from '@vueuse/shared';
 import QRCode from 'qrcode';
 
 /**
@@ -9,6 +9,6 @@ import QRCode from 'qrcode';
  * @param text
  * @param options
  */
-declare function useQRCode(text: MaybeComputedRef<string>, options?: QRCode.QRCodeToDataURLOptions): vue_demi.Ref<string>;
+declare function useQRCode(text: MaybeRefOrGetter<string>, options?: QRCode.QRCodeToDataURLOptions): vue_demi.Ref<string>;
 
 export { useQRCode };

package/useQRCode.iife.js

@@ -116,12 +116,16 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   'use strict';
 
   function useQRCode(text, options) {
-    const src = shared.resolveRef(text);
+    const src = shared.toRef(text);
     const result = vueDemi.ref("");
-    vueDemi.watch(src, async (value) => {
-      if (src.value && shared.isClient)
-        result.value = await QRCode.toDataURL(value, options);
-    }, { immediate: true });
+    vueDemi.watch(
+      src,
+      async (value) => {
+        if (src.value && shared.isClient)
+          result.value = await QRCode.toDataURL(value, options);
+      },
+      { immediate: true }
+    );
     return result;
   }
 

package/useQRCode.iife.min.js

@@ -1 +1 @@
-var VueDemi=function(n,i,f){if(n.install)return n;if(!i)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),n;if(i.version.slice(0,4)==="2.7."){let r=function(s,t){var o,l={},u={config:i.config,use:i.use.bind(i),mixin:i.mixin.bind(i),component:i.component.bind(i),provide:function(c,d){return l[c]=d,this},directive:function(c,d){return d?(i.directive(c,d),u):i.directive(c)},mount:function(c,d){return o||(o=new i(Object.assign({propsData:t},s,{provide:Object.assign(l,s.provide)})),o.$mount(c,d),o)},unmount:function(){o&&(o.$destroy(),o=void 0)}};return u};var v=r;for(var e in i)n[e]=i[e];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=i,n.Vue2=i,n.version=i.version,n.warn=i.util.warn,n.createApp=r}else if(i.version.slice(0,2)==="2.")if(f){for(var e in f)n[e]=f[e];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=i,n.Vue2=i,n.version=i.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(i.version.slice(0,2)==="3."){for(var e in i)n[e]=i[e];n.isVue2=!1,n.isVue3=!0,n.install=function(){},n.Vue=i,n.Vue2=void 0,n.version=i.version,n.set=function(r,s,t){return Array.isArray(r)?(r.length=Math.max(r.length,s),r.splice(s,1,t),t):(r[s]=t,t)},n.del=function(r,s){if(Array.isArray(r)){r.splice(s,1);return}delete r[s]}}else console.error("[vue-demi] Vue version "+i.version+" is unsupported.");return n}(this.VueDemi=this.VueDemi||(typeof VueDemi!="undefined"?VueDemi:{}),this.Vue||(typeof Vue!="undefined"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI!="undefined"?VueCompositionAPI:void 0));(function(n,i,f,e){"use strict";function v(r,s){const t=i.resolveRef(r),o=f.ref("");return f.watch(t,async l=>{t.value&&i.isClient&&(o.value=await e.toDataURL(l,s))},{immediate:!0}),o}n.useQRCode=v})(this.VueUse=this.VueUse||{},VueUse,VueDemi,QRCode);
+var VueDemi=function(n,i,f){if(n.install)return n;if(!i)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),n;if(i.version.slice(0,4)==="2.7."){let r=function(s,t){var o,l={},u={config:i.config,use:i.use.bind(i),mixin:i.mixin.bind(i),component:i.component.bind(i),provide:function(c,d){return l[c]=d,this},directive:function(c,d){return d?(i.directive(c,d),u):i.directive(c)},mount:function(c,d){return o||(o=new i(Object.assign({propsData:t},s,{provide:Object.assign(l,s.provide)})),o.$mount(c,d),o)},unmount:function(){o&&(o.$destroy(),o=void 0)}};return u};var a=r;for(var e in i)n[e]=i[e];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=i,n.Vue2=i,n.version=i.version,n.warn=i.util.warn,n.createApp=r}else if(i.version.slice(0,2)==="2.")if(f){for(var e in f)n[e]=f[e];n.isVue2=!0,n.isVue3=!1,n.install=function(){},n.Vue=i,n.Vue2=i,n.version=i.version}else console.error("[vue-demi] no VueCompositionAPI instance found, please be sure to import `@vue/composition-api` before `vue-demi`.");else if(i.version.slice(0,2)==="3."){for(var e in i)n[e]=i[e];n.isVue2=!1,n.isVue3=!0,n.install=function(){},n.Vue=i,n.Vue2=void 0,n.version=i.version,n.set=function(r,s,t){return Array.isArray(r)?(r.length=Math.max(r.length,s),r.splice(s,1,t),t):(r[s]=t,t)},n.del=function(r,s){if(Array.isArray(r)){r.splice(s,1);return}delete r[s]}}else console.error("[vue-demi] Vue version "+i.version+" is unsupported.");return n}(this.VueDemi=this.VueDemi||(typeof VueDemi<"u"?VueDemi:{}),this.Vue||(typeof Vue<"u"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI<"u"?VueCompositionAPI:void 0));(function(n,i,f,e){"use strict";function a(r,s){const t=i.toRef(r),o=f.ref("");return f.watch(t,async l=>{t.value&&i.isClient&&(o.value=await e.toDataURL(l,s))},{immediate:!0}),o}n.useQRCode=a})(this.VueUse=this.VueUse||{},VueUse,VueDemi,QRCode);

package/useQRCode.mjs

@@ -1,14 +1,18 @@
-import { resolveRef, isClient } from '@vueuse/shared';
+import { toRef, isClient } from '@vueuse/shared';
 import { ref, watch } from 'vue-demi';
 import QRCode from 'qrcode';
 
 function useQRCode(text, options) {
-  const src = resolveRef(text);
+  const src = toRef(text);
   const result = ref("");
-  watch(src, async (value) => {
-    if (src.value && isClient)
-      result.value = await QRCode.toDataURL(value, options);
-  }, { immediate: true });
+  watch(
+    src,
+    async (value) => {
+      if (src.value && isClient)
+        result.value = await QRCode.toDataURL(value, options);
+    },
+    { immediate: true }
+  );
   return result;
 }
 

package/useSortable/component.cjs

@@ -52,14 +52,17 @@ function useSortable(el, list, options = {}) {
   return { stop, start };
 }
 function moveArrayElement(list, from, to) {
-  const array = core.resolveUnref(list);
-  if (to >= 0 && to < array.length)
-    array.splice(to, 0, array.splice(from, 1)[0]);
+  const array = core.toValue(list);
+  if (to >= 0 && to < array.length) {
+    const element = array.splice(from, 1)[0];
+    vueDemi.nextTick(() => array.splice(to, 0, element));
+  }
 }
 
 const UseSortable = /* @__PURE__ */ /* #__PURE__ */ vueDemi.defineComponent({
   name: "UseSortable",
   model: {
+    // Compatible with vue2
     prop: "modelValue",
     event: "update:modelValue"
   },

package/useSortable/component.mjs

@@ -1,5 +1,5 @@
-import { defineComponent, ref, reactive, h } from 'vue-demi';
-import { tryOnMounted, tryOnScopeDispose, unrefElement, defaultDocument, resolveUnref, useVModel } from '@vueuse/core';
+import { nextTick, defineComponent, ref, reactive, h } from 'vue-demi';
+import { tryOnMounted, tryOnScopeDispose, unrefElement, defaultDocument, toValue, useVModel } from '@vueuse/core';
 import Sortable from 'sortablejs';
 
 var __defProp = Object.defineProperty;
@@ -50,14 +50,17 @@ function useSortable(el, list, options = {}) {
   return { stop, start };
 }
 function moveArrayElement(list, from, to) {
-  const array = resolveUnref(list);
-  if (to >= 0 && to < array.length)
-    array.splice(to, 0, array.splice(from, 1)[0]);
+  const array = toValue(list);
+  if (to >= 0 && to < array.length) {
+    const element = array.splice(from, 1)[0];
+    nextTick(() => array.splice(to, 0, element));
+  }
 }
 
 const UseSortable = /* @__PURE__ */ /* #__PURE__ */ defineComponent({
   name: "UseSortable",
   model: {
+    // Compatible with vue2
     prop: "modelValue",
     event: "update:modelValue"
   },

package/useSortable.cjs

@@ -2,6 +2,7 @@
 
 var core = require('@vueuse/core');
 var Sortable = require('sortablejs');
+var vueDemi = require('vue-demi');
 
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -51,9 +52,11 @@ function useSortable(el, list, options = {}) {
   return { stop, start };
 }
 function moveArrayElement(list, from, to) {
-  const array = core.resolveUnref(list);
-  if (to >= 0 && to < array.length)
-    array.splice(to, 0, array.splice(from, 1)[0]);
+  const array = core.toValue(list);
+  if (to >= 0 && to < array.length) {
+    const element = array.splice(from, 1)[0];
+    vueDemi.nextTick(() => array.splice(to, 0, element));
+  }
 }
 
 exports.moveArrayElement = moveArrayElement;

package/useSortable.d.ts

@@ -1,4 +1,4 @@
-import { ConfigurableDocument, MaybeComputedRef } from '@vueuse/core';
+import { ConfigurableDocument, MaybeRefOrGetter } from '@vueuse/core';
 import { Options } from 'sortablejs';
 
 interface UseSortableReturn {
@@ -12,8 +12,8 @@ interface UseSortableReturn {
     stop: () => void;
 }
 type UseSortableOptions = Options & ConfigurableDocument;
-declare function useSortable<T>(selector: string, list: MaybeComputedRef<T[]>, options?: UseSortableOptions): UseSortableReturn;
-declare function useSortable<T>(el: MaybeComputedRef<HTMLElement | null | undefined>, list: MaybeComputedRef<T[]>, options?: UseSortableOptions): UseSortableReturn;
-declare function moveArrayElement<T>(list: MaybeComputedRef<T[]>, from: number, to: number): void;
+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;
 
 export { UseSortableOptions, UseSortableReturn, moveArrayElement, useSortable };

package/useSortable.iife.js

@@ -112,7 +112,7 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
   this.VueCompositionAPI || (typeof VueCompositionAPI !== 'undefined' ? VueCompositionAPI : undefined)
 );
 ;
-;(function (exports, core, Sortable) {
+;(function (exports, core, Sortable, vueDemi) {
   'use strict';
 
   var __defProp = Object.defineProperty;
@@ -163,12 +163,14 @@ var VueDemi = (function (VueDemi, Vue, VueCompositionAPI) {
     return { stop, start };
   }
   function moveArrayElement(list, from, to) {
-    const array = core.resolveUnref(list);
-    if (to >= 0 && to < array.length)
-      array.splice(to, 0, array.splice(from, 1)[0]);
+    const array = core.toValue(list);
+    if (to >= 0 && to < array.length) {
+      const element = array.splice(from, 1)[0];
+      vueDemi.nextTick(() => array.splice(to, 0, element));
+    }
   }
 
   exports.moveArrayElement = moveArrayElement;
   exports.useSortable = useSortable;
 
-})(this.VueUse = this.VueUse || {}, VueUse, Sortable);
+})(this.VueUse = this.VueUse || {}, VueUse, Sortable, VueDemi);

package/useSortable.iife.min.js

@@ -1 +1 @@
-var VueDemi=function(r,n,v){if(r.install)return r;if(!n)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),r;if(n.version.slice(0,4)==="2.7."){let s=function(f,d){var l,y={},b={config:n.config,use:n.use.bind(n),mixin:n.mixin.bind(n),component:n.component.bind(n),provide:function(c,e){return y[c]=e,this},directive:function(c,e){return e?(n.directive(c,e),b):n.directive(c)},mount:function(c,e){return l||(l=new n(Object.assign({propsData:d},f,{provide:Object.assign(y,f.provide)})),l.$mount(c,e),l)},unmount:function(){l&&(l.$destroy(),l=void 0)}};return b};var u=s;for(var a in n)r[a]=n[a];r.isVue2=!0,r.isVue3=!1,r.install=function(){},r.Vue=n,r.Vue2=n,r.version=n.version,r.warn=n.util.warn,r.createApp=s}else if(n.version.slice(0,2)==="2.")if(v){for(var a in v)r[a]=v[a];r.isVue2=!0,r.isVue3=!1,r.install=function(){},r.Vue=n,r.Vue2=n,r.version=n.version}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 a in n)r[a]=n[a];r.isVue2=!1,r.isVue3=!0,r.install=function(){},r.Vue=n,r.Vue2=void 0,r.version=n.version,r.set=function(s,f,d){return Array.isArray(s)?(s.length=Math.max(s.length,f),s.splice(f,1,d),d):(s[f]=d,d)},r.del=function(s,f){if(Array.isArray(s)){s.splice(f,1);return}delete s[f]}}else console.error("[vue-demi] Vue version "+n.version+" is unsupported.");return r}(this.VueDemi=this.VueDemi||(typeof VueDemi!="undefined"?VueDemi:{}),this.Vue||(typeof Vue!="undefined"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI!="undefined"?VueCompositionAPI:void 0));(function(r,n,v){"use strict";var a=Object.defineProperty,u=Object.getOwnPropertySymbols,s=Object.prototype.hasOwnProperty,f=Object.prototype.propertyIsEnumerable,d=(e,i,t)=>i in e?a(e,i,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[i]=t,l=(e,i)=>{for(var t in i||(i={}))s.call(i,t)&&d(e,t,i[t]);if(u)for(var t of u(i))f.call(i,t)&&d(e,t,i[t]);return e},y=(e,i)=>{var t={};for(var o in e)s.call(e,o)&&i.indexOf(o)<0&&(t[o]=e[o]);if(e!=null&&u)for(var o of u(e))i.indexOf(o)<0&&f.call(e,o)&&(t[o]=e[o]);return t};function b(e,i,t={}){let o;const O=t,{document:_=n.defaultDocument}=O,A=y(O,["document"]),P={onUpdate:p=>{c(i,p.oldIndex,p.newIndex)}},h=()=>{const p=typeof e=="string"?_==null?void 0:_.querySelector(e):n.unrefElement(e);!p||(o=new v(p,l(l({},P),A)))},w=()=>o==null?void 0:o.destroy();return n.tryOnMounted(h),n.tryOnScopeDispose(w),{stop:w,start:h}}function c(e,i,t){const o=n.resolveUnref(e);t>=0&&t<o.length&&o.splice(t,0,o.splice(i,1)[0])}r.moveArrayElement=c,r.useSortable=b})(this.VueUse=this.VueUse||{},VueUse,Sortable);
+var VueDemi=function(r,n,v){if(r.install)return r;if(!n)return console.error("[vue-demi] no Vue instance found, please be sure to import `vue` before `vue-demi`."),r;if(n.version.slice(0,4)==="2.7."){let o=function(f,d){var l,p={},b={config:n.config,use:n.use.bind(n),mixin:n.mixin.bind(n),component:n.component.bind(n),provide:function(u,c){return p[u]=c,this},directive:function(u,c){return c?(n.directive(u,c),b):n.directive(u)},mount:function(u,c){return l||(l=new n(Object.assign({propsData:d},f,{provide:Object.assign(p,f.provide)})),l.$mount(u,c),l)},unmount:function(){l&&(l.$destroy(),l=void 0)}};return b};var A=o;for(var a in n)r[a]=n[a];r.isVue2=!0,r.isVue3=!1,r.install=function(){},r.Vue=n,r.Vue2=n,r.version=n.version,r.warn=n.util.warn,r.createApp=o}else if(n.version.slice(0,2)==="2.")if(v){for(var a in v)r[a]=v[a];r.isVue2=!0,r.isVue3=!1,r.install=function(){},r.Vue=n,r.Vue2=n,r.version=n.version}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 a in n)r[a]=n[a];r.isVue2=!1,r.isVue3=!0,r.install=function(){},r.Vue=n,r.Vue2=void 0,r.version=n.version,r.set=function(o,f,d){return Array.isArray(o)?(o.length=Math.max(o.length,f),o.splice(f,1,d),d):(o[f]=d,d)},r.del=function(o,f){if(Array.isArray(o)){o.splice(f,1);return}delete o[f]}}else console.error("[vue-demi] Vue version "+n.version+" is unsupported.");return r}(this.VueDemi=this.VueDemi||(typeof VueDemi<"u"?VueDemi:{}),this.Vue||(typeof Vue<"u"?Vue:void 0),this.VueCompositionAPI||(typeof VueCompositionAPI<"u"?VueCompositionAPI:void 0));(function(r,n,v,a){"use strict";var A=Object.defineProperty,o=Object.getOwnPropertySymbols,f=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable,l=(e,i,t)=>i in e?A(e,i,{enumerable:!0,configurable:!0,writable:!0,value:t}):e[i]=t,p=(e,i)=>{for(var t in i||(i={}))f.call(i,t)&&l(e,t,i[t]);if(o)for(var t of o(i))d.call(i,t)&&l(e,t,i[t]);return e},b=(e,i)=>{var t={};for(var s in e)f.call(e,s)&&i.indexOf(s)<0&&(t[s]=e[s]);if(e!=null&&o)for(var s of o(e))i.indexOf(s)<0&&d.call(e,s)&&(t[s]=e[s]);return t};function u(e,i,t={}){let s;const O=t,{document:_=n.defaultDocument}=O,P=b(O,["document"]),g={onUpdate:y=>{c(i,y.oldIndex,y.newIndex)}},h=()=>{const y=typeof e=="string"?_?.querySelector(e):n.unrefElement(e);y&&(s=new v(y,p(p({},g),P)))},w=()=>s?.destroy();return n.tryOnMounted(h),n.tryOnScopeDispose(w),{stop:w,start:h}}function c(e,i,t){const s=n.toValue(e);if(t>=0&&t<s.length){const O=s.splice(i,1)[0];a.nextTick(()=>s.splice(t,0,O))}}r.moveArrayElement=c,r.useSortable=u})(this.VueUse=this.VueUse||{},VueUse,Sortable,VueDemi);

package/useSortable.mjs

@@ -1,5 +1,6 @@
-import { tryOnMounted, tryOnScopeDispose, resolveUnref, unrefElement, defaultDocument } from '@vueuse/core';
+import { tryOnMounted, tryOnScopeDispose, toValue, unrefElement, defaultDocument } from '@vueuse/core';
 import Sortable from 'sortablejs';
+import { nextTick } from 'vue-demi';
 
 var __defProp = Object.defineProperty;
 var __getOwnPropSymbols = Object.getOwnPropertySymbols;
@@ -49,9 +50,11 @@ function useSortable(el, list, options = {}) {
   return { stop, start };
 }
 function moveArrayElement(list, from, to) {
-  const array = resolveUnref(list);
-  if (to >= 0 && to < array.length)
-    array.splice(to, 0, array.splice(from, 1)[0]);
+  const array = toValue(list);
+  if (to >= 0 && to < array.length) {
+    const element = array.splice(from, 1)[0];
+    nextTick(() => array.splice(to, 0, element));
+  }
 }
 
 export { moveArrayElement, useSortable };