{"version":3,"sources":["webpack:///./src/components/component/FileUploader.vue?5591","webpack:///src/components/component/FileUploader.vue","webpack:///./src/components/component/FileUploader.vue?abac","webpack:///./src/components/component/FileUploader.vue?6121","webpack:///./src/components/component/FileUploader.vue?2e1d"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","class","showImage","attrs","inputId","accept","on","onFileChange","uploadedFile","file","name","_e","_v","_s","placeholder","staticStyle","style","$event","stopPropagation","preventDefault","$refs","previewModal","open","templateType","ref","staticRenderFns","component"],"mappings":"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","file":"js/chunk-33b1d03f.2f86cb5d.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"file-uploader\",class:{ 'image-mode' : _vm.showImage }},[_c('input',{staticClass:\"file-input-upload\",attrs:{\"id\":_vm.inputId,\"accept\":_vm.accept,\"type\":\"file\"},on:{\"change\":_vm.onFileChange}}),_c('label',{attrs:{\"for\":_vm.inputId}},[(!_vm.uploadedFile.file && !_vm.uploadedFile.name && !_vm.showImage)?_c('div',{staticClass:\"file-attachment-wrap\"},[_c('div',{staticClass:\"file-attachment-text\"},[_vm._v(_vm._s(_vm.placeholder))])]):_vm._e(),(_vm.showImage)?_c('div',{staticStyle:{\"position\":\"relative\"}},[(_vm.uploadedFile.file)?_c('div',{staticClass:\"uploaded-file-image\",style:((\"backgroundImage: url(\" + (_vm.uploadedFile.file) + \")\")),on:{\"click\":function($event){$event.stopPropagation();$event.preventDefault();return _vm.$refs.previewModal.open()}}},[_c('div',{staticClass:\"remove-wrap-image\"},[_c('i',{staticClass:\"material-icons remove-icon\",on:{\"click\":function($event){$event.stopPropagation();$event.preventDefault();_vm.uploadedFile = { file:'', name: '' }}}},[_vm._v(\"close\")])])]):_vm._e(),(!_vm.uploadedFile.file)?_c('div',{staticClass:\"uploaded-file-image\",staticStyle:{\"background\":\"#c7c7c7\",\"display\":\"flex\",\"align-items\":\"center\",\"justify-content\":\"center\"}},[_c('i',{staticClass:\"material-icons\",staticStyle:{\"font-size\":\"44px\",\"color\":\"#fff\"}},[_vm._v(\"add_photo_alternate\")])]):_vm._e()]):_vm._e()]),(!_vm.showImage)?_c('div',{class:{ 'file-name-area' : _vm.uploadedFile.file && _vm.uploadedFile.name },staticStyle:{\"position\":\"relative\"}},[(_vm.uploadedFile.file)?_c('div',{staticClass:\"uploaded-file-name file-name-mobile\"},[_vm._v(\" \"+_vm._s(_vm.uploadedFile.name)+\" \")]):_vm._e(),(_vm.uploadedFile.file && _vm.uploadedFile.name)?_c('div',{staticClass:\"remove-wrap\"},[_c('i',{staticClass:\"material-icons remove-icon\",on:{\"click\":function($event){_vm.uploadedFile = { file:'', name: '' }}}},[_vm._v(\"close\")])]):_vm._e()]):_vm._e(),(_vm.templateType && !_vm.showImage)?_c('a',{attrs:{\"href\":\"launchpack.co.kr\",\"target\":\"_blank\"}},[_c('div',{staticClass:\"template-highlight\"},[_vm._v(_vm._s(_vm.templateType))])]):_vm._e(),_c('sweet-modal',{ref:\"previewModal\",attrs:{\"overlay-theme\":\"dark\"}},[_c('img',{staticClass:\"preview-img\",attrs:{\"src\":_vm.uploadedFile.file}})])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<!-- 상품옵션 견적요청 내역 -->\r\n<template>\r\n  <div class=\"file-uploader\" :class=\"{ 'image-mode' : showImage }\">\r\n\r\n    <!-- 첨부파일 추가하기 -->\r\n    <input class=\"file-input-upload\"\r\n          :id=\"inputId\"\r\n          :accept=\"accept\"\r\n          @change=\"onFileChange\"\r\n          type=\"file\">\r\n\r\n    <label :for=\"inputId\">\r\n      <div class=\"file-attachment-wrap\"\r\n        v-if=\"!uploadedFile.file && !uploadedFile.name && !showImage\">\r\n        <div class=\"file-attachment-text\">{{ placeholder }}</div>\r\n      </div>\r\n      <!-- 미리보기 이미지 -->\r\n      <div v-if=\"showImage\" style=\"position: relative;\">\r\n        <div v-if=\"uploadedFile.file\" class=\"uploaded-file-image\" @click.stop.prevent=\"$refs.previewModal.open()\"\r\n          :style=\"`backgroundImage: url(${uploadedFile.file})`\">\r\n          <div class=\"remove-wrap-image\">\r\n            <i class=\"material-icons remove-icon\"\r\n              @click.stop.prevent=\"uploadedFile = { file:'', name: '' }\">close</i>\r\n          </div>\r\n        </div>\r\n        <div v-if=\"!uploadedFile.file\"\r\n          class=\"uploaded-file-image\"\r\n          style=\"background: #c7c7c7; display:flex; align-items:center; justify-content:center;\">\r\n          <i class=\"material-icons\"\r\n            style=\"font-size: 44px; color: #fff;\">add_photo_alternate</i>\r\n        </div>\r\n      </div>\r\n    </label>\r\n\r\n    <!-- 이미지 이름 -->\r\n    <div v-if=\"!showImage\" style=\"position: relative;\"\r\n      :class=\"{ 'file-name-area' : uploadedFile.file && uploadedFile.name }\">\r\n      <div class=\"uploaded-file-name file-name-mobile\" v-if=\"uploadedFile.file\">\r\n        {{ uploadedFile.name }}\r\n      </div>\r\n      <div v-if=\"uploadedFile.file && uploadedFile.name\"\r\n        class=\"remove-wrap\">\r\n        <i class=\"material-icons remove-icon\"\r\n          @click=\"uploadedFile = { file:'', name: '' }\">close</i>\r\n      </div>\r\n    </div>\r\n\r\n    <!-- 템플릿양식 -->\r\n    <a v-if=\"templateType && !showImage\"\r\n      href=\"launchpack.co.kr\" target=\"_blank\">\r\n      <div class=\"template-highlight\">{{ templateType }}</div>\r\n    </a>\r\n\r\n    <sweet-modal ref=\"previewModal\" overlay-theme=\"dark\">\r\n      <img class=\"preview-img\" :src=\"uploadedFile.file\">\r\n    </sweet-modal>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\n  import { SweetModal } from 'sweet-modal-vue';\r\n\r\n  export default {\r\n\r\n    name: 'file-uploader',\r\n\r\n    components: {\r\n      SweetModal\r\n    },\r\n\r\n    props: {\r\n      file: {\r\n        type: Object,\r\n        required: false\r\n      },\r\n      // id 부여\r\n      type: {\r\n        type: String,\r\n        required: true\r\n      },\r\n      fileType: {\r\n        type: String,\r\n        required: true\r\n      },\r\n      placeholder: {\r\n        type: String,\r\n        required: true\r\n      },\r\n      showImage: {\r\n        type: Boolean,\r\n        required: false\r\n      }\r\n    },\r\n\r\n    data () {\r\n      return {\r\n        uploadedFile: {\r\n          file: '',\r\n          name: ''\r\n        },\r\n        selectedImg: '',\r\n        scrollTop: undefined\r\n      }\r\n    },\r\n\r\n    created() {\r\n      if (this.file) {\r\n        this.uploadedFile = this.file;\r\n      }\r\n    },\r\n\r\n    watch: {\r\n      uploadedFile(n) {\r\n        this.$emit('uploadedFile', n);\r\n      }\r\n    },\r\n\r\n    computed: {\r\n      inputId() {\r\n        return this.type + '-' + this.fileType;\r\n      },\r\n      accept() {\r\n        if(this.fileType === 'image') return 'image/*';\r\n        else if(this.fileType === 'ppt') return '.ppt, .pptx';\r\n        else return '*/*';\r\n      },\r\n\r\n      templateType() {\r\n        if (this.type === 'main') return '메인페이지 양식.pptx';\r\n        else if (this.type === 'product') return '상품목록 페이지 양식.pptx';\r\n        else if (this.type === 'product_detail') return '상품상세 페이지 양식.pptx';\r\n        else return '';\r\n      }\r\n    },\r\n\r\n    methods: {\r\n      onFileChange(e) {\r\n        var files = e.target.files || e.dataTransfer.files;\r\n        if (!files.length)\r\n          return;\r\n\r\n        let file = files[0];\r\n        var reader = new FileReader();\r\n        reader.readAsDataURL(file);\r\n        reader.onload = function(e) {\r\n          this.uploadedFile = {\r\n            file: e.target.result,\r\n            name: file.name\r\n          };\r\n        }.bind(this);\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style scoped>\r\n\r\n  @media (max-width: 600px) {\r\n    .file-name-mobile {\r\n      transform: translateY(4px);\r\n    }\r\n  }\r\n\r\n  .file-input-upload {\r\n    outline: 0;\r\n    position: absolute;\r\n    width: .01em;\r\n  }\r\n\r\n  .file-uploader {\r\n    height: 44px;\r\n    border-bottom: 2px solid #303030;\r\n    margin: 0 12px;\r\n  }\r\n\r\n  .file-uploader.image-mode{\r\n    height: 248px;\r\n    border: none;\r\n  }\r\n\r\n  .file-attachment-wrap {\r\n    height: 100%;\r\n    display: flex;\r\n    align-items: center;\r\n    padding-right: 80px;\r\n  }\r\n\r\n  .file-attachment-text {\r\n    height: 28px;\r\n    font-size: 12px;\r\n    color: #fff;\r\n    background: #c7c7c7;\r\n    line-height: 28px;\r\n    text-align: center;\r\n    font-weight: 700;\r\n    border-radius: 8px;\r\n    padding: 0 12px;\r\n  }\r\n\r\n  .uploaded-file-image {\r\n    width: 120px;\r\n    height: 214px;\r\n    background-size: contain;\r\n    background-repeat: no-repeat;\r\n    background-position: center;\r\n    border: 1px solid #eee;\r\n  }\r\n\r\n  .file-name-area {\r\n    height: 40px;\r\n  }\r\n\r\n  .uploaded-file-name {\r\n    font-size: 16px;\r\n    font-weight: 700;\r\n    color: #7ad4ef;\r\n    text-overflow: ellipsis;\r\n    display: inline-block;\r\n    white-space: nowrap;\r\n    word-wrap: normal !important;\r\n    overflow: hidden;\r\n    padding-right: 32px;\r\n  }\r\n\r\n  .remove-wrap {\r\n    position: absolute;\r\n    right: 0;\r\n    top: 11px;\r\n    width: 20px;\r\n    height: 20px;\r\n    background: #e6e6e6;\r\n    border-radius: 20px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .remove-wrap-image {\r\n    position: absolute;\r\n    right: 4px;\r\n    top: 6px;\r\n    width: 20px;\r\n    height: 20px;\r\n    background: #ff6600;\r\n    border-radius: 20px;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    cursor: pointer;\r\n  }\r\n\r\n  .material-icons.remove-icon{\r\n    font-size: 15px;\r\n    color: #fff;\r\n    font-weight: 800;\r\n  }\r\n\r\n  .template-highlight {\r\n    text-decoration: underline;\r\n    font-weight: 700;\r\n    font-size: 14px;\r\n    color: #7ad4ef;\r\n  }\r\n\r\n  .preview-img {\r\n    max-height: 80vh;\r\n    border: 1px solid #dddddd;\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!./FileUploader.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!./FileUploader.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./FileUploader.vue?vue&type=template&id=410a4e52&scoped=true&\"\nimport script from \"./FileUploader.vue?vue&type=script&lang=js&\"\nexport * from \"./FileUploader.vue?vue&type=script&lang=js&\"\nimport style0 from \"./FileUploader.vue?vue&type=style&index=0&id=410a4e52&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  \"410a4e52\",\n  null\n  \n)\n\nexport default component.exports","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!./FileUploader.vue?vue&type=style&index=0&id=410a4e52&scoped=true&lang=css&\""],"sourceRoot":""}