diff --git a/README.md b/README.md index bb629f6..a4d1278 100644 --- a/README.md +++ b/README.md @@ -4,7 +4,7 @@ ![GIF of the demo being used](./readme/demo.gif) -This is a thin wrapper around the great [SortableJS](https://github.com/SortableJS/Sortable) library for Vue 2 & 3. I had many issues migrating 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 attempts to keep you as close to Sortable as possible. +This is a thin wrapper around the great [SortableJS](https://github.com/SortableJS/Sortable) library. I had many issues migrating 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 attempts to keep you as close to Sortable as possible. ### Why not use \? @@ -124,14 +124,6 @@ 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). -## Vue 2 support - -If you are using version prior to `vue@2.7.0`, `@vue/composition-api` is required to be installed to use SortableJS-vue3 with Vue 2. - -Everything else should be similar to the example above for Vue 3. - -Under the hood, we use [Vue Demi](https://github.com/vueuse/vue-demi) a tool that allows us to write Universal Vue Libraries for Vue 2 & 3. - ## Development 1. Run `yarn` to install dependencies diff --git a/package.json b/package.json index 5f65851..4c17329 100644 --- a/package.json +++ b/package.json @@ -36,17 +36,11 @@ }, "dependencies": { "sortablejs": "^1.15.0", - "vue": "^3.2.37", - "vue-demi": "^0.13.11" + "vue": "^3.2.37" }, "peerDependencies": { "sortablejs": "^1.15.0", - "vue": "^2.0.0 || >=3.0.0" - }, - "peerDependenciesMeta": { - "@vue/composition-api": { - "optional": true - } + "vue": "^3.2.25" }, "devDependencies": { "@types/node": "18.14.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8246991..876463a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10,13 +10,11 @@ specifiers: typescript: 4.9.5 vite: 4.1.4 vue: ^3.2.37 - vue-demi: ^0.13.11 vue-tsc: 1.2.0 dependencies: sortablejs: 1.15.0 vue: 3.2.41 - vue-demi: 0.13.11_vue@3.2.41 devDependencies: '@types/node': 18.14.2 @@ -387,7 +385,7 @@ packages: '@vue/shared': 3.2.41 estree-walker: 2.0.2 magic-string: 0.25.9 - postcss: 8.4.21 + postcss: 8.4.20 source-map: 0.6.1 /@vue/compiler-sfc/3.2.47: @@ -477,8 +475,8 @@ packages: resolution: {integrity: sha512-BHGyyGN3Q97EZx0taMQ+OLNuZcW3d37ZEVmEAyeoA9ERdGvm9Irc/0Fua8SNyOtV1w6BS4q25wbMzJujO9HIfQ==} dev: true - /acorn/8.8.1: - resolution: {integrity: sha512-7zFpHzhnqYKrkYdUjF1HI1bzd0VygEGX8lFk4k5zVMqHEoES+P+7TKI+EvLO9WVMJ8eekdO0aDEK044xTXwPPA==} + /acorn/8.8.2: + resolution: {integrity: sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==} engines: {node: '>=0.4.0'} hasBin: true dev: true @@ -599,6 +597,14 @@ packages: /picocolors/1.0.0: resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==} + /postcss/8.4.20: + resolution: {integrity: sha512-6Q04AXR1212bXr5fh03u8aAwbLxAQNGQ/Q1LNa0VfOI06ZAlhPHtQvE4OIdpj4kLThXilalPnmDSOD65DcHt+g==} + engines: {node: ^10 || ^12 || >=14} + dependencies: + nanoid: 3.3.4 + picocolors: 1.0.0 + source-map-js: 1.0.2 + /postcss/8.4.21: resolution: {integrity: sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==} engines: {node: ^10 || ^12 || >=14} @@ -606,6 +612,7 @@ packages: nanoid: 3.3.4 picocolors: 1.0.0 source-map-js: 1.0.2 + dev: true /prettier/2.8.4: resolution: {integrity: sha512-vIS4Rlc2FNh0BySk3Wkd6xmwxB0FpOndW5fisM5H8hsZSxU2VWVB5CWIkIjWvrHjIhxk2g3bfMKM87zNTrZddw==} @@ -622,8 +629,8 @@ packages: supports-preserve-symlinks-flag: 1.0.0 dev: true - /rollup/3.17.3: - resolution: {integrity: sha512-p5LaCXiiOL/wrOkj8djsIDFmyU9ysUxcyW+EKRLHb6TKldJzXpImjcRSR+vgo09DBdofGcOoLOsRyxxG2n5/qQ==} + /rollup/3.20.2: + resolution: {integrity: sha512-3zwkBQl7Ai7MFYQE0y1MeQ15+9jsi7XxfrqwTb/9EK8D9C9+//EBR4M+CuA1KODRaNbFez/lWxA5vhEGZp4MUg==} engines: {node: '>=14.18.0', npm: '>=8.0.0'} hasBin: true optionalDependencies: @@ -651,7 +658,6 @@ packages: /sourcemap-codec/1.4.8: resolution: {integrity: sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==} - deprecated: Please use @jridgewell/sourcemap-codec instead /supports-preserve-symlinks-flag/1.0.0: resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} @@ -664,7 +670,7 @@ packages: hasBin: true dependencies: '@jridgewell/source-map': 0.3.2 - acorn: 8.8.1 + acorn: 8.8.2 commander: 2.20.3 source-map-support: 0.5.21 dev: true @@ -708,27 +714,12 @@ packages: esbuild: 0.16.17 postcss: 8.4.21 resolve: 1.22.1 - rollup: 3.17.3 + rollup: 3.20.2 terser: 5.16.5 optionalDependencies: fsevents: 2.3.2 dev: true - /vue-demi/0.13.11_vue@3.2.41: - resolution: {integrity: sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==} - engines: {node: '>=12'} - hasBin: true - requiresBuild: true - peerDependencies: - '@vue/composition-api': ^1.0.0-rc.1 - vue: ^3.0.0-0 || ^2.6.0 - peerDependenciesMeta: - '@vue/composition-api': - optional: true - dependencies: - vue: 3.2.41 - dev: false - /vue-template-compiler/2.7.14: resolution: {integrity: sha512-zyA5Y3ArvVG0NacJDkkzJuPQDF8RFeRlzV2vLeSnhSpieO6LK2OVbdLPi5MPPs09Ii+gMO8nY4S3iKQxBxDmWQ==} dependencies: diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue index faa3d4e..ff9ed30 100644 --- a/src/components/HelloWorld.vue +++ b/src/components/HelloWorld.vue @@ -1,6 +1,6 @@