{"version":3,"sources":["webpack:///./src/views/extensions/drag-drop/DragDropAnimation.vue?240a","webpack:///./src/views/extensions/drag-drop/DragDrop.vue?d0ea","webpack:///./src/views/extensions/drag-drop/DragDropSimple.vue?0bfd","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?21b8","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?ede9","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?a392","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-9a7e8c06.497be74f.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&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 = `\n<template>\n  <div>\n    <!-- draggable -->\n    <draggable\n      v-model=\"list\"\n      tag=\"ul\"\n      class=\"list-group list-group-flush cursor-move\"\n    >\n      <b-list-group-item\n        v-for=\"(item, index) in list\"\n        :key=\"index\"\n        tag=\"li\"\n      >\n        <strong> {{ item }}</strong>\n      </b-list-group-item>\n    </draggable>\n\n    <!-- code -->\n    <prism\n      language=\"javascript\"\n      class=\"rounded mt-2\"\n    >list: {{ list }}\n    </prism>\n  </div>\n</template>\n\n<script>\nimport { BListGroupItem} from 'bootstrap-vue'\nimport draggable from 'vuedraggable'\nimport Prism from 'vue-prism-component'\nimport 'prismjs'\nimport 'prismjs/themes/prism-tomorrow.css'\n\nexport default {\n  components: {\n    draggable,\n    BListGroupItem,\n    Prism,\n  },\n  data() {\n    return {\n      list:\n      [\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}\n</script>\n`\n\nexport const codeMultiple = `\n<template>\n  <div>\n    <b-row>\n\n      <!-- people group 1 -->\n      <b-col md=\"6\">\n        <h6 class=\"text-primary font-weight-bold mb-2\">\n          People Group 1\n        </h6>\n\n        <!-- draggable -->\n        <draggable\n          :list=\"list1\"\n          tag=\"ul\"\n          group=\"people\"\n          class=\"list-group list-group-flush cursor-move\"\n        >\n          <b-list-group-item\n            v-for=\"(listItem, index) in list1\"\n            :key=\"index\"\n            tag=\"li\"\n          >\n            <div class=\"d-flex\">\n              <b-avatar :text=\"listItem.name.slice(0,2)\" />\n              <div class=\"ml-25\">\n                <b-card-text class=\"mb-0 font-weight-bold\">\n                  {{ listItem.name }}\n                </b-card-text>\n                <small>{{ listItem.email }}</small>\n              </div>\n            </div>\n          </b-list-group-item>\n        </draggable>\n      </b-col>\n\n      <!-- people group 2 -->\n      <b-col\n        md=\"6\"\n        class=\"mt-sm-2 mt-md-0\"\n      >\n        <h6 class=\"text-primary font-weight-bold mb-2\">\n          People Group 2\n        </h6>\n\n        <!-- draggable -->\n        <draggable\n          :list=\"list2\"\n          tag=\"ul\"\n          group=\"people\"\n          class=\"list-group list-group-flush cursor-move\"\n        >\n          <b-list-group-item\n            v-for=\"(listItem, index) in list2\"\n            :key=\"index\"\n            tag=\"li\"\n          >\n            <div class=\"d-flex\">\n              <b-avatar :text=\"listItem.name.slice(0,2)\" />\n              <div class=\"ml-25\">\n                <b-card-text class=\"mb-0 font-weight-bold\">\n                  {{ listItem.name }}\n                </b-card-text>\n                <small>{{ listItem.email }}</small>\n              </div>\n            </div>\n          </b-list-group-item>\n        </draggable>\n      </b-col>\n\n      <!-- people group 1 code -->\n      <b-col\n        md=\"6\"\n        class=\"mt-1\"\n      >\n        <prism\n          language=\"javascript\"\n          class=\"rounded\"\n        >\n          People Group 1: {{ list1 }}\n        </prism>\n      </b-col>\n\n      <!-- people group 2 code -->\n      <b-col\n        md=\"6\"\n        class=\"mt-1\"\n      >\n        <prism\n          language=\"javascript\"\n          class=\"rounded\"\n        >\n          People Group 2: {{ list2 }}\n        </prism>\n      </b-col>\n    </b-row>\n  </div>\n</template>\n\n<script>\nimport {\n  BListGroupItem, BAvatar, BRow, BCol,\n} from 'bootstrap-vue'\nimport draggable from 'vuedraggable'\nimport Prism from 'vue-prism-component'\nimport 'prismjs'\nimport 'prismjs/themes/prism-tomorrow.css'\n\nexport default {\n  components: {\n    BAvatar,\n    BListGroupItem,\n    BRow,\n    BCol,\n    Prism,\n    draggable,\n  },\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}\n</script>\n`\n\nexport const codeClone = `\n<template>\n  <b-row>\n\n    <!-- tag source -->\n    <b-col md=\"6\">\n      <h6>Tag Source</h6>\n\n      <draggable\n        :list=\"list1\"\n        :group=\"{name:'tags', pull:'clone', put:false }\"\n        class=\"mb-1 cursor-move\"\n      >\n        <b-badge\n          v-for=\"(listItem, index) in list1\"\n          :key=\"index\"\n          class=\"mr-25\"\n        >\n          {{ listItem }}\n        </b-badge>\n      </draggable>\n    </b-col>\n\n    <!-- add tag -->\n    <b-col md=\"6\">\n      <h6>Your Tags</h6>\n\n      <draggable\n        :list=\"list2\"\n        :group=\"{name: 'tags'}\"\n        class=\"mb-1 cursor-move\"\n      >\n        <b-badge\n          v-for=\"(listItem, index) in list2\"\n          :key=\"index\"\n          class=\"mr-25\"\n        >\n          {{ listItem }}\n        </b-badge>\n      </draggable>\n    </b-col>\n\n    <!-- tag source code -->\n    <b-col md=\"6\">\n      <prism\n        language=\"javascript\"\n        class=\"rounded\"\n      >\n        Tag Source: {{ list1 }}\n      </prism>\n    </b-col>\n\n    <!-- tag add code -->\n    <b-col md=\"6\">\n      <prism\n        language=\"javascript\"\n        class=\"rounded\"\n      >\n        Added tags: {{ list2 }}\n      </prism>\n    </b-col>\n  </b-row>\n</template>\n\n<script>\nimport {\n  BBadge, BRow, BCol,\n} from 'bootstrap-vue'\nimport draggable from 'vuedraggable'\nimport Prism from 'vue-prism-component'\nimport 'prismjs'\nimport 'prismjs/themes/prism-tomorrow.css'\n\nexport default {\n  components: {\n    BBadge,\n    draggable,\n    BRow,\n    Prism,\n    BCol,\n  },\n  data() {\n    return {\n      list1: ['youtube', 'google', 'facebook', 'twitter', 'instagram', 'pinterest', 'tinder', 'slack', 'discord', 'github', 'gitlab'],\n      list2: ['google', 'youtube'],\n    }\n  },\n}\n</script>\n`\n\nexport const codeAnimation = `\n<template>\n  <div>\n\n    <h6 class=\"text-primary font-weight-bold mb-2\">\n      People Group\n    </h6>\n    <!-- draggable -->\n    <draggable\n      v-model=\"list\"\n      class=\"list-group list-group-flush cursor-move\"\n      tag=\"ul\"\n    >\n      <transition-group\n        type=\"transition\"\n        name=\"flip-list\"\n      >\n        <b-list-group-item\n          v-for=\"listItem in list\"\n          :key=\"listItem.email\"\n          tag=\"li\"\n        >\n          <div class=\"d-flex\">\n            <b-avatar :text=\"listItem.name.slice(0,2)\" />\n            <div class=\"ml-25\">\n              <b-card-text class=\"font-weight-bold mb-0\">\n                {{ listItem.name }}\n              </b-card-text>\n              <small>{{ listItem.email }}</small>\n            </div>\n          </div>\n        </b-list-group-item>\n      </transition-group>\n    </draggable>\n\n    <!-- code  -->\n    <prism\n      language=\"javascript\"\n      class=\"rounded mt-2\"\n    >\n      {{ list }}\n    </prism>\n  </div>\n</template>\n\n<script>\nimport { BListGroupItem, BAvatar} from 'bootstrap-vue'\nimport draggable from 'vuedraggable'\nimport Prism from 'vue-prism-component'\nimport 'prismjs'\nimport 'prismjs/themes/prism-tomorrow.css'\n\nexport default {\n  components: {\n    draggable,\n    BListGroupItem,\n    BAvatar,\n    Prism,\n  },\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}\n</script>\n\n<style>\n.list-group-item {\n  transition: all 1s\n}\n</style>\n`\n","<template>\n  <b-card-code title=\"Simple\">\n    <b-card-text>\n      <span>Simple Draggable list with in sync to original list. Remove </span>\n      <code>list</code>\n      <span> prop to break synchronization with original list.</span>\n    </b-card-text>\n\n    <!-- draggable -->\n    <draggable\n      v-model=\"list\"\n      tag=\"ul\"\n      class=\"list-group list-group-flush cursor-move\"\n    >\n      <b-list-group-item\n        v-for=\"(item, index) in list\"\n        :key=\"index\"\n        tag=\"li\"\n      >\n        <strong> {{ item }}</strong>\n      </b-list-group-item>\n    </draggable>\n\n    <!-- code -->\n    <prism\n      language=\"javascript\"\n      class=\"rounded mt-2\"\n    >list: {{ list }}\n    </prism>\n\n    <!-- togglable code -->\n    <template #code>\n      {{ codeSimple }}\n    </template>\n  </b-card-code>\n</template>\n\n<script>\nimport BCardCode from '@core/components/b-card-code/BCardCode.vue'\nimport { BListGroupItem, BCardText } from 'bootstrap-vue'\nimport draggable from 'vuedraggable'\nimport Prism from 'vue-prism-component'\nimport 'prismjs'\nimport 'prismjs/themes/prism-tomorrow.css'\nimport { codeSimple } from './code'\n\nexport default {\n  components: {\n    BCardCode,\n    draggable,\n    BListGroupItem,\n    Prism,\n    BCardText,\n  },\n  data() {\n    return {\n      codeSimple,\n      list:\n      [\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}\n</script>\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>\n  <b-card-code title=\"Multiple Lists\">\n    <b-card-text>\n      <span>Drag and drop items of more than one list. Add same </span>\n      <code>group</code>\n      <span> to </span>\n      <code>group</code>\n      <span> prop.</span>\n    </b-card-text>\n\n    <b-row>\n\n      <!-- people group 1 -->\n      <b-col md=\"6\">\n        <h6 class=\"text-primary font-weight-bold mb-2\">\n          People Group 1\n        </h6>\n\n        <!-- draggable -->\n        <draggable\n          :list=\"list1\"\n          tag=\"ul\"\n          group=\"people\"\n          class=\"list-group list-group-flush cursor-move\"\n        >\n          <b-list-group-item\n            v-for=\"(listItem, index) in list1\"\n            :key=\"index\"\n            tag=\"li\"\n          >\n            <div class=\"d-flex\">\n              <b-avatar :text=\"listItem.name.slice(0,2)\" />\n              <div class=\"ml-25\">\n                <b-card-text class=\"mb-0 font-weight-bold\">\n                  {{ listItem.name }}\n                </b-card-text>\n                <small>{{ listItem.email }}</small>\n              </div>\n            </div>\n          </b-list-group-item>\n        </draggable>\n      </b-col>\n\n      <!-- people group 2 -->\n      <b-col\n        md=\"6\"\n        class=\"mt-sm-2 mt-md-0\"\n      >\n        <h6 class=\"text-primary font-weight-bold mb-2\">\n          People Group 2\n        </h6>\n\n        <!-- draggable -->\n        <draggable\n          :list=\"list2\"\n          tag=\"ul\"\n          group=\"people\"\n          class=\"list-group list-group-flush cursor-move\"\n        >\n          <b-list-group-item\n            v-for=\"(listItem, index) in list2\"\n            :key=\"index\"\n            tag=\"li\"\n          >\n            <div class=\"d-flex\">\n              <b-avatar :text=\"listItem.name.slice(0,2)\" />\n              <div class=\"ml-25\">\n                <b-card-text class=\"mb-0 font-weight-bold\">\n                  {{ listItem.name }}\n                </b-card-text>\n                <small>{{ listItem.email }}</small>\n              </div>\n            </div>\n          </b-list-group-item>\n        </draggable>\n      </b-col>\n\n      <!-- people group 1 code -->\n      <b-col\n        md=\"6\"\n        class=\"mt-1\"\n      >\n        <prism\n          language=\"javascript\"\n          class=\"rounded\"\n        >\n          People Group 1: {{ list1 }}\n        </prism>\n      </b-col>\n\n      <!-- people group 2 code -->\n      <b-col\n        md=\"6\"\n        class=\"mt-1\"\n      >\n        <prism\n          language=\"javascript\"\n          class=\"rounded\"\n        >\n          People Group 2: {{ list2 }}\n        </prism>\n      </b-col>\n    </b-row>\n\n    <template #code>\n      {{ codeMultiple }}\n    </template>\n  </b-card-code>\n</template>\n\n<script>\nimport BCardCode from '@core/components/b-card-code/BCardCode.vue'\nimport {\n  BListGroupItem, BAvatar, BRow, BCol, BCardText,\n} from 'bootstrap-vue'\nimport draggable from 'vuedraggable'\nimport Prism from 'vue-prism-component'\nimport 'prismjs'\nimport 'prismjs/themes/prism-tomorrow.css'\nimport { codeMultiple } from './code'\n\nexport default {\n  components: {\n    BCardCode,\n    BAvatar,\n    BListGroupItem,\n    BCardText,\n    BRow,\n    BCol,\n    Prism,\n    draggable,\n  },\n  data() {\n    return {\n      codeMultiple,\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}\n</script>\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>\n  <b-card-code title=\"Clone List\">\n    <b-card-text>\n      <span>Clone list items from another existing list. Add </span>\n      <code>pull</code>\n      <span> and </span>\n      <code>put</code>\n      <span> to </span>\n      <code>group</code>\n      <span> prop.</span>\n    </b-card-text>\n\n    <b-row>\n\n      <!-- tag source -->\n      <b-col md=\"6\">\n        <h6>Tag Source</h6>\n\n        <draggable\n          :list=\"list1\"\n          :group=\"{name:'tags', pull:'clone', put:false }\"\n          class=\"mb-1 cursor-move\"\n        >\n          <b-badge\n            v-for=\"(listItem, index) in list1\"\n            :key=\"index\"\n            class=\"mr-25\"\n          >\n            {{ listItem }}\n          </b-badge>\n        </draggable>\n      </b-col>\n\n      <!-- add tag -->\n      <b-col md=\"6\">\n        <h6>Your Tags</h6>\n\n        <draggable\n          :list=\"list2\"\n          :group=\"{name: 'tags'}\"\n          class=\"mb-1 cursor-move\"\n        >\n          <b-badge\n            v-for=\"(listItem, index) in list2\"\n            :key=\"index\"\n            class=\"mr-25\"\n          >\n            {{ listItem }}\n          </b-badge>\n        </draggable>\n      </b-col>\n\n      <!-- tag source code -->\n      <b-col md=\"6\">\n        <prism\n          language=\"javascript\"\n          class=\"rounded\"\n        >\n          Tag Source: {{ list1 }}\n        </prism>\n      </b-col>\n\n      <!-- tag add code -->\n      <b-col md=\"6\">\n        <prism\n          language=\"javascript\"\n          class=\"rounded\"\n        >\n          Added tags: {{ list2 }}\n        </prism>\n      </b-col>\n    </b-row>\n\n    <template #code>\n      {{ codeClone }}\n    </template>\n  </b-card-code>\n</template>\n\n<script>\nimport BCardCode from '@core/components/b-card-code/BCardCode.vue'\nimport {\n  BBadge, BRow, BCol, BCardText,\n} from 'bootstrap-vue'\nimport draggable from 'vuedraggable'\nimport Prism from 'vue-prism-component'\nimport 'prismjs'\nimport 'prismjs/themes/prism-tomorrow.css'\nimport { codeClone } from './code'\n\nexport default {\n  components: {\n    BCardCode,\n    BBadge,\n    draggable,\n    BCardText,\n    BRow,\n    Prism,\n    BCol,\n  },\n  data() {\n    return {\n      codeClone,\n      list1: ['youtube', 'google', 'facebook', 'twitter', 'instagram', 'pinterest', 'tinder', 'slack', 'discord', 'github', 'gitlab'],\n      list2: ['google', 'youtube'],\n    }\n  },\n}\n</script>\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>\n  <b-card-code\n    title=\"Animation\"\n  >\n    <b-card-text>\n      <span>Add animation to changes using </span>\n      <code>transition-group</code>\n      <span>.</span>\n    </b-card-text>\n\n    <h6 class=\"text-primary font-weight-bold mb-2\">\n      People Group\n    </h6>\n    <!-- draggable -->\n    <draggable\n      v-model=\"list\"\n      class=\"list-group list-group-flush cursor-move\"\n      tag=\"ul\"\n    >\n      <transition-group\n        type=\"transition\"\n        name=\"flip-list\"\n      >\n        <b-list-group-item\n          v-for=\"listItem in list\"\n          :key=\"listItem.email\"\n          tag=\"li\"\n        >\n          <div class=\"d-flex\">\n            <b-avatar :text=\"listItem.name.slice(0,2)\" />\n            <div class=\"ml-25\">\n              <b-card-text class=\"font-weight-bold mb-0\">\n                {{ listItem.name }}\n              </b-card-text>\n              <small>{{ listItem.email }}</small>\n            </div>\n          </div>\n        </b-list-group-item>\n      </transition-group>\n    </draggable>\n\n    <!-- code  -->\n    <prism\n      language=\"javascript\"\n      class=\"rounded mt-2\"\n    >\n      {{ list }}\n    </prism>\n\n    <!-- toggleable code-->\n    <template #code>\n      {{ codeAnimation }}\n    </template>\n  </b-card-code>\n</template>\n\n<script>\nimport BCardCode from '@core/components/b-card-code/BCardCode.vue'\nimport { BListGroupItem, BAvatar, BCardText } from 'bootstrap-vue'\nimport draggable from 'vuedraggable'\nimport Prism from 'vue-prism-component'\nimport 'prismjs'\nimport 'prismjs/themes/prism-tomorrow.css'\nimport { codeAnimation } from './code'\n\nexport default {\n  components: {\n    BCardCode,\n    draggable,\n    BListGroupItem,\n    BAvatar,\n    BCardText,\n    Prism,\n  },\n  data() {\n    return {\n      codeAnimation,\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}\n</script>\n\n<style>\n.list-group-item {\n  transition: all 1s\n}\n</style>\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&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>\n  <b-row>\n    <b-col cols=\"12\">\n      <drag-drop-simple />\n      <drag-drop-multiple-list />\n      <drag-drop-clone />\n      <drag-drop-animation />\n    </b-col>\n  </b-row>\n</template>\n\n<script>\nimport { BRow, BCol } from 'bootstrap-vue'\nimport DragDropSimple from './DragDropSimple.vue'\nimport DragDropMultipleList from './DragDropMultipleList.vue'\nimport DragDropClone from './DragDropClone.vue'\nimport DragDropAnimation from './DragDropAnimation.vue'\n\nexport default {\n  components: {\n    BRow,\n    BCol,\n\n    DragDropSimple,\n    DragDropMultipleList,\n    DragDropClone,\n    DragDropAnimation,\n  },\n}\n</script>\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":""}