add dnd

README.md

@@ -110,7 +110,7 @@ Please read the [RELEASE.MD](./RELEASE.MD)
 </tr>
 </table>
 
-[Become a sponsor ](https://github.com/sponsors/adrianthedev)
+[Become a sponsor](mailto:[email protected])
 
 
 ![Alt](https://repobeats.axiom.co/api/embed/1481a6a259064f02a7936470d12a50802a9c98a4.svg "Repobeats analytics image")
@@ -120,3 +120,10 @@ Please read the [RELEASE.MD](./RELEASE.MD)
 [Get a box of waffles and some of the best app monitoring from Appsignal](https://appsignal.com/r/93dbe69bfb) 🧇
 
 [Get $100 in credits from Digital Ocean](https://www.digitalocean.com/?refcode=efc1fe881d74&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge) 💸
+
+## Other Open Source Work
+
+ - [`active_storage-blurhash`](https://github.com/avo-hq/active_storage-blurhash) - A plug-n-play [blurhash](https://blurha.sh/) integration for images stored in ActiveStorage
+ - [`class_variants`](https://github.com/avo-hq/class_variants) - Easily configure styles and apply them as classes. Very useful when you're implementing Tailwind CSS components and call them with different states.
+ - [`prop_initializer`](https://github.com/avo-hq/prop_initializer) - A flexible tool for defining properties on Ruby classes.
+ - [`stimulus-confetti`](https://github.com/avo-hq/stimulus-confetti) - The easiest way to add confetti to your StimulusJS app

app/javascript/js/controllers/fields/key_value_controller.js

@@ -2,6 +2,7 @@
 import * as DOMPurify from 'dompurify'
 import { Controller } from '@hotwired/stimulus'
 import { castBoolean } from '../../helpers/cast_boolean'
+import Sortable from 'sortablejs'
 
 export default class extends Controller {
   static targets = ['input', 'controller', 'rows']
@@ -46,12 +47,10 @@ export default class extends Controller {
     this.updateKeyValueComponent()
   }
 
-  moveKey(event) {
+  moveKey(oldIndex, newIndex) {
     if (!this.options.editable) return
 
-    const { index, direction } = event.params
-    const toIndex = direction === 'up' ? index - 1 : index + 1
-    this.fieldValue = this.moveElement(this.fieldValue, index, toIndex)
+    this.fieldValue = this.moveElement(this.fieldValue, oldIndex, newIndex)
 
     this.updateTextareaInput()
     this.updateKeyValueComponent()
@@ -105,9 +104,22 @@ export default class extends Controller {
       index++
     })
     this.rowsTarget.innerHTML = result
+    this.#initDragNDrop()
     window.initTippy()
   }
 
+  #initDragNDrop() {
+    const vm = this
+    // eslint-disable-next-line no-new
+    new Sortable(this.rowsTarget, {
+      animation: 150,
+      handle: '[data-control="dnd-handle"]',
+      onUpdate(event) {
+        vm.moveKey(event.oldIndex, event.newIndex)
+      },
+    })
+  }
+
   interpolatedRow(key, value, index) {
     let result = '<div class="flex key-value-row">'
 
@@ -154,28 +166,19 @@ export default class extends Controller {
   }
 
   upDownButtons(index) {
-    return `<a
-      href="javascript:void(0);"
-      data-key-value-index-param="${index}"
-      data-key-value-direction-param="up"
-      data-action="click->key-value#moveKey"
-      title="up"
-      data-tippy="tooltip"
-      data-button="up-row"
-      tabindex="-1"
-      class="flex items-center justify-center p-2 border-none ${this.options.disable_deleting_rows ? 'cursor-not-allowed' : ''} ${index === 0 ? 'invisible' : ''}"
-      ><svg class="pointer-events-none text-gray-500 h-5 hover:text-gray-500" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18" /></svg></a>
+    return `<div class="flex flex-col">
       <a
-      href="javascript:void(0);"
-      data-key-value-index-param="${index}"
-      data-key-value-direction-param="down"
-      data-action="click->key-value#moveKey"
-      title="down"
-      data-tippy="tooltip"
-      data-button="down-row"
-      tabindex="-1"
-      class="flex items-center justify-center p-2 border-none ${this.options.disable_deleting_rows ? 'cursor-not-allowed' : ''} ${index === this.fieldValue.length - 1 ? 'invisible' : ''}"
-      ><svg class="pointer-events-none text-gray-500 h-5 hover:text-gray-500" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M19 14l-7 7m0 0l-7-7m7 7V3" /></svg></a>`
+        href="javascript:void(0);"
+        data-key-value-index-param="${index}"
+        data-control="dnd-handle"
+        title="reorder"
+        data-tippy="tooltip"
+        tabindex="-1"
+        class="flex items-center justify-center py-0 px-2 border-none h-full ${this.options.disable_deleting_rows ? 'cursor-not-allowed' : ''}"
+        >
+          <svg class="pointer-events-none text-gray-500 h-4 hover:text-gray-500" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" /></svg>
+      </a>
+    </div>`
   }
 
   setOptions() {

package.json

@@ -72,6 +72,7 @@
     "postcss-nested-ancestors": "^3.0.0",
     "postcss-preset-env": "^8.5.1",
     "regenerator-runtime": "^0.13.11",
+    "sortablejs": "^1.15.3",
     "stimulus-rails-nested-form": "^4.1.0",
     "stimulus-textarea-autogrow": "^4.1.0",
     "stimulus-use": "^0.50.0",

yarn.lock

@@ -5339,6 +5339,11 @@ side-channel@^1.0.4:
     get-intrinsic "^1.0.2"
     object-inspect "^1.9.0"
 
+sortablejs@^1.15.3:
+  version "1.15.3"
+  resolved "https://registry.yarnpkg.com/sortablejs/-/sortablejs-1.15.3.tgz#033668db5ebfb11167d1249ab88e748f27959e29"
+  integrity sha512-zdK3/kwwAK1cJgy1rwl1YtNTbRmc8qW/+vgXf75A7NHag5of4pyI6uK86ktmQETyWRH7IGaE73uZOOBcGxgqZg==
+
 source-map-js@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/source-map-js/-/source-map-js-1.0.2.tgz#adbc361d9c62df380125e7f161f71c826f1e490c"