pukaad-ui-lib 1.331.0 → 1.332.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 +1 -0
- package/dist/runtime/components/drawer/drawer-suggest-place/suggest-place-form.d.vue.ts +1 -0
- package/dist/runtime/components/drawer/drawer-suggest-place/suggest-place-form.vue +3 -2
- package/dist/runtime/components/drawer/drawer-suggest-place/suggest-place-form.vue.d.ts +1 -0
- package/dist/runtime/components/image/image-cropper.d.vue.ts +2 -2
- package/dist/runtime/components/image/image-cropper.vue.d.ts +2 -2
- 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>
|
|
@@ -155,7 +155,8 @@ import SuggestPlaceMap from "./suggest-place-map.vue";
|
|
|
155
155
|
import InputLocalizedName from "../../input/input-localized-name.vue";
|
|
156
156
|
const props = defineProps({
|
|
157
157
|
state: { type: String, required: false, default: "personal" },
|
|
158
|
-
fixedProvinceId: { type: Number, required: false }
|
|
158
|
+
fixedProvinceId: { type: Number, required: false },
|
|
159
|
+
editId: { type: String, required: false }
|
|
159
160
|
});
|
|
160
161
|
const api = useApi();
|
|
161
162
|
const { $alert } = useNuxtApp();
|
|
@@ -262,7 +263,7 @@ const checkDuplicate = async () => {
|
|
|
262
263
|
}
|
|
263
264
|
});
|
|
264
265
|
const match = (res.data ?? []).find(
|
|
265
|
-
(p) => p.business_name.trim().toLowerCase() === name.toLowerCase() && p.address?.tambon_id === modelValue.address?.tambon_id
|
|
266
|
+
(p) => p.id !== props.editId && p.business_name.trim().toLowerCase() === name.toLowerCase() && p.address?.tambon_id === modelValue.address?.tambon_id
|
|
266
267
|
);
|
|
267
268
|
if (match) {
|
|
268
269
|
await showDuplicateAlert(match);
|
|
@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
|
|
|
64
64
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
|
|
65
65
|
src: string;
|
|
66
66
|
center: boolean;
|
|
67
|
+
background: boolean;
|
|
68
|
+
modal: boolean;
|
|
67
69
|
responsive: boolean;
|
|
68
70
|
restore: boolean;
|
|
69
71
|
checkCrossOrigin: boolean;
|
|
70
72
|
checkOrientation: boolean;
|
|
71
73
|
crossorigin: "" | "anonymous" | "use-credentials";
|
|
72
|
-
modal: boolean;
|
|
73
74
|
guides: boolean;
|
|
74
75
|
highlight: boolean;
|
|
75
|
-
background: boolean;
|
|
76
76
|
autoCrop: boolean;
|
|
77
77
|
movable: boolean;
|
|
78
78
|
rotatable: boolean;
|
|
@@ -64,15 +64,15 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
|
|
|
64
64
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ImageCropperProps> & Readonly<{}>, {
|
|
65
65
|
src: string;
|
|
66
66
|
center: boolean;
|
|
67
|
+
background: boolean;
|
|
68
|
+
modal: boolean;
|
|
67
69
|
responsive: boolean;
|
|
68
70
|
restore: boolean;
|
|
69
71
|
checkCrossOrigin: boolean;
|
|
70
72
|
checkOrientation: boolean;
|
|
71
73
|
crossorigin: "" | "anonymous" | "use-credentials";
|
|
72
|
-
modal: boolean;
|
|
73
74
|
guides: boolean;
|
|
74
75
|
highlight: boolean;
|
|
75
|
-
background: boolean;
|
|
76
76
|
autoCrop: boolean;
|
|
77
77
|
movable: boolean;
|
|
78
78
|
rotatable: boolean;
|
|
@@ -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
|