<template>
  <div>
    <h2>Format NumberBox</h2>
    <div style="width:100%;max-width:400px;">
      <div v-for="(n,index) in numbers" :key="n" style="margin-bottom:10px">
        <Label :for="'n'+index" align="top">{{n.label}}</Label>
        <NumberBox :inputId="'n'+index" style="width:80%" 
            :value="1234567.89" 
            :precision="2"
            :spinners="false"
            :groupSeparator="n.groupSeparator"
            :decimalSeparator="n.decimalSeparator"
            :prefix="n.prefix || ''"
            :suffix="n.suffix || ''">
        </NumberBox>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      numbers: []
    };
  },
  created() {
    this.numbers = [
      {
        label: "Number in the United States",
        groupSeparator: ",",
        decimalSeparator: "."
      },
      {
        label: "Number in France",
        groupSeparator: " ",
        decimalSeparator: ","
      },
      {
        label: "Currency:USD",
        groupSeparator: ",",
        decimalSeparator: ".",
        prefix: "$"
      },
      {
        label: "Currency:EUR",
        groupSeparator: ",",
        decimalSeparator: " ",
        prefix: "€"
      },
      {
        label: "Currency:EUR",
        groupSeparator: " ",
        decimalSeparator: ",",
        suffix: "€"
      }
    ];
  }
};
</script>