{"version":3,"sources":["webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropAnimation.vue?2133","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDrop.vue?8641","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropSimple.vue?ca37","webpack:///src/views/components/extra-components/drag-and-drop/DragAndDropSimple.vue","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropSimple.vue?4253","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropSimple.vue","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropMultipleLists.vue?038f","webpack:///src/views/components/extra-components/drag-and-drop/DragAndDropMultipleLists.vue","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropMultipleLists.vue?a198","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropMultipleLists.vue","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropCloneList.vue?7971","webpack:///src/views/components/extra-components/drag-and-drop/DragAndDropCloneList.vue","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropCloneList.vue?a660","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropCloneList.vue","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropAnimation.vue?8bb2","webpack:///src/views/components/extra-components/drag-and-drop/DragAndDropAnimation.vue","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropAnimation.vue?34c4","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDropAnimation.vue?389b","webpack:///src/views/components/extra-components/drag-and-drop/DragAndDrop.vue","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDrop.vue?ba34","webpack:///./src/views/components/extra-components/drag-and-drop/DragAndDrop.vue"],"names":["render","_vm","this","_h","$createElement","_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-8657599a.fdae0876.js","sourcesContent":["export * from \"-!../../../../../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/src/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 }","<!-- =========================================================================================\n    File Name: DragAndDropSimple.vue\n    Description: Simple Drag and Drop\n    ----------------------------------------------------------------------------------------\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\n      Author: Pixinvent\n    Author URL: http://www.themeforest.net/user/pixinvent\n========================================================================================== -->\n\n\n<template>\n    <vx-card title=\"Simple\" code-toggler>\n        <p>Simple Draggable list with in sync to original list. Remove <code>list</code> prop to break synchronization with original list.</p>\n\n        <div class=\"mt-5\">\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        </div>\n\n        <prism language=\"js\" class=\"rounded-lg\">\n{{ list }}\n        </prism>\n\n        <template slot=\"codeContainer\">\n&lt;template&gt;\n  &lt;vs-list&gt;\n    &lt;draggable :list=&quot;list&quot; class=&quot;cursor-move&quot;&gt;\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;\n      &lt;/vs-list-item&gt;\n    &lt;/draggable&gt;\n  &lt;/vs-list&gt;\n&lt;/template&gt;\n\n&lt;script&gt;\nimport draggable from 'vuedraggable'\n\nexport default {\n  data() {\n    return {\n      list: [\n        &quot;Marzipan I love I love. Soufflé donut I love gummi bears powder. Candy danish biscuit.&quot;,\n        &quot;Halvah bonbon bonbon brownie sugar plum. Halvah I love cupcake I love.&quot;,\n        &quot;Cake muffin icing topping wafer topping gummi bears apple pie.&quot;,\n        &quot;Cotton candy gummi bears bear claw cake brownie jelly-o lemon drops croissant sweet roll.&quot;,\n      ]\n    }\n  },\n  components: {\n    draggable,\n  }\n}\n&lt;/script&gt;\n        </template>\n    </vx-card>\n</template>\n\n<script>\nimport draggable from 'vuedraggable'\nimport Prism from 'vue-prism-component'\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    Prism\n  }\n}\n</script>\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../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/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=34bd9301&\"\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',[_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 }","<!-- =========================================================================================\n    File Name: DragAndDropMultipleLists.vue\n    Description: Drag and Drop to multiple lists\n    ----------------------------------------------------------------------------------------\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\n      Author: Pixinvent\n    Author URL: http://www.themeforest.net/user/pixinvent\n========================================================================================== -->\n\n\n<template>\n    <vx-card title=\"Multiple Lists\" code-toggler>\n        <p>Drag and drop items of more than one list. Add same <code>group</code> to <code>group</code> prop</p>\n\n        <!-- List 1 -->\n        <div class=\"vx-row\">\n            <div class=\"vx-col w-full md:w-1/2\">\n                <vs-list>\n                    <vs-list-header title=\"People Group 1\" color=\"primary\"></vs-list-header>\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\"><vs-avatar slot=\"avatar\" :text=\"listItem.name\" /></vs-list-item>\n                    </draggable>\n                </vs-list>\n            </div>\n            <div class=\"vx-col w-full md:w-1/2\">\n                <vs-list>\n                    <vs-list-header title=\"People Group 2\" color=\"primary\"></vs-list-header>\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\"><vs-avatar slot=\"avatar\" :text=\"listItem.name\" /></vs-list-item>\n                    </draggable>\n                </vs-list>\n            </div>\n\n        </div>\n\n        <!-- List 2 -->\n        <div class=\"vx-row\">\n            <div class=\"vx-col w-full md:w-1/2\">\n                <prism language=\"js\" class=\"rounded-lg\">\nPeople Group 1: {{ list1 }}\n                </prism>\n            </div>\n            <div class=\"vx-col w-full md:w-1/2\">\n                <prism language=\"js\" class=\"rounded-lg\">\nPeople Group 2: {{ list2 }}\n                </prism>\n            </div>\n        </div>\n\n        <template slot=\"codeContainer\">\n&lt;template&gt;\n  &lt;vs-list&gt;\n    &lt;vs-list-header title=&quot;People Group 1&quot; color=&quot;primary&quot;&gt;&lt;/vs-list-header&gt;\n\n    &lt;draggable :list=&quot;list1&quot; group=&quot;people&quot; class=&quot;p-2 cursor-move&quot;&gt;\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;\n        &lt;vs-avatar slot=&quot;avatar&quot; :text=&quot;listItem.name&quot; /&gt;\n      &lt;/vs-list-item&gt;\n    &lt;/draggable&gt;\n\n  &lt;/vs-list&gt;\n\n  &lt;vs-list class=&quot;mt-5&quot;&gt;\n    &lt;vs-list-header title=&quot;People Group 2&quot; color=&quot;primary&quot;&gt;&lt;/vs-list-header&gt;\n\n    &lt;draggable :list=&quot;list2&quot; group=&quot;people&quot; class=&quot;p-2 cursor-move&quot;&gt;\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;\n        &lt;vs-avatar slot=&quot;avatar&quot; :text=&quot;listItem.name&quot; /&gt;\n      &lt;/vs-list-item&gt;\n    &lt;/draggable&gt;\n\n  &lt;/vs-list&gt;\n&lt;/template&gt;\n\n&lt;script&gt;\nimport draggable from 'vuedraggable'\n\nexport default {\n  data() {\n    return {\n      list1: [\n        {\n          name: &quot;Paz Joya&quot;,\n          email: &quot;girliness@spotlike.co.uk&quot;,\n        },\n        {\n          name: &quot;Sunshine Cose&quot;,\n          email: &quot;executrixship@equisized.edu&quot;,\n        },\n        {\n          name: &quot;Alba Dobbin&quot;,\n          email: &quot;bidding@demibob.or&quot;,\n        },\n        {\n          name: &quot;Marlin Hinchee&quot;,\n          email: &quot;preholding@scuffly.co.uk&quot;,\n        }\n      ],\n      list2: [\n        {\n          name: &quot;Leia Atienza&quot;,\n          email: &quot;unmeasurableness@interlamellar.co.uk&quot;\n        },\n        {\n          name: &quot;Lashawna Vaudrainm&quot;,\n          email: &quot;soaking@khubber.com&quot;\n        },\n        {\n          name: &quot;Liliana Henscheid&quot;,\n          email: &quot;lecideine@turndown.org&quot;\n        },\n        {\n          name: &quot;Keven Kolter&quot;,\n          email: &quot;nontenure@anglicanum.co.uk&quot;\n        }\n      ]\n    }\n  },\n  components: {\n    draggable,\n  }\n}\n&lt;/script&gt;\n        </template>\n    </vx-card>\n</template>\n\n<script>\nimport draggable from 'vuedraggable'\nimport Prism from 'vue-prism-component'\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    Prism\n  }\n}\n</script>\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../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/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=6f309cf9&\"\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 }","<!-- =========================================================================================\n    File Name: DragAndDropClone.vue\n    Description: Clone from one list to another\n    ----------------------------------------------------------------------------------------\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\n      Author: Pixinvent\n    Author URL: http://www.themeforest.net/user/pixinvent\n========================================================================================== -->\n\n\n<template>\n    <vx-card title=\"Clone List\" code-toggler>\n        <p>Clone list items from another existing list. Add <code>pull</code> and <code>put</code> to <code>group</code> prop</p>\n\n        <!-- List 1 -->\n        <div class=\"vx-row\">\n            <div class=\"vx-col w-full sm:w-1/2\">\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\">{{ listItem }}</vs-chip>\n                </draggable>\n            </div>\n            <div class=\"vx-col w-full sm:w-1/2\">\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\">{{ listItem }}</vs-chip>\n                </draggable>\n            </div>\n        </div>\n\n        <!-- List 2 -->\n        <div class=\"vx-row\">\n            <div class=\"vx-col w-full sm:w-1/2\">\n                <prism language=\"js\" class=\"rounded-lg\">\nTag Source: {{ list1 }}\n                </prism>\n            </div>\n            <div class=\"vx-col w-full sm:w-1/2\">\n                <prism language=\"js\" class=\"rounded-lg\">\nAdded tags: {{ list2 }}\n                </prism>\n            </div>\n        </div>\n\n        <template slot=\"codeContainer\">\n&lt;template&gt;\n  &lt;div&gt;\n    &lt;h6 class=&quot;mt-5 mb-3&quot;&gt;Tag Source&lt;/h6&gt;\n    &lt;draggable :list=&quot;list1&quot; :group=&quot;{name:'tags',  pull:'clone', put:false }&quot; class=&quot;p-2 cursor-move&quot;&gt;\n      &lt;vs-chip v-for=&quot;(listItem, index) in list1&quot; :key=&quot;index&quot;&gt; {{ \"\\{\\{ listItem \\}\\}\" }} &lt;/vs-chip&gt;\n    &lt;/draggable&gt;\n  &lt;/div&gt;\n  &lt;div&gt;\n    &lt;h6 class=&quot;mt-5 mb-3&quot;&gt;Your Tags&lt;/h6&gt;\n    &lt;draggable :list=&quot;list2&quot; :group=&quot;{name: 'tags'}&quot; class=&quot;p-2 cursor-move&quot;&gt;\n      &lt;vs-chip v-for=&quot;(listItem, index) in list2&quot; :key=&quot;index&quot;&gt; {{ \"\\{\\{ listItem \\}\\}\" }} &lt;/vs-chip&gt;\n    &lt;/draggable&gt;\n  &lt;/div&gt;\n&lt;/template&gt;\n\n&lt;script&gt;\nimport draggable from 'vuedraggable'\n\nexport default {\n  data() {\n    return {\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;],\n      list2: [&quot;google&quot;, &quot;youtube&quot;]\n    }\n  },\n  components: {\n    draggable,\n  }\n}\n&lt;/script&gt;\n        </template>\n    </vx-card>\n</template>\n\n<script>\nimport draggable from 'vuedraggable'\nimport Prism from 'vue-prism-component'\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    Prism\n  }\n}\n</script>\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../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/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=56c7b804&\"\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 }","<!-- =========================================================================================\n    File Name: DragAndDropAnimation.vue\n    Description: Add animation to drag and drop\n    ----------------------------------------------------------------------------------------\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\n      Author: Pixinvent\n    Author URL: http://www.themeforest.net/user/pixinvent\n========================================================================================== -->\n\n\n<template>\n    <vx-card title=\"With Animation\" code-toggler>\n        <p>Add animation to changes using <code>transition-group</code>.</p>\n\n        <div class=\"mt-5\">\n            <vs-list>\n                <vs-list-header title=\"People Group\" color=\"primary\"></vs-list-header>\n                <draggable :list=\"list\" class=\"cursor-move\">\n                    <transition-group>\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>\n                    </transition-group>\n                </draggable>\n            </vs-list>\n        </div>\n\n        <prism language=\"js\" class=\"rounded-lg\">\n{{ list }}\n        </prism>\n\n        <template slot=\"codeContainer\">\n&lt;template&gt;\n  &lt;vs-list&gt;\n    &lt;vs-list-header title=&quot;People Group&quot; color=&quot;primary&quot;&gt;&lt;/vs-list-header&gt;\n\n    &lt;draggable :list=&quot;list&quot;&gt;\n      &lt;transition-group&gt;\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;\n          &lt;vs-avatar slot=&quot;avatar&quot; :text=&quot;listItem.name&quot; /&gt;\n        &lt;/vs-list-item&gt;\n      &lt;/transition-group&gt;\n    &lt;/draggable&gt;\n\n  &lt;/vs-list&gt;\n&lt;/template&gt;\n&lt;script&gt;\nimport draggable from 'vuedraggable'\n\nexport default {\n  data() {\n    return {\n      list: [{\n          name: &quot;Paz Joya&quot;,\n          email: &quot;girliness@spotlike.co.uk&quot;,\n        },\n        {\n          name: &quot;Sunshine Cose&quot;,\n          email: &quot;executrixship@equisized.edu&quot;,\n        },\n        {\n          name: &quot;Alba Dobbin&quot;,\n          email: &quot;bidding@demibob.or&quot;,\n        },\n        {\n          name: &quot;Marlin Hinchee&quot;,\n          email: &quot;preholding@scuffly.co.uk&quot;,\n        },\n        {\n          name: &quot;Leia Atienza&quot;,\n          email: &quot;unmeasurableness@interlamellar.co.uk&quot;\n        },\n        {\n          name: &quot;Lashawna Vaudrainm&quot;,\n          email: &quot;soaking@khubber.com&quot;\n        },\n        {\n          name: &quot;Liliana Henscheid&quot;,\n          email: &quot;lecideine@turndown.org&quot;\n        },\n        {\n          name: &quot;Keven Kolter&quot;,\n          email: &quot;nontenure@anglicanum.co.uk&quot;\n        }\n      ],\n    }\n  },\n  components: {\n    draggable\n  }\n}\n&lt;/script&gt;\n&lt;style&gt;\n.list-item {\n  transition: all 1s\n}\n&lt;/style&gt;\n        </template>\n    </vx-card>\n</template>\n\n<script>\nimport draggable from 'vuedraggable'\nimport Prism from 'vue-prism-component'\n\nexport default {\n  data () {\n    return {\n      list: [\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          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    Prism\n  }\n}\n</script>\n\n<style>\n.list-item { transition: all .5s }\n</style>\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../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/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=fec3a5c4&\"\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","<!-- =========================================================================================\n    File Name: DragAndDrop.vue\n    Description: Drag and Drop (third-party) - Imports page portions\n    ----------------------------------------------------------------------------------------\n    Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template\n      Author: Pixinvent\n    Author URL: http://www.themeforest.net/user/pixinvent\n========================================================================================== -->\n\n<template>\n    <div id=\"extra-component-drag-and-drop-demo\">\n\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>\n\n        <drag-and-drop-simple></drag-and-drop-simple>\n        <drag-and-drop-multiple-lists></drag-and-drop-multiple-lists>\n        <drag-and-drop-clone-list></drag-and-drop-clone-list>\n        <drag-and-drop-animation></drag-and-drop-animation>\n    </div>\n</template>\n\n<script>\nimport DragAndDropSimple from './DragAndDropSimple.vue'\nimport DragAndDropMultipleLists from './DragAndDropMultipleLists.vue'\nimport DragAndDropCloneList from './DragAndDropCloneList.vue'\nimport DragAndDropAnimation from './DragAndDropAnimation.vue'\n\nexport default {\n  components: {\n    DragAndDropSimple,\n    DragAndDropMultipleLists,\n    DragAndDropCloneList,\n    DragAndDropAnimation\n  }\n}\n</script>\n","import mod from \"-!../../../../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../../../../node_modules/thread-loader/dist/cjs.js!../../../../../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/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=c1964fda&\"\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":""}