diff --git a/packages/imask/src/controls/input.ts b/packages/imask/src/controls/input.ts index 7c37f3f8..2d1d41b0 100644 --- a/packages/imask/src/controls/input.ts +++ b/packages/imask/src/controls/input.ts @@ -65,7 +65,6 @@ class InputMask> { this._bindEvents(); // refresh - this.updateValue(); this._onChange(); } @@ -209,6 +208,8 @@ class InputMask> { updateValue () { this.masked.value = this.el.value; this._value = this.masked.value; + this._unmaskedValue = this.masked.unmaskedValue; + this._rawInputValue = this.masked.rawInputValue; } /** Syncronizes view from model value, fires change events */ @@ -360,9 +361,7 @@ class InputMask> { /** Handles view change event and commits model value */ _onChange () { - if (this.displayValue !== this.el.value) { - this.updateValue(); - } + if (this.displayValue !== this.el.value) this.updateValue(); this.masked.doCommit(); this.updateControl(); this._saveSelection(); diff --git a/packages/vue-imask/src/component3-composition.ts b/packages/vue-imask/src/component3-composition.ts index 1592dfd5..c5196b31 100644 --- a/packages/vue-imask/src/component3-composition.ts +++ b/packages/vue-imask/src/component3-composition.ts @@ -74,7 +74,7 @@ export default defineComponent({ const ptyped = toRef(props, 'typed'); masked.value = pmodelValue.value || pvalue.value || ''; - unmasked.value = punmasked.value; + unmasked.value = punmasked.value || ''; typed.value = ptyped.value; watch(pvalue, v => masked.value = v); diff --git a/packages/vue-imask/src/composable.ts b/packages/vue-imask/src/composable.ts index 195e289c..7f314914 100644 --- a/packages/vue-imask/src/composable.ts +++ b/packages/vue-imask/src/composable.ts @@ -38,17 +38,20 @@ function useIMask< const mask: Ref | undefined> = ref(); const masked: Ref['value']> = ref(''); const unmasked: Ref['unmaskedValue']> = ref(''); - const typed: Ref['typedValue']> = ref(null); - const initialized = ref(false); + const typed: Ref['typedValue']> = ref(); let $el: MaskElement | undefined; - let $lastAcceptedValue: InputMask['value'] | undefined; - let $lastAcceptedUnmaskedValue: InputMask['unmaskedValue'] | undefined; - let $lastAcceptedTypedValue: InputMask['typedValue'] | undefined; + let $lastAcceptedValue: InputMask['value'] | undefined = masked.value; + let $lastAcceptedUnmaskedValue: InputMask['unmaskedValue'] | undefined = unmasked.value; + let $lastAcceptedTypedValue: InputMask['typedValue'] | undefined = typed.value; - function _onAccept (event?: InputEvent) { + function storeLastAcceptedValues () { $lastAcceptedTypedValue = typed.value = (mask.value as InputMask).typedValue; $lastAcceptedUnmaskedValue = unmasked.value = (mask.value as InputMask).unmaskedValue; $lastAcceptedValue = masked.value = (mask.value as InputMask).value; + } + + function _onAccept (event?: InputEvent) { + storeLastAcceptedValues(); if (emit) { emit('accept', masked.value, event); @@ -79,13 +82,14 @@ function useIMask< .on('accept', _onAccept) .on('complete', _onComplete); - _onAccept(); + updateUnmaskedValue(); + updateMaskedValue(); + updateTypedValue(); - initialized.value = true; + storeLastAcceptedValues(); } function _destroyMask () { - if (!initialized.value) return; mask.value?.destroy(); mask.value = undefined; } @@ -93,26 +97,38 @@ function useIMask< onMounted(_initMask); onUnmounted(_destroyMask); - watch(unmasked, () => { - if (mask.value && initialized.value) { - if ($lastAcceptedUnmaskedValue !== unmasked.value) mask.value.unmaskedValue = unmasked.value; - $lastAcceptedUnmaskedValue = undefined; + const updateUnmaskedValue = () => { + if (!mask.value) return; + + if ($lastAcceptedUnmaskedValue !== unmasked.value) { + mask.value.unmaskedValue = unmasked.value; + if (mask.value.unmaskedValue !== unmasked.value) _onAccept(); } - }); + $lastAcceptedUnmaskedValue = undefined; + }; + watch(unmasked, updateUnmaskedValue); - watch(masked, () => { - if (mask.value && initialized.value) { - if ($lastAcceptedValue !== masked.value) mask.value.value = masked.value; - $lastAcceptedValue = undefined; + const updateMaskedValue = () => { + if (!mask.value) return; + + if ($lastAcceptedValue !== masked.value) { + mask.value.value = masked.value; + if (mask.value.value !== masked.value) _onAccept(); } - }); + $lastAcceptedValue = undefined; + }; + watch(masked, updateMaskedValue); - watch(typed, () => { - if (mask.value && initialized.value) { - if ($lastAcceptedTypedValue !== typed.value) mask.value.typedValue = typed.value; - $lastAcceptedTypedValue = undefined; + const updateTypedValue = () => { + if (!mask.value) return; + + if ($lastAcceptedTypedValue !== typed.value) { + mask.value.typedValue = typed.value; + if (mask.value.typedValue !== typed.value) _onAccept(); } - }); + $lastAcceptedTypedValue = undefined; + } + watch(typed, updateTypedValue); watch([el, _props], () => { const $newEl = el.value;