SearchView: Removed the dynamic collection-tile grid (e.g. "پرفروشهای این هفته") and the "نتایج / N محصول" section header from the UI. Underlying data/filtering logic untouched.
DashboardView ("میز کار"): Rebuilt from scratch with a new structure, distinct from the old card+grid layout but visually aligned with HomeView (same blurred bar, @ink/@wine palette, staged reveal animation on mount):
Single hero card (ink→wine gradient) showing balance, gold/fiat debt, and identity — no quick-action icons inside it anymore.
Live gold rate folded into a slim inline row at the bottom instead of a titled section.
Iterated shadow/spacing on the hero card per feedback (softer, less clipped).
DialogVant / DialogVantOneButton (shared modal components, used in 7+ call sites: Dashboard, Cart, SingleProduct, Register, App): Replaced Vant's default dialog chrome with the app's own rounded-card language — circular icon badge for the illustration, pill-shaped primary/secondary buttons. No call-site markup changed.
LoginView: Rebuilt from scratch — full-bleed dark hero (brand + step copy) overlapped by a floating white form sheet, animated crossfade transition between the mobile-number and OTP steps, same staged entrance animation as Home/Dashboard. All auth logic (API check, OTP stub, session login) unchanged.
This commit is contained in:
s.esmaeili
@@ -0,0 +1,138 @@
|
||||
<!-- Ported from legacy henza_pwa/src/components/input/otpInput.vue -->
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import SingleOtpInput from './SingleOtpInput.vue'
|
||||
|
||||
const BACKSPACE = 8
|
||||
const LEFT_ARROW = 37
|
||||
const RIGHT_ARROW = 39
|
||||
const DELETE = 46
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
defaultFocus?: boolean
|
||||
numInputs?: number
|
||||
separator?: string
|
||||
inputClasses?: string
|
||||
inputType?: string
|
||||
shouldAutoFocus?: boolean
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
}>(),
|
||||
{ numInputs: 4, shouldAutoFocus: false, disabled: false },
|
||||
)
|
||||
const emit = defineEmits<{
|
||||
(e: 'on-change', value: string | number): void
|
||||
(e: 'on-complete', value: string): void
|
||||
}>()
|
||||
|
||||
const activeInput = ref(0)
|
||||
const otp = ref<string[]>([])
|
||||
const oldOtp = ref<string[]>([])
|
||||
|
||||
const handleOnFocus = (index: number) => {
|
||||
if (props.defaultFocus && index < props.numInputs && !otp.value[index]) {
|
||||
activeInput.value = otp.value.length
|
||||
} else activeInput.value = index
|
||||
}
|
||||
const handleOnBlur = () => {
|
||||
activeInput.value = -1
|
||||
}
|
||||
|
||||
const checkFilledAllInputs = () => {
|
||||
if (otp.value.join('').length === props.numInputs) {
|
||||
return emit('on-complete', otp.value.join(''))
|
||||
}
|
||||
return 'Wait until the user enters the required number of characters'
|
||||
}
|
||||
|
||||
const focusInput = (input: number) => {
|
||||
activeInput.value = Math.max(Math.min(props.numInputs - 1, input), 0)
|
||||
}
|
||||
const focusNextInput = () => focusInput(activeInput.value + 1)
|
||||
const focusPrevInput = () => focusInput(activeInput.value - 1)
|
||||
|
||||
const changeCodeAtFocus = (value: number | string) => {
|
||||
oldOtp.value = Object.assign([], otp.value)
|
||||
|
||||
if (typeof value === 'string' && value === '') otp.value.splice(activeInput.value, 1)
|
||||
else otp.value[activeInput.value] = value as string
|
||||
|
||||
if (oldOtp.value.join('') !== otp.value.join('')) {
|
||||
emit('on-change', otp.value.join(''))
|
||||
checkFilledAllInputs()
|
||||
}
|
||||
}
|
||||
|
||||
const handleOnPaste = (event: Event) => {
|
||||
event.preventDefault()
|
||||
const clipboardEvent = event as ClipboardEvent
|
||||
const pastedData = (clipboardEvent.clipboardData?.getData('text/plain') ?? '').slice(0, props.numInputs - activeInput.value).split('')
|
||||
if (props.inputType === 'number' && !pastedData.join('').match(/^\d+$/)) {
|
||||
return 'Invalid pasted data'
|
||||
}
|
||||
const currentCharsInOtp = otp.value.slice(0, activeInput.value)
|
||||
const combinedWithPastedData = currentCharsInOtp.concat(pastedData)
|
||||
|
||||
combinedWithPastedData.slice(0, props.numInputs).forEach((value, i) => {
|
||||
otp.value[i] = value
|
||||
})
|
||||
|
||||
focusInput(combinedWithPastedData.slice(0, props.numInputs).length)
|
||||
return checkFilledAllInputs()
|
||||
}
|
||||
|
||||
const handleOnChange = (value: number | string) => {
|
||||
changeCodeAtFocus(value)
|
||||
focusNextInput()
|
||||
}
|
||||
|
||||
const handleOnKeyDown = (event: KeyboardEvent) => {
|
||||
switch (event.keyCode) {
|
||||
case BACKSPACE:
|
||||
event.preventDefault()
|
||||
changeCodeAtFocus('')
|
||||
focusPrevInput()
|
||||
break
|
||||
case DELETE:
|
||||
event.preventDefault()
|
||||
changeCodeAtFocus('')
|
||||
break
|
||||
case LEFT_ARROW:
|
||||
event.preventDefault()
|
||||
focusPrevInput()
|
||||
break
|
||||
case RIGHT_ARROW:
|
||||
event.preventDefault()
|
||||
focusNextInput()
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<div class="flex ltr justify-around w-full">
|
||||
<SingleOtpInput
|
||||
v-for="(item, i) in numInputs"
|
||||
:key="i"
|
||||
:focus="activeInput === i"
|
||||
:value="otp[i]"
|
||||
:separator="separator"
|
||||
:input-type="inputType"
|
||||
:input-classes="inputClasses"
|
||||
:is-last-child="i === numInputs - 1"
|
||||
:should-auto-focus="shouldAutoFocus"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
@on-change="handleOnChange"
|
||||
@on-keydown="handleOnKeyDown"
|
||||
@on-paste="handleOnPaste"
|
||||
@on-focus="handleOnFocus(i)"
|
||||
@on-blur="handleOnBlur"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@@ -0,0 +1,117 @@
|
||||
<!-- Ported from legacy henza_pwa/src/components/input/SingleOtpInput.vue -->
|
||||
<template>
|
||||
<div class="otp-single-input">
|
||||
<input
|
||||
:type="inputType"
|
||||
:placeholder="placeholder"
|
||||
:disabled="disabled"
|
||||
ref="input"
|
||||
min="0"
|
||||
max="9"
|
||||
maxlength="1"
|
||||
pattern="[0-9]"
|
||||
v-model="model"
|
||||
:class="inputClasses"
|
||||
@input="handleOnChange"
|
||||
@keydown="handleOnKeyDown"
|
||||
@paste="handleOnPaste"
|
||||
@focus="handleOnFocus"
|
||||
@blur="handleOnBlur"
|
||||
/>
|
||||
<span v-if="!isLastChild && separator">
|
||||
<span v-html="separator"></span>
|
||||
</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { onBeforeMount, ref, watch, type Ref } from 'vue'
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
inputType?: string
|
||||
value?: string | number
|
||||
separator?: string
|
||||
focus?: boolean
|
||||
inputClasses?: string
|
||||
shouldAutoFocus?: boolean
|
||||
isLastChild?: boolean
|
||||
placeholder?: string
|
||||
disabled?: boolean
|
||||
}>(),
|
||||
{ inputType: 'tel' },
|
||||
)
|
||||
const emit = defineEmits<{
|
||||
(e: 'on-change', value: string | number): void
|
||||
(e: 'on-keydown', value: KeyboardEvent): void
|
||||
(e: 'on-paste', value: Event): void
|
||||
(e: 'on-focus'): void
|
||||
(e: 'on-blur'): void
|
||||
}>()
|
||||
const model = ref(props.value || '')
|
||||
const input = ref<HTMLInputElement | null>(null) as Ref<HTMLInputElement>
|
||||
|
||||
const handleOnChange = () => {
|
||||
model.value = model.value.toString()
|
||||
if (model.value.length > 1) {
|
||||
model.value = model.value.slice(0, 1)
|
||||
}
|
||||
return emit('on-change', model.value)
|
||||
}
|
||||
|
||||
const isCodeNumeric = (charCode: number) => (charCode >= 48 && charCode <= 57) || (charCode >= 96 && charCode <= 105)
|
||||
|
||||
const handleOnKeyDown = (event: KeyboardEvent) => {
|
||||
if (props.disabled) {
|
||||
event.preventDefault()
|
||||
}
|
||||
const keyEvent = event || window.event
|
||||
const charCode = keyEvent.which ? keyEvent.which : keyEvent.keyCode
|
||||
if (isCodeNumeric(charCode) || [8, 9, 13, 37, 39, 46, 86].includes(charCode)) {
|
||||
emit('on-keydown', event)
|
||||
} else {
|
||||
keyEvent.preventDefault()
|
||||
}
|
||||
}
|
||||
|
||||
const handleOnPaste = (event: ClipboardEvent) => emit('on-paste', event)
|
||||
|
||||
const handleOnFocus = () => {
|
||||
input.value.select()
|
||||
return emit('on-focus')
|
||||
}
|
||||
|
||||
const handleOnBlur = () => emit('on-blur')
|
||||
|
||||
watch(
|
||||
() => props.value,
|
||||
(newValue, oldValue) => {
|
||||
if (newValue !== oldValue) {
|
||||
model.value = newValue ?? ''
|
||||
}
|
||||
},
|
||||
)
|
||||
watch(
|
||||
() => props.focus,
|
||||
(newFocusValue, oldFocusValue) => {
|
||||
if (oldFocusValue !== newFocusValue && input.value && props.focus) {
|
||||
input.value.focus()
|
||||
input.value.select()
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
onBeforeMount(() => {
|
||||
if (input.value && props.focus && props.shouldAutoFocus) {
|
||||
input.value.focus()
|
||||
input.value.select()
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.otp-single-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user