@a-vision-software/vue-input-components 1.4.3 → 1.4.6

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@a-vision-software/vue-input-components",
-    "version": "1.4.3",
+    "version": "1.4.6",
     "description": "A collection of reusable Vue 3 input components with TypeScript support",
     "author": "A-Vision Software",
     "license": "MIT",
@@ -85,4 +85,4 @@
     "publishConfig": {
         "access": "public"
     }
-}
+}

package/src/components/Modal.vue

@@ -1,7 +1,7 @@
 <template>
   <Teleport to="body">
     <transition name="modal-fade">
-      <div v-if="modelValue" class="modal-backdrop">
+      <div v-if="modelValue" class="modal-backdrop" :class="modalClass">
         <div class="modal" :style="modalStyle" role="dialog" aria-labelledby="modalTitle"
           aria-describedby="modalContent">
           <div v-if="props.isLargeIcon && props.icon" class="modal-large-icon">
@@ -39,6 +39,7 @@ import { ModalProps, ModalEmits } from '../types/modal'
 
 const props = withDefaults(defineProps<ModalProps>(), {
   modelValue: false,
+  class: '',
   title: '',
   minWidth: '300px',
   maxWidth: '800px',

package/src/components/TextInput.vue

@@ -54,7 +54,7 @@
 </template>
 
 <script setup lang="ts">
-import { computed, ref, onUnmounted, onMounted } from 'vue'
+import { computed, ref, onUnmounted, onMounted, watch } from 'vue'
 import { TextInputProps } from '../types/textinput'
 import Datepicker from '@vuepic/vue-datepicker'
 import '@vuepic/vue-datepicker/dist/main.css'
@@ -115,12 +115,12 @@ const formatDateForModel = (date: Date | null): string => {
   const day = String(date.getDate()).padStart(2, '0')
   const month = String(date.getMonth() + 1).padStart(2, '0')
   const year = date.getFullYear()
-  return `${day}/${month}/${year}`
+  return `${year}-${month}-${day}`
 }
 
 const parseDateFromModel = (dateStr: string): Date | null => {
   if (!dateStr) return null
-  const [day, month, year] = dateStr.split('/').map(Number)
+  const [year, month, day] = dateStr.split('-').map(Number)
   return new Date(year, month - 1, day)
 }
 
@@ -150,7 +150,7 @@ const debounceAutosave = (value: string) => {
     clearTimeout(changedTimer.value)
   }
 
-  if (!props.error) {
+  if (!props.error && props.autosave) {
     showChanged.value = true
   }
 
@@ -210,12 +210,18 @@ onUnmounted(() => {
 })
 
 onMounted(() => {
-  id.value = `text-input-${Math.random().toString(36).substr(2, 9)}`
+  id.value = `text-input-${Math.random().toString(36).substring(2, 9)}`
   if (props.type === 'date' && props.modelValue) {
     dateValue.value = parseDateFromModel(props.modelValue)
   }
 })
 
+watch(() => props.modelValue, (newValue) => {
+  if (props.type === 'date' && newValue) {
+    dateValue.value = parseDateFromModel(newValue)
+  }
+})
+
 defineExpose({
   focus: () => inputRef.value?.focus(),
   blur: () => inputRef.value?.blur(),

package/src/types/modal.ts

@@ -1,5 +1,6 @@
 export interface ModalProps {
   modelValue: boolean
+  modalClass?: string
   title?: string
   minWidth?: string
   maxWidth?: string

package/src/views/ModalTestView.vue

@@ -9,7 +9,7 @@
 
       <Action label="Open Basic Modal" @click="showBasicModal = true" />
 
-      <Modal v-model="showBasicModal" title="Basic Modal Example" icon="info-circle">
+      <Modal v-model="showBasicModal" title="Basic Modal Example" icon="info-circle" modal-class="basic-modal">
         <p>This is a basic modal example with default styling.</p>
         <p>The modal can be closed by clicking the X button in the top right corner.</p>
       </Modal>

package/src/views/TextInputTestView.vue

@@ -27,7 +27,7 @@
             max-height="8rem" />
         </div>
       </div>
-      <div class="column">
+      <div class="column" @click.prevent="birthDate = '1974-03-12'">
         <div class="input-group">
           <h2>Address Information</h2>
           <TextInput v-model="street" label="Street Address" type="text" icon="road"
@@ -64,7 +64,7 @@ const street = ref('')
 const city = ref('')
 const postalCode = ref('')
 const country = ref('')
-const birthDate = ref('')
+const birthDate = ref('1967-08-22')
 const comment = ref('')
 const bio = ref('')
 const feedback = ref('')