Merge pull request #3 from jwlarocque/features/delete

Add delete item buttons
jwlarocque · Aug 19, 2020 · b890cc9 · b890cc9
2 parents 04989f3 + ccf5093
commit b890cc9
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 4 deletions.
diff --git a/DragDropList.svelte b/DragDropList.svelte
@@ -2,6 +2,7 @@
     import {flip} from "svelte/animate";
     
     export let data = [];
+    export let removesItems = false;
 
     let ghost;
     let grabbed;
@@ -63,6 +64,10 @@
     function release(ev) {
         grabbed = null;
     }
+
+    function removeDatum(index) {
+        data = [...data.slice(0, index), ...data.slice(index + 1)];
+    }
 </script>
 
 <style>
@@ -79,7 +84,6 @@
 
     .item {
         box-sizing: border-box;
-        padding-right: 32px;
         display: inline-flex;
         width: 100%;
         min-height: 3em;
@@ -124,6 +128,10 @@
         border: 1px solid black;
     }
 
+    .delete {
+        width: 32px;
+    }
+
     #grabbed {
         opacity: 0.0;
     }
@@ -187,13 +195,13 @@
                         style={"visibility: " + (i > 0 ? "" : "hidden") + ";"}
                         on:click={function(ev) {moveDatum(i, i - 1)}}>
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 15.41L12 10.83l4.59 4.58L18 14l-6-6-6 6 1.41 1.41z"/></svg>
-                        </button>
+                    </button>
                     <button 
                         class="down" 
                         style={"visibility: " + (i < data.length - 1 ? "" : "hidden") + ";"}
                         on:click={function(ev) {moveDatum(i, i + 1)}}>
                         <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16px" height="16px"><path d="M0 0h24v24H0V0z" fill="none"/><path d="M7.41 8.59L12 13.17l4.59-4.58L18 10l-6 6-6-6 1.41-1.41z"/></svg>
-                        </button>
+                    </button>
                 </div>
 
                 {#if datum.html}
@@ -203,6 +211,15 @@
                 {:else}
                     <p>{datum}</p>
                 {/if}
+
+                <div class="buttons delete">
+                    {#if removesItems}
+                        <button
+                            on:click={function(ev) {removeDatum(i);}}>
+                            <svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16"><path d="M0 0h24v24H0z" fill="none"/><path d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"/></svg>
+                        </button>
+                    {/if}
+                </div>
             </div>
         {/each}
     </div>

diff --git a/README.md b/README.md
@@ -14,7 +14,7 @@ Sortable lists [made with Svelte](https://madewithsvelte.com/svelte-dragdroplist
 ### Usage
 
 [Basic REPL](https://svelte.dev/repl/6fb61b9868734493aec65eb53dc1a4bd?version=3.22.2)  
-[REPL with data binding, multiple datasets, IDs, and HTML items.](https://svelte.dev/repl/915db3b3ed704fddb7ddfb64bcbc2624?version=3.22.2)  
+[REPL with every feature!](https://svelte.dev/repl/915db3b3ed704fddb7ddfb64bcbc2624?version=3.22.2)  
 
 The simplest way to use the component is to pass it an array of unique strings.  If you `bind:data`, the source array will be updated as the user rearranges its items.
 ```js
@@ -27,6 +27,8 @@ The simplest way to use the component is to pass it an array of unique strings.
 <DragDropList bind:data={data}/>
 ```
 
+##### Unique IDs
+
 If you aren't sure that your strings will be unique, you should instead pass an array of objects, each with a unique ID:  
 
 ```js
@@ -36,6 +38,8 @@ let data = [{"id": 0, "text": "Boston"},
             {"id": 3, "text": "Denver"}];
 ```
 
+##### HTML
+
 You can also include an "html" attribute instead of "text".  It's up to you to make sure the html is clean.  
   If you want, you can even use both in one list.  
 ```js
@@ -45,6 +49,20 @@ let data = [{"id": 0, "text": "Adams"},
             {"id": 3, "html": "<p style='color: red;'>Denver</p>"}];
 ```
 
+##### Removable Items
+
+A delete button can be added to each item with the `removesItems` prop:
+```js
+<script>
+    import DragDrop from "./DragDrop.svelte";
+
+    data = ["Adams", "Boston", "Chicago", "Denver"];
+</script>
+
+<DragDrop bind:data={data} removesItems={true}/>
+```
+Note: _adding_ items is as simple as adding them to the data array.
+
 ### In Progress
 
 * Additional animations on drop