pukaad-ui-lib 1.321.0 → 1.323.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/carousel.vue +31 -31
- package/dist/runtime/components/display/display-image-place.vue +98 -98
- package/dist/runtime/components/drawer/drawer-profile-network.vue +18 -24
- package/dist/runtime/components/drawer/drawer-suggest-place/suggest-place-form.vue +2 -2
- package/dist/runtime/components/input/input-rating.vue +6 -6
- package/dist/runtime/components/modal/modal-media-view.vue +136 -136
- package/dist/runtime/components/ui/badge/index.js +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>
|
|
@@ -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>
|
|
@@ -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>
|
|
@@ -354,6 +354,17 @@ const fetchFavorites = async (isLoadMore = false) => {
|
|
|
354
354
|
s.loadingMore = false;
|
|
355
355
|
}
|
|
356
356
|
};
|
|
357
|
+
const tabItems = { followers, following, favorites };
|
|
358
|
+
const fetchers = {
|
|
359
|
+
followers: fetchFollowers,
|
|
360
|
+
following: fetchFollowing,
|
|
361
|
+
favorites: fetchFavorites
|
|
362
|
+
};
|
|
363
|
+
const loadTab = (tab) => {
|
|
364
|
+
const s = tabState[tab];
|
|
365
|
+
if (s.loading || tabItems[tab].value.length > 0) return;
|
|
366
|
+
fetchers[tab]();
|
|
367
|
+
};
|
|
357
368
|
const resetAll = () => {
|
|
358
369
|
followers.value = [];
|
|
359
370
|
following.value = [];
|
|
@@ -366,18 +377,12 @@ const resetAll = () => {
|
|
|
366
377
|
watch(isOpen, (v) => {
|
|
367
378
|
if (v) {
|
|
368
379
|
activeTab.value = props.defaultTab;
|
|
369
|
-
|
|
370
|
-
else if (activeTab.value === "following") fetchFollowing();
|
|
371
|
-
else if (activeTab.value === "favorites") fetchFavorites();
|
|
380
|
+
loadTab(activeTab.value);
|
|
372
381
|
} else {
|
|
373
382
|
resetAll();
|
|
374
383
|
}
|
|
375
384
|
});
|
|
376
|
-
watch(activeTab, (
|
|
377
|
-
if (v === "followers" && followers.value.length === 0) fetchFollowers();
|
|
378
|
-
else if (v === "following" && following.value.length === 0) fetchFollowing();
|
|
379
|
-
else if (v === "favorites" && favorites.value.length === 0) fetchFavorites();
|
|
380
|
-
});
|
|
385
|
+
watch(activeTab, (tab) => loadTab(tab));
|
|
381
386
|
const onClose = () => {
|
|
382
387
|
isOpen.value = false;
|
|
383
388
|
emit("close");
|
|
@@ -387,21 +392,10 @@ const onScroll = (e) => {
|
|
|
387
392
|
if (!target) return;
|
|
388
393
|
const isBottom = target.scrollHeight - target.scrollTop <= target.clientHeight + 50;
|
|
389
394
|
if (!isBottom) return;
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
393
|
-
|
|
394
|
-
|
|
395
|
-
} else if (activeTab.value === "following") {
|
|
396
|
-
if (tabState.following.hasMore) {
|
|
397
|
-
tabState.following.page++;
|
|
398
|
-
fetchFollowing(true);
|
|
399
|
-
}
|
|
400
|
-
} else if (activeTab.value === "favorites") {
|
|
401
|
-
if (tabState.favorites.hasMore) {
|
|
402
|
-
tabState.favorites.page++;
|
|
403
|
-
fetchFavorites(true);
|
|
404
|
-
}
|
|
405
|
-
}
|
|
395
|
+
const tab = activeTab.value;
|
|
396
|
+
const s = tabState[tab];
|
|
397
|
+
if (!s.hasMore || s.loading || s.loadingMore) return;
|
|
398
|
+
s.page++;
|
|
399
|
+
fetchers[tab](true);
|
|
406
400
|
};
|
|
407
401
|
</script>
|
|
@@ -213,7 +213,7 @@ const fetchApprovedPlaces = async (page, pageSize, search) => {
|
|
|
213
213
|
const res = await api(base, {
|
|
214
214
|
query: {
|
|
215
215
|
q: search ?? "",
|
|
216
|
-
status: "
|
|
216
|
+
status: "unverified,active",
|
|
217
217
|
page,
|
|
218
218
|
page_size: pageSize
|
|
219
219
|
}
|
|
@@ -254,7 +254,7 @@ const checkDuplicate = async () => {
|
|
|
254
254
|
const res = await api(base, {
|
|
255
255
|
query: {
|
|
256
256
|
q: name,
|
|
257
|
-
status: "
|
|
257
|
+
status: "unverified,active",
|
|
258
258
|
page: 1,
|
|
259
259
|
page_size: 10,
|
|
260
260
|
amphur_id: modelValue.address?.amphur_id,
|
|
@@ -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>
|
|
@@ -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>
|
|
@@ -10,7 +10,7 @@ export const badgeVariants = cva(
|
|
|
10
10
|
secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
|
|
11
11
|
destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
|
|
12
12
|
success: "border-success bg-green-light text-success [a&]:hover:bg-green-light/80",
|
|
13
|
-
warning: "border-warning bg-
|
|
13
|
+
warning: "border-warning bg-warning text-white [a&]:hover:bg-warning/80",
|
|
14
14
|
bright: "border-transparent bg-bright text-bright-foreground [a&]:hover:bg-bright/90",
|
|
15
15
|
outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground "
|
|
16
16
|
}
|
package/package.json
CHANGED
|
File without changes
|