boursecu_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=""
        @input="handlerChange"
        @change="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=""
        @input="handlerChange"
        @change="handlerChange"
    />
  </div>
</template>

<script lang="ts" setup>
import {usePrefix} from "@/utils/usePrefix";
import {computed} from "vue";
import {usePrice} from "@/utils/usePrice";
import {persianToEnglishDigits, shouldNormalizeInputDigits} 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)
//emits
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
  },
})

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

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

  let normalized = String(value)
  if (shouldNormalizeInputDigits(props)) {
    normalized = persianToEnglishDigits(normalized)
  }
  if (props.type === 'price') {
    normalized = normalized.replaceAll(',', '')
  }
  return normalized
}

const handlerChange = (e: Event | string) => {
  const raw = typeof e === 'string' ? e : (e.target as HTMLInputElement | null)?.value
  const normalized = normalizeValue(raw)
  emits('update:value', normalized)
  emits('onchange', normalized)
}
const {prefixCls} = usePrefix('input')
</script>

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

.@{prefix} {
  /*  .ant-input-group-addon:first-child {
    !*    border: #d9d9d9 1px solid;
    border-radius: 0 6px 6px 0;*!
  }*/

  .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>