@tak-ps/vue-tabler 4.9.0 → 4.10.0

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 (3) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/components/input/Input.vue +141 -30
  3. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -10,6 +10,12 @@
10
10
 
11
11
  ## Version History
12
12
 
13
+ ### v4.10.0
14
+
15
+ - :rocket: Improve Blur styling of TablerInput component
16
+ - :rocket: Improve Error styling of TablerInput component
17
+ - :rocket: Imrpove Error Blur styling of TablerInput component
18
+
13
19
  ### v4.9.0
14
20
 
15
21
  - :tada: Introduce Tabler Badge
package/components/input/Input.vue CHANGED
@@ -10,7 +10,12 @@
10
10
  </TablerLabel>
11
11
  <div class='col-12'>
12
12
  <template v-if='!rows || rows <= 1'>
13
- <div class='input-group input-group-flat'>
13
+ <div
14
+ class='input-group input-group-flat'
15
+ :class='{
16
+ "tabler-input-group-invalid": errorstr && hasEndAdornment
17
+ }'
18
+ >
14
19
  <span
15
20
  v-if='icon || $slots.icon'
16
21
  class='input-group-text'
@@ -43,7 +48,8 @@
43
48
  :autofocus='autofocus'
44
49
  :type='computed_type'
45
50
  :class='{
46
- "is-invalid": errorstr
51
+ "is-invalid": errorstr,
52
+ "tabler-input-with-end": hasEndAdornment
47
53
  }'
48
54
  class='form-control'
49
55
  :placeholder='placeholder||label||""'
@@ -83,8 +89,8 @@
83
89
  href='#'
84
90
  class='link-secondary'
85
91
  data-bs-toggle='tooltip'
86
- aria-label='Show Password'
87
- data-bs-original-title='Show Password'
92
+ aria-label='Hide Password'
93
+ data-bs-original-title='Hide Password'
88
94
  >
89
95
  <IconEyeOff
90
96
  :size='20'
@@ -98,7 +104,6 @@
98
104
  @click='current = ""'
99
105
  >
100
106
  <a
101
- v-if='!passwordVisible'
102
107
  href='#'
103
108
  class='link-secondary'
104
109
  data-bs-toggle='tooltip'
@@ -111,35 +116,69 @@
111
116
  />
112
117
  </a>
113
118
  </span>
114
- <div
115
- v-if='errorstr'
116
- class='invalid-feedback'
117
- v-text='errorstr'
118
- />
119
+ <span
120
+ v-if='hasEndAdornment'
121
+ :class='errorstr ? "tabler-input-error-end" : "tabler-input-end"'
122
+ class='input-group-text'
123
+ >
124
+ <IconAlertCircle
125
+ v-if='errorstr'
126
+ :size='20'
127
+ stroke='1.5'
128
+ />
129
+ <slot
130
+ v-else
131
+ name='end'
132
+ />
133
+ </span>
119
134
  </div>
135
+ <div
136
+ v-if='errorstr'
137
+ class='invalid-feedback d-block'
138
+ v-text='errorstr'
139
+ />
120
140
  </template>
121
141
  <template v-else>
122
- <textarea
123
- ref='textInput'
124
- v-model='current'
125
- :disabled='disabled'
126
- :autofocus='autofocus'
127
- :autocomplete='autocomplete'
128
- :wrap='wrap'
129
- :rows='rows'
130
- :type='computed_type'
131
- :class='{
132
- "is-invalid": errorstr
133
- }'
134
- class='form-control'
135
- :placeholder='placeholder||label||""'
136
- @keyup.enter='$emit("submit")'
137
- @focus='$emit("focus")'
138
- @blur='$emit("blur")'
139
- />
142
+ <div class='position-relative'>
143
+ <textarea
144
+ ref='textInput'
145
+ v-model='current'
146
+ :disabled='disabled'
147
+ :autofocus='autofocus'
148
+ :autocomplete='autocomplete'
149
+ :wrap='wrap'
150
+ :rows='rows'
151
+ :type='computed_type'
152
+ :class='{
153
+ "is-invalid": errorstr,
154
+ "tabler-input-with-end": hasEndAdornment
155
+ }'
156
+ class='form-control'
157
+ :placeholder='placeholder||label||""'
158
+ @keyup.enter='$emit("submit")'
159
+ @focus='$emit("focus")'
160
+ @blur='$emit("blur")'
161
+ />
162
+
163
+ <div
164
+ v-if='hasEndAdornment'
165
+ :class='errorstr ? "tabler-input-error-end" : "tabler-input-end"'
166
+ class='tabler-input-textarea-end'
167
+ >
168
+ <IconAlertCircle
169
+ v-if='errorstr'
170
+ :size='20'
171
+ stroke='1.5'
172
+ />
173
+ <slot
174
+ v-else
175
+ name='end'
176
+ />
177
+ </div>
178
+ </div>
140
179
  <div
141
180
  v-if='errorstr'
142
- class='invalid-feedback'
181
+ class='invalid-feedback d-block'
143
182
  v-text='errorstr'
144
183
  />
145
184
  </template>
@@ -148,9 +187,10 @@
148
187
  </template>
149
188
 
150
189
  <script setup lang="ts">
151
- import { ref, computed, watch, onMounted } from 'vue'
190
+ import { ref, computed, watch, onMounted, useSlots } from 'vue'
152
191
  import TablerLabel from '../internal/Label.vue'
153
192
  import {
193
+ IconAlertCircle,
154
194
  IconEye,
155
195
  IconEyeOff,
156
196
  IconCircleXFilled,
@@ -192,6 +232,8 @@ const props = withDefaults(defineProps<InputProps>(), {
192
232
  error: ''
193
233
  });
194
234
 
235
+ const slots = useSlots();
236
+
195
237
  const emit = defineEmits<{
196
238
  (e: 'blur'): void;
197
239
  (e: 'focus'): void;
@@ -210,6 +252,10 @@ const errorstr = computed(() => {
210
252
  return internal_error.value
211
253
  })
212
254
 
255
+ const hasEndAdornment = computed(() => {
256
+ return Boolean(errorstr.value || !!slots.end)
257
+ })
258
+
213
259
  const computed_type = computed(() => {
214
260
  if (props.type === 'password' && passwordVisible.value) return 'text';
215
261
  if (props.type === 'integer') return 'number'
@@ -271,4 +317,69 @@ input:autofill {
271
317
  background-image calc(infinity * 1s) step-end allow-discrete,
272
318
  color calc(infinity * 1s) step-end;
273
319
  }
320
+
321
+ .tabler-input-with-end {
322
+ padding-right: 3rem;
323
+ }
324
+
325
+ .tabler-input-with-end.is-invalid {
326
+ background-image: none;
327
+ padding-right: 3rem;
328
+ }
329
+
330
+ .tabler-input-group-invalid > .form-control.is-invalid {
331
+ border-right: 0;
332
+ }
333
+
334
+ .tabler-input-group-invalid:focus-within {
335
+ border-radius: var(--tblr-border-radius);
336
+ box-shadow: var(--tblr-shadow-input), 0 0 0 0.25rem rgba(var(--tblr-danger-rgb), 0.25);
337
+ }
338
+
339
+ .tabler-input-group-invalid:focus-within > .form-control.is-invalid {
340
+ border-color: var(--tblr-form-invalid-border-color, var(--tblr-danger));
341
+ box-shadow: none;
342
+ }
343
+
344
+ .tabler-input-group-invalid > .form-control.is-invalid:focus {
345
+ border-color: var(--tblr-form-invalid-border-color, var(--tblr-danger)) !important;
346
+ box-shadow: none !important;
347
+ outline: 0;
348
+ }
349
+
350
+ .tabler-input-group-invalid > .input-group-text:last-child {
351
+ border-color: var(--tblr-form-invalid-border-color, var(--tblr-danger)) !important;
352
+ border-left: 0;
353
+ }
354
+
355
+ .tabler-input-group-invalid:focus-within > .input-group-text:last-child {
356
+ border-color: var(--tblr-form-invalid-border-color, var(--tblr-danger)) !important;
357
+ }
358
+
359
+ .tabler-input-end {
360
+ color: var(--tblr-white);
361
+ opacity: 1;
362
+ }
363
+
364
+ .tabler-input-error-end {
365
+ color: var(--tblr-form-invalid-border-color, var(--tblr-danger)) !important;
366
+ opacity: 1;
367
+ }
368
+
369
+ .tabler-input-end :deep(a),
370
+ .tabler-input-end :deep(svg),
371
+ .tabler-input-error-end :deep(a),
372
+ .tabler-input-error-end :deep(svg) {
373
+ color: inherit;
374
+ opacity: 1;
375
+ }
376
+
377
+ .tabler-input-textarea-end {
378
+ position: absolute;
379
+ right: 0.5rem;
380
+ top: 0.5rem;
381
+ z-index: 2;
382
+ display: flex;
383
+ align-items: center;
384
+ }
274
385
  </style>
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@tak-ps/vue-tabler",
3
3
  "type": "module",
4
- "version": "4.9.0",
4
+ "version": "4.10.0",
5
5
  "lib": "lib.ts",
6
6
  "main": "lib.ts",
7
7
  "module": "lib.ts",