WIP adding data attribute to deal with header and footer slot

Author: David-Desmaisons

example/components/headerslot.vue

@@ -10,27 +10,27 @@
         @end="dragging = false"
         item-key="name"
       >
-        <template v-slot:footer>
+        <template #header>
           <div
             class="btn-group list-group-item"
             role="group"
             aria-label="Basic example"
           >
-            <button class="btn btn-secondary" @click="replace">Replace</button>
+            <button class="btn btn-secondary" @click="add">Add</button>
           </div>
         </template>
 
-        <template v-slot:header>
+        <template #footer>
           <div
             class="btn-group list-group-item"
             role="group"
             aria-label="Basic example"
           >
-            <button class="btn btn-secondary" @click="add">Add</button>
+            <button class="btn btn-secondary" @click="replace">Replace</button>
           </div>
         </template>
 
-        <template v-slot:item="{ element }">
+        <template #item="{ element }">
           <div class="list-group-item item">
             {{ element.name }}
           </div>

src/core/componentBuilderHelper.js

@@ -1,5 +1,5 @@
-import { capitalize, camelize } from "../util/string";
-import { events, isReadOnlyEvent } from "./sortableEvents";
+import { camelize } from "../util/string";
+import { events, isReadOnly } from "./sortableEvents";
 import { isHtmlAttribute } from "../util/tags";
 
 function project(entries) {
@@ -26,8 +26,9 @@ function createSortableOption({ $attrs, callBackBuilder }) {
       options[`on${event}`] = eventBuilder(event);
     });
   });
+  const draggable = `${options.draggable || ""}[data-draggable]`;
   return {
-    draggable: ">*",
+    draggable,
     ...options
   };
 }
@@ -36,7 +37,7 @@ function getValidSortableEntries(value) {
   return Object.entries(value)
     .filter(([key, _]) => !isHtmlAttribute(key))
     .map(([key, value]) => [camelize(key), value])
-    .filter(([key, _]) => !isReadOnlyEvent(key));
+    .filter(([key, _]) => !isReadOnly(key));
 }
 
 export {

src/core/renderHelper.js

@@ -18,6 +18,7 @@ function computeNodes({ $slots, realList, itemKey }) {
   const defaultNodes = realList.flatMap((element, index) =>
     item({ element, index }).map(node => {
       node.key = element[itemKey];
+      node.props = { ...(node.props || {}), "data-draggable": true };
       return node;
     })
   );

src/core/sortableEvents.js

@@ -1,18 +1,18 @@
 const manageAndEmit = ["Start", "Add", "Remove", "Update", "End"];
 const emit = ["Choose", "Unchoose", "Sort", "Filter", "Clone"];
 const manage = ["Move"];
-const eventHandlerNames = [...manage, ...manageAndEmit, ...emit].map(
-  evt => `on${evt}`
-);
+const eventHandlerNames = [manage, manageAndEmit, emit]
+  .flatMap(events => events)
+  .map(evt => `on${evt}`);
 
 const events = {
   manage,
   manageAndEmit,
   emit
 };
 
-function isReadOnlyEvent(eventName) {
+function isReadOnly(eventName) {
   return eventHandlerNames.indexOf(eventName) !== -1;
 }
 
-export { events, isReadOnlyEvent };
+export { events, isReadOnly };

src/util/string.js

@@ -9,6 +9,4 @@ function cached(fn) {
 const regex = /-(\w)/g;
 const camelize = cached(str => str.replace(regex, (_, c) => c.toUpperCase()));
 
-const capitalize = str => str.replace(/^\w/, c => c.toUpperCase());
-
-export { camelize, capitalize };
+export { camelize };

tests/unit/util/string.spec.js

@@ -1,4 +1,4 @@
-import { camelize, capitalize } from "@/util/string";
+import { camelize } from "@/util/string";
 
 describe("camelize", () => {
   test.each([
@@ -15,20 +15,4 @@ describe("camelize", () => {
       expect(actual).toEqual(expected);
     }
   )
-});
-
-describe("capitalize", () => {
-  test.each([
-    ["myProp", "MyProp"],
-    ["abcdde", "Abcdde"],
-    ["Zab", "Zab"],
-    ["zab", "Zab"],
-    ["123456", "123456"]
-  ])(
-    "transform %s into %s",
-    (value, expected) =>{
-      const actual = capitalize(value);
-      expect(actual).toEqual(expected);
-    }
-  )
 });