{"version":3,"sources":["webpack:///./src/components/Selection/SimpleSelectWithSearchInput.vue?542b","webpack:///./src/components/Selection/SimpleSelectWithSearchInput.vue?732f","webpack:///src/components/Selection/SimpleSelectWithSearchInput.vue","webpack:///./src/components/Selection/SimpleSelectWithSearchInput.vue?cc34","webpack:///./src/components/Selection/SimpleSelectWithSearchInput.vue?adb0"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","class","focus","isModalShow","style","width","buttonWidth","on","$event","selectedValue","isOnlyShowButtonPlaceholder","_t","_v","_s","textOnButton","buttonPlaceholder","modalWidth","top","modalTop","directives","name","rawName","value","expression","attrs","inputPlaceholder","domProps","target","composing","filterText","modalBodyHeight","_l","item","key","itemValue","selectItem","itemText","_e","staticRenderFns","props","type","String","default","Boolean","Number","options","Array","title","limitOfWordLengthInInput","data","textOnBtn","created","computed","filterOptions","filter","length","methods","$emit","component","VIcon"],"mappings":"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","file":"js/chunk-3b4ee780.bd614846.js","sourcesContent":["export * from \"-!../../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--8-oneOf-1-0!../../../node_modules/css-loader/dist/cjs.js??ref--8-oneOf-1-1!../../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../../node_modules/postcss-loader/src/index.js??ref--8-oneOf-1-2!../../../node_modules/sass-loader/dist/cjs.js??ref--8-oneOf-1-3!../../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../../node_modules/vue-loader/lib/index.js??vue-loader-options!./SimpleSelectWithSearchInput.vue?vue&type=style&index=0&lang=scss&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"simple-select-search\"},[_c('button',{staticClass:\"btn justify-start\",class:{ focus: _vm.isModalShow },style:({ width: (\"\" + _vm.buttonWidth) }),on:{\"click\":function($event){_vm.isModalShow = !_vm.isModalShow}}},[((_vm.selectedValue === '' || !_vm.selectedValue) && _vm.isOnlyShowButtonPlaceholder)?_c('span',{class:{ 'ink-01-emphasis--text': _vm.isModalShow }},[_vm._v(_vm._s(_vm.buttonPlaceholder))]):_c('span',{staticClass:\"ink-01-emphasis--text\"},[_vm._t(\"textOnButton\",[_vm._v(\" \"+_vm._s(_vm.textOnButton)+\" \")],{\"selectedValue\":_vm.textOnButton})],2),_c('v-icon',{staticClass:\"ml-auto\"},[_vm._v(\"arrow_drop_down\")])],1),(_vm.isModalShow)?_c('div',{staticClass:\"simple-select-search__modal block block-3\",style:({ width: (\"\" + _vm.modalWidth), top: (\"\" + _vm.modalTop) })},[_c('div',{staticClass:\"simple-select-search__head\"},[_c('div',{staticClass:\"form-input-group\"},[_c('v-icon',{staticClass:\"prepend-icon\"},[_vm._v(\"search\")]),_c('input',{directives:[{name:\"model\",rawName:\"v-model\",value:(_vm.filterText),expression:\"filterText\"}],staticClass:\"pl-42px\",attrs:{\"type\":\"text\",\"placeholder\":_vm.inputPlaceholder},domProps:{\"value\":(_vm.filterText)},on:{\"input\":function($event){if($event.target.composing){ return; }_vm.filterText=$event.target.value}}})],1)]),_c('div',{staticClass:\"simple-select-search__body\",style:({ 'max-height': (\"\" + _vm.modalBodyHeight) })},_vm._l((_vm.filterOptions),function(item){return _c('div',{key:item[_vm.itemValue],staticClass:\"simple-select-search__item selection-item-hover\",on:{\"click\":function($event){return _vm.selectItem(item)}}},[_vm._t(\"option\",[_vm._v(_vm._s(item[_vm.itemText]))],{\"option\":item})],2)}),0)]):_vm._e()])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"simple-select-search\">\n    <button\n      class=\"btn justify-start\"\n      :class=\"{ focus: isModalShow }\"\n      :style=\"{ width: `${buttonWidth}` }\"\n      @click=\"isModalShow = !isModalShow\"\n    >\n      <span\n        v-if=\"(selectedValue === '' || !selectedValue) && isOnlyShowButtonPlaceholder\"\n        :class=\"{ 'ink-01-emphasis--text': isModalShow }\"\n        >{{ buttonPlaceholder }}</span\n      >\n      <span v-else class=\"ink-01-emphasis--text\">\n        <slot name=\"textOnButton\" :selectedValue=\"textOnButton\">\n          {{ textOnButton }}\n        </slot>\n      </span>\n      <v-icon class=\"ml-auto\">arrow_drop_down</v-icon>\n    </button>\n    <div\n      v-if=\"isModalShow\"\n      class=\"simple-select-search__modal block block-3\"\n      :style=\"{ width: `${modalWidth}`, top: `${modalTop}` }\"\n    >\n      <div class=\"simple-select-search__head\">\n        <div class=\"form-input-group\">\n          <v-icon class=\"prepend-icon\">search</v-icon>\n          <input\n            type=\"text\"\n            class=\"pl-42px\"\n            :placeholder=\"inputPlaceholder\"\n            v-model=\"filterText\"\n          />\n        </div>\n      </div>\n      <div\n        class=\"simple-select-search__body\"\n        :style=\"{ 'max-height': `${modalBodyHeight}` }\"\n      >\n        <div\n          v-for=\"item in filterOptions\"\n          :key=\"item[itemValue]\"\n          class=\"simple-select-search__item selection-item-hover\"\n          @click=\"selectItem(item)\"\n        >\n          <slot name=\"option\" :option=\"item\">{{ item[itemText] }}</slot>\n        </div>\n      </div>\n    </div>\n  </div>\n</template>\n\n<script>\n// Zeplin: https://app.zeplin.io/project/5f092773fa16ac9ddd3d2a2f/screen/5f2d7258fe475221817abd85\n\nexport default {\n  props: {\n    buttonPlaceholder: {\n      type: String,\n      default: '篩選項目',\n    },\n    inputPlaceholder: {\n      type: String,\n      default: '',\n    },\n    isOnlyShowButtonPlaceholder: {\n      type: Boolean,\n      default: false,\n    },\n    buttonWidth: {\n      type: String,\n      default: '160px',\n    },\n    modalWidth: {\n      type: String,\n      default: '360px',\n    },\n    modalBodyHeight: {\n      type: String,\n      default: '408px',\n    },\n    modalTop: {\n      type: String,\n      default: 'auto',\n    },\n    selectedValue: {\n      type: [String, Number],\n      default: '',\n    },\n    options: {\n      type: Array,\n      default: () => [\n        {\n          value: 1,\n          title: 'option1',\n        },\n      ],\n    },\n    limitOfWordLengthInInput: {\n      type: Number,\n      default: 14,\n    },\n    itemValue: {\n      type: String,\n      default: 'value',\n    },\n    itemText: {\n      type: String,\n      default: 'text',\n    },\n  },\n  data() {\n    return {\n      isModalShow: false,\n      filterText: '',\n      textOnBtn: '',\n    };\n  },\n  created() {\n    if (this.selectedValue !== '' && this.selectedValue !== null) {\n      const textOnBtn = this.options.find((o) => o[this.itemValue] === this.selectedValue);\n      this.textOnBtn = textOnBtn[this.itemText];\n    }\n  },\n  computed: {\n    filterOptions() {\n      if (typeof this.options[0] === 'number') {\n        if (this.filterText === '') {\n          return this.options;\n        }\n        return this.options.filter((item) =>\n          String(item).includes(String(this.filterText)),\n        );\n      }\n\n      return this.options.filter((item) =>\n        item[this.itemText].toLowerCase().includes(this.filterText),\n      );\n    },\n    textOnButton() {\n      let { selectedValue } = this;\n\n      if (typeof selectedValue === 'number') {\n        selectedValue = String(selectedValue);\n      }\n\n      return this.textOnBtn.length < this.limitOfWordLengthInInput\n        ? this.textOnBtn\n        : `${this.textOnBtn.slice(0, 10)}...`;\n    },\n  },\n  methods: {\n    selectItem(item) {\n      this.textOnBtn = item[this.itemText];\n      this.$emit('update:selectedValue', item[this.itemValue]);\n      this.filterText = '';\n      this.isModalShow = false;\n    },\n  },\n};\n</script>\n\n<style lang=\"scss\">\n.simple-select-search {\n  position: relative;\n\n  &__modal {\n    position: absolute;\n    margin-top: 5px;\n    z-index: 1;\n    background-color: #fff;\n  }\n  &__head {\n    padding: 10px;\n    box-shadow: inset 0 -1px 0 0 #d7dee7;\n  }\n\n  &__body {\n    overflow: auto;\n  }\n  &__item {\n    display: flex;\n    align-items: center;\n    height: 48px;\n    padding-left: 10px;\n    font-size: 14px;\n    line-height: 1.43;\n    cursor: pointer;\n  }\n}\n</style>\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!./SimpleSelectWithSearchInput.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!./SimpleSelectWithSearchInput.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./SimpleSelectWithSearchInput.vue?vue&type=template&id=dd26a092&\"\nimport script from \"./SimpleSelectWithSearchInput.vue?vue&type=script&lang=js&\"\nexport * from \"./SimpleSelectWithSearchInput.vue?vue&type=script&lang=js&\"\nimport style0 from \"./SimpleSelectWithSearchInput.vue?vue&type=style&index=0&lang=scss&\"\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  null,\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 { VIcon } from 'vuetify/lib/components/VIcon';\ninstallComponents(component, {VIcon})\n"],"sourceRoot":""}