{"version":3,"sources":["webpack:///./src/components/FormSwitch.vue?ccc1","webpack:///src/components/FormSwitch.vue","webpack:///./src/components/FormSwitch.vue?722b","webpack:///./src/components/FormSwitch.vue?21b0","webpack:///./src/components/FormSwitch.vue?20e1"],"names":["render","_vm","this","_h","$createElement","_c","_self","staticClass","class","switchClassObj","on","toggleSwitch","open","isOpen","_v","_s","showText","close","staticRenderFns","props","value","type","Boolean","Number","default","switchColorClass","String","Object","computed","template","methods","$emit","component"],"mappings":"kHAAA,IAAIA,EAAS,WAAa,IAAIC,EAAIC,KAASC,EAAGF,EAAIG,eAAmBC,EAAGJ,EAAIK,MAAMD,IAAIF,EAAG,OAAOE,EAAG,MAAM,CAACE,YAAY,0CAA0C,CAACF,EAAG,MAAM,CAACE,YAAY,iBAAiBC,MAAMP,EAAIQ,eAAeC,GAAG,CAAC,MAAQT,EAAIU,eAAe,CAACN,EAAG,MAAM,CAACE,YAAY,gBAAgBC,MAAM,CAAEI,KAAMX,EAAIY,YAAaR,EAAG,MAAM,CAACE,YAAY,iBAAiBC,MAAM,CAAEI,KAAMX,EAAIY,SAAU,CAACZ,EAAIa,GAAG,IAAIb,EAAIc,GAAGd,EAAIY,OAASZ,EAAIe,SAASJ,KAAOX,EAAIe,SAASC,OAAO,UAC7cC,EAAkB,G,YCWtB,G,UAAA,CACEC,MAAO,CACLC,MAAO,CACLC,KAAM,CAACC,QAASC,QAChBC,SAAS,GAEXC,iBAAkB,CAChBJ,KAAMK,OACNF,QAAS,eAEXR,SAAU,CACRK,KAAMM,OACNH,QAAS,WAAf,OACA,UACA,eAIEI,SAAU,CACRf,OADJ,WAEM,OAAOX,KAAKkB,OAEdX,eAJJ,WAKM,IAAN,wBACA,mDACM,OAAOoB,IAGXC,QAAS,CACPnB,aADJ,WAEMT,KAAK6B,MAAM,SAAU7B,KAAKW,QAC1BX,KAAK6B,MAAM,oBC3CmU,I,wBCQhVC,EAAY,eACd,EACAhC,EACAkB,GACA,EACA,KACA,WACA,MAIa,OAAAc,E,2CCnBf,W","file":"js/chunk-08bd046f.b0087806.js","sourcesContent":["var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{staticClass:\"switch-wrap d-flex w-80px align-center\"},[_c('div',{staticClass:\"switch mr-10px\",class:_vm.switchClassObj,on:{\"click\":_vm.toggleSwitch}},[_c('div',{staticClass:\"switch-circle\",class:{ open: _vm.isOpen }})]),_c('div',{staticClass:\"switch-text h5\",class:{ open: _vm.isOpen }},[_vm._v(\" \"+_vm._s(_vm.isOpen ? _vm.showText.open : _vm.showText.close)+\" \")])])}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","<template>\n  <div class=\"switch-wrap d-flex w-80px align-center\">\n    <div class=\"switch mr-10px\" :class=\"switchClassObj\" @click=\"toggleSwitch\">\n      <div class=\"switch-circle\" :class=\"{ open: isOpen }\"></div>\n    </div>\n    <div class=\"switch-text h5\" :class=\"{ open: isOpen }\">\n      {{ isOpen ? showText.open : showText.close }}\n    </div>\n  </div>\n</template>\n\n<script>\nexport default {\n  props: {\n    value: {\n      type: [Boolean, Number],\n      default: false,\n    },\n    switchColorClass: {\n      type: String,\n      default: 'success-500',\n    },\n    showText: {\n      type: Object,\n      default: () => ({\n        open: '顯示',\n        close: '隱藏',\n      }),\n    },\n  },\n  computed: {\n    isOpen() {\n      return this.value;\n    },\n    switchClassObj() {\n      const { switchColorClass } = this;\n      const template = { open: this.isOpen, [switchColorClass]: this.isOpen };\n      return template;\n    },\n  },\n  methods: {\n    toggleSwitch() {\n      this.$emit('input', !this.isOpen);\n      this.$emit('changeStatus');\n    },\n  },\n};\n</script>\n\n<style lang=\"scss\" scoped>\n.switch {\n  position: relative;\n  display: flex;\n  align-items: center;\n  width: 40px;\n  height: 24px;\n  background: #848fa0;\n  border-radius: 15px;\n  cursor: pointer;\n  &.open {\n    background-color: #88c640;\n  }\n\n  &-circle {\n    position: absolute;\n    width: 20px;\n    height: 20px;\n    top: 50%;\n    transform: translateY(-50%);\n    left: 5%;\n    border-radius: 50%;\n    background-color: #fff;\n    transition: all 0.3s;\n    &.open {\n      left: 95%;\n      transform: translateX(-100%) translateY(-50%);\n    }\n  }\n\n  &-text {\n    color: #848fa0;\n    &.open {\n      color: #353e4d;\n    }\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!./FormSwitch.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!./FormSwitch.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./FormSwitch.vue?vue&type=template&id=20699c3a&scoped=true&\"\nimport script from \"./FormSwitch.vue?vue&type=script&lang=js&\"\nexport * from \"./FormSwitch.vue?vue&type=script&lang=js&\"\nimport style0 from \"./FormSwitch.vue?vue&type=style&index=0&id=20699c3a&lang=scss&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  \"20699c3a\",\n  null\n  \n)\n\nexport default component.exports","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!./FormSwitch.vue?vue&type=style&index=0&id=20699c3a&lang=scss&scoped=true&\""],"sourceRoot":""}