@waline/client 2.6.3 → 2.7.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.6.3",
+  "version": "2.7.1",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -61,7 +61,7 @@
     "clean": "rimraf ./dist",
     "dev": "vite -c config/vite.config.js",
     "lint": "eslint --ext .ts,.vue .",
-    "prepublish": "pnpm clean && pnpm build",
+    "prepublishOnly": "pnpm clean && pnpm build",
     "rollup": "rollup -c ./config/rollup.config.js",
     "style": "sass ./src/styles/index.scss ./dist/waline.css --style=compressed"
   },
@@ -80,29 +80,29 @@
     ]
   },
   "dependencies": {
-    "@vueuse/core": "^9.1.0",
+    "@vueuse/core": "^9.2.0",
     "autosize": "^5.0.1",
-    "marked": "^4.0.18",
-    "vue": "^3.2.37"
+    "marked": "^4.1.0",
+    "vue": "^3.2.38"
   },
   "devDependencies": {
-    "@babel/core": "7.18.10",
+    "@babel/core": "7.18.13",
     "@babel/preset-env": "7.18.10",
     "@rollup/plugin-babel": "5.3.1",
     "@rollup/plugin-commonjs": "22.0.2",
     "@rollup/plugin-node-resolve": "13.3.0",
     "@rollup/plugin-replace": "4.0.0",
     "@types/autosize": "4.0.1",
-    "@types/marked": "4.0.3",
-    "@types/node": "18.7.3",
-    "@vitejs/plugin-vue": "3.0.3",
+    "@types/marked": "4.0.6",
+    "@types/node": "18.7.15",
+    "@vitejs/plugin-vue": "3.1.0",
     "rimraf": "3.0.2",
-    "rollup": "2.78.0",
+    "rollup": "2.79.0",
     "rollup-plugin-dts": "4.2.2",
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-ts": "3.0.2",
-    "typescript": "4.7.4",
-    "vite": "3.0.7"
+    "typescript": "4.8.2",
+    "vite": "3.1.0"
   },
   "engines": {
     "node": ">=14"

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-meta-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

@@ -10,8 +10,8 @@ export default generateLocale([
   'Hãy bình luận có văn hoá!',
   'Chưa có bình luận',
   'Gửi',
-  'Like',
-  'Cancel like',
+  'Thích',
+  'Bỏ thích',
   'Trả lời',
   'Hủy bỏ',
   'bình luận',
@@ -28,22 +28,25 @@ export default generateLocale([
   'Đang tải lên',
   'Đăng nhập',
   'đăng xuất',
-  'Admin',
-  'Sticky',
+  'Quản trị viên',
+  'Dính',
   'từ',
-  'Please input comments between $0 and $1 words!\n Current word number: $2',
+  'Bình luận phải có độ dài giữa $0 và $1 từ!\n Số từ hiện tại: $2',
   'Vô danh',
-  'Dwarves',
-  'Hobbits',
-  'Ents',
-  'Wizards',
-  'Elves',
+  'Người lùn',
+  'Người tí hon',
+  'Thần rừng',
+  'Pháp sư',
+  'Tiên tộc',
   'Maiar',
-  'GIF',
-  'Tìm kiếm GIF',
+  'Ảnh GIF',
+  'Tìm kiếm ảnh GIF',
   'thông tin cá nhân',
   'Đã được phê duyệt',
   'Đ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

@@ -50,9 +50,9 @@
 }
 
 .wl-count {
-  padding: 0.375em;
   font-weight: bold;
   font-size: 1.25em;
+  flex: 1;
 }
 
 .wl-empty {
@@ -76,3 +76,30 @@
   font-size: var(--waline-info-font-size);
   text-align: right;
 }
+
+.wl-meta-head {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding: 0.375em;
+}
+
+ul.wl-sort {
+  list-style-type: none;
+  margin: 0;
+}
+
+.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/typings/waline.ts

@@ -145,7 +145,7 @@ export interface WalineProps {
    *
    * Set Emojis
    *
-   * @default ['//unpkg.com/@waline/emojis@1.0.1/weibo']
+   * @default ['//unpkg.com/@waline/emojis@1.1.0/weibo']
    */
   emoji?: (string | WalineEmojiInfo)[] | false;
 

package/src/utils/config.ts

@@ -51,7 +51,7 @@ export const getConfig = ({
   path = location.pathname,
   lang = defaultLang,
   locale,
-  emoji = ['//unpkg.com/@waline/emojis@1.0.1/weibo'],
+  emoji = ['//unpkg.com/@waline/emojis@1.1.0/weibo'],
   meta = ['nick', 'mail', 'link'],
   requiredMeta = [],
   dark = false,

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>)