{"version":3,"sources":["webpack:///./src/views/extensions/drag-drop/code.js"],"names":["codeSimple","codeMultiple","codeClone","codeAnimation"],"mappings":"kHAAA,uLAAO,IAAMA,EAAa,+vCAuDbC,EAAe,wvHAiKfC,EAAY,o0DA2FZC,EAAgB","file":"js/chunk-2d0c7705.e0a4c971.js","sourcesContent":["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"],"sourceRoot":""}