Update README.md

Author: MaxLeiter

README.md

@@ -1,16 +1,48 @@
-# Vue 3 + TypeScript + Vite
+# SortableJS-vue3
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+This is a thin wrapper around the great [SortableJS](https://github.com/SortableJS/Sortable) library. I had many issues migration from Vue.Draggable to vue.draggable.next, and after briefly investigating I decided that it was too complicated and a smaller solution was the answer. This wrapper tries to keep you as close to Sortable and vanilla JS as possible.
 
-## Recommended IDE Setup
+## Usage
+1. `yarn add sortablejs-vue3 sortablejs` or `npm install sortablejs-vue3 sortablejs`
+2. Import the component in your `<script setup>`: `import { Sortable } from 'sortablejs-vue'`
+3. Use the component:
 
-- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)
+```typescript
+<template>
+  <main>
+    <Sortable
+      :list="elements"
+      item-key="id"
+      :options="options"
+      @change="logEvent"
+      @choose="logEvent"
+      @unchoose="logEvent"
+      @start="logEvent"
+      @end="logEvent"
+      @add="logEvent"
+      @update="logEvent"
+      @sort="logEvent"
+      @remove="logEvent"
+      @filter="logEvent"
+      @move="logEvent"
+      @clone="logEvent"
+    >
+      <template #item="{element, index}">
+        <div class="draggable" :key="element.id">
+          {{ element.name }}
+        </div>
+      </template>
+    </Sortable>
+</template>
+```
 
-## Type Support For `.vue` Imports in TS
+4. The `list` and `item-key` props are necessary. The `options` prop is an object that can contain any SortableJS option. You can find a full list of them here: https://github.com/SortableJS/Sortable#options
 
-Since TypeScript cannot handle type information for `.vue` imports, they are shimmed to be a generic Vue component type by default. In most cases this is fine if you don't really care about component prop types outside of templates. However, if you wish to get actual prop types in `.vue` imports (for example to get props validation when using manual `h(...)` calls), you can enable Volar's Take Over mode by following these steps:
+## Development
+1. Run `yarn`
+2. `yarn dev` will start a web server with live reloading
+3. `yarn build` will build the production files
 
-1. Run `Extensions: Show Built-in Extensions` from VS Code's command palette, look for `TypeScript and JavaScript Language Features`, then right click and select `Disable (Workspace)`. By default, Take Over mode will enable itself if the default TypeScript extension is disabled.
-2. Reload the VS Code window by running `Developer: Reload Window` from the command palette.
+### Recommended IDE Setup
 
-You can learn more about Take Over mode [here](https://github.com/johnsoncodehk/volar/discussions/471).
+- [VS Code](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar)