pukaad-ui-lib 1.2.0 → 1.3.2

package/dist/runtime/components/drawer/drawer-notification.vue

@@ -1,292 +1,292 @@
 <template>
-  <Drawer title="การแจ้งเตือน" v-model="isOpen" :width="707">
-    <template #header>
-      <div class="flex justify-between p-[16px]">
-        <div class="font-title-medium-prominent">การแจ้งเตือน</div>
-        <div class="flex gap-[16px]">
-          <Dropdown>
-            <template #default="{ isOpen }">
-              <Button color="black" variant="text" disabled-padding>
-                <Icon :size="24" name="lucide:settings" />
-              </Button>
-            </template>
-            <template #content>
-              <div class="w-[252px] font-body-large">
-                <div
-                  class="hover:bg-bright cursor-pointer flex gap-[4px] p-[8px] items-center"
-                >
-                  <Icon :size="16" name="lucide:check" />
-                  <div class="font-body-medium">
-                    ทำเครื่องหมายว่าอ่านแล้วทั้งหมด
-                  </div>
-                </div>
-                <Divider />
-                <NuxtLink
-                  to="/setting/notification"
-                  class="hover:bg-bright cursor-pointer flex gap-[4px] p-[8px] items-center"
-                  @click="closeDrawer"
-                >
-                  <Icon :size="20" name="lucide:settings" />
-                  <div class="font-body-medium">ตั้งค่าการแจ้งเตือน</div>
-                </NuxtLink>
-              </div>
-            </template>
-          </Dropdown>
-          <Button
-            color="black"
-            variant="text"
-            disabled-padding
-            @click="closeDrawer"
-          >
-            <Icon :name="'lucide:x'" :size="24" />
-          </Button>
-        </div>
-      </div>
-    </template>
-    <div class="flex flex-col gap-[16px]">
-      <Card full-width>
-        <Tab
-          :items="items"
-          disabled-content
-          tabButtonSize="small"
-          :tabButtonGap="16"
-          v-model="tab"
-        >
-          <template
-            v-for="(item, i) in items"
-            :key="i"
-            #[`tab-${item.value}-label-text`]
-          >
-            <div class="flex gap-[8px] items-center">
-              <Icon :name="item.icon" :size="20" />
-              <div class="relative">
-                {{ item.label }}
-                <!-- <Avatar
-                  v-if="item.is_noti"
-                  class="absolute top-0 -right-[8px]"
-                  :size="8"
-                  color="error"
-                /> -->
-              </div>
-            </div>
-          </template>
-        </Tab>
-      </Card>
-      <Tab v-model="tab" :items="items" :tabButtonGap="16" disabled-header>
-        <template #tab-content-general>
-          <div class="flex flex-col gap-[4px] w-full">
-            <div v-for="(item, index) in props.items.general" :key="index">
-              <Card full-width class="hover:bg-bright cursor-pointer">
-                <div class="flex gap-[8px] items-center">
-                  <div>
-                    <!-- <Avatar :size="40" :src="item.avatar" /> -->
-                  </div>
-                  <div class="flex flex-col gap-[4px]">
-                    <div class="font-body-large">
-                      {{ item.content }}
-                    </div>
-                    <div class="font-body-small text-gray">
-                      {{ item.time_created }}
-                    </div>
-                  </div>
-                  <div class="flex items-center gap-[8px] ml-auto">
-                    <Image
-                      v-if="item.image"
-                      :width="40"
-                      :height="40"
-                      :src="item.image"
-                      class="rounded-[4px]"
-                    />
-                    <div
-                      v-else-if="item.video_url"
-                      class="relative w-[40px] h-[40px] rounded-[4px] bg-black flex justify-center items-center overflow-hidden"
-                    >
-                      <video
-                        class="w-[40px] h-[40px] object-cover rounded-[4px]"
-                        :src="item.video_url"
-                        preload="metadata"
-                      />
-                      <div
-                        class="absolute bg-black/50 w-[24px] h-[24px] rounded-full flex justify-center items-center"
-                      >
-                        <Icon
-                          name="material-symbols:play-arrow"
-                          class="text-white"
-                        />
-                      </div>
-                    </div>
-                    <div class="w-[20px]">
-                      <Icon
-                        v-if="item.is_unread"
-                        class="text-primary"
-                        :size="20"
-                        name="fad:armrecording"
-                      />
-                    </div>
-                  </div>
-                </div>
-              </Card>
-            </div>
-          </div>
-        </template>
-
-        <template #tab-content-order>
-          <div class="flex flex-col gap-[4px]">
-            <div v-for="(item, index) in props.items.order" :key="index">
-              <Card full-width class="hover:bg-bright cursor-pointer">
-                <div class="flex gap-[8px] items-center">
-                  <div>
-                    <Image
-                      v-if="item.image_url"
-                      :width="40"
-                      :height="40"
-                      :src="item.image_url"
-                      class="rounded-[4px]"
-                    />
-                  </div>
-                  <div class="flex flex-col gap-[4px]">
-                    <p class="font-body-large">
-                      <template
-                        v-for="(text, index) in item.content"
-                        :key="index"
-                      >
-                        <span
+  <Drawer title="การแจ้งเตือน" v-model="isOpen" :width="707">
+    <template #header>
+      <div class="flex justify-between p-[16px]">
+        <div class="font-title-medium-prominent">การแจ้งเตือน</div>
+        <div class="flex gap-[16px]">
+          <Dropdown>
+            <template #default="{ isOpen }">
+              <Button color="black" variant="text" disabled-padding>
+                <Icon :size="24" name="lucide:settings" />
+              </Button>
+            </template>
+            <template #content>
+              <div class="w-[252px] font-body-large">
+                <div
+                  class="hover:bg-bright cursor-pointer flex gap-[4px] p-[8px] items-center"
+                >
+                  <Icon :size="16" name="lucide:check" />
+                  <div class="font-body-medium">
+                    ทำเครื่องหมายว่าอ่านแล้วทั้งหมด
+                  </div>
+                </div>
+                <Divider />
+                <NuxtLink
+                  to="/setting/notification"
+                  class="hover:bg-bright cursor-pointer flex gap-[4px] p-[8px] items-center"
+                  @click="closeDrawer"
+                >
+                  <Icon :size="20" name="lucide:settings" />
+                  <div class="font-body-medium">ตั้งค่าการแจ้งเตือน</div>
+                </NuxtLink>
+              </div>
+            </template>
+          </Dropdown>
+          <Button
+            color="black"
+            variant="text"
+            disabled-padding
+            @click="closeDrawer"
+          >
+            <Icon :name="'lucide:x'" :size="24" />
+          </Button>
+        </div>
+      </div>
+    </template>
+    <div class="flex flex-col gap-[16px]">
+      <Card full-width>
+        <Tab
+          :items="items"
+          disabled-content
+          tabButtonSize="small"
+          :tabButtonGap="16"
+          v-model="tab"
+        >
+          <template
+            v-for="(item, i) in items"
+            :key="i"
+            #[`tab-${item.value}-label-text`]
+          >
+            <div class="flex gap-[8px] items-center">
+              <Icon :name="item.icon" :size="20" />
+              <div class="relative">
+                {{ item.label }}
+                <!-- <Avatar
+                  v-if="item.is_noti"
+                  class="absolute top-0 -right-[8px]"
+                  :size="8"
+                  color="error"
+                /> -->
+              </div>
+            </div>
+          </template>
+        </Tab>
+      </Card>
+      <Tab v-model="tab" :items="items" :tabButtonGap="16" disabled-header>
+        <template #tab-content-general>
+          <div class="flex flex-col gap-[4px] w-full">
+            <div v-for="(item, index) in props.items.general" :key="index">
+              <Card full-width class="hover:bg-bright cursor-pointer">
+                <div class="flex gap-[8px] items-center">
+                  <div>
+                    <!-- <Avatar :size="40" :src="item.avatar" /> -->
+                  </div>
+                  <div class="flex flex-col gap-[4px]">
+                    <div class="font-body-large">
+                      {{ item.content }}
+                    </div>
+                    <div class="font-body-small text-gray">
+                      {{ item.time_created }}
+                    </div>
+                  </div>
+                  <div class="flex items-center gap-[8px] ml-auto">
+                    <Image
+                      v-if="item.image"
+                      :width="40"
+                      :height="40"
+                      :src="item.image"
+                      class="rounded-[4px]"
+                    />
+                    <div
+                      v-else-if="item.video_url"
+                      class="relative w-[40px] h-[40px] rounded-[4px] bg-black flex justify-center items-center overflow-hidden"
+                    >
+                      <video
+                        class="w-[40px] h-[40px] object-cover rounded-[4px]"
+                        :src="item.video_url"
+                        preload="metadata"
+                      />
+                      <div
+                        class="absolute bg-black/50 w-[24px] h-[24px] rounded-full flex justify-center items-center"
+                      >
+                        <Icon
+                          name="material-symbols:play-arrow"
+                          class="text-white"
+                        />
+                      </div>
+                    </div>
+                    <div class="w-[20px]">
+                      <Icon
+                        v-if="item.is_unread"
+                        class="text-primary"
+                        :size="20"
+                        name="fad:armrecording"
+                      />
+                    </div>
+                  </div>
+                </div>
+              </Card>
+            </div>
+          </div>
+        </template>
+
+        <template #tab-content-order>
+          <div class="flex flex-col gap-[4px]">
+            <div v-for="(item, index) in props.items.order" :key="index">
+              <Card full-width class="hover:bg-bright cursor-pointer">
+                <div class="flex gap-[8px] items-center">
+                  <div>
+                    <Image
+                      v-if="item.image_url"
+                      :width="40"
+                      :height="40"
+                      :src="item.image_url"
+                      class="rounded-[4px]"
+                    />
+                  </div>
+                  <div class="flex flex-col gap-[4px]">
+                    <p class="font-body-large">
+                      <template
+                        v-for="(text, index) in item.content"
+                        :key="index"
+                      >
+                        <span
                           :class="
   text.is_active ? 'text-primary' : 'text-black'
-"
-                        >
-                          {{ text.text }}
-                        </span>
-                      </template>
-                    </p>
-
-                    <div class="font-body-small text-gray">
-                      {{ item.time_created }}
-                    </div>
-                  </div>
-                  <div class="flex items-center w-[20px] gap-[8px] ml-auto">
-                    <Icon
-                      v-if="item.is_unread"
-                      class="text-primary"
-                      :size="20"
-                      name="fad:armrecording"
-                    />
-                  </div>
-                </div>
-              </Card>
-            </div>
-          </div>
-        </template>
-
-        <template #tab-content-promotion>
-          <div class="flex flex-col gap-[4px]">
-            <div v-for="(item, index) in props.items.promotion" :key="index">
-              <Card full-width class="hover:bg-bright cursor-pointer">
-                <div class="flex gap-[8px] items-center">
-                  <div>
-                    <Image
-                      v-if="item.image_url"
-                      :width="40"
-                      :height="40"
-                      :src="item.image_url"
-                      class="rounded-[4px]"
-                    />
-                  </div>
-                  <div class="flex flex-col gap-[4px]">
-                    <div class="font-body-large">
-                      {{ item.content }}
-                    </div>
-                    <div class="font-body-small text-gray">
-                      {{ item.time_created }}
-                    </div>
-                  </div>
-                  <div class="flex w-[20px] items-center gap-[8px] ml-auto">
-                    <Icon
-                      v-if="item.is_unread"
-                      class="text-primary"
-                      :size="20"
-                      name="fad:armrecording"
-                    />
-                  </div>
-                </div>
-              </Card>
-            </div>
-          </div>
-        </template>
-
-        <template #tab-content-activity>
-          <div class="flex flex-col gap-[4px]">
-            <div v-for="(item, index) in props.items.activity" :key="index">
-              <Card full-width class="hover:bg-bright cursor-pointer">
-                <div class="flex gap-[8px] items-center">
-                  <div>
-                    <Image
-                      v-if="item.image_url"
-                      :width="40"
-                      :height="40"
-                      :src="item.image_url"
-                      class="rounded-[4px]"
-                    />
-                  </div>
-                  <div class="flex flex-col gap-[4px]">
-                    <div class="font-body-large">
-                      {{ item.content }}
-                    </div>
-                    <div class="font-body-small text-gray">
-                      {{ item.time_created }}
-                    </div>
-                  </div>
-                  <div class="flex w-[20px] items-center gap-[8px] ml-auto">
-                    <Icon
-                      v-if="item.is_unread"
-                      class="text-primary"
-                      :size="20"
-                      name="fad:armrecording"
-                    />
-                  </div>
-                </div>
-              </Card>
-            </div>
-          </div>
-        </template>
-
-        <template #tab-content-system>
-          <div class="flex flex-col gap-[4px]">
-            <div v-for="(item, index) in props.items.system" :key="index">
-              <Card full-width class="hover:bg-bright cursor-pointer">
-                <div class="flex gap-[8px] items-center">
-                  <div>
-                    <Icon
-                      class="text-gray"
-                      name="pukaad:memsg-square"
-                      :width="40"
-                      :height="40"
-                    />
-                  </div>
-                  <div class="flex flex-col gap-[4px]">
-                    <div class="font-body-large">
-                      {{ item.content }}
-                    </div>
-                    <div class="font-body-small text-gray">
-                      {{ item.time_created }}
-                    </div>
-                  </div>
-                  <div class="flex w-[20px] items-center gap-[8px] ml-auto">
-                    <Icon
-                      v-if="item.is_unread"
-                      class="text-primary"
-                      :size="20"
-                      name="fad:armrecording"
-                    />
-                  </div>
-                </div>
-              </Card>
-            </div>
-          </div>
-        </template>
-      </Tab>
-    </div>
-  </Drawer>
+"
+                        >
+                          {{ text.text }}
+                        </span>
+                      </template>
+                    </p>
+
+                    <div class="font-body-small text-gray">
+                      {{ item.time_created }}
+                    </div>
+                  </div>
+                  <div class="flex items-center w-[20px] gap-[8px] ml-auto">
+                    <Icon
+                      v-if="item.is_unread"
+                      class="text-primary"
+                      :size="20"
+                      name="fad:armrecording"
+                    />
+                  </div>
+                </div>
+              </Card>
+            </div>
+          </div>
+        </template>
+
+        <template #tab-content-promotion>
+          <div class="flex flex-col gap-[4px]">
+            <div v-for="(item, index) in props.items.promotion" :key="index">
+              <Card full-width class="hover:bg-bright cursor-pointer">
+                <div class="flex gap-[8px] items-center">
+                  <div>
+                    <Image
+                      v-if="item.image_url"
+                      :width="40"
+                      :height="40"
+                      :src="item.image_url"
+                      class="rounded-[4px]"
+                    />
+                  </div>
+                  <div class="flex flex-col gap-[4px]">
+                    <div class="font-body-large">
+                      {{ item.content }}
+                    </div>
+                    <div class="font-body-small text-gray">
+                      {{ item.time_created }}
+                    </div>
+                  </div>
+                  <div class="flex w-[20px] items-center gap-[8px] ml-auto">
+                    <Icon
+                      v-if="item.is_unread"
+                      class="text-primary"
+                      :size="20"
+                      name="fad:armrecording"
+                    />
+                  </div>
+                </div>
+              </Card>
+            </div>
+          </div>
+        </template>
+
+        <template #tab-content-activity>
+          <div class="flex flex-col gap-[4px]">
+            <div v-for="(item, index) in props.items.activity" :key="index">
+              <Card full-width class="hover:bg-bright cursor-pointer">
+                <div class="flex gap-[8px] items-center">
+                  <div>
+                    <Image
+                      v-if="item.image_url"
+                      :width="40"
+                      :height="40"
+                      :src="item.image_url"
+                      class="rounded-[4px]"
+                    />
+                  </div>
+                  <div class="flex flex-col gap-[4px]">
+                    <div class="font-body-large">
+                      {{ item.content }}
+                    </div>
+                    <div class="font-body-small text-gray">
+                      {{ item.time_created }}
+                    </div>
+                  </div>
+                  <div class="flex w-[20px] items-center gap-[8px] ml-auto">
+                    <Icon
+                      v-if="item.is_unread"
+                      class="text-primary"
+                      :size="20"
+                      name="fad:armrecording"
+                    />
+                  </div>
+                </div>
+              </Card>
+            </div>
+          </div>
+        </template>
+
+        <template #tab-content-system>
+          <div class="flex flex-col gap-[4px]">
+            <div v-for="(item, index) in props.items.system" :key="index">
+              <Card full-width class="hover:bg-bright cursor-pointer">
+                <div class="flex gap-[8px] items-center">
+                  <div>
+                    <Icon
+                      class="text-gray"
+                      name="pukaad:memsg-square"
+                      :width="40"
+                      :height="40"
+                    />
+                  </div>
+                  <div class="flex flex-col gap-[4px]">
+                    <div class="font-body-large">
+                      {{ item.content }}
+                    </div>
+                    <div class="font-body-small text-gray">
+                      {{ item.time_created }}
+                    </div>
+                  </div>
+                  <div class="flex w-[20px] items-center gap-[8px] ml-auto">
+                    <Icon
+                      v-if="item.is_unread"
+                      class="text-primary"
+                      :size="20"
+                      name="fad:armrecording"
+                    />
+                  </div>
+                </div>
+              </Card>
+            </div>
+          </div>
+        </template>
+      </Tab>
+    </div>
+  </Drawer>
 </template>
 
 <script setup>