pukaad-ui-lib 1.338.0 → 1.339.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 +1 -1
- package/dist/runtime/components/button.vue +10 -10
- package/dist/runtime/components/card/card-reaction.d.vue.ts +1 -1
- package/dist/runtime/components/card/card-reaction.vue.d.ts +1 -1
- package/dist/runtime/components/carousel.vue +31 -31
- package/dist/runtime/components/display/display-image-place.d.vue.ts +1 -1
- package/dist/runtime/components/display/display-image-place.vue +98 -98
- package/dist/runtime/components/display/display-image-place.vue.d.ts +1 -1
- package/dist/runtime/components/drawer/drawer-suggest-place/drawer-suggest-place.d.vue.ts +2 -2
- package/dist/runtime/components/drawer/drawer-suggest-place/drawer-suggest-place.vue +1 -1
- package/dist/runtime/components/drawer/drawer-suggest-place/drawer-suggest-place.vue.d.ts +2 -2
- package/dist/runtime/components/input/input-autocomplete.d.vue.ts +1 -1
- package/dist/runtime/components/input/input-autocomplete.vue.d.ts +1 -1
- package/dist/runtime/components/input/input-combobox.d.vue.ts +1 -1
- package/dist/runtime/components/input/input-combobox.vue.d.ts +1 -1
- package/dist/runtime/components/input/input-localized-name.d.vue.ts +1 -1
- package/dist/runtime/components/input/input-localized-name.vue.d.ts +1 -1
- package/dist/runtime/components/input/input-rating.vue +6 -6
- package/dist/runtime/components/input/input-suggest.d.vue.ts +1 -1
- package/dist/runtime/components/input/input-suggest.vue.d.ts +1 -1
- package/dist/runtime/components/input/input-textarea.d.vue.ts +1 -1
- package/dist/runtime/components/input/input-textarea.vue.d.ts +1 -1
- package/dist/runtime/components/input/input-typed-field.d.vue.ts +1 -1
- package/dist/runtime/components/input/input-typed-field.vue.d.ts +1 -1
- package/dist/runtime/components/modal/modal-media-view.vue +136 -136
- package/dist/runtime/components/ui/card/CardDescription.vue +1 -1
- package/package.json +1 -1
- /package/dist/runtime/assets/svg/socials/{WhatsApp.svg → Whatsapp.svg} +0 -0
package/dist/module.json
CHANGED
|
@@ -4,16 +4,16 @@
|
|
|
4
4
|
props.variant === 'text' || props.variant === 'link' ? '!p-0 !h-auto' : '',
|
|
5
5
|
props.circle && 'rounded-full aspect-square',
|
|
6
6
|
props.class
|
|
7
|
-
]" :variant="props.variant" :color="props.color" :size="resolvedSize" :type="props.type"
|
|
8
|
-
:disabled="props.loading || props.disabled">
|
|
9
|
-
<span class="inline-grid place-items-center">
|
|
10
|
-
<span class="inline-flex items-center justify-center gap-[8px] [grid-area:1/1]"
|
|
11
|
-
:class="{ invisible: props.loading }">
|
|
12
|
-
<slot />
|
|
13
|
-
</span>
|
|
14
|
-
<ShadSpinner v-if="props.loading" class="[grid-area:1/1]" />
|
|
15
|
-
</span>
|
|
16
|
-
</ShadButton>
|
|
7
|
+
]" :variant="props.variant" :color="props.color" :size="resolvedSize" :type="props.type"
|
|
8
|
+
:disabled="props.loading || props.disabled">
|
|
9
|
+
<span class="inline-grid place-items-center">
|
|
10
|
+
<span class="inline-flex items-center justify-center gap-[8px] [grid-area:1/1]"
|
|
11
|
+
:class="{ invisible: props.loading }">
|
|
12
|
+
<slot />
|
|
13
|
+
</span>
|
|
14
|
+
<ShadSpinner v-if="props.loading" class="[grid-area:1/1]" />
|
|
15
|
+
</span>
|
|
16
|
+
</ShadButton>
|
|
17
17
|
</template>
|
|
18
18
|
|
|
19
19
|
<script setup>
|
|
@@ -24,8 +24,8 @@ type __VLS_Props = {
|
|
|
24
24
|
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
25
25
|
disabled: boolean;
|
|
26
26
|
id: string;
|
|
27
|
-
disabledPadding: boolean;
|
|
28
27
|
state: string;
|
|
28
|
+
disabledPadding: boolean;
|
|
29
29
|
itemCount: Count;
|
|
30
30
|
itemActive: Reacted;
|
|
31
31
|
padding: string | number;
|
|
@@ -24,8 +24,8 @@ type __VLS_Props = {
|
|
|
24
24
|
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
25
25
|
disabled: boolean;
|
|
26
26
|
id: string;
|
|
27
|
-
disabledPadding: boolean;
|
|
28
27
|
state: string;
|
|
28
|
+
disabledPadding: boolean;
|
|
29
29
|
itemCount: Count;
|
|
30
30
|
itemActive: Reacted;
|
|
31
31
|
padding: string | number;
|
|
@@ -1,35 +1,35 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="relative w-full h-full">
|
|
3
|
-
<div class="absolute top-[20px] left-1/2 transform -translate-x-1/2 z-[50]">
|
|
4
|
-
<div class="rounded-full py-[6px] px-[16px] bg-black/60 flex items-center justify-center">
|
|
5
|
-
<span class="text-white text-sm font-medium tracking-widest">
|
|
6
|
-
{{ currentIndex + 1 }} / {{ props.items.length }}
|
|
7
|
-
</span>
|
|
8
|
-
</div>
|
|
9
|
-
</div>
|
|
10
|
-
|
|
11
|
-
<ShadCarousel
|
|
12
|
-
:opts="{ startIndex: props.selectIndex }"
|
|
13
|
-
class="carousel-media w-full h-full"
|
|
14
|
-
@init-api="onInitApi"
|
|
15
|
-
>
|
|
16
|
-
<ShadCarouselContent class="h-full">
|
|
17
|
-
<ShadCarouselItem
|
|
18
|
-
v-for="(item, i) in props.items"
|
|
19
|
-
:key="i"
|
|
20
|
-
class="h-full flex items-center justify-center"
|
|
21
|
-
>
|
|
22
|
-
<img
|
|
23
|
-
:src="item.url"
|
|
24
|
-
class="w-full h-full object-contain select-none"
|
|
25
|
-
draggable="false"
|
|
26
|
-
/>
|
|
27
|
-
</ShadCarouselItem>
|
|
28
|
-
</ShadCarouselContent>
|
|
29
|
-
<ShadCarouselPrevious v-if="props.items.length > 1" class="!left-[12px]" />
|
|
30
|
-
<ShadCarouselNext v-if="props.items.length > 1" class="!right-[12px]" />
|
|
31
|
-
</ShadCarousel>
|
|
32
|
-
</div>
|
|
2
|
+
<div class="relative w-full h-full">
|
|
3
|
+
<div class="absolute top-[20px] left-1/2 transform -translate-x-1/2 z-[50]">
|
|
4
|
+
<div class="rounded-full py-[6px] px-[16px] bg-black/60 flex items-center justify-center">
|
|
5
|
+
<span class="text-white text-sm font-medium tracking-widest">
|
|
6
|
+
{{ currentIndex + 1 }} / {{ props.items.length }}
|
|
7
|
+
</span>
|
|
8
|
+
</div>
|
|
9
|
+
</div>
|
|
10
|
+
|
|
11
|
+
<ShadCarousel
|
|
12
|
+
:opts="{ startIndex: props.selectIndex }"
|
|
13
|
+
class="carousel-media w-full h-full"
|
|
14
|
+
@init-api="onInitApi"
|
|
15
|
+
>
|
|
16
|
+
<ShadCarouselContent class="h-full">
|
|
17
|
+
<ShadCarouselItem
|
|
18
|
+
v-for="(item, i) in props.items"
|
|
19
|
+
:key="i"
|
|
20
|
+
class="h-full flex items-center justify-center"
|
|
21
|
+
>
|
|
22
|
+
<img
|
|
23
|
+
:src="item.url"
|
|
24
|
+
class="w-full h-full object-contain select-none"
|
|
25
|
+
draggable="false"
|
|
26
|
+
/>
|
|
27
|
+
</ShadCarouselItem>
|
|
28
|
+
</ShadCarouselContent>
|
|
29
|
+
<ShadCarouselPrevious v-if="props.items.length > 1" class="!left-[12px]" />
|
|
30
|
+
<ShadCarouselNext v-if="props.items.length > 1" class="!right-[12px]" />
|
|
31
|
+
</ShadCarousel>
|
|
32
|
+
</div>
|
|
33
33
|
</template>
|
|
34
34
|
|
|
35
35
|
<script setup>
|
|
@@ -12,9 +12,9 @@ type __VLS_Props = {
|
|
|
12
12
|
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
13
13
|
title: string;
|
|
14
14
|
variant: "featured" | "album";
|
|
15
|
-
state: "personal" | "office" | "business";
|
|
16
15
|
photos: MediaItem[];
|
|
17
16
|
videos: MediaItem[];
|
|
17
|
+
state: "personal" | "office" | "business";
|
|
18
18
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
19
19
|
declare const _default: typeof __VLS_export;
|
|
20
20
|
export default _default;
|
|
@@ -1,102 +1,102 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<!-- Personal state → Featured layout — 1 รูป: w-full -->
|
|
3
|
-
<div v-if="layoutMode === 'featured' && photos.length === 1" class="h-[360px]">
|
|
4
|
-
<div class="w-full h-full rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 0)">
|
|
5
|
-
<Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
6
|
-
</div>
|
|
7
|
-
</div>
|
|
8
|
-
|
|
9
|
-
<!-- Personal state → Featured layout — 2 รูป: แบ่งครึ่ง w-full -->
|
|
10
|
-
<div v-else-if="layoutMode === 'featured' && photos.length === 2" class="flex gap-[8px] h-[360px]">
|
|
11
|
-
<div class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 0)">
|
|
12
|
-
<Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
13
|
-
</div>
|
|
14
|
-
<div class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 1)">
|
|
15
|
-
<Image :src="photos[1].url" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
16
|
-
</div>
|
|
17
|
-
</div>
|
|
18
|
-
|
|
19
|
-
<!-- Personal state → Featured layout — 3+ รูป: layout เดิม -->
|
|
20
|
-
<div v-else-if="layoutMode === 'featured'" class="flex gap-[8px] h-[360px]">
|
|
21
|
-
<div v-if="photos[0]" class="w-[620px] shrink-0 rounded-[8px] overflow-hidden cursor-pointer"
|
|
22
|
-
@click="openLightbox('photo', 0)">
|
|
23
|
-
<Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
24
|
-
</div>
|
|
25
|
-
|
|
26
|
-
<div v-if="photos[1]" class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 1)">
|
|
27
|
-
<Image :src="photos[1].url" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
28
|
-
</div>
|
|
29
|
-
|
|
30
|
-
<div class="w-[306px] shrink-0 flex flex-col gap-[8px]">
|
|
31
|
-
<div v-if="photos[2]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
|
|
32
|
-
@click="openLightbox('photo', 2)">
|
|
33
|
-
<Image :src="photos[2].url" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
34
|
-
<div v-if="featuredPhoto2Overflow > 0"
|
|
35
|
-
class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
|
|
36
|
-
<Icon name="fa6-solid:image" :size="42" />
|
|
37
|
-
<span class="font-body-large">รูปภาพ ({{ convertNumber(featuredPhoto2Overflow) }})</span>
|
|
38
|
-
</div>
|
|
39
|
-
</div>
|
|
40
|
-
|
|
41
|
-
<div v-if="videos[0]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
|
|
42
|
-
@click="openLightbox('video', 0)">
|
|
43
|
-
<Image :src="videos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
44
|
-
<div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
|
|
45
|
-
<Icon name="fa6-solid:video" :size="42" />
|
|
46
|
-
<span class="font-body-large">วิดีโอ ({{ videos.length }})</span>
|
|
47
|
-
</div>
|
|
48
|
-
</div>
|
|
49
|
-
<div v-else-if="photos[3]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
|
|
50
|
-
@click="openLightbox('photo', 3)">
|
|
51
|
-
<Image :src="photos[3].url" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
52
|
-
<div v-if="featuredPhoto3Overflow > 0"
|
|
53
|
-
class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
|
|
54
|
-
<Icon name="fa6-solid:image" :size="42" />
|
|
55
|
-
<span class="font-body-large">รูปภาพ ({{ convertNumber(featuredPhoto3Overflow) }})</span>
|
|
56
|
-
</div>
|
|
57
|
-
</div>
|
|
58
|
-
</div>
|
|
59
|
-
</div>
|
|
60
|
-
|
|
61
|
-
<!-- Office / Business state → Album layout -->
|
|
62
|
-
<div v-else-if="layoutMode === 'album'" class="grid grid-cols-5 gap-[10px]">
|
|
63
|
-
<!-- Row 1: photos[0..3] -->
|
|
64
|
-
<div v-for="(photo, i) in galleryRow1" :key="`g1-${i}`"
|
|
65
|
-
class="w-[132px] h-[132px] rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', i)">
|
|
66
|
-
<Image :src="photo.url" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
67
|
-
</div>
|
|
68
|
-
|
|
69
|
-
<!-- Row 1 col 5: image count overlay -->
|
|
70
|
-
<div v-show="galleryCountPhoto != null"
|
|
71
|
-
class="w-[132px] h-[132px] relative rounded-[8px] overflow-hidden cursor-pointer"
|
|
72
|
-
@click="openLightbox('photo', 8)">
|
|
73
|
-
<Image v-if="galleryCountPhoto" :src="galleryCountPhoto.url" class="w-full h-full object-cover" width="auto"
|
|
74
|
-
height="auto" />
|
|
75
|
-
<div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
|
|
76
|
-
<Icon name="fa6-solid:image" :size="35" />
|
|
77
|
-
<span class="font-label-medium">รูปภาพ ({{ convertNumber(photos.length - 8) }})</span>
|
|
78
|
-
</div>
|
|
79
|
-
</div>
|
|
80
|
-
|
|
81
|
-
<!-- Row 2: photos[4..7] -->
|
|
82
|
-
<div v-for="(photo, i) in galleryRow2" :key="`g2-${i}`"
|
|
83
|
-
class="w-[132px] h-[132px] rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 4 + i)">
|
|
84
|
-
<Image :src="photo.url" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
85
|
-
</div>
|
|
86
|
-
|
|
87
|
-
<!-- Row 2 col 5: video overlay -->
|
|
88
|
-
<div v-if="videos[0]" class="w-[132px] h-[132px] relative rounded-[8px] overflow-hidden cursor-pointer"
|
|
89
|
-
@click="openLightbox('video', 0)">
|
|
90
|
-
<Image :src="videos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
91
|
-
<div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
|
|
92
|
-
<Icon name="fa6-solid:video" :size="35" />
|
|
93
|
-
<span class="font-label-medium">วิดีโอ ({{ videos.length }})</span>
|
|
94
|
-
</div>
|
|
95
|
-
</div>
|
|
96
|
-
</div>
|
|
97
|
-
|
|
98
|
-
<!-- Lightbox modal -->
|
|
99
|
-
<ModalMediaView v-model="isMediaOpen" :items="mediaItems" :title="props.title" :start-index="mediaStartIndex" />
|
|
2
|
+
<!-- Personal state → Featured layout — 1 รูป: w-full -->
|
|
3
|
+
<div v-if="layoutMode === 'featured' && photos.length === 1" class="h-[360px]">
|
|
4
|
+
<div class="w-full h-full rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 0)">
|
|
5
|
+
<Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
6
|
+
</div>
|
|
7
|
+
</div>
|
|
8
|
+
|
|
9
|
+
<!-- Personal state → Featured layout — 2 รูป: แบ่งครึ่ง w-full -->
|
|
10
|
+
<div v-else-if="layoutMode === 'featured' && photos.length === 2" class="flex gap-[8px] h-[360px]">
|
|
11
|
+
<div class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 0)">
|
|
12
|
+
<Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
13
|
+
</div>
|
|
14
|
+
<div class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 1)">
|
|
15
|
+
<Image :src="photos[1].url" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
16
|
+
</div>
|
|
17
|
+
</div>
|
|
18
|
+
|
|
19
|
+
<!-- Personal state → Featured layout — 3+ รูป: layout เดิม -->
|
|
20
|
+
<div v-else-if="layoutMode === 'featured'" class="flex gap-[8px] h-[360px]">
|
|
21
|
+
<div v-if="photos[0]" class="w-[620px] shrink-0 rounded-[8px] overflow-hidden cursor-pointer"
|
|
22
|
+
@click="openLightbox('photo', 0)">
|
|
23
|
+
<Image :src="photos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
<div v-if="photos[1]" class="flex-1 rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 1)">
|
|
27
|
+
<Image :src="photos[1].url" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
28
|
+
</div>
|
|
29
|
+
|
|
30
|
+
<div class="w-[306px] shrink-0 flex flex-col gap-[8px]">
|
|
31
|
+
<div v-if="photos[2]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
|
|
32
|
+
@click="openLightbox('photo', 2)">
|
|
33
|
+
<Image :src="photos[2].url" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
34
|
+
<div v-if="featuredPhoto2Overflow > 0"
|
|
35
|
+
class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
|
|
36
|
+
<Icon name="fa6-solid:image" :size="42" />
|
|
37
|
+
<span class="font-body-large">รูปภาพ ({{ convertNumber(featuredPhoto2Overflow) }})</span>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<div v-if="videos[0]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
|
|
42
|
+
@click="openLightbox('video', 0)">
|
|
43
|
+
<Image :src="videos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
44
|
+
<div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
|
|
45
|
+
<Icon name="fa6-solid:video" :size="42" />
|
|
46
|
+
<span class="font-body-large">วิดีโอ ({{ videos.length }})</span>
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
<div v-else-if="photos[3]" class="flex-1 min-h-0 relative rounded-[8px] overflow-hidden cursor-pointer"
|
|
50
|
+
@click="openLightbox('photo', 3)">
|
|
51
|
+
<Image :src="photos[3].url" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
52
|
+
<div v-if="featuredPhoto3Overflow > 0"
|
|
53
|
+
class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
|
|
54
|
+
<Icon name="fa6-solid:image" :size="42" />
|
|
55
|
+
<span class="font-body-large">รูปภาพ ({{ convertNumber(featuredPhoto3Overflow) }})</span>
|
|
56
|
+
</div>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<!-- Office / Business state → Album layout -->
|
|
62
|
+
<div v-else-if="layoutMode === 'album'" class="grid grid-cols-5 gap-[10px]">
|
|
63
|
+
<!-- Row 1: photos[0..3] -->
|
|
64
|
+
<div v-for="(photo, i) in galleryRow1" :key="`g1-${i}`"
|
|
65
|
+
class="w-[132px] h-[132px] rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', i)">
|
|
66
|
+
<Image :src="photo.url" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
67
|
+
</div>
|
|
68
|
+
|
|
69
|
+
<!-- Row 1 col 5: image count overlay -->
|
|
70
|
+
<div v-show="galleryCountPhoto != null"
|
|
71
|
+
class="w-[132px] h-[132px] relative rounded-[8px] overflow-hidden cursor-pointer"
|
|
72
|
+
@click="openLightbox('photo', 8)">
|
|
73
|
+
<Image v-if="galleryCountPhoto" :src="galleryCountPhoto.url" class="w-full h-full object-cover" width="auto"
|
|
74
|
+
height="auto" />
|
|
75
|
+
<div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
|
|
76
|
+
<Icon name="fa6-solid:image" :size="35" />
|
|
77
|
+
<span class="font-label-medium">รูปภาพ ({{ convertNumber(photos.length - 8) }})</span>
|
|
78
|
+
</div>
|
|
79
|
+
</div>
|
|
80
|
+
|
|
81
|
+
<!-- Row 2: photos[4..7] -->
|
|
82
|
+
<div v-for="(photo, i) in galleryRow2" :key="`g2-${i}`"
|
|
83
|
+
class="w-[132px] h-[132px] rounded-[8px] overflow-hidden cursor-pointer" @click="openLightbox('photo', 4 + i)">
|
|
84
|
+
<Image :src="photo.url" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
85
|
+
</div>
|
|
86
|
+
|
|
87
|
+
<!-- Row 2 col 5: video overlay -->
|
|
88
|
+
<div v-if="videos[0]" class="w-[132px] h-[132px] relative rounded-[8px] overflow-hidden cursor-pointer"
|
|
89
|
+
@click="openLightbox('video', 0)">
|
|
90
|
+
<Image :src="videos[0].url" class="w-full h-full object-cover" width="auto" height="auto" />
|
|
91
|
+
<div class="absolute inset-0 bg-black/50 flex flex-col items-center justify-center text-white gap-[6px]">
|
|
92
|
+
<Icon name="fa6-solid:video" :size="35" />
|
|
93
|
+
<span class="font-label-medium">วิดีโอ ({{ videos.length }})</span>
|
|
94
|
+
</div>
|
|
95
|
+
</div>
|
|
96
|
+
</div>
|
|
97
|
+
|
|
98
|
+
<!-- Lightbox modal -->
|
|
99
|
+
<ModalMediaView v-model="isMediaOpen" :items="mediaItems" :title="props.title" :start-index="mediaStartIndex" />
|
|
100
100
|
</template>
|
|
101
101
|
|
|
102
102
|
<script setup>
|
|
@@ -12,9 +12,9 @@ type __VLS_Props = {
|
|
|
12
12
|
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
13
13
|
title: string;
|
|
14
14
|
variant: "featured" | "album";
|
|
15
|
-
state: "personal" | "office" | "business";
|
|
16
15
|
photos: MediaItem[];
|
|
17
16
|
videos: MediaItem[];
|
|
17
|
+
state: "personal" | "office" | "business";
|
|
18
18
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
19
19
|
declare const _default: typeof __VLS_export;
|
|
20
20
|
export default _default;
|
|
@@ -12,9 +12,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
|
|
|
12
12
|
"update:modelValue": (value: boolean) => any;
|
|
13
13
|
"update:data": (value: SuggestPlaceData) => any;
|
|
14
14
|
} & {
|
|
15
|
-
submit: (data: SuggestPlaceData) => any;
|
|
15
|
+
submit: (data: SuggestPlaceData, record: Record<string, unknown>) => any;
|
|
16
16
|
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
17
|
-
onSubmit?: ((data: SuggestPlaceData) => any) | undefined;
|
|
17
|
+
onSubmit?: ((data: SuggestPlaceData, record: Record<string, unknown>) => any) | undefined;
|
|
18
18
|
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
|
19
19
|
"onUpdate:data"?: ((value: SuggestPlaceData) => any) | undefined;
|
|
20
20
|
}>, {
|
|
@@ -240,7 +240,7 @@ const onSubmit = async () => {
|
|
|
240
240
|
const msg = res?.message;
|
|
241
241
|
const msgText = typeof msg === "object" ? msg?.description ?? msg?.title ?? "\u0E41\u0E19\u0E30\u0E19\u0E33\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08" : msg || "\u0E41\u0E19\u0E30\u0E19\u0E33\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08";
|
|
242
242
|
$toast?.success?.(msgText);
|
|
243
|
-
emit("submit", formData.value);
|
|
243
|
+
emit("submit", formData.value, res.data ?? {});
|
|
244
244
|
isOpen.value = false;
|
|
245
245
|
} catch (e) {
|
|
246
246
|
const apiErr = e;
|
|
@@ -12,9 +12,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
|
|
|
12
12
|
"update:modelValue": (value: boolean) => any;
|
|
13
13
|
"update:data": (value: SuggestPlaceData) => any;
|
|
14
14
|
} & {
|
|
15
|
-
submit: (data: SuggestPlaceData) => any;
|
|
15
|
+
submit: (data: SuggestPlaceData, record: Record<string, unknown>) => any;
|
|
16
16
|
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
17
|
-
onSubmit?: ((data: SuggestPlaceData) => any) | undefined;
|
|
17
|
+
onSubmit?: ((data: SuggestPlaceData, record: Record<string, unknown>) => any) | undefined;
|
|
18
18
|
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
|
19
19
|
"onUpdate:data"?: ((value: SuggestPlaceData) => any) | undefined;
|
|
20
20
|
}>, {
|
|
@@ -48,10 +48,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
48
48
|
id: string;
|
|
49
49
|
name: string;
|
|
50
50
|
required: boolean;
|
|
51
|
+
limit: number;
|
|
51
52
|
options: AutocompleteOption[] | string[] | number[];
|
|
52
53
|
description: string;
|
|
53
54
|
labelKey: string;
|
|
54
|
-
limit: number;
|
|
55
55
|
placeholder: string;
|
|
56
56
|
disabledErrorMessage: boolean;
|
|
57
57
|
disabledBorder: boolean;
|
|
@@ -48,10 +48,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
48
48
|
id: string;
|
|
49
49
|
name: string;
|
|
50
50
|
required: boolean;
|
|
51
|
+
limit: number;
|
|
51
52
|
options: AutocompleteOption[] | string[] | number[];
|
|
52
53
|
description: string;
|
|
53
54
|
labelKey: string;
|
|
54
|
-
limit: number;
|
|
55
55
|
placeholder: string;
|
|
56
56
|
disabledErrorMessage: boolean;
|
|
57
57
|
disabledBorder: boolean;
|
|
@@ -11,8 +11,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
|
|
|
11
11
|
label: string;
|
|
12
12
|
name: string;
|
|
13
13
|
modelValue: LocalizedNameItem[];
|
|
14
|
-
options: InputSelectItem[];
|
|
15
14
|
limit: number;
|
|
15
|
+
options: InputSelectItem[];
|
|
16
16
|
placeholder: string;
|
|
17
17
|
showCounter: boolean;
|
|
18
18
|
addLabel: string;
|
|
@@ -11,8 +11,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
|
|
|
11
11
|
label: string;
|
|
12
12
|
name: string;
|
|
13
13
|
modelValue: LocalizedNameItem[];
|
|
14
|
-
options: InputSelectItem[];
|
|
15
14
|
limit: number;
|
|
15
|
+
options: InputSelectItem[];
|
|
16
16
|
placeholder: string;
|
|
17
17
|
showCounter: boolean;
|
|
18
18
|
addLabel: string;
|
|
@@ -1,10 +1,10 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<!-- v-html เพื่อหลีกเลี่ยง Vue patch SVG attributes เป็น DOM property (read-only getter bug) -->
|
|
3
|
-
<div
|
|
4
|
-
class="inline-flex items-center gap-0"
|
|
5
|
-
v-html="starsHtml"
|
|
6
|
-
@click="handleClick"
|
|
7
|
-
/>
|
|
2
|
+
<!-- v-html เพื่อหลีกเลี่ยง Vue patch SVG attributes เป็น DOM property (read-only getter bug) -->
|
|
3
|
+
<div
|
|
4
|
+
class="inline-flex items-center gap-0"
|
|
5
|
+
v-html="starsHtml"
|
|
6
|
+
@click="handleClick"
|
|
7
|
+
/>
|
|
8
8
|
</template>
|
|
9
9
|
|
|
10
10
|
<script setup>
|
|
@@ -19,9 +19,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
19
19
|
id: string;
|
|
20
20
|
name: string;
|
|
21
21
|
required: boolean;
|
|
22
|
+
limit: number;
|
|
22
23
|
description: string;
|
|
23
24
|
labelKey: string;
|
|
24
|
-
limit: number;
|
|
25
25
|
placeholder: string;
|
|
26
26
|
disabledErrorMessage: boolean;
|
|
27
27
|
disabledBorder: boolean;
|
|
@@ -19,9 +19,9 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
19
19
|
id: string;
|
|
20
20
|
name: string;
|
|
21
21
|
required: boolean;
|
|
22
|
+
limit: number;
|
|
22
23
|
description: string;
|
|
23
24
|
labelKey: string;
|
|
24
|
-
limit: number;
|
|
25
25
|
placeholder: string;
|
|
26
26
|
disabledErrorMessage: boolean;
|
|
27
27
|
disabledBorder: boolean;
|
|
@@ -46,8 +46,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
46
46
|
resize: "none" | "both" | "horizontal" | "vertical";
|
|
47
47
|
fullHeight: boolean;
|
|
48
48
|
fullWidth: boolean;
|
|
49
|
-
rows: number;
|
|
50
49
|
limit: number;
|
|
50
|
+
rows: number;
|
|
51
51
|
disabledErrorMessage: boolean;
|
|
52
52
|
disabledBorder: boolean;
|
|
53
53
|
showCounter: boolean;
|
|
@@ -46,8 +46,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
46
46
|
resize: "none" | "both" | "horizontal" | "vertical";
|
|
47
47
|
fullHeight: boolean;
|
|
48
48
|
fullWidth: boolean;
|
|
49
|
-
rows: number;
|
|
50
49
|
limit: number;
|
|
50
|
+
rows: number;
|
|
51
51
|
disabledErrorMessage: boolean;
|
|
52
52
|
disabledBorder: boolean;
|
|
53
53
|
showCounter: boolean;
|
|
@@ -19,8 +19,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
|
|
|
19
19
|
}>, {
|
|
20
20
|
name: string;
|
|
21
21
|
required: boolean;
|
|
22
|
-
options: import("../../../types/components/input/input-select.js").InputSelectItem[];
|
|
23
22
|
limit: number;
|
|
23
|
+
options: import("../../../types/components/input/input-select.js").InputSelectItem[];
|
|
24
24
|
showCounter: boolean;
|
|
25
25
|
selectClass: import("vue").HTMLAttributes["class"];
|
|
26
26
|
resetOnTypeChange: boolean;
|
|
@@ -19,8 +19,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
|
|
|
19
19
|
}>, {
|
|
20
20
|
name: string;
|
|
21
21
|
required: boolean;
|
|
22
|
-
options: import("../../../types/components/input/input-select.js").InputSelectItem[];
|
|
23
22
|
limit: number;
|
|
23
|
+
options: import("../../../types/components/input/input-select.js").InputSelectItem[];
|
|
24
24
|
showCounter: boolean;
|
|
25
25
|
selectClass: import("vue").HTMLAttributes["class"];
|
|
26
26
|
resetOnTypeChange: boolean;
|
|
@@ -1,140 +1,140 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<Modal v-model="isOpen" class="sm:max-w-[1280px]" disable-padding>
|
|
3
|
-
<template #header>
|
|
4
|
-
<ShadDialogTitle class="p-4">{{ props.title }}</ShadDialogTitle>
|
|
5
|
-
</template>
|
|
6
|
-
<div class="relative h-[824px] bg-black overflow-hidden">
|
|
7
|
-
<Carousel
|
|
8
|
-
:items="props.items"
|
|
9
|
-
:select-index="props.startIndex"
|
|
10
|
-
class="h-full"
|
|
11
|
-
@update:current-index="currentIndex = $event"
|
|
12
|
-
/>
|
|
13
|
-
|
|
14
|
-
<!-- description overlay (แสดงเฉพาะเมื่อ item ปัจจุบันมี description และไม่มี review) -->
|
|
15
|
-
<div
|
|
16
|
-
v-if="!props.review && currentItem?.description"
|
|
17
|
-
class="absolute bottom-0 w-full z-10"
|
|
18
|
-
style="background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);"
|
|
19
|
-
>
|
|
20
|
-
<div class="p-[16px] flex flex-col gap-[4px] text-white font-body-large">
|
|
21
|
-
<div class="font-body-large-prominent">ผู้ดูแลระบบ</div>
|
|
22
|
-
<div>{{ currentItem.description }}</div>
|
|
23
|
-
</div>
|
|
24
|
-
</div>
|
|
25
|
-
|
|
26
|
-
<!-- Review info overlay (แสดงเมื่อมีข้อมูล review) -->
|
|
27
|
-
<div
|
|
28
|
-
v-if="props.review"
|
|
29
|
-
class="absolute bottom-0 w-full z-10"
|
|
30
|
-
style="background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);"
|
|
31
|
-
>
|
|
32
|
-
<div class="flex flex-col w-full">
|
|
33
|
-
<div
|
|
34
|
-
v-if="!showMoreDescription"
|
|
35
|
-
class="flex gap-[16px] p-[16px] w-full text-white"
|
|
36
|
-
>
|
|
37
|
-
<Avatar
|
|
38
|
-
:src="props.review.user?.avatar"
|
|
39
|
-
:alt="props.review.user?.name"
|
|
40
|
-
:size="36"
|
|
41
|
-
class="shrink-0"
|
|
42
|
-
/>
|
|
43
|
-
<div class="flex flex-col gap-[8px] w-full">
|
|
44
|
-
<div class="flex flex-col gap-[8px]">
|
|
45
|
-
<div class="flex justify-between w-full">
|
|
46
|
-
<span class="font-body-large">
|
|
47
|
-
{{ props.review.user?.name }}
|
|
48
|
-
</span>
|
|
49
|
-
<Icon name="lucide:flag" />
|
|
50
|
-
</div>
|
|
51
|
-
<div class="flex flex-col">
|
|
52
|
-
<span class="font-body-small">
|
|
53
|
-
{{ convertNumber(props.review.user?.review_count ?? 0) }}
|
|
54
|
-
รีวิว •
|
|
55
|
-
{{ convertNumber(props.review.user?.like_count ?? 0) }}
|
|
56
|
-
ชื่นชอบรีวิว
|
|
57
|
-
</span>
|
|
58
|
-
<div
|
|
59
|
-
v-if="props.review.review"
|
|
60
|
-
class="flex items-center gap-[8px]"
|
|
61
|
-
>
|
|
62
|
-
<InputRating
|
|
63
|
-
:size="14"
|
|
64
|
-
readonly
|
|
65
|
-
:model-value="props.review.review.rating"
|
|
66
|
-
/>
|
|
67
|
-
<span class="font-body-small opacity-75">
|
|
68
|
-
{{ convertDateTorelativeText(props.review.review.created_at ?? "") }}
|
|
69
|
-
</span>
|
|
70
|
-
</div>
|
|
71
|
-
</div>
|
|
72
|
-
</div>
|
|
73
|
-
<p
|
|
74
|
-
v-if="props.review.review?.description"
|
|
75
|
-
class="font-body-large line-clamp-1 cursor-pointer"
|
|
76
|
-
@click="showMoreDescription = true"
|
|
77
|
-
>
|
|
78
|
-
{{ props.review.review.description }}
|
|
79
|
-
</p>
|
|
80
|
-
</div>
|
|
81
|
-
</div>
|
|
82
|
-
<div
|
|
83
|
-
v-if="showMoreDescription"
|
|
84
|
-
class="flex gap-[16px] bg-white rounded-t-[16px] w-full p-[16px] max-h-[322px]"
|
|
85
|
-
>
|
|
86
|
-
<Avatar
|
|
87
|
-
:src="props.review.user?.avatar"
|
|
88
|
-
:alt="props.review.user?.name"
|
|
89
|
-
:size="36"
|
|
90
|
-
class="shrink-0"
|
|
91
|
-
/>
|
|
92
|
-
<div class="flex flex-col gap-[8px] w-full">
|
|
93
|
-
<div class="flex flex-col gap-[8px]">
|
|
94
|
-
<div class="flex justify-between w-full">
|
|
95
|
-
<span class="font-body-large">
|
|
96
|
-
{{ props.review.user?.name }}
|
|
97
|
-
</span>
|
|
98
|
-
<Icon
|
|
99
|
-
name="lucide:x"
|
|
100
|
-
class="cursor-pointer"
|
|
101
|
-
@click="showMoreDescription = false"
|
|
102
|
-
/>
|
|
103
|
-
</div>
|
|
104
|
-
<div class="flex flex-col">
|
|
105
|
-
<span class="font-body-small">
|
|
106
|
-
{{ convertNumber(props.review.user?.review_count ?? 0) }}
|
|
107
|
-
รีวิว •
|
|
108
|
-
{{ convertNumber(props.review.user?.like_count ?? 0) }}
|
|
109
|
-
ชื่นชอบรีวิว
|
|
110
|
-
</span>
|
|
111
|
-
<div
|
|
112
|
-
v-if="props.review.review"
|
|
113
|
-
class="flex items-center gap-[8px]"
|
|
114
|
-
>
|
|
115
|
-
<InputRating
|
|
116
|
-
:size="14"
|
|
117
|
-
readonly
|
|
118
|
-
:model-value="props.review.review.rating"
|
|
119
|
-
/>
|
|
120
|
-
<span class="font-body-small opacity-75">
|
|
121
|
-
{{ convertDateTorelativeText(props.review.review.created_at ?? "") }}
|
|
122
|
-
</span>
|
|
123
|
-
</div>
|
|
124
|
-
</div>
|
|
125
|
-
</div>
|
|
126
|
-
<p
|
|
127
|
-
v-if="props.review.review?.description"
|
|
128
|
-
class="font-body-large max-h-[280px] overflow-y-auto"
|
|
129
|
-
>
|
|
130
|
-
{{ props.review.review.description }}
|
|
131
|
-
</p>
|
|
132
|
-
</div>
|
|
133
|
-
</div>
|
|
134
|
-
</div>
|
|
135
|
-
</div>
|
|
136
|
-
</div>
|
|
137
|
-
</Modal>
|
|
2
|
+
<Modal v-model="isOpen" class="sm:max-w-[1280px]" disable-padding>
|
|
3
|
+
<template #header>
|
|
4
|
+
<ShadDialogTitle class="p-4">{{ props.title }}</ShadDialogTitle>
|
|
5
|
+
</template>
|
|
6
|
+
<div class="relative h-[824px] bg-black overflow-hidden">
|
|
7
|
+
<Carousel
|
|
8
|
+
:items="props.items"
|
|
9
|
+
:select-index="props.startIndex"
|
|
10
|
+
class="h-full"
|
|
11
|
+
@update:current-index="currentIndex = $event"
|
|
12
|
+
/>
|
|
13
|
+
|
|
14
|
+
<!-- description overlay (แสดงเฉพาะเมื่อ item ปัจจุบันมี description และไม่มี review) -->
|
|
15
|
+
<div
|
|
16
|
+
v-if="!props.review && currentItem?.description"
|
|
17
|
+
class="absolute bottom-0 w-full z-10"
|
|
18
|
+
style="background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);"
|
|
19
|
+
>
|
|
20
|
+
<div class="p-[16px] flex flex-col gap-[4px] text-white font-body-large">
|
|
21
|
+
<div class="font-body-large-prominent">ผู้ดูแลระบบ</div>
|
|
22
|
+
<div>{{ currentItem.description }}</div>
|
|
23
|
+
</div>
|
|
24
|
+
</div>
|
|
25
|
+
|
|
26
|
+
<!-- Review info overlay (แสดงเมื่อมีข้อมูล review) -->
|
|
27
|
+
<div
|
|
28
|
+
v-if="props.review"
|
|
29
|
+
class="absolute bottom-0 w-full z-10"
|
|
30
|
+
style="background: linear-gradient(to top, rgba(0,0,0,0.75) 0%, transparent 100%);"
|
|
31
|
+
>
|
|
32
|
+
<div class="flex flex-col w-full">
|
|
33
|
+
<div
|
|
34
|
+
v-if="!showMoreDescription"
|
|
35
|
+
class="flex gap-[16px] p-[16px] w-full text-white"
|
|
36
|
+
>
|
|
37
|
+
<Avatar
|
|
38
|
+
:src="props.review.user?.avatar"
|
|
39
|
+
:alt="props.review.user?.name"
|
|
40
|
+
:size="36"
|
|
41
|
+
class="shrink-0"
|
|
42
|
+
/>
|
|
43
|
+
<div class="flex flex-col gap-[8px] w-full">
|
|
44
|
+
<div class="flex flex-col gap-[8px]">
|
|
45
|
+
<div class="flex justify-between w-full">
|
|
46
|
+
<span class="font-body-large">
|
|
47
|
+
{{ props.review.user?.name }}
|
|
48
|
+
</span>
|
|
49
|
+
<Icon name="lucide:flag" />
|
|
50
|
+
</div>
|
|
51
|
+
<div class="flex flex-col">
|
|
52
|
+
<span class="font-body-small">
|
|
53
|
+
{{ convertNumber(props.review.user?.review_count ?? 0) }}
|
|
54
|
+
รีวิว •
|
|
55
|
+
{{ convertNumber(props.review.user?.like_count ?? 0) }}
|
|
56
|
+
ชื่นชอบรีวิว
|
|
57
|
+
</span>
|
|
58
|
+
<div
|
|
59
|
+
v-if="props.review.review"
|
|
60
|
+
class="flex items-center gap-[8px]"
|
|
61
|
+
>
|
|
62
|
+
<InputRating
|
|
63
|
+
:size="14"
|
|
64
|
+
readonly
|
|
65
|
+
:model-value="props.review.review.rating"
|
|
66
|
+
/>
|
|
67
|
+
<span class="font-body-small opacity-75">
|
|
68
|
+
{{ convertDateTorelativeText(props.review.review.created_at ?? "") }}
|
|
69
|
+
</span>
|
|
70
|
+
</div>
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
<p
|
|
74
|
+
v-if="props.review.review?.description"
|
|
75
|
+
class="font-body-large line-clamp-1 cursor-pointer"
|
|
76
|
+
@click="showMoreDescription = true"
|
|
77
|
+
>
|
|
78
|
+
{{ props.review.review.description }}
|
|
79
|
+
</p>
|
|
80
|
+
</div>
|
|
81
|
+
</div>
|
|
82
|
+
<div
|
|
83
|
+
v-if="showMoreDescription"
|
|
84
|
+
class="flex gap-[16px] bg-white rounded-t-[16px] w-full p-[16px] max-h-[322px]"
|
|
85
|
+
>
|
|
86
|
+
<Avatar
|
|
87
|
+
:src="props.review.user?.avatar"
|
|
88
|
+
:alt="props.review.user?.name"
|
|
89
|
+
:size="36"
|
|
90
|
+
class="shrink-0"
|
|
91
|
+
/>
|
|
92
|
+
<div class="flex flex-col gap-[8px] w-full">
|
|
93
|
+
<div class="flex flex-col gap-[8px]">
|
|
94
|
+
<div class="flex justify-between w-full">
|
|
95
|
+
<span class="font-body-large">
|
|
96
|
+
{{ props.review.user?.name }}
|
|
97
|
+
</span>
|
|
98
|
+
<Icon
|
|
99
|
+
name="lucide:x"
|
|
100
|
+
class="cursor-pointer"
|
|
101
|
+
@click="showMoreDescription = false"
|
|
102
|
+
/>
|
|
103
|
+
</div>
|
|
104
|
+
<div class="flex flex-col">
|
|
105
|
+
<span class="font-body-small">
|
|
106
|
+
{{ convertNumber(props.review.user?.review_count ?? 0) }}
|
|
107
|
+
รีวิว •
|
|
108
|
+
{{ convertNumber(props.review.user?.like_count ?? 0) }}
|
|
109
|
+
ชื่นชอบรีวิว
|
|
110
|
+
</span>
|
|
111
|
+
<div
|
|
112
|
+
v-if="props.review.review"
|
|
113
|
+
class="flex items-center gap-[8px]"
|
|
114
|
+
>
|
|
115
|
+
<InputRating
|
|
116
|
+
:size="14"
|
|
117
|
+
readonly
|
|
118
|
+
:model-value="props.review.review.rating"
|
|
119
|
+
/>
|
|
120
|
+
<span class="font-body-small opacity-75">
|
|
121
|
+
{{ convertDateTorelativeText(props.review.review.created_at ?? "") }}
|
|
122
|
+
</span>
|
|
123
|
+
</div>
|
|
124
|
+
</div>
|
|
125
|
+
</div>
|
|
126
|
+
<p
|
|
127
|
+
v-if="props.review.review?.description"
|
|
128
|
+
class="font-body-large max-h-[280px] overflow-y-auto"
|
|
129
|
+
>
|
|
130
|
+
{{ props.review.review.description }}
|
|
131
|
+
</p>
|
|
132
|
+
</div>
|
|
133
|
+
</div>
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
</div>
|
|
137
|
+
</Modal>
|
|
138
138
|
</template>
|
|
139
139
|
|
|
140
140
|
<script setup>
|
package/package.json
CHANGED
|
File without changes
|