safavimohadeseh78andCursor
20c871e66c
Add convert mobile/desktop views and assets chart from price history; polish calculator and wallet/home integration. Co-authored-by: Cursor <cursoragent@cursor.com>
138 lines
3.4 KiB
Vue
138 lines
3.4 KiB
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 {
|
|
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
|
|
}
|
|
|
|
//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
|
|
}
|
|
|
|
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)
|
|
}
|
|
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: #e0be7f !important;
|
|
color: #0a1b37 !important;
|
|
}
|
|
}
|
|
</style>
|