currency ​

<template>
  <div class="flex gap-2">
    <ZvInputText v-model="number" type="number" name="price" id="price" label="price" />
    <ZvInputText v-model="locale" name="locale" id="locale" label="locale" />
    <ZvInputText v-model="currency" name="currency" id="currency" label="currency" />
    <ZvSelect
      v-model="currencyDisplay"
      :options="[{ label: 'code', value: 'code' }, { label: 'symbol', value: 'symbol' }]"
      name="currencyDisplay"
      id="currencyDisplay"
      label="currencyDisplay"
    />
  </div>

  <div
    class="flex flex-center rounded gap-2 p-4 mt-4 bg-brand text-white"
  >
    formatted value: <strong>{{ priceFormatted }}</strong>
  </div>
</template>

<script lang="ts" setup>
  import { useCurrency } from '@zadigetvoltaire/ui'
  import { ref, computed } from 'vue'

  const number = ref(69)
  const locale = ref('fr-FR')
  const currency = ref('EUR')
  const currencyDisplay = ref('code')

  const priceFormatted = computed(() =>
    useCurrency(number.value, locale.value, { currency: currency.value, currencyDisplay: currencyDisplay.value }),
  )
</script>