diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index 2b8ad41..c468f5e 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -9,13 +9,13 @@ jobs: release: runs-on: ubuntu-latest steps: - - uses: actions/checkout@v2 - - uses: actions/setup-node@v2 + - uses: actions/checkout@v3 + - uses: actions/setup-node@v3 with: - node-version: '16' - registry-url: 'https://registry.npmjs.org' + node-version: "16" + registry-url: "https://registry.npmjs.org" - run: yarn - run: yarn build - run: yarn publish env: - NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} \ No newline at end of file + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/.prettierignore b/.prettierignore new file mode 100644 index 0000000..e0f21d0 --- /dev/null +++ b/.prettierignore @@ -0,0 +1,20 @@ +node_modules +dist +dist-ssr +*.local + +# Editor directories and files +.vscode/* +!.vscode/extensions.json +.idea +.DS_Store +*.suo +*.ntvs* +*.njsproj +*.sln +*.sw? + +.vercel + +# Custom +sortablejs-*.tgz diff --git a/.prettierrc.json b/.prettierrc.json new file mode 100644 index 0000000..0967ef4 --- /dev/null +++ b/.prettierrc.json @@ -0,0 +1 @@ +{} diff --git a/README.md b/README.md index 11ae70d..56cb760 100644 --- a/README.md +++ b/README.md @@ -4,9 +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. 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 tries to keep you as close to Sortable as possible (wrapper libaries seem to re-implement or unnecessarily wrap a lot of code). - -Note that this library is small enough (see [Sortable.vue](https://github.com/MaxLeiter/sortablejs-vue3/blob/main/src/components/Sortable.vue) for what you really need) that I recommend including it in your project without using npm and importing it as a local component. All you need is the linked file. +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 \? @@ -15,23 +13,25 @@ Note that this library is small enough (see [Sortable.vue](https://github.com/Ma - `shopify/draggable` and [`vue-shopify-dragable`](https://github.com/zjffun/vue-shopify-draggable) seemed promising but they don't supported nested components ## Usage + You can see a demo with more complete code at [https://sortablejs-vue3.maxleiter.com](https://sortablejs-vue3.maxleiter.com). 1. Install the package: - ```bash - yarn add sortablejs-vue3 sortablejs - ``` +```bash +yarn add sortablejs-vue3 sortablejs +``` - or +or - ```bash - npm install sortablejs-vue3 sortablejs - ``` +```bash +npm install sortablejs-vue3 sortablejs +``` 2. Import the component in your ` - - - - - - -`}} - -

Open your console to view the events being logged while you interact with the list below. @@ -210,7 +65,13 @@ main {

@@ -247,7 +108,7 @@ main { } #app .instructions code { - font-size: .9rem; + font-size: 0.9rem; } #app .instructions li { @@ -308,7 +169,7 @@ main { } #app a:after { - content: ''; + content: ""; position: absolute; width: 100%; transform: scaleX(0); diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue index c8fede4..426dd90 100644 --- a/src/components/HelloWorld.vue +++ b/src/components/HelloWorld.vue @@ -1,61 +1,67 @@ + diff --git a/src/components/Sortable.vue b/src/components/Sortable.vue index 0bb8916..3e1d13c 100644 --- a/src/components/Sortable.vue +++ b/src/components/Sortable.vue @@ -1,8 +1,9 @@