From a63047b79a8303c19f31ef372246a0d4fc10e991 Mon Sep 17 00:00:00 2001 From: Stijn Slats <47820758+stijns96@users.noreply.github.com> Date: Wed, 26 Mar 2025 11:07:47 +0100 Subject: [PATCH] docs(accordion): add drag and drop example (#3684) Co-authored-by: Benjamin Canac --- .../accordion/AccordionDragAndDropExample.vue | 33 +++++++++++++++++++ docs/content/3.components/accordion.md | 12 +++++++ docs/package.json | 2 ++ pnpm-lock.yaml | 16 +++++++-- 4 files changed, 61 insertions(+), 2 deletions(-) create mode 100644 docs/app/components/content/examples/accordion/AccordionDragAndDropExample.vue diff --git a/docs/app/components/content/examples/accordion/AccordionDragAndDropExample.vue b/docs/app/components/content/examples/accordion/AccordionDragAndDropExample.vue new file mode 100644 index 00000000..e530bb5c --- /dev/null +++ b/docs/app/components/content/examples/accordion/AccordionDragAndDropExample.vue @@ -0,0 +1,33 @@ + + + diff --git a/docs/content/3.components/accordion.md b/docs/content/3.components/accordion.md index 1bdd9c83..c5c9daa5 100644 --- a/docs/content/3.components/accordion.md +++ b/docs/content/3.components/accordion.md @@ -292,6 +292,18 @@ props: --- :: +### With drag and drop + +Use the [`useSortable`](https://vueuse.org/integrations/useSortable/) composable from [`@vueuse/integrations`](https://vueuse.org/integrations/README.html) to enable drag and drop functionality on the accordion. This integration wraps [Sortable.js](https://sortablejs.github.io/Sortable/) to provide a seamless drag and drop experience. + +The `useSortable` composable accepts various options, see the [Usage](https://vueuse.org/integrations/useSortable/#usage) for more examples. + +::component-example +--- +name: 'accordion-drag-and-drop-example' +--- +:: + ## API ### Props diff --git a/docs/package.json b/docs/package.json index cc179bc4..cd43cbcf 100644 --- a/docs/package.json +++ b/docs/package.json @@ -16,6 +16,8 @@ "@octokit/rest": "^21.1.1", "@rollup/plugin-yaml": "^4.1.2", "@vueuse/nuxt": "^13.0.0", + "@vueuse/integrations": "^13.0.0", + "sortablejs": "^1.15.6", "joi": "^17.13.3", "motion-v": "0.13.1", "nuxt": "^3.16.1", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 392aa747..3310f703 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -60,7 +60,7 @@ importers: version: 13.0.0(vue@3.5.13(typescript@5.8.2)) '@vueuse/integrations': specifier: ^13.0.0 - version: 13.0.0(change-case@5.4.4)(fuse.js@7.1.0)(vue@3.5.13(typescript@5.8.2)) + version: 13.0.0(change-case@5.4.4)(fuse.js@7.1.0)(sortablejs@1.15.6)(vue@3.5.13(typescript@5.8.2)) colortranslator: specifier: ^4.1.0 version: 4.1.0 @@ -254,6 +254,9 @@ importers: '@rollup/plugin-yaml': specifier: ^4.1.2 version: 4.1.2(rollup@4.34.9) + '@vueuse/integrations': + specifier: ^13.0.0 + version: 13.0.0(change-case@5.4.4)(fuse.js@7.1.0)(sortablejs@1.15.6)(vue@3.5.13(typescript@5.8.2)) '@vueuse/nuxt': specifier: ^13.0.0 version: 13.0.0(magicast@0.3.5)(nuxt@3.16.1(@parcel/watcher@2.5.1)(@types/node@22.13.12)(better-sqlite3@11.9.1)(db0@0.3.1(better-sqlite3@11.9.1))(eslint@9.23.0(jiti@2.4.2))(ioredis@5.6.0)(lightningcss@1.29.2)(magicast@0.3.5)(meow@13.2.0)(optionator@0.9.4)(rollup@4.34.9)(terser@5.39.0)(typescript@5.8.2)(vite@6.2.3(@types/node@22.13.12)(jiti@2.4.2)(lightningcss@1.29.2)(terser@5.39.0)(yaml@2.7.0))(vue-tsc@2.2.0(typescript@5.8.2))(yaml@2.7.0))(vue@3.5.13(typescript@5.8.2)) @@ -281,6 +284,9 @@ importers: shiki-transformer-color-highlight: specifier: ^1.0.0 version: 1.0.0 + sortablejs: + specifier: ^1.15.6 + version: 1.15.6 superstruct: specifier: ^2.0.2 version: 2.0.2 @@ -6078,6 +6084,9 @@ packages: resolution: {integrity: sha512-D3YaD0aRxR3mEcqnidIs7ReYJFVzWdd6fXJYUM8ixcQcJRGTka/b3saV0KflYhyVJXKhb947GndU35SxYNResQ==} engines: {node: '>= 10.0.0', npm: '>= 3.0.0'} + sortablejs@1.15.6: + resolution: {integrity: sha512-aNfiuwMEpfBM/CN6LY0ibyhxPfPbyFeBTYJKCvzkJ2GkUpazIt3H+QIPAMHwqQ7tMKaHz1Qj+rJJCqljnf4p3A==} + source-map-js@1.2.1: resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} engines: {node: '>=0.10.0'} @@ -9687,7 +9696,7 @@ snapshots: '@vueuse/shared': 13.0.0(vue@3.5.13(typescript@5.8.2)) vue: 3.5.13(typescript@5.8.2) - '@vueuse/integrations@13.0.0(change-case@5.4.4)(fuse.js@7.1.0)(vue@3.5.13(typescript@5.8.2))': + '@vueuse/integrations@13.0.0(change-case@5.4.4)(fuse.js@7.1.0)(sortablejs@1.15.6)(vue@3.5.13(typescript@5.8.2))': dependencies: '@vueuse/core': 13.0.0(vue@3.5.13(typescript@5.8.2)) '@vueuse/shared': 13.0.0(vue@3.5.13(typescript@5.8.2)) @@ -9695,6 +9704,7 @@ snapshots: optionalDependencies: change-case: 5.4.4 fuse.js: 7.1.0 + sortablejs: 1.15.6 '@vueuse/metadata@10.11.1': {} @@ -13918,6 +13928,8 @@ snapshots: ip-address: 9.0.5 smart-buffer: 4.2.0 + sortablejs@1.15.6: {} + source-map-js@1.2.1: {} source-map-support@0.5.21: