@waline/client 2.6.4 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.6.4",
+  "version": "2.7.0",
   "description": "client for waline comment system",
   "keywords": [
     "valine",

package/src/components/Waline.vue

@@ -1,9 +1,21 @@
 <template>
   <div data-waline>
     <CommentBox v-if="!reply" @submit="onSubmit" />
-    <div class="wl-count">
-      <span v-if="count" class="wl-num" v-text="count" />
-      {{ i18n.comment }}
+    <div class="wl-head">
+      <div class="wl-count">
+        <span v-if="count" class="wl-num" v-text="count" />
+        {{ i18n.comment }}
+      </div>
+      <ul class="wl-sort">
+        <li
+          v-for="item in sortByItems"
+          :key="item.key"
+          :class="[item.key === sortBy ? 'active' : '']"
+          @click="onSortByChange(item.key)"
+        >
+          {{ i18n[item.name] }}
+        </li>
+      </ul>
     </div>
 
     <div class="wl-cards">
@@ -117,6 +129,24 @@ const props = [
   'copyright',
 ];
 
+type SortKeyItems = 'insertedAt_desc' | 'insertedAt_asc' | 'like_desc';
+type SortNameItems = 'latest' | 'oldest' | 'hottest';
+type SortByItems = { key: SortKeyItems; name: SortNameItems }[];
+const sortByItems: SortByItems = [
+  {
+    key: 'insertedAt_desc',
+    name: 'latest',
+  },
+  {
+    key: 'insertedAt_asc',
+    name: 'oldest',
+  },
+  {
+    key: 'like_desc',
+    name: 'hottest',
+  },
+];
+
 const propsWithValidate = {
   serverURL: {
     type: String,
@@ -229,6 +259,7 @@ export default defineComponent({
     const count = ref(0);
     const page = ref(1);
     const totalPages = ref(0);
+    const sortBy = ref<SortKeyItems>(sortByItems[0].key);
 
     const data = ref<WalineComment[]>([]);
     const reply = ref<WalineComment | null>(null);
@@ -253,6 +284,7 @@ export default defineComponent({
         lang: config.value.lang,
         path,
         pageSize,
+        sortBy: sortBy.value,
         page: pageNumber,
         signal: controller.signal,
         token: userInfo.value?.token,
@@ -282,6 +314,14 @@ export default defineComponent({
       fetchComment(1);
     };
 
+    const onSortByChange = (item: SortKeyItems): void => {
+      if (sortBy.value === item) {
+        return;
+      }
+      sortBy.value = item;
+      refresh();
+    };
+
     const onReply = (comment: WalineComment | null): void => {
       reply.value = comment;
     };
@@ -412,11 +452,14 @@ export default defineComponent({
       count,
       page,
       totalPages,
+      sortBy,
+      sortByItems,
       data,
       reply,
 
       loadMore,
       refresh,
+      onSortByChange,
       onReply,
       onSubmit,
       onStatusChange,

package/src/config/i18n/en.ts

@@ -46,4 +46,7 @@ export default generateLocale([
   'Waiting',
   'Spam',
   'Unsticky',
+  'Oldest',
+  'Latest',
+  'Hottest',
 ]);

package/src/config/i18n/generate.ts

@@ -46,6 +46,9 @@ const localeKeys = [
   'waiting',
   'spam',
   'unsticky',
+  'oldest',
+  'latest',
+  'hottest',
 ];
 
 export const generateLocale = (locale: string[]): WalineLocale =>

package/src/config/i18n/jp.ts

@@ -46,4 +46,7 @@ export default generateLocale([
   '待っている',
   'スパム',
   'べたつかない',
+  '逆順',
+  '正順',
+  '人気順',
 ]);

package/src/config/i18n/pt-BR.ts

@@ -46,4 +46,7 @@ export default generateLocale([
   'Espera',
   'Spam',
   'Unsticky',
+  'Mais velho',
+  'Mais recentes',
+  'Mais quente',
 ]);

package/src/config/i18n/ru.ts

@@ -46,4 +46,7 @@ export default generateLocale([
   'Ожидающий',
   'Спам',
   'Нелипкий',
+  'самый старый',
+  'последний',
+  'самый горячий',
 ]);

package/src/config/i18n/vi-VN.ts

@@ -46,4 +46,7 @@ export default generateLocale([
   'Đang chờ đợi',
   'Thư rác',
   'Không dính',
+  'lâu đời nhất',
+  'muộn nhất',
+  'nóng nhất',
 ]);

package/src/config/i18n/zh-CN.ts

@@ -46,4 +46,7 @@ export default generateLocale([
   '待审核',
   '垃圾',
   '取消置顶',
+  '按倒序',
+  '按正序',
+  '按热度',
 ]);

package/src/config/i18n/zh-TW.ts

@@ -46,4 +46,7 @@ export default generateLocale([
   '待審核',
   '垃圾',
   '取消置頂',
+  '按倒序',
+  '按正序',
+  '按熱度',
 ]);

package/src/styles/layout.scss

@@ -53,6 +53,7 @@
   padding: 0.375em;
   font-weight: bold;
   font-size: 1.25em;
+  flex: 1;
 }
 
 .wl-empty {
@@ -76,3 +77,28 @@
   font-size: var(--waline-info-font-size);
   text-align: right;
 }
+
+.wl-head {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.wl-sort.ul {
+  list-style-type: none;
+}
+
+.wl-sort li {
+  display: inline-block;
+  font-size: 0.75em;
+  color: var(--waline-info-color);
+  cursor: pointer;
+}
+
+.wl-sort li + li {
+  margin-left: 1em;
+}
+
+.wl-sort li.active {
+  color: var(--waline-theme-color);
+}

package/src/typings/locale.ts

@@ -43,4 +43,7 @@ export interface WalineLocale extends WalineDateLocale, WalineLevelLocale {
   waiting: string;
   spam: string;
   unsticky: string;
+  oldest: string;
+  latest: string;
+  hottest: string;
 }

package/src/utils/fetch.ts

@@ -85,6 +85,7 @@ export interface FetchListOptions {
   path: string;
   page: number;
   pageSize: number;
+  sortBy: string;
   signal: AbortSignal;
   token?: string;
   lang: string;
@@ -102,6 +103,7 @@ export const fetchCommentList = ({
   path,
   page,
   pageSize,
+  sortBy,
   signal,
   token,
 }: FetchListOptions): Promise<FetchListResult> => {
@@ -112,7 +114,7 @@ export const fetchCommentList = ({
   return fetch(
     `${serverURL}/comment?path=${encodeURIComponent(
       path
-    )}&pageSize=${pageSize}&page=${page}&lang=${lang}`,
+    )}&pageSize=${pageSize}&page=${page}&lang=${lang}&sortBy=${sortBy}`,
     { signal, headers }
   )
     .then((resp) => resp.json() as Promise<FetchListResult>)