<script setup lang="ts">
const model = defineModel<number>({ default: 0 });
</script>

<template>
  <div class="rate-percent-input">
    <el-input-number
      v-model="model"
      :min="0"
      :max="100"
      :step="0.01"
      :precision="2"
      controls-position="right"
      style="width: 100%"
    />
    <span class="rate-percent-suffix">%</span>
  </div>
</template>

<style scoped>
.rate-percent-input {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.rate-percent-suffix {
  flex-shrink: 0;
  font-size: 13px;
  color: var(--el-text-color-secondary);
}
</style>
