ghatreh_user/src/components/BasicPacks/BasicInput.vue

<template>
  <div :class="[prefixCls]">
    <div>
      {{ props.title }}
    </div>
    <a-input-password
        v-if="isPassword"
        v-model:value="localValue"
        :addon-after="props.addonAfter"
        :addon-before="props.addonBefore"
        :disabled="props.disabled"
        :placeHolder="props.placeHolder"
        :size="props.size"
        :type="props.type"
        class=""
        @change="handlerChange"
        @input="handlerChange"
    />
    <a-input
        v-else
        v-model:value="localValue"
        :addon-after="props.addonAfter"
        :addon-before="props.addonBefore"
        :disabled="props.disabled"
        :placeHolder="props.placeHolder"
        :size="props.size"
        :type="props.type === 'price'? 'tel':props.type"
        :inputmode="props.inputmode"
        :pattern="props.pattern"
        class=""
        @change="handlerChange"
        @input="handlerChange"
        @blur="emits('blur', $event)"
        @focus="emits('focus', $event)"
    />
  </div>
</template>

<script lang="ts" setup>
import {usePrefix} from "@/utils/usePrefix";
import {computed} from "vue";
import {usePrice} from "@/components/BasicPacks/BasicPriceInput/src/utils/usePrice";
import {
  normalizeDecimalInput,
  persianToEnglishDigits,
  shouldNormalizeDecimalSeparators,
} from '@/utils/persianDigits';

//Props
interface Prop {
  title?: String
  value?: String | Number
  size?: String
  type?: String
  inputmode?: String
  pattern?: String
  isPassword?: boolean
  disabled?: boolean
  addonAfter?: String
  addonBefore?: String
  addonBgColor?: String
  addonTextColor?: String
  placeHolder?: String
}

const addonBgColor = computed(() => props.addonBgColor)
const addonTextColor = computed(() => props.addonTextColor)

const props = withDefaults(defineProps<Prop>(), {
  isPassword: false
})
const emits = defineEmits(['update:value', 'onchange', 'blur', 'focus'])

const localValue = computed({
  set(value) {
    emits('update:value', normalizeValue(value))
  },
  get() {
    return props.type === 'price'
      ? props.value ? usePrice(props.value as number, true, '').trim() : ''
      : props.value
  },
})

function normalizeValue(value: unknown) {
  if (value == null || value === '') {
    return value
  }

  if (shouldNormalizeDecimalSeparators(props)) {
    const isPrice = String(props.type ?? '').trim().toLowerCase() === 'price'
    return normalizeDecimalInput(value as string | number, {
      commaAsThousand: isPrice,
    })
  }

  return persianToEnglishDigits(String(value))
}

const handlerChange = (e: Event | string) => {
  const target = typeof e === 'string' ? null : (e.target as HTMLInputElement | null)
  const raw = typeof e === 'string' ? e : target?.value
  const normalized = normalizeValue(raw)
  if (target && typeof normalized === 'string' && target.value !== normalized) {
    target.value = normalized
  }
  emits('update:value', normalized)
  emits('onchange', normalized)
}

//css style
const {prefixCls} = usePrefix('input')
</script>

<style lang="less">
@prefix: ~'@{prefixCls}-input';

.@{prefix} {
  .ant-input-group {
    direction: ltr;
  }

  .ant-input-group > .ant-input-rtl:first-child,
  .ant-input-group-rtl .ant-input-group-addon:first-child {
    border-radius: @border-radius-base 0 0 @border-radius-base;
  }

  .ant-input-group > .ant-input:last-child,
  .ant-input-group-addon:last-child {
    border-radius: 0 @border-radius-base @border-radius-base 0;
  }

  .ant-input-group-addon {
    background-color: v-bind(addonBgColor);
    color: v-bind(addonTextColor);
  }
}
</style>