{"version":3,"sources":["webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropAnimation.vue?b7fe","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDrop.vue?a0fb","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropSimple.vue?0848","webpack:///src/views/components/extra-components/drag-and-drop/DragAndDropSimple.vue","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropSimple.vue?fbed","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropSimple.vue","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropMultipleLists.vue?6880","webpack:///src/views/components/extra-components/drag-and-drop/DragAndDropMultipleLists.vue","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropMultipleLists.vue?b4f3","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropMultipleLists.vue","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropCloneList.vue?894e","webpack:///src/views/components/extra-components/drag-and-drop/DragAndDropCloneList.vue","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropCloneList.vue?eee1","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropCloneList.vue","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropAnimation.vue?1112","webpack:///src/views/components/extra-components/drag-and-drop/DragAndDropAnimation.vue","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropAnimation.vue?35e8","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropAnimation.vue?9d85","webpack:///src/views/components/extra-components/drag-and-drop/DragAndDrop.vue","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDrop.vue?2a22","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDrop.vue"],"names":["_node_modules_vue_cli_service_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_css_loader_index_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_lib_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_DragAndDropAnimation_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0__","__webpack_require__","_node_modules_vue_cli_service_node_modules_mini_css_extract_plugin_dist_loader_js_ref_6_oneOf_1_0_node_modules_css_loader_index_js_ref_6_oneOf_1_1_node_modules_vue_loader_lib_loaders_stylePostLoader_js_node_modules_postcss_loader_lib_index_js_ref_6_oneOf_1_2_node_modules_cache_loader_dist_cjs_js_ref_0_0_node_modules_vue_loader_lib_index_js_vue_loader_options_DragAndDropAnimation_vue_vue_type_style_index_0_lang_css___WEBPACK_IMPORTED_MODULE_0___default","n","render","_vm","this","_h","$createElement","_c","_self","attrs","id","_m","staticRenderFns","staticClass","href","target","rel","_v","DragAndDropSimplevue_type_template_id_4537b115_render","title","code-toggler","list","_l","item","index","key","language","_s","slot","DragAndDropSimplevue_type_template_id_4537b115_staticRenderFns","DragAndDropSimplevue_type_script_lang_js_","data","components","draggable","vuedraggable_common_default","a","Prism","vue_prism_component_common_default","drag_and_drop_DragAndDropSimplevue_type_script_lang_js_","component","Object","componentNormalizer","DragAndDropSimple","DragAndDropMultipleListsvue_type_template_id_bbba1a8a_render","color","list1","group","listItem","name","subtitle","email","text","list2","DragAndDropMultipleListsvue_type_template_id_bbba1a8a_staticRenderFns","DragAndDropMultipleListsvue_type_script_lang_js_","drag_and_drop_DragAndDropMultipleListsvue_type_script_lang_js_","DragAndDropMultipleLists_component","DragAndDropMultipleLists","DragAndDropCloneListvue_type_template_id_46eb038a_render","pull","put","DragAndDropCloneListvue_type_template_id_46eb038a_staticRenderFns","DragAndDropCloneListvue_type_script_lang_js_","drag_and_drop_DragAndDropCloneListvue_type_script_lang_js_","DragAndDropCloneList_component","DragAndDropCloneList","DragAndDropAnimationvue_type_template_id_5589a02d_render","DragAndDropAnimationvue_type_template_id_5589a02d_staticRenderFns","DragAndDropAnimationvue_type_script_lang_js_","drag_and_drop_DragAndDropAnimationvue_type_script_lang_js_","DragAndDropAnimation_component","DragAndDropAnimation","DragAndDropvue_type_script_lang_js_","drag_and_drop_DragAndDropvue_type_script_lang_js_","DragAndDrop_component","__webpack_exports__"],"mappings":"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","file":"js/chunk-f3c67876.27c105bb.js","sourcesContent":["import mod from \"-!../../../../../node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/lib/index.js??ref--6-oneOf-1-2!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DragAndDropAnimation.vue?vue&type=style&index=0&lang=css&\"; export default mod; export * from \"-!../../../../../node_modules/@vue/cli-service/node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../../../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../../../node_modules/postcss-loader/lib/index.js??ref--6-oneOf-1-2!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./DragAndDropAnimation.vue?vue&type=style&index=0&lang=css&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;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)}\nvar staticRenderFns = [function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;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\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;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(\"            \\n\"+_vm._s(_vm.list)+\"\\n        \")]),_c('template',{slot:\"codeContainer\"},[_vm._v(\"\\n<template>\\n  <vs-list>\\n    <draggable :list=\\\"list\\\" class=\\\"cursor-move\\\">\\n      <vs-list-item class=\\\"flex items-center p-1\\\" v-for=\\\"(item, index) in list\\\" :key=\\\"index\\\" :title=\\\"item\\\">\\n      </vs-list-item>\\n    </draggable>\\n  </vs-list>\\n</template>\\n\\n<script>\\nimport draggable from 'vuedraggable'\\n\\nexport default {\\n  data() {\\n    return {\\n      list: [\\n        \\\"Marzipan I love I love. Soufflé donut I love gummi bears powder. Candy danish biscuit.\\\",\\n        \\\"Halvah bonbon bonbon brownie sugar plum. Halvah I love cupcake I love.\\\",\\n        \\\"Cake muffin icing topping wafer topping gummi bears apple pie.\\\",\\n        \\\"Cotton candy gummi bears bear claw cake brownie jelly-o lemon drops croissant sweet roll.\\\",\\n      ]\\n    }\\n  },\\n  components: {\\n    draggable,\\n  }\\n}\\n</script>\\n        \")])],2)}\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: Vuesax Admin - VueJS Dashboard Admin Template\r\n      Author: Pixinvent\r\n    Author URL: http://www.themeforest.net/user/pixinvent\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\" :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; :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>","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../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--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../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=4537b115&\"\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-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 () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;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(\"\\nPeople Group 1: \"+_vm._s(_vm.list1)+\"\\n                \")])],1),_c('div',{staticClass:\"vx-col w-full md:w-1/2\"},[_c('prism',{staticClass:\"rounded-lg\",attrs:{\"language\":\"js\"}},[_vm._v(\"\\nPeople Group 2: \"+_vm._s(_vm.list2)+\"\\n                \")])],1)]),_c('template',{slot:\"codeContainer\"},[_vm._v(\"\\n<template>\\n  <vs-list>\\n    <vs-list-header title=\\\"People Group 1\\\" color=\\\"primary\\\"></vs-list-header>\\n\\n    <draggable :list=\\\"list1\\\" group=\\\"people\\\" class=\\\"p-2 cursor-move\\\">\\n      <vs-list-item v-for=\\\"(listItem, index) in list1\\\" :key=\\\"index\\\" :title=\\\"listItem.name\\\" :subtitle=\\\"listItem.email\\\">\\n        <vs-avatar slot=\\\"avatar\\\" :text=\\\"listItem.name\\\" />\\n      </vs-list-item>\\n    </draggable>\\n\\n  </vs-list>\\n\\n  <vs-list class=\\\"mt-5\\\">\\n    <vs-list-header title=\\\"People Group 2\\\" color=\\\"primary\\\"></vs-list-header>\\n\\n    <draggable :list=\\\"list2\\\" group=\\\"people\\\" class=\\\"p-2 cursor-move\\\">\\n      <vs-list-item v-for=\\\"(listItem, index) in list2\\\" :key=\\\"index\\\" :title=\\\"listItem.name\\\" :subtitle=\\\"listItem.email\\\">\\n        <vs-avatar slot=\\\"avatar\\\" :text=\\\"listItem.name\\\" />\\n      </vs-list-item>\\n    </draggable>\\n\\n  </vs-list>\\n</template>\\n\\n<script>\\nimport draggable from 'vuedraggable'\\n\\nexport default {\\n  data() {\\n    return {\\n      list1: [\\n        {\\n          name: \\\"Paz Joya\\\",\\n          email: \\\"girliness@spotlike.co.uk\\\",\\n        },\\n        {\\n          name: \\\"Sunshine Cose\\\",\\n          email: \\\"executrixship@equisized.edu\\\",\\n        },\\n        {\\n          name: \\\"Alba Dobbin\\\",\\n          email: \\\"bidding@demibob.or\\\",\\n        },\\n        {\\n          name: \\\"Marlin Hinchee\\\",\\n          email: \\\"preholding@scuffly.co.uk\\\",\\n        }\\n      ],\\n      list2: [\\n        {\\n          name: \\\"Leia Atienza\\\",\\n          email: \\\"unmeasurableness@interlamellar.co.uk\\\"\\n        },\\n        {\\n          name: \\\"Lashawna Vaudrainm\\\",\\n          email: \\\"soaking@khubber.com\\\"\\n        },\\n        {\\n          name: \\\"Liliana Henscheid\\\",\\n          email: \\\"lecideine@turndown.org\\\"\\n        },\\n        {\\n          name: \\\"Keven Kolter\\\",\\n          email: \\\"nontenure@anglicanum.co.uk\\\"\\n        }\\n      ]\\n    }\\n  },\\n  components: {\\n    draggable,\\n  }\\n}\\n</script>\\n        \")])],2)}\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: Vuesax Admin - VueJS Dashboard Admin Template\r\n      Author: Pixinvent\r\n    Author URL: http://www.themeforest.net/user/pixinvent\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\" :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\" :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; :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; :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--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../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--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../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=bbba1a8a&\"\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-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 () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;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(\"\\nTag Source: \"+_vm._s(_vm.list1)+\"\\n                \")])],1),_c('div',{staticClass:\"vx-col w-full sm:w-1/2\"},[_c('prism',{staticClass:\"rounded-lg\",attrs:{\"language\":\"js\"}},[_vm._v(\"\\nAdded tags: \"+_vm._s(_vm.list2)+\"\\n                \")])],1)]),_c('template',{slot:\"codeContainer\"},[_vm._v(\"\\n<template>\\n  <div>\\n    <h6 class=\\\"mt-5 mb-3\\\">Tag Source</h6>\\n    <draggable :list=\\\"list1\\\" :group=\\\"{name:'tags',  pull:'clone', put:false }\\\" class=\\\"p-2 cursor-move\\\">\\n      <vs-chip v-for=\\\"(listItem, index) in list1\\\" :key=\\\"index\\\"> \"+_vm._s(\"\\{\\{ listItem \\}\\}\")+\" </vs-chip>\\n    </draggable>\\n  </div>\\n  <div>\\n    <h6 class=\\\"mt-5 mb-3\\\">Your Tags</h6>\\n    <draggable :list=\\\"list2\\\" :group=\\\"{name: 'tags'}\\\" class=\\\"p-2 cursor-move\\\">\\n      <vs-chip v-for=\\\"(listItem, index) in list2\\\" :key=\\\"index\\\"> \"+_vm._s(\"\\{\\{ listItem \\}\\}\")+\" </vs-chip>\\n    </draggable>\\n  </div>\\n</template>\\n\\n<script>\\nimport draggable from 'vuedraggable'\\n\\nexport default {\\n  data() {\\n    return {\\n      list1: [\\\"youtube\\\", \\\"google\\\", \\\"facebook\\\", \\\"twitter\\\", \\\"instagram\\\", \\\"pinterest\\\", \\\"tinder\\\", \\\"slack\\\", \\\"discord\\\", \\\"github\\\", \\\"gitlab\\\"],\\n      list2: [\\\"google\\\", \\\"youtube\\\"]\\n    }\\n  },\\n  components: {\\n    draggable,\\n  }\\n}\\n</script>\\n        \")])],2)}\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: Vuesax Admin - VueJS Dashboard Admin Template\r\n      Author: Pixinvent\r\n    Author URL: http://www.themeforest.net/user/pixinvent\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\" :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\" :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; :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; :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--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../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--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../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=46eb038a&\"\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-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 () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;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(\"            \\n\"+_vm._s(_vm.list)+\"\\n        \")]),_c('template',{slot:\"codeContainer\"},[_vm._v(\"\\n<template>\\n  <vs-list>\\n    <vs-list-header title=\\\"People Group\\\" color=\\\"primary\\\"></vs-list-header>\\n\\n    <draggable :list=\\\"list\\\">\\n      <transition-group>\\n        <vs-list-item class=\\\"list-item\\\" v-for=\\\"listItem in list\\\" :key=\\\"listItem.email\\\" :title=\\\"listItem.name\\\" :subtitle=\\\"listItem.email\\\">\\n          <vs-avatar slot=\\\"avatar\\\" :text=\\\"listItem.name\\\" />\\n        </vs-list-item>\\n      </transition-group>\\n    </draggable>\\n    \\n  </vs-list>\\n</template>\\n<script>\\nimport draggable from 'vuedraggable'\\n\\nexport default {\\n  data() {\\n    return {\\n      list: [{\\n          name: \\\"Paz Joya\\\",\\n          email: \\\"girliness@spotlike.co.uk\\\",\\n        },\\n        {\\n          name: \\\"Sunshine Cose\\\",\\n          email: \\\"executrixship@equisized.edu\\\",\\n        },\\n        {\\n          name: \\\"Alba Dobbin\\\",\\n          email: \\\"bidding@demibob.or\\\",\\n        },\\n        {\\n          name: \\\"Marlin Hinchee\\\",\\n          email: \\\"preholding@scuffly.co.uk\\\",\\n        },\\n        {\\n          name: \\\"Leia Atienza\\\",\\n          email: \\\"unmeasurableness@interlamellar.co.uk\\\"\\n        },\\n        {\\n          name: \\\"Lashawna Vaudrainm\\\",\\n          email: \\\"soaking@khubber.com\\\"\\n        },\\n        {\\n          name: \\\"Liliana Henscheid\\\",\\n          email: \\\"lecideine@turndown.org\\\"\\n        },\\n        {\\n          name: \\\"Keven Kolter\\\",\\n          email: \\\"nontenure@anglicanum.co.uk\\\"\\n        }\\n      ],\\n    }\\n  },\\n  components: {\\n    draggable\\n  }\\n}\\n</script>\\n<style>\\n.list-item {\\n  transition: all 1s\\n}\\n</style>\\n        \")])],2)}\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: Vuesax Admin - VueJS Dashboard Admin Template\r\n      Author: Pixinvent\r\n    Author URL: http://www.themeforest.net/user/pixinvent\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\" :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; :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>","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../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--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../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=5589a02d&\"\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&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../../../../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: Vuesax Admin - VueJS Dashboard Admin Template\r\n      Author: Pixinvent\r\n    Author URL: http://www.themeforest.net/user/pixinvent\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>","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../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--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../node_modules/@vue/cli-plugin-babel/node_modules/babel-loader/lib/index.js!../../../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../../../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=2f698de8&\"\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-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":""}