{"version":3,"sources":["webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropAnimation.vue?9257","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDrop.vue","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropSimple.vue","webpack:///src/views/components/extra-components/drag-and-drop/DragAndDropSimple.vue","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropSimple.vue?3c3a","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropSimple.vue?6420","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropMultipleLists.vue","webpack:///src/views/components/extra-components/drag-and-drop/DragAndDropMultipleLists.vue","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropMultipleLists.vue?bd8c","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropMultipleLists.vue?099a","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropCloneList.vue","webpack:///src/views/components/extra-components/drag-and-drop/DragAndDropCloneList.vue","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropCloneList.vue?5d42","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropCloneList.vue?4f94","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropAnimation.vue","webpack:///src/views/components/extra-components/drag-and-drop/DragAndDropAnimation.vue","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropAnimation.vue?0881","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropAnimation.vue?4efb","webpack:///src/views/components/extra-components/drag-and-drop/DragAndDrop.vue","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDrop.vue?7f47","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDrop.vue?f05f"],"names":["render","_vm","this","_c","_self","attrs","_m","staticRenderFns","staticClass","_v","list","_l","item","index","key","_s","slot","data","components","draggable","Prism","component","list1","listItem","name","email","list2","pull","put","DragAndDropSimple","DragAndDropMultipleLists","DragAndDropCloneList","DragAndDropAnimation"],"mappings":"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","file":"js/chunk-5ef438d8.70b9b354.js","sourcesContent":["export * from \"-!../../../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--7-oneOf-1-0!../../../../../node_modules/css-loader/dist/cjs.js??ref--7-oneOf-1-1!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/src/index.js??ref--7-oneOf-1-2!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./DragAndDropAnimation.vue?vue&type=style&index=0&id=584fc0ec&prod&lang=css&\"","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('div',{attrs:{\"id\":\"extra-component-drag-and-drop-demo\"}},[_vm._m(0),_c('drag-and-drop-simple'),_c('drag-and-drop-multiple-lists'),_c('drag-and-drop-clone-list'),_c('drag-and-drop-animation')],1)\n}\nvar staticRenderFns = [function (){var _vm=this,_c=_vm._self._c;return _c('p',{staticClass:\"mb-4\"},[_c('a',{attrs:{\"href\":\"https://github.com/SortableJS/Vue.Draggable\",\"target\":\"_blank\",\"rel\":\"nofollow\"}},[_vm._v(\"Vue.Draggable\")]),_vm._v(\" - Vue component allowing drag-and-drop and synchronization with view model array. Based on and offering all features of Sortable.js\")])\n}]\n\nexport { render, staticRenderFns }","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('vx-card',{attrs:{\"title\":\"Simple\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"Simple Draggable list with in sync to original list. Remove \"),_c('code',[_vm._v(\"list\")]),_vm._v(\" prop to break synchronization with original list.\")]),_c('div',{staticClass:\"mt-5\"},[_c('vs-list',[_c('draggable',{staticClass:\"cursor-move\",attrs:{\"list\":_vm.list}},_vm._l((_vm.list),function(item,index){return _c('vs-list-item',{key:index,staticClass:\"flex items-center p-1\",attrs:{\"title\":item}})}),1)],1)],1),_c('prism',{staticClass:\"rounded-lg\",attrs:{\"language\":\"js\"}},[_vm._v(\" \"+_vm._s(_vm.list)+\" \")]),_c('template',{slot:\"codeContainer\"},[_vm._v(\" <template> <vs-list> <draggable :list=\\\"list\\\" class=\\\"cursor-move\\\"> <vs-list-item class=\\\"flex items-center p-1\\\" v-for=\\\"(item, index) in list\\\" v-bind:key=\\\"index\\\" :title=\\\"item\\\"> </vs-list-item> </draggable> </vs-list> </template> <script> import draggable from 'vuedraggable' export default { data() { return { list: [ \\\"Marzipan I love I love. Soufflé donut I love gummi bears powder. Candy danish biscuit.\\\", \\\"Halvah bonbon bonbon brownie sugar plum. Halvah I love cupcake I love.\\\", \\\"Cake muffin icing topping wafer topping gummi bears apple pie.\\\", \\\"Cotton candy gummi bears bear claw cake brownie jelly-o lemon drops croissant sweet roll.\\\", ] } }, components: { draggable, } } </script> \")])],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: DragAndDropSimple.vue\r\n    Description: Simple Drag and Drop\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n      Author: Miguel Arenas\r\n    Author URL: http://github.com/mxaxaxbx\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"Simple\" code-toggler>\r\n        <p>Simple Draggable list with in sync to original list. Remove <code>list</code> prop to break synchronization with original list.</p>\r\n\r\n        <div class=\"mt-5\">\r\n            <vs-list>\r\n                <draggable :list=\"list\" class=\"cursor-move\">\r\n                    <vs-list-item class=\"flex items-center p-1\" v-for=\"(item, index) in list\" v-bind:key=\"index\" :title=\"item\">\r\n                    </vs-list-item>\r\n                </draggable>\r\n            </vs-list>\r\n        </div>\r\n\r\n        <prism language=\"js\" class=\"rounded-lg\">\r\n{{ list }}\r\n        </prism>\r\n\r\n        <template slot=\"codeContainer\">\r\n&lt;template&gt;\r\n  &lt;vs-list&gt;\r\n    &lt;draggable :list=&quot;list&quot; class=&quot;cursor-move&quot;&gt;\r\n      &lt;vs-list-item class=&quot;flex items-center p-1&quot; v-for=&quot;(item, index) in list&quot; v-bind:key=&quot;index&quot; :title=&quot;item&quot;&gt;\r\n      &lt;/vs-list-item&gt;\r\n    &lt;/draggable&gt;\r\n  &lt;/vs-list&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\nimport draggable from 'vuedraggable'\r\n\r\nexport default {\r\n  data() {\r\n    return {\r\n      list: [\r\n        &quot;Marzipan I love I love. Soufflé donut I love gummi bears powder. Candy danish biscuit.&quot;,\r\n        &quot;Halvah bonbon bonbon brownie sugar plum. Halvah I love cupcake I love.&quot;,\r\n        &quot;Cake muffin icing topping wafer topping gummi bears apple pie.&quot;,\r\n        &quot;Cotton candy gummi bears bear claw cake brownie jelly-o lemon drops croissant sweet roll.&quot;,\r\n      ]\r\n    }\r\n  },\r\n  components: {\r\n    draggable,\r\n  }\r\n}\r\n&lt;/script&gt;\r\n        </template>\r\n    </vx-card>\r\n</template>\r\n\r\n<script>\r\nimport draggable from 'vuedraggable'\r\nimport Prism from 'vue-prism-component'\r\n\r\nexport default {\r\n    data() {\r\n        return {\r\n            list: [\r\n                \"Marzipan I love I love. Soufflé donut I love gummi bears powder. Candy danish biscuit.\",\r\n                \"Halvah bonbon bonbon brownie sugar plum. Halvah I love cupcake I love.\",\r\n                \"Cake muffin icing topping wafer topping gummi bears apple pie.\",\r\n                \"Cotton candy gummi bears bear claw cake brownie jelly-o lemon drops croissant sweet roll.\",\r\n            ]\r\n        }\r\n    },\r\n    components: {\r\n        draggable,\r\n        Prism\r\n    }\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./DragAndDropSimple.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./DragAndDropSimple.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./DragAndDropSimple.vue?vue&type=template&id=4521919e&\"\nimport script from \"./DragAndDropSimple.vue?vue&type=script&lang=js&\"\nexport * from \"./DragAndDropSimple.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('vx-card',{attrs:{\"title\":\"Multiple Lists\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"Drag and drop items of more than one list. Add same \"),_c('code',[_vm._v(\"group\")]),_vm._v(\" to \"),_c('code',[_vm._v(\"group\")]),_vm._v(\" prop\")]),_c('div',{staticClass:\"vx-row\"},[_c('div',{staticClass:\"vx-col w-full md:w-1/2\"},[_c('vs-list',[_c('vs-list-header',{attrs:{\"title\":\"People Group 1\",\"color\":\"primary\"}}),_c('draggable',{staticClass:\"p-2 cursor-move\",attrs:{\"list\":_vm.list1,\"group\":\"people\"}},_vm._l((_vm.list1),function(listItem,index){return _c('vs-list-item',{key:index,attrs:{\"title\":listItem.name,\"subtitle\":listItem.email}},[_c('vs-avatar',{attrs:{\"slot\":\"avatar\",\"text\":listItem.name},slot:\"avatar\"})],1)}),1)],1)],1),_c('div',{staticClass:\"vx-col w-full md:w-1/2\"},[_c('vs-list',{staticClass:\"mt-5\"},[_c('vs-list-header',{attrs:{\"title\":\"People Group 2\",\"color\":\"primary\"}}),_c('draggable',{staticClass:\"p-2 cursor-move\",attrs:{\"list\":_vm.list2,\"group\":\"people\"}},_vm._l((_vm.list2),function(listItem,index){return _c('vs-list-item',{key:index,attrs:{\"title\":listItem.name,\"subtitle\":listItem.email}},[_c('vs-avatar',{attrs:{\"slot\":\"avatar\",\"text\":listItem.name},slot:\"avatar\"})],1)}),1)],1)],1)]),_c('div',{staticClass:\"vx-row\"},[_c('div',{staticClass:\"vx-col w-full md:w-1/2\"},[_c('prism',{staticClass:\"rounded-lg\",attrs:{\"language\":\"js\"}},[_vm._v(\" People Group 1: \"+_vm._s(_vm.list1)+\" \")])],1),_c('div',{staticClass:\"vx-col w-full md:w-1/2\"},[_c('prism',{staticClass:\"rounded-lg\",attrs:{\"language\":\"js\"}},[_vm._v(\" People Group 2: \"+_vm._s(_vm.list2)+\" \")])],1)]),_c('template',{slot:\"codeContainer\"},[_vm._v(\" <template> <vs-list> <vs-list-header title=\\\"People Group 1\\\" color=\\\"primary\\\"></vs-list-header> <draggable :list=\\\"list1\\\" group=\\\"people\\\" class=\\\"p-2 cursor-move\\\"> <vs-list-item v-for=\\\"(listItem, index) in list1\\\" v-bind:key=\\\"index\\\" :title=\\\"listItem.name\\\" :subtitle=\\\"listItem.email\\\"> <vs-avatar slot=\\\"avatar\\\" :text=\\\"listItem.name\\\" /> </vs-list-item> </draggable> </vs-list> <vs-list class=\\\"mt-5\\\"> <vs-list-header title=\\\"People Group 2\\\" color=\\\"primary\\\"></vs-list-header> <draggable :list=\\\"list2\\\" group=\\\"people\\\" class=\\\"p-2 cursor-move\\\"> <vs-list-item v-for=\\\"(listItem, index) in list2\\\" v-bind:key=\\\"index\\\" :title=\\\"listItem.name\\\" :subtitle=\\\"listItem.email\\\"> <vs-avatar slot=\\\"avatar\\\" :text=\\\"listItem.name\\\" /> </vs-list-item> </draggable> </vs-list> </template> <script> import draggable from 'vuedraggable' export default { data() { return { list1: [ { name: \\\"Paz Joya\\\", email: \\\"girliness@spotlike.co.uk\\\", }, { name: \\\"Sunshine Cose\\\", email: \\\"executrixship@equisized.edu\\\", }, { name: \\\"Alba Dobbin\\\", email: \\\"bidding@demibob.or\\\", }, { name: \\\"Marlin Hinchee\\\", email: \\\"preholding@scuffly.co.uk\\\", } ], list2: [ { name: \\\"Leia Atienza\\\", email: \\\"unmeasurableness@interlamellar.co.uk\\\" }, { name: \\\"Lashawna Vaudrainm\\\", email: \\\"soaking@khubber.com\\\" }, { name: \\\"Liliana Henscheid\\\", email: \\\"lecideine@turndown.org\\\" }, { name: \\\"Keven Kolter\\\", email: \\\"nontenure@anglicanum.co.uk\\\" } ] } }, components: { draggable, } } </script> \")])],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: DragAndDropMultipleLists.vue\r\n    Description: Drag and Drop to multiple lists\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n      Author: Miguel Arenas\r\n    Author URL: http://github.com/mxaxaxbx\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"Multiple Lists\" code-toggler>\r\n        <p>Drag and drop items of more than one list. Add same <code>group</code> to <code>group</code> prop</p>\r\n\r\n        <!-- List 1 -->\r\n        <div class=\"vx-row\">\r\n            <div class=\"vx-col w-full md:w-1/2\">\r\n                <vs-list>\r\n                    <vs-list-header title=\"People Group 1\" color=\"primary\"></vs-list-header>\r\n                    <draggable :list=\"list1\" group=\"people\" class=\"p-2 cursor-move\">\r\n                        <vs-list-item v-for=\"(listItem, index) in list1\" v-bind:key=\"index\" :title=\"listItem.name\" :subtitle=\"listItem.email\"><vs-avatar slot=\"avatar\" :text=\"listItem.name\" /></vs-list-item>\r\n                    </draggable>\r\n                </vs-list>\r\n            </div>\r\n            <div class=\"vx-col w-full md:w-1/2\">\r\n                <vs-list class=\"mt-5\">\r\n                    <vs-list-header title=\"People Group 2\" color=\"primary\"></vs-list-header>\r\n                    <draggable :list=\"list2\" group=\"people\" class=\"p-2 cursor-move\">\r\n                    <vs-list-item v-for=\"(listItem, index) in list2\" v-bind:key=\"index\" :title=\"listItem.name\" :subtitle=\"listItem.email\"><vs-avatar slot=\"avatar\" :text=\"listItem.name\" /></vs-list-item>\r\n                    </draggable>\r\n                </vs-list>\r\n            </div>\r\n\r\n        </div>\r\n\r\n        <!-- List 2 -->\r\n        <div class=\"vx-row\">\r\n            <div class=\"vx-col w-full md:w-1/2\">\r\n                <prism language=\"js\" class=\"rounded-lg\">\r\nPeople Group 1: {{ list1 }}\r\n                </prism>\r\n            </div>\r\n            <div class=\"vx-col w-full md:w-1/2\">\r\n                <prism language=\"js\" class=\"rounded-lg\">\r\nPeople Group 2: {{ list2 }}\r\n                </prism>\r\n            </div>\r\n        </div>\r\n\r\n        <template slot=\"codeContainer\">\r\n&lt;template&gt;\r\n  &lt;vs-list&gt;\r\n    &lt;vs-list-header title=&quot;People Group 1&quot; color=&quot;primary&quot;&gt;&lt;/vs-list-header&gt;\r\n\r\n    &lt;draggable :list=&quot;list1&quot; group=&quot;people&quot; class=&quot;p-2 cursor-move&quot;&gt;\r\n      &lt;vs-list-item v-for=&quot;(listItem, index) in list1&quot; v-bind:key=&quot;index&quot; :title=&quot;listItem.name&quot; :subtitle=&quot;listItem.email&quot;&gt;\r\n        &lt;vs-avatar slot=&quot;avatar&quot; :text=&quot;listItem.name&quot; /&gt;\r\n      &lt;/vs-list-item&gt;\r\n    &lt;/draggable&gt;\r\n\r\n  &lt;/vs-list&gt;\r\n\r\n  &lt;vs-list class=&quot;mt-5&quot;&gt;\r\n    &lt;vs-list-header title=&quot;People Group 2&quot; color=&quot;primary&quot;&gt;&lt;/vs-list-header&gt;\r\n\r\n    &lt;draggable :list=&quot;list2&quot; group=&quot;people&quot; class=&quot;p-2 cursor-move&quot;&gt;\r\n      &lt;vs-list-item v-for=&quot;(listItem, index) in list2&quot; v-bind:key=&quot;index&quot; :title=&quot;listItem.name&quot; :subtitle=&quot;listItem.email&quot;&gt;\r\n        &lt;vs-avatar slot=&quot;avatar&quot; :text=&quot;listItem.name&quot; /&gt;\r\n      &lt;/vs-list-item&gt;\r\n    &lt;/draggable&gt;\r\n\r\n  &lt;/vs-list&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\nimport draggable from 'vuedraggable'\r\n\r\nexport default {\r\n  data() {\r\n    return {\r\n      list1: [\r\n        {\r\n          name: &quot;Paz Joya&quot;,\r\n          email: &quot;girliness@spotlike.co.uk&quot;,\r\n        },\r\n        {\r\n          name: &quot;Sunshine Cose&quot;,\r\n          email: &quot;executrixship@equisized.edu&quot;,\r\n        },\r\n        {\r\n          name: &quot;Alba Dobbin&quot;,\r\n          email: &quot;bidding@demibob.or&quot;,\r\n        },\r\n        {\r\n          name: &quot;Marlin Hinchee&quot;,\r\n          email: &quot;preholding@scuffly.co.uk&quot;,\r\n        }\r\n      ],\r\n      list2: [\r\n        {\r\n          name: &quot;Leia Atienza&quot;,\r\n          email: &quot;unmeasurableness@interlamellar.co.uk&quot;\r\n        },\r\n        {\r\n          name: &quot;Lashawna Vaudrainm&quot;,\r\n          email: &quot;soaking@khubber.com&quot;\r\n        },\r\n        {\r\n          name: &quot;Liliana Henscheid&quot;,\r\n          email: &quot;lecideine@turndown.org&quot;\r\n        },\r\n        {\r\n          name: &quot;Keven Kolter&quot;,\r\n          email: &quot;nontenure@anglicanum.co.uk&quot;\r\n        }\r\n      ]\r\n    }\r\n  },\r\n  components: {\r\n    draggable,\r\n  }\r\n}\r\n&lt;/script&gt;\r\n        </template>\r\n    </vx-card>\r\n</template>\r\n\r\n<script>\r\nimport draggable from 'vuedraggable'\r\nimport Prism from 'vue-prism-component'\r\n\r\nexport default {\r\n    data() {\r\n        return {\r\n            list1: [\r\n                {\r\n                    name: \"Paz Joya\",\r\n                    email: \"girliness@spotlike.co.uk\",\r\n                },\r\n                {\r\n                    name: \"Sunshine Cose\",\r\n                    email: \"executrixship@equisized.edu\",\r\n                },\r\n                {\r\n                    name: \"Alba Dobbin\",\r\n                    email: \"bidding@demibob.or\",\r\n                },\r\n                {\r\n                    name: \"Marlin Hinchee\",\r\n                    email: \"preholding@scuffly.co.uk\",\r\n                }\r\n            ],\r\n            list2: [\r\n                {\r\n                    name: \"Leia Atienza\",\r\n                    email: \"unmeasurableness@interlamellar.co.uk\"\r\n                },\r\n                {\r\n                    name: \"Lashawna Vaudrainm\",\r\n                    email: \"soaking@khubber.com\"\r\n                },\r\n                {\r\n                    name: \"Liliana Henscheid\",\r\n                    email: \"lecideine@turndown.org\"\r\n                },\r\n                {\r\n                    name: \"Keven Kolter\",\r\n                    email: \"nontenure@anglicanum.co.uk\"\r\n                }\r\n            ]\r\n        }\r\n    },\r\n    components: {\r\n        draggable,\r\n        Prism\r\n    }\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./DragAndDropMultipleLists.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./DragAndDropMultipleLists.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./DragAndDropMultipleLists.vue?vue&type=template&id=76cc356d&\"\nimport script from \"./DragAndDropMultipleLists.vue?vue&type=script&lang=js&\"\nexport * from \"./DragAndDropMultipleLists.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('vx-card',{attrs:{\"title\":\"Clone List\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"Clone list items from another existing list. Add \"),_c('code',[_vm._v(\"pull\")]),_vm._v(\" and \"),_c('code',[_vm._v(\"put\")]),_vm._v(\" to \"),_c('code',[_vm._v(\"group\")]),_vm._v(\" prop\")]),_c('div',{staticClass:\"vx-row\"},[_c('div',{staticClass:\"vx-col w-full sm:w-1/2\"},[_c('h6',{staticClass:\"mt-5 mb-3\"},[_vm._v(\"Tag Source\")]),_c('draggable',{staticClass:\"p-2 cursor-move\",attrs:{\"list\":_vm.list1,\"group\":{name:'tags',  pull:'clone', put:false }}},_vm._l((_vm.list1),function(listItem,index){return _c('vs-chip',{key:index},[_vm._v(_vm._s(listItem))])}),1)],1),_c('div',{staticClass:\"vx-col w-full sm:w-1/2\"},[_c('h6',{staticClass:\"mt-5 mb-3\"},[_vm._v(\"Your Tags\")]),_c('draggable',{staticClass:\"p-2 cursor-move\",attrs:{\"list\":_vm.list2,\"group\":{name: 'tags'}}},_vm._l((_vm.list2),function(listItem,index){return _c('vs-chip',{key:index},[_vm._v(_vm._s(listItem))])}),1)],1)]),_c('div',{staticClass:\"vx-row\"},[_c('div',{staticClass:\"vx-col w-full sm:w-1/2\"},[_c('prism',{staticClass:\"rounded-lg\",attrs:{\"language\":\"js\"}},[_vm._v(\" Tag Source: \"+_vm._s(_vm.list1)+\" \")])],1),_c('div',{staticClass:\"vx-col w-full sm:w-1/2\"},[_c('prism',{staticClass:\"rounded-lg\",attrs:{\"language\":\"js\"}},[_vm._v(\" Added tags: \"+_vm._s(_vm.list2)+\" \")])],1)]),_c('template',{slot:\"codeContainer\"},[_vm._v(\" <template> <div> <h6 class=\\\"mt-5 mb-3\\\">Tag Source</h6> <draggable :list=\\\"list1\\\" :group=\\\"{name:'tags', pull:'clone', put:false }\\\" class=\\\"p-2 cursor-move\\\"> <vs-chip v-for=\\\"(listItem, index) in list1\\\" v-bind:key=\\\"index\\\"> \"+_vm._s(\"\\{\\{ listItem \\}\\}\")+\" </vs-chip> </draggable> </div> <div> <h6 class=\\\"mt-5 mb-3\\\">Your Tags</h6> <draggable :list=\\\"list2\\\" :group=\\\"{name: 'tags'}\\\" class=\\\"p-2 cursor-move\\\"> <vs-chip v-for=\\\"(listItem, index) in list2\\\" v-bind:key=\\\"index\\\"> \"+_vm._s(\"\\{\\{ listItem \\}\\}\")+\" </vs-chip> </draggable> </div> </template> <script> import draggable from 'vuedraggable' export default { data() { return { list1: [\\\"youtube\\\", \\\"google\\\", \\\"facebook\\\", \\\"twitter\\\", \\\"instagram\\\", \\\"pinterest\\\", \\\"tinder\\\", \\\"slack\\\", \\\"discord\\\", \\\"github\\\", \\\"gitlab\\\"], list2: [\\\"google\\\", \\\"youtube\\\"] } }, components: { draggable, } } </script> \")])],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: DragAndDropClone.vue\r\n    Description: Clone from one list to another\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n      Author: Miguel Arenas\r\n    Author URL: http://github.com/mxaxaxbx\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"Clone List\" code-toggler>\r\n        <p>Clone list items from another existing list. Add <code>pull</code> and <code>put</code> to <code>group</code> prop</p>\r\n\r\n        <!-- List 1 -->\r\n        <div class=\"vx-row\">\r\n            <div class=\"vx-col w-full sm:w-1/2\">\r\n                <h6 class=\"mt-5 mb-3\">Tag Source</h6>\r\n                <draggable :list=\"list1\" :group=\"{name:'tags',  pull:'clone', put:false }\" class=\"p-2 cursor-move\">\r\n                    <vs-chip v-for=\"(listItem, index) in list1\" v-bind:key=\"index\">{{ listItem }}</vs-chip>\r\n                </draggable>\r\n            </div>\r\n            <div class=\"vx-col w-full sm:w-1/2\">\r\n                <h6 class=\"mt-5 mb-3\">Your Tags</h6>\r\n                <draggable :list=\"list2\" :group=\"{name: 'tags'}\" class=\"p-2 cursor-move\">\r\n                    <vs-chip v-for=\"(listItem, index) in list2\" v-bind:key=\"index\">{{ listItem }}</vs-chip>\r\n                </draggable>\r\n            </div>\r\n        </div>\r\n\r\n        <!-- List 2 -->\r\n        <div class=\"vx-row\">\r\n            <div class=\"vx-col w-full sm:w-1/2\">\r\n                <prism language=\"js\" class=\"rounded-lg\">\r\nTag Source: {{ list1 }}\r\n                </prism>\r\n            </div>\r\n            <div class=\"vx-col w-full sm:w-1/2\">\r\n                <prism language=\"js\" class=\"rounded-lg\">\r\nAdded tags: {{ list2 }}\r\n                </prism>\r\n            </div>\r\n        </div>\r\n\r\n        <template slot=\"codeContainer\">\r\n&lt;template&gt;\r\n  &lt;div&gt;\r\n    &lt;h6 class=&quot;mt-5 mb-3&quot;&gt;Tag Source&lt;/h6&gt;\r\n    &lt;draggable :list=&quot;list1&quot; :group=&quot;{name:'tags',  pull:'clone', put:false }&quot; class=&quot;p-2 cursor-move&quot;&gt;\r\n      &lt;vs-chip v-for=&quot;(listItem, index) in list1&quot; v-bind:key=&quot;index&quot;&gt; {{ \"\\{\\{ listItem \\}\\}\" }} &lt;/vs-chip&gt;\r\n    &lt;/draggable&gt;\r\n  &lt;/div&gt;\r\n  &lt;div&gt;\r\n    &lt;h6 class=&quot;mt-5 mb-3&quot;&gt;Your Tags&lt;/h6&gt;\r\n    &lt;draggable :list=&quot;list2&quot; :group=&quot;{name: 'tags'}&quot; class=&quot;p-2 cursor-move&quot;&gt;\r\n      &lt;vs-chip v-for=&quot;(listItem, index) in list2&quot; v-bind:key=&quot;index&quot;&gt; {{ \"\\{\\{ listItem \\}\\}\" }} &lt;/vs-chip&gt;\r\n    &lt;/draggable&gt;\r\n  &lt;/div&gt;\r\n&lt;/template&gt;\r\n\r\n&lt;script&gt;\r\nimport draggable from 'vuedraggable'\r\n\r\nexport default {\r\n  data() {\r\n    return {\r\n      list1: [&quot;youtube&quot;, &quot;google&quot;, &quot;facebook&quot;, &quot;twitter&quot;, &quot;instagram&quot;, &quot;pinterest&quot;, &quot;tinder&quot;, &quot;slack&quot;, &quot;discord&quot;, &quot;github&quot;, &quot;gitlab&quot;],\r\n      list2: [&quot;google&quot;, &quot;youtube&quot;]\r\n    }\r\n  },\r\n  components: {\r\n    draggable,\r\n  }\r\n}\r\n&lt;/script&gt;\r\n        </template>\r\n    </vx-card>\r\n</template>\r\n\r\n<script>\r\nimport draggable from 'vuedraggable'\r\nimport Prism from 'vue-prism-component'\r\n\r\nexport default {\r\n    data() {\r\n        return {\r\n            list1: [\"youtube\", \"google\", \"facebook\", \"twitter\", \"instagram\", \"pinterest\", \"tinder\", \"slack\", \"discord\", \"github\", \"gitlab\"],\r\n            list2: [\"google\", \"youtube\"]\r\n        }\r\n    },\r\n    components: {\r\n        draggable,\r\n        Prism\r\n    }\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./DragAndDropCloneList.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./DragAndDropCloneList.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./DragAndDropCloneList.vue?vue&type=template&id=391d40b8&\"\nimport script from \"./DragAndDropCloneList.vue?vue&type=script&lang=js&\"\nexport * from \"./DragAndDropCloneList.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","var render = function render(){var _vm=this,_c=_vm._self._c;return _c('vx-card',{attrs:{\"title\":\"With Animation\",\"code-toggler\":\"\"}},[_c('p',[_vm._v(\"Add animation to changes using \"),_c('code',[_vm._v(\"transition-group\")]),_vm._v(\".\")]),_c('div',{staticClass:\"mt-5\"},[_c('vs-list',[_c('vs-list-header',{attrs:{\"title\":\"People Group\",\"color\":\"primary\"}}),_c('draggable',{staticClass:\"cursor-move\",attrs:{\"list\":_vm.list}},[_c('transition-group',_vm._l((_vm.list),function(listItem){return _c('vs-list-item',{key:listItem.email,staticClass:\"list-item\",attrs:{\"title\":listItem.name,\"subtitle\":listItem.email}},[_c('vs-avatar',{attrs:{\"slot\":\"avatar\",\"text\":listItem.name},slot:\"avatar\"})],1)}),1)],1)],1)],1),_c('prism',{staticClass:\"rounded-lg\",attrs:{\"language\":\"js\"}},[_vm._v(\" \"+_vm._s(_vm.list)+\" \")]),_c('template',{slot:\"codeContainer\"},[_vm._v(\" <template> <vs-list> <vs-list-header title=\\\"People Group\\\" color=\\\"primary\\\"></vs-list-header> <draggable :list=\\\"list\\\"> <transition-group> <vs-list-item class=\\\"list-item\\\" v-for=\\\"listItem in list\\\" v-bind:key=\\\"listItem.email\\\" :title=\\\"listItem.name\\\" :subtitle=\\\"listItem.email\\\"> <vs-avatar slot=\\\"avatar\\\" :text=\\\"listItem.name\\\" /> </vs-list-item> </transition-group> </draggable> </vs-list> </template> <script> import draggable from 'vuedraggable' export default { data() { return { list: [{ name: \\\"Paz Joya\\\", email: \\\"girliness@spotlike.co.uk\\\", }, { name: \\\"Sunshine Cose\\\", email: \\\"executrixship@equisized.edu\\\", }, { name: \\\"Alba Dobbin\\\", email: \\\"bidding@demibob.or\\\", }, { name: \\\"Marlin Hinchee\\\", email: \\\"preholding@scuffly.co.uk\\\", }, { name: \\\"Leia Atienza\\\", email: \\\"unmeasurableness@interlamellar.co.uk\\\" }, { name: \\\"Lashawna Vaudrainm\\\", email: \\\"soaking@khubber.com\\\" }, { name: \\\"Liliana Henscheid\\\", email: \\\"lecideine@turndown.org\\\" }, { name: \\\"Keven Kolter\\\", email: \\\"nontenure@anglicanum.co.uk\\\" } ], } }, components: { draggable } } </script> <style> .list-item { transition: all 1s } </style> \")])],2)\n}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- =========================================================================================\r\n    File Name: DragAndDropAnimation.vue\r\n    Description: Add animation to drag and drop\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n      Author: Miguel Arenas\r\n    Author URL: http://github.com/mxaxaxbx\r\n========================================================================================== -->\r\n\r\n\r\n<template>\r\n    <vx-card title=\"With Animation\" code-toggler>\r\n        <p>Add animation to changes using <code>transition-group</code>.</p>\r\n\r\n        <div class=\"mt-5\">\r\n            <vs-list>\r\n                <vs-list-header title=\"People Group\" color=\"primary\"></vs-list-header>\r\n                <draggable :list=\"list\" class=\"cursor-move\">\r\n                    <transition-group>\r\n                        <vs-list-item class=\"list-item\" v-for=\"listItem in list\" v-bind:key=\"listItem.email\" :title=\"listItem.name\" :subtitle=\"listItem.email\"><vs-avatar slot=\"avatar\" :text=\"listItem.name\" /></vs-list-item>\r\n                    </transition-group>\r\n                </draggable>\r\n            </vs-list>\r\n        </div>\r\n\r\n        <prism language=\"js\" class=\"rounded-lg\">\r\n{{ list }}\r\n        </prism>\r\n\r\n        <template slot=\"codeContainer\">\r\n&lt;template&gt;\r\n  &lt;vs-list&gt;\r\n    &lt;vs-list-header title=&quot;People Group&quot; color=&quot;primary&quot;&gt;&lt;/vs-list-header&gt;\r\n\r\n    &lt;draggable :list=&quot;list&quot;&gt;\r\n      &lt;transition-group&gt;\r\n        &lt;vs-list-item class=&quot;list-item&quot; v-for=&quot;listItem in list&quot; v-bind:key=&quot;listItem.email&quot; :title=&quot;listItem.name&quot; :subtitle=&quot;listItem.email&quot;&gt;\r\n          &lt;vs-avatar slot=&quot;avatar&quot; :text=&quot;listItem.name&quot; /&gt;\r\n        &lt;/vs-list-item&gt;\r\n      &lt;/transition-group&gt;\r\n    &lt;/draggable&gt;\r\n\r\n  &lt;/vs-list&gt;\r\n&lt;/template&gt;\r\n&lt;script&gt;\r\nimport draggable from 'vuedraggable'\r\n\r\nexport default {\r\n  data() {\r\n    return {\r\n      list: [{\r\n          name: &quot;Paz Joya&quot;,\r\n          email: &quot;girliness@spotlike.co.uk&quot;,\r\n        },\r\n        {\r\n          name: &quot;Sunshine Cose&quot;,\r\n          email: &quot;executrixship@equisized.edu&quot;,\r\n        },\r\n        {\r\n          name: &quot;Alba Dobbin&quot;,\r\n          email: &quot;bidding@demibob.or&quot;,\r\n        },\r\n        {\r\n          name: &quot;Marlin Hinchee&quot;,\r\n          email: &quot;preholding@scuffly.co.uk&quot;,\r\n        },\r\n        {\r\n          name: &quot;Leia Atienza&quot;,\r\n          email: &quot;unmeasurableness@interlamellar.co.uk&quot;\r\n        },\r\n        {\r\n          name: &quot;Lashawna Vaudrainm&quot;,\r\n          email: &quot;soaking@khubber.com&quot;\r\n        },\r\n        {\r\n          name: &quot;Liliana Henscheid&quot;,\r\n          email: &quot;lecideine@turndown.org&quot;\r\n        },\r\n        {\r\n          name: &quot;Keven Kolter&quot;,\r\n          email: &quot;nontenure@anglicanum.co.uk&quot;\r\n        }\r\n      ],\r\n    }\r\n  },\r\n  components: {\r\n    draggable\r\n  }\r\n}\r\n&lt;/script&gt;\r\n&lt;style&gt;\r\n.list-item {\r\n  transition: all 1s\r\n}\r\n&lt;/style&gt;\r\n        </template>\r\n    </vx-card>\r\n</template>\r\n\r\n<script>\r\nimport draggable from 'vuedraggable'\r\nimport Prism from 'vue-prism-component'\r\n\r\nexport default {\r\n    data() {\r\n        return {\r\n            list: [\r\n                {\r\n                    name: \"Paz Joya\",\r\n                    email: \"girliness@spotlike.co.uk\",\r\n                },\r\n                {\r\n                    name: \"Sunshine Cose\",\r\n                    email: \"executrixship@equisized.edu\",\r\n                },\r\n                {\r\n                    name: \"Alba Dobbin\",\r\n                    email: \"bidding@demibob.or\",\r\n                },\r\n                {\r\n                    name: \"Marlin Hinchee\",\r\n                    email: \"preholding@scuffly.co.uk\",\r\n                },\r\n                {\r\n                    name: \"Leia Atienza\",\r\n                    email: \"unmeasurableness@interlamellar.co.uk\"\r\n                },\r\n                {\r\n                    name: \"Lashawna Vaudrainm\",\r\n                    email: \"soaking@khubber.com\"\r\n                },\r\n                {\r\n                    name: \"Liliana Henscheid\",\r\n                    email: \"lecideine@turndown.org\"\r\n                },\r\n                {\r\n                    name: \"Keven Kolter\",\r\n                    email: \"nontenure@anglicanum.co.uk\"\r\n                }\r\n            ],\r\n        }\r\n    },\r\n    components: {\r\n        draggable,\r\n        Prism\r\n    }\r\n}\r\n</script>\r\n\r\n<style>\r\n.list-item { transition: all .5s }\r\n</style>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./DragAndDropAnimation.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./DragAndDropAnimation.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./DragAndDropAnimation.vue?vue&type=template&id=584fc0ec&\"\nimport script from \"./DragAndDropAnimation.vue?vue&type=script&lang=js&\"\nexport * from \"./DragAndDropAnimation.vue?vue&type=script&lang=js&\"\nimport style0 from \"./DragAndDropAnimation.vue?vue&type=style&index=0&id=584fc0ec&prod&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports","<!-- =========================================================================================\r\n    File Name: DragAndDrop.vue\r\n    Description: Drag and Drop (third-party) - Imports page portions\r\n    ----------------------------------------------------------------------------------------\r\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\r\n      Author: Miguel Arenas\r\n    Author URL: http://github.com/mxaxaxbx\r\n========================================================================================== -->\r\n\r\n<template>\r\n    <div id=\"extra-component-drag-and-drop-demo\">\r\n\r\n        <p class=\"mb-4\"><a href=\"https://github.com/SortableJS/Vue.Draggable\" target=\"_blank\" rel=\"nofollow\">Vue.Draggable</a> - Vue component allowing drag-and-drop and synchronization with view model array. Based on and offering all features of Sortable.js</p>\r\n\r\n        <drag-and-drop-simple></drag-and-drop-simple>\r\n        <drag-and-drop-multiple-lists></drag-and-drop-multiple-lists>\r\n        <drag-and-drop-clone-list></drag-and-drop-clone-list>\r\n        <drag-and-drop-animation></drag-and-drop-animation>\r\n    </div>\r\n</template>\r\n\r\n<script>\r\nimport DragAndDropSimple from \"./DragAndDropSimple.vue\"\r\nimport DragAndDropMultipleLists from \"./DragAndDropMultipleLists.vue\"\r\nimport DragAndDropCloneList from \"./DragAndDropCloneList.vue\"\r\nimport DragAndDropAnimation from \"./DragAndDropAnimation.vue\"\r\n\r\nexport default {\r\n    components: {\r\n        DragAndDropSimple,\r\n        DragAndDropMultipleLists,\r\n        DragAndDropCloneList,\r\n        DragAndDropAnimation,\r\n    }\r\n}\r\n</script>\r\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./DragAndDrop.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--13-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/index.js??vue-loader-options!./DragAndDrop.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./DragAndDrop.vue?vue&type=template&id=578eef2b&\"\nimport script from \"./DragAndDrop.vue?vue&type=script&lang=js&\"\nexport * from \"./DragAndDrop.vue?vue&type=script&lang=js&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../node_modules/@vue/cli-service/node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n  script,\n  render,\n  staticRenderFns,\n  false,\n  null,\n  null,\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}