{"version":3,"sources":["webpack:///./src/components/component/Dropdown.vue?a5c0","webpack:///./src/components/component/Dropdown.vue?fb00","webpack:///src/components/component/Dropdown.vue","webpack:///./src/components/component/Dropdown.vue?b685","webpack:///./src/components/component/Dropdown.vue?310b"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","style","on","$event","open","class","undefined","selectedText","_v","_s","_l","item","idx","key","clickItem","label_name","_e","staticRenderFns","name","props","type","String","required","value_name","value","Number","options","Array","width","mobileStyle","Object","data","val","watch","$emit","n","computed","i","text","dropdownStyle","deviceWidth","methods","component"],"mappings":"kHAAA,W,yCCAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,WAAWC,MAAOP,EAAiB,eAAG,CAACI,EAAG,MAAM,CAACE,YAAY,WAAWE,GAAG,CAAC,MAAQ,SAASC,GAAQT,EAAIU,MAAMV,EAAIU,QAAQ,CAACN,EAAG,MAAM,CAACE,YAAY,gBAAgBK,MAAM,CAAE,iBAAmCC,IAAnBZ,EAAIa,eAA4B,CAACb,EAAIc,GAAGd,EAAIe,QAAsBH,IAAnBZ,EAAIa,aAA2B,KAAOb,EAAIa,iBAAiBT,EAAG,IAAI,CAACE,YAAY,kBAAkB,CAACN,EAAIc,GAAG,IAAId,EAAIe,GAAGf,EAAIU,KAAO,oBAAsB,4BAA6BV,EAAQ,KAAEI,EAAG,MAAM,CAACE,YAAY,QAAQN,EAAIgB,GAAIhB,EAAW,SAAE,SAASiB,EAAKC,GAAK,OAAOd,EAAG,MAAM,CAACe,IAAK,SAAWD,EAAKZ,YAAY,OAAOE,GAAG,CAAC,MAAQ,SAASC,GAAQ,OAAOT,EAAIoB,UAAUH,MAAS,CAACjB,EAAIc,GAAG,IAAId,EAAIe,GAAGE,EAAKjB,EAAIqB,aAAa,UAAS,GAAGrB,EAAIsB,QAC1wBC,EAAkB,GCuBtB,G,UAAA,CAEEC,KAAM,WAENC,MAAO,CACLJ,WAAY,CACVK,KAAMC,OACNC,UAAU,GAGZC,WAAY,CACVH,KAAMC,OACNC,UAAU,GAGZE,MAAO,CACLJ,KAAMK,OACNH,UAAU,GAGZI,QAAS,CACPN,KAAMO,MACNL,UAAU,GAIZM,MAAO,CACLR,KAAMK,OACNH,UAAU,GAGZO,YAAa,CACXT,KAAMU,OACNR,UAAU,IAIdS,KArCF,WAsCI,MAAO,CACLC,IAAKrC,KAAK6B,MACVpB,MAAM,IAIV6B,MAAO,CACLD,IADJ,SACA,GACMrC,KAAKuC,MAAM,eAAgBC,KAI/BC,SAAU,CACR7B,aADJ,WAGM,IADA,IAAN,KACA,8BACYZ,KAAK+B,QAAQW,GAAG1C,KAAK4B,cAAgB5B,KAAKqC,MAC5CM,EAAO3C,KAAK+B,QAAQW,GAAG1C,KAAKoB,aAGhC,OAAOuB,GAGTC,cAXJ,WAYM,IAAN,qDAGM,OAAIC,GAAV,sBACe7C,KAAKkC,YAEL,UAAf,0BAKEY,QAAS,CACP3B,UADJ,SACA,GACMnB,KAAKqC,IAAMrB,EAAKhB,KAAK4B,YACrB5B,KAAKS,MAAO,EACZT,KAAKuC,MAAM,SAAUvB,OCrGsU,I,wBCQ7V+B,EAAY,eACd,EACAjD,EACAwB,GACA,EACA,KACA,WACA,MAIa,aAAAyB,E","file":"js/chunk-8bf53dbc.64c14465.js","sourcesContent":["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!./Dropdown.vue?vue&type=style&index=0&id=39855138&scoped=true&lang=css&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"dropdown\",style:(_vm.dropdownStyle)},[_c('div',{staticClass:\"selected\",on:{\"click\":function($event){_vm.open=!_vm.open}}},[_c('div',{staticClass:\"selected-text\",class:{ 'placeholder' : _vm.selectedText===undefined }},[_vm._v(_vm._s(_vm.selectedText===undefined ? '선택' : _vm.selectedText))]),_c('i',{staticClass:\"material-icons\"},[_vm._v(\" \"+_vm._s(_vm.open ? 'keyboard_arrow_up' : 'keyboard_arrow_down'))])]),(_vm.open)?_c('div',{staticClass:\"list\"},_vm._l((_vm.options),function(item,idx){return _c('div',{key:(\"option\" + idx),staticClass:\"item\",on:{\"click\":function($event){return _vm.clickItem(item)}}},[_vm._v(\" \"+_vm._s(item[_vm.label_name])+\" \")])}),0):_vm._e()])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\r\n  <div class=\"dropdown\"\r\n      :style=\"dropdownStyle\">\r\n    <div class=\"selected\"\r\n      @click=\"open=!open\">\r\n      <div class=\"selected-text\"\r\n        :class=\"{ 'placeholder' : selectedText===undefined }\"\r\n        >{{ selectedText===undefined ? '선택' : selectedText }}</div>\r\n      <i class=\"material-icons\">\r\n        {{ open ? 'keyboard_arrow_up' : 'keyboard_arrow_down' }}</i>\r\n    </div>\r\n    <div class=\"list\"\r\n      v-if=\"open\">\r\n      <div class=\"item\"\r\n        v-for=\"(item, idx) in options\"\r\n        :key=\"`option${idx}`\"\r\n        @click=\"clickItem(item)\">\r\n        {{ item[label_name] }}\r\n        </div>\r\n    </div>\r\n  </div>\r\n</template>\r\n\r\n<script>\r\nexport default {\r\n\r\n  name: 'dropdown',\r\n\r\n  props: {\r\n    label_name: {\r\n      type: String,\r\n      required: true\r\n    },\r\n\r\n    value_name: {\r\n      type: String,\r\n      required: true\r\n    },\r\n\r\n    value: {\r\n      type: Number,\r\n      required: true\r\n    },\r\n\r\n    options: {\r\n      type: Array,\r\n      required: true\r\n    },\r\n\r\n    // 드롭다운 리스트 width\r\n    width: {\r\n      type: Number,\r\n      required: false\r\n    },\r\n    // 드롭다운 리스트 width (모바일 - 반응형 디자인)\r\n    mobileStyle: {\r\n      type: Object,\r\n      required: false\r\n    }\r\n  },\r\n\r\n  data() {\r\n    return {\r\n      val: this.value,\r\n      open: false\r\n    }\r\n  },\r\n\r\n  watch: {\r\n    val(n) {\r\n      this.$emit('update:value', n)\r\n    }\r\n  },\r\n\r\n  computed: {\r\n    selectedText() {\r\n      let text = '';\r\n      for(let i=0; i<this.options.length; i++) {\r\n        if (this.options[i][this.value_name] === this.val) {\r\n          text = this.options[i][this.label_name];\r\n        }\r\n      }\r\n      return text;\r\n    },\r\n\r\n    dropdownStyle() {\r\n      let deviceWidth = (window.innerWidth > 0) ? window.innerWidth : screen.width;\r\n\r\n      // 모바일\r\n      if (deviceWidth<=600 && this.mobileStyle) {\r\n        return this.mobileStyle;\r\n      } else {\r\n        return `width: ${this.width}px`;\r\n      }\r\n    }\r\n  },\r\n\r\n  methods: {\r\n    clickItem(item) {\r\n      this.val = item[this.value_name];\r\n      this.open = false;\r\n      this.$emit('select', item);\r\n    }\r\n  }\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    .dropdown {\r\n      font-size: 16px;\r\n      line-height: 32px;\r\n      margin: 0;\r\n    }\r\n    .selected, .item {\r\n      height: 36px;\r\n    }\r\n    .selected-text.placeholder{\r\n      font-size: 14px;\r\n    }    \r\n    .list {\r\n      top: 38px;\r\n    }    \r\n    .item {\r\n      font-size: 14px;\r\n    }\r\n  }\r\n  @media (min-width: 601px) {\r\n    .dropdown {\r\n      font-size: 24px;\r\n      line-height: 40px;\r\n      margin: 0 12px;\r\n    }\r\n    .selected, .item {\r\n      height: 44px;\r\n    }\r\n    .selected-text.placeholder{\r\n      font-size: 16px;\r\n    }\r\n    .list {\r\n      top: 46px;\r\n    }\r\n    .item {\r\n      font-size: 16px;\r\n    }\r\n  }\r\n\r\n  .dropdown {\r\n    /* font-size: 24px;\r\n    line-height: 40px; */\r\n    font-weight: 200;\r\n    color: #303030;\r\n    cursor: pointer;\r\n    font-weight: 700;\r\n    /* margin: 0 12px; */\r\n    border-bottom: 2px solid #303030;\r\n  }\r\n\r\n  .selected {\r\n    width: 100%;\r\n    position: relative;\r\n    display: flex;\r\n    align-items: center;\r\n    justify-content: space-between;\r\n  }\r\n\r\n  /* .selected, .item {\r\n    height: 44px;\r\n  } */\r\n\r\n  .selected-text {\r\n    margin-right: 8px;\r\n  }\r\n\r\n  .selected-text.placeholder{\r\n    color: #c7c7c7;\r\n  }\r\n\r\n  .list {\r\n    position: absolute;\r\n    width: 300px;\r\n    background: #fff;\r\n    padding: 12px 0;\r\n    z-index: 1;\r\n  }\r\n\r\n  .item {\r\n    /* font-size: 16px; */\r\n    padding: 0 12px;\r\n    color: #c7c7c7;\r\n  }\r\n\r\n  .item:hover {\r\n    color: #303030;\r\n  }\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!./Dropdown.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!./Dropdown.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./Dropdown.vue?vue&type=template&id=39855138&scoped=true&\"\nimport script from \"./Dropdown.vue?vue&type=script&lang=js&\"\nexport * from \"./Dropdown.vue?vue&type=script&lang=js&\"\nimport style0 from \"./Dropdown.vue?vue&type=style&index=0&id=39855138&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  \"39855138\",\n  null\n  \n)\n\nexport default component.exports"],"sourceRoot":""}