svelte-dragdroplist - npm Package Compare versions

Comparing version 1.0.2 to 1.1.0

DragDropList.svelte

@@ -5,2 +5,3 @@ <script>
     export let data = [];
+    export let removesItems = false;
 
@@ -67,2 +68,6 @@ let ghost;
     }
+
+    function removeDatum(index) {
+        data = [...data.slice(0, index), ...data.slice(index + 1)];
+    }
 </script>
@@ -84,3 +89,2 @@
         box-sizing: border-box;
-        padding-right: 32px;
         display: inline-flex;
@@ -130,2 +134,6 @@ width: 100%;
 
+    .delete {
+        width: 32px;
+    }
+
     #grabbed {
@@ -194,3 +202,3 @@ opacity: 0.0;
                         <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 
@@ -201,3 +209,3 @@ class="down"
                         <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>
@@ -212,2 +220,11 @@
                 {/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>
@@ -214,0 +231,0 @@ {/each}

package.json

@@ -5,3 +5,3 @@ {
   "svelte": "DragDropList.svelte",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "peerDependencies": {
@@ -8,0 +8,0 @@ "svelte": "^3.0.0"

README.md

 # Svelte-DragDropList
 
-Sortable lists with Svelte.  [Try the REPL!](https://svelte.dev/repl/915db3b3ed704fddb7ddfb64bcbc2624?version=3.22.2)  
+Sortable lists [made with Svelte](https://madewithsvelte.com/svelte-dragdroplist).  
+[Try the REPL!](https://svelte.dev/repl/915db3b3ed704fddb7ddfb64bcbc2624?version=3.22.2)  
+[Available from NPM](https://www.npmjs.com/package/svelte-dragdroplist)  
 
@@ -15,3 +17,3 @@ ### Why this component?
 [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)  
 
@@ -29,2 +31,4 @@ 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.
 
+##### 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:  
@@ -39,2 +43,4 @@
 
+##### HTML
+
 You can also include an "html" attribute instead of "text".  It's up to you to make sure the html is clean.  
@@ -49,4 +55,18 @@ If you want, you can even use both in one list.
 
+##### 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  

No alert changes

Improved metrics

Total package byte prevSize

10508

12.34%

Number of lines in readme file

68

41.67%

No dependency changes