@a-vision-software/vue-input-components 1.3.8 → 1.3.10

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/dist/types.d.ts +1 -0
  2. package/dist/vue-input-components.cjs.js +1 -1
  3. package/dist/vue-input-components.css +1 -1
  4. package/dist/vue-input-components.es.js +1092 -1081
  5. package/dist/vue-input-components.umd.js +1 -1
  6. package/package.json +1 -1
  7. package/src/components/TextInput.vue +12 -2
  8. package/src/types.ts +1 -0
  9. package/src/views/TextInputTestView.vue +30 -130
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@a-vision-software/vue-input-components",
3
- "version": "1.3.8",
3
+ "version": "1.3.10",
4
4
  "description": "A collection of reusable Vue 3 input components with TypeScript support",
5
5
  "author": "A-Vision Software",
6
6
  "license": "MIT",
package/src/components/TextInput.vue CHANGED
@@ -8,6 +8,8 @@
8
8
  {
9
9
  '--max-textarea-height': props.maxHeight || props.height || '14rem',
10
10
  '--textarea-height': props.height || '5.5rem',
11
+ '--input-bg-color': props.bgColor || 'var(--input-color, #ffffffaa)',
12
+ '--datepicker-bg-color': props.bgColor || 'var(--background-color, white)',
11
13
  },
12
14
  ]">
13
15
  <label v-if="label" :for="id" class="label">
@@ -33,7 +35,7 @@
33
35
  <span v-if="required && !showSaved && !showChanged && !error"
34
36
  class="status-indicator required-indicator">required</span>
35
37
  <transition name="fade">
36
- <span v-if="showSaved && !error" class="status-indicator saved-indicator">saved</span>
38
+ <span v-if="showSaved && !showChanged && !error" class="status-indicator saved-indicator">saved</span>
37
39
  </transition>
38
40
  <transition name="fade">
39
41
  <span v-if="showChanged && !error" class="status-indicator changed-indicator">changed</span>
@@ -418,7 +420,7 @@ textarea {
418
420
  }
419
421
 
420
422
  :deep(.dp__menu) {
421
- background-color: var(--input-bg-color);
423
+ background-color: var(--datepicker-bg-color);
422
424
  border: 1px solid var(--border-color);
423
425
  border-radius: 0.5rem;
424
426
  box-shadow:
@@ -449,4 +451,12 @@ textarea {
449
451
  background-color: var(--primary-color-light);
450
452
  color: var(--text-color);
451
453
  }
454
+
455
+ :deep(.dp__arrow_bottom) {
456
+ background-color: inherit;
457
+ }
458
+
459
+ :deep(.dp__arrow_top) {
460
+ background-color: inherit;
461
+ }
452
462
  </style>
package/src/types.ts CHANGED
@@ -23,6 +23,7 @@ export interface TextInputProps {
23
23
  isTextarea?: boolean
24
24
  maxHeight?: string
25
25
  height?: string
26
+ bgColor?: string
26
27
  }
27
28
 
28
29
  export interface FileUploadProps {
package/src/views/TextInputTestView.vue CHANGED
@@ -11,145 +11,45 @@
11
11
  <div class="column">
12
12
  <div class="input-group">
13
13
  <h2>Account Information</h2>
14
- <TextInput
15
- v-model="username"
16
- type="text"
17
- icon="user"
18
- placeholder="Enter your username"
19
- :required="true"
20
- :error="usernameError"
21
- label="Username"
22
- label-position="left"
23
- label-align="right"
24
- label-width="20%"
25
- total-width="100%"
26
- />
27
- <TextInput
28
- v-model="password"
29
- type="password"
30
- icon="lock"
31
- placeholder="Enter your password"
32
- :required="true"
33
- :error="passwordError"
34
- label="Password"
35
- label-position="left"
36
- label-align="right"
37
- label-width="20%"
38
- total-width="100%"
39
- />
14
+ <TextInput v-model="username" type="text" icon="user" placeholder="Enter your username" :required="true"
15
+ :error="usernameError" label="Username" label-position="left" label-align="right" label-width="20%"
16
+ total-width="100%" />
17
+ <TextInput v-model="password" type="password" icon="lock" placeholder="Enter your password" :required="true"
18
+ :error="passwordError" label="Password" label-position="left" label-align="right" label-width="20%"
19
+ total-width="100%" />
40
20
  </div>
41
21
  <div class="input-group">
42
22
  <h2>Additional Information</h2>
43
- <TextInput
44
- v-model="bio"
45
- isTextarea
46
- label="Bio"
47
- icon="user-circle"
48
- placeholder="Tell us about yourself..."
49
- :rows="4"
50
- :maxLength="500"
51
- :error="bioError"
52
- :autosave="handleBioAutosave"
53
- label-position="top"
54
- label-align="left"
55
- total-width="100%"
56
- height="10rem"
57
- max-height="20rem"
58
- />
59
- <TextInput
60
- v-model="feedback"
61
- isTextarea
62
- label="Feedback"
63
- icon="comment"
64
- placeholder="Share your thoughts..."
65
- :rows="3"
66
- :maxLength="1000"
67
- :error="feedbackError"
68
- :autosave="handleFeedbackAutosave"
69
- label-position="left"
70
- label-align="left"
71
- label-width="auto"
72
- total-width="100%"
73
- max-height="8rem"
74
- />
23
+ <TextInput v-model="bio" isTextarea label="Bio" icon="user-circle" placeholder="Tell us about yourself..."
24
+ :rows="4" :maxLength="500" :error="bioError" :autosave="handleBioAutosave" label-position="top"
25
+ label-align="left" total-width="100%" height="10rem" max-height="20rem" />
26
+ <TextInput v-model="feedback" isTextarea label="Feedback" icon="comment" placeholder="Share your thoughts..."
27
+ :rows="3" :maxLength="1000" :error="feedbackError" :autosave="handleFeedbackAutosave" label-position="left"
28
+ label-align="left" label-width="auto" total-width="100%" max-height="8rem" />
75
29
  </div>
76
30
  </div>
77
31
  <div class="column">
78
32
  <div class="input-group">
79
33
  <h2>Address Information</h2>
80
- <TextInput
81
- v-model="street"
82
- label="Street Address"
83
- type="text"
84
- icon="road"
85
- placeholder="Enter your street address"
86
- :error="streetError"
87
- :autosave="handleStreetAutosave"
88
- label-position="top"
89
- label-align="left"
90
- total-width="100%"
91
- />
34
+ <TextInput v-model="street" label="Street Address" type="text" icon="road"
35
+ placeholder="Enter your street address" :error="streetError" :autosave="handleStreetAutosave"
36
+ label-position="top" label-align="left" total-width="100%" />
92
37
  <div class="address-row">
93
- <TextInput
94
- v-model="city"
95
- label="City"
96
- type="text"
97
- icon="building"
98
- placeholder="Enter your city"
99
- :error="cityError"
100
- :autosave="handleCityAutosave"
101
- label-position="top"
102
- label-align="left"
103
- total-width="calc(100% - 11rem)"
104
- />
105
- <TextInput
106
- v-model="postalCode"
107
- label="Postal Code"
108
- type="text"
109
- icon="fas fa-hashtag"
110
- placeholder="1234AB"
111
- :error="postalCodeError"
112
- @update:modelValue="handlePostalCodeInput"
113
- :autosave="handlePostalCodeAutosave"
114
- label-position="top"
115
- label-align="left"
116
- total-width="10rem"
117
- />
38
+ <TextInput v-model="city" label="City" type="text" icon="building" placeholder="Enter your city"
39
+ :error="cityError" :autosave="handleCityAutosave" label-position="top" label-align="left"
40
+ total-width="calc(100% - 11rem)" />
41
+ <TextInput v-model="postalCode" label="Postal Code" type="text" icon="fas fa-hashtag" placeholder="1234AB"
42
+ :error="postalCodeError" @update:modelValue="handlePostalCodeInput" :autosave="handlePostalCodeAutosave"
43
+ label-position="top" label-align="left" total-width="10rem" />
118
44
  </div>
119
- <TextInput
120
- v-model="country"
121
- label="Country"
122
- type="text"
123
- icon="flag"
124
- placeholder="Enter your country"
125
- :error="countryError"
126
- :autosave="handleCountryAutosave"
127
- label-position="top"
128
- label-align="left"
129
- total-width="100%"
130
- />
131
- <TextInput
132
- v-model="birthDate"
133
- type="date"
134
- label="Date of Birth"
135
- icon="calendar"
136
- placeholder="DD/MM/YYYY"
137
- :min="minDate"
138
- :max="maxDate"
139
- :error="birthDateError"
140
- :autosave="handleBirthDateAutosave"
141
- label-position="top"
142
- label-align="left"
143
- />
144
- <TextInput
145
- v-model="comment"
146
- label="Comment"
147
- type="text"
148
- placeholder="Your comment"
149
- label-position="top"
150
- label-align="left"
151
- total-width="100%"
152
- />
45
+ <TextInput v-model="country" label="Country" type="text" icon="flag" placeholder="Enter your country"
46
+ :error="countryError" :autosave="handleCountryAutosave" label-position="top" label-align="left"
47
+ total-width="100%" />
48
+ <TextInput v-model="birthDate" type="date" label="Date of Birth" icon="calendar" placeholder="DD/MM/YYYY"
49
+ :min="minDate" :max="maxDate" :error="birthDateError" :autosave="handleBirthDateAutosave"
50
+ label-position="top" label-align="left" />
51
+ <TextInput v-model="comment" label="Comment" type="text" placeholder="Your comment" label-position="top"
52
+ label-align="left" total-width="100%" />
153
53
  </div>
154
54
  </div>
155
55
  </div>
@@ -186,7 +86,7 @@ const maxDate = '31/12/2024'
186
86
 
187
87
  const formatPostalCode = (value: string) => {
188
88
  // Remove all non-alphanumeric characters except spaces
189
- let formatted = value.replace(/[^a-zA-Z0-9\s]/g, '')
89
+ let formatted = value.replace(/[^a-zA-Z0-9]/g, '')
190
90
 
191
91
  // Convert to uppercase
192
92
  formatted = formatted.toUpperCase()