sortablejs-vue3 - npm Package Compare versions

Comparing version 1.2.6 to 1.2.7

dist/sortablejs-vue3.es.js

@@ -35,2 +35,3 @@ import { defineComponent, useAttrs, ref, computed, watch, onUnmounted, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, renderSlot, createElementBlock, Fragment, renderList, unref } from "vue";
     const attrs = useAttrs();
+    const isDragging = ref(false);
     const containerRef = ref(null);
@@ -43,3 +44,7 @@ const sortable = ref(null);
     });
-    expose({ containerRef, sortable });
+    expose({
+      containerRef,
+      sortable,
+      isDragging
+    });
     watch(containerRef, (newDraggable) => {
@@ -51,4 +56,12 @@ if (newDraggable) {
           onUnchoose: (event) => emit("unchoose", event),
-          onStart: (event) => emit("start", event),
-          onEnd: (event) => emit("end", event),
+          onStart: (event) => {
+            isDragging.value = true;
+            emit("start", event);
+          },
+          onEnd: (event) => {
+            setTimeout(() => {
+              isDragging.value = false;
+              emit("end", event);
+            });
+          },
           onAdd: (event) => emit("add", event),
@@ -55,0 +68,0 @@ onUpdate: (event) => emit("update", event),

dist/sortablejs-vue3.umd.js

@@ -1,1 +0,1 @@
-!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("vue"),require("sortablejs")):"function"==typeof define&&define.amd?define(["exports","vue","sortablejs"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self)["SortableJS-Vue3"]={},e.Vue,e.Sortable)}(this,(function(e,o,t){"use strict";const n=o.defineComponent({__name:"Sortable",props:{options:{type:Object,default:null,required:!1},list:{type:[Array,Object],default:[],required:!0},itemKey:{type:[String,Function],default:"",required:!0},tag:{type:String,default:"div",required:!1}},emits:["choose","unchoose","start","end","add","update","sort","remove","filter","move","clone","change"],setup(e,{expose:n,emit:r}){const l=e,s=o.useAttrs(),a=o.ref(null),i=o.ref(null),u=o.computed((()=>"string"==typeof l.itemKey?e=>e[l.itemKey]:l.itemKey));return n({containerRef:a,sortable:i}),o.watch(a,(e=>{e&&(i.value=new t(e,{...l.options,onChoose:e=>r("choose",e),onUnchoose:e=>r("unchoose",e),onStart:e=>r("start",e),onEnd:e=>r("end",e),onAdd:e=>r("add",e),onUpdate:e=>r("update",e),onSort:e=>r("sort",e),onRemove:e=>r("remove",e),onFilter:e=>r("filter",e),onMove:(e,o)=>"onMoveCapture"in s?s.onMoveCapture(e,o):r("move",e,o),onClone:e=>r("clone",e),onChange:e=>r("change",e)}))})),o.watch((()=>l.options),(e=>{if(e&&i?.value)for(const o in e)i.value.option(o,e[o])})),o.onUnmounted((()=>{i.value&&(i.value.destroy(),a.value=null,i.value=null)})),(t,n)=>(o.openBlock(),o.createBlock(o.resolveDynamicComponent(t.$props.tag),{ref_key:"containerRef",ref:a,class:o.normalizeClass(t.$props.class)},{default:o.withCtx((()=>[o.renderSlot(t.$slots,"header"),(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(e.list,((e,n)=>o.renderSlot(t.$slots,"item",{key:o.unref(u)(e),element:e,index:n}))),128)),o.renderSlot(t.$slots,"footer")])),_:3},8,["class"]))}});e.Sortable=n,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));
+!function(e,o){"object"==typeof exports&&"undefined"!=typeof module?o(exports,require("vue"),require("sortablejs")):"function"==typeof define&&define.amd?define(["exports","vue","sortablejs"],o):o((e="undefined"!=typeof globalThis?globalThis:e||self)["SortableJS-Vue3"]={},e.Vue,e.Sortable)}(this,(function(e,o,t){"use strict";const n=o.defineComponent({__name:"Sortable",props:{options:{type:Object,default:null,required:!1},list:{type:[Array,Object],default:[],required:!0},itemKey:{type:[String,Function],default:"",required:!0},tag:{type:String,default:"div",required:!1}},emits:["choose","unchoose","start","end","add","update","sort","remove","filter","move","clone","change"],setup(e,{expose:n,emit:r}){const l=e,s=o.useAttrs(),a=o.ref(!1),i=o.ref(null),u=o.ref(null),d=o.computed((()=>"string"==typeof l.itemKey?e=>e[l.itemKey]:l.itemKey));return n({containerRef:i,sortable:u,isDragging:a}),o.watch(i,(e=>{e&&(u.value=new t(e,{...l.options,onChoose:e=>r("choose",e),onUnchoose:e=>r("unchoose",e),onStart:e=>{a.value=!0,r("start",e)},onEnd:e=>{setTimeout((()=>{a.value=!1,r("end",e)}))},onAdd:e=>r("add",e),onUpdate:e=>r("update",e),onSort:e=>r("sort",e),onRemove:e=>r("remove",e),onFilter:e=>r("filter",e),onMove:(e,o)=>"onMoveCapture"in s?s.onMoveCapture(e,o):r("move",e,o),onClone:e=>r("clone",e),onChange:e=>r("change",e)}))})),o.watch((()=>l.options),(e=>{if(e&&u?.value)for(const o in e)u.value.option(o,e[o])})),o.onUnmounted((()=>{u.value&&(u.value.destroy(),i.value=null,u.value=null)})),(t,n)=>(o.openBlock(),o.createBlock(o.resolveDynamicComponent(t.$props.tag),{ref_key:"containerRef",ref:i,class:o.normalizeClass(t.$props.class)},{default:o.withCtx((()=>[o.renderSlot(t.$slots,"header"),(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(e.list,((e,n)=>o.renderSlot(t.$slots,"item",{key:o.unref(d)(e),element:e,index:n}))),128)),o.renderSlot(t.$slots,"footer")])),_:3},8,["class"]))}});e.Sortable=n,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})}));

dist/src/components/Sortable.vue.d.ts

@@ -1,5 +0,5 @@
-import { PropType, Ref } from "vue";
+import { PropType, Ref } from "vue-demi";
 import Sortable from "sortablejs";
 import type { AutoScrollOptions } from "sortablejs/plugins";
-declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
+declare const _default: __VLS_WithTemplateSlots<import("vue-demi").DefineComponent<{
     /** All SortableJS options are supported; events are handled by the `defineEmits` below and should be used with v-on */
@@ -32,3 +32,4 @@ options: {
     sortable: Ref<Sortable | null>;
-}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    isDragging: Ref<boolean>;
+}, unknown, {}, {}, import("vue-demi").ComponentOptionsMixin, import("vue-demi").ComponentOptionsMixin, {
     choose: (evt: Sortable.SortableEvent) => void;
@@ -57,3 +58,3 @@ } & {
     change: (evt: Sortable.SortableEvent) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+}, string, import("vue-demi").VNodeProps & import("vue-demi").AllowedComponentProps & import("vue-demi").ComponentCustomProps, Readonly<import("vue-demi").ExtractPropTypes<{
     /** All SortableJS options are supported; events are handled by the `defineEmits` below and should be used with v-on */
@@ -60,0 +61,0 @@ options: {

package.json

 {
   "name": "sortablejs-vue3",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "author": {
@@ -39,8 +39,14 @@ "email": "[e-mail]",
     "sortablejs": "^1.15.0",
-    "vue": "^3.2.37"
+    "vue": "^3.2.37",
+    "vue-demi": "^0.13.11"
   },
   "peerDependencies": {
     "sortablejs": "^1.15.0",
-    "vue": "^3.2.25"
+    "vue": "^2.0.0 || >=3.0.0"
   },
+  "peerDependenciesMeta": {
+    "@vue/composition-api": {
+      "optional": true
+    }
+  },
   "devDependencies": {
@@ -47,0 +53,0 @@ "@types/node": "18.11.18",

README.md

@@ -7,3 +7,3 @@ # SortableJS-vue3
 
-This is a thin wrapper around the great [SortableJS](https://github.com/SortableJS/Sortable) library. I had many issues migrating from Vue.Draggable to vue.draggable.next, and after briefly investigating I decided that it was too complicated and a smaller solution was the answer. This wrapper attempts to keep you as close to Sortable as possible.
+This is a thin wrapper around the great [SortableJS](https://github.com/SortableJS/Sortable) library for Vue 2 & 3. I had many issues migrating from Vue.Draggable to vue.draggable.next, and after briefly investigating I decided that it was too complicated and a smaller solution was the answer. This wrapper attempts to keep you as close to Sortable as possible.
 
@@ -128,2 +128,10 @@ ### Why not use \<other library\>?
 
+## Vue 2 support
+
+If you are using version prior to `vue@2.7.0`, `@vue/composition-api` is required to be installed to use SortableJS-vue3 with Vue 2.
+
+Everything else should be similar to the example above for Vue 3.
+
+Under the hood, we use [Vue Demi](https://github.com/vueuse/vue-demi) a tool that allows us to write Universal Vue Libraries for Vue 2 & 3.
+
 ## Development
@@ -130,0 +138,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

579523

increased by0.15%

Lines of code

247

increased by6.01%

Number of lines in readme file

145

increased by5.84%

Worsened metrics

Dependency count

5

increased by25%

Dependency changes

• + Addedvue-demi@^0.13.11

• + Addedvue-demi@0.13.11(transitive)