{"remainingRequest":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js??vue-loader-options!/Users/paytonburdette/Documents/projects/vue-step-progression/src/StepProgression.vue?vue&type=style&index=0&id=95f9f8de&scoped=true&lang=css&","dependencies":[{"path":"/Users/paytonburdette/Documents/projects/vue-step-progression/src/StepProgression.vue","mtime":1542136488000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/css-loader/index.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/loaders/stylePostLoader.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/cache-loader/dist/cjs.js","mtime":499162500000},{"path":"/usr/local/lib/node_modules/@vue/cli-service-global/node_modules/vue-loader/lib/index.js","mtime":499162500000}],"contextDependencies":[],"result":["\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n.steps {\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n}\n\n.steps-line {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  right: 0;\n  height: 2px;\n}\n\n.step-progression-line {\n  position: absolute;\n  top: 50%;\n  width: 0%;\n  height: 2px;\n  background-color: #1c61b2;\n}\n\n.step {\n  justify-content: center;\n  align-items: center;\n  height: 32px;\n  width: 32px;\n  border-radius: 50%;\n  z-index: 2;\n}\n",{"version":3,"sources":["StepProgression.vue"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA0FA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"StepProgression.vue","sourceRoot":".","sourcesContent":["<template>\n  <section>\n    <div class=\"steps\">\n      <div class=\"steps-line\" :style=\"{backgroundColor: defaultColor}\">\n        <div ref=\"stepProgressionLine\" class=\"step-progression-line\"></div>\n      </div>\n      <div \n        v-for=\"step in steps\" \n        :key=\"step\"\n        :style=\"calculateStepColor(step)\"\n        :v-model=\"currentStep + step\" \n        :class=\"`step${step}`\"\n        class=\"step\">\n      </div>\n    </div>\n  </section>\n</template>\n\n<script>\nexport default {\n  name: 'StepProgression',\n\n  props: {\n    steps: {\n      type: Number,\n      default: 3\n    },\n    currentStep: {\n      type: Number,\n      default: 1\n    },\n    currentStepColor: {\n      type: String,\n      default: '#1c61b2'\n    },\n    defaultColor: {\n      type: String,\n      default: '#e7eaf0'\n    }\n  },\n\n  data() {\n    return {\n      widthInPercent: \"\"\n    }\n  },\n\n  methods: {\n    calculateStepColor(step) {\n      if (step === this.currentStep || this.currentStep > step) {\n        return {\n          backgroundColor: this.currentStepColor\n        }\n      } else {\n        return {\n          backgroundColor: this.defaultColor \n        }\n      }\n      \n    },\n    increaseStep() {\n      this.currentStep++\n    }\n  },\n\n  computed: {\n    calculateStepPercentage() {\n      return 100 / (this.steps - 1)\n    }\n  },\n\n  watch: {\n    currentStep(currentStep, prevStep) {\n      let intialWidth = this.calculateStepPercentage\n\n      // all use cases should start on step 1, so we can do first width increase here\n      if ((prevStep + 1) === 2) {\n          this.$refs.stepProgressionLine.style = `width: ${intialWidth}%`\n          // increase intialWidth by itself after first step change\n          this.widthInPercent = intialWidth + intialWidth\n      } else {\n        this.$refs.stepProgressionLine.style = `width: ${this.widthInPercent}%`\n        this.widthInPercent = this.widthInPercent + intialWidth\n      }\n    }\n  }\n}\n</script>\n\n<style scoped>\n.steps {\n  position: relative;\n  display: flex;\n  justify-content: space-between;\n}\n\n.steps-line {\n  position: absolute;\n  top: 50%;\n  left: 0;\n  right: 0;\n  height: 2px;\n}\n\n.step-progression-line {\n  position: absolute;\n  top: 50%;\n  width: 0%;\n  height: 2px;\n  background-color: #1c61b2;\n}\n\n.step {\n  justify-content: center;\n  align-items: center;\n  height: 32px;\n  width: 32px;\n  border-radius: 50%;\n  z-index: 2;\n}\n</style>\n"]}]}