@a-vision-software/vue-input-components 1.4.21 → 1.4.22

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a-vision-software/vue-input-components",
-  "version": "1.4.21",
+  "version": "1.4.22",
   "description": "A collection of reusable Vue 3 input components with TypeScript support",
   "author": "A-Vision Software",
   "license": "MIT",

package/src/components/TextInput.vue

@@ -104,6 +104,9 @@
         :disabled="disabled"
         class="text-input__input"
         @input="handleInput"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @keydown="handleKeydown"
         ref="inputRef"
         :readonly="readonly"
       ></textarea>
@@ -156,6 +159,7 @@ const props = withDefaults(defineProps<TextInputProps>(), {
   maxHeight: '14rem',
   bgColor: 'var(--input-color, #ffffffee)',
   width: '100%',
+  autosaveOnBlur: true,
 })
 
 const emit = defineEmits<{
@@ -171,11 +175,12 @@ const id = ref<string>('')
 const showSaved = ref(false)
 const showChanged = ref(false)
 const isChanged = ref(false)
-const debounceTimer = ref<number | null>(null)
 const changedTimer = ref<number | null>(null)
 const inputRef = ref<HTMLInputElement | null>(null)
 const dateValue = ref<Date | null>(null)
 const isFocused = ref(false)
+const originalValue = ref<string | number>('')
+const originalDateValue = ref<Date | null>(null)
 
 const defaultCurrencyFormatter = new Intl.NumberFormat('en-NZ', {
   style: 'currency',
@@ -246,10 +251,7 @@ const handleAutosave = async (value: string) => {
   }
 }
 
-const debounceAutosave = (value: string) => {
-  if (debounceTimer.value) {
-    clearTimeout(debounceTimer.value)
-  }
+const showChangedIndicator = () => {
   if (changedTimer.value) {
     clearTimeout(changedTimer.value)
   }
@@ -262,10 +264,6 @@ const debounceAutosave = (value: string) => {
     emit('changed')
     isChanged.value = true
   }, 500)
-
-  debounceTimer.value = window.setTimeout(() => {
-    handleAutosave(value)
-  }, 1500)
 }
 
 const focusInput = () => {
@@ -300,11 +298,11 @@ const handleInput = (event: Event) => {
     const parsed = parseFloat(value)
     if (!Number.isNaN(parsed)) {
       emit('update:modelValue', parsed)
-      debounceAutosave(String(parsed))
+      showChangedIndicator()
     }
   } else {
     emit('update:modelValue', value)
-    debounceAutosave(value)
+    showChangedIndicator()
     if (props.type === 'textarea' && (event.target as HTMLTextAreaElement).tagName === 'TEXTAREA') {
       adjustHeight(event.target as HTMLTextAreaElement)
     }
@@ -313,6 +311,10 @@ const handleInput = (event: Event) => {
 
 const handleFocus = () => {
   isFocused.value = true
+  originalValue.value = props.modelValue
+  if (props.type === 'date') {
+    originalDateValue.value = dateValue.value
+  }
   emit('focus')
 }
 
@@ -328,9 +330,41 @@ const handleBlur = (event?: Event) => {
   }
   isFocused.value = false
   emit('blur')
+  
+  if (props.autosaveOnBlur && props.autosave) {
+    const value = String(props.modelValue)
+    handleAutosave(value)
+  }
 }
 
 const handleKeydown = (event: KeyboardEvent) => {
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    emit('update:modelValue', originalValue.value)
+    if (props.type === 'date') {
+      dateValue.value = originalDateValue.value
+    }
+    if (changedTimer.value) {
+      clearTimeout(changedTimer.value)
+      changedTimer.value = null
+    }
+    showSaved.value = false
+    showChanged.value = false
+    inputRef.value?.blur()
+  }
+  
+  if (event.key === 'Enter') {
+    if (props.type === 'textarea') {
+      if (event.ctrlKey || event.shiftKey) {
+        event.preventDefault()
+        inputRef.value?.blur()
+      }
+    } else {
+      event.preventDefault()
+      inputRef.value?.blur()
+    }
+  }
+  
   emit('keydown', event)
 }
 
@@ -349,13 +383,10 @@ const handlePaste = (event: ClipboardEvent) => {
 const handleDateChange = (date: Date | null) => {
   const formattedDate = formatDateForModel(date)
   emit('update:modelValue', formattedDate)
-  debounceAutosave(formattedDate)
+  showChangedIndicator()
 }
 
 onUnmounted(() => {
-  if (debounceTimer.value) {
-    clearTimeout(debounceTimer.value)
-  }
   if (changedTimer.value) {
     clearTimeout(changedTimer.value)
   }

package/src/types/textinput.ts

@@ -18,6 +18,7 @@ export type TextInputProps =
   bgColor?: string
   currencyFormatter?: Intl.NumberFormat
   autosave?: (value: string) => Promise<void>
+  autosaveOnBlur?: boolean
   error?: string
 } & (
   | {