sprintify-ui 0.0.140 → 0.0.141

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.140",
+  "version": "0.0.141",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -22,7 +22,7 @@
     "humanize-duration": "^3.0.0",
     "lodash": "^4.17.21",
     "luxon": "^3.0.0",
-    "maska": "^2.1.1",
+    "maska": "^2.1.3",
     "microtip": "^0.2.2",
     "object-to-formdata": "^4.4.2",
     "pikaday": "^1.8.2",

package/src/components/BaseInput.vue

@@ -19,29 +19,8 @@
     >
       {{ prefix }}
     </div>
-    <input
-      ref="input"
-      v-maska:[maskOptions]
-      :value="modelValue"
-      :type="type"
-      :name="nameInternal"
-      :step="step"
-      :min="min"
-      :max="max"
-      :disabled="disabled"
-      :placeholder="placeholder"
-      :required="requiredInternal"
-      class="w-full border-none bg-white outline-none focus:z-[1] focus:ring-2 focus:ring-primary-600 focus:ring-offset-1 disabled:cursor-not-allowed disabled:text-slate-300"
-      :class="{
-        'rounded-l': !iconLeft && !prefix,
-        'rounded-r': !iconRight && !suffix,
-      }"
-      :autocomplete="autocomplete ? 'on' : 'off'"
-      @keydown.enter="onEnter"
-      @input="emitUpdate(transformInputValue($event))"
-      @focus="$emit('focus', $event)"
-      @blur="$emit('blur', $event)"
-    />
+    <input v-if="hasMask" ref="input" v-maska:[maskOptions] v-bind="bindings" />
+    <input v-else ref="input" v-bind="bindings" />
     <div
       v-if="suffix"
       class="flex shrink-0 items-center justify-center border-l px-4 transition-colors"
@@ -65,7 +44,7 @@
 </template>
 
 <script lang="ts" setup>
-import { get, isString } from 'lodash';
+import { get } from 'lodash';
 import { PropType } from 'vue';
 import { BaseIcon } from '@/index';
 import { useField } from '@/composables/field';
@@ -156,6 +135,37 @@ const maskOptions = computed(() => {
   return undefined;
 });
 
+const hasMask = computed(() => {
+  return !!props.mask;
+});
+
+const bindings = computed<any>(() => {
+  return {
+    value: props.modelValue,
+    type: props.type,
+    name: nameInternal.value,
+    step: props.step,
+    min: props.min,
+    max: props.max,
+    disabled: props.disabled,
+    placeholder: props.placeholder,
+    required: requiredInternal.value,
+    autocomplete: props.autocomplete ? 'on' : 'off',
+    class: {
+      'rounded-l': !props.iconLeft && !props.prefix,
+      'rounded-r': !props.iconRight && !props.suffix,
+      'w-full border-none bg-white outline-none focus:z-[1] focus:ring-2 focus:ring-primary-600 focus:ring-offset-1 disabled:cursor-not-allowed disabled:text-slate-300':
+        true,
+    },
+    onKeydown: {
+      enter: onEnter,
+    },
+    onInput: update,
+    onFocus: (e: Event) => emit('focus', e),
+    onBlur: (e: Event) => emit('blur', e),
+  };
+});
+
 const maskInternal = computed(() => {
   if (props.mask === 'phone') {
     return '(###) ###-####';
@@ -186,18 +196,12 @@ const { nameInternal, requiredInternal, hasErrorInternal, emitUpdate } =
     emit: emit,
   });
 
-function transformInputValue(event: Event | null): string | null {
+function update(event: any | null) {
   if (event === null) {
-    return null;
-  }
-
-  const value = get(event, 'target.value', null);
-
-  if (isString(value)) {
-    return value;
+    emitUpdate(null);
   }
 
-  return '';
+  return emitUpdate(get(event, 'target.value', ''));
 }
 
 function onEnter(e: Event) {