@a-vision-software/vue-input-components 1.3.2 → 1.3.3

package/package.json

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

package/src/components/Dropdown.vue

@@ -41,6 +41,14 @@
           @click.stop="clearSelection" />
         <font-awesome-icon icon="chevron-down" class="dropdown__arrow" :class="{ 'dropdown__arrow--open': isOpen }" />
       </div>
+      <span v-if="required && !showSaved && !showChanged" class="status-indicator required-indicator">required</span>
+      <transition name="fade">
+        <span v-if="showSaved && !error" class="status-indicator saved-indicator">saved</span>
+      </transition>
+      <transition name="fade">
+        <span v-if="showChanged && !error" class="status-indicator changed-indicator">changed</span>
+      </transition>
+      <div v-if="error" class="error-message">{{ error }}</div>
     </div>
 
     <div v-if="isOpen" class="dropdown__content">
@@ -62,7 +70,7 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed, watch, nextTick } from 'vue'
+import { ref, computed, watch, nextTick, onUnmounted } from 'vue'
 import type { DropdownProps, DropdownOption } from '../types/dropdown'
 
 const props = withDefaults(defineProps<DropdownProps>(), {
@@ -81,10 +89,14 @@ const props = withDefaults(defineProps<DropdownProps>(), {
   padding: '0.5rem',
   icon: '',
   iconSize: 'normal',
+  required: false,
+  error: '',
 })
 
 const emit = defineEmits<{
   (e: 'update:modelValue', value: string | string[]): void
+  (e: 'changed'): void
+  (e: 'saved'): void
 }>()
 
 const isOpen = ref(false)
@@ -144,8 +156,10 @@ const toggleOption = (option: DropdownOption) => {
       ? currentValue.filter((id) => id !== option.id)
       : [...currentValue, option.id]
     emit('update:modelValue', newValue)
+    debounceAutosave(newValue)
   } else {
     emit('update:modelValue', option.id)
+    debounceAutosave(option.id)
     closeDropdown()
   }
 }
@@ -179,6 +193,66 @@ watch(isOpen, (newValue) => {
     document.removeEventListener('click', handleClickOutside)
   }
 })
+
+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 handleAutosave = async (value: string | string[]) => {
+  if (props.autosave) {
+    try {
+      await props.autosave(value)
+      if (!props.error) {
+        emit('saved')
+        showSaved.value = true
+        showChanged.value = false
+        setTimeout(() => {
+          showSaved.value = false
+        }, 3000)
+      }
+    } catch (error) {
+      console.error('Autosave failed:', error)
+    }
+  }
+}
+
+const debounceAutosave = (value: string | string[]) => {
+  // Clear existing timers
+  if (debounceTimer.value) {
+    clearTimeout(debounceTimer.value)
+  }
+  if (changedTimer.value) {
+    clearTimeout(changedTimer.value)
+  }
+
+  // Show changed indicator immediately
+  if (!props.error) {
+    showChanged.value = true
+  }
+
+  // Trigger changed event after 500ms
+  changedTimer.value = window.setTimeout(() => {
+    emit('changed')
+    isChanged.value = true
+  }, 500)
+
+  // Trigger autosave after 1500ms
+  debounceTimer.value = window.setTimeout(() => {
+    handleAutosave(value)
+  }, 1500)
+}
+
+// Cleanup timers on unmount
+onUnmounted(() => {
+  if (debounceTimer.value) {
+    clearTimeout(debounceTimer.value)
+  }
+  if (changedTimer.value) {
+    clearTimeout(changedTimer.value)
+  }
+})
 </script>
 
 <style scoped>
@@ -197,6 +271,7 @@ watch(isOpen, (newValue) => {
 }
 
 .dropdown__selected {
+  position: relative;
   display: grid;
   grid-template-columns: auto 1fr auto;
   align-items: center;
@@ -397,4 +472,55 @@ watch(isOpen, (newValue) => {
   justify-content: center;
   padding: 0.75rem 0;
 }
+
+.dropdown__selected.has-error {
+  border-color: var(--danger-color);
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+.status-indicator {
+  position: absolute;
+  top: -1px;
+  line-height: 1px;
+  right: 0.5rem;
+  font-size: 0.75rem;
+  color: var(--text-muted);
+  background-color: var(--dropdown-background-color);
+  padding: 0 0.25rem;
+}
+
+.saved-indicator {
+  color: var(--success-color);
+}
+
+.changed-indicator {
+  color: var(--warning-color);
+}
+
+.error-message {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  padding: 0.25rem 0.75rem;
+  background-color: var(--danger-color);
+  color: white;
+  font-size: 0.75rem;
+  border-radius: 0 0 0.5rem 0.5rem;
+  transform: translateY(100%);
+  transition: transform 0.2s ease;
+  line-height: var(--line-height);
+  z-index: 1;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.2s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
 </style>

package/src/components/TextInput.vue

@@ -17,7 +17,7 @@
       'has-error': error,
       'has-icon': icon,
     }">
-      <div v-if="icon" class="icon-wrapper" :class="{ 'has-error': error }" @click="focusInput">
+      <div v-if="icon" class="icon-wrapper" @click="focusInput">
         <font-awesome-icon :icon="icon" class="icon" />
       </div>
       <Datepicker v-if="type === 'date'" :id="id" v-model="dateValue" :placeholder="placeholder" :disabled="disabled"
@@ -279,22 +279,23 @@ defineExpose({
   border-color: var(--danger-color);
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
+
+  .icon {
+    color: var(--danger-color);
+  }
 }
 
 .icon-wrapper {
-  position: absolute;
-  left: 0.75rem;
-  top: 50%;
-  transform: translateY(-50%);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--text-color);
+  display: grid;
+  place-items: start;
+  padding: 1rem;
+  border-right: 1px solid rgb(from var(--border-color) r g b / 20%);
   cursor: pointer;
+  overflow: hidden;
 }
 
-.icon-wrapper.has-error {
-  color: var(--error-color);
+.icon-wrapper:hover {
+  background-color: var(--input-bg-hover);
 }
 
 .icon {

package/src/types/dropdown.ts

@@ -22,4 +22,7 @@ export interface DropdownProps {
   padding?: string
   icon?: string
   iconSize?: 'normal' | 'large'
+  required?: boolean
+  error?: string
+  autosave?: (value: string | string[]) => Promise<void>
 }

package/src/views/DropdownTestView.vue

@@ -6,7 +6,7 @@
 
     <div class="dropdown-test__section">
       <h2>Single Select Dropdown</h2>
-      <Dropdown v-model="selectedSingle" :options="options" placeholder="Select a color" filterable
+      <Dropdown v-model="selectedSingle" :options="options" placeholder="Select a color" filterable required
         @update:modelValue="handleSingleChange" />
       <div v-if="selectedSingle" class="selection-info">
         Selected: {{ getOptionLabel(selectedSingle) }}