pukaad-ui-lib 1.401.0 → 1.403.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/card/card-refer.d.vue.ts +26 -0
- package/dist/runtime/components/card/card-refer.vue +126 -0
- package/dist/runtime/components/card/card-refer.vue.d.ts +26 -0
- package/dist/runtime/components/display/display-video.vue +7 -3
- 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-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/package.json +1 -1
package/dist/module.json
CHANGED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export interface CardReferItem {
|
|
2
|
+
id?: string;
|
|
3
|
+
mention_type?: string;
|
|
4
|
+
target_id?: string;
|
|
5
|
+
content_type?: string;
|
|
6
|
+
title?: string;
|
|
7
|
+
image_url?: string;
|
|
8
|
+
place_name?: string;
|
|
9
|
+
place_address?: string;
|
|
10
|
+
author_name?: string;
|
|
11
|
+
author_avatar?: string;
|
|
12
|
+
link_title?: string;
|
|
13
|
+
link_url?: string;
|
|
14
|
+
}
|
|
15
|
+
type __VLS_Props = {
|
|
16
|
+
item?: CardReferItem;
|
|
17
|
+
};
|
|
18
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
19
|
+
select: (item: CardReferItem) => any;
|
|
20
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
21
|
+
onSelect?: ((item: CardReferItem) => any) | undefined;
|
|
22
|
+
}>, {
|
|
23
|
+
item: CardReferItem;
|
|
24
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
25
|
+
declare const _default: typeof __VLS_export;
|
|
26
|
+
export default _default;
|
|
@@ -0,0 +1,126 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
class="flex gap-[16px] bg-bright p-[8px] rounded-[6px] w-full items-center cursor-pointer"
|
|
4
|
+
@click="onClick"
|
|
5
|
+
>
|
|
6
|
+
<!-- post-it -->
|
|
7
|
+
<div
|
|
8
|
+
v-if="isPost && props.item.content_type === 'post_it'"
|
|
9
|
+
class="w-[50px] h-[50px] shrink-0 bg-info rounded-sm flex items-center justify-center"
|
|
10
|
+
>
|
|
11
|
+
<Icon name="fa6-solid:message" size="24" class="text-primary" />
|
|
12
|
+
</div>
|
|
13
|
+
|
|
14
|
+
<!-- Image -->
|
|
15
|
+
<Image
|
|
16
|
+
v-else-if="isPost && props.item.content_type === 'image'"
|
|
17
|
+
:src="props.item.image_url"
|
|
18
|
+
:width="50"
|
|
19
|
+
:height="50"
|
|
20
|
+
class="shrink-0 rounded-[4px]"
|
|
21
|
+
/>
|
|
22
|
+
|
|
23
|
+
<!-- video -->
|
|
24
|
+
<div
|
|
25
|
+
v-else-if="isPost && props.item.content_type === 'video'"
|
|
26
|
+
class="relative w-[50px] h-[50px] shrink-0"
|
|
27
|
+
>
|
|
28
|
+
<Image
|
|
29
|
+
:src="props.item.image_url"
|
|
30
|
+
:width="50"
|
|
31
|
+
:height="50"
|
|
32
|
+
class="rounded-[4px]"
|
|
33
|
+
/>
|
|
34
|
+
<div
|
|
35
|
+
class="absolute inset-0 m-auto bg-black/50 w-[24px] h-[24px] rounded-full flex items-center justify-center"
|
|
36
|
+
>
|
|
37
|
+
<Icon name="lucide:play" size="16" class="text-white" />
|
|
38
|
+
</div>
|
|
39
|
+
</div>
|
|
40
|
+
|
|
41
|
+
<!-- Blog -->
|
|
42
|
+
<Image
|
|
43
|
+
v-else-if="props.item.mention_type === 'blog'"
|
|
44
|
+
:src="props.item.image_url"
|
|
45
|
+
:width="89"
|
|
46
|
+
:height="50"
|
|
47
|
+
class="shrink-0 rounded-[4px]"
|
|
48
|
+
/>
|
|
49
|
+
|
|
50
|
+
<!-- Link -->
|
|
51
|
+
<div
|
|
52
|
+
v-else-if="props.item.mention_type === 'link'"
|
|
53
|
+
class="w-[50px] h-[50px] shrink-0 bg-info rounded-sm flex items-center justify-center"
|
|
54
|
+
>
|
|
55
|
+
<Icon name="fa6-solid:link" size="24" class="text-primary" />
|
|
56
|
+
</div>
|
|
57
|
+
|
|
58
|
+
<!-- ปลายทางถูกลบ / campaign ที่ยัง resolve ไม่ได้ — ไม่มีรูปให้โชว์ -->
|
|
59
|
+
<div
|
|
60
|
+
v-else
|
|
61
|
+
class="w-[50px] h-[50px] shrink-0 bg-mercury rounded-sm flex items-center justify-center"
|
|
62
|
+
>
|
|
63
|
+
<Icon name="lucide:file-question" size="24" class="text-gray" />
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<div class="flex flex-col gap-[4px] min-w-0 flex-1">
|
|
67
|
+
<div class="font-body-large-prominent w-full truncate">
|
|
68
|
+
{{ displayTitle }}
|
|
69
|
+
</div>
|
|
70
|
+
|
|
71
|
+
<!-- บล็อกโชว์ผู้เขียน อย่างอื่นโชว์บรรทัดรองตาม type -->
|
|
72
|
+
<div
|
|
73
|
+
v-if="props.item.mention_type === 'blog' && props.item.author_name"
|
|
74
|
+
class="flex gap-[4px] items-center"
|
|
75
|
+
>
|
|
76
|
+
<Avatar :src="props.item.author_avatar" :size="16" />
|
|
77
|
+
<div class="font-body-small text-gray truncate">
|
|
78
|
+
{{ props.item.author_name }}
|
|
79
|
+
</div>
|
|
80
|
+
</div>
|
|
81
|
+
<div v-else-if="subTitle" class="font-body-small text-gray w-full truncate">
|
|
82
|
+
{{ subTitle }}
|
|
83
|
+
</div>
|
|
84
|
+
</div>
|
|
85
|
+
|
|
86
|
+
<Icon name="lucide:chevron-right" size="24" class="shrink-0" />
|
|
87
|
+
</div>
|
|
88
|
+
</template>
|
|
89
|
+
|
|
90
|
+
<script setup>
|
|
91
|
+
import { computed } from "vue";
|
|
92
|
+
import { useRouter } from "vue-router";
|
|
93
|
+
const emit = defineEmits(["select"]);
|
|
94
|
+
const props = defineProps({
|
|
95
|
+
item: { type: Object, required: false, default: () => ({}) }
|
|
96
|
+
});
|
|
97
|
+
const router = useRouter();
|
|
98
|
+
const isPost = computed(() => props.item.mention_type === "post");
|
|
99
|
+
const displayTitle = computed(() => {
|
|
100
|
+
if (props.item.mention_type === "link") {
|
|
101
|
+
return props.item.link_title || props.item.link_url || "";
|
|
102
|
+
}
|
|
103
|
+
return props.item.title || "\u0E44\u0E21\u0E48\u0E1E\u0E1A\u0E23\u0E32\u0E22\u0E01\u0E32\u0E23";
|
|
104
|
+
});
|
|
105
|
+
const subTitle = computed(() => {
|
|
106
|
+
if (props.item.mention_type === "link") {
|
|
107
|
+
return props.item.link_title ? props.item.link_url : "";
|
|
108
|
+
}
|
|
109
|
+
if (isPost.value) return props.item.place_name;
|
|
110
|
+
return "";
|
|
111
|
+
});
|
|
112
|
+
const onClick = () => {
|
|
113
|
+
emit("select", props.item);
|
|
114
|
+
const { mention_type, target_id, link_url } = props.item;
|
|
115
|
+
if (mention_type === "link") {
|
|
116
|
+
if (link_url) window.open(link_url, "_blank", "noopener");
|
|
117
|
+
return;
|
|
118
|
+
}
|
|
119
|
+
if (!target_id) return;
|
|
120
|
+
if (mention_type === "post") {
|
|
121
|
+
router.push(`/content/${target_id}`);
|
|
122
|
+
} else if (mention_type === "blog") {
|
|
123
|
+
router.push(`/blog/${target_id}`);
|
|
124
|
+
}
|
|
125
|
+
};
|
|
126
|
+
</script>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
export interface CardReferItem {
|
|
2
|
+
id?: string;
|
|
3
|
+
mention_type?: string;
|
|
4
|
+
target_id?: string;
|
|
5
|
+
content_type?: string;
|
|
6
|
+
title?: string;
|
|
7
|
+
image_url?: string;
|
|
8
|
+
place_name?: string;
|
|
9
|
+
place_address?: string;
|
|
10
|
+
author_name?: string;
|
|
11
|
+
author_avatar?: string;
|
|
12
|
+
link_title?: string;
|
|
13
|
+
link_url?: string;
|
|
14
|
+
}
|
|
15
|
+
type __VLS_Props = {
|
|
16
|
+
item?: CardReferItem;
|
|
17
|
+
};
|
|
18
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
19
|
+
select: (item: CardReferItem) => any;
|
|
20
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
|
|
21
|
+
onSelect?: ((item: CardReferItem) => any) | undefined;
|
|
22
|
+
}>, {
|
|
23
|
+
item: CardReferItem;
|
|
24
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
25
|
+
declare const _default: typeof __VLS_export;
|
|
26
|
+
export default _default;
|
|
@@ -60,9 +60,13 @@
|
|
|
60
60
|
|
|
61
61
|
<!-- ปุ่มขยายเต็มจอ -->
|
|
62
62
|
<slot v-if="props.fullscreenButton" name="fullscreen" :click="onFullscreen">
|
|
63
|
-
<div class="absolute top-[
|
|
64
|
-
<Button
|
|
65
|
-
<Icon
|
|
63
|
+
<div class="absolute top-[24px] right-[24px] z-10">
|
|
64
|
+
<Button variant="text" @click="onFullscreen">
|
|
65
|
+
<Icon
|
|
66
|
+
name="fa7-solid:up-right-and-down-left-from-center"
|
|
67
|
+
:size="24"
|
|
68
|
+
class="text-white"
|
|
69
|
+
/>
|
|
66
70
|
</Button>
|
|
67
71
|
</div>
|
|
68
72
|
</slot>
|
|
@@ -65,14 +65,14 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
|
|
|
65
65
|
src: string;
|
|
66
66
|
center: boolean;
|
|
67
67
|
crossorigin: "" | "anonymous" | "use-credentials";
|
|
68
|
+
background: boolean;
|
|
69
|
+
modal: boolean;
|
|
68
70
|
responsive: boolean;
|
|
69
71
|
restore: boolean;
|
|
70
72
|
checkCrossOrigin: boolean;
|
|
71
73
|
checkOrientation: boolean;
|
|
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;
|
|
@@ -65,14 +65,14 @@ declare const __VLS_export: import("vue").DefineComponent<ImageCropperProps, {
|
|
|
65
65
|
src: string;
|
|
66
66
|
center: boolean;
|
|
67
67
|
crossorigin: "" | "anonymous" | "use-credentials";
|
|
68
|
+
background: boolean;
|
|
69
|
+
modal: boolean;
|
|
68
70
|
responsive: boolean;
|
|
69
71
|
restore: boolean;
|
|
70
72
|
checkCrossOrigin: boolean;
|
|
71
73
|
checkOrientation: boolean;
|
|
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;
|
|
@@ -59,8 +59,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
59
59
|
id: string;
|
|
60
60
|
name: string;
|
|
61
61
|
required: boolean;
|
|
62
|
-
limit: number;
|
|
63
62
|
readonly: boolean;
|
|
63
|
+
limit: number;
|
|
64
64
|
disabledErrorMessage: boolean;
|
|
65
65
|
disabledBorder: boolean;
|
|
66
66
|
showCounter: boolean;
|
|
@@ -59,8 +59,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
59
59
|
id: string;
|
|
60
60
|
name: string;
|
|
61
61
|
required: boolean;
|
|
62
|
-
limit: number;
|
|
63
62
|
readonly: boolean;
|
|
63
|
+
limit: number;
|
|
64
64
|
disabledErrorMessage: boolean;
|
|
65
65
|
disabledBorder: boolean;
|
|
66
66
|
showCounter: boolean;
|
|
@@ -47,8 +47,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
47
47
|
fullHeight: boolean;
|
|
48
48
|
fullWidth: boolean;
|
|
49
49
|
rows: number;
|
|
50
|
-
limit: number;
|
|
51
50
|
readonly: boolean;
|
|
51
|
+
limit: number;
|
|
52
52
|
disabledErrorMessage: boolean;
|
|
53
53
|
disabledBorder: boolean;
|
|
54
54
|
showCounter: boolean;
|
|
@@ -47,8 +47,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
|
|
|
47
47
|
fullHeight: boolean;
|
|
48
48
|
fullWidth: boolean;
|
|
49
49
|
rows: number;
|
|
50
|
-
limit: number;
|
|
51
50
|
readonly: boolean;
|
|
51
|
+
limit: number;
|
|
52
52
|
disabledErrorMessage: boolean;
|
|
53
53
|
disabledBorder: boolean;
|
|
54
54
|
showCounter: boolean;
|