4
4
5
5
<v-inline-text-edit
6
6
{{ $attributes } }
7
- :allow-edit =" {{ $allowEdit } }"
7
+ :allow-edit =" {{ $allowEdit ? ' true ' : ' false ' } }"
8
8
>
9
9
<div class =" group w-full max-w-full hover:rounded-sm" >
10
10
<div class =" rounded-xs flex h-[34px] items-center pl-2.5 text-left" >
@@ -37,11 +37,23 @@ class="group relative h-[18px] !w-full pl-2.5"
37
37
: style= " { 'text-align': position }"
38
38
>
39
39
< span class = " cursor-pointer truncate rounded" >
40
- @ {{ (valueLabel || inputValue || ' ' ).length > 20
41
- ? (valueLabel || inputValue).substring (0 , 20 ) + ' ...'
42
- : (valueLabel || inputValue) }}
40
+ < template v- if = " isDirty" >
41
+ @ {{
42
+ inputValue .length > 20
43
+ ? inputValue .substring (0 , 20 ) + ' ...'
44
+ : inputValue
45
+ }}
46
+ < / template>
47
+
48
+ < template v- else >
49
+ @ {{
50
+ (valueLabel || inputValue || ' ' ).length > 20
51
+ ? (valueLabel || inputValue).substring (0 , 20 ) + ' ...'
52
+ : (valueLabel || inputValue)
53
+ }}
54
+ < / template>
43
55
< / span>
44
-
56
+
45
57
<!-- Tooltip -->
46
58
< div
47
59
class = " absolute bottom-0 mb-5 hidden flex-col group-hover:flex"
@@ -62,7 +74,7 @@ class="icon-edit cursor-pointer rounded p-0.5 text-2xl opacity-0 hover:bg-gray-2
62
74
>< / i>
63
75
< / template>
64
76
< / div>
65
-
77
+
66
78
<!-- Editing view -->
67
79
< div
68
80
class = " relative w-full"
@@ -79,7 +91,7 @@ class="!h-[34px] !py-0 ltr:pr-16 rtl:pl-16"
79
91
v- model= " inputValue"
80
92
ref= " input"
81
93
/ >
82
-
94
+
83
95
<!-- Action Buttons -->
84
96
< div class = " absolute top-[6px] flex gap-0.5 ltr:right-2 rtl:left-2" >
85
97
< button
@@ -89,7 +101,7 @@ class="flex items-center justify-center bg-green-100 p-1 hover:bg-green-200 ltr:
89
101
>
90
102
< i class = " icon-tick text-md cursor-pointer font-bold text-green-600 dark:!text-green-600" / >
91
103
< / button>
92
-
104
+
93
105
< button
94
106
type= " button"
95
107
class = " flex items-center justify-center bg-red-100 p-1 hover:bg-red-200 ltr:rounded-r-md rtl:rounded-l-md"
@@ -172,15 +184,17 @@ class="flex items-center justify-center bg-red-100 p-1 hover:bg-red-200 ltr:roun
172
184
173
185
isEditing: false ,
174
186
187
+ isDirty: false ,
188
+
175
189
isRTL: document .documentElement .dir === ' rtl' ,
176
190
};
177
191
},
178
192
179
193
watch: {
180
194
/**
181
195
* Watch the value prop.
182
- *
183
- * @param {String} newValue
196
+ *
197
+ * @param {String} newValue
184
198
*/
185
199
value (newValue ) {
186
200
this .inputValue = newValue;
@@ -190,7 +204,7 @@ class="flex items-center justify-center bg-red-100 p-1 hover:bg-red-200 ltr:roun
190
204
methods: {
191
205
/**
192
206
* Toggle the input.
193
- *
207
+ *
194
208
* @return {void}
195
209
*/
196
210
toggle () {
@@ -201,7 +215,7 @@ class="flex items-center justify-center bg-red-100 p-1 hover:bg-red-200 ltr:roun
201
215
202
216
/**
203
217
* Save the input value.
204
- *
218
+ *
205
219
* @return {void}
206
220
*/
207
221
save () {
@@ -213,11 +227,13 @@ class="flex items-center justify-center bg-red-100 p-1 hover:bg-red-200 ltr:roun
213
227
214
228
if (this .url ) {
215
229
let formData = new FormData ();
216
-
230
+
217
231
formData .append (this .name , this .inputValue );
218
232
219
233
formData .append (' _method' , ' PUT' );
220
234
235
+ this .isDirty = true ;
236
+
221
237
this .$axios .post (this .url , {
222
238
... this .params ,
223
239
... Object .fromEntries (formData),
@@ -226,10 +242,12 @@ class="flex items-center justify-center bg-red-100 p-1 hover:bg-red-200 ltr:roun
226
242
this .$emitter .emit (' add-flash' , { type: ' success' , message: response .data .message });
227
243
})
228
244
.catch ((error ) => {
245
+ this .isDirty = false ;
246
+
229
247
this .inputValue = this .value ;
230
248
231
249
this .$emitter .emit (' add-flash' , { type: ' error' , message: error .response .data .message });
232
- });
250
+ });
233
251
}
234
252
235
253
this .$emit (' on-change' , {
@@ -240,7 +258,7 @@ class="flex items-center justify-center bg-red-100 p-1 hover:bg-red-200 ltr:roun
240
258
241
259
/**
242
260
* Cancel the input value.
243
- *
261
+ *
244
262
* @return {void}
245
263
*/
246
264
cancel () {
0 commit comments