pukaad-ui-lib 1.450.2 → 1.451.0

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

@@ -1,109 +1,109 @@
 <template>
-  <Drawer v-model="modelValue" title="การแจ้งเตือน" class="w-[748px]">
-    <ShadTabs v-model="notificationStore.activeTab" class="w-full">
-      <div class="flex justify-between items-center w-full mb-[16px]">
-        <ShadTabsList>
-          <ShadTabsTrigger
-            v-for="tab in tabs"
-            :key="tab.value"
-            :value="tab.value"
-            class="px-4 py-2"
-          >
-            <Icon name="lucide:layers" />
-            <div class="flex">
-              {{ tab.label }}
-              <div
-                v-if="notificationStore.unreadByTab[tab.value] > 0"
-                class="bg-destructive rounded-full w-[10px] h-[10px] m-[2px] shrink-0"
-              />
-            </div>
-          </ShadTabsTrigger>
-        </ShadTabsList>
-
-        <div
-          v-if="notificationStore.unreadByTab[notificationStore.activeTab] > 0"
-          class="text-primary font-body-medium cursor-pointer"
-          @click="notificationStore.markAllRead()"
-        >
-          อ่านทั้งหมด
-        </div>
-      </div>
-
-      <ShadTabsContent
-        v-for="tab in tabs"
-        :key="tab.value"
-        :value="tab.value"
-        class="flex flex-col gap-[8px]"
-      >
-        <template v-if="notificationStore.isLoadingList[tab.value] && notificationStore.lists[tab.value].length === 0">
-          <div
-            v-for="n in 3"
-            :key="n"
-            class="flex gap-[8px] items-center p-[16px] rounded-[8px] border border-mercury animate-pulse"
-          >
-            <div class="size-[30px] rounded-full bg-mercury shrink-0" />
-            <div class="flex flex-col gap-[8px] w-full">
-              <div class="h-[12px] w-2/3 rounded bg-mercury" />
-              <div class="h-[10px] w-1/4 rounded bg-mercury" />
-            </div>
-          </div>
-        </template>
-
-        <div
-          v-else-if="notificationStore.lists[tab.value].length === 0"
-          class="flex flex-col items-center justify-center py-[40px] gap-[8px]"
-        >
-          <Icon name="lucide:bell-off" size="40" class="text-gray" />
-          <div class="font-body-medium text-gray">{{ tab.empty }}</div>
-        </div>
-
-        <template v-else>
-          <Card
-            v-for="item in notificationStore.lists[tab.value]"
-            :key="item.id"
-            variant="outline"
-            class="cursor-pointer transition-colors"
-            :class="{ 'bg-bright': !item.is_read }"
-            @click="onClickNotification(item)"
-          >
-            <div class="flex gap-[8px] items-center">
-              <div class="flex gap-[8px] items-center w-full">
-                <Icon
-                  v-if="item.tab === 'system'"
-                  name="pukaad:memsg-square"
-                  class="w-[40px] h-[40px] shrink-0"
-                />
-                <Avatar v-else :size="30" :src="item.actor?.avatar ?? void 0" />
-                <div class="flex flex-col gap-[4px]">
-                  <div class="font-body-medium">
-                    <span v-if="item.actor" class="font-body-medium-prominent">
-                      {{ item.actor.name }}
-                    </span>
-                    {{ item.message }}
-                  </div>
-                  <div class="text-gray font-body-small">
-                    {{ convertChatRelativeText(item.created_at) }}
-                  </div>
-                </div>
-              </div>
-              <div
-                v-if="!item.is_read"
-                class="bg-primary rounded-full w-[10px] h-[10px] shrink-0"
-              />
-            </div>
-          </Card>
-        </template>
-      </ShadTabsContent>
-    </ShadTabs>
-
-    <div ref="sentinel" class="h-[1px]" />
-    <div
-      v-if="notificationStore.isLoadingMore[notificationStore.activeTab]"
-      class="flex justify-center py-[16px]"
-    >
-      <Icon name="lucide:loader-2" size="20" class="animate-spin text-gray" />
-    </div>
-  </Drawer>
+  <Drawer v-model="modelValue" title="การแจ้งเตือน" class="w-[748px]">
+    <ShadTabs v-model="notificationStore.activeTab" class="w-full">
+      <div class="flex justify-between items-center w-full mb-[16px]">
+        <ShadTabsList>
+          <ShadTabsTrigger
+            v-for="tab in tabs"
+            :key="tab.value"
+            :value="tab.value"
+            class="px-4 py-2"
+          >
+            <Icon name="lucide:layers" />
+            <div class="flex">
+              {{ tab.label }}
+              <div
+                v-if="notificationStore.unreadByTab[tab.value] > 0"
+                class="bg-destructive rounded-full w-[10px] h-[10px] m-[2px] shrink-0"
+              />
+            </div>
+          </ShadTabsTrigger>
+        </ShadTabsList>
+
+        <div
+          v-if="notificationStore.unreadByTab[notificationStore.activeTab] > 0"
+          class="text-primary font-body-medium cursor-pointer"
+          @click="notificationStore.markAllRead()"
+        >
+          อ่านทั้งหมด
+        </div>
+      </div>
+
+      <ShadTabsContent
+        v-for="tab in tabs"
+        :key="tab.value"
+        :value="tab.value"
+        class="flex flex-col gap-[8px]"
+      >
+        <template v-if="notificationStore.isLoadingList[tab.value] && notificationStore.lists[tab.value].length === 0">
+          <div
+            v-for="n in 3"
+            :key="n"
+            class="flex gap-[8px] items-center p-[16px] rounded-[8px] border border-mercury animate-pulse"
+          >
+            <div class="size-[30px] rounded-full bg-mercury shrink-0" />
+            <div class="flex flex-col gap-[8px] w-full">
+              <div class="h-[12px] w-2/3 rounded bg-mercury" />
+              <div class="h-[10px] w-1/4 rounded bg-mercury" />
+            </div>
+          </div>
+        </template>
+
+        <div
+          v-else-if="notificationStore.lists[tab.value].length === 0"
+          class="flex flex-col items-center justify-center py-[40px] gap-[8px]"
+        >
+          <Icon name="lucide:bell-off" size="40" class="text-gray" />
+          <div class="font-body-medium text-gray">{{ tab.empty }}</div>
+        </div>
+
+        <template v-else>
+          <Card
+            v-for="item in notificationStore.lists[tab.value]"
+            :key="item.id"
+            variant="outline"
+            class="cursor-pointer transition-colors"
+            :class="{ 'bg-bright': !item.is_read }"
+            @click="onClickNotification(item)"
+          >
+            <div class="flex gap-[8px] items-center">
+              <div class="flex gap-[8px] items-center w-full">
+                <Icon
+                  v-if="item.tab === 'system'"
+                  name="pukaad:memsg-square"
+                  class="w-[40px] h-[40px] shrink-0"
+                />
+                <Avatar v-else :size="30" :src="item.actor?.avatar ?? void 0" />
+                <div class="flex flex-col gap-[4px]">
+                  <div class="font-body-medium">
+                    <span v-if="item.actor" class="font-body-medium-prominent">
+                      {{ item.actor.name }}
+                    </span>
+                    {{ item.message }}
+                  </div>
+                  <div class="text-gray font-body-small">
+                    {{ convertChatRelativeText(item.created_at) }}
+                  </div>
+                </div>
+              </div>
+              <div
+                v-if="!item.is_read"
+                class="bg-primary rounded-full w-[10px] h-[10px] shrink-0"
+              />
+            </div>
+          </Card>
+        </template>
+      </ShadTabsContent>
+    </ShadTabs>
+
+    <div ref="sentinel" class="h-[1px]" />
+    <div
+      v-if="notificationStore.isLoadingMore[notificationStore.activeTab]"
+      class="flex justify-center py-[16px]"
+    >
+      <Icon name="lucide:loader-2" size="20" class="animate-spin text-gray" />
+    </div>
+  </Drawer>
 </template>
 
 <script setup>

package/dist/runtime/components/drawer/drawer-post-blog.vue

@@ -1,74 +1,74 @@
 <template>
-  <Drawer
-    class="w-[748px]"
-    :title="drawerTitle"
-    @close="onClose"
-    disabled-auto-close
-    @submit="onSubmit"
-    v-model="isOpen"
-  >
-    <div class="flex flex-col gap-[16px]">
-      <InputTextField
-        name="title"
-        label="หัวข้อ"
-        placeholder="ตั้งชื่อบทความให้น่าสนใจ"
-        showCounter
-        :limit="180"
-        v-model="form.title"
-        disabled-border
-        required
-      />
-
-      <InputContent
-        placeholder="อยากเล่าอะไร"
-        :height="288"
-        v-model="form.content"
-      />
-
-      <InputTag
-        v-model="form.tags"
-        name="tags"
-        label="แท็ก"
-        placeholder="เพิ่มแท็ก"
-        :limit="5"
-      />
-
-      <!-- <InputCheckbox
-        name="disableComment"
-        label="ไม่อนุญาตให้แสดงความคิดเห็น"
-        v-model="form.disableComment"
-      /> -->
-
-      <div class="flex flex-col gap-[8px]">
-        <div class="text-gray font-body-large">ภาพหน้าปก</div>
-        <InputFile
-          :limit="1"
-          name="coverImage"
-          accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
-          v-model="form.coverImage"
-        />
-        <div class="flex flex-col text-gray font-body-small">
-          <div>รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif</div>
-          <div>ขนาดไม่เกิน 30 mb</div>
-        </div>
-      </div>
-    </div>
-
-    <template #footer="{ meta }">
-      <div class="flex justify-end gap-[16px] items-center">
-        <Button variant="outline" @click="onClose">ยกเลิก</Button>
-        <Button @click="onSaveDraft"> บันทึกแบบร่าง </Button>
-        <Button
-          type="submit"
-          color="primary"
-          :disabled="!meta.valid || loading"
-        >
-          <span v-if="loading">กำลังบันทึก...</span>
-          <span v-else>เผยแพร่</span>
-        </Button>
-      </div>
-    </template>
-  </Drawer>
+  <Drawer
+    class="w-[748px]"
+    :title="drawerTitle"
+    @close="onClose"
+    disabled-auto-close
+    @submit="onSubmit"
+    v-model="isOpen"
+  >
+    <div class="flex flex-col gap-[16px]">
+      <InputTextField
+        name="title"
+        label="หัวข้อ"
+        placeholder="ตั้งชื่อบทความให้น่าสนใจ"
+        showCounter
+        :limit="180"
+        v-model="form.title"
+        disabled-border
+        required
+      />
+
+      <InputContent
+        placeholder="อยากเล่าอะไร"
+        :height="288"
+        v-model="form.content"
+      />
+
+      <InputTag
+        v-model="form.tags"
+        name="tags"
+        label="แท็ก"
+        placeholder="เพิ่มแท็ก"
+        :limit="5"
+      />
+
+      <!-- <InputCheckbox
+        name="disableComment"
+        label="ไม่อนุญาตให้แสดงความคิดเห็น"
+        v-model="form.disableComment"
+      /> -->
+
+      <div class="flex flex-col gap-[8px]">
+        <div class="text-gray font-body-large">ภาพหน้าปก</div>
+        <InputFile
+          :limit="1"
+          name="coverImage"
+          accept="image/jpeg,image/png,image/webp,image/bmp,image/gif"
+          v-model="form.coverImage"
+        />
+        <div class="flex flex-col text-gray font-body-small">
+          <div>รองรับไฟล์ *.jpg *.jpeg *.png *.webp *.bmp *.gif</div>
+          <div>ขนาดไม่เกิน 30 mb</div>
+        </div>
+      </div>
+    </div>
+
+    <template #footer="{ meta }">
+      <div class="flex justify-end gap-[16px] items-center">
+        <Button variant="outline" @click="onClose">ยกเลิก</Button>
+        <Button @click="onSaveDraft"> บันทึกแบบร่าง </Button>
+        <Button
+          type="submit"
+          color="primary"
+          :disabled="!meta.valid || loading"
+        >
+          <span v-if="loading">กำลังบันทึก...</span>
+          <span v-else>เผยแพร่</span>
+        </Button>
+      </div>
+    </template>
+  </Drawer>
 </template>
 
 <script setup>