Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
sortablejs-vue3
Advanced tools
sortablejs-vue3 - npm Package Compare versions
Comparing version 1.2.4 to 1.2.5
@@ -1,2 +0,2 @@ | ||
| import { defineComponent, ref, computed, watch, onUnmounted, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, renderSlot, createCommentVNode, Fragment, renderList, unref } from "vue"; | ||
| import { defineComponent, useAttrs, ref, computed, watch, onUnmounted, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, renderSlot, createCommentVNode, Fragment, renderList, unref } from "vue"; | ||
| import Sortable from "sortablejs"; | ||
@@ -32,2 +32,3 @@ const _hoisted_1 = { key: 0 }; | ||
| const props = __props; | ||
| const attrs = useAttrs(); | ||
| const containerRef = ref(null); | ||
@@ -53,3 +54,3 @@ const sortable = ref(null); | ||
| onFilter: (event) => emit("filter", event), | ||
| onMove: (event, originalEvent) => emit("move", event, originalEvent), | ||
| onMove: (event, originalEvent) => "onMoveCapture" in attrs ? attrs.onMoveCapture(event, originalEvent) : emit("move", event, originalEvent), | ||
| onClone: (event) => emit("clone", event), | ||
@@ -56,0 +57,0 @@ onChange: (event) => emit("change", event) |
@@ -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={key:0},r={key:1},l=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,{emit:l}){const s=e,a=o.ref(null),i=o.ref(null),d=o.computed((()=>"string"==typeof s.itemKey?e=>e[s.itemKey]:s.itemKey));return o.watch(a,(e=>{e&&(i.value=new t(e,{...s.options,onChoose:e=>l("choose",e),onUnchoose:e=>l("unchoose",e),onStart:e=>l("start",e),onEnd:e=>l("end",e),onAdd:e=>l("add",e),onUpdate:e=>l("update",e),onSort:e=>l("sort",e),onRemove:e=>l("remove",e),onFilter:e=>l("filter",e),onMove:(e,o)=>l("move",e,o),onClone:e=>l("clone",e),onChange:e=>l("change",e)}))})),o.watch((()=>s.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,l)=>(o.openBlock(),o.createBlock(o.resolveDynamicComponent(t.$props.tag),{ref_key:"containerRef",ref:a,class:o.normalizeClass(t.$props.class)},{default:o.withCtx((()=>[t.$slots.header?(o.openBlock(),o.createElementBlock("header",n,[o.renderSlot(t.$slots,"header")])):o.createCommentVNode("",!0),(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)),t.$slots.footer?(o.openBlock(),o.createElementBlock("footer",r,[o.renderSlot(t.$slots,"footer")])):o.createCommentVNode("",!0)])),_:3},8,["class"]))}});e.Sortable=l,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={key:0},r={key:1},l=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,{emit:l}){const s=e,a=o.useAttrs(),i=o.ref(null),u=o.ref(null),d=o.computed((()=>"string"==typeof s.itemKey?e=>e[s.itemKey]:s.itemKey));return o.watch(i,(e=>{e&&(u.value=new t(e,{...s.options,onChoose:e=>l("choose",e),onUnchoose:e=>l("unchoose",e),onStart:e=>l("start",e),onEnd:e=>l("end",e),onAdd:e=>l("add",e),onUpdate:e=>l("update",e),onSort:e=>l("sort",e),onRemove:e=>l("remove",e),onFilter:e=>l("filter",e),onMove:(e,o)=>"onMoveCapture"in a?a.onMoveCapture(e,o):l("move",e,o),onClone:e=>l("clone",e),onChange:e=>l("change",e)}))})),o.watch((()=>s.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,l)=>(o.openBlock(),o.createBlock(o.resolveDynamicComponent(t.$props.tag),{ref_key:"containerRef",ref:i,class:o.normalizeClass(t.$props.class)},{default:o.withCtx((()=>[t.$slots.header?(o.openBlock(),o.createElementBlock("header",n,[o.renderSlot(t.$slots,"header")])):o.createCommentVNode("",!0),(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)),t.$slots.footer?(o.openBlock(),o.createElementBlock("footer",r,[o.renderSlot(t.$slots,"footer")])):o.createCommentVNode("",!0)])),_:3},8,["class"]))}});e.Sortable=l,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})})); |
| import { PropType } from "vue"; | ||
| import Sortable from "sortablejs"; | ||
| import type { AutoScrollOptions } from "sortablejs/plugins"; | ||
| declare const _default: { | ||
@@ -8,3 +9,3 @@ new (...args: any[]): { | ||
| $props: Partial<{ | ||
| options: Omit<Sortable.SortableOptions, "onUnchoose" | "onChoose" | "onStart" | "onEnd" | "onAdd" | "onUpdate" | "onSort" | "onRemove" | "onFilter" | "onMove" | "onClone" | "onChange">; | ||
| options: Omit<Sortable.SortableOptions | AutoScrollOptions, "onUnchoose" | "onChoose" | "onStart" | "onEnd" | "onAdd" | "onUpdate" | "onSort" | "onRemove" | "onFilter" | "onMove" | "onClone" | "onChange">; | ||
| list: any[]; | ||
@@ -16,3 +17,3 @@ itemKey: string | ((item: any) => string | number | Symbol); | ||
| options: { | ||
| type: PropType<Omit<Sortable.SortableOptions, "onUnchoose" | "onChoose" | "onStart" | "onEnd" | "onAdd" | "onUpdate" | "onSort" | "onRemove" | "onFilter" | "onMove" | "onClone" | "onChange">>; | ||
| type: PropType<Omit<Sortable.SortableOptions | AutoScrollOptions, "onUnchoose" | "onChoose" | "onStart" | "onEnd" | "onAdd" | "onUpdate" | "onSort" | "onRemove" | "onFilter" | "onMove" | "onClone" | "onChange">>; | ||
| default: null; | ||
@@ -69,3 +70,3 @@ required: false; | ||
| options: { | ||
| type: PropType<Omit<Sortable.SortableOptions, "onUnchoose" | "onChoose" | "onStart" | "onEnd" | "onAdd" | "onUpdate" | "onSort" | "onRemove" | "onFilter" | "onMove" | "onClone" | "onChange">>; | ||
| type: PropType<Omit<Sortable.SortableOptions | AutoScrollOptions, "onUnchoose" | "onChoose" | "onStart" | "onEnd" | "onAdd" | "onUpdate" | "onSort" | "onRemove" | "onFilter" | "onMove" | "onClone" | "onChange">>; | ||
| default: null; | ||
@@ -130,3 +131,3 @@ required: false; | ||
| }, string, { | ||
| options: Omit<Sortable.SortableOptions, "onUnchoose" | "onChoose" | "onStart" | "onEnd" | "onAdd" | "onUpdate" | "onSort" | "onRemove" | "onFilter" | "onMove" | "onClone" | "onChange">; | ||
| options: Omit<Sortable.SortableOptions | AutoScrollOptions, "onUnchoose" | "onChoose" | "onStart" | "onEnd" | "onAdd" | "onUpdate" | "onSort" | "onRemove" | "onFilter" | "onMove" | "onClone" | "onChange">; | ||
| list: any[]; | ||
@@ -158,3 +159,3 @@ itemKey: string | ((item: any) => string | number | Symbol); | ||
| options: { | ||
| type: PropType<Omit<Sortable.SortableOptions, "onUnchoose" | "onChoose" | "onStart" | "onEnd" | "onAdd" | "onUpdate" | "onSort" | "onRemove" | "onFilter" | "onMove" | "onClone" | "onChange">>; | ||
| type: PropType<Omit<Sortable.SortableOptions | AutoScrollOptions, "onUnchoose" | "onChoose" | "onStart" | "onEnd" | "onAdd" | "onUpdate" | "onSort" | "onRemove" | "onFilter" | "onMove" | "onClone" | "onChange">>; | ||
| default: null; | ||
@@ -201,3 +202,3 @@ required: false; | ||
| options: { | ||
| type: PropType<Omit<Sortable.SortableOptions, "onUnchoose" | "onChoose" | "onStart" | "onEnd" | "onAdd" | "onUpdate" | "onSort" | "onRemove" | "onFilter" | "onMove" | "onClone" | "onChange">>; | ||
| type: PropType<Omit<Sortable.SortableOptions | AutoScrollOptions, "onUnchoose" | "onChoose" | "onStart" | "onEnd" | "onAdd" | "onUpdate" | "onSort" | "onRemove" | "onFilter" | "onMove" | "onClone" | "onChange">>; | ||
| default: null; | ||
@@ -262,3 +263,3 @@ required: false; | ||
| }, string, { | ||
| options: Omit<Sortable.SortableOptions, "onUnchoose" | "onChoose" | "onStart" | "onEnd" | "onAdd" | "onUpdate" | "onSort" | "onRemove" | "onFilter" | "onMove" | "onClone" | "onChange">; | ||
| options: Omit<Sortable.SortableOptions | AutoScrollOptions, "onUnchoose" | "onChoose" | "onStart" | "onEnd" | "onAdd" | "onUpdate" | "onSort" | "onRemove" | "onFilter" | "onMove" | "onClone" | "onChange">; | ||
| list: any[]; | ||
@@ -265,0 +266,0 @@ itemKey: string | ((item: any) => string | number | Symbol); |
| { | ||
| "name": "sortablejs-vue3", | ||
| "version": "1.2.4", | ||
| "version": "1.2.5", | ||
| "author": { | ||
@@ -48,3 +48,3 @@ "email": "maxwell.leiter@gmail.com", | ||
| "@types/sortablejs": "1.15.0", | ||
| "@vitejs/plugin-vue": "3.2.0", | ||
| "@vitejs/plugin-vue": "4.0.0", | ||
| "prettier": "2.8.0", | ||
@@ -51,0 +51,0 @@ "terser": "5.16.0", |
@@ -93,2 +93,3 @@ # SortableJS-vue3 | ||
| @move="(event: Sortable.MoveEvent, event2: Event) => void" | ||
| @move.capture="(event: Sortable.MoveEvent, event2: Event) => boolean | -1 | 1" | ||
| @clone="(event: Sortable.SortableEvent) => void" | ||
@@ -98,4 +99,16 @@ > | ||
| ### Use with a Store | ||
| ### Using plugins | ||
| You need to mount any plugins you want outside of [the default](https://github.com/SortableJS/Sortable#plugins) before importing this library. For example, the below is correct: | ||
| ```typescript | ||
| import SortableJs from 'sortablejs'; | ||
| import { Swap } from 'sortablejs/modular/sortable.core.esm'; | ||
| SortableJs.mount(new Swap()); | ||
| import { Sortable } from "sortablejs-vue3"; | ||
| ``` | ||
| ### Use with a store | ||
| No changes are necessary to work with Vuex or another store. Just pass `store.state.items` as your list. To modify your data you need to manually listen to the events and calculate the new position with `event.oldIndex` and `event.newIndex` with something like the following: | ||
@@ -102,0 +115,0 @@ |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by0.14%
589376
- Lines of code
- increased by0.76%
396
- Number of lines in readme file
- increased by10.66%
135
No dependency changes