pukaad-ui-lib 1.192.0 → 1.193.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 (13) hide show
  1. package/dist/module.json +1 -1
  2. package/dist/runtime/components/comment.d.vue.ts +11 -4
  3. package/dist/runtime/components/comment.vue +499 -255
  4. package/dist/runtime/components/comment.vue.d.ts +11 -4
  5. package/dist/runtime/components/input/input-radio.d.vue.ts +1 -1
  6. package/dist/runtime/components/input/input-radio.vue.d.ts +1 -1
  7. package/dist/runtime/components/ui/native-select/NativeSelectOptGroup.d.vue.ts +4 -4
  8. package/dist/runtime/components/ui/native-select/NativeSelectOptGroup.vue.d.ts +4 -4
  9. package/dist/runtime/components/ui/native-select/NativeSelectOption.d.vue.ts +4 -4
  10. package/dist/runtime/components/ui/native-select/NativeSelectOption.vue.d.ts +4 -4
  11. package/dist/runtime/components/ui/popover/PopoverContent.d.vue.ts +1 -1
  12. package/dist/runtime/components/ui/popover/PopoverContent.vue.d.ts +1 -1
  13. package/package.json +1 -1
package/dist/module.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "pukaad-ui-lib",
3
3
  "configKey": "pukaadUI",
4
- "version": "1.192.0",
4
+ "version": "1.193.0",
5
5
  "builder": {
6
6
  "@nuxt/module-builder": "1.0.2",
7
7
  "unbuild": "3.6.1"
package/dist/runtime/components/comment.d.vue.ts CHANGED
@@ -1,6 +1,13 @@
1
- import type { CommentProps } from "@/types/components/comment";
2
- declare const __VLS_export: import("vue").DefineComponent<CommentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CommentProps> & Readonly<{}>, {
3
- item: import("@/types/components/comment").Comment[];
4
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
1
+ interface User {
2
+ id: string;
3
+ name: string;
4
+ avatar: string;
5
+ path_name: string;
6
+ }
7
+ type __VLS_Props = {
8
+ blogId: string;
9
+ currentUser: User;
10
+ };
11
+ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
5
12
  declare const _default: typeof __VLS_export;
6
13
  export default _default;
package/dist/runtime/components/comment.vue CHANGED
@@ -1,308 +1,552 @@
1
1
  <template>
2
- <!-- <div class="flex flex-col gap-[16px] py-[16px]">
3
- <div class="flex gap-[8px]">
4
- <div class="font-title-medium-prominent">ความคิดเห็น</div>
5
- <div class="font-title-medium text-gray">{{ comments.length }}</div>
2
+ <div class="flex flex-col gap-[16px] w-full">
3
+ <div class="font-title-medium-prominent">
4
+ ความคิดเห็น {{ $convert.convertNumber(commentCount) }}
6
5
  </div>
7
- <div class="gap-[8px] flex flex-col w-full">
8
- <div class="flex gap-[8px] items-start w-full">
9
- <div>
10
- <Avatar src="https://placehold.co/40x40?text=ME" alt="Me" />
11
- </div>
12
- <div class="flex-1" @click="showButtons = true">
13
- <InputComment v-model="draft" />
14
- </div>
6
+ <div class="flex flex-col gap-[16px]">
7
+ <div class="flex gap-[8px] w-full">
8
+ <Avatar :size="30" />
9
+ <div
10
+ ref="mainInputRef"
11
+ contenteditable="true"
12
+ 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="แสดงความคิดเห็น"
14
+ @focus="isShowMainActions = true"
15
+ @input="
16
+ mainCommentInput = $event.target.innerText.trim()
17
+ "
18
+ @keydown.enter.exact.prevent="onSendComment"
19
+ />
15
20
  </div>
16
- <div v-if="showButtons" class="flex justify-end items-center w-full">
17
- <div class="flex gap-[8px]">
18
- <div class="w-[64px]">
19
- <Button
20
- full-rounded
21
- variant="flat-outline"
22
- full-width
23
- size="small"
24
- @click="resetDraft"
25
- >
26
- ยกเลิก
27
- </Button>
28
- </div>
29
- <div class="w-[64px]">
30
- <Button
31
- full-rounded
32
- color="primary"
33
- full-width
34
- size="small"
35
- :disabled="!draft.trim()"
36
- @click="submitDraft"
37
- >
38
- ส่ง
39
- </Button>
40
- </div>
41
- </div>
21
+ <div v-if="isShowMainActions" class="flex justify-end gap-[8px]">
22
+ <Button variant="outline" class="w-[56px]" @click="onCancelComment">
23
+ ยกเลิก
24
+ </Button>
25
+ <Button
26
+ color="primary"
27
+ class="w-[56px]"
28
+ :disabled="!mainCommentInput"
29
+ @click="onSendComment"
30
+ >
31
+ ส่ง
32
+ </Button>
42
33
  </div>
43
34
  </div>
44
- <div class="flex flex-col gap-[16px]">
45
- <div
46
- v-for="(comment, commentIndex) in comments"
47
- :key="comment.id"
48
- class="flex flex-col gap-[16px]"
49
- >
50
- <div class="flex flex-col gap-[4px]">
51
- <div class="flex gap-[8px] w-full">
52
- <div>
53
- <Avatar :src="comment.user.avatar" :alt="comment.user.name" />
35
+ <div
36
+ v-for="cmt in comment"
37
+ :key="cmt.id"
38
+ class="flex flex-col gap-[16px] w-full"
39
+ >
40
+ <div class="flex flex-col gap-[4px] w-full">
41
+ <div class="flex gap-[8px]">
42
+ <Avatar
43
+ :size="30"
44
+ class="cursor-pointer"
45
+ @click="onViewProfileComment(cmt.user.path_name)"
46
+ />
47
+ <div class="flex flex-col gap-[4px] bg-bright p-[8px] rounded-lg">
48
+ <div
49
+ class="font-body-large-prominent cursor-pointer"
50
+ @click="onViewProfileComment(cmt.user.path_name)"
51
+ >
52
+ {{ cmt.user.name }}
54
53
  </div>
55
54
  <div
56
- class="flex flex-col gap-[4px] p-[8px] bg-bright rounded-[8px]"
55
+ :ref="
56
+ (el) => registerContentRef(el, `comment-${cmt.id}`)
57
+ "
58
+ class="font-body-large"
57
59
  >
58
- <div class="font-body-large-prominent">
59
- {{ comment.user.name }}
60
- </div>
61
- <ReadMoreText :text="comment.content" :max-line="2" />
60
+ <template
61
+ v-if="
62
+ isContentExpanded(`comment-${cmt.id}`) || !isContentOverflowing(`comment-${cmt.id}`)
63
+ "
64
+ >{{ cmt.content }}</template
65
+ >
66
+ <template v-else
67
+ >{{ getTruncatedText(`comment-${cmt.id}`) }}...<span
68
+ class="text-primary cursor-pointer"
69
+ @click="toggleContentExpand(`comment-${cmt.id}`)"
70
+ >ดูเพิ่มเติม</span
71
+ ></template
72
+ >
62
73
  </div>
63
74
  </div>
64
- <div class="pl-[38px] flex gap-[16px]">
65
- <div class="text-gray font-body-large">
66
- {{ comment.created_at }}
75
+ </div>
76
+ <div class="pl-[38px] flex gap-[16px] text-gray">
77
+ <div class="font-body-medium">
78
+ {{ convertDateTorelativeText(cmt.created_at) }}
79
+ </div>
80
+ <div
81
+ class="flex gap-[4px] items-center cursor-pointer"
82
+ @click="onToggleLikeComment(cmt)"
83
+ >
84
+ <Icon
85
+ :name="
86
+ cmt.is_like ? 'pukaad:thumbs-up-solid' : 'pukaad:thumbs-up-regular'
87
+ "
88
+ :class="[cmt.is_like && 'text-primary']"
89
+ />
90
+ <div :class="[cmt.is_like && 'text-primary']">
91
+ {{ $convert.convertNumber(cmt.like_count) }}
67
92
  </div>
68
- <Button
69
- type="text"
70
- :variant="comment.liked ? 'primary' : 'black'"
71
- :icon-size="20"
72
- size="tiny"
73
- :prepend-icon="
74
- comment.liked
75
- ? 'pukaad:thumbs-up-solid'
76
- : 'pukaad:thumbs-up-regular'
77
- "
78
- :aria-pressed="comment.liked"
79
- @click="toggleLikeComment(comment)"
80
- disabled-padding
81
- >
82
- <div>
83
- {{ comment.like_count }}
84
- </div>
85
- </Button>
86
- <Button
87
- variant="text"
88
- disabled-padding
89
- @click="toggleReplyInput(comment.id, comment.user)"
90
- >
91
- ตอบกลับ
92
- </Button>
93
93
  </div>
94
94
  <div
95
- v-if="comment.replies && comment.replies.length > 0"
96
- @click="toggleShowComments(commentIndex)"
97
- class="text-primary font-body-large cursor-pointer pl-[38px] flex items-center gap-[4px]"
95
+ class="font-body-medium cursor-pointer hover:underline"
96
+ @click="onReplyComment(cmt.id, cmt.user)"
97
+ >
98
+ ตอบกลับ
99
+ </div>
100
+ </div>
101
+ <div
102
+ v-if="cmt.reply.some((r) => r.user.id !== currentUser.id)"
103
+ class="pl-[38px] flex flex-col gap-[16px]"
104
+ >
105
+ <Button
106
+ variant="text"
107
+ class="justify-start text-primary p-0 h-auto gap-[4px]"
108
+ @click="onToggleReplyComment(cmt.id)"
98
109
  >
99
- <div>ดูการตอบกลับ {{ comment.replies.length }} รายการ</div>
110
+ <div class="font-body-large-prominent">
111
+ การตอบกลับ
112
+ {{
113
+ $convert.convertNumber(
114
+ cmt.reply.filter((r) => r.user.id !== currentUser.id).length
115
+ )
116
+ }}
117
+ รายการ
118
+ </div>
100
119
  <Icon
101
- :name="
102
- showCommentsState[commentIndex]
103
- ? 'lucide:chevron-up'
104
- : 'lucide:chevron-down'
105
- "
106
- :size="16"
120
+ :name="
121
+ openedComments.includes(cmt.id) ? 'lucide:chevron-up' : 'lucide:chevron-down'
122
+ "
123
+ />
124
+ </Button>
125
+ </div>
126
+ </div>
127
+ <div v-if="replyingToId === cmt.id" class="flex flex-col gap-[16px]">
128
+ <div class="flex gap-[8px] w-full">
129
+ <Avatar :size="30" />
130
+ <div class="flex-1">
131
+ <div
132
+ :ref="(el) => setReplyInputRef(el, cmt.id)"
133
+ contenteditable="true"
134
+ 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"
135
+ data-placeholder="เขียนการตอบกลับ..."
136
+ @input="onReplyInput($event, cmt.id)"
137
+ @keydown.enter.exact.prevent="onSendReplyComment(cmt)"
107
138
  />
108
139
  </div>
109
140
  </div>
110
-
141
+ <div class="flex justify-end gap-[8px]">
142
+ <Button
143
+ variant="outline"
144
+ class="w-[56px]"
145
+ @click="onCancelReplyComment"
146
+ >
147
+ ยกเลิก
148
+ </Button>
149
+ <Button
150
+ color="primary"
151
+ class="w-[68px]"
152
+ :disabled="!replyTextMap[cmt.id]"
153
+ @click="onSendReplyComment(cmt)"
154
+ >
155
+ ตอบกลับ
156
+ </Button>
157
+ </div>
158
+ </div>
159
+ <div
160
+ v-if="
161
+ openedComments.includes(cmt.id) || cmt.reply.some((r) => r.user.id === currentUser.id)
162
+ "
163
+ class="pl-[38px] flex flex-col gap-[16px] w-full"
164
+ >
111
165
  <div
112
- v-for="reply in comment.replies"
166
+ v-for="reply in cmt.reply"
167
+ v-show="
168
+ openedComments.includes(cmt.id) || reply.user.id === currentUser.id
169
+ "
113
170
  :key="reply.id"
114
- v-if="
115
- comment.replies &&
116
- comment.replies.length > 0 &&
117
- showCommentsState[commentIndex]
118
- "
119
- class="flex flex-col gap-[16px] pl-[38px]"
171
+ :data-reply-id="reply.id"
172
+ class="flex flex-col gap-[16px]"
120
173
  >
121
- <div class="flex flex-col gap-[4px]">
122
- <div class="flex gap-[8px] w-full">
123
- <div>
124
- <Avatar :src="reply.user.avatar" :alt="reply.user.name" />
174
+ <div class="flex flex-col gap-[4px] w-full">
175
+ <div class="flex gap-[8px]">
176
+ <Avatar
177
+ :size="30"
178
+ class="cursor-pointer"
179
+ @click="onViewProfileComment(reply.user.path_name)"
180
+ />
181
+ <div class="flex flex-col bg-bright p-[8px] rounded-lg gap-[4px]">
182
+ <div
183
+ class="font-body-large-prominent cursor-pointer"
184
+ @click="onViewProfileComment(reply.user.path_name)"
185
+ >
186
+ {{ reply.user.name }}
187
+ </div>
188
+ <div
189
+ :ref="
190
+ (el) => registerContentRef(el, `reply-${reply.id}`)
191
+ "
192
+ class="font-body-large"
193
+ >
194
+ <template
195
+ v-if="
196
+ isContentExpanded(`reply-${reply.id}`) || !isContentOverflowing(`reply-${reply.id}`)
197
+ "
198
+ ><span
199
+ v-if="reply.reply_to"
200
+ @click="onViewProfileComment(reply.reply_to.path_name)"
201
+ class="text-primary cursor-pointer mr-1"
202
+ >{{ reply.reply_to.name }}</span
203
+ >{{ reply.content }}</template
204
+ >
205
+ <template v-else
206
+ >{{ getTruncatedText(`reply-${reply.id}`) }}...<span
207
+ class="text-primary cursor-pointer"
208
+ @click="toggleContentExpand(`reply-${reply.id}`)"
209
+ >ดูเพิ่มเติม</span
210
+ ></template
211
+ >
212
+ </div>
213
+ </div>
214
+ </div>
215
+ <div class="pl-[38px] flex gap-[16px] text-gray">
216
+ <div class="font-body-medium">
217
+ {{ convertDateTorelativeText(reply.created_at) }}
125
218
  </div>
126
219
  <div
127
- class="flex flex-col gap-[4px] p-[8px] bg-bright rounded-[8px]"
220
+ class="flex gap-[4px] items-center cursor-pointer"
221
+ @click="onToggleLikeReplyComment(reply)"
128
222
  >
129
- <div class="font-body-large-prominent">
130
- {{ reply.user.name }}
223
+ <Icon
224
+ :name="
225
+ reply.is_like ? 'pukaad:thumbs-up-solid' : 'pukaad:thumbs-up-regular'
226
+ "
227
+ :class="[reply.is_like && 'text-primary']"
228
+ />
229
+ <div :class="[reply.is_like && 'text-primary']">
230
+ {{ $convert.convertNumber(reply.like_count) }}
131
231
  </div>
132
- <ReadMoreText :text="reply.content" :max-line="1">
133
- <span class="font-body-large-prominent text-primary"
134
- >เห้ย</span
135
- >
136
- </ReadMoreText>
232
+ </div>
233
+ <div
234
+ class="font-body-medium cursor-pointer hover:underline"
235
+ @click="onReplyComment(reply.id, reply.user)"
236
+ >
237
+ ตอบกลับ
137
238
  </div>
138
239
  </div>
139
- <div class="flex gap-[16px]">
140
- <div class="text-gray font-body-large">
141
- {{ reply.created_at }}
240
+ </div>
241
+ <div
242
+ v-if="replyingToId === reply.id"
243
+ class="flex flex-col gap-[16px]"
244
+ >
245
+ <div class="flex gap-[8px] w-full">
246
+ <Avatar :size="30" />
247
+ <div class="flex-1">
248
+ <div
249
+ :ref="(el) => setReplyInputRef(el, reply.id)"
250
+ contenteditable="true"
251
+ class="w-full min-h-[40px] px-[12px] py-[8px] rounded-lg border border-gray-300 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-400"
252
+ data-placeholder="เขียนการตอบกลับ..."
253
+ @input="onReplyInput($event, reply.id)"
254
+ @keydown.enter.exact.prevent="onSendReplyComment(cmt)"
255
+ />
142
256
  </div>
257
+ </div>
258
+ <div class="flex justify-end gap-[8px]">
143
259
  <Button
144
- type="text"
145
- :variant="reply.liked ? 'primary' : 'black'"
146
- :icon-size="20"
147
- size="tiny"
148
- :prepend-icon="
149
- reply.liked
150
- ? 'pukaad:thumbs-up-solid'
151
- : 'pukaad:thumbs-up-regular'
152
- "
153
- :aria-pressed="reply.liked"
154
- @click="toggleLikeComment(reply)"
155
- disabled-padding
260
+ variant="outline"
261
+ class="w-[56px]"
262
+ @click="onCancelReplyComment"
156
263
  >
157
- <div>
158
- {{ reply.like_count }}
159
- </div>
264
+ ยกเลิก
160
265
  </Button>
161
266
  <Button
162
- variant="text"
163
- disabled-padding
164
- @click="toggleReplyInput(comment.id, reply.user)"
267
+ color="primary"
268
+ class="w-[68px]"
269
+ :disabled="!replyTextMap[reply.id]"
270
+ @click="onSendReplyComment(cmt)"
165
271
  >
166
272
  ตอบกลับ
167
273
  </Button>
168
274
  </div>
169
275
  </div>
170
276
  </div>
171
-
172
- <div
173
- v-if="showReplyInput[comment.id]"
174
- class="pl-[38px] flex flex-col gap-[8px]"
175
- >
176
- <div class="flex gap-[8px] items-start w-full">
177
- <div>
178
- <Avatar src="https://placehold.co/40x40?text=ME" alt="Me" />
179
- </div>
180
- <div class="flex-1">
181
- <InputComment
182
- v-model="replyDrafts[comment.id]"
183
- :user-reply="replyTargets[comment.id] || comment.user"
184
- />
185
- </div>
186
- </div>
187
- <div class="flex justify-end items-center w-full">
188
- <div class="flex gap-[8px]">
189
- <div class="w-[64px]">
190
- <Button
191
- full-rounded
192
- variant="flat-outline"
193
- full-width
194
- size="small"
195
- @click="cancelReply(comment.id)"
196
- >
197
- ยกเลิก
198
- </Button>
199
- </div>
200
- <div class="w-[64px]">
201
- <Button
202
- full-rounded
203
- color="primary"
204
- full-width
205
- size="small"
206
- :disabled="!replyDrafts[comment.id]?.trim()"
207
- @click="submitReply(comment.id)"
208
- >
209
- ส่ง
210
- </Button>
211
- </div>
212
- </div>
213
- </div>
214
- </div>
215
277
  </div>
216
278
  </div>
217
- </div> -->
279
+ </div>
218
280
  </template>
219
281
 
220
282
  <script setup>
221
- import { ref, reactive } from "vue";
222
- const draft = ref("");
223
- const showButtons = ref(false);
283
+ import { ref, nextTick, onMounted } from "vue";
284
+ import { useRouter } from "vue-router";
285
+ import { useConvert } from "@/runtime/composables/useConvert";
224
286
  const props = defineProps({
225
- item: { type: Array, required: true, default: () => [] }
287
+ blogId: { type: String, required: true },
288
+ currentUser: { type: Object, required: true }
226
289
  });
227
- const comments = reactive(props.item);
228
- const showCommentsState = ref([]);
229
- const showReplyInput = ref({});
230
- const replyDrafts = ref({});
231
- const replyTargets = ref({});
232
- function resetDraft() {
233
- draft.value = "";
234
- showButtons.value = false;
235
- }
236
- function toggleLikeComment(comment) {
237
- if (comment.liked) {
238
- comment.like_count = Math.max(0, comment.like_count - 1);
239
- comment.liked = false;
290
+ const router = useRouter();
291
+ const { convertDateTorelativeText } = useConvert();
292
+ const currentUser = props.currentUser;
293
+ const openedComments = ref([]);
294
+ const expandedContentIds = ref([]);
295
+ const truncatedTexts = ref({});
296
+ const mainInputRef = ref(null);
297
+ const mainCommentInput = ref("");
298
+ const isShowMainActions = ref(false);
299
+ const replyingToId = ref(null);
300
+ const replyToUser = ref(null);
301
+ const replyInputRefs = ref({});
302
+ const replyTextMap = ref({});
303
+ const mockData = {
304
+ id: "blog-1",
305
+ comment_count: 5,
306
+ comment: [
307
+ {
308
+ id: "1",
309
+ user: {
310
+ id: "u1",
311
+ name: "\u0E2A\u0E38\u0E23\u0E0A\u0E31\u0E22 \u0E43\u0E08\u0E14\u0E35",
312
+ avatar: "",
313
+ path_name: "surachai-jaidee"
314
+ },
315
+ content: "\u0E14\u0E23.\u0E1B\u0E34\u0E48\u0E19\u0E2A\u0E31\u0E01\u0E01\u0E4C\u0E01\u0E25\u0E48\u0E32\u0E27\u0E27\u0E48\u0E32 \u0E1B\u0E30\u0E01\u0E32\u0E23\u0E31\u0E07\u0E1F\u0E2D\u0E01\u0E02\u0E32\u0E27\u0E42\u0E14\u0E22\u0E2A\u0E48\u0E27\u0E19\u0E43\u0E2B\u0E0D\u0E48\u0E41\u0E25\u0E49\u0E27\u0E08\u0E30\u0E40\u0E01\u0E34\u0E14\u0E08\u0E32\u0E01\u0E01\u0E32\u0E23\u0E17\u0E35\u0E48\u0E1B\u0E30\u0E01\u0E32\u0E23\u0E31\u0E07\u0E40\u0E08\u0E2D\u0E01\u0E31\u0E1A\u0E2D\u0E38\u0E13\u0E2B\u0E20\u0E39\u0E21\u0E34\u0E19\u0E49\u0E33\u0E17\u0E30\u0E40\u0E25\u0E17\u0E35\u0E48\u0E2A\u0E39\u0E07\u0E40\u0E01\u0E34\u0E19\u0E1B\u0E01\u0E15\u0E34 \u0E04\u0E37\u0E2D\u0E1B\u0E23\u0E30\u0E21\u0E32\u0E13 30.5 \u0E2D\u0E07\u0E28\u0E32\u0E40\u0E0B\u0E25\u0E40\u0E0B\u0E25\u0E40\u0E0B\u0E35\u0E22\u0E2A\u0E15\u0E48\u0E2D\u0E40\u0E19\u0E37\u0E48\u0E2D\u0E07\u0E01\u0E31\u0E19\u0E1B\u0E23\u0E30\u0E21\u0E32\u0E13 1 \u0E2A\u0E31\u0E1B\u0E14\u0E32\u0E2B\u0E4C \u0E41\u0E15\u0E48\u0E16\u0E36\u0E07\u0E40\u0E0A\u0E48\u0E19\u0E19\u0E31\u0E49\u0E19\u0E01\u0E47\u0E22\u0E31\u0E07\u0E21\u0E35\u0E1B\u0E31\u0E08\u0E08\u0E31\u0E22\u0E2D\u0E37\u0E48\u0E19\u0E46 \u0E17\u0E35\u0E48\u0E2A\u0E48\u0E07\u0E1C\u0E25\u0E15\u0E48\u0E2D\u0E01\u0E32\u0E23\u0E1F\u0E2D\u0E01\u0E02\u0E32\u0E27 \u0E02\u0E2D\u0E07\u0E1B\u0E30\u0E01\u0E32\u0E23\u0E31\u0E07\u0E14\u0E49\u0E27\u0E22 \u0E40\u0E0A\u0E48\u0E19 \u0E40\u0E23\u0E37\u0E48\u0E2D\u0E07\u0E02\u0E2D\u0E07\u0E2A\u0E20\u0E32\u0E1E\u0E41\u0E27\u0E14\u0E25\u0E49\u0E2D\u0E21 \u0E0A\u0E19\u0E34\u0E14\u0E1E\u0E31\u0E19\u0E18\u0E38\u0E4C\u0E02\u0E2D\u0E07\u0E1B\u0E30\u0E01\u0E32\u0E23\u0E31\u0E07 \u0E04\u0E27\u0E32\u0E21\u0E08\u0E49\u0E32\u0E02\u0E2D\u0E07\u0E23\u0E31\u0E07\u0E2A\u0E35 UV \u0E17\u0E35\u0E48\u0E1B\u0E30\u0E01\u0E32\u0E23\u0E31\u0E07\u0E44\u0E14\u0E49\u0E23\u0E31\u0E1A",
316
+ created_at: "2024-03-24T14:50:00Z",
317
+ like_count: 10,
318
+ is_like: false,
319
+ reply_count: 1,
320
+ reply: [
321
+ {
322
+ id: "r1",
323
+ user: {
324
+ id: "u2",
325
+ name: "\u0E27\u0E34\u0E0A\u0E31\u0E22 \u0E40\u0E23\u0E35\u0E22\u0E19\u0E23\u0E39\u0E49",
326
+ avatar: "",
327
+ path_name: "wichai-learn"
328
+ },
329
+ content: "\u0E02\u0E2D\u0E1A\u0E04\u0E38\u0E13\u0E2A\u0E33\u0E2B\u0E23\u0E31\u0E1A\u0E02\u0E49\u0E2D\u0E21\u0E39\u0E25\u0E04\u0E23\u0E31\u0E1A \u0E40\u0E1B\u0E47\u0E19\u0E1B\u0E23\u0E30\u0E42\u0E22\u0E0A\u0E19\u0E4C\u0E21\u0E32\u0E01\u0E40\u0E25\u0E22 \u0E14\u0E23.\u0E1B\u0E34\u0E48\u0E19\u0E2A\u0E31\u0E01\u0E01\u0E4C\u0E01\u0E25\u0E48\u0E32\u0E27\u0E27\u0E48\u0E32 \u0E1B\u0E30\u0E01\u0E32\u0E23\u0E31\u0E07\u0E1F\u0E2D\u0E01\u0E02\u0E32\u0E27\u0E42\u0E14\u0E22\u0E2A\u0E48\u0E27\u0E19\u0E43\u0E2B\u0E0D\u0E48\u0E41\u0E25\u0E49\u0E27\u0E08\u0E30\u0E40\u0E01\u0E34\u0E14\u0E08\u0E32\u0E01\u0E01\u0E32\u0E23\u0E17\u0E35\u0E48\u0E1B\u0E30\u0E01\u0E32\u0E23\u0E31\u0E07\u0E40\u0E08\u0E2D\u0E01\u0E31\u0E1A\u0E2D\u0E38\u0E13\u0E2B\u0E20\u0E39\u0E21\u0E34\u0E19\u0E49\u0E33\u0E17\u0E30\u0E40\u0E25\u0E17\u0E35\u0E48\u0E2A\u0E39\u0E07\u0E40\u0E01\u0E34\u0E19\u0E1B\u0E01\u0E15\u0E34 \u0E04\u0E37\u0E2D\u0E1B\u0E23\u0E30\u0E21\u0E32\u0E13 30.5 \u0E2D\u0E07\u0E28\u0E32\u0E40\u0E0B\u0E25\u0E40\u0E0B\u0E25\u0E40\u0E0B\u0E35\u0E22\u0E2A\u0E15\u0E48\u0E2D\u0E40\u0E19\u0E37\u0E48\u0E2D\u0E07\u0E01\u0E31\u0E19\u0E1B\u0E23\u0E30\u0E21\u0E32\u0E13 1 \u0E2A\u0E31\u0E1B\u0E14\u0E32\u0E2B\u0E4C",
330
+ created_at: "2024-03-24T14:55:00Z",
331
+ like_count: 2,
332
+ is_like: false
333
+ }
334
+ ]
335
+ },
336
+ {
337
+ id: "2",
338
+ user: {
339
+ id: "u3",
340
+ name: "\u0E01\u0E19\u0E01\u0E1E\u0E23 \u0E2A\u0E27\u0E22\u0E07\u0E32\u0E21",
341
+ avatar: "",
342
+ path_name: "kanokporn-beauty"
343
+ },
344
+ content: "\u0E2A\u0E20\u0E32\u0E1E\u0E2D\u0E32\u0E01\u0E32\u0E28\u0E0A\u0E48\u0E27\u0E07\u0E19\u0E35\u0E49\u0E23\u0E49\u0E2D\u0E19\u0E08\u0E23\u0E34\u0E07\u0E46 \u0E04\u0E23\u0E31\u0E1A \u0E15\u0E49\u0E2D\u0E07\u0E0A\u0E48\u0E27\u0E22\u0E01\u0E31\u0E19\u0E23\u0E31\u0E01\u0E29\u0E32\u0E2A\u0E34\u0E48\u0E07\u0E41\u0E27\u0E14\u0E25\u0E49\u0E2D\u0E21",
345
+ created_at: "2024-03-24T13:00:00Z",
346
+ like_count: 15,
347
+ is_like: false,
348
+ reply_count: 2,
349
+ reply: [
350
+ {
351
+ id: "r2",
352
+ user: {
353
+ id: "u4",
354
+ name: "\u0E21\u0E32\u0E19\u0E30 \u0E2D\u0E14\u0E17\u0E19",
355
+ avatar: "",
356
+ path_name: "mana-odton"
357
+ },
358
+ content: "\u0E40\u0E2B\u0E47\u0E19\u0E14\u0E49\u0E27\u0E22\u0E04\u0E23\u0E31\u0E1A \u0E40\u0E23\u0E34\u0E48\u0E21\u0E15\u0E49\u0E19\u0E17\u0E35\u0E48\u0E15\u0E31\u0E27\u0E40\u0E23\u0E32\u0E01\u0E48\u0E2D\u0E19\u0E40\u0E25\u0E22",
359
+ created_at: "2024-03-24T13:45:00Z",
360
+ like_count: 3,
361
+ is_like: false
362
+ },
363
+ {
364
+ id: "r3",
365
+ user: {
366
+ id: "u5",
367
+ name: "\u0E21\u0E13\u0E35 \u0E21\u0E35\u0E17\u0E23\u0E31\u0E1E\u0E22\u0E4C",
368
+ avatar: "",
369
+ path_name: "manee-money"
370
+ },
371
+ reply_to: {
372
+ id: "u4",
373
+ name: "\u0E21\u0E32\u0E19\u0E30 \u0E2D\u0E14\u0E17\u0E19",
374
+ avatar: "",
375
+ path_name: "mana-odton"
376
+ },
377
+ content: "\u0E43\u0E0A\u0E48\u0E40\u0E25\u0E22\u0E04\u0E48\u0E30 \u0E04\u0E48\u0E2D\u0E22\u0E46 \u0E1B\u0E23\u0E31\u0E1A\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E1E\u0E24\u0E15\u0E34\u0E01\u0E23\u0E23\u0E21\u0E01\u0E31\u0E19\u0E44\u0E1B",
378
+ created_at: "2024-03-24T14:30:00Z",
379
+ like_count: 1,
380
+ is_like: false
381
+ }
382
+ ]
383
+ }
384
+ ]
385
+ };
386
+ const comment = ref(mockData.comment);
387
+ const commentCount = ref(mockData.comment_count);
388
+ const onToggleReplyComment = (id) => {
389
+ if (openedComments.value.includes(id)) {
390
+ openedComments.value = openedComments.value.filter((i) => i !== id);
240
391
  } else {
241
- comment.like_count += 1;
242
- comment.liked = true;
243
- }
244
- }
245
- function toggleShowComments(commentIndex) {
246
- if (showCommentsState.value[commentIndex] === void 0) {
247
- showCommentsState.value[commentIndex] = false;
248
- }
249
- showCommentsState.value[commentIndex] = !showCommentsState.value[commentIndex];
250
- }
251
- function toggleReplyInput(commentId, targetUser) {
252
- const isOpen = !!showReplyInput.value[commentId];
253
- if (!isOpen) {
254
- replyDrafts.value[commentId] = "";
255
- replyTargets.value[commentId] = targetUser;
392
+ openedComments.value.push(id);
256
393
  }
257
- if (isOpen) {
258
- replyTargets.value[commentId] = void 0;
259
- }
260
- showReplyInput.value[commentId] = !isOpen;
261
- }
262
- function cancelReply(commentId) {
263
- showReplyInput.value[commentId] = false;
264
- replyDrafts.value[commentId] = "";
265
- replyTargets.value[commentId] = void 0;
266
- }
267
- function submitReply(commentId) {
268
- const text = replyDrafts.value[commentId]?.trim();
269
- if (!text) return;
270
- const comment = comments.find((c) => c.id === commentId);
271
- if (comment) {
272
- if (!comment.replies) {
273
- comment.replies = [];
394
+ };
395
+ const isContentExpanded = (id) => expandedContentIds.value.includes(id);
396
+ const isContentOverflowing = (id) => typeof truncatedTexts.value[id] === "string";
397
+ const getTruncatedText = (id) => truncatedTexts.value[id];
398
+ const registerContentRef = (el, id) => {
399
+ if (!el || id in truncatedTexts.value) return;
400
+ nextTick(() => {
401
+ const rect = el.getBoundingClientRect();
402
+ const width = rect.width;
403
+ if (!width) return;
404
+ const fullText = el.textContent ?? "";
405
+ const style = getComputedStyle(el);
406
+ const lineHeight = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.5;
407
+ const maxH = lineHeight * 3;
408
+ const clone = document.createElement("div");
409
+ clone.style.cssText = [
410
+ `visibility:hidden`,
411
+ `position:fixed`,
412
+ `top:-9999px`,
413
+ `width:${width}px`,
414
+ `font-size:${style.fontSize}`,
415
+ `font-family:${style.fontFamily}`,
416
+ `font-weight:${style.fontWeight}`,
417
+ `line-height:${style.lineHeight}`,
418
+ `letter-spacing:${style.letterSpacing}`,
419
+ `word-break:break-word`,
420
+ `white-space:normal`
421
+ ].join(";");
422
+ clone.textContent = fullText;
423
+ document.body.appendChild(clone);
424
+ if (clone.scrollHeight <= maxH + 2) {
425
+ clone.remove();
426
+ truncatedTexts.value[id] = null;
427
+ return;
274
428
  }
275
- comment.replies.push({
276
- id: Date.now().toString(),
277
- user: {
278
- id: "current_user",
279
- name: "Me",
280
- avatar: "https://placehold.co/40x40?text=ME"
281
- },
282
- content: text,
283
- like_count: 0,
284
- liked: false,
285
- created_at: (/* @__PURE__ */ new Date()).toISOString()
286
- });
429
+ let lo = 0, hi = fullText.length;
430
+ while (lo < hi) {
431
+ const mid = Math.floor((lo + hi + 1) / 2);
432
+ clone.textContent = fullText.slice(0, mid) + "...\u0E14\u0E39\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E40\u0E15\u0E34\u0E21";
433
+ if (clone.scrollHeight <= maxH + 2) lo = mid;
434
+ else hi = mid - 1;
435
+ }
436
+ clone.remove();
437
+ truncatedTexts.value[id] = fullText.slice(0, lo);
438
+ });
439
+ };
440
+ const toggleContentExpand = (id) => {
441
+ if (expandedContentIds.value.includes(id)) {
442
+ expandedContentIds.value = expandedContentIds.value.filter((i) => i !== id);
443
+ } else {
444
+ expandedContentIds.value.push(id);
287
445
  }
288
- cancelReply(commentId);
289
- }
290
- function submitDraft() {
291
- const text = draft.value.trim();
292
- if (!text) return;
293
- comments.push({
446
+ };
447
+ const clearMainInput = () => {
448
+ mainCommentInput.value = "";
449
+ if (mainInputRef.value) mainInputRef.value.innerText = "";
450
+ };
451
+ const onCancelComment = () => {
452
+ clearMainInput();
453
+ isShowMainActions.value = false;
454
+ };
455
+ const onSendComment = () => {
456
+ const newComment = {
294
457
  id: Date.now().toString(),
295
- user: {
296
- id: "current_user",
297
- name: "Me",
298
- avatar: "https://placehold.co/40x40?text=ME"
299
- },
300
- content: text,
301
- like_count: 0,
302
- liked: false,
458
+ user: currentUser,
459
+ content: mainCommentInput.value,
303
460
  created_at: (/* @__PURE__ */ new Date()).toISOString(),
304
- replies: []
461
+ like_count: 0,
462
+ is_like: false,
463
+ reply_count: 0,
464
+ reply: []
465
+ };
466
+ comment.value.unshift(newComment);
467
+ clearMainInput();
468
+ isShowMainActions.value = false;
469
+ };
470
+ const setReplyInputRef = (el, id) => {
471
+ if (el) replyInputRefs.value[id] = el;
472
+ else delete replyInputRefs.value[id];
473
+ };
474
+ const onReplyComment = (id, user) => {
475
+ replyingToId.value = id;
476
+ replyToUser.value = user;
477
+ replyTextMap.value[id] = "";
478
+ nextTick(() => {
479
+ const el = replyInputRefs.value[id];
480
+ if (!el) return;
481
+ el.innerHTML = "";
482
+ if (user.id !== currentUser.id) {
483
+ const chip = document.createElement("span");
484
+ chip.dataset.type = "mention";
485
+ chip.contentEditable = "false";
486
+ chip.className = "inline-flex items-center text-primary font-body-large-prominent select-none mr-1";
487
+ chip.textContent = user.name;
488
+ const space = document.createTextNode("\xA0");
489
+ el.appendChild(chip);
490
+ el.appendChild(space);
491
+ const range = document.createRange();
492
+ const sel = window.getSelection();
493
+ range.setStartAfter(space);
494
+ range.collapse(true);
495
+ sel?.removeAllRanges();
496
+ sel?.addRange(range);
497
+ }
498
+ el.focus();
305
499
  });
306
- resetDraft();
307
- }
500
+ };
501
+ const onReplyInput = (event, id) => {
502
+ const el = event.target;
503
+ const chipExists = !!el.querySelector('[data-type="mention"]');
504
+ if (!chipExists) replyToUser.value = null;
505
+ let text = "";
506
+ el.childNodes.forEach((node) => {
507
+ if (node.dataset?.type === "mention") return;
508
+ text += node.textContent;
509
+ });
510
+ replyTextMap.value[id] = text.replace(/^\u00A0/, "").trim();
511
+ };
512
+ const onCancelReplyComment = () => {
513
+ const id = replyingToId.value;
514
+ if (id && replyInputRefs.value[id]) {
515
+ replyInputRefs.value[id].innerHTML = "";
516
+ delete replyTextMap.value[id];
517
+ }
518
+ replyingToId.value = null;
519
+ replyToUser.value = null;
520
+ };
521
+ const onSendReplyComment = (comment2) => {
522
+ const id = replyingToId.value;
523
+ const newReply = {
524
+ id: Date.now().toString(),
525
+ user: currentUser,
526
+ reply_to: replyToUser.value || void 0,
527
+ content: replyTextMap.value[id] ?? "",
528
+ created_at: (/* @__PURE__ */ new Date()).toISOString(),
529
+ like_count: 0,
530
+ is_like: false
531
+ };
532
+ comment2.reply.push(newReply);
533
+ comment2.reply_count++;
534
+ if (replyInputRefs.value[id]) replyInputRefs.value[id].innerHTML = "";
535
+ delete replyTextMap.value[id];
536
+ replyingToId.value = null;
537
+ replyToUser.value = null;
538
+ };
539
+ const onToggleLikeComment = (comment2) => {
540
+ comment2.is_like = !comment2.is_like;
541
+ comment2.like_count += comment2.is_like ? 1 : -1;
542
+ };
543
+ const onToggleLikeReplyComment = (reply) => {
544
+ reply.is_like = !reply.is_like;
545
+ reply.like_count += reply.is_like ? 1 : -1;
546
+ };
547
+ const onViewProfileComment = (path_name) => {
548
+ router.push(`/${path_name}`);
549
+ };
550
+ onMounted(async () => {
551
+ });
308
552
  </script>
package/dist/runtime/components/comment.vue.d.ts CHANGED
@@ -1,6 +1,13 @@
1
- import type { CommentProps } from "@/types/components/comment";
2
- declare const __VLS_export: import("vue").DefineComponent<CommentProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<CommentProps> & Readonly<{}>, {
3
- item: import("@/types/components/comment").Comment[];
4
- }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
1
+ interface User {
2
+ id: string;
3
+ name: string;
4
+ avatar: string;
5
+ path_name: string;
6
+ }
7
+ type __VLS_Props = {
8
+ blogId: string;
9
+ currentUser: User;
10
+ };
11
+ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
5
12
  declare const _default: typeof __VLS_export;
6
13
  export default _default;
package/dist/runtime/components/input/input-radio.d.vue.ts CHANGED
@@ -32,8 +32,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
32
32
  size: number | string;
33
33
  disabled: boolean;
34
34
  items: import("@/types/components/input/input-radio").InputRadioItem[] | string[] | number[];
35
- item: string | number;
36
35
  name: string;
36
+ item: string | number;
37
37
  columnGap: number | string;
38
38
  disabledErrorMessage: boolean;
39
39
  layout: "vertical" | "horizontal";
package/dist/runtime/components/input/input-radio.vue.d.ts CHANGED
@@ -32,8 +32,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
32
32
  size: number | string;
33
33
  disabled: boolean;
34
34
  items: import("@/types/components/input/input-radio").InputRadioItem[] | string[] | number[];
35
- item: string | number;
36
35
  name: string;
36
+ item: string | number;
37
37
  columnGap: number | string;
38
38
  disabledErrorMessage: boolean;
39
39
  layout: "vertical" | "horizontal";
package/dist/runtime/components/ui/native-select/NativeSelectOptGroup.d.vue.ts CHANGED
@@ -15,7 +15,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
15
15
  draggable?: (boolean | "true" | "false") | undefined;
16
16
  enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
17
17
  enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
18
- hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
18
+ hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
19
19
  id?: string | undefined | undefined;
20
20
  inert?: (boolean | "true" | "false") | undefined;
21
21
  lang?: string | undefined | undefined;
@@ -59,7 +59,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
59
59
  'aria-colindex'?: (string | number) | undefined;
60
60
  'aria-colspan'?: (string | number) | undefined;
61
61
  'aria-controls'?: string | undefined | undefined;
62
- 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
62
+ 'aria-current'?: "time" | "date" | (boolean | "true" | "false") | "page" | "step" | "location" | undefined;
63
63
  'aria-describedby'?: string | undefined | undefined;
64
64
  'aria-details'?: string | undefined | undefined;
65
65
  'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -209,7 +209,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
209
209
  draggable?: (boolean | "true" | "false") | undefined;
210
210
  enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
211
211
  enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
212
- hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
212
+ hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
213
213
  id?: string | undefined | undefined;
214
214
  inert?: (boolean | "true" | "false") | undefined;
215
215
  lang?: string | undefined | undefined;
@@ -253,7 +253,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
253
253
  'aria-colindex'?: (string | number) | undefined;
254
254
  'aria-colspan'?: (string | number) | undefined;
255
255
  'aria-controls'?: string | undefined | undefined;
256
- 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
256
+ 'aria-current'?: "time" | "date" | (boolean | "true" | "false") | "page" | "step" | "location" | undefined;
257
257
  'aria-describedby'?: string | undefined | undefined;
258
258
  'aria-details'?: string | undefined | undefined;
259
259
  'aria-disabled'?: (boolean | "true" | "false") | undefined;
package/dist/runtime/components/ui/native-select/NativeSelectOptGroup.vue.d.ts CHANGED
@@ -15,7 +15,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
15
15
  draggable?: (boolean | "true" | "false") | undefined;
16
16
  enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
17
17
  enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
18
- hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
18
+ hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
19
19
  id?: string | undefined | undefined;
20
20
  inert?: (boolean | "true" | "false") | undefined;
21
21
  lang?: string | undefined | undefined;
@@ -59,7 +59,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
59
59
  'aria-colindex'?: (string | number) | undefined;
60
60
  'aria-colspan'?: (string | number) | undefined;
61
61
  'aria-controls'?: string | undefined | undefined;
62
- 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
62
+ 'aria-current'?: "time" | "date" | (boolean | "true" | "false") | "page" | "step" | "location" | undefined;
63
63
  'aria-describedby'?: string | undefined | undefined;
64
64
  'aria-details'?: string | undefined | undefined;
65
65
  'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -209,7 +209,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
209
209
  draggable?: (boolean | "true" | "false") | undefined;
210
210
  enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
211
211
  enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
212
- hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
212
+ hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
213
213
  id?: string | undefined | undefined;
214
214
  inert?: (boolean | "true" | "false") | undefined;
215
215
  lang?: string | undefined | undefined;
@@ -253,7 +253,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
253
253
  'aria-colindex'?: (string | number) | undefined;
254
254
  'aria-colspan'?: (string | number) | undefined;
255
255
  'aria-controls'?: string | undefined | undefined;
256
- 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
256
+ 'aria-current'?: "time" | "date" | (boolean | "true" | "false") | "page" | "step" | "location" | undefined;
257
257
  'aria-describedby'?: string | undefined | undefined;
258
258
  'aria-details'?: string | undefined | undefined;
259
259
  'aria-disabled'?: (boolean | "true" | "false") | undefined;
package/dist/runtime/components/ui/native-select/NativeSelectOption.d.vue.ts CHANGED
@@ -17,7 +17,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
17
17
  draggable?: (boolean | "true" | "false") | undefined;
18
18
  enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
19
19
  enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
20
- hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
20
+ hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
21
21
  id?: string | undefined | undefined;
22
22
  inert?: (boolean | "true" | "false") | undefined;
23
23
  lang?: string | undefined | undefined;
@@ -61,7 +61,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
61
61
  'aria-colindex'?: (string | number) | undefined;
62
62
  'aria-colspan'?: (string | number) | undefined;
63
63
  'aria-controls'?: string | undefined | undefined;
64
- 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
64
+ 'aria-current'?: "time" | "date" | (boolean | "true" | "false") | "page" | "step" | "location" | undefined;
65
65
  'aria-describedby'?: string | undefined | undefined;
66
66
  'aria-details'?: string | undefined | undefined;
67
67
  'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -213,7 +213,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
213
213
  draggable?: (boolean | "true" | "false") | undefined;
214
214
  enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
215
215
  enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
216
- hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
216
+ hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
217
217
  id?: string | undefined | undefined;
218
218
  inert?: (boolean | "true" | "false") | undefined;
219
219
  lang?: string | undefined | undefined;
@@ -257,7 +257,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
257
257
  'aria-colindex'?: (string | number) | undefined;
258
258
  'aria-colspan'?: (string | number) | undefined;
259
259
  'aria-controls'?: string | undefined | undefined;
260
- 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
260
+ 'aria-current'?: "time" | "date" | (boolean | "true" | "false") | "page" | "step" | "location" | undefined;
261
261
  'aria-describedby'?: string | undefined | undefined;
262
262
  'aria-details'?: string | undefined | undefined;
263
263
  'aria-disabled'?: (boolean | "true" | "false") | undefined;
package/dist/runtime/components/ui/native-select/NativeSelectOption.vue.d.ts CHANGED
@@ -17,7 +17,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
17
17
  draggable?: (boolean | "true" | "false") | undefined;
18
18
  enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
19
19
  enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
20
- hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
20
+ hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
21
21
  id?: string | undefined | undefined;
22
22
  inert?: (boolean | "true" | "false") | undefined;
23
23
  lang?: string | undefined | undefined;
@@ -61,7 +61,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
61
61
  'aria-colindex'?: (string | number) | undefined;
62
62
  'aria-colspan'?: (string | number) | undefined;
63
63
  'aria-controls'?: string | undefined | undefined;
64
- 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
64
+ 'aria-current'?: "time" | "date" | (boolean | "true" | "false") | "page" | "step" | "location" | undefined;
65
65
  'aria-describedby'?: string | undefined | undefined;
66
66
  'aria-details'?: string | undefined | undefined;
67
67
  'aria-disabled'?: (boolean | "true" | "false") | undefined;
@@ -213,7 +213,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
213
213
  draggable?: (boolean | "true" | "false") | undefined;
214
214
  enterkeyhint?: "enter" | "done" | "go" | "next" | "previous" | "search" | "send" | undefined | undefined;
215
215
  enterKeyHint?: "search" | "done" | "next" | "enter" | "go" | "previous" | "send" | undefined;
216
- hidden?: "" | "hidden" | (boolean | "true" | "false") | "until-found" | undefined;
216
+ hidden?: "" | (boolean | "true" | "false") | "hidden" | "until-found" | undefined;
217
217
  id?: string | undefined | undefined;
218
218
  inert?: (boolean | "true" | "false") | undefined;
219
219
  lang?: string | undefined | undefined;
@@ -257,7 +257,7 @@ declare const __VLS_base: import("vue").DefineComponent<{
257
257
  'aria-colindex'?: (string | number) | undefined;
258
258
  'aria-colspan'?: (string | number) | undefined;
259
259
  'aria-controls'?: string | undefined | undefined;
260
- 'aria-current'?: "time" | "page" | (boolean | "true" | "false") | "date" | "step" | "location" | undefined;
260
+ 'aria-current'?: "time" | "date" | (boolean | "true" | "false") | "page" | "step" | "location" | undefined;
261
261
  'aria-describedby'?: string | undefined | undefined;
262
262
  'aria-details'?: string | undefined | undefined;
263
263
  'aria-disabled'?: (boolean | "true" | "false") | undefined;
package/dist/runtime/components/ui/popover/PopoverContent.d.vue.ts CHANGED
@@ -22,7 +22,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
22
22
  onOpenAutoFocus?: ((event: Event) => any) | undefined;
23
23
  onCloseAutoFocus?: ((event: Event) => any) | undefined;
24
24
  }>, {
25
- align: "start" | "center" | "end";
25
+ align: "center" | "start" | "end";
26
26
  sideOffset: number;
27
27
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
28
28
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
package/dist/runtime/components/ui/popover/PopoverContent.vue.d.ts CHANGED
@@ -22,7 +22,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
22
22
  onOpenAutoFocus?: ((event: Event) => any) | undefined;
23
23
  onCloseAutoFocus?: ((event: Event) => any) | undefined;
24
24
  }>, {
25
- align: "start" | "center" | "end";
25
+ align: "center" | "start" | "end";
26
26
  sideOffset: number;
27
27
  }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
28
28
  declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "pukaad-ui-lib",
3
- "version": "1.192.0",
3
+ "version": "1.193.0",
4
4
  "description": "pukaad-ui for MeMSG",
5
5
  "repository": {
6
6
  "type": "git",