<template>
  <div>
    <q-input
      v-bind="$attrs"
      v-model="draftValue"
      filled
      :label="label || undefined"
      type="number"
      :dense="dense"
      @focus="onFocus"
      @update:model-value="onInputChange"
      @keydown="onKeyDown"
      @wheel.prevent
    />

    <!-- Mostra i bottoni solo se l'utente ha modificato il valore -->
    <div
      v-if="editing"
      class="button-group"
    >
      <q-btn
        :label="$t('dialog.save')"
        color="positive"
        @click="confirmUpdate"
      />
      <q-btn
        :label="$t('dialog.cancel')"
        color="negative"
        @click="cancelUpdate"
      />
    </div>
  </div>
</template>

<script lang="ts" src="./CInput.ts"></script>

<style lang="scss" scoped>
@import './CInput.scss';
</style>
