wip

README

@@ -0,0 +1 @@
+# Livewire Sortable

package.json

@@ -18,13 +18,15 @@
   "devDependencies": {
     "@babel/core": "^7.7.7",
     "@babel/preset-env": "^7.7.7",
+    "@shopify/draggable": "^1.0.0-beta.8",
     "@testing-library/dom": "^6.11.0",
     "@testing-library/jest-dom": "^4.2.4",
     "babel-jest": "^24.8.0",
     "jest": "^24.8.0",
     "jsdom-simulant": "^1.1.2",
     "rollup": "^1.27.14",
     "rollup-plugin-babel": "^4.3.3",
+    "rollup-plugin-commonjs": "^10.1.0",
     "rollup-plugin-filesize": "^6.2.1",
     "rollup-plugin-node-resolve": "^5.2.0",
     "rollup-plugin-terser": "^5.1.3"

rollup.config.js

@@ -2,6 +2,7 @@ import babel from 'rollup-plugin-babel';
 import filesize from 'rollup-plugin-filesize';
 import { terser } from "rollup-plugin-terser";
 import resolve from "rollup-plugin-node-resolve"
+import commonjs from 'rollup-plugin-commonjs';
 
 export default {
     input: 'src/index.js',
@@ -12,6 +13,7 @@ export default {
         sourcemap: true,
     },
     plugins: [
+        commonjs(),
         resolve(),
         filesize(),
         terser({

src/index.js

@@ -0,0 +1,64 @@
+import Sortable from '@shopify/draggable/lib/sortable'
+
+if (typeof window.livewire === 'undefined') {
+    throw 'Livewire Sortable Plugin: window.livewire is undefined. Make sure @livewireScripts is placed above this script include'
+}
+
+window.livewire.directive('sortable-group', (el, directive, component) => {
+    // Only fire this handler on the "root" directive.
+    if (directive.modifiers.length > 0) return
+
+    let options = { draggable: '[wire\\:sortable-group\\.item]' }
+
+    if (el.querySelector('[wire\\:sortable-group\\.handle]')) {
+        options.handle ='[wire\\:sortable-group\\.handle]'
+    }
+
+    const sortable = new Sortable(el.querySelectorAll('[wire\\:sortable-group\\.item-group]'), options);
+
+    sortable.on('sortable:stop', () => {
+        setTimeout(() => {
+            let groups = []
+
+            document.querySelectorAll('[wire\\:sortable-group\\.item-group]').forEach((el, index) => {
+                let items = []
+                el.querySelectorAll('[wire\\:sortable-group\\.item]').forEach((el, index) => {
+                    items.push({ order: index + 1, value: el.getAttribute('wire:sortable-group.item')})
+                })
+
+                groups.push({
+                    order: index + 1,
+                    value: el.getAttribute('wire:sortable-group.item-group'),
+                    items: items,
+                })
+            })
+
+            component.call(directive.method, groups)
+        }, 1)
+    })
+})
+
+window.livewire.directive('sortable', (el, directive, component) => {
+    // Only fire this handler on the "root" directive.
+    if (directive.modifiers.length > 0) return
+
+    let options = { draggable: '[wire\\:sortable\\.item]' }
+
+    if (el.querySelector('[wire\\:sortable\\.handle]')) {
+        options.handle ='[wire\\:sortable\\.handle]'
+    }
+
+    const sortable = new Sortable(el, options);
+
+    sortable.on('sortable:stop', () => {
+        setTimeout(() => {
+            let items = []
+
+            document.querySelectorAll('[wire\\:sortable\\.item]').forEach((el, index) => {
+                items.push({ order: index + 1, value: el.getAttribute('wire:sortable.item')})
+            })
+
+            component.call(directive.method, items)
+        }, 1)
+    })
+})