hrms-mgt/src/components/CurruncyInput.vue

<template>
  <q-input
    ref="inputRef"
    v-model="formattedValue"
    :dense="dense"
    :outlined="edit"
    :class="
      edit == true
        ? 'full-width inputgreen cursor-pointer'
        : 'full-width cursor-pointer'
    "
    :readonly="!edit"
    :borderless="!edit"
    hide-bottom-space
  >
    <template v-for="slot in slots">
      <slot :name="slot" />
    </template>
  </q-input>
</template>

<script setup lang="ts">
import { useCurrencyInput } from "vue-currency-input";
import { ref, useSlots, watch } from "vue";

const slots = ref<any>(useSlots());

const props = defineProps({
  modelValue: {
    type: Number,
    default: undefined,
  },
  dense: {
    type: Boolean,
    default: true,
  },
  edit: {
    type: Boolean,
  },
});

const { inputRef, formattedValue, setValue } = useCurrencyInput({
  locale: "th-TH",
  currency: "THB",
  currencyDisplay: "hidden" as any,
  hideCurrencySymbolOnFocus: true,
  hideGroupingSeparatorOnFocus: true,
  hideNegligibleDecimalDigitsOnFocus: true,
  autoDecimalDigits: false,
  useGrouping: true,
  accountingSign: false,
});

watch(
  () => props.modelValue,
  (value: any) => {
    setValue(value);
  }
);
</script>