Skip to content

Commit

Permalink
fix #989
Browse files Browse the repository at this point in the history
  • Loading branch information
@uNmAnNeR
uNmAnNeR committed Jan 31, 2024
1 parent da541c6 commit 3a666d4
Show file tree
Hide file tree
Showing 5 changed files with 57 additions and 46 deletions.
2 changes: 1 addition & 1 deletion docs/guide.html
View file
Expand Up @@ -783,7 +783,7 @@ <h4 id="autofix" class="section-h"><a href="#autofix">Autofix Mode</a></h4>

<h4 id="repeat" class="section-h"><a href="#repeat">Repeat block (since 7.3.0)</a></h4>
<div class="form-item">
<label>Repeat pattern block:</label>
<label>Repeat pattern digit:</label>
<div class="input-select">
<input id="repeat-mask" type="text" value="">
<select id="select-repeat">
Expand Down
2 changes: 1 addition & 1 deletion packages/react-imask/src/hook.ts
View file
Expand Up @@ -60,7 +60,7 @@ function useIMask<
);

const _onComplete = useCallback(
() => maskRef.current && onComplete?.(maskRef.current.value, maskRef.current),
(event?: InputEvent) => maskRef.current && onComplete?.(maskRef.current.value, maskRef.current, event),
[onComplete],
);

Expand Down
14 changes: 7 additions & 7 deletions packages/vue-imask/example.html
View file
Expand Up @@ -33,6 +33,7 @@ <h1>Vue IMask Plugin Demo</h1>
</main>

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-demi"></script>
<script src="https://unpkg.com/vue-types"></script>
<script src="https://unpkg.com/imask"></script>
<script src="dist/vue-imask.js"></script>
Expand All @@ -41,22 +42,21 @@ <h1>Vue IMask Plugin Demo</h1>
var testDateMask = {
mask: Date
};
var app = new Vue({
el: '#app',
var app = Vue.createApp({
directives: {
imask: VueIMask.IMaskDirective
},
components: {
'imask-input': VueIMask.IMaskComponent
},
data: {
data: () => ({
dateMask: testDateMask,
dateValue: '12.12',

numberMask: testNumberMask,
numberUnmask: 'typed',
numberValue: 0
},
// numberValue: 0,
}),
methods: {
onAcceptDate: function (e) {
console.log('accept date', e.detail.value);
Expand All @@ -69,7 +69,7 @@ <h1>Vue IMask Plugin Demo</h1>
onFocusNumber: function () {
console.log('focus num');
},
onAcceptNumber: function (value) {
onAcceptNumber: function (value, e) {
console.log('accept num', value, typeof value);
},
onCompleteNumber: function (value) {
Expand All @@ -84,7 +84,7 @@ <h1>Vue IMask Plugin Demo</h1>
else app.dateMask = testDateMask;
}
}
});
}).mount('#app');
// setTimeout(function () {
// app.numberUnmask = false;
// app.numberValue = '123';
Expand Down
18 changes: 9 additions & 9 deletions packages/vue-imask/src/component3-composition.ts
View file
Expand Up @@ -52,19 +52,19 @@ export default defineComponent<MaskProps>({
setup (props, { attrs, emit }) {
const { el, masked, unmasked, typed } = useIMask(extractOptionsFromProps(props as MaskProps, VALUE_PROPS) as FactoryOpts, {
emit,
onAccept: () => {
onAccept: (event?: InputEvent) => {
// emit more events
const v = masked.value;
emit('accept:value', v);
emit('update:value', v);
emit('update:masked', v);
emit('update:modelValue', v);
emit('accept:value', v, event);
emit('update:value', v, event);
emit('update:masked', v, event);
emit('update:modelValue', v, event);

emit('update:unmasked', unmasked.value);
emit('update:typed', typed.value);
emit('update:unmasked', unmasked.value, event);
emit('update:typed', typed.value, event);
},
onComplete: () => {
emit('complete:value', masked.value);
onComplete: (event?: InputEvent) => {
emit('complete:value', masked.value, event);
},
} as ComposableParams<MaskProps>);

Expand Down
67 changes: 39 additions & 28 deletions packages/vue-imask/src/composable.ts
View file
Expand Up @@ -17,9 +17,9 @@ type ComposableEmitValue<E extends ComposableEmitEvent, Opts extends FactoryOpts

export
type ComposableParams<Opts extends FactoryOpts> = {
emit?: <E extends ComposableEmitEvent>(eventName: E, value: ComposableEmitValue<E, Opts>) => void,
onAccept?: () => void,
onComplete?: () => void,
emit?: <E extends ComposableEmitEvent>(eventName: E, value: ComposableEmitValue<E, Opts>, e?: InputEvent) => void,
onAccept?: (e?: InputEvent) => void,
onComplete?: (e?: InputEvent) => void,
}

export default
Expand All @@ -39,33 +39,34 @@ function useIMask<
const masked: Ref<InputMask<Opts>['value']> = ref('');
const unmasked: Ref<InputMask<Opts>['unmaskedValue']> = ref('');
const typed: Ref<InputMask<Opts>['typedValue']> = ref(null);
const initialized = ref(false);
let $el: MaskElement | undefined;
let $masked: InputMask<Opts>['value'];
let $unmasked: InputMask<Opts>['unmaskedValue'];
let $typed: InputMask<Opts>['typedValue'];
let $lastAcceptedValue: InputMask<Opts>['value'] | undefined;
let $lastAcceptedUnmaskedValue: InputMask<Opts>['unmaskedValue'] | undefined;
let $lastAcceptedTypedValue: InputMask<Opts>['typedValue'] | undefined;

function _onAccept () {
$typed = typed.value = (mask.value as InputMask<Opts>).typedValue;
$unmasked = unmasked.value = (mask.value as InputMask<Opts>).unmaskedValue;
$masked = masked.value = (mask.value as InputMask<Opts>).value;
function _onAccept (event?: InputEvent) {
$lastAcceptedTypedValue = typed.value = (mask.value as InputMask<Opts>).typedValue;
$lastAcceptedUnmaskedValue = unmasked.value = (mask.value as InputMask<Opts>).unmaskedValue;
$lastAcceptedValue = masked.value = (mask.value as InputMask<Opts>).value;

if (emit) {
emit('accept', $masked);
emit('accept:masked', $masked);
emit('accept:typed', $typed);
emit('accept:unmasked', $unmasked);
emit('accept', masked.value, event);
emit('accept:masked', masked.value, event);
emit('accept:typed', typed.value, event);
emit('accept:unmasked', unmasked.value, event);
}
if (onAccept) onAccept();
if (onAccept) onAccept(event);
}

function _onComplete () {
function _onComplete (event?: InputEvent) {
if (emit) {
emit('complete', $masked);
emit('complete:masked', $masked);
emit('complete:typed', $typed);
emit('complete:unmasked', $unmasked);
emit('complete', (mask.value as InputMask<Opts>).value, event);
emit('complete:masked', (mask.value as InputMask<Opts>).value, event);
emit('complete:typed', (mask.value as InputMask<Opts>).typedValue, event);
emit('complete:unmasked', (mask.value as InputMask<Opts>).unmaskedValue, event);
}
if (onComplete) onComplete();
if (onComplete) onComplete(event);
}

function _initMask () {
Expand All @@ -79,28 +80,38 @@ function useIMask<
.on('complete', _onComplete);

_onAccept();

initialized.value = true;
}

function _destroyMask () {
if (mask.value) {
mask.value.destroy();
mask.value = undefined;
}
if (!initialized.value) return;
mask.value?.destroy();
mask.value = undefined;
}

onMounted(_initMask);
onUnmounted(_destroyMask);

watch(unmasked, () => {
if (mask.value) $unmasked = mask.value.unmaskedValue = unmasked.value;
if (mask.value && initialized.value) {
if ($lastAcceptedUnmaskedValue !== unmasked.value) mask.value.unmaskedValue = unmasked.value;
$lastAcceptedUnmaskedValue = undefined;
}
});

watch(masked, () => {
if (mask.value) $masked = mask.value.value = masked.value;
if (mask.value && initialized.value) {
if ($lastAcceptedValue !== masked.value) mask.value.value = masked.value;
$lastAcceptedValue = undefined;
}
});

watch(typed, () => {
if (mask.value) $typed = mask.value.typedValue = typed.value;
if (mask.value && initialized.value) {
if ($lastAcceptedTypedValue !== typed.value) mask.value.typedValue = typed.value;
$lastAcceptedTypedValue = undefined;
}
});

watch([el, _props], () => {
Expand Down

0 comments on commit 3a666d4

Please sign in to comment.