/home/henzagold/oldsite/components/ Current File: /home/henzagold/oldsite/components/NumberInput.vue
<template>
  <div class="qty-box" style="direction: ltr !important;">
    <span class="qty-subtract" @click="increment()">
       <svg style="width:24px;height:24px" viewBox="0 0 24 24">
            <path fill="currentColor" d="M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z" />
        </svg>
    </span>
    <input type="text" :value="this.value" readonly="true"  >
    <span class="qty-add" @click="decrement()" >
        <svg style="width:24px;height:24px" viewBox="0 0 24 24">
          <path fill="currentColor" d="M19,13H5V11H19V13Z" />
        </svg>
    </span>
  </div>
</template>

<script>
export default {
  name: "NumberInput",
  props: {
     min: {
       type: Number,
       required:false,
       default:undefined
     },
    max: {
      type: Number,
      required:false,
      default:undefined
    },
    value:{
       type:Number,
       required:false,
    },
  },
  methods:{
    checkValue(){
      if(this.max !=undefined && this.value>this.max)
      {
        this.$emit('input', this.max);
      }

      if(this.min !=undefined && this.value<this.min)
      {
        this.$emit('input', this.min);
      }
    },
    increment(){
      if(this.max !=undefined)
      {
        if(this.value<this.max)
          this.$emit('input', this.value+1);
      }
      else {
        this.$emit('input', this.value+1);
      }
    },
    decrement(){
      if(this.min !=undefined)
      {
        if(this.value>this.min)
          this.$emit('input', this.value-1);
      }
      else {
        this.$emit('input', this.value-1);
      }
    }
  },
  beforeUpdate() {
      this.checkValue();
  },
  created() {
    this.checkValue();
  }
}
</script>

<style scoped>
.qty-box{

  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
input{
  font-family: 'yekan';
}
</style>