@waline/client 2.6.2 → 2.7.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.6.2",
+  "version": "2.7.0",
   "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": "^8.9.4",
+    "@vueuse/core": "^9.1.1",
     "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.9",
-    "@babel/preset-env": "7.18.9",
+    "@babel/core": "7.18.13",
+    "@babel/preset-env": "7.18.10",
     "@rollup/plugin-babel": "5.3.1",
-    "@rollup/plugin-commonjs": "22.0.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.0.6",
-    "@vitejs/plugin-vue": "3.0.1",
+    "@types/marked": "4.0.6",
+    "@types/node": "18.7.14",
+    "@vitejs/plugin-vue": "3.0.3",
     "rimraf": "3.0.2",
-    "rollup": "2.77.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.2"
+    "typescript": "4.8.2",
+    "vite": "3.0.9"
   },
   "engines": {
     "node": ">=14"

package/src/components/CommentBox.vue

@@ -411,6 +411,10 @@ export default defineComponent({
             uploadText,
             `\r\n![${file.name}](${url})`
           );
+        })
+        .catch((e) => {
+          alert(e.message);
+          editor.value = editor.value.replace(uploadText, '');
         });
     };
 

package/src/components/CommentCard.vue

@@ -75,7 +75,7 @@
             :class="`wl-btn wl-${status}`"
             :disabled="comment.status === status"
             @click="$emit('status', { status, comment })"
-            v-text="status"
+            v-text="locale[status]"
           />
         </span>
 
@@ -84,7 +84,7 @@
           class="wl-btn wl-sticky"
           @click="$emit('sticky', comment)"
         >
-          {{ comment.sticky ? 'unsticky' : 'sticky' }}
+          {{ comment.sticky ? locale.unsticky : locale.sticky }}
         </button>
       </div>
 

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">
@@ -89,6 +101,7 @@ import type {
   WalineHighlighter,
   WalineTexRenderer,
   WalineImageUploader,
+  WalineSearchOptions,
   WalineLocale,
   WalineProps,
   WalineMeta,
@@ -112,9 +125,28 @@ const props = [
   'highlighter',
   'texRenderer',
   'imageUploader',
+  'search',
   '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,
@@ -197,6 +229,11 @@ const propsWithValidate = {
     default: undefined,
   },
 
+  search: {
+    type: [Object, Boolean] as PropType<WalineSearchOptions | false>,
+    default: undefined,
+  },
+
   copyright: { type: Boolean, default: true },
 };
 
@@ -222,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);
@@ -246,6 +284,7 @@ export default defineComponent({
         lang: config.value.lang,
         path,
         pageSize,
+        sortBy: sortBy.value,
         page: pageNumber,
         signal: controller.signal,
         token: userInfo.value?.token,
@@ -275,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;
     };
@@ -405,11 +452,14 @@ export default defineComponent({
       count,
       page,
       totalPages,
+      sortBy,
+      sortByItems,
       data,
       reply,
 
       loadMore,
       refresh,
+      onSortByChange,
       onReply,
       onSubmit,
       onStatusChange,

package/src/config/default.ts

@@ -9,6 +9,10 @@ export const defaultLang = 'zh-CN';
 
 export const defaultUploadImage = (file: File): Promise<string> =>
   new Promise((resolve, reject) => {
+    if (file.size > 128 * 1000) {
+      return reject(new Error('File too large! File size limit 128KB'));
+    }
+
     const reader = new FileReader();
 
     reader.readAsDataURL(file);

package/src/config/i18n/en.ts

@@ -42,4 +42,11 @@ export default generateLocale([
   'GIF',
   'Search GIF',
   'Profile',
+  'Approved',
+  'Waiting',
+  'Spam',
+  'Unsticky',
+  'Oldest',
+  'Latest',
+  'Hottest',
 ]);

package/src/config/i18n/generate.ts

@@ -42,6 +42,13 @@ const localeKeys = [
   'gif',
   'gifSearchPlaceholder',
   'profile',
+  'approved',
+  'waiting',
+  'spam',
+  'unsticky',
+  'oldest',
+  'latest',
+  'hottest',
 ];
 
 export const generateLocale = (locale: string[]): WalineLocale =>

package/src/config/i18n/jp.ts

@@ -42,4 +42,11 @@ export default generateLocale([
   'GIF',
   '探す GIF',
   '個人情報',
+  '承認済み',
+  '待っている',
+  'スパム',
+  'べたつかない',
+  '逆順',
+  '正順',
+  '人気順',
 ]);

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

@@ -42,4 +42,11 @@ export default generateLocale([
   'GIF',
   'Pesquisar GIF',
   'informação pessoal',
+  'Aprovado',
+  'Espera',
+  'Spam',
+  'Unsticky',
+  'Mais velho',
+  'Mais recentes',
+  'Mais quente',
 ]);

package/src/config/i18n/ru.ts

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

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,18 +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

@@ -42,4 +42,11 @@ export default generateLocale([
   '表情包',
   '搜索表情包',
   '个人资料',
+  '通过',
+  '待审核',
+  '垃圾',
+  '取消置顶',
+  '按倒序',
+  '按正序',
+  '按热度',
 ]);

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

@@ -42,4 +42,11 @@ export default generateLocale([
   '表情包',
   '搜索表情包',
   '個人資料',
+  '通過',
+  '待審核',
+  '垃圾',
+  '取消置頂',
+  '按倒序',
+  '按正序',
+  '按熱度',
 ]);

package/src/styles/card.scss

@@ -233,10 +233,12 @@
       border-radius: 0;
 
       &:first-child {
+        border-right: 0;
         border-radius: 0.5em 0 0 0.5em;
       }
 
       &:last-child {
+        border-left: 0;
         border-radius: 0 0.5em 0.5em 0;
       }
     }

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

@@ -39,4 +39,11 @@ export interface WalineLocale extends WalineDateLocale, WalineLevelLocale {
   gif: string;
   gifSearchPlaceholder: string;
   profile: string;
+  approved: string;
+  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>)