// 値の表示/非表示ボタンを持つパスワード入力欄
<script>
module.exports = {
  // componentに指定された属性を自動的にルート要素に付与しない
  // v-bind="$attrs"でinputに付与したい
  // @see https://v3.ja.vuejs.org/guide/component-attrs.html
  inheritAttrs: false,
  methods: {
    // 切り替える
    toggle: function () {
      this.hide_password = ! this.hide_password;
    }
  },
  // 初期値
  data: function() {
    return {
      hide_password: true // 基本は隠しておく
    }
  },
  // 親からもらう値
  props: ['value'],
  // 他のプロパティの変化に追随して変わる値
  computed: {
    // 表示/非表示
    inputType: function () {
      return this.hide_password ? "password" : "text";
    },
    iconType: function () {
      return this.hide_password ? "closed" : "open";
    }
  }
}
</script>
<style scoped>
.open, .closed {
  top: 10.5px;
  right: 0;
  padding-right: 30px;
  position:absolute;
}
.open::after {
  content: url('../assets/img/common/visibility_pw.svg');
  position:absolute;
  opacity: 0.5;
}
.closed::after {
  content: url('../assets/img/common/visibility_pw_off.svg');
  position:absolute;
  opacity: 0.5;
}
::-ms-reveal {
  display: none;
}
label {
  width: 100%;
  height: 100%;
}
</style>
<template>
  <div style="position: relative;">
    <input v-bind="$attrs"
           :type="inputType"
           class="input-txt"
           :value="value"
           @change="$emit('change', $event.target.value);"
           style="padding-right: 30px;"/>
    <span :class="iconType" @click="toggle"></span>
  </div>
</template>