{"version":3,"sources":["webpack:///./src/components/Draggable.vue?3d76","webpack:///./src/components/Draggable.vue?1747","webpack:///src/components/Draggable.vue","webpack:///./src/components/Draggable.vue?d9ee","webpack:///./src/components/Draggable.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","attrs","on","$event","imageUrl","_v","_e","model","value","callback","$$v","styleDialog","expression","staticClass","fontSize","selectedDraggable","style","$set","fonts","fontWeight","color","staticStyle","ref","preventDefault","_l","draggable","index","key","position","left","x","top","y","width","height","startDrag","text","startsWith","getStyle","domProps","_s","updateData","stopPropagation","startResize","removeDraggable","toggleTools","staticRenderFns","components","VUpload","VColorField","props","draggables","Array","formModel","Object","String","data","mounted","that","push","i","forEach","d","path","$root","portal_id","imgUrl","$on","f","data_object","object_name","uploadImgString","draggableVisible","console","log","response","img_str","imageBase64String","methods","event","target","innerHTML","insertNewLine","selection","rangeCount","deleteFromDocument","range","collapse","insertNode","br","textNode","setStartAfter","setEndAfter","removeAllRanges","addRange","span","property","suffix","onImageUpload","URL","createObjectURL","file","currentDrag","offsetX","clientX","offsetY","clientY","window","addEventListener","onDrag","endDrag","removeEventListener","updateModel","isResizing","initialWidth","initialHeight","onResize","endResize","dx","dy","splice","base64_str","filename","name","replace","portal","updatePositionsHTML","draggableDivs","div","serializer","serializeToString","doc","html","document","getElementById","$emit","component","VBtn","VContainer","VDialog","VRow","VSelect","VSpacer","VToolbar"],"mappings":"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","file":"js/chunk-8e6ffbfc.6ebf71fa.js","sourcesContent":["import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../node_modules/css-loader/dist/cjs.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!./Draggable.vue?vue&type=style&index=0&id=0651c92e&scoped=true&lang=css&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../node_modules/css-loader/dist/cjs.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!./Draggable.vue?vue&type=style&index=0&id=0651c92e&scoped=true&lang=css&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('v-container',[_c('v-row',[(_vm.imageUrl)?_c('v-btn',{attrs:{\"text\":\"\"},on:{\"click\":function($event){_vm.imageUrl = ''}}},[_vm._v(\"Upload New File\")]):_vm._e()],1),_c('v-dialog',{attrs:{\"width\":\"500\"},model:{value:(_vm.styleDialog),callback:function ($$v) {_vm.styleDialog=$$v},expression:\"styleDialog\"}},[(_vm.selectedDraggable)?_c('v-toolbar',[_c('v-spacer'),_c('v-select',{staticClass:\"ml-2 mt-4\",attrs:{\"label\":\"Font Size\",\"items\":_vm.fontSize},model:{value:(_vm.selectedDraggable.style.fontSize),callback:function ($$v) {_vm.$set(_vm.selectedDraggable.style, \"fontSize\", $$v)},expression:\"selectedDraggable.style.fontSize\"}}),_c('v-select',{staticClass:\"ml-2 mr-2 mt-4\",attrs:{\"label\":\"Font\",\"items\":_vm.fonts},model:{value:(_vm.selectedDraggable.style.fontFamily),callback:function ($$v) {_vm.$set(_vm.selectedDraggable.style, \"fontFamily\", $$v)},expression:\"selectedDraggable.style.fontFamily\"}}),_c('v-select',{staticClass:\"ml-2 mr-2 mt-4\",attrs:{\"label\":\"Font Weight\",\"items\":_vm.fontWeight},model:{value:(_vm.selectedDraggable.style.fontWeight),callback:function ($$v) {_vm.$set(_vm.selectedDraggable.style, \"fontWeight\", $$v)},expression:\"selectedDraggable.style.fontWeight\"}}),_c('v-color-field',{attrs:{\"on\":_vm.on,\"vModel\":_vm.selectedDraggable.style.color,\"label\":\"Colors\"},model:{value:(_vm.selectedDraggable.style.color),callback:function ($$v) {_vm.$set(_vm.selectedDraggable.style, \"color\", $$v)},expression:\"selectedDraggable.style.color\"}})],1):_vm._e()],1),_c('v-row',[(!_vm.imageUrl)?_c('v-upload',{staticStyle:{\"width\":\"100%\"},attrs:{\"label\":\"Template Document\",\"uploadOnly\":true,\"objectName\":\"templates\",\"convertPdfToImage\":true,\"defaultMessage\":\"Drag and Drop PDF or Image file\"}}):_vm._e()],1),_c('v-row',[(_vm.imageUrl)?_c('div',{ref:\"dragArea\",staticClass:\"image-container\",attrs:{\"id\":\"dragArea\"},on:{\"dragover\":function($event){$event.preventDefault();}}},[_c('img',{attrs:{\"src\":_vm.imageUrl,\"alt\":\"Uploaded content\"}}),(_vm.draggableVisible)?_c('div',_vm._l((_vm.draggables),function(draggable,index){return _c('div',{key:index,staticClass:\"draggable-div\",style:({\n            position: 'absolute',\n            left: draggable.x + 'px',\n            top: draggable.y + 'px',\n            width: draggable.width + 'px',\n            height: draggable.height + 'px',\n          }),on:{\"mousedown\":function($event){return _vm.startDrag($event, index)}}},[(\n              draggable.text.startsWith('{{') ||\n              draggable.text.startsWith('{{')\n            )?_c('div',{staticClass:\"draggable-field\",style:(_vm.getStyle(draggable)),domProps:{\"innerHTML\":_vm._s(draggable.text)}}):_c('div',{staticClass:\"draggable-field-editable\",style:(_vm.getStyle(draggable)),attrs:{\"contenteditable\":true},domProps:{\"innerHTML\":_vm._s(draggable.text)},on:{\"blur\":function($event){return _vm.updateData($event, draggable)}}}),_c('div',{staticClass:\"resize-handle\",on:{\"mousedown\":function($event){$event.stopPropagation();return _vm.startResize($event, index)}}}),_c('a',{staticClass:\"remove-btn\",on:{\"click\":function($event){$event.stopPropagation();return _vm.removeDraggable(index)}}}),_c('a',{staticClass:\"style-btn\",on:{\"click\":function($event){$event.stopPropagation();return _vm.toggleTools(draggable)}}})])}),0):_vm._e()]):_vm._e()])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <v-container>\r\n    <!-- Image Upload with vue2-dropzone -->\r\n\r\n    <v-row>\r\n      <v-btn v-if=\"imageUrl\" @click=\"imageUrl = ''\" text>Upload New File</v-btn>\r\n    </v-row>\r\n    <!-- draggables:{{ draggables }} -->\r\n    <v-dialog v-model=\"styleDialog\" width=\"500\">\r\n      <v-toolbar v-if=\"selectedDraggable\">\r\n        <v-spacer></v-spacer>\r\n        <v-select\r\n          class=\"ml-2 mt-4\"\r\n          label=\"Font Size\"\r\n          v-model=\"selectedDraggable.style.fontSize\"\r\n          :items=\"fontSize\"\r\n        ></v-select>\r\n        <v-select\r\n          v-model=\"selectedDraggable.style.fontFamily\"\r\n          class=\"ml-2 mr-2 mt-4\"\r\n          label=\"Font\"\r\n          :items=\"fonts\"\r\n        ></v-select>\r\n        <v-select\r\n          v-model=\"selectedDraggable.style.fontWeight\"\r\n          class=\"ml-2 mr-2 mt-4\"\r\n          label=\"Font Weight\"\r\n          :items=\"fontWeight\"\r\n        ></v-select>\r\n        <v-color-field\r\n          :on=\"on\"\r\n          :vModel=\"selectedDraggable.style.color\"\r\n          v-model=\"selectedDraggable.style.color\"\r\n          label=\"Colors\"\r\n        ></v-color-field>\r\n        <!-- <v-btn icon @click=\"applyStyle\">\r\n                  <v-icon>mdi-check</v-icon>\r\n                </v-btn> -->\r\n      </v-toolbar>\r\n    </v-dialog>\r\n    <v-row>\r\n      <v-upload\r\n        style=\"width: 100%\"\r\n        label=\"Template Document\"\r\n        :uploadOnly=\"true\"\r\n        objectName=\"templates\"\r\n        :convertPdfToImage=\"true\"\r\n        v-if=\"!imageUrl\"\r\n        defaultMessage=\"Drag and Drop PDF or Image file\"\r\n      ></v-upload>\r\n    </v-row>\r\n    <v-row>\r\n      <div\r\n        ref=\"dragArea\"\r\n        id=\"dragArea\"\r\n        v-if=\"imageUrl\"\r\n        class=\"image-container\"\r\n        @dragover.prevent\r\n      >\r\n        <img :src=\"imageUrl\" alt=\"Uploaded content\" />\r\n        <div v-if=\"draggableVisible\">\r\n          <div\r\n            v-for=\"(draggable, index) in draggables\"\r\n            :key=\"index\"\r\n            :style=\"{\r\n              position: 'absolute',\r\n              left: draggable.x + 'px',\r\n              top: draggable.y + 'px',\r\n              width: draggable.width + 'px',\r\n              height: draggable.height + 'px',\r\n            }\"\r\n            class=\"draggable-div\"\r\n            @mousedown=\"startDrag($event, index)\"\r\n          >\r\n            <!-- draggable.style: {{ draggable.style }} -->\r\n            <div\r\n              v-if=\"\r\n                draggable.text.startsWith('{{') ||\r\n                draggable.text.startsWith('{{')\r\n              \"\r\n              v-html=\"draggable.text\"\r\n              :style=\"getStyle(draggable)\"\r\n              class=\"draggable-field\"\r\n            ></div>\r\n            <div\r\n              v-html=\"draggable.text\"\r\n              @blur=\"updateData($event, draggable)\"\r\n              :contenteditable=\"true\"\r\n              :style=\"getStyle(draggable)\"\r\n              class=\"draggable-field-editable\"\r\n              v-else\r\n            ></div>\r\n\r\n            <div\r\n              class=\"resize-handle\"\r\n              @mousedown.stop=\"startResize($event, index)\"\r\n            ></div>\r\n            <a @click.stop=\"removeDraggable(index)\" class=\"remove-btn\"></a>\r\n            <a @click.stop=\"toggleTools(draggable)\" class=\"style-btn\"></a>\r\n          </div>\r\n        </div>\r\n      </div>\r\n    </v-row>\r\n  </v-container>\r\n</template>\r\n\r\n<script>\r\nimport * as fun from \"../plugins/common\";\r\nimport axios from \"axios\";\r\nexport default {\r\n  components: {\r\n    VUpload: () => import(\"../components/UploadDragDrop.vue\"),\r\n    VColorField: () => import(\"../components/ColorField.vue\"),\r\n  },\r\n  props: {\r\n    // imageUrl: String,\r\n    draggables: Array,\r\n    formModel: Object,\r\n    model: String,\r\n  },\r\n\r\n  data: () => ({\r\n    // draggables: [\r\n    //   { text: \"text1\", x: 10, y: 10, width: 100, height: 50 },\r\n    //   { text: \"text2\", x: 15, y: 15, width: 100, height: 50 },\r\n    //   // ... you can add more here\r\n    // ],\r\n    model: null,\r\n    dropzoneReady: false,\r\n    imageUrl: \"\",\r\n    // \"http://localhost:8080/user_images/portal_85/templates/CA_BOL_Front.jpg\",\r\n    //   \"http://localhost:8080/user_images/portal_85/templates/CA_BOL_Front.jpg\",\r\n    draggableVisible: false,\r\n    // draggablePos: { x: 0, y: 0 },\r\n    dragOffset: { x: 0, y: 0 },\r\n    currentDrag: null,\r\n    offsetX: 0,\r\n    offsetY: 0,\r\n    isDragging: false,\r\n    isPdf: false,\r\n    imgTop: 0, // default position\r\n    imgLeft: 0, // default position\r\n    dropzoneOptions: {\r\n      maxFiles: 1,\r\n      addRemoveLinks: true,\r\n      acceptedFiles: \"image/*\",\r\n      autoProcessQueue: false, // We manually handle file uploads\r\n      previewsContainer: false, // Disable default image preview\r\n    },\r\n    width: null,\r\n    height: null,\r\n    imageBase64String: \"\",\r\n    f: null,\r\n    path: \"\",\r\n    fontSize: [],\r\n    fontWeight: [\"bold\", \"normal\"],\r\n    fonts: [\r\n      \"Arial\",\r\n      \"Verdana\",\r\n      \"Helvetica\",\r\n      \"Tahoma\",\r\n      \"Trebuchet MS\",\r\n      \"Times New Roman\",\r\n      \"Georgia\",\r\n      \"Garamond\",\r\n      \"Courier New\",\r\n      \"Brush Script MT\",\r\n    ],\r\n    on: {},\r\n    styleModel: [],\r\n    styleDialog: false,\r\n    selectedDraggable: null,\r\n    fieldIndex: -1,\r\n  }),\r\n  mounted() {\r\n    var that = this;\r\n    for (let i = 8; i <= 78; i += 2) {\r\n      this.fontSize.push(i);\r\n    }\r\n    this.draggables.forEach((d) => {\r\n      if (!d.style) {\r\n        d.style = {\r\n          color: \"#000000\",\r\n        };\r\n      }\r\n    });\r\n    this.path = \"/user_images/portal_\" + that.$root.portal_id + \"/templates/\";\r\n    this.imageUrl = this.formModel.imgUrl;\r\n    this.$root.$on(\"record_updated\", (f) => {\r\n      // console.log(f);\r\n      if (f.data_object.object_name == \"v_document\") {\r\n        if (f.model.draggable) {\r\n          that.uploadImgString();\r\n        }\r\n      }\r\n    });\r\n    // if (localStorage.getItem(\"draggablePos\")) {\r\n    //   this.draggablePos = JSON.parse(localStorage.getItem(\"draggablePos\"));\r\n    // }\r\n    this.draggableVisible = true;\r\n    this.$root.$on(\"fileUploaded\", (f) => {\r\n      console.log(f);\r\n      if (f.response.object_name == \"templates\") {\r\n        this.path += f.response.fileName\r\n          .replaceAll(\" \", \"_\")\r\n          .replace(\".pdf\", \".jpg\");\r\n        if (f.response.img_str) {\r\n          that.imageBase64String = f.response.img_str;\r\n          that.width = f.response.width + \"px\";\r\n          that.height = f.response.height + \"px\";\r\n          that.imageUrl = \"data:image/jpeg;base64,\" + f.response.img_str;\r\n          that.f = f;\r\n          that.formModel.imgUrl = that.path;\r\n          // that.uploadImgString(f);\r\n        } else {\r\n          that.imageUrl = that.path;\r\n        }\r\n      }\r\n    });\r\n  },\r\n  methods: {\r\n    updateData(event, d) {\r\n      d.text = event.target.innerHTML;\r\n    },\r\n    insertNewLine(event, d) {\r\n      d.text = event.target.innerHTML += \"<br/>\";\r\n      const selection = window.getSelection();\r\n      if (!selection.rangeCount) return false;\r\n      selection.deleteFromDocument();\r\n      const range = selection.getRangeAt(0);\r\n      range.collapse(false);\r\n\r\n      const br = document.createElement(\"br\");\r\n      const textNode = document.createTextNode(\"\\u00A0\"); // Non-breaking space\r\n      range.insertNode(br);\r\n      range.insertNode(textNode);\r\n\r\n      range.setStartAfter(textNode);\r\n      range.setEndAfter(textNode);\r\n      selection.removeAllRanges();\r\n      selection.addRange(range);\r\n\r\n      event.preventDefault();\r\n    },\r\n    toggleTools(d) {\r\n      this.selectedDraggable = d;\r\n      if (!d.style) {\r\n        d.style = {\r\n          color: \"#000000\",\r\n        };\r\n      }\r\n      this.styleDialog = !this.styleDialog;\r\n      // if (d.tools) {\r\n      //   d.tools = false;\r\n      // } else {\r\n      //   d.tools = true;\r\n      // }\r\n    },\r\n    getStyle(draggable) {\r\n      // Apply each style property from the styleModel to the span\r\n      var span = {};\r\n      if (draggable.style) {\r\n        for (var property in draggable.style) {\r\n          var suffix = \"\";\r\n          if (property == \"fontSize\") {\r\n            suffix = \"px\";\r\n          }\r\n\r\n          span[property] = draggable.style[property] + suffix;\r\n        }\r\n      }\r\n\r\n      return span;\r\n      // this.styleDialog = false;\r\n    },\r\n    onImageUpload(file, response) {\r\n      this.imageUrl = URL.createObjectURL(file);\r\n    },\r\n    // setDraggablePosition(e) {\r\n    //   if (!this.isDragging) {\r\n    //     this.draggableVisible = true;\r\n    //     this.draggablePos = { x: e.offsetX, y: e.offsetY };\r\n    //   }\r\n    // },\r\n    startDrag(event, index) {\r\n      this.currentDrag = index;\r\n      this.offsetX = event.clientX - this.draggables[index].x;\r\n      this.offsetY = event.clientY - this.draggables[index].y;\r\n      window.addEventListener(\"mousemove\", this.onDrag);\r\n      window.addEventListener(\"mouseup\", this.endDrag);\r\n    },\r\n    onDrag(event) {\r\n      if (this.currentDrag !== null) {\r\n        this.draggables[this.currentDrag].x = event.clientX - this.offsetX;\r\n        this.draggables[this.currentDrag].y = event.clientY - this.offsetY;\r\n      }\r\n    },\r\n    endDrag() {\r\n      this.currentDrag = null;\r\n      window.removeEventListener(\"mousemove\", this.onDrag);\r\n      window.removeEventListener(\"mouseup\", this.endDrag);\r\n      this.updateModel();\r\n    },\r\n    startResize(event, index) {\r\n      this.isResizing = true;\r\n      this.currentDrag = index;\r\n      this.offsetX = event.clientX;\r\n      this.offsetY = event.clientY;\r\n      this.initialWidth = this.draggables[index].width;\r\n      this.initialHeight = this.draggables[index].height;\r\n      window.addEventListener(\"mousemove\", this.onResize);\r\n      window.addEventListener(\"mouseup\", this.endResize);\r\n    },\r\n    onResize(event) {\r\n      if (this.currentDrag !== null && this.isResizing) {\r\n        let dx = event.clientX - this.offsetX;\r\n        let dy = event.clientY - this.offsetY;\r\n        this.draggables[this.currentDrag].width = this.initialWidth + dx;\r\n        this.draggables[this.currentDrag].height = this.initialHeight + dy;\r\n      }\r\n    },\r\n    endResize() {\r\n      if (this.isResizing) {\r\n        this.isResizing = false;\r\n        this.currentDrag = null;\r\n        window.removeEventListener(\"mousemove\", this.onResize);\r\n        window.removeEventListener(\"mouseup\", this.endResize);\r\n        this.updateModel();\r\n      }\r\n    },\r\n    removeDraggable(index) {\r\n      this.draggables.splice(index, 1);\r\n      this.updateModel();\r\n    },\r\n    uploadImgString() {\r\n      if (this.f) {\r\n        var f = this.f;\r\n        var data = {\r\n          base64_str: f.response.img_str,\r\n          object_name: \"templates\",\r\n          filename: f.file.name.replace(\".pdf\", \".jpg\"),\r\n          portal: \"portal_\" + this.$root.portal_id,\r\n        };\r\n        axios.post(this.serverURL + \"/upload_file\", data).then((response) => {\r\n          console.log(response);\r\n        });\r\n      }\r\n    },\r\n    updatePositionsHTML(html) {\r\n      let parser = new DOMParser();\r\n      let doc = parser.parseFromString(html, \"text/html\");\r\n\r\n      let draggableDivs = doc.querySelectorAll(\".draggable-div\");\r\n\r\n      draggableDivs.forEach((div) => {\r\n        let leftValue = parseInt(div.style.left);\r\n        let topValue = parseInt(div.style.top);\r\n\r\n        div.style.left = `${leftValue + this.dragOffset.x}px`;\r\n        div.style.top = `${topValue + this.dragOffset.y}px`;\r\n      });\r\n\r\n      let serializer = new XMLSerializer();\r\n      return serializer.serializeToString(doc);\r\n    },\r\n    updateModel() {\r\n      var html = document.getElementById(\"dragArea\").innerHTML;\r\n      html = this.updatePositionsHTML(html);\r\n      this.$emit(\"input\", html);\r\n    },\r\n  },\r\n};\r\n</script>\r\n\r\n<style scoped>\r\n.image-container {\r\n  position: relative;\r\n  display: inline-block;\r\n  max-height: 60vh;\r\n  overflow: auto;\r\n}\r\n\r\n.draggable-div {\r\n  position: absolute;\r\n  background-color: white;\r\n  /* padding: 10px; */\r\n  /* background-color: rgba(0, 0, 0, 0.5); */\r\n  border: dotted 1px;\r\n  /* color: white; */\r\n  cursor: grab;\r\n}\r\n.resize-handle {\r\n  width: 10px;\r\n  height: 10px;\r\n  /* background-color: yellow; */\r\n  position: absolute;\r\n  bottom: 5px;\r\n  right: 0;\r\n\r\n  cursor: se-resize; /* southeast resize cursor */\r\n}\r\n.resize-handle::after {\r\n  content: \"\\2798\";\r\n}\r\n.remove-btn {\r\n  position: absolute;\r\n  padding: 2px;\r\n  border: solid 1px;\r\n  top: 0;\r\n  right: -15px;\r\n  background-color: yellow;\r\n  color: red;\r\n  cursor: pointer;\r\n  /* padding: 1px; */\r\n  font-size: small;\r\n  z-index: 2; /* to ensure it's above other contents */\r\n}\r\n.remove-btn::before {\r\n  content: \"\\2716\";\r\n}\r\n.style-btn {\r\n  position: absolute;\r\n  padding: 2px;\r\n  border: solid 1px;\r\n  top: 0;\r\n  right: 0px;\r\n  background-color: yellow;\r\n  color: rgb(68, 20, 209);\r\n  cursor: pointer;\r\n\r\n  /* padding: 1px; */\r\n  font-size: small;\r\n  z-index: 2; /* to ensure it's above other contents */\r\n}\r\n.style-btn::before {\r\n  content: \"\\270E\";\r\n}\r\n.draggable-field-editable {\r\n  background-color: rgb(219, 219, 211);\r\n}\r\nimg {\r\n  max-width: 100%;\r\n  display: block;\r\n}\r\n.draggable-tools {\r\n  position: absolute;\r\n  padding: 2px;\r\n  border: solid 1px;\r\n  top: -10px;\r\n  right: 0;\r\n  background-color: rgb(219, 219, 211);\r\n}\r\n</style>\r\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!./Draggable.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!./Draggable.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Draggable.vue?vue&type=template&id=0651c92e&scoped=true&\"\nimport script from \"./Draggable.vue?vue&type=script&lang=js&\"\nexport * from \"./Draggable.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Draggable.vue?vue&type=style&index=0&id=0651c92e&scoped=true&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  \"0651c92e\",\n  null\n  \n)\n\nexport default component.exports\n\n/* vuetify-loader */\nimport installComponents from \"!../../node_modules/vuetify-loader/lib/runtime/installComponents.js\"\nimport { VBtn } from 'vuetify/lib/components/VBtn';\nimport { VContainer } from 'vuetify/lib/components/VGrid';\nimport { VDialog } from 'vuetify/lib/components/VDialog';\nimport { VRow } from 'vuetify/lib/components/VGrid';\nimport { VSelect } from 'vuetify/lib/components/VSelect';\nimport { VSpacer } from 'vuetify/lib/components/VGrid';\nimport { VToolbar } from 'vuetify/lib/components/VToolbar';\ninstallComponents(component, {VBtn,VContainer,VDialog,VRow,VSelect,VSpacer,VToolbar})\n"],"sourceRoot":""}