pukaad-ui-lib 1.188.0 → 1.188.1
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
package/package.json
CHANGED
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import type { DrawerNotificationProps } from "@/types/components/drawer/drawer-notification";
|
|
2
|
-
type __VLS_Props = DrawerNotificationProps;
|
|
3
|
-
declare const isOpen: import("vue").ModelRef<boolean, string, boolean, boolean>;
|
|
4
|
-
type __VLS_ModelProps = {
|
|
5
|
-
modelValue?: typeof isOpen['value'];
|
|
6
|
-
};
|
|
7
|
-
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
8
|
-
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
9
|
-
"update:modelValue": (value: boolean) => any;
|
|
10
|
-
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
11
|
-
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
|
12
|
-
}>, {
|
|
13
|
-
items: {
|
|
14
|
-
general?: import("@/types/components/drawer/drawer-notification").general[];
|
|
15
|
-
order?: import("@/types/components/drawer/drawer-notification").order[];
|
|
16
|
-
promotion?: import("@/types/components/drawer/drawer-notification").promotion[];
|
|
17
|
-
activity?: import("@/types/components/drawer/drawer-notification").activity[];
|
|
18
|
-
system?: import("@/types/components/drawer/drawer-notification").system[];
|
|
19
|
-
};
|
|
20
|
-
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
21
|
-
declare const _default: typeof __VLS_export;
|
|
22
|
-
export default _default;
|
|
@@ -1,340 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<Drawer title="การแจ้งเตือน" v-model="isOpen" :width="707">
|
|
3
|
-
<template #header>
|
|
4
|
-
<div class="flex justify-between p-[16px]">
|
|
5
|
-
<div class="font-title-medium-prominent">การแจ้งเตือน</div>
|
|
6
|
-
<div class="flex gap-[16px]">
|
|
7
|
-
<Dropdown>
|
|
8
|
-
<template #default="{ isOpen }">
|
|
9
|
-
<Button color="black" variant="text" disabled-padding>
|
|
10
|
-
<Icon :size="24" name="lucide:settings" />
|
|
11
|
-
</Button>
|
|
12
|
-
</template>
|
|
13
|
-
<template #content>
|
|
14
|
-
<div class="w-[252px] font-body-large">
|
|
15
|
-
<div
|
|
16
|
-
class="hover:bg-bright cursor-pointer flex gap-[4px] p-[8px] items-center"
|
|
17
|
-
>
|
|
18
|
-
<Icon :size="16" name="lucide:check" />
|
|
19
|
-
<div class="font-body-medium">
|
|
20
|
-
ทำเครื่องหมายว่าอ่านแล้วทั้งหมด
|
|
21
|
-
</div>
|
|
22
|
-
</div>
|
|
23
|
-
<Divider />
|
|
24
|
-
<NuxtLink
|
|
25
|
-
to="/setting/notification"
|
|
26
|
-
class="hover:bg-bright cursor-pointer flex gap-[4px] p-[8px] items-center"
|
|
27
|
-
@click="closeDrawer"
|
|
28
|
-
>
|
|
29
|
-
<Icon :size="20" name="lucide:settings" />
|
|
30
|
-
<div class="font-body-medium">ตั้งค่าการแจ้งเตือน</div>
|
|
31
|
-
</NuxtLink>
|
|
32
|
-
</div>
|
|
33
|
-
</template>
|
|
34
|
-
</Dropdown>
|
|
35
|
-
<Button
|
|
36
|
-
color="black"
|
|
37
|
-
variant="text"
|
|
38
|
-
disabled-padding
|
|
39
|
-
@click="closeDrawer"
|
|
40
|
-
>
|
|
41
|
-
<Icon :name="'lucide:x'" :size="24" />
|
|
42
|
-
</Button>
|
|
43
|
-
</div>
|
|
44
|
-
</div>
|
|
45
|
-
</template>
|
|
46
|
-
<div class="flex flex-col gap-[16px]">
|
|
47
|
-
<Card full-width>
|
|
48
|
-
<Tab
|
|
49
|
-
:items="items"
|
|
50
|
-
disabled-content
|
|
51
|
-
tabButtonSize="small"
|
|
52
|
-
:tabButtonGap="16"
|
|
53
|
-
v-model="tab"
|
|
54
|
-
>
|
|
55
|
-
<template
|
|
56
|
-
v-for="(item, i) in items"
|
|
57
|
-
:key="i"
|
|
58
|
-
#[`tab-${item.value}-label-text`]
|
|
59
|
-
>
|
|
60
|
-
<div class="flex gap-[8px] items-center">
|
|
61
|
-
<Icon :name="item.icon" :size="20" />
|
|
62
|
-
<div class="relative">
|
|
63
|
-
{{ item.label }}
|
|
64
|
-
<!-- <Avatar
|
|
65
|
-
v-if="item.is_noti"
|
|
66
|
-
class="absolute top-0 -right-[8px]"
|
|
67
|
-
:size="8"
|
|
68
|
-
color="error"
|
|
69
|
-
/> -->
|
|
70
|
-
</div>
|
|
71
|
-
</div>
|
|
72
|
-
</template>
|
|
73
|
-
</Tab>
|
|
74
|
-
</Card>
|
|
75
|
-
<Tab v-model="tab" :items="items" :tabButtonGap="16" disabled-header>
|
|
76
|
-
<template #tab-content-general>
|
|
77
|
-
<div class="flex flex-col gap-[4px] w-full">
|
|
78
|
-
<div v-for="(item, index) in props.items.general" :key="index">
|
|
79
|
-
<Card full-width class="hover:bg-bright cursor-pointer">
|
|
80
|
-
<div class="flex gap-[8px] items-center">
|
|
81
|
-
<div>
|
|
82
|
-
<!-- <Avatar :size="40" :src="item.avatar" /> -->
|
|
83
|
-
</div>
|
|
84
|
-
<div class="flex flex-col gap-[4px]">
|
|
85
|
-
<div class="font-body-large">
|
|
86
|
-
{{ item.content }}
|
|
87
|
-
</div>
|
|
88
|
-
<div class="font-body-small text-gray">
|
|
89
|
-
{{ item.time_created }}
|
|
90
|
-
</div>
|
|
91
|
-
</div>
|
|
92
|
-
<div class="flex items-center gap-[8px] ml-auto">
|
|
93
|
-
<Image
|
|
94
|
-
v-if="item.image"
|
|
95
|
-
:width="40"
|
|
96
|
-
:height="40"
|
|
97
|
-
:src="item.image"
|
|
98
|
-
class="rounded-[4px]"
|
|
99
|
-
/>
|
|
100
|
-
<div
|
|
101
|
-
v-else-if="item.video_url"
|
|
102
|
-
class="relative w-[40px] h-[40px] rounded-[4px] bg-black flex justify-center items-center overflow-hidden"
|
|
103
|
-
>
|
|
104
|
-
<video
|
|
105
|
-
class="w-[40px] h-[40px] object-cover rounded-[4px]"
|
|
106
|
-
:src="item.video_url"
|
|
107
|
-
preload="metadata"
|
|
108
|
-
/>
|
|
109
|
-
<div
|
|
110
|
-
class="absolute bg-black/50 w-[24px] h-[24px] rounded-full flex justify-center items-center"
|
|
111
|
-
>
|
|
112
|
-
<Icon
|
|
113
|
-
name="material-symbols:play-arrow"
|
|
114
|
-
class="text-white"
|
|
115
|
-
/>
|
|
116
|
-
</div>
|
|
117
|
-
</div>
|
|
118
|
-
<div class="w-[20px]">
|
|
119
|
-
<Icon
|
|
120
|
-
v-if="item.is_unread"
|
|
121
|
-
class="text-primary"
|
|
122
|
-
:size="20"
|
|
123
|
-
name="fad:armrecording"
|
|
124
|
-
/>
|
|
125
|
-
</div>
|
|
126
|
-
</div>
|
|
127
|
-
</div>
|
|
128
|
-
</Card>
|
|
129
|
-
</div>
|
|
130
|
-
</div>
|
|
131
|
-
</template>
|
|
132
|
-
|
|
133
|
-
<template #tab-content-order>
|
|
134
|
-
<div class="flex flex-col gap-[4px]">
|
|
135
|
-
<div v-for="(item, index) in props.items.order" :key="index">
|
|
136
|
-
<Card full-width class="hover:bg-bright cursor-pointer">
|
|
137
|
-
<div class="flex gap-[8px] items-center">
|
|
138
|
-
<div>
|
|
139
|
-
<Image
|
|
140
|
-
v-if="item.image_url"
|
|
141
|
-
:width="40"
|
|
142
|
-
:height="40"
|
|
143
|
-
:src="item.image_url"
|
|
144
|
-
class="rounded-[4px]"
|
|
145
|
-
/>
|
|
146
|
-
</div>
|
|
147
|
-
<div class="flex flex-col gap-[4px]">
|
|
148
|
-
<p class="font-body-large">
|
|
149
|
-
<template
|
|
150
|
-
v-for="(text, index) in item.content"
|
|
151
|
-
:key="index"
|
|
152
|
-
>
|
|
153
|
-
<span
|
|
154
|
-
:class="
|
|
155
|
-
text.is_active ? 'text-primary' : 'text-black'
|
|
156
|
-
"
|
|
157
|
-
>
|
|
158
|
-
{{ text.text }}
|
|
159
|
-
</span>
|
|
160
|
-
</template>
|
|
161
|
-
</p>
|
|
162
|
-
|
|
163
|
-
<div class="font-body-small text-gray">
|
|
164
|
-
{{ item.time_created }}
|
|
165
|
-
</div>
|
|
166
|
-
</div>
|
|
167
|
-
<div class="flex items-center w-[20px] gap-[8px] ml-auto">
|
|
168
|
-
<Icon
|
|
169
|
-
v-if="item.is_unread"
|
|
170
|
-
class="text-primary"
|
|
171
|
-
:size="20"
|
|
172
|
-
name="fad:armrecording"
|
|
173
|
-
/>
|
|
174
|
-
</div>
|
|
175
|
-
</div>
|
|
176
|
-
</Card>
|
|
177
|
-
</div>
|
|
178
|
-
</div>
|
|
179
|
-
</template>
|
|
180
|
-
|
|
181
|
-
<template #tab-content-promotion>
|
|
182
|
-
<div class="flex flex-col gap-[4px]">
|
|
183
|
-
<div v-for="(item, index) in props.items.promotion" :key="index">
|
|
184
|
-
<Card full-width class="hover:bg-bright cursor-pointer">
|
|
185
|
-
<div class="flex gap-[8px] items-center">
|
|
186
|
-
<div>
|
|
187
|
-
<Image
|
|
188
|
-
v-if="item.image_url"
|
|
189
|
-
:width="40"
|
|
190
|
-
:height="40"
|
|
191
|
-
:src="item.image_url"
|
|
192
|
-
class="rounded-[4px]"
|
|
193
|
-
/>
|
|
194
|
-
</div>
|
|
195
|
-
<div class="flex flex-col gap-[4px]">
|
|
196
|
-
<div class="font-body-large">
|
|
197
|
-
{{ item.content }}
|
|
198
|
-
</div>
|
|
199
|
-
<div class="font-body-small text-gray">
|
|
200
|
-
{{ item.time_created }}
|
|
201
|
-
</div>
|
|
202
|
-
</div>
|
|
203
|
-
<div class="flex w-[20px] items-center gap-[8px] ml-auto">
|
|
204
|
-
<Icon
|
|
205
|
-
v-if="item.is_unread"
|
|
206
|
-
class="text-primary"
|
|
207
|
-
:size="20"
|
|
208
|
-
name="fad:armrecording"
|
|
209
|
-
/>
|
|
210
|
-
</div>
|
|
211
|
-
</div>
|
|
212
|
-
</Card>
|
|
213
|
-
</div>
|
|
214
|
-
</div>
|
|
215
|
-
</template>
|
|
216
|
-
|
|
217
|
-
<template #tab-content-activity>
|
|
218
|
-
<div class="flex flex-col gap-[4px]">
|
|
219
|
-
<div v-for="(item, index) in props.items.activity" :key="index">
|
|
220
|
-
<Card full-width class="hover:bg-bright cursor-pointer">
|
|
221
|
-
<div class="flex gap-[8px] items-center">
|
|
222
|
-
<div>
|
|
223
|
-
<Image
|
|
224
|
-
v-if="item.image_url"
|
|
225
|
-
:width="40"
|
|
226
|
-
:height="40"
|
|
227
|
-
:src="item.image_url"
|
|
228
|
-
class="rounded-[4px]"
|
|
229
|
-
/>
|
|
230
|
-
</div>
|
|
231
|
-
<div class="flex flex-col gap-[4px]">
|
|
232
|
-
<div class="font-body-large">
|
|
233
|
-
{{ item.content }}
|
|
234
|
-
</div>
|
|
235
|
-
<div class="font-body-small text-gray">
|
|
236
|
-
{{ item.time_created }}
|
|
237
|
-
</div>
|
|
238
|
-
</div>
|
|
239
|
-
<div class="flex w-[20px] items-center gap-[8px] ml-auto">
|
|
240
|
-
<Icon
|
|
241
|
-
v-if="item.is_unread"
|
|
242
|
-
class="text-primary"
|
|
243
|
-
:size="20"
|
|
244
|
-
name="fad:armrecording"
|
|
245
|
-
/>
|
|
246
|
-
</div>
|
|
247
|
-
</div>
|
|
248
|
-
</Card>
|
|
249
|
-
</div>
|
|
250
|
-
</div>
|
|
251
|
-
</template>
|
|
252
|
-
|
|
253
|
-
<template #tab-content-system>
|
|
254
|
-
<div class="flex flex-col gap-[4px]">
|
|
255
|
-
<div v-for="(item, index) in props.items.system" :key="index">
|
|
256
|
-
<Card full-width class="hover:bg-bright cursor-pointer">
|
|
257
|
-
<div class="flex gap-[8px] items-center">
|
|
258
|
-
<div>
|
|
259
|
-
<Icon
|
|
260
|
-
class="text-gray"
|
|
261
|
-
name="pukaad:memsg-square"
|
|
262
|
-
:width="40"
|
|
263
|
-
:height="40"
|
|
264
|
-
/>
|
|
265
|
-
</div>
|
|
266
|
-
<div class="flex flex-col gap-[4px]">
|
|
267
|
-
<div class="font-body-large">
|
|
268
|
-
{{ item.content }}
|
|
269
|
-
</div>
|
|
270
|
-
<div class="font-body-small text-gray">
|
|
271
|
-
{{ item.time_created }}
|
|
272
|
-
</div>
|
|
273
|
-
</div>
|
|
274
|
-
<div class="flex w-[20px] items-center gap-[8px] ml-auto">
|
|
275
|
-
<Icon
|
|
276
|
-
v-if="item.is_unread"
|
|
277
|
-
class="text-primary"
|
|
278
|
-
:size="20"
|
|
279
|
-
name="fad:armrecording"
|
|
280
|
-
/>
|
|
281
|
-
</div>
|
|
282
|
-
</div>
|
|
283
|
-
</Card>
|
|
284
|
-
</div>
|
|
285
|
-
</div>
|
|
286
|
-
</template>
|
|
287
|
-
</Tab>
|
|
288
|
-
</div>
|
|
289
|
-
</Drawer>
|
|
290
|
-
</template>
|
|
291
|
-
|
|
292
|
-
<script setup>
|
|
293
|
-
import { ref } from "vue";
|
|
294
|
-
const props = defineProps({
|
|
295
|
-
items: { type: Object, required: false, default: () => ({
|
|
296
|
-
general: [],
|
|
297
|
-
order: [],
|
|
298
|
-
promotion: [],
|
|
299
|
-
activity: [],
|
|
300
|
-
system: []
|
|
301
|
-
}) }
|
|
302
|
-
});
|
|
303
|
-
const isOpen = defineModel({ type: Boolean, default: false });
|
|
304
|
-
const tab = ref(null);
|
|
305
|
-
const items = [
|
|
306
|
-
{
|
|
307
|
-
label: "\u0E17\u0E31\u0E48\u0E27\u0E44\u0E1B",
|
|
308
|
-
icon: "lucide:layers",
|
|
309
|
-
is_noti: false,
|
|
310
|
-
value: "general"
|
|
311
|
-
},
|
|
312
|
-
{
|
|
313
|
-
label: "\u0E04\u0E33\u0E2A\u0E31\u0E48\u0E07\u0E0B\u0E37\u0E49\u0E2D",
|
|
314
|
-
icon: "lucide:shopping-cart",
|
|
315
|
-
is_noti: true,
|
|
316
|
-
value: "order"
|
|
317
|
-
},
|
|
318
|
-
{
|
|
319
|
-
label: "\u0E42\u0E1B\u0E23\u0E42\u0E21\u0E0A\u0E31\u0E48\u0E19",
|
|
320
|
-
icon: "lucide:megaphone",
|
|
321
|
-
is_noti: true,
|
|
322
|
-
value: "promotion"
|
|
323
|
-
},
|
|
324
|
-
{
|
|
325
|
-
label: "\u0E01\u0E34\u0E08\u0E01\u0E23\u0E23\u0E21",
|
|
326
|
-
icon: "lucide:gift",
|
|
327
|
-
is_noti: true,
|
|
328
|
-
value: "activity"
|
|
329
|
-
},
|
|
330
|
-
{
|
|
331
|
-
label: "\u0E23\u0E30\u0E1A\u0E1A",
|
|
332
|
-
icon: "lucide:network",
|
|
333
|
-
is_noti: true,
|
|
334
|
-
value: "system"
|
|
335
|
-
}
|
|
336
|
-
];
|
|
337
|
-
const closeDrawer = () => {
|
|
338
|
-
isOpen.value = false;
|
|
339
|
-
};
|
|
340
|
-
</script>
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import type { DrawerNotificationProps } from "@/types/components/drawer/drawer-notification";
|
|
2
|
-
type __VLS_Props = DrawerNotificationProps;
|
|
3
|
-
declare const isOpen: import("vue").ModelRef<boolean, string, boolean, boolean>;
|
|
4
|
-
type __VLS_ModelProps = {
|
|
5
|
-
modelValue?: typeof isOpen['value'];
|
|
6
|
-
};
|
|
7
|
-
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
8
|
-
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
9
|
-
"update:modelValue": (value: boolean) => any;
|
|
10
|
-
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
11
|
-
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
|
12
|
-
}>, {
|
|
13
|
-
items: {
|
|
14
|
-
general?: import("@/types/components/drawer/drawer-notification").general[];
|
|
15
|
-
order?: import("@/types/components/drawer/drawer-notification").order[];
|
|
16
|
-
promotion?: import("@/types/components/drawer/drawer-notification").promotion[];
|
|
17
|
-
activity?: import("@/types/components/drawer/drawer-notification").activity[];
|
|
18
|
-
system?: import("@/types/components/drawer/drawer-notification").system[];
|
|
19
|
-
};
|
|
20
|
-
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
21
|
-
declare const _default: typeof __VLS_export;
|
|
22
|
-
export default _default;
|