pukaad-ui-lib 1.204.0 → 1.205.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.
package/dist/module.json
CHANGED
|
@@ -1,8 +1,12 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="flex flex-col gap-[16px] w-full">
|
|
3
|
-
<div class="
|
|
4
|
-
|
|
3
|
+
<div class="flex gap-[8px] items-center">
|
|
4
|
+
<div class="font-title-medium-prominent">ความคิดเห็น</div>
|
|
5
|
+
<div class="font-title-medium text-gray">
|
|
6
|
+
{{ $convert.convertNumber(resolvedCommentCount) }}
|
|
7
|
+
</div>
|
|
5
8
|
</div>
|
|
9
|
+
|
|
6
10
|
<div class="flex flex-col gap-[16px]">
|
|
7
11
|
<div class="flex gap-[8px] w-full">
|
|
8
12
|
<Avatar :size="30" :src="currentUser.avatar" />
|
|
@@ -10,7 +14,7 @@
|
|
|
10
14
|
ref="mainInputRef"
|
|
11
15
|
contenteditable="true"
|
|
12
16
|
class="w-full min-h-[36px] px-[12px] py-[5px] rounded-md border border-mercury font-body-large focus:outline-none focus:ring-2 focus:ring-primary break-words bg-white empty:before:content-[attr(data-placeholder)] empty:before:text-gray"
|
|
13
|
-
data-placeholder="
|
|
17
|
+
data-placeholder="เพิ่มความคิดเห็น"
|
|
14
18
|
@focus="isShowMainActions = true"
|
|
15
19
|
@input="onMainCommentInput"
|
|
16
20
|
@keydown.enter.exact.prevent="onSendComment"
|
|
@@ -49,7 +53,7 @@
|
|
|
49
53
|
@click="onViewProfileComment(cmt.user.id)"
|
|
50
54
|
/>
|
|
51
55
|
<template v-if="editingId === cmt.id">
|
|
52
|
-
<div class="flex-1 flex flex-col gap-[
|
|
56
|
+
<div class="flex-1 flex flex-col gap-[4px]">
|
|
53
57
|
<div
|
|
54
58
|
:ref="(el) => setEditInputRef(el, cmt.id)"
|
|
55
59
|
contenteditable="true"
|
|
@@ -95,15 +99,17 @@
|
|
|
95
99
|
v-if="
|
|
96
100
|
isContentExpanded(`comment-${cmt.id}`) || !isContentOverflowing(`comment-${cmt.id}`)
|
|
97
101
|
"
|
|
98
|
-
>{{ normalizeContent(cmt.content) }}</template
|
|
99
102
|
>
|
|
100
|
-
|
|
101
|
-
|
|
103
|
+
{{ normalizeContent(cmt.content) }}
|
|
104
|
+
</template>
|
|
105
|
+
<template v-else>
|
|
106
|
+
{{ getTruncatedText(`comment-${cmt.id}`) }}...<span
|
|
102
107
|
class="text-primary cursor-pointer"
|
|
103
108
|
@click="toggleContentExpand(`comment-${cmt.id}`)"
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
109
|
+
>
|
|
110
|
+
ดูเพิ่มเติม
|
|
111
|
+
</span>
|
|
112
|
+
</template>
|
|
107
113
|
</div>
|
|
108
114
|
</div>
|
|
109
115
|
<div
|
|
@@ -126,7 +132,7 @@
|
|
|
126
132
|
</template>
|
|
127
133
|
</div>
|
|
128
134
|
<div class="pl-[38px] flex gap-[16px] text-gray">
|
|
129
|
-
<div class="font-body-
|
|
135
|
+
<div class="font-body-large">
|
|
130
136
|
{{ convertDateTorelativeText(cmt.created_at) }}
|
|
131
137
|
</div>
|
|
132
138
|
<div
|
|
@@ -138,6 +144,7 @@
|
|
|
138
144
|
cmt.is_liked ? 'pukaad:thumbs-up-solid' : 'pukaad:thumbs-up-regular'
|
|
139
145
|
"
|
|
140
146
|
:class="[cmt.is_liked && 'text-primary']"
|
|
147
|
+
size="20"
|
|
141
148
|
/>
|
|
142
149
|
<div
|
|
143
150
|
v-if="cmt.like_count > 0"
|
|
@@ -147,7 +154,7 @@
|
|
|
147
154
|
</div>
|
|
148
155
|
</div>
|
|
149
156
|
<div
|
|
150
|
-
class="font-body-
|
|
157
|
+
class="font-body-large cursor-pointer"
|
|
151
158
|
@click="onReplyComment(cmt.id, cmt.user)"
|
|
152
159
|
>
|
|
153
160
|
ตอบกลับ
|
|
@@ -162,7 +169,7 @@
|
|
|
162
169
|
class="justify-start text-primary h-auto gap-[4px] w-fit"
|
|
163
170
|
@click="onToggleReplyComment(cmt.id)"
|
|
164
171
|
>
|
|
165
|
-
<div class="font-body-large
|
|
172
|
+
<div class="font-body-large">
|
|
166
173
|
การตอบกลับ
|
|
167
174
|
{{ $convert.convertNumber(getHiddenCount(cmt)) }}
|
|
168
175
|
รายการ
|
|
@@ -234,7 +241,7 @@
|
|
|
234
241
|
@click="onViewProfileComment(reply.user.id)"
|
|
235
242
|
/>
|
|
236
243
|
<template v-if="editingId === reply.id">
|
|
237
|
-
<div class="flex-1 flex flex-col gap-[
|
|
244
|
+
<div class="flex-1 flex flex-col gap-[4px]">
|
|
238
245
|
<div
|
|
239
246
|
:ref="(el) => setEditInputRef(el, reply.id)"
|
|
240
247
|
contenteditable="true"
|
|
@@ -328,7 +335,7 @@
|
|
|
328
335
|
</template>
|
|
329
336
|
</div>
|
|
330
337
|
<div class="pl-[38px] flex gap-[16px] text-gray">
|
|
331
|
-
<div class="font-body-
|
|
338
|
+
<div class="font-body-large">
|
|
332
339
|
{{ convertDateTorelativeText(reply.created_at) }}
|
|
333
340
|
</div>
|
|
334
341
|
<div
|
|
@@ -340,6 +347,7 @@
|
|
|
340
347
|
reply.is_liked ? 'pukaad:thumbs-up-solid' : 'pukaad:thumbs-up-regular'
|
|
341
348
|
"
|
|
342
349
|
:class="[reply.is_liked && 'text-primary']"
|
|
350
|
+
size="20"
|
|
343
351
|
/>
|
|
344
352
|
<div
|
|
345
353
|
v-if="reply.like_count > 0"
|
|
@@ -349,7 +357,7 @@
|
|
|
349
357
|
</div>
|
|
350
358
|
</div>
|
|
351
359
|
<div
|
|
352
|
-
class="font-body-
|
|
360
|
+
class="font-body-large cursor-pointer"
|
|
353
361
|
@click="onReplyComment(reply.id, reply.user)"
|
|
354
362
|
>
|
|
355
363
|
ตอบกลับ
|
|
@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
|
|
|
64
64
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
|
|
65
65
|
src: string;
|
|
66
66
|
center: boolean;
|
|
67
|
-
background: boolean;
|
|
68
|
-
modal: boolean;
|
|
69
67
|
responsive: boolean;
|
|
70
68
|
restore: boolean;
|
|
71
69
|
checkCrossOrigin: boolean;
|
|
72
70
|
checkOrientation: boolean;
|
|
73
71
|
crossorigin: "" | "anonymous" | "use-credentials";
|
|
72
|
+
modal: boolean;
|
|
74
73
|
guides: boolean;
|
|
75
74
|
highlight: boolean;
|
|
75
|
+
background: boolean;
|
|
76
76
|
autoCrop: boolean;
|
|
77
77
|
movable: boolean;
|
|
78
78
|
rotatable: boolean;
|
|
@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
|
|
|
64
64
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
|
|
65
65
|
src: string;
|
|
66
66
|
center: boolean;
|
|
67
|
-
background: boolean;
|
|
68
|
-
modal: boolean;
|
|
69
67
|
responsive: boolean;
|
|
70
68
|
restore: boolean;
|
|
71
69
|
checkCrossOrigin: boolean;
|
|
72
70
|
checkOrientation: boolean;
|
|
73
71
|
crossorigin: "" | "anonymous" | "use-credentials";
|
|
72
|
+
modal: boolean;
|
|
74
73
|
guides: boolean;
|
|
75
74
|
highlight: boolean;
|
|
75
|
+
background: boolean;
|
|
76
76
|
autoCrop: boolean;
|
|
77
77
|
movable: boolean;
|
|
78
78
|
rotatable: boolean;
|