diff --git a/README.md b/README.md index 9f3de9b..d86f00f 100644 --- a/README.md +++ b/README.md @@ -61,9 +61,7 @@ yarn add vue-draggable-next ```html -
- {{element.name}} -
+
{{element.name}}
``` @@ -167,7 +165,7 @@ Required: `false`
Default: `(original) => { return original;}`
Function called on the source component to clone element when clone option is true. The unique argument is the viewModel element to be cloned and the returned value is its cloned version.
-By default vue.draggable reuses the viewModel element, so you have to use this hook if you want to clone or deep clone it. +By default vue-draggable-next reuses the viewModel element, so you have to use this hook if you want to clone or deep clone it. #### move @@ -243,7 +241,7 @@ HTML: ## 🌸 Thanks -This project is heavily inspired by the following awesome projects. +This project is heavily inspired by the following awesome vue 2 projects. - [SortableJS/Vue.Draggable](https://github.com/SortableJS/Vue.Draggable) diff --git a/demo/App.vue b/demo/App.vue index 4a23957..364d5ea 100644 --- a/demo/App.vue +++ b/demo/App.vue @@ -9,20 +9,20 @@ vue-draggable-next
-
{{ tab.name }} -
+
-
+ +
@@ -31,13 +31,18 @@ import { defineComponent, defineAsyncComponent, ref } from 'vue' const tabs = [ - { name: 'Simple', component: 'basic' }, - { name: 'Clone', component: 'clone' }, - { name: 'Transition Group', component: 'transition-group' }, - { name: 'Nested', component: 'nested-component' }, - { name: 'Vuex', component: 'vuex-component' }, - { name: 'V-Model', component: 'v-model-component' }, + { path: 'basic', name: 'Simple', component: 'basic' }, + { path: 'clone', name: 'Clone', component: 'clone' }, { + path: 'transition', + name: 'Transition Group', + component: 'transition-group', + }, + { path: 'nested', name: 'Nested', component: 'nested-component' }, + { path: 'vuex', name: 'Vuex', component: 'vuex-component' }, + { path: 'vmode', name: 'V-Model', component: 'v-model-component' }, + { + path: 'third-party', name: 'Third Party', component: 'third-party', }, @@ -66,4 +71,7 @@ export default defineComponent({ .component-container { min-height: 600px; } +.router-link-active { + @apply bg-gray-400 !important; +} diff --git a/demo/components/basic.vue b/demo/components/basic.vue index 0cdee79..148bfa6 100644 --- a/demo/components/basic.vue +++ b/demo/components/basic.vue @@ -24,7 +24,7 @@ + + diff --git a/demo/components/nested-component.vue b/demo/components/nested-component.vue index a7978eb..f249224 100644 --- a/demo/components/nested-component.vue +++ b/demo/components/nested-component.vue @@ -9,9 +9,10 @@ diff --git a/demo/components/nested.vue b/demo/components/nested.vue index 3d9bc28..1d80bf7 100644 --- a/demo/components/nested.vue +++ b/demo/components/nested.vue @@ -9,7 +9,7 @@