sortablejs-vue3 - npm Package Compare versions

Comparing version 1.2.3 to 1.2.4

dist/sortablejs-vue3.es.js

@@ -1,3 +0,5 @@
-import { defineComponent, ref, computed, watch, onUnmounted, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, Fragment, renderList, renderSlot, unref } from "vue";
+import { defineComponent, ref, computed, watch, onUnmounted, openBlock, createBlock, resolveDynamicComponent, normalizeClass, withCtx, createElementBlock, renderSlot, createCommentVNode, Fragment, renderList, unref } from "vue";
 import Sortable from "sortablejs";
+const _hoisted_1 = { key: 0 };
+const _hoisted_2 = { key: 1 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -83,2 +85,5 @@ __name: "Sortable",
         default: withCtx(() => [
+          _ctx.$slots["header"] ? (openBlock(), createElementBlock("header", _hoisted_1, [
+            renderSlot(_ctx.$slots, "header")
+          ])) : createCommentVNode("", true),
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.list, (item, index) => {
@@ -90,3 +95,6 @@ return renderSlot(_ctx.$slots, "item", {
             });
-          }), 128))
+          }), 128)),
+          _ctx.$slots["footer"] ? (openBlock(), createElementBlock("footer", _hoisted_2, [
+            renderSlot(_ctx.$slots, "footer")
+          ])) : createCommentVNode("", true)
         ]),
@@ -93,0 +101,0 @@ _: 3

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=(e=>e&&"object"==typeof e&&"default"in e?e:{default:e})(t),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:t}){const l=e,r=o.ref(null),a=o.ref(null),i=o.computed((()=>"string"==typeof l.itemKey?e=>e[l.itemKey]:l.itemKey));return o.watch(r,(e=>{e&&(a.value=new n.default(e,{...l.options,onChoose:e=>t("choose",e),onUnchoose:e=>t("unchoose",e),onStart:e=>t("start",e),onEnd:e=>t("end",e),onAdd:e=>t("add",e),onUpdate:e=>t("update",e),onSort:e=>t("sort",e),onRemove:e=>t("remove",e),onFilter:e=>t("filter",e),onMove:(e,o)=>t("move",e,o),onClone:e=>t("clone",e),onChange:e=>t("change",e)}))})),o.watch((()=>l.options),(e=>{if(e&&a?.value)for(const o in e)a.value.option(o,e[o])})),o.onUnmounted((()=>{a.value&&(a.value.destroy(),r.value=null,a.value=null)})),(t,n)=>(o.openBlock(),o.createBlock(o.resolveDynamicComponent(t.$props.tag),{ref_key:"containerRef",ref:r,class:o.normalizeClass(t.$props.class)},{default:o.withCtx((()=>[(o.openBlock(!0),o.createElementBlock(o.Fragment,null,o.renderList(e.list,((e,n)=>o.renderSlot(t.$slots,"item",{key:o.unref(i)(e),element:e,index:n}))),128))])),_:3},8,["class"]))}});e.Sortable=l,Object.defineProperties(e,{__esModule:{value:!0},[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.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"})}));

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

@@ -60,4 +60,4 @@ import { PropType } from "vue";
         }>;
-        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
-        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null;
+        $root: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
+        $parent: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null;
         $emit: ((event: "filter", evt: Sortable.SortableEvent) => void) & ((event: "sort", evt: Sortable.SortableEvent) => void) & ((event: "choose", evt: Sortable.SortableEvent) => void) & ((event: "unchoose", evt: Sortable.SortableEvent) => void) & ((event: "start", evt: Sortable.SortableEvent) => void) & ((event: "end", evt: Sortable.SortableEvent) => void) & ((event: "add", evt: Sortable.SortableEvent) => void) & ((event: "update", evt: Sortable.SortableEvent) => void) & ((event: "remove", evt: Sortable.SortableEvent) => void) & ((event: "move", evt: Sortable.MoveEvent, originalEvent: Event) => void) & ((event: "clone", evt: Sortable.SortableEvent) => void) & ((event: "change", evt: Sortable.SortableEvent) => void);
@@ -132,3 +132,3 @@ $el: any;
             tag: string;
-        }> & {
+        }, {}, string> & {
             beforeCreate?: ((() => void) | (() => void)[]) | undefined;
@@ -148,7 +148,7 @@ created?: ((() => void) | (() => void)[]) | undefined;
             renderTriggered?: (((e: import("vue").DebuggerEvent) => void) | ((e: import("vue").DebuggerEvent) => void)[]) | undefined;
-            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>> | null, info: string) => boolean | void)[]) | undefined;
+            errorCaptured?: (((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void) | ((err: unknown, instance: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}, {}, string>, {}> | null, info: string) => boolean | void)[]) | undefined;
         };
         $forceUpdate: () => void;
         $nextTick: typeof import("vue").nextTick;
-        $watch(source: string | Function, cb: Function, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
+        $watch<T extends string | ((...args: any) => any)>(source: T, cb: T extends (...args: any) => infer R ? (args_0: R, args_1: R) => any : (...args: any) => any, options?: import("vue").WatchOptions<boolean> | undefined): import("vue").WatchStopHandle;
     } & Readonly<import("vue").ExtractPropTypes<{
@@ -192,3 +192,3 @@ /** All SortableJS options are supported; events are handled by the `defineEmits` below and should be used with v-on */
         onChange?: ((evt: Sortable.SortableEvent) => any) | undefined;
-    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties;
+    } & import("vue").ShallowUnwrapRef<{}> & {} & import("vue").ComponentCustomProperties & {};
     __isFragment?: undefined;
@@ -264,4 +264,5 @@ __isTeleport?: undefined;
     tag: string;
-}> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+}, {}, string> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
+        header: (_: {}) => any;
         item: (_: {
@@ -272,4 +273,5 @@ key: any;
         }) => any;
+        footer: (_: {}) => any;
     };
 });
 export default _default;

package.json

 {
   "name": "sortablejs-vue3",
-  "version": "1.2.3",
+  "version": "1.2.4",
   "author": {
@@ -46,11 +46,11 @@ "email": "[e-mail]",
   "devDependencies": {
-    "@types/node": "18.11.8",
+    "@types/node": "18.11.9",
     "@types/sortablejs": "1.15.0",
     "@vitejs/plugin-vue": "3.2.0",
-    "prettier": "2.7.1",
-    "terser": "5.15.1",
-    "typescript": "4.8.4",
-    "vite": "3.2.1",
+    "prettier": "2.8.0",
+    "terser": "5.16.0",
+    "typescript": "4.9.3",
+    "vite": "4.0.3",
     "vue-tsc": "1.0.9"
   }
 }

README.md

@@ -39,3 +39,3 @@ # SortableJS-vue3
 
-```typescript
+```vue
 <template>
@@ -49,2 +49,6 @@ <main>
     >
+      <-- The Header and Footer templates below are optional -->
+      <template #header>
+          <h1>SortableJS Vue3 Demo</h1>
+      </template>
       <template #item="{element, index}">
@@ -55,2 +59,5 @@ <div class="draggable" :key="element.id">
       </template>
+      <template #footer>
+          <div class="draggable">A footer</div>
+      </template>
     </Sortable>
@@ -61,5 +68,4 @@ </template>
 4. The `list` and `item-key` props are necessary. The `options` prop is an object that can contain any SortableJS option. You can find a full list of them here: https://github.com/SortableJS/Sortable#options
+    - The `tag` prop is optional and defaults to `div`. It's the HTML node type for the outer element of the included template/slot. 
 
-5. The `tag` prop is an optional prop, it's the HTML node type of the element that creates an outer element for the included slot. the default value is `div`
-
 ### Props
@@ -95,5 +101,5 @@
 
-### Vuex
+### Use with a Store
 
-No changes are necessary to work with Vuex. 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:
+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:
 
@@ -109,2 +115,4 @@ ```typescript
 
+You may also want to see the SortableJS store documentation [here](https://github.com/SortableJS/Sortable#store).
+
 ## Development
@@ -111,0 +119,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

588537

increased by0.21%

Lines of code

393

increased by2.61%

Number of lines in readme file

122

increased by7.02%

No dependency changes