Double Click Item to emit the value of item

.gitignore

@@ -2,3 +2,4 @@
 /public/build/
 
 .DS_Store
+.vscode/settings.json

README.md

@@ -2,11 +2,16 @@
 
 Sortable lists [made with Svelte](https://madewithsvelte.com/svelte-dragdroplist).  [Available from NPM!](https://www.npmjs.com/package/svelte-dragdroplist)  
 
+### Credit
+* This package is an extension of [svelte-dragdroplist](https://www.npmjs.com/package/svelte-dragdroplist) created by [jwlarocque](https://www.npmjs.com/~jwlarocque), who is original author.
+* `svelte-dragdroplist-clickable` was created with features required for our own project.
+
 ### Why this component?
 
 * Bidirectional binding - data order updates as soon as the user drags a list item into a new position, even before it is dropped
 * Full touch support - doesn't use the HTML5 drag and drop API
 * Accessible - includes buttons to move elements without dragging
+* Double clicking on element returns its contents
 * Easier than writing a new one, probably.
 
 ### Usage
@@ -36,6 +41,10 @@ let data = [{"id": 0, "text": "Boston"},
             {"id": 3, "text": "Denver"}];
 ```
 
+##### Active Item Color
+
+Clicked item now has a different background and text color.
+
 ##### HTML
 
 You can also include an "html" attribute instead of "text".  It's up to you to make sure the html is clean.  
@@ -55,13 +64,22 @@ A delete button can be added to each item with the `removesItems` prop:
 ```
 Note: _adding_ items is as simple as adding them to the data array.
 
+##### Getting Item Data on Double Click
+
+Double clicking items will return the value of the item with `itemDblClick` event:
+```js
+<DragDropList bind:data={data} itemDblClick={(e) => { console.log(e)}}/>
+```
+
 ### Styling
 
 To style the list and its elements from a parent component or global stylesheet, prefix your selectors with `.dragdroplist`.  You may need to increase the specificity of your selectors or even use the `!important` rule in order to override the classes applied by Svelte.  For example:
 
 ```css
 :global(.dragdroplist) {} /* entire component */
 :global(.dragdroplist > .list > div.item) {} /* list item */
+:global(.dragdroplist > .list > div.item.item-active) {} /* list item active */
+:global(.dragdroplist > .list > div.item.item-active svg) {} /* styling the svg icons when an item is in active state */
 :global(.dragdroplist div.buttons > button.down) {} /* move down button */
 :global(.dragdroplist div.content) {} /* text/html contents of item */
 ```
@@ -70,4 +88,5 @@ If you only need to style the contents of an item, you can also use an object wi
 
 ### In Progress
 
-* Additional animations on drop  
+* Additional animations on drop  `see original package in Credit`
+* Option for Additional buttons along with removeItems button