pukaad-ui-lib 1.81.0 → 1.82.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/drawer/drawer-post-review.d.vue.ts +28 -0
- package/dist/runtime/components/drawer/drawer-post-review.vue +121 -0
- package/dist/runtime/components/drawer/drawer-post-review.vue.d.ts +28 -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/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export interface DrawerPostReviewItem {
|
|
2
|
+
placeName: string;
|
|
3
|
+
address: string;
|
|
4
|
+
coverImage: string;
|
|
5
|
+
rating: number;
|
|
6
|
+
description: string;
|
|
7
|
+
photos: File[];
|
|
8
|
+
}
|
|
9
|
+
export interface DrawerPostReviewProps {
|
|
10
|
+
item?: DrawerPostReviewItem;
|
|
11
|
+
}
|
|
12
|
+
type __VLS_Props = DrawerPostReviewProps;
|
|
13
|
+
type __VLS_ModelProps = {
|
|
14
|
+
modelValue?: boolean;
|
|
15
|
+
};
|
|
16
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
17
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
18
|
+
"update:modelValue": (value: boolean) => any;
|
|
19
|
+
} & {
|
|
20
|
+
submit: (data: DrawerPostReviewItem) => any;
|
|
21
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
22
|
+
onSubmit?: ((data: DrawerPostReviewItem) => any) | undefined;
|
|
23
|
+
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
|
24
|
+
}>, {
|
|
25
|
+
item: DrawerPostReviewItem;
|
|
26
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
27
|
+
declare const _default: typeof __VLS_export;
|
|
28
|
+
export default _default;
|
|
@@ -0,0 +1,121 @@
|
|
|
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">
|
|
33
|
+
<InputRating v-model="form.rating" :size="40" />
|
|
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">ยกเลิก</Button>
|
|
63
|
+
<Button type="submit" color="primary" :disabled="form.rating === 0">
|
|
64
|
+
ยืนยัน
|
|
65
|
+
</Button>
|
|
66
|
+
</div>
|
|
67
|
+
</template>
|
|
68
|
+
</Drawer>
|
|
69
|
+
</template>
|
|
70
|
+
|
|
71
|
+
<script setup>
|
|
72
|
+
import { ref, watch, computed } from "vue";
|
|
73
|
+
import { useNuxtApp } from "nuxt/app";
|
|
74
|
+
const { $alert } = useNuxtApp();
|
|
75
|
+
const emit = defineEmits(["submit"]);
|
|
76
|
+
const props = defineProps({
|
|
77
|
+
item: { type: Object, required: false, default: () => ({
|
|
78
|
+
placeName: "",
|
|
79
|
+
address: "",
|
|
80
|
+
coverImage: "",
|
|
81
|
+
rating: 0,
|
|
82
|
+
description: "",
|
|
83
|
+
photos: []
|
|
84
|
+
}) }
|
|
85
|
+
});
|
|
86
|
+
const form = ref(JSON.parse(JSON.stringify(props.item)));
|
|
87
|
+
const isOpen = defineModel({ type: Boolean, ...{
|
|
88
|
+
default: false
|
|
89
|
+
} });
|
|
90
|
+
const drawerTitle = computed(() => {
|
|
91
|
+
const hasDescription = props.item?.description?.trim();
|
|
92
|
+
return hasDescription ? "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E23\u0E35\u0E27\u0E34\u0E27" : "\u0E40\u0E02\u0E35\u0E22\u0E19\u0E23\u0E35\u0E27\u0E34\u0E27";
|
|
93
|
+
});
|
|
94
|
+
watch(isOpen, (newVal) => {
|
|
95
|
+
if (newVal) {
|
|
96
|
+
form.value = JSON.parse(JSON.stringify(props.item));
|
|
97
|
+
}
|
|
98
|
+
});
|
|
99
|
+
const onClose = async () => {
|
|
100
|
+
const isModified = JSON.stringify(form.value) !== JSON.stringify(props.item);
|
|
101
|
+
if (isModified) {
|
|
102
|
+
const { isConfirmed } = await $alert.show({
|
|
103
|
+
type: "warning",
|
|
104
|
+
title: "\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E2D\u0E2D\u0E01\u0E08\u0E32\u0E01\u0E2B\u0E19\u0E49\u0E32\u0E19\u0E35\u0E49\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48 ?",
|
|
105
|
+
description: "\u0E01\u0E32\u0E23\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E41\u0E1B\u0E25\u0E07\u0E02\u0E2D\u0E07\u0E04\u0E38\u0E13\u0E22\u0E31\u0E07\u0E44\u0E21\u0E48\u0E44\u0E14\u0E49\u0E23\u0E31\u0E1A\u0E01\u0E32\u0E23\u0E1A\u0E31\u0E19\u0E17\u0E36\u0E01 \u0E04\u0E38\u0E13\u0E15\u0E49\u0E2D\u0E07\u0E01\u0E32\u0E23\u0E25\u0E30\u0E17\u0E34\u0E49\u0E07\u0E01\u0E32\u0E23\u0E40\u0E1B\u0E25\u0E35\u0E48\u0E22\u0E19\u0E41\u0E1B\u0E25\u0E07\u0E2B\u0E23\u0E37\u0E2D\u0E44\u0E21\u0E48 ?",
|
|
106
|
+
confirmText: "\u0E25\u0E30\u0E17\u0E34\u0E49\u0E07",
|
|
107
|
+
cancelText: "\u0E41\u0E01\u0E49\u0E44\u0E02\u0E15\u0E48\u0E2D",
|
|
108
|
+
showCancelBtn: true
|
|
109
|
+
});
|
|
110
|
+
if (isConfirmed) {
|
|
111
|
+
isOpen.value = false;
|
|
112
|
+
}
|
|
113
|
+
} else {
|
|
114
|
+
isOpen.value = false;
|
|
115
|
+
}
|
|
116
|
+
};
|
|
117
|
+
const onSubmit = () => {
|
|
118
|
+
emit("submit", form.value);
|
|
119
|
+
isOpen.value = false;
|
|
120
|
+
};
|
|
121
|
+
</script>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
export interface DrawerPostReviewItem {
|
|
2
|
+
placeName: string;
|
|
3
|
+
address: string;
|
|
4
|
+
coverImage: string;
|
|
5
|
+
rating: number;
|
|
6
|
+
description: string;
|
|
7
|
+
photos: File[];
|
|
8
|
+
}
|
|
9
|
+
export interface DrawerPostReviewProps {
|
|
10
|
+
item?: DrawerPostReviewItem;
|
|
11
|
+
}
|
|
12
|
+
type __VLS_Props = DrawerPostReviewProps;
|
|
13
|
+
type __VLS_ModelProps = {
|
|
14
|
+
modelValue?: boolean;
|
|
15
|
+
};
|
|
16
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
17
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
18
|
+
"update:modelValue": (value: boolean) => any;
|
|
19
|
+
} & {
|
|
20
|
+
submit: (data: DrawerPostReviewItem) => any;
|
|
21
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
22
|
+
onSubmit?: ((data: DrawerPostReviewItem) => any) | undefined;
|
|
23
|
+
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
|
24
|
+
}>, {
|
|
25
|
+
item: DrawerPostReviewItem;
|
|
26
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
27
|
+
declare const _default: typeof __VLS_export;
|
|
28
|
+
export default _default;
|
|
@@ -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;
|
|
69
67
|
responsive: boolean;
|
|
70
68
|
restore: boolean;
|
|
71
69
|
checkCrossOrigin: boolean;
|
|
72
70
|
checkOrientation: boolean;
|
|
73
71
|
crossorigin: "" | "anonymous" | "use-credentials";
|
|
72
|
+
modal: boolean;
|
|
74
73
|
guides: boolean;
|
|
75
74
|
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;
|
|
69
67
|
responsive: boolean;
|
|
70
68
|
restore: boolean;
|
|
71
69
|
checkCrossOrigin: boolean;
|
|
72
70
|
checkOrientation: boolean;
|
|
73
71
|
crossorigin: "" | "anonymous" | "use-credentials";
|
|
72
|
+
modal: boolean;
|
|
74
73
|
guides: boolean;
|
|
75
74
|
highlight: boolean;
|
|
75
|
+
background: boolean;
|
|
76
76
|
autoCrop: boolean;
|
|
77
77
|
movable: boolean;
|
|
78
78
|
rotatable: boolean;
|