Skip to content

Commit

Permalink
Fix README example to use nextTick, add multiple groups example (#97)
Browse files Browse the repository at this point in the history
  • Loading branch information
MaxLeiter committed Oct 29, 2023
1 parent 201bff6 commit ef3eee6
Show file tree
Hide file tree
Showing 9 changed files with 918 additions and 17 deletions.
22 changes: 22 additions & 0 deletions .eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,22 @@
require("@rushstack/eslint-patch/modern-module-resolution");

module.exports = {
env: {
node: true,
},
extends: [
"eslint:recommended",
"plugin:vue/vue3-recommended",
"@vue/eslint-config-typescript",
"prettier",
],
parser: "vue-eslint-parser",
parserOptions: {
parser: "@typescript-eslint/parser",
sourceType: "module",
},
rules: {
// override/add rules settings here, such as:
// 'vue/no-unused-vars': 'error'
},
};
12 changes: 8 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ import { Sortable } from "sortablejs-vue3";
```

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
- The `tag` prop is optional and defaults to `div`. It's the HTML node type for the outer element of the included template/slot.
- The `tag` prop is optional and defaults to `div`. It's the HTML node type for the outer element of the included template/slot.

### Props

Expand Down Expand Up @@ -102,8 +102,8 @@ You can listen to Sortable events by adding the listeners to the `Sortable` comp
You need to mount any plugins you want outside of [the default](https://github.com/SortableJS/Sortable#plugins) before importing this library. For example, the below is correct:

```typescript
import SortableJs from 'sortablejs';
import { Swap } from 'sortablejs/modular/sortable.core.esm';
import SortableJs from "sortablejs";
import { Swap } from "sortablejs/modular/sortable.core.esm";
SortableJs.mount(new Swap());

import { Sortable } from "sortablejs-vue3";
Expand All @@ -116,14 +116,18 @@ No changes are necessary to work with Vuex or another store. Just pass `store.st
```typescript
const moveItemInArray = <T>(array: T[], from: number, to: number) => {
const item = array.splice(from, 1)[0];
array.splice(to, 0, item);
nextTick(() => array.splice(to, 0, item));
};

onEnd(event) { moveItemInArray(store.state.items, event.oldIndex, event.newIndex) }
```

You may also want to see the SortableJS store documentation [here](https://github.com/SortableJS/Sortable#store).

### Examples

- [./src/examples/WithStore.vue](./src/examples/WithStore.vue) - A simple example with a store

## Development

1. Run `yarn` to install dependencies
Expand Down
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,7 @@
"@types/node": "18.14.2",
"@types/sortablejs": "1.15.0",
"@vitejs/plugin-vue": "4.0.0",
"eslint-config-prettier": "^9.0.0",
"prettier": "2.8.4",
"terser": "5.16.5",
"typescript": "4.9.5",
Expand Down

1 comment on commit ef3eee6

@vercel
Copy link

@vercel vercel bot commented on ef3eee6 Oct 29, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.