{"version":3,"sources":["webpack:///./src/components/LpDropDown.vue?ecbc","webpack:///./src/components/LpDropDown.vue?5655","webpack:///src/components/LpDropDown.vue","webpack:///./src/components/LpDropDown.vue?ea18","webpack:///./src/components/LpDropDown.vue"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","name","undefined","_v","_s","_e","class","staticStyle","style","on","$event","stopPropagation","preventDefault","openList","value","inputValue","placeholder","valueLabel","isOpen","attrs","_l","opt","idx","key","clickTargetItem","label","etcInputValue","staticRenderFns","components","component"],"mappings":"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","file":"js/chunk-49e1ae46.4c09bf1d.js","sourcesContent":["export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--11-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--11-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--11-oneOf-1-2!../../node_modules/stylus-loader/index.js??ref--11-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./LpDropDown.vue?vue&type=style&index=0&id=205de2aa&lang=stylus&scoped=true&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"item\"},[(_vm.name !== '' && _vm.name !== undefined)?_c('h4',{staticClass:\"item-title\"},[_vm._v(_vm._s(_vm.name))]):_vm._e(),_c('div',{class:{'full-width': _vm.name === '' || _vm.name === undefined},staticStyle:{\"position\":\"relative\",\"display\":\"inline-block\"}},[_c('div',{class:{'full-width': _vm.name === '' || _vm.name === undefined},style:(_vm.dropdownSelectWrapper),on:{\"click\":function($event){$event.stopPropagation();$event.preventDefault();return _vm.openList($event)}}},[_c('span',{staticClass:\"drop-down-select-item\",class:_vm.value !== '' ? 'sub' : 'sub4'},[_vm._v(\" \"+_vm._s((_vm.inputValue === '') ? (_vm.placeholder || '') : _vm.valueLabel)+\" \")]),(!_vm.isOpen)?_c('img',{staticClass:\"drop-down-arrow-icon svg-sub2\",staticStyle:{\"width\":\"24px\",\"height\":\"24px\"},attrs:{\"src\":\"/static/icon/fi_chevron-down.svg\"}}):_c('img',{staticClass:\"drop-down-arrow-icon svg-sub2\",staticStyle:{\"width\":\"24px\",\"height\":\"24px\"},attrs:{\"src\":\"/static/icon/fi_chevron-up.svg\"}})]),(_vm.isOpen)?_c('div',{staticClass:\"drop-down-list-outsider\",on:{\"click\":function($event){_vm.isOpen=false}}}):_vm._e(),(_vm.isOpen)?_c('ul',{staticClass:\"drop-down-list\",style:(_vm.listStyle)},_vm._l((_vm.options),function(opt,idx){return _c('li',{key:'sort-list'+idx,staticClass:\"selectable-list-item sub\",style:(_vm.dropdownItem),on:{\"click\":function($event){return _vm.clickTargetItem(opt)}}},[_vm._v(_vm._s(opt.label))])}),0):_vm._e()]),(_vm.isOpen)?_c('div',{staticClass:\"drop-down-overlay\",on:{\"click\":function($event){_vm.isOpen=false}}}):_vm._e(),(_vm.valueLabel === '기타')?_c('div',{staticClass:\"margin-top-8\"},[_c('lp-text',{attrs:{\"placeholder\":\"기타 사유를 입력해주세요\"},on:{\"update:value\":_vm.etcInputValue}})],1):_vm._e()])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"item\">\r\n    <h4 class=\"item-title\"\r\n        v-if=\"name !== '' && name !== undefined\"\r\n    >{{ name }}</h4>\r\n    <div style=\"position:relative; display:inline-block\"\r\n         :class=\"{'full-width': name === '' || name === undefined}\">\r\n      <div :style=\"dropdownSelectWrapper\"\r\n           :class=\"{'full-width': name === '' || name === undefined}\"\r\n           @click.stop.prevent=\"openList\">\r\n        <span class=\"drop-down-select-item\" :class=\"value !== '' ? 'sub' : 'sub4'\">\r\n          {{ (inputValue === '') ? (placeholder || '') : valueLabel }}\r\n        </span>\r\n        <img class=\"drop-down-arrow-icon svg-sub2\" src=\"/static/icon/fi_chevron-down.svg\" style=\"width:24px;height:24px\" v-if=\"!isOpen\"/>\r\n        <img class=\"drop-down-arrow-icon svg-sub2\" src=\"/static/icon/fi_chevron-up.svg\" style=\"width:24px;height:24px\" v-else/>\r\n      </div>\r\n      <div v-if=\"isOpen\"\r\n           class=\"drop-down-list-outsider\"\r\n           @click=\"isOpen=false\">\r\n      </div>\r\n      <ul v-if=\"isOpen\" class=\"drop-down-list\" :style=\"listStyle\">\r\n        <li v-for=\"(opt,idx) in options\" :key=\"'sort-list'+idx\"\r\n            :style=\"dropdownItem\"\r\n            class=\"selectable-list-item sub\"\r\n            @click=\"clickTargetItem(opt)\">{{ opt.label }}</li>\r\n      </ul>\r\n    </div>\r\n    <div v-if=\"isOpen\" class=\"drop-down-overlay\" @click=\"isOpen=false\"></div>\r\n    <!-- <select v-model=\"value\">\r\n      <option v-for=\"item in options\" :value=\"item\">{{item}}</option>\r\n    </select> -->\r\n    <div v-if=\"valueLabel === '기타'\" class=\"margin-top-8\">\r\n      <lp-text @update:value=\"etcInputValue\" placeholder=\"기타 사유를 입력해주세요\" ></lp-text>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nimport LpText from './component/LpText.vue';\r\n  export default {\r\n  components: { LpText },\r\n    props: {\r\n      name: {\r\n        type: String,\r\n        required: false\r\n      },\r\n      customWrapperStyle: {\r\n        type: Object\r\n      },\r\n      customItemStyle: {\r\n        type: Object\r\n      },\r\n      value: {\r\n        type: [String, Number]\r\n      },\r\n\r\n      elt: {\r\n        required: false\r\n      },\r\n\r\n      options: {\r\n        type: Array,\r\n        required: true\r\n      },\r\n\r\n      placeholder: {\r\n        type: String,\r\n        required: false\r\n      },\r\n\r\n      height: {\r\n        type: Number,\r\n        default: 46\r\n      }\r\n    },\r\n\r\n    data() {\r\n      return {\r\n        isOpen: false,\r\n        inputValue: this.value,\r\n        oldValue: this.inputValue,\r\n        selVal: '',\r\n        etcValue: '',\r\n      }\r\n    },\r\n\r\n    computed: {\r\n      dropdownItem() {\r\n        let deco = {\r\n          // border: '1px solid #e3e3e3',\r\n          padding: '12px 16px',\r\n          fontSize: '15px',\r\n          height: '46px',\r\n          fontWeight: 400\r\n        }\r\n        if(this.customItemStyle) {\r\n          deco = this.customItemStyle;\r\n        }\r\n        return deco;\r\n      },\r\n      dropdownSelectWrapper() {\r\n        let deco = {\r\n          border: '1px solid #e3e3e3',\r\n          borderRadius: '8px',\r\n          padding: '12px 16px',\r\n          fontSize: '15px',\r\n          height: '46px',\r\n          fontWeight: 300\r\n        }\r\n        if(this.customWrapperStyle) {\r\n          deco = this.customWrapperStyle;\r\n        }\r\n        return deco;\r\n      },\r\n      valueLabel() {\r\n        let found = this.options.find(opt => {\r\n          return opt.value === this.value;\r\n        });\r\n        if (found)\r\n          return found.label;\r\n        else\r\n          return undefined;\r\n      },\r\n\r\n      listStyle() {\r\n        return {\r\n          top: `${this.height}px`\r\n        }\r\n      }\r\n    },\r\n\r\n    created() {\r\n      this.inputValue = this.value;\r\n    },\r\n    watch: {\r\n      inputValue(n) {\r\n        this.$emit('update:value', n);\r\n      },\r\n      value(n) {\r\n        this.inputValue = n;\r\n      },\r\n      ectValue(n) {\r\n        this.$emit('update:etc', n)\r\n      }\r\n    },\r\n    methods: {\r\n      openList() {\r\n        if (!this.isOpen) {\r\n          this.isOpen = true;\r\n          //console.log('open list');\r\n          this.onInputStart(this.inputValue);\r\n        } else {\r\n          this.isOpen = false;\r\n        }\r\n      },\r\n      etcInputValue(n) {\r\n        this.etcValue = n;\r\n        this.$emit('etc', n);\r\n    },\r\n      clickTargetItem(item) {\r\n        this.inputValue = item.value;\r\n        if (this.etcValue !== '') {\r\n          this.$emit('update:etc', this.etcValue)\r\n        }\r\n        // setLog가 val 변경 전에 실행되는 문제가 있어서 추가함.\r\n        this.$emit('update:val', this.inputValue);\r\n        this.$emit('selected', item);\r\n        this.onInputDone(item.val);\r\n        this.isOpen = false;\r\n      },\r\n\r\n      onInputStart(val) {\r\n        this.oldValue = val;\r\n      },\r\n\r\n      onInputDone() {\r\n        // this.value = val;\r\n        if (this.oldValue !== this.inputValue) {\r\n          this.$root.$emit('setLog');\r\n        }\r\n      }\r\n    }\r\n  }\r\n</script>\r\n\r\n<style lang=\"stylus\" scoped>\r\n  @import '~assets/css/lp_main'\r\n  .item\r\n    font-size .8rem\r\n    position relative\r\n\r\n  .full-width\r\n    width 100%\r\n\r\n  .drop-down-select-wrapper\r\n    display flex\r\n    align-items center\r\n    width 100%\r\n    background #fff\r\n    justify-content space-between\r\n    font-size .8rem\r\n    height 32px\r\n    cursor pointer\r\n    border 1px solid #EEEEEE\r\n\r\n  .drop-down-select-item\r\n    display flex\r\n    align-items center\r\n    cursor pointer\r\n    font-weight 400\r\n\r\n  .drop-down-arrow-icon\r\n    cursor pointer\r\n    position absolute\r\n    right 16px\r\n    top 13px\r\n  .drop-down-list\r\n    position absolute\r\n    background-color #fff\r\n    z-index 12\r\n    /*border 1px solid #eaeaea*/\r\n    top 20px\r\n    left 0\r\n    width 100%\r\n    cursor pointer\r\n    /*border-top none*/\r\n    list-style-type none\r\n    padding 0px\r\n    filter drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.1))\r\n    border-radius 8px\r\n\r\n  .selectable-list-item:hover\r\n    background-color $gray4\r\n\r\n  .drop-down-item\r\n    padding 12px 16px\r\n    font-size 15px\r\n    background-color #fff\r\n    color #333333\r\n    white-space pre-line\r\n\r\n  .drop-down-overlay\r\n    position fixed\r\n    z-index 11\r\n    left 0\r\n    top 0\r\n    bottom 0\r\n    right 0\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!./LpDropDown.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!./LpDropDown.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./LpDropDown.vue?vue&type=template&id=205de2aa&scoped=true&\"\nimport script from \"./LpDropDown.vue?vue&type=script&lang=js&\"\nexport * from \"./LpDropDown.vue?vue&type=script&lang=js&\"\nimport style0 from \"./LpDropDown.vue?vue&type=style&index=0&id=205de2aa&lang=stylus&scoped=true&\"\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  \"205de2aa\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}