@tak-ps/vue-tabler 3.82.0 → 3.83.1
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.
- package/CHANGELOG.md +9 -0
- package/components/input/Input.vue +61 -4
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -10,6 +10,15 @@
|
|
|
10
10
|
|
|
11
11
|
## Version History
|
|
12
12
|
|
|
13
|
+
### v3.83.1
|
|
14
|
+
|
|
15
|
+
- :arrow_up: Update Core Deps
|
|
16
|
+
|
|
17
|
+
### v3.83.0
|
|
18
|
+
|
|
19
|
+
- :tada: Password Fields can be unhidden
|
|
20
|
+
- :rocket: Icon=Search input fields get a `clear` button
|
|
21
|
+
|
|
13
22
|
### v3.82.0
|
|
14
23
|
|
|
15
24
|
- :rocket: Arrow customization for TablerSlidedown
|
|
@@ -10,10 +10,10 @@
|
|
|
10
10
|
</TablerLabel>
|
|
11
11
|
<div class='col-12'>
|
|
12
12
|
<template v-if='!rows || rows <= 1'>
|
|
13
|
-
<div class='input-
|
|
13
|
+
<div class='input-group input-group-flat'>
|
|
14
14
|
<span
|
|
15
15
|
v-if='icon || $slots.icon'
|
|
16
|
-
class='input-
|
|
16
|
+
class='input-group-text'
|
|
17
17
|
>
|
|
18
18
|
<IconSearch
|
|
19
19
|
v-if='icon === "search"'
|
|
@@ -53,13 +53,64 @@
|
|
|
53
53
|
>
|
|
54
54
|
<span
|
|
55
55
|
v-if='loading'
|
|
56
|
-
class='input-
|
|
56
|
+
class='input-group-text'
|
|
57
57
|
>
|
|
58
58
|
<div
|
|
59
59
|
class='spinner-border spinner-border-sm text-secondary'
|
|
60
60
|
role='status'
|
|
61
61
|
/>
|
|
62
62
|
</span>
|
|
63
|
+
<span
|
|
64
|
+
v-else-if='type === 'password''
|
|
65
|
+
class='input-group-text'
|
|
66
|
+
@click='passwordVisible = !passwordVisible'
|
|
67
|
+
>
|
|
68
|
+
<a
|
|
69
|
+
v-if='!passwordVisible'
|
|
70
|
+
href='#'
|
|
71
|
+
class='link-secondary'
|
|
72
|
+
data-bs-toggle='tooltip'
|
|
73
|
+
aria-label='Show Password'
|
|
74
|
+
data-bs-original-title='Show Password'
|
|
75
|
+
>
|
|
76
|
+
<IconEye
|
|
77
|
+
:size='20'
|
|
78
|
+
:stroke='1'
|
|
79
|
+
/>
|
|
80
|
+
</a>
|
|
81
|
+
<a
|
|
82
|
+
v-else
|
|
83
|
+
href='#'
|
|
84
|
+
class='link-secondary'
|
|
85
|
+
data-bs-toggle='tooltip'
|
|
86
|
+
aria-label='Show Password'
|
|
87
|
+
data-bs-original-title='Show Password'
|
|
88
|
+
>
|
|
89
|
+
<IconEyeOff
|
|
90
|
+
:size='20'
|
|
91
|
+
:stroke='1'
|
|
92
|
+
/>
|
|
93
|
+
</a>
|
|
94
|
+
</span>
|
|
95
|
+
<span
|
|
96
|
+
v-else-if='icon === "search" && current.length'
|
|
97
|
+
class='input-group-text'
|
|
98
|
+
@click='current = ""'
|
|
99
|
+
>
|
|
100
|
+
<a
|
|
101
|
+
v-if='!passwordVisible'
|
|
102
|
+
href='#'
|
|
103
|
+
class='link-secondary'
|
|
104
|
+
data-bs-toggle='tooltip'
|
|
105
|
+
aria-label='Clear'
|
|
106
|
+
data-bs-original-title='Clear'
|
|
107
|
+
>
|
|
108
|
+
<IconCircleXFilled
|
|
109
|
+
:size='20'
|
|
110
|
+
:stroke='1'
|
|
111
|
+
/>
|
|
112
|
+
</a>
|
|
113
|
+
</span>
|
|
63
114
|
<div
|
|
64
115
|
v-if='errorstr'
|
|
65
116
|
class='invalid-feedback'
|
|
@@ -101,8 +152,11 @@ import { ref, computed, watch, onMounted } from 'vue'
|
|
|
101
152
|
import TablerLabel from '../internal/Label.vue'
|
|
102
153
|
import {
|
|
103
154
|
IconUser,
|
|
155
|
+
IconCircleXFilled,
|
|
104
156
|
IconLock,
|
|
105
|
-
IconSearch
|
|
157
|
+
IconSearch,
|
|
158
|
+
IconEye,
|
|
159
|
+
IconEyeOff
|
|
106
160
|
} from '@tabler/icons-vue'
|
|
107
161
|
|
|
108
162
|
const props = defineProps({
|
|
@@ -170,12 +224,15 @@ const textInput = ref(null)
|
|
|
170
224
|
const internal_error = ref('')
|
|
171
225
|
const current = ref(props.modelValue === undefined ? '' : props.modelValue)
|
|
172
226
|
|
|
227
|
+
const passwordVisible = ref(false);
|
|
228
|
+
|
|
173
229
|
const errorstr = computed(() => {
|
|
174
230
|
if (props.error) return props.error
|
|
175
231
|
return internal_error.value
|
|
176
232
|
})
|
|
177
233
|
|
|
178
234
|
const computed_type = computed(() => {
|
|
235
|
+
if (props.type === 'password' && passwordVisible.value) return 'text';
|
|
179
236
|
if (props.type === 'integer') return 'number'
|
|
180
237
|
return props.type
|
|
181
238
|
})
|