pukaad-ui-lib 1.330.0 → 1.331.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-suggest-place/drawer-suggest-place.vue +25 -8
- package/dist/runtime/components/input/input-rating.vue +6 -6
- package/dist/runtime/components/modal/modal-media-view.vue +136 -136
- 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>
|
|
@@ -5,15 +5,23 @@
|
|
|
5
5
|
:loading="loading"
|
|
6
6
|
v-model="isOpen"
|
|
7
7
|
>
|
|
8
|
-
<!-- backoffice: แสดงแบบมี tabs -->
|
|
9
|
-
<ShadTabs
|
|
8
|
+
<!-- backoffice / business: แสดงแบบมี tabs (Figma 2778-244494) -->
|
|
9
|
+
<ShadTabs
|
|
10
|
+
v-if="props.state === 'backoffice' || props.state === 'business'"
|
|
11
|
+
default-value="business-info"
|
|
12
|
+
>
|
|
10
13
|
<ShadTabsList>
|
|
11
14
|
<ShadTabsTrigger value="business-info">ข้อมูลธุรกิจ</ShadTabsTrigger>
|
|
12
15
|
<ShadTabsTrigger value="image">รูปภาพ</ShadTabsTrigger>
|
|
13
16
|
<ShadTabsTrigger value="video">วิดีโอ</ShadTabsTrigger>
|
|
14
17
|
</ShadTabsList>
|
|
15
18
|
<ShadTabsContent value="business-info">
|
|
16
|
-
<SuggestPlaceForm
|
|
19
|
+
<SuggestPlaceForm
|
|
20
|
+
ref="formRef"
|
|
21
|
+
v-model="formData"
|
|
22
|
+
:state="props.state"
|
|
23
|
+
:fixed-province-id="fixedProvinceId"
|
|
24
|
+
/>
|
|
17
25
|
</ShadTabsContent>
|
|
18
26
|
<ShadTabsContent value="image">
|
|
19
27
|
<div class="flex flex-col gap-[16px] w-full">
|
|
@@ -99,18 +107,18 @@
|
|
|
99
107
|
</ShadTabsContent>
|
|
100
108
|
</ShadTabs>
|
|
101
109
|
|
|
102
|
-
<!-- personal
|
|
110
|
+
<!-- personal: แสดงตรงๆ ไม่มี tabs -->
|
|
103
111
|
<div v-else>
|
|
104
112
|
<SuggestPlaceForm
|
|
105
113
|
ref="formRef"
|
|
106
114
|
v-model="formData"
|
|
107
115
|
:state="props.state"
|
|
108
|
-
:fixed-province-id="
|
|
116
|
+
:fixed-province-id="fixedProvinceId"
|
|
109
117
|
/>
|
|
110
118
|
</div>
|
|
111
119
|
<template #footer>
|
|
112
120
|
<div class="flex gap-[8px] justify-end">
|
|
113
|
-
<Button variant="outline">ยกเลิก</Button>
|
|
121
|
+
<Button variant="outline" @click="isOpen = false">ยกเลิก</Button>
|
|
114
122
|
<Button color="primary" :disabled="!isFormValid" @click="onSubmit">{{
|
|
115
123
|
props.state === "personal" ? "\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01" : "\u0E22\u0E37\u0E19\u0E22\u0E31\u0E19\u0E41\u0E25\u0E30\u0E40\u0E1C\u0E22\u0E41\u0E1E\u0E23\u0E48"
|
|
116
124
|
}}</Button>
|
|
@@ -161,6 +169,9 @@ watch(isOpen, (val) => {
|
|
|
161
169
|
}, 300);
|
|
162
170
|
}
|
|
163
171
|
});
|
|
172
|
+
const fixedProvinceId = computed(
|
|
173
|
+
() => props.state === "personal" ? provinceIdState.value ?? void 0 : void 0
|
|
174
|
+
);
|
|
164
175
|
const isFormValid = computed(() => {
|
|
165
176
|
const d = formData.value;
|
|
166
177
|
const addressComplete = !!(d.address?.province_id && d.address?.amphur_id && d.address?.tambon_id && d.address?.zipcode);
|
|
@@ -197,7 +208,10 @@ const onSubmit = async () => {
|
|
|
197
208
|
method,
|
|
198
209
|
body: {
|
|
199
210
|
business_name: d.businessName ?? "",
|
|
200
|
-
localized_names: (d.localizedNames ?? []).map((ln) => ({
|
|
211
|
+
localized_names: (d.localizedNames ?? []).map((ln) => ({
|
|
212
|
+
language: ln.language,
|
|
213
|
+
name: ln.name
|
|
214
|
+
})),
|
|
201
215
|
description: d.description ?? "",
|
|
202
216
|
address: {
|
|
203
217
|
province_id: d.address?.province_id,
|
|
@@ -236,10 +250,13 @@ const onSubmit = async () => {
|
|
|
236
250
|
}
|
|
237
251
|
};
|
|
238
252
|
const drawerTitle = computed(() => {
|
|
253
|
+
if (props.state === "business") {
|
|
254
|
+
return props.editId ? "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E18\u0E38\u0E23\u0E01\u0E34\u0E08\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13" : "\u0E40\u0E1E\u0E34\u0E48\u0E21\u0E18\u0E38\u0E23\u0E01\u0E34\u0E08\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13";
|
|
255
|
+
}
|
|
239
256
|
if (props.editId) {
|
|
240
257
|
return "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48";
|
|
241
258
|
}
|
|
242
|
-
if (props.state === "personal"
|
|
259
|
+
if (props.state === "personal") {
|
|
243
260
|
return "\u0E41\u0E19\u0E30\u0E19\u0E33\u0E2A\u0E16\u0E32\u0E19\u0E17\u0E35\u0E48\u0E17\u0E35\u0E48\u0E02\u0E32\u0E14\u0E44\u0E1B";
|
|
244
261
|
}
|
|
245
262
|
if (props.state === "backoffice") {
|
|
@@ -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>
|
package/package.json
CHANGED
|
File without changes
|