docs: updates swap plugin examples

formkit · Jun 3, 2024 · d23853b · d23853b
1 parent dda92ff
commit d23853b
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 40 deletions.
diff --git a/docs/examples/ToDos.vue b/docs/examples/ToDos.vue
@@ -15,6 +15,10 @@ const props = defineProps({
     type: Boolean,
     default: false,
   },
+  transfer: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 const [todoList, todos] = useDragAndDrop(
@@ -80,7 +84,7 @@ if (props.dragHandles) {
             </li>
           </ul>
         </div>
-        <div class="kanban-column">
+        <div v-if="transfer" class="kanban-column">
           <h2 class="kanban-title">Complete</h2>
 
           <ul ref="doneList" class="kanban-list">

diff --git a/docs/examples/swap/demo.vue b/docs/examples/swap/demo.vue
@@ -3,5 +3,5 @@ import ToDos from "../ToDos.vue";
 </script>
 
 <template>
-  <ToDos :swap="true" />
+  <ToDos :swap="true" :transfer="false" />
 </template>
diff --git a/docs/examples/swap/swap.ts b/docs/examples/swap/swap.ts
@@ -2,31 +2,34 @@ import { reactive, html } from "@arrow-js/core";
 import { dragAndDrop, swap } from "@formkit/drag-and-drop";
 
 const state = reactive({
-  tapes: [
-    "Depeche Mode",
-    "Duran Duran",
-    "Pet Shop Boys",
-    "Kraftwerk",
-    "Tears for Fears",
-    "Spandau Ballet",
+  todos: [
+    "Schedule perm",
+    "Rewind VHS tapes",
+    "Make change for the arcade",
+    "Get disposable camera developed",
+    "Learn C++",
+    "Return Nintendo Power Glove",
   ],
 });
 
-html`
-  <ul id="cassettes">
-    ${state.tapes.map((tape) =>
-      html`<li class="cassette" data-label="${tape}">${tape}</li>`.key(tape)
-    )}
-  </ul>
-`(document.getElementById("app")!);
-
 dragAndDrop<string>({
-  parent: document.getElementById("cassettes")!,
-  getValues: () => state.tapes,
+  parent: document.getElementById("todo-list")!,
+  getValues: () => state.todos,
   setValues: (newValues) => {
-    state.tapes = reactive(newValues);
+    state.todos = reactive(newValues);
   },
   config: {
+    group: "todoList",
     plugins: [swap()],
   },
 });
+
+html`
+  <div class="kanban-board">
+    <ul class="kanban-list" id="todo-list">
+      ${state.todos.map((todo) =>
+        html`<li class="kanban-item">${todo}</li>`.key(todo)
+      )}
+    </ul>
+  </div>
+`(document.getElementById("app")!);
diff --git a/docs/examples/swap/swap.tsx b/docs/examples/swap/swap.tsx
@@ -3,26 +3,30 @@ import { useDragAndDrop } from "@formkit/drag-and-drop/react";
 import { swap } from "@formkit/drag-and-drop";
 
 export function myComponent() {
-  const [parent, tapes] = useDragAndDrop<HTMLUListElement, string>(
-    [
-      "Depeche Mode",
-      "Duran Duran",
-      "Pet Shop Boys",
-      "Kraftwerk",
-      "Tears for Fears",
-      "Spandau Ballet",
-    ],
-    {
-      plugins: [swap()],
-    }
+  const todoItems = [
+    "Schedule perm",
+    "Rewind VHS tapes",
+    "Make change for the arcade",
+    "Get disposable camera developed",
+    "Learn C++",
+    "Return Nintendo Power Glove",
+  ];
+  const doneItems = ["Pickup new mix-tape from Beth"];
+
+  const [todoList, todos] = useDragAndDrop<HTMLUListElement, string>(
+    todoItems,
+    { group: "todoList", plugins: [swap()] }
   );
+
   return (
-    <ul ref={parent}>
-      {tapes.map((tape) => (
-        <li className="cassette" data-label={tape} key={tape}>
-          {tape}
-        </li>
-      ))}
-    </ul>
+    <div className="kanban-board">
+      <ul ref={todoList}>
+        {todos.map((todo) => (
+          <li className="kanban-item" key={todo}>
+            {todo}
+          </li>
+        ))}
+      </ul>
+    </div>
   );
 }
diff --git a/docs/examples/transfer/transfer.tsx b/docs/examples/transfer/transfer.tsx
@@ -2,7 +2,14 @@ import React from "react";
 import { useDragAndDrop } from "@formkit/drag-and-drop/react";
 
 export function myComponent() {
-  const todoItems = ["Schedule perm", "Rewind VHS tapes", "Make change for the arcade", "Get disposable camera developed", "Learn C++", "Return Nintendo Power Glove"];
+  const todoItems = [
+    "Schedule perm",
+    "Rewind VHS tapes",
+    "Make change for the arcade",
+    "Get disposable camera developed",
+    "Learn C++",
+    "Return Nintendo Power Glove",
+  ];
   const doneItems = ["Pickup new mix-tape from Beth"];
 
   const [todoList, todos] = useDragAndDrop<HTMLUListElement, string>(