pukaad-ui-lib 1.295.0 → 1.296.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
CHANGED
|
@@ -3,7 +3,8 @@
|
|
|
3
3
|
<Image v-if="displayImage" :src="displayImage" :width="227" :height="128" class="rounded-[4px]"
|
|
4
4
|
fit="cover" />
|
|
5
5
|
<div class="flex flex-col gap-[4px] w-full">
|
|
6
|
-
<div class="font-title-small-prominent
|
|
6
|
+
<div ref="titleRef" class="font-title-small-prominent"
|
|
7
|
+
:class="displayImage ? 'line-clamp-3' : 'line-clamp-2'">
|
|
7
8
|
{{ props.item.title }}
|
|
8
9
|
</div>
|
|
9
10
|
<div v-if="props.item.author" class="flex gap-[4px] text-body-medium items-center flex-wrap">
|
|
@@ -15,7 +16,8 @@
|
|
|
15
16
|
<div>{{ convertDateTorelativeText(displayDate) }}</div>
|
|
16
17
|
</div>
|
|
17
18
|
</div>
|
|
18
|
-
<div class="text-body-large text-gray
|
|
19
|
+
<div v-if="!displayImage" class="text-body-large text-gray"
|
|
20
|
+
:class="isTitleTwoLines ? 'line-clamp-1' : 'line-clamp-2'">
|
|
19
21
|
{{ displayDescription }}
|
|
20
22
|
</div>
|
|
21
23
|
<div class="flex justify-between">
|
|
@@ -51,7 +53,7 @@
|
|
|
51
53
|
<script setup>
|
|
52
54
|
import { useConvert } from "#pukaad-ui/runtime/composables/useConvert";
|
|
53
55
|
import { useRouter } from "vue-router";
|
|
54
|
-
import { computed, ref, watch } from "vue";
|
|
56
|
+
import { computed, ref, watch, onMounted, onBeforeUnmount } from "vue";
|
|
55
57
|
const { convertNumber, convertDateTorelativeText } = useConvert();
|
|
56
58
|
const router = useRouter();
|
|
57
59
|
const props = defineProps({
|
|
@@ -61,6 +63,23 @@ const props = defineProps({
|
|
|
61
63
|
});
|
|
62
64
|
const displayImage = computed(() => props.item.cover_image_url || props.item.image);
|
|
63
65
|
const displayDate = computed(() => props.item.created_at || props.item.create_at || "");
|
|
66
|
+
const titleRef = ref(null);
|
|
67
|
+
const isTitleTwoLines = ref(false);
|
|
68
|
+
let titleObserver = null;
|
|
69
|
+
const measureTitle = () => {
|
|
70
|
+
const el = titleRef.value;
|
|
71
|
+
if (!el) return;
|
|
72
|
+
const lineHeight = parseFloat(getComputedStyle(el).lineHeight) || 24;
|
|
73
|
+
isTitleTwoLines.value = el.clientHeight > lineHeight * 1.5;
|
|
74
|
+
};
|
|
75
|
+
onMounted(() => {
|
|
76
|
+
measureTitle();
|
|
77
|
+
if (titleRef.value) {
|
|
78
|
+
titleObserver = new ResizeObserver(measureTitle);
|
|
79
|
+
titleObserver.observe(titleRef.value);
|
|
80
|
+
}
|
|
81
|
+
});
|
|
82
|
+
onBeforeUnmount(() => titleObserver?.disconnect());
|
|
64
83
|
const extractTextFromDelta = (content) => {
|
|
65
84
|
const contentObj = content;
|
|
66
85
|
if (!contentObj?.ops) return "";
|
|
@@ -1,78 +1,78 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<Drawer
|
|
3
|
-
class="w-[748px]"
|
|
4
|
-
:title="drawerTitle"
|
|
5
|
-
@close="onClose"
|
|
6
|
-
disabled-auto-close
|
|
7
|
-
@submit="onSubmit"
|
|
8
|
-
v-model="isOpen"
|
|
9
|
-
>
|
|
10
|
-
<div class="flex flex-col gap-[16px]">
|
|
11
|
-
<div class="flex gap-[16px]">
|
|
12
|
-
<div
|
|
13
|
-
class="w-[178px] h-[100px] rounded-[8px] overflow-hidden flex-shrink-0"
|
|
14
|
-
>
|
|
15
|
-
<Image
|
|
16
|
-
v-if="form.coverImage"
|
|
17
|
-
:src="form.coverImage"
|
|
18
|
-
width="auto"
|
|
19
|
-
height="auto"
|
|
20
|
-
fit="cover"
|
|
21
|
-
/>
|
|
22
|
-
</div>
|
|
23
|
-
<div class="flex flex-col gap-[4px]">
|
|
24
|
-
<div class="font-body-large-prominent">
|
|
25
|
-
{{ form.placeName }}
|
|
26
|
-
</div>
|
|
27
|
-
<div class="font-body-small text-gray">
|
|
28
|
-
{{ form.address }}
|
|
29
|
-
</div>
|
|
30
|
-
</div>
|
|
31
|
-
</div>
|
|
32
|
-
<div class="flex items-center justify-center py-[16px]">
|
|
33
|
-
<InputRating v-model="form.rating" :size="28" />
|
|
34
|
-
</div>
|
|
35
|
-
<InputTextarea
|
|
36
|
-
name="description"
|
|
37
|
-
label="คำอธิบาย"
|
|
38
|
-
placeholder="เขียนรีวิวของคุณ"
|
|
39
|
-
showCounter
|
|
40
|
-
v-model="form.description"
|
|
41
|
-
class="min-h-[120px]"
|
|
42
|
-
/>
|
|
43
|
-
<div class="flex flex-col gap-[8px]">
|
|
44
|
-
<div class="flex flex-col gap-[4px]">
|
|
45
|
-
<div class="text-gray font-body-large">เพิ่มภาพถ่าย</div>
|
|
46
|
-
<div class="text-gray font-body-small">อัปโหลด 9 รายการ</div>
|
|
47
|
-
</div>
|
|
48
|
-
<InputFile
|
|
49
|
-
:limit="9"
|
|
50
|
-
name="photos"
|
|
51
|
-
accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
|
|
52
|
-
v-model="form.photos"
|
|
53
|
-
/>
|
|
54
|
-
<div class="flex flex-col text-gray font-body-small">
|
|
55
|
-
<div>รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif</div>
|
|
56
|
-
<div>ขนาดไฟล์สูงสุด 30 mb</div>
|
|
57
|
-
</div>
|
|
58
|
-
</div>
|
|
59
|
-
</div>
|
|
60
|
-
<template #footer="{ meta }">
|
|
61
|
-
<div class="flex justify-end gap-[16px] items-center">
|
|
62
|
-
<Button variant="outline" @click="onClose" :disabled="isSubmitting"
|
|
63
|
-
>ยกเลิก</Button
|
|
64
|
-
>
|
|
65
|
-
<Button
|
|
66
|
-
type="submit"
|
|
67
|
-
color="primary"
|
|
68
|
-
:disabled="form.rating === 0 || isSubmitting"
|
|
69
|
-
:loading="isSubmitting"
|
|
70
|
-
>
|
|
71
|
-
ยืนยัน
|
|
72
|
-
</Button>
|
|
73
|
-
</div>
|
|
74
|
-
</template>
|
|
75
|
-
</Drawer>
|
|
2
|
+
<Drawer
|
|
3
|
+
class="w-[748px]"
|
|
4
|
+
:title="drawerTitle"
|
|
5
|
+
@close="onClose"
|
|
6
|
+
disabled-auto-close
|
|
7
|
+
@submit="onSubmit"
|
|
8
|
+
v-model="isOpen"
|
|
9
|
+
>
|
|
10
|
+
<div class="flex flex-col gap-[16px]">
|
|
11
|
+
<div class="flex gap-[16px]">
|
|
12
|
+
<div
|
|
13
|
+
class="w-[178px] h-[100px] rounded-[8px] overflow-hidden flex-shrink-0"
|
|
14
|
+
>
|
|
15
|
+
<Image
|
|
16
|
+
v-if="form.coverImage"
|
|
17
|
+
:src="form.coverImage"
|
|
18
|
+
width="auto"
|
|
19
|
+
height="auto"
|
|
20
|
+
fit="cover"
|
|
21
|
+
/>
|
|
22
|
+
</div>
|
|
23
|
+
<div class="flex flex-col gap-[4px]">
|
|
24
|
+
<div class="font-body-large-prominent">
|
|
25
|
+
{{ form.placeName }}
|
|
26
|
+
</div>
|
|
27
|
+
<div class="font-body-small text-gray">
|
|
28
|
+
{{ form.address }}
|
|
29
|
+
</div>
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
<div class="flex items-center justify-center py-[16px]">
|
|
33
|
+
<InputRating v-model="form.rating" :size="28" />
|
|
34
|
+
</div>
|
|
35
|
+
<InputTextarea
|
|
36
|
+
name="description"
|
|
37
|
+
label="คำอธิบาย"
|
|
38
|
+
placeholder="เขียนรีวิวของคุณ"
|
|
39
|
+
showCounter
|
|
40
|
+
v-model="form.description"
|
|
41
|
+
class="min-h-[120px]"
|
|
42
|
+
/>
|
|
43
|
+
<div class="flex flex-col gap-[8px]">
|
|
44
|
+
<div class="flex flex-col gap-[4px]">
|
|
45
|
+
<div class="text-gray font-body-large">เพิ่มภาพถ่าย</div>
|
|
46
|
+
<div class="text-gray font-body-small">อัปโหลด 9 รายการ</div>
|
|
47
|
+
</div>
|
|
48
|
+
<InputFile
|
|
49
|
+
:limit="9"
|
|
50
|
+
name="photos"
|
|
51
|
+
accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
|
|
52
|
+
v-model="form.photos"
|
|
53
|
+
/>
|
|
54
|
+
<div class="flex flex-col text-gray font-body-small">
|
|
55
|
+
<div>รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif</div>
|
|
56
|
+
<div>ขนาดไฟล์สูงสุด 30 mb</div>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
<template #footer="{ meta }">
|
|
61
|
+
<div class="flex justify-end gap-[16px] items-center">
|
|
62
|
+
<Button variant="outline" @click="onClose" :disabled="isSubmitting"
|
|
63
|
+
>ยกเลิก</Button
|
|
64
|
+
>
|
|
65
|
+
<Button
|
|
66
|
+
type="submit"
|
|
67
|
+
color="primary"
|
|
68
|
+
:disabled="form.rating === 0 || isSubmitting"
|
|
69
|
+
:loading="isSubmitting"
|
|
70
|
+
>
|
|
71
|
+
ยืนยัน
|
|
72
|
+
</Button>
|
|
73
|
+
</div>
|
|
74
|
+
</template>
|
|
75
|
+
</Drawer>
|
|
76
76
|
</template>
|
|
77
77
|
|
|
78
78
|
<script setup>
|
package/package.json
CHANGED
|
File without changes
|