{"version":3,"sources":["webpack:///./src/views/extensions/drag-drop/DragDropAnimation.vue?6feb","webpack:///./src/views/extensions/drag-drop/DragDrop.vue?64e8","webpack:///./src/views/extensions/drag-drop/DragDropSimple.vue?cf69","webpack:///./src/views/extensions/drag-drop/code.js","webpack:///src/views/extensions/drag-drop/DragDropSimple.vue","webpack:///./src/views/extensions/drag-drop/DragDropSimple.vue?634c","webpack:///./src/views/extensions/drag-drop/DragDropSimple.vue","webpack:///./src/views/extensions/drag-drop/DragDropMultipleList.vue?1034","webpack:///src/views/extensions/drag-drop/DragDropMultipleList.vue","webpack:///./src/views/extensions/drag-drop/DragDropMultipleList.vue?5aa6","webpack:///./src/views/extensions/drag-drop/DragDropMultipleList.vue","webpack:///./src/views/extensions/drag-drop/DragDropClone.vue?b446","webpack:///src/views/extensions/drag-drop/DragDropClone.vue","webpack:///./src/views/extensions/drag-drop/DragDropClone.vue?74ae","webpack:///./src/views/extensions/drag-drop/DragDropClone.vue","webpack:///./src/views/extensions/drag-drop/DragDropAnimation.vue?835a","webpack:///src/views/extensions/drag-drop/DragDropAnimation.vue","webpack:///./src/views/extensions/drag-drop/DragDropAnimation.vue?2274","webpack:///./src/views/extensions/drag-drop/DragDropAnimation.vue","webpack:///src/views/extensions/drag-drop/DragDrop.vue","webpack:///./src/views/extensions/drag-drop/DragDrop.vue?a982","webpack:///./src/views/extensions/drag-drop/DragDrop.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","attrs","staticRenderFns","scopedSlots","_u","key","fn","_v","_s","codeSimple","proxy","staticClass","model","value","callback","$$v","list","expression","_l","item","index","codeMultiple","codeClone","codeAnimation","components","BCardCode","draggable","BListGroupItem","Prism","BCardText","data","component","list1","listItem","name","slice","email","list2","BAvatar","BRow","BCol","pull","put","BBadge","DragDropSimple","DragDropMultipleList","DragDropClone","DragDropAnimation"],"mappings":"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","file":"js/chunk-4d40714c.c4f55a10.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-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-loader/lib/index.js??vue-loader-options!./DragDropAnimation.vue?vue&type=style&index=0&id=6e276679&prod&lang=css&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-row',[_c('b-col',{attrs:{\"cols\":\"12\"}},[_c('drag-drop-simple'),_c('drag-drop-multiple-list'),_c('drag-drop-clone'),_c('drag-drop-animation')],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('b-card-code',{attrs:{\"title\":\"Simple\"},scopedSlots:_vm._u([{key:\"code\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.codeSimple)+\" \")]},proxy:true}])},[_c('b-card-text',[_c('span',[_vm._v(\"Simple Draggable list with in sync to original list. Remove \")]),_c('code',[_vm._v(\"list\")]),_c('span',[_vm._v(\" prop to break synchronization with original list.\")])]),_c('draggable',{staticClass:\"list-group list-group-flush cursor-move\",attrs:{\"tag\":\"ul\"},model:{value:(_vm.list),callback:function ($$v) {_vm.list=$$v},expression:\"list\"}},_vm._l((_vm.list),function(item,index){return _c('b-list-group-item',{key:index,attrs:{\"tag\":\"li\"}},[_c('strong',[_vm._v(\" \"+_vm._s(item))])])}),1),_c('prism',{staticClass:\"rounded mt-2\",attrs:{\"language\":\"javascript\"}},[_vm._v(\"list: \"+_vm._s(_vm.list)+\" \")])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","export const codeSimple = `\r\n<template>\r\n  <div>\r\n    <!-- draggable -->\r\n    <draggable\r\n      v-model=\"list\"\r\n      tag=\"ul\"\r\n      class=\"list-group list-group-flush cursor-move\"\r\n    >\r\n      <b-list-group-item\r\n        v-for=\"(item, index) in list\"\r\n        :key=\"index\"\r\n        tag=\"li\"\r\n      >\r\n        <strong> {{ item }}</strong>\r\n      </b-list-group-item>\r\n    </draggable>\r\n\r\n    <!-- code -->\r\n    <prism\r\n      language=\"javascript\"\r\n      class=\"rounded mt-2\"\r\n    >list: {{ list }}\r\n    </prism>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BListGroupItem} from 'bootstrap-vue'\r\nimport draggable from 'vuedraggable'\r\nimport Prism from 'vue-prism-component'\r\nimport 'prismjs'\r\nimport 'prismjs/themes/prism-tomorrow.css'\r\n\r\nexport default {\r\n  components: {\r\n    draggable,\r\n    BListGroupItem,\r\n    Prism,\r\n  },\r\n  data() {\r\n    return {\r\n      list:\r\n      [\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}\r\n</script>\r\n`\r\n\r\nexport const codeMultiple = `\r\n<template>\r\n  <div>\r\n    <b-row>\r\n\r\n      <!-- people group 1 -->\r\n      <b-col md=\"6\">\r\n        <h6 class=\"text-primary font-weight-bold mb-2\">\r\n          People Group 1\r\n        </h6>\r\n\r\n        <!-- draggable -->\r\n        <draggable\r\n          :list=\"list1\"\r\n          tag=\"ul\"\r\n          group=\"people\"\r\n          class=\"list-group list-group-flush cursor-move\"\r\n        >\r\n          <b-list-group-item\r\n            v-for=\"(listItem, index) in list1\"\r\n            :key=\"index\"\r\n            tag=\"li\"\r\n          >\r\n            <div class=\"d-flex\">\r\n              <b-avatar :text=\"listItem.name.slice(0,2)\" />\r\n              <div class=\"ml-25\">\r\n                <b-card-text class=\"mb-0 font-weight-bold\">\r\n                  {{ listItem.name }}\r\n                </b-card-text>\r\n                <small>{{ listItem.email }}</small>\r\n              </div>\r\n            </div>\r\n          </b-list-group-item>\r\n        </draggable>\r\n      </b-col>\r\n\r\n      <!-- people group 2 -->\r\n      <b-col\r\n        md=\"6\"\r\n        class=\"mt-sm-2 mt-md-0\"\r\n      >\r\n        <h6 class=\"text-primary font-weight-bold mb-2\">\r\n          People Group 2\r\n        </h6>\r\n\r\n        <!-- draggable -->\r\n        <draggable\r\n          :list=\"list2\"\r\n          tag=\"ul\"\r\n          group=\"people\"\r\n          class=\"list-group list-group-flush cursor-move\"\r\n        >\r\n          <b-list-group-item\r\n            v-for=\"(listItem, index) in list2\"\r\n            :key=\"index\"\r\n            tag=\"li\"\r\n          >\r\n            <div class=\"d-flex\">\r\n              <b-avatar :text=\"listItem.name.slice(0,2)\" />\r\n              <div class=\"ml-25\">\r\n                <b-card-text class=\"mb-0 font-weight-bold\">\r\n                  {{ listItem.name }}\r\n                </b-card-text>\r\n                <small>{{ listItem.email }}</small>\r\n              </div>\r\n            </div>\r\n          </b-list-group-item>\r\n        </draggable>\r\n      </b-col>\r\n\r\n      <!-- people group 1 code -->\r\n      <b-col\r\n        md=\"6\"\r\n        class=\"mt-1\"\r\n      >\r\n        <prism\r\n          language=\"javascript\"\r\n          class=\"rounded\"\r\n        >\r\n          People Group 1: {{ list1 }}\r\n        </prism>\r\n      </b-col>\r\n\r\n      <!-- people group 2 code -->\r\n      <b-col\r\n        md=\"6\"\r\n        class=\"mt-1\"\r\n      >\r\n        <prism\r\n          language=\"javascript\"\r\n          class=\"rounded\"\r\n        >\r\n          People Group 2: {{ list2 }}\r\n        </prism>\r\n      </b-col>\r\n    </b-row>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport {\r\n  BListGroupItem, BAvatar, BRow, BCol,\r\n} from 'bootstrap-vue'\r\nimport draggable from 'vuedraggable'\r\nimport Prism from 'vue-prism-component'\r\nimport 'prismjs'\r\nimport 'prismjs/themes/prism-tomorrow.css'\r\n\r\nexport default {\r\n  components: {\r\n    BAvatar,\r\n    BListGroupItem,\r\n    BRow,\r\n    BCol,\r\n    Prism,\r\n    draggable,\r\n  },\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}\r\n</script>\r\n`\r\n\r\nexport const codeClone = `\r\n<template>\r\n  <b-row>\r\n\r\n    <!-- tag source -->\r\n    <b-col md=\"6\">\r\n      <h6>Tag Source</h6>\r\n\r\n      <draggable\r\n        :list=\"list1\"\r\n        :group=\"{name:'tags', pull:'clone', put:false }\"\r\n        class=\"mb-1 cursor-move\"\r\n      >\r\n        <b-badge\r\n          v-for=\"(listItem, index) in list1\"\r\n          :key=\"index\"\r\n          class=\"mr-25\"\r\n        >\r\n          {{ listItem }}\r\n        </b-badge>\r\n      </draggable>\r\n    </b-col>\r\n\r\n    <!-- add tag -->\r\n    <b-col md=\"6\">\r\n      <h6>Your Tags</h6>\r\n\r\n      <draggable\r\n        :list=\"list2\"\r\n        :group=\"{name: 'tags'}\"\r\n        class=\"mb-1 cursor-move\"\r\n      >\r\n        <b-badge\r\n          v-for=\"(listItem, index) in list2\"\r\n          :key=\"index\"\r\n          class=\"mr-25\"\r\n        >\r\n          {{ listItem }}\r\n        </b-badge>\r\n      </draggable>\r\n    </b-col>\r\n\r\n    <!-- tag source code -->\r\n    <b-col md=\"6\">\r\n      <prism\r\n        language=\"javascript\"\r\n        class=\"rounded\"\r\n      >\r\n        Tag Source: {{ list1 }}\r\n      </prism>\r\n    </b-col>\r\n\r\n    <!-- tag add code -->\r\n    <b-col md=\"6\">\r\n      <prism\r\n        language=\"javascript\"\r\n        class=\"rounded\"\r\n      >\r\n        Added tags: {{ list2 }}\r\n      </prism>\r\n    </b-col>\r\n  </b-row>\r\n</template>\r\n\r\n<script>\r\nimport {\r\n  BBadge, BRow, BCol,\r\n} from 'bootstrap-vue'\r\nimport draggable from 'vuedraggable'\r\nimport Prism from 'vue-prism-component'\r\nimport 'prismjs'\r\nimport 'prismjs/themes/prism-tomorrow.css'\r\n\r\nexport default {\r\n  components: {\r\n    BBadge,\r\n    draggable,\r\n    BRow,\r\n    Prism,\r\n    BCol,\r\n  },\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}\r\n</script>\r\n`\r\n\r\nexport const codeAnimation = `\r\n<template>\r\n  <div>\r\n\r\n    <h6 class=\"text-primary font-weight-bold mb-2\">\r\n      People Group\r\n    </h6>\r\n    <!-- draggable -->\r\n    <draggable\r\n      v-model=\"list\"\r\n      class=\"list-group list-group-flush cursor-move\"\r\n      tag=\"ul\"\r\n    >\r\n      <transition-group\r\n        type=\"transition\"\r\n        name=\"flip-list\"\r\n      >\r\n        <b-list-group-item\r\n          v-for=\"listItem in list\"\r\n          :key=\"listItem.email\"\r\n          tag=\"li\"\r\n        >\r\n          <div class=\"d-flex\">\r\n            <b-avatar :text=\"listItem.name.slice(0,2)\" />\r\n            <div class=\"ml-25\">\r\n              <b-card-text class=\"font-weight-bold mb-0\">\r\n                {{ listItem.name }}\r\n              </b-card-text>\r\n              <small>{{ listItem.email }}</small>\r\n            </div>\r\n          </div>\r\n        </b-list-group-item>\r\n      </transition-group>\r\n    </draggable>\r\n\r\n    <!-- code  -->\r\n    <prism\r\n      language=\"javascript\"\r\n      class=\"rounded mt-2\"\r\n    >\r\n      {{ list }}\r\n    </prism>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport { BListGroupItem, BAvatar} from 'bootstrap-vue'\r\nimport draggable from 'vuedraggable'\r\nimport Prism from 'vue-prism-component'\r\nimport 'prismjs'\r\nimport 'prismjs/themes/prism-tomorrow.css'\r\n\r\nexport default {\r\n  components: {\r\n    draggable,\r\n    BListGroupItem,\r\n    BAvatar,\r\n    Prism,\r\n  },\r\n  data() {\r\n    return {\r\n      list: [{\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}\r\n</script>\r\n\r\n<style>\r\n.list-group-item {\r\n  transition: all 1s\r\n}\r\n</style>\r\n`\r\n","<template>\r\n  <b-card-code title=\"Simple\">\r\n    <b-card-text>\r\n      <span>Simple Draggable list with in sync to original list. Remove </span>\r\n      <code>list</code>\r\n      <span> prop to break synchronization with original list.</span>\r\n    </b-card-text>\r\n\r\n    <!-- draggable -->\r\n    <draggable\r\n      v-model=\"list\"\r\n      tag=\"ul\"\r\n      class=\"list-group list-group-flush cursor-move\"\r\n    >\r\n      <b-list-group-item\r\n        v-for=\"(item, index) in list\"\r\n        :key=\"index\"\r\n        tag=\"li\"\r\n      >\r\n        <strong> {{ item }}</strong>\r\n      </b-list-group-item>\r\n    </draggable>\r\n\r\n    <!-- code -->\r\n    <prism\r\n      language=\"javascript\"\r\n      class=\"rounded mt-2\"\r\n    >list: {{ list }}\r\n    </prism>\r\n\r\n    <!-- togglable code -->\r\n    <template #code>\r\n      {{ codeSimple }}\r\n    </template>\r\n  </b-card-code>\r\n</template>\r\n\r\n<script>\r\nimport BCardCode from '@core/components/b-card-code/BCardCode.vue'\r\nimport { BListGroupItem, BCardText } from 'bootstrap-vue'\r\nimport draggable from 'vuedraggable'\r\nimport Prism from 'vue-prism-component'\r\nimport 'prismjs'\r\nimport 'prismjs/themes/prism-tomorrow.css'\r\nimport { codeSimple } from './code'\r\n\r\nexport default {\r\n  components: {\r\n    BCardCode,\r\n    draggable,\r\n    BListGroupItem,\r\n    Prism,\r\n    BCardText,\r\n  },\r\n  data() {\r\n    return {\r\n      codeSimple,\r\n      list:\r\n      [\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}\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-loader/lib/index.js??vue-loader-options!./DragDropSimple.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-loader/lib/index.js??vue-loader-options!./DragDropSimple.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./DragDropSimple.vue?vue&type=template&id=0b305840&\"\nimport script from \"./DragDropSimple.vue?vue&type=script&lang=js&\"\nexport * from \"./DragDropSimple.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('b-card-code',{attrs:{\"title\":\"Multiple Lists\"},scopedSlots:_vm._u([{key:\"code\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.codeMultiple)+\" \")]},proxy:true}])},[_c('b-card-text',[_c('span',[_vm._v(\"Drag and drop items of more than one list. Add same \")]),_c('code',[_vm._v(\"group\")]),_c('span',[_vm._v(\" to \")]),_c('code',[_vm._v(\"group\")]),_c('span',[_vm._v(\" prop.\")])]),_c('b-row',[_c('b-col',{attrs:{\"md\":\"6\"}},[_c('h6',{staticClass:\"text-primary font-weight-bold mb-2\"},[_vm._v(\" People Group 1 \")]),_c('draggable',{staticClass:\"list-group list-group-flush cursor-move\",attrs:{\"list\":_vm.list1,\"tag\":\"ul\",\"group\":\"people\"}},_vm._l((_vm.list1),function(listItem,index){return _c('b-list-group-item',{key:index,attrs:{\"tag\":\"li\"}},[_c('div',{staticClass:\"d-flex\"},[_c('b-avatar',{attrs:{\"text\":listItem.name.slice(0,2)}}),_c('div',{staticClass:\"ml-25\"},[_c('b-card-text',{staticClass:\"mb-0 font-weight-bold\"},[_vm._v(\" \"+_vm._s(listItem.name)+\" \")]),_c('small',[_vm._v(_vm._s(listItem.email))])],1)],1)])}),1)],1),_c('b-col',{staticClass:\"mt-sm-2 mt-md-0\",attrs:{\"md\":\"6\"}},[_c('h6',{staticClass:\"text-primary font-weight-bold mb-2\"},[_vm._v(\" People Group 2 \")]),_c('draggable',{staticClass:\"list-group list-group-flush cursor-move\",attrs:{\"list\":_vm.list2,\"tag\":\"ul\",\"group\":\"people\"}},_vm._l((_vm.list2),function(listItem,index){return _c('b-list-group-item',{key:index,attrs:{\"tag\":\"li\"}},[_c('div',{staticClass:\"d-flex\"},[_c('b-avatar',{attrs:{\"text\":listItem.name.slice(0,2)}}),_c('div',{staticClass:\"ml-25\"},[_c('b-card-text',{staticClass:\"mb-0 font-weight-bold\"},[_vm._v(\" \"+_vm._s(listItem.name)+\" \")]),_c('small',[_vm._v(_vm._s(listItem.email))])],1)],1)])}),1)],1),_c('b-col',{staticClass:\"mt-1\",attrs:{\"md\":\"6\"}},[_c('prism',{staticClass:\"rounded\",attrs:{\"language\":\"javascript\"}},[_vm._v(\" People Group 1: \"+_vm._s(_vm.list1)+\" \")])],1),_c('b-col',{staticClass:\"mt-1\",attrs:{\"md\":\"6\"}},[_c('prism',{staticClass:\"rounded\",attrs:{\"language\":\"javascript\"}},[_vm._v(\" People Group 2: \"+_vm._s(_vm.list2)+\" \")])],1)],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <b-card-code title=\"Multiple Lists\">\r\n    <b-card-text>\r\n      <span>Drag and drop items of more than one list. Add same </span>\r\n      <code>group</code>\r\n      <span> to </span>\r\n      <code>group</code>\r\n      <span> prop.</span>\r\n    </b-card-text>\r\n\r\n    <b-row>\r\n\r\n      <!-- people group 1 -->\r\n      <b-col md=\"6\">\r\n        <h6 class=\"text-primary font-weight-bold mb-2\">\r\n          People Group 1\r\n        </h6>\r\n\r\n        <!-- draggable -->\r\n        <draggable\r\n          :list=\"list1\"\r\n          tag=\"ul\"\r\n          group=\"people\"\r\n          class=\"list-group list-group-flush cursor-move\"\r\n        >\r\n          <b-list-group-item\r\n            v-for=\"(listItem, index) in list1\"\r\n            :key=\"index\"\r\n            tag=\"li\"\r\n          >\r\n            <div class=\"d-flex\">\r\n              <b-avatar :text=\"listItem.name.slice(0,2)\" />\r\n              <div class=\"ml-25\">\r\n                <b-card-text class=\"mb-0 font-weight-bold\">\r\n                  {{ listItem.name }}\r\n                </b-card-text>\r\n                <small>{{ listItem.email }}</small>\r\n              </div>\r\n            </div>\r\n          </b-list-group-item>\r\n        </draggable>\r\n      </b-col>\r\n\r\n      <!-- people group 2 -->\r\n      <b-col\r\n        md=\"6\"\r\n        class=\"mt-sm-2 mt-md-0\"\r\n      >\r\n        <h6 class=\"text-primary font-weight-bold mb-2\">\r\n          People Group 2\r\n        </h6>\r\n\r\n        <!-- draggable -->\r\n        <draggable\r\n          :list=\"list2\"\r\n          tag=\"ul\"\r\n          group=\"people\"\r\n          class=\"list-group list-group-flush cursor-move\"\r\n        >\r\n          <b-list-group-item\r\n            v-for=\"(listItem, index) in list2\"\r\n            :key=\"index\"\r\n            tag=\"li\"\r\n          >\r\n            <div class=\"d-flex\">\r\n              <b-avatar :text=\"listItem.name.slice(0,2)\" />\r\n              <div class=\"ml-25\">\r\n                <b-card-text class=\"mb-0 font-weight-bold\">\r\n                  {{ listItem.name }}\r\n                </b-card-text>\r\n                <small>{{ listItem.email }}</small>\r\n              </div>\r\n            </div>\r\n          </b-list-group-item>\r\n        </draggable>\r\n      </b-col>\r\n\r\n      <!-- people group 1 code -->\r\n      <b-col\r\n        md=\"6\"\r\n        class=\"mt-1\"\r\n      >\r\n        <prism\r\n          language=\"javascript\"\r\n          class=\"rounded\"\r\n        >\r\n          People Group 1: {{ list1 }}\r\n        </prism>\r\n      </b-col>\r\n\r\n      <!-- people group 2 code -->\r\n      <b-col\r\n        md=\"6\"\r\n        class=\"mt-1\"\r\n      >\r\n        <prism\r\n          language=\"javascript\"\r\n          class=\"rounded\"\r\n        >\r\n          People Group 2: {{ list2 }}\r\n        </prism>\r\n      </b-col>\r\n    </b-row>\r\n\r\n    <template #code>\r\n      {{ codeMultiple }}\r\n    </template>\r\n  </b-card-code>\r\n</template>\r\n\r\n<script>\r\nimport BCardCode from '@core/components/b-card-code/BCardCode.vue'\r\nimport {\r\n  BListGroupItem, BAvatar, BRow, BCol, BCardText,\r\n} from 'bootstrap-vue'\r\nimport draggable from 'vuedraggable'\r\nimport Prism from 'vue-prism-component'\r\nimport 'prismjs'\r\nimport 'prismjs/themes/prism-tomorrow.css'\r\nimport { codeMultiple } from './code'\r\n\r\nexport default {\r\n  components: {\r\n    BCardCode,\r\n    BAvatar,\r\n    BListGroupItem,\r\n    BCardText,\r\n    BRow,\r\n    BCol,\r\n    Prism,\r\n    draggable,\r\n  },\r\n  data() {\r\n    return {\r\n      codeMultiple,\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}\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-loader/lib/index.js??vue-loader-options!./DragDropMultipleList.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-loader/lib/index.js??vue-loader-options!./DragDropMultipleList.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./DragDropMultipleList.vue?vue&type=template&id=0a42ff60&\"\nimport script from \"./DragDropMultipleList.vue?vue&type=script&lang=js&\"\nexport * from \"./DragDropMultipleList.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('b-card-code',{attrs:{\"title\":\"Clone List\"},scopedSlots:_vm._u([{key:\"code\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.codeClone)+\" \")]},proxy:true}])},[_c('b-card-text',[_c('span',[_vm._v(\"Clone list items from another existing list. Add \")]),_c('code',[_vm._v(\"pull\")]),_c('span',[_vm._v(\" and \")]),_c('code',[_vm._v(\"put\")]),_c('span',[_vm._v(\" to \")]),_c('code',[_vm._v(\"group\")]),_c('span',[_vm._v(\" prop.\")])]),_c('b-row',[_c('b-col',{attrs:{\"md\":\"6\"}},[_c('h6',[_vm._v(\"Tag Source\")]),_c('draggable',{staticClass:\"mb-1 cursor-move\",attrs:{\"list\":_vm.list1,\"group\":{name:'tags', pull:'clone', put:false }}},_vm._l((_vm.list1),function(listItem,index){return _c('b-badge',{key:index,staticClass:\"mr-25\"},[_vm._v(\" \"+_vm._s(listItem)+\" \")])}),1)],1),_c('b-col',{attrs:{\"md\":\"6\"}},[_c('h6',[_vm._v(\"Your Tags\")]),_c('draggable',{staticClass:\"mb-1 cursor-move\",attrs:{\"list\":_vm.list2,\"group\":{name: 'tags'}}},_vm._l((_vm.list2),function(listItem,index){return _c('b-badge',{key:index,staticClass:\"mr-25\"},[_vm._v(\" \"+_vm._s(listItem)+\" \")])}),1)],1),_c('b-col',{attrs:{\"md\":\"6\"}},[_c('prism',{staticClass:\"rounded\",attrs:{\"language\":\"javascript\"}},[_vm._v(\" Tag Source: \"+_vm._s(_vm.list1)+\" \")])],1),_c('b-col',{attrs:{\"md\":\"6\"}},[_c('prism',{staticClass:\"rounded\",attrs:{\"language\":\"javascript\"}},[_vm._v(\" Added tags: \"+_vm._s(_vm.list2)+\" \")])],1)],1)],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <b-card-code title=\"Clone List\">\r\n    <b-card-text>\r\n      <span>Clone list items from another existing list. Add </span>\r\n      <code>pull</code>\r\n      <span> and </span>\r\n      <code>put</code>\r\n      <span> to </span>\r\n      <code>group</code>\r\n      <span> prop.</span>\r\n    </b-card-text>\r\n\r\n    <b-row>\r\n\r\n      <!-- tag source -->\r\n      <b-col md=\"6\">\r\n        <h6>Tag Source</h6>\r\n\r\n        <draggable\r\n          :list=\"list1\"\r\n          :group=\"{name:'tags', pull:'clone', put:false }\"\r\n          class=\"mb-1 cursor-move\"\r\n        >\r\n          <b-badge\r\n            v-for=\"(listItem, index) in list1\"\r\n            :key=\"index\"\r\n            class=\"mr-25\"\r\n          >\r\n            {{ listItem }}\r\n          </b-badge>\r\n        </draggable>\r\n      </b-col>\r\n\r\n      <!-- add tag -->\r\n      <b-col md=\"6\">\r\n        <h6>Your Tags</h6>\r\n\r\n        <draggable\r\n          :list=\"list2\"\r\n          :group=\"{name: 'tags'}\"\r\n          class=\"mb-1 cursor-move\"\r\n        >\r\n          <b-badge\r\n            v-for=\"(listItem, index) in list2\"\r\n            :key=\"index\"\r\n            class=\"mr-25\"\r\n          >\r\n            {{ listItem }}\r\n          </b-badge>\r\n        </draggable>\r\n      </b-col>\r\n\r\n      <!-- tag source code -->\r\n      <b-col md=\"6\">\r\n        <prism\r\n          language=\"javascript\"\r\n          class=\"rounded\"\r\n        >\r\n          Tag Source: {{ list1 }}\r\n        </prism>\r\n      </b-col>\r\n\r\n      <!-- tag add code -->\r\n      <b-col md=\"6\">\r\n        <prism\r\n          language=\"javascript\"\r\n          class=\"rounded\"\r\n        >\r\n          Added tags: {{ list2 }}\r\n        </prism>\r\n      </b-col>\r\n    </b-row>\r\n\r\n    <template #code>\r\n      {{ codeClone }}\r\n    </template>\r\n  </b-card-code>\r\n</template>\r\n\r\n<script>\r\nimport BCardCode from '@core/components/b-card-code/BCardCode.vue'\r\nimport {\r\n  BBadge, BRow, BCol, BCardText,\r\n} from 'bootstrap-vue'\r\nimport draggable from 'vuedraggable'\r\nimport Prism from 'vue-prism-component'\r\nimport 'prismjs'\r\nimport 'prismjs/themes/prism-tomorrow.css'\r\nimport { codeClone } from './code'\r\n\r\nexport default {\r\n  components: {\r\n    BCardCode,\r\n    BBadge,\r\n    draggable,\r\n    BCardText,\r\n    BRow,\r\n    Prism,\r\n    BCol,\r\n  },\r\n  data() {\r\n    return {\r\n      codeClone,\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}\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-loader/lib/index.js??vue-loader-options!./DragDropClone.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-loader/lib/index.js??vue-loader-options!./DragDropClone.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./DragDropClone.vue?vue&type=template&id=48091fb8&\"\nimport script from \"./DragDropClone.vue?vue&type=script&lang=js&\"\nexport * from \"./DragDropClone.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('b-card-code',{attrs:{\"title\":\"Animation\"},scopedSlots:_vm._u([{key:\"code\",fn:function(){return [_vm._v(\" \"+_vm._s(_vm.codeAnimation)+\" \")]},proxy:true}])},[_c('b-card-text',[_c('span',[_vm._v(\"Add animation to changes using \")]),_c('code',[_vm._v(\"transition-group\")]),_c('span',[_vm._v(\".\")])]),_c('h6',{staticClass:\"text-primary font-weight-bold mb-2\"},[_vm._v(\" People Group \")]),_c('draggable',{staticClass:\"list-group list-group-flush cursor-move\",attrs:{\"tag\":\"ul\"},model:{value:(_vm.list),callback:function ($$v) {_vm.list=$$v},expression:\"list\"}},[_c('transition-group',{attrs:{\"type\":\"transition\",\"name\":\"flip-list\"}},_vm._l((_vm.list),function(listItem){return _c('b-list-group-item',{key:listItem.email,attrs:{\"tag\":\"li\"}},[_c('div',{staticClass:\"d-flex\"},[_c('b-avatar',{attrs:{\"text\":listItem.name.slice(0,2)}}),_c('div',{staticClass:\"ml-25\"},[_c('b-card-text',{staticClass:\"font-weight-bold mb-0\"},[_vm._v(\" \"+_vm._s(listItem.name)+\" \")]),_c('small',[_vm._v(_vm._s(listItem.email))])],1)],1)])}),1)],1),_c('prism',{staticClass:\"rounded mt-2\",attrs:{\"language\":\"javascript\"}},[_vm._v(\" \"+_vm._s(_vm.list)+\" \")])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <b-card-code\r\n    title=\"Animation\"\r\n  >\r\n    <b-card-text>\r\n      <span>Add animation to changes using </span>\r\n      <code>transition-group</code>\r\n      <span>.</span>\r\n    </b-card-text>\r\n\r\n    <h6 class=\"text-primary font-weight-bold mb-2\">\r\n      People Group\r\n    </h6>\r\n    <!-- draggable -->\r\n    <draggable\r\n      v-model=\"list\"\r\n      class=\"list-group list-group-flush cursor-move\"\r\n      tag=\"ul\"\r\n    >\r\n      <transition-group\r\n        type=\"transition\"\r\n        name=\"flip-list\"\r\n      >\r\n        <b-list-group-item\r\n          v-for=\"listItem in list\"\r\n          :key=\"listItem.email\"\r\n          tag=\"li\"\r\n        >\r\n          <div class=\"d-flex\">\r\n            <b-avatar :text=\"listItem.name.slice(0,2)\" />\r\n            <div class=\"ml-25\">\r\n              <b-card-text class=\"font-weight-bold mb-0\">\r\n                {{ listItem.name }}\r\n              </b-card-text>\r\n              <small>{{ listItem.email }}</small>\r\n            </div>\r\n          </div>\r\n        </b-list-group-item>\r\n      </transition-group>\r\n    </draggable>\r\n\r\n    <!-- code  -->\r\n    <prism\r\n      language=\"javascript\"\r\n      class=\"rounded mt-2\"\r\n    >\r\n      {{ list }}\r\n    </prism>\r\n\r\n    <!-- toggleable code-->\r\n    <template #code>\r\n      {{ codeAnimation }}\r\n    </template>\r\n  </b-card-code>\r\n</template>\r\n\r\n<script>\r\nimport BCardCode from '@core/components/b-card-code/BCardCode.vue'\r\nimport { BListGroupItem, BAvatar, BCardText } from 'bootstrap-vue'\r\nimport draggable from 'vuedraggable'\r\nimport Prism from 'vue-prism-component'\r\nimport 'prismjs'\r\nimport 'prismjs/themes/prism-tomorrow.css'\r\nimport { codeAnimation } from './code'\r\n\r\nexport default {\r\n  components: {\r\n    BCardCode,\r\n    draggable,\r\n    BListGroupItem,\r\n    BAvatar,\r\n    BCardText,\r\n    Prism,\r\n  },\r\n  data() {\r\n    return {\r\n      codeAnimation,\r\n      list: [{\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}\r\n</script>\r\n\r\n<style>\r\n.list-group-item {\r\n  transition: all 1s\r\n}\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-loader/lib/index.js??vue-loader-options!./DragDropAnimation.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-loader/lib/index.js??vue-loader-options!./DragDropAnimation.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./DragDropAnimation.vue?vue&type=template&id=6e276679&\"\nimport script from \"./DragDropAnimation.vue?vue&type=script&lang=js&\"\nexport * from \"./DragDropAnimation.vue?vue&type=script&lang=js&\"\nimport style0 from \"./DragDropAnimation.vue?vue&type=style&index=0&id=6e276679&prod&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","<template>\r\n  <b-row>\r\n    <b-col cols=\"12\">\r\n      <drag-drop-simple />\r\n      <drag-drop-multiple-list />\r\n      <drag-drop-clone />\r\n      <drag-drop-animation />\r\n    </b-col>\r\n  </b-row>\r\n</template>\r\n\r\n<script>\r\nimport { BRow, BCol } from 'bootstrap-vue'\r\nimport DragDropSimple from './DragDropSimple.vue'\r\nimport DragDropMultipleList from './DragDropMultipleList.vue'\r\nimport DragDropClone from './DragDropClone.vue'\r\nimport DragDropAnimation from './DragDropAnimation.vue'\r\n\r\nexport default {\r\n  components: {\r\n    BRow,\r\n    BCol,\r\n\r\n    DragDropSimple,\r\n    DragDropMultipleList,\r\n    DragDropClone,\r\n    DragDropAnimation,\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-loader/lib/index.js??vue-loader-options!./DragDrop.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-loader/lib/index.js??vue-loader-options!./DragDrop.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./DragDrop.vue?vue&type=template&id=1725274e&\"\nimport script from \"./DragDrop.vue?vue&type=script&lang=js&\"\nexport * from \"./DragDrop.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":""}