pukaad-ui-lib 1.359.0 → 1.361.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/carousel.d.vue.ts +1 -0
- package/dist/runtime/components/carousel.vue.d.ts +1 -0
- package/dist/runtime/components/display/display-image-place.d.vue.ts +2 -0
- package/dist/runtime/components/display/display-image-place.vue +3 -1
- package/dist/runtime/components/display/display-image-place.vue.d.ts +2 -0
- package/dist/runtime/components/input/input-autocomplete.d.vue.ts +3 -3
- package/dist/runtime/components/input/input-autocomplete.vue.d.ts +3 -3
- package/dist/runtime/components/input/input-file.d.vue.ts +1 -1
- package/dist/runtime/components/input/input-file.vue.d.ts +1 -1
- package/dist/runtime/components/input/input-link.d.vue.ts +1 -1
- package/dist/runtime/components/input/input-link.vue.d.ts +1 -1
- package/dist/runtime/components/input/input-localized-name.d.vue.ts +2 -2
- package/dist/runtime/components/input/input-localized-name.vue.d.ts +2 -2
- package/dist/runtime/components/input/input-suggest.d.vue.ts +2 -2
- package/dist/runtime/components/input/input-suggest.vue.d.ts +2 -2
- package/dist/runtime/components/input/input-tag.d.vue.ts +1 -1
- package/dist/runtime/components/input/input-tag.vue.d.ts +1 -1
- package/dist/runtime/components/input/input-text-field.d.vue.ts +1 -1
- package/dist/runtime/components/input/input-text-field.vue.d.ts +1 -1
- package/dist/runtime/components/input/input-textarea.d.vue.ts +1 -1
- package/dist/runtime/components/input/input-textarea.vue.d.ts +1 -1
- package/dist/runtime/components/input/input-typed-field.d.vue.ts +1 -1
- package/dist/runtime/components/input/input-typed-field.vue.d.ts +1 -1
- package/dist/runtime/components/modal/modal-media-view.d.vue.ts +2 -0
- package/dist/runtime/components/modal/modal-media-view.vue +25 -3
- package/dist/runtime/components/modal/modal-media-view.vue.d.ts +2 -0
- package/dist/runtime/components/modal/modal-report.vue +1 -1
- package/dist/runtime/components/picker/picker-option-menu/picker-option-menu-user.vue +1 -1
- package/dist/runtime/components/timeline.d.vue.ts +26 -0
- package/dist/runtime/components/timeline.vue +48 -0
- package/dist/runtime/components/timeline.vue.d.ts +26 -0
- package/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export interface MediaItem {
|
|
2
|
+
id?: string | number;
|
|
2
3
|
url: string;
|
|
3
4
|
description?: string;
|
|
4
5
|
}
|
|
@@ -8,6 +9,7 @@ type __VLS_Props = {
|
|
|
8
9
|
variant?: "featured" | "album";
|
|
9
10
|
state?: "personal" | "office" | "business";
|
|
10
11
|
title?: string;
|
|
12
|
+
placeId?: string | number;
|
|
11
13
|
};
|
|
12
14
|
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
13
15
|
title: string;
|
|
@@ -222,6 +222,7 @@
|
|
|
222
222
|
:title="props.title"
|
|
223
223
|
:start-index="mediaStartIndex"
|
|
224
224
|
:uploader-label="uploaderLabel"
|
|
225
|
+
:place-id="props.placeId"
|
|
225
226
|
/>
|
|
226
227
|
</template>
|
|
227
228
|
|
|
@@ -234,7 +235,8 @@ const props = defineProps({
|
|
|
234
235
|
videos: { type: Array, required: false, default: () => [] },
|
|
235
236
|
variant: { type: String, required: false },
|
|
236
237
|
state: { type: String, required: false, default: "personal" },
|
|
237
|
-
title: { type: String, required: false, default: "" }
|
|
238
|
+
title: { type: String, required: false, default: "" },
|
|
239
|
+
placeId: { type: [String, Number], required: false }
|
|
238
240
|
});
|
|
239
241
|
const layoutMode = computed(() => {
|
|
240
242
|
if (props.variant) return props.variant;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
export interface MediaItem {
|
|
2
|
+
id?: string | number;
|
|
2
3
|
url: string;
|
|
3
4
|
description?: string;
|
|
4
5
|
}
|
|
@@ -8,6 +9,7 @@ type __VLS_Props = {
|
|
|
8
9
|
variant?: "featured" | "album";
|
|
9
10
|
state?: "personal" | "office" | "business";
|
|
10
11
|
title?: string;
|
|
12
|
+
placeId?: string | number;
|
|
11
13
|
};
|
|
12
14
|
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
|
|
13
15
|
title: string;
|
|
@@ -48,14 +48,14 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
48
48
|
id: string;
|
|
49
49
|
name: string;
|
|
50
50
|
required: boolean;
|
|
51
|
-
labelKey: string;
|
|
52
|
-
placeholder: string;
|
|
53
51
|
options: AutocompleteOption[] | string[] | number[];
|
|
54
52
|
description: string;
|
|
53
|
+
labelKey: string;
|
|
54
|
+
placeholder: string;
|
|
55
|
+
limit: number;
|
|
55
56
|
disabledErrorMessage: boolean;
|
|
56
57
|
disabledBorder: boolean;
|
|
57
58
|
showCounter: boolean;
|
|
58
|
-
limit: number;
|
|
59
59
|
returnObject: boolean;
|
|
60
60
|
freeText: boolean;
|
|
61
61
|
valueKey: string;
|
|
@@ -48,14 +48,14 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
48
48
|
id: string;
|
|
49
49
|
name: string;
|
|
50
50
|
required: boolean;
|
|
51
|
-
labelKey: string;
|
|
52
|
-
placeholder: string;
|
|
53
51
|
options: AutocompleteOption[] | string[] | number[];
|
|
54
52
|
description: string;
|
|
53
|
+
labelKey: string;
|
|
54
|
+
placeholder: string;
|
|
55
|
+
limit: number;
|
|
55
56
|
disabledErrorMessage: boolean;
|
|
56
57
|
disabledBorder: boolean;
|
|
57
58
|
showCounter: boolean;
|
|
58
|
-
limit: number;
|
|
59
59
|
returnObject: boolean;
|
|
60
60
|
freeText: boolean;
|
|
61
61
|
valueKey: string;
|
|
@@ -34,8 +34,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
|
|
|
34
34
|
name: string;
|
|
35
35
|
fullHeight: boolean;
|
|
36
36
|
fullWidth: boolean;
|
|
37
|
-
disabledErrorMessage: boolean;
|
|
38
37
|
limit: number;
|
|
38
|
+
disabledErrorMessage: boolean;
|
|
39
39
|
accept: string;
|
|
40
40
|
labelIcon: string;
|
|
41
41
|
disabledDrop: boolean;
|
|
@@ -34,8 +34,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
|
|
|
34
34
|
name: string;
|
|
35
35
|
fullHeight: boolean;
|
|
36
36
|
fullWidth: boolean;
|
|
37
|
-
disabledErrorMessage: boolean;
|
|
38
37
|
limit: number;
|
|
38
|
+
disabledErrorMessage: boolean;
|
|
39
39
|
accept: string;
|
|
40
40
|
labelIcon: string;
|
|
41
41
|
disabledDrop: boolean;
|
|
@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
|
|
|
12
12
|
}>, {
|
|
13
13
|
name: string;
|
|
14
14
|
modelValue: InputLinkItem[] | ContactChannel[];
|
|
15
|
-
showCounter: boolean;
|
|
16
15
|
limit: number;
|
|
16
|
+
showCounter: boolean;
|
|
17
17
|
format: "legacy" | "contact_channel";
|
|
18
18
|
defaultFirst: boolean;
|
|
19
19
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
@@ -12,8 +12,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
|
|
|
12
12
|
}>, {
|
|
13
13
|
name: string;
|
|
14
14
|
modelValue: InputLinkItem[] | ContactChannel[];
|
|
15
|
-
showCounter: boolean;
|
|
16
15
|
limit: number;
|
|
16
|
+
showCounter: boolean;
|
|
17
17
|
format: "legacy" | "contact_channel";
|
|
18
18
|
defaultFirst: boolean;
|
|
19
19
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
@@ -11,10 +11,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
|
|
|
11
11
|
label: string;
|
|
12
12
|
name: string;
|
|
13
13
|
modelValue: LocalizedNameItem[];
|
|
14
|
-
placeholder: string;
|
|
15
14
|
options: InputSelectItem[];
|
|
16
|
-
|
|
15
|
+
placeholder: string;
|
|
17
16
|
limit: number;
|
|
17
|
+
showCounter: boolean;
|
|
18
18
|
addLabel: string;
|
|
19
19
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
20
20
|
declare const _default: typeof __VLS_export;
|
|
@@ -11,10 +11,10 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {
|
|
|
11
11
|
label: string;
|
|
12
12
|
name: string;
|
|
13
13
|
modelValue: LocalizedNameItem[];
|
|
14
|
-
placeholder: string;
|
|
15
14
|
options: InputSelectItem[];
|
|
16
|
-
|
|
15
|
+
placeholder: string;
|
|
17
16
|
limit: number;
|
|
17
|
+
showCounter: boolean;
|
|
18
18
|
addLabel: string;
|
|
19
19
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
20
20
|
declare const _default: typeof __VLS_export;
|
|
@@ -19,13 +19,13 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
19
19
|
id: string;
|
|
20
20
|
name: string;
|
|
21
21
|
required: boolean;
|
|
22
|
+
description: string;
|
|
22
23
|
labelKey: string;
|
|
23
24
|
placeholder: string;
|
|
24
|
-
|
|
25
|
+
limit: number;
|
|
25
26
|
disabledErrorMessage: boolean;
|
|
26
27
|
disabledBorder: boolean;
|
|
27
28
|
showCounter: boolean;
|
|
28
|
-
limit: number;
|
|
29
29
|
descriptionKey: string;
|
|
30
30
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
31
31
|
declare const _default: typeof __VLS_export;
|
|
@@ -19,13 +19,13 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
19
19
|
id: string;
|
|
20
20
|
name: string;
|
|
21
21
|
required: boolean;
|
|
22
|
+
description: string;
|
|
22
23
|
labelKey: string;
|
|
23
24
|
placeholder: string;
|
|
24
|
-
|
|
25
|
+
limit: number;
|
|
25
26
|
disabledErrorMessage: boolean;
|
|
26
27
|
disabledBorder: boolean;
|
|
27
28
|
showCounter: boolean;
|
|
28
|
-
limit: number;
|
|
29
29
|
descriptionKey: string;
|
|
30
30
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
31
31
|
declare const _default: typeof __VLS_export;
|
|
@@ -25,8 +25,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
|
|
|
25
25
|
"onUpdate:modelValue"?: ((value: SelectedTag[]) => any) | undefined;
|
|
26
26
|
}>, {
|
|
27
27
|
name: string;
|
|
28
|
-
placeholder: string;
|
|
29
28
|
state: "user" | "admin";
|
|
29
|
+
placeholder: string;
|
|
30
30
|
limit: number;
|
|
31
31
|
ignore: string[];
|
|
32
32
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
@@ -25,8 +25,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
|
|
|
25
25
|
"onUpdate:modelValue"?: ((value: SelectedTag[]) => any) | undefined;
|
|
26
26
|
}>, {
|
|
27
27
|
name: string;
|
|
28
|
-
placeholder: string;
|
|
29
28
|
state: "user" | "admin";
|
|
29
|
+
placeholder: string;
|
|
30
30
|
limit: number;
|
|
31
31
|
ignore: string[];
|
|
32
32
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
@@ -59,10 +59,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
59
59
|
id: string;
|
|
60
60
|
name: string;
|
|
61
61
|
required: boolean;
|
|
62
|
+
limit: number;
|
|
62
63
|
disabledErrorMessage: boolean;
|
|
63
64
|
disabledBorder: boolean;
|
|
64
65
|
showCounter: boolean;
|
|
65
|
-
limit: number;
|
|
66
66
|
readonly: boolean;
|
|
67
67
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
68
68
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
@@ -59,10 +59,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
59
59
|
id: string;
|
|
60
60
|
name: string;
|
|
61
61
|
required: boolean;
|
|
62
|
+
limit: number;
|
|
62
63
|
disabledErrorMessage: boolean;
|
|
63
64
|
disabledBorder: boolean;
|
|
64
65
|
showCounter: boolean;
|
|
65
|
-
limit: number;
|
|
66
66
|
readonly: boolean;
|
|
67
67
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
68
68
|
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
@@ -47,10 +47,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
47
47
|
fullHeight: boolean;
|
|
48
48
|
fullWidth: boolean;
|
|
49
49
|
rows: number;
|
|
50
|
+
limit: number;
|
|
50
51
|
disabledErrorMessage: boolean;
|
|
51
52
|
disabledBorder: boolean;
|
|
52
53
|
showCounter: boolean;
|
|
53
|
-
limit: number;
|
|
54
54
|
readonly: boolean;
|
|
55
55
|
heightScroll: boolean;
|
|
56
56
|
spaceToComma: boolean;
|
|
@@ -47,10 +47,10 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
47
47
|
fullHeight: boolean;
|
|
48
48
|
fullWidth: boolean;
|
|
49
49
|
rows: number;
|
|
50
|
+
limit: number;
|
|
50
51
|
disabledErrorMessage: boolean;
|
|
51
52
|
disabledBorder: boolean;
|
|
52
53
|
showCounter: boolean;
|
|
53
|
-
limit: number;
|
|
54
54
|
readonly: boolean;
|
|
55
55
|
heightScroll: boolean;
|
|
56
56
|
spaceToComma: boolean;
|
|
@@ -20,8 +20,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
|
|
|
20
20
|
name: string;
|
|
21
21
|
required: boolean;
|
|
22
22
|
options: import("../../../types/components/input/input-select.js").InputSelectItem[];
|
|
23
|
-
showCounter: boolean;
|
|
24
23
|
limit: number;
|
|
24
|
+
showCounter: boolean;
|
|
25
25
|
selectClass: import("vue").HTMLAttributes["class"];
|
|
26
26
|
resetOnTypeChange: boolean;
|
|
27
27
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
@@ -20,8 +20,8 @@ declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {},
|
|
|
20
20
|
name: string;
|
|
21
21
|
required: boolean;
|
|
22
22
|
options: import("../../../types/components/input/input-select.js").InputSelectItem[];
|
|
23
|
-
showCounter: boolean;
|
|
24
23
|
limit: number;
|
|
24
|
+
showCounter: boolean;
|
|
25
25
|
selectClass: import("vue").HTMLAttributes["class"];
|
|
26
26
|
resetOnTypeChange: boolean;
|
|
27
27
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
@@ -8,6 +8,8 @@ export interface ModalMediaViewProps {
|
|
|
8
8
|
review?: CardReviewProps;
|
|
9
9
|
/** ป้ายชื่อผู้ดูแลสื่อนี้ ที่แสดงใน overlay (โหมดไม่ใช่ review) — office = "ผู้ดูแลระบบ", business = "ฝ่ายจัดการ" */
|
|
10
10
|
uploaderLabel?: string;
|
|
11
|
+
/** placeId ของสถานที่เจ้าของสื่อนี้ — ใช้ยิง POST /suggest-places/:id/reports ตอนกดรายงาน */
|
|
12
|
+
placeId?: string | number;
|
|
11
13
|
}
|
|
12
14
|
type __VLS_Props = ModalMediaViewProps;
|
|
13
15
|
type __VLS_ModelProps = {
|
|
@@ -174,22 +174,44 @@
|
|
|
174
174
|
|
|
175
175
|
<script setup>
|
|
176
176
|
import { ref, computed } from "vue";
|
|
177
|
+
import { useNuxtApp } from "nuxt/app";
|
|
177
178
|
import { useConvert } from "../../composables/useConvert";
|
|
179
|
+
import { useApi } from "../../composables/useApi";
|
|
178
180
|
const { convertNumber, convertDateTorelativeText } = useConvert();
|
|
181
|
+
const api = useApi();
|
|
182
|
+
const { $toast } = useNuxtApp();
|
|
179
183
|
const props = defineProps({
|
|
180
184
|
items: { type: Array, required: false, default: () => [] },
|
|
181
185
|
title: { type: String, required: false, default: "" },
|
|
182
186
|
startIndex: { type: Number, required: false, default: 0 },
|
|
183
187
|
review: { type: Object, required: false },
|
|
184
|
-
uploaderLabel: { type: String, required: false, default: "\u0E1C\u0E39\u0E49\u0E14\u0E39\u0E41\u0E25\u0E23\u0E30\u0E1A\u0E1A" }
|
|
188
|
+
uploaderLabel: { type: String, required: false, default: "\u0E1C\u0E39\u0E49\u0E14\u0E39\u0E41\u0E25\u0E23\u0E30\u0E1A\u0E1A" },
|
|
189
|
+
placeId: { type: [String, Number], required: false }
|
|
185
190
|
});
|
|
186
191
|
const isOpen = defineModel({ type: Boolean, ...{ default: false } });
|
|
187
192
|
const showMoreDescription = ref(false);
|
|
188
193
|
const currentIndex = ref(props.startIndex ?? 0);
|
|
189
194
|
const isOpenModalReport = ref(false);
|
|
190
195
|
const currentItem = computed(() => props.items[currentIndex.value] ?? null);
|
|
191
|
-
const onReportSubmit = (payload) => {
|
|
192
|
-
|
|
196
|
+
const onReportSubmit = async (payload) => {
|
|
197
|
+
if (!props.placeId || !currentItem.value?.id) {
|
|
198
|
+
isOpenModalReport.value = false;
|
|
199
|
+
return;
|
|
200
|
+
}
|
|
201
|
+
try {
|
|
202
|
+
await api(`/suggest-places/${props.placeId}/reports`, {
|
|
203
|
+
method: "post",
|
|
204
|
+
body: {
|
|
205
|
+
media_id: String(currentItem.value.id),
|
|
206
|
+
reason_code: payload.value,
|
|
207
|
+
description: payload.description
|
|
208
|
+
}
|
|
209
|
+
});
|
|
210
|
+
$toast?.success("\u0E2A\u0E48\u0E07\u0E23\u0E32\u0E22\u0E07\u0E32\u0E19\u0E2A\u0E33\u0E40\u0E23\u0E47\u0E08 !");
|
|
211
|
+
} catch (error) {
|
|
212
|
+
console.error(error);
|
|
213
|
+
$toast?.error("\u0E40\u0E01\u0E34\u0E14\u0E02\u0E49\u0E2D\u0E1C\u0E34\u0E14\u0E1E\u0E25\u0E32\u0E14 \u0E01\u0E23\u0E38\u0E13\u0E32\u0E25\u0E2D\u0E07\u0E43\u0E2B\u0E21\u0E48\u0E2D\u0E35\u0E01\u0E04\u0E23\u0E31\u0E49\u0E07 !");
|
|
214
|
+
}
|
|
193
215
|
isOpenModalReport.value = false;
|
|
194
216
|
};
|
|
195
217
|
</script>
|
|
@@ -8,6 +8,8 @@ export interface ModalMediaViewProps {
|
|
|
8
8
|
review?: CardReviewProps;
|
|
9
9
|
/** ป้ายชื่อผู้ดูแลสื่อนี้ ที่แสดงใน overlay (โหมดไม่ใช่ review) — office = "ผู้ดูแลระบบ", business = "ฝ่ายจัดการ" */
|
|
10
10
|
uploaderLabel?: string;
|
|
11
|
+
/** placeId ของสถานที่เจ้าของสื่อนี้ — ใช้ยิง POST /suggest-places/:id/reports ตอนกดรายงาน */
|
|
12
|
+
placeId?: string | number;
|
|
11
13
|
}
|
|
12
14
|
type __VLS_Props = ModalMediaViewProps;
|
|
13
15
|
type __VLS_ModelProps = {
|
|
@@ -44,7 +44,7 @@ const isOpenModalReport = ref(false);
|
|
|
44
44
|
const isOpenModalProfileEdit = ref(false);
|
|
45
45
|
const reportState = ref("place-edit");
|
|
46
46
|
const onReportSubmit = (payload) => {
|
|
47
|
-
|
|
47
|
+
emit("report-submit", payload);
|
|
48
48
|
isOpenModalReport.value = false;
|
|
49
49
|
};
|
|
50
50
|
const menu = [
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export interface TimelineItem {
|
|
2
|
+
id?: string | number;
|
|
3
|
+
avatar?: string;
|
|
4
|
+
name?: string;
|
|
5
|
+
time?: string | Date;
|
|
6
|
+
description?: string;
|
|
7
|
+
}
|
|
8
|
+
type __VLS_Props = {
|
|
9
|
+
items: TimelineItem[];
|
|
10
|
+
};
|
|
11
|
+
declare var __VLS_1: {
|
|
12
|
+
item: TimelineItem;
|
|
13
|
+
index: number;
|
|
14
|
+
};
|
|
15
|
+
type __VLS_Slots = {} & {
|
|
16
|
+
content?: (props: typeof __VLS_1) => any;
|
|
17
|
+
};
|
|
18
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
19
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
20
|
+
declare const _default: typeof __VLS_export;
|
|
21
|
+
export default _default;
|
|
22
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
23
|
+
new (): {
|
|
24
|
+
$slots: S;
|
|
25
|
+
};
|
|
26
|
+
};
|
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div class="flex flex-col">
|
|
3
|
+
<div
|
|
4
|
+
v-for="(item, index) in props.items"
|
|
5
|
+
:key="item.id ?? index"
|
|
6
|
+
class="flex gap-[8px]"
|
|
7
|
+
>
|
|
8
|
+
<!-- dot + connecting line (โครงของ component เอง) -->
|
|
9
|
+
<div class="flex flex-col items-center w-[8px]">
|
|
10
|
+
<div class="w-[20px] h-[26px] flex items-center justify-center">
|
|
11
|
+
<div class="w-[10px] h-[10px] rounded-full bg-black shrink-0" />
|
|
12
|
+
</div>
|
|
13
|
+
<div class="w-[2px] flex-1 bg-bright" />
|
|
14
|
+
</div>
|
|
15
|
+
|
|
16
|
+
<!-- เนื้อหา — ปล่อยให้ผู้ใช้ครอบเองผ่าน slot ได้ ถ้าไม่ส่งมาใช้ default นี้ -->
|
|
17
|
+
<div
|
|
18
|
+
class="flex flex-col gap-[8px]"
|
|
19
|
+
:class="index < props.items.length - 1 ? 'pb-[16px]' : ''"
|
|
20
|
+
>
|
|
21
|
+
<slot name="content" :item="item" :index="index">
|
|
22
|
+
<div class="flex gap-[8px]">
|
|
23
|
+
<Avatar :src="item.avatar" :alt="item.name" :size="30" />
|
|
24
|
+
<div class="flex flex-col gap-[8px]">
|
|
25
|
+
<div class="flex flex-col gap-[4px]">
|
|
26
|
+
<span class="font-body-large text-gray">{{ item.name }}</span>
|
|
27
|
+
<span class="font-body-small text-gray"
|
|
28
|
+
>{{ convertDateTime(item.time) }} น.</span
|
|
29
|
+
>
|
|
30
|
+
</div>
|
|
31
|
+
<p class="font-body-large text-gray">
|
|
32
|
+
{{ item.description }}
|
|
33
|
+
</p>
|
|
34
|
+
</div>
|
|
35
|
+
</div>
|
|
36
|
+
</slot>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
</template>
|
|
41
|
+
|
|
42
|
+
<script setup>
|
|
43
|
+
import { useConvert } from "#pukaad-ui/runtime/composables/useConvert";
|
|
44
|
+
const props = defineProps({
|
|
45
|
+
items: { type: Array, required: true }
|
|
46
|
+
});
|
|
47
|
+
const { convertDateTime } = useConvert();
|
|
48
|
+
</script>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export interface TimelineItem {
|
|
2
|
+
id?: string | number;
|
|
3
|
+
avatar?: string;
|
|
4
|
+
name?: string;
|
|
5
|
+
time?: string | Date;
|
|
6
|
+
description?: string;
|
|
7
|
+
}
|
|
8
|
+
type __VLS_Props = {
|
|
9
|
+
items: TimelineItem[];
|
|
10
|
+
};
|
|
11
|
+
declare var __VLS_1: {
|
|
12
|
+
item: TimelineItem;
|
|
13
|
+
index: number;
|
|
14
|
+
};
|
|
15
|
+
type __VLS_Slots = {} & {
|
|
16
|
+
content?: (props: typeof __VLS_1) => any;
|
|
17
|
+
};
|
|
18
|
+
declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
19
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
20
|
+
declare const _default: typeof __VLS_export;
|
|
21
|
+
export default _default;
|
|
22
|
+
type __VLS_WithSlots<T, S> = T & {
|
|
23
|
+
new (): {
|
|
24
|
+
$slots: S;
|
|
25
|
+
};
|
|
26
|
+
};
|