@waline/client 2.6.4 → 2.8.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.6.4",
+  "version": "2.8.0",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -80,29 +80,29 @@
     ]
   },
   "dependencies": {
-    "@vueuse/core": "^9.1.1",
+    "@vueuse/core": "^9.2.0",
     "autosize": "^5.0.1",
     "marked": "^4.1.0",
-    "vue": "^3.2.38"
+    "vue": "^3.2.39"
   },
   "devDependencies": {
-    "@babel/core": "7.18.13",
-    "@babel/preset-env": "7.18.10",
+    "@babel/core": "7.19.0",
+    "@babel/preset-env": "7.19.0",
     "@rollup/plugin-babel": "5.3.1",
     "@rollup/plugin-commonjs": "22.0.2",
-    "@rollup/plugin-node-resolve": "13.3.0",
+    "@rollup/plugin-node-resolve": "14.0.1",
     "@rollup/plugin-replace": "4.0.0",
     "@types/autosize": "4.0.1",
-    "@types/marked": "4.0.6",
-    "@types/node": "18.7.14",
-    "@vitejs/plugin-vue": "3.0.3",
+    "@types/marked": "4.0.7",
+    "@types/node": "18.7.16",
+    "@vitejs/plugin-vue": "3.1.0",
     "rimraf": "3.0.2",
     "rollup": "2.79.0",
     "rollup-plugin-dts": "4.2.2",
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-ts": "3.0.2",
-    "typescript": "4.8.2",
-    "vite": "3.0.9"
+    "typescript": "4.8.3",
+    "vite": "3.1.0"
   },
   "engines": {
     "node": ">=14"

package/src/components/CommentBox.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="wl-comment">
-    <div v-if="config.login !== 'disable' && isLogin" class="wl-login-info">
+    <div v-if="config.login !== 'disable' && isLogin && !edit?.objectId" class="wl-login-info">
       <div class="wl-avatar">
         <button class="wl-logout-btn" :title="locale.logout" @click="onLogout">
           <CloseIcon :size="14" />
@@ -248,10 +248,10 @@
     </div>
 
     <button
-      v-if="replyId"
+      v-if="replyId || edit?.objectId"
       class="wl-close"
       :title="locale.cancelReply"
-      @click="$emit('cancel-reply')"
+      @click="$emit(replyId ? 'cancel-reply' : 'cancel-edit')"
     >
       <CloseIcon :size="24" />
     </button>
@@ -267,6 +267,7 @@ import {
   inject,
   onMounted,
   onUnmounted,
+  PropType,
   reactive,
   ref,
   watch,
@@ -294,6 +295,7 @@ import {
 
 import type { ComputedRef, DeepReadonly } from 'vue';
 import type {
+  WalineComment,
   WalineCommentData,
   WalineImageUploader,
   WalineSearchOptions,
@@ -328,9 +330,13 @@ export default defineComponent({
       type: String,
       default: '',
     },
+    edit: {
+      type: Object as PropType<WalineComment | null>,
+      default: null,
+    },
   },
 
-  emits: ['submit', 'cancel-reply'],
+  emits: ['submit', 'cancel-reply', 'cancel-edit'],
 
   setup(props, { emit }) {
     const config = inject<ComputedRef<WalineConfig>>(
@@ -510,6 +516,8 @@ export default defineComponent({
         comment.pid = props.replyId;
         comment.rid = props.rootId;
         comment.at = props.replyUser;
+      } else if (props.edit) {
+        comment.eid = props.edit.objectId;
       }
 
       isSubmitting.value = true;
@@ -532,6 +540,7 @@ export default defineComponent({
           previewText.value = '';
 
           if (props.replyId) emit('cancel-reply');
+          if (props.edit?.objectId) emit('cancel-edit');
         })
         .catch((err: TypeError) => {
           isSubmitting.value = false;
@@ -701,6 +710,9 @@ export default defineComponent({
     onMounted(() => {
       document.body.addEventListener('click', popupHandler);
       window.addEventListener('message', onMessageRecive);
+      if (props.edit?.objectId) {
+        editor.value = props.edit.orig;
+      }
 
       // watch editor
       watch(

package/src/components/CommentCard.vue

@@ -32,6 +32,14 @@
         <span class="wl-time" v-text="time" />
 
         <div class="wl-comment-actions">
+          <button
+            v-if="isAdmin || isOwner"
+            class="wl-edit"
+            @click="$emit('edit', comment)"
+          >
+            <EditIcon />
+          </button>
+
           <button
             v-if="isAdmin || isOwner"
             class="wl-delete"
@@ -60,14 +68,14 @@
         </div>
       </div>
       <div class="wl-meta" aria-hidden="true">
-        <span v-if="comment.addr" v-text="comment.addr" />
-        <span v-if="comment.browser" v-text="comment.browser" />
-        <span v-if="comment.os" v-text="comment.os" />
+        <span v-if="comment.addr" class="wl-addr" :data-value="comment.addr" v-text="comment.addr" />
+        <span v-if="comment.browser" class="wl-browser" :data-value="comment.browser" v-text="comment.browser" />
+        <span v-if="comment.os" class="wl-os" :data-value="comment.os" v-text="comment.os" />
       </div>
       <!-- eslint-disable-next-line vue/no-v-html -->
-      <div class="wl-content" v-html="comment.comment" />
+      <div v-if="!isEditingCurrent" class="wl-content" v-html="comment.comment" />
 
-      <div v-if="isAdmin" class="wl-admin-actions">
+      <div v-if="isAdmin && !isEditingCurrent" class="wl-admin-actions">
         <span class="wl-comment-status">
           <button
             v-for="status in commentStatus"
@@ -88,13 +96,18 @@
         </button>
       </div>
 
-      <div v-if="isReplyingCurrent" class="wl-reply-wrapper">
+      <div 
+        v-if="isReplyingCurrent || isEditingCurrent" 
+        :class="{'wl-reply-wrapper': isReplyingCurrent, 'wl-edit-wrapper': isEditingCurrent}"
+      >
         <CommentBox
-          :reply-id="comment.objectId"
+          :edit="edit"
+          :reply-id="reply?.objectId"
           :reply-user="comment.nick"
           :root-id="rootId"
           @submit="$emit('submit', $event)"
           @cancel-reply="$emit('reply', null)"
+          @cancel-edit="$emit('edit', null)"
         />
       </div>
       <div v-if="comment.children" class="wl-quote">
@@ -103,10 +116,12 @@
           :key="child.objectId"
           :comment="child"
           :reply="reply"
+          :edit="edit"
           :root-id="rootId"
           @reply="$emit('reply', $event)"
           @submit="$emit('submit', $event)"
           @like="$emit('like', $event)"
+          @edit="$emit('edit', $event)"
           @delete="$emit('delete', $event)"
           @status="$emit('status', $event)"
           @sticky="$emit('sticky', $event)"
@@ -119,7 +134,7 @@
 <script lang="ts">
 import { computed, defineComponent, inject } from 'vue';
 import CommentBox from './CommentBox.vue';
-import { DeleteIcon, LikeIcon, ReplyIcon, VerifiedIcon } from './Icons';
+import { DeleteIcon, LikeIcon, ReplyIcon, EditIcon, VerifiedIcon } from './Icons';
 import { isLinkHttp } from '../utils';
 import { useTimeAgo, useLikeStorage, useUserInfo } from '../composables';
 
@@ -135,6 +150,7 @@ export default defineComponent({
     DeleteIcon,
     LikeIcon,
     ReplyIcon,
+    EditIcon,
     VerifiedIcon,
   },
 
@@ -151,9 +167,13 @@ export default defineComponent({
       type: Object as PropType<WalineComment | null>,
       default: null,
     },
+    edit: {
+      type: Object as PropType<WalineComment | null>,
+      default: null,
+    }
   },
 
-  emits: ['submit', 'reply', 'like', 'delete', 'status', 'sticky'],
+  emits: ['submit', 'reply', 'like', 'delete', 'status', 'sticky', 'edit'],
 
   setup(props) {
     const config = inject<ComputedRef<WalineConfig>>(
@@ -181,16 +201,22 @@ export default defineComponent({
         props.comment.user_id &&
         userInfo.value.objectId === props.comment.user_id
     );
+    console.log('lizheming:', props.comment.user_id, userInfo.value.objectId, isOwner.value);
 
     const isReplyingCurrent = computed(
       () => props.comment.objectId === props.reply?.objectId
     );
 
+    const isEditingCurrent = computed(
+      () => props.comment.objectId === props.edit?.objectId
+    )
+
     return {
       config,
       locale,
 
       isReplyingCurrent,
+      isEditingCurrent,
       link,
       like,
       time,

package/src/components/Icons.ts

@@ -102,6 +102,16 @@ export const ReplyIcon: FunctionalComponent = () =>
     })
   );
 
+export const EditIcon: FunctionalComponent = () => 
+  h(
+    'svg', 
+    { viewBox: '0 0 1024 1024', width: '24', height: '24'},
+    h('path', {
+      d: 'M813.039 318.772L480.53 651.278H360.718V531.463L693.227 198.961C697.904 194.284 704.027 192 710.157 192C716.302 192 722.436 194.284 727.114 198.961L813.039 284.88C817.72 289.561 820 295.684 820 301.825C820 307.95 817.72 314.093 813.039 318.772ZM710.172 261.888L420.624 551.431V591.376H460.561L750.109 301.825L710.172 261.888ZM490.517 291.845H240.906V771.09H720.156V521.479C720.156 504.947 733.559 491.529 750.109 491.529C766.653 491.529 780.063 504.947 780.063 521.479V791.059C780.063 813.118 762.18 831 740.125 831H220.937C198.882 831 181 813.118 181 791.059V271.872C181 249.817 198.882 231.935 220.937 231.935H490.517C507.06 231.935 520.47 245.352 520.47 261.888C520.47 278.424 507.06 291.845 490.517 291.845Z',
+      fill: 'currentColor',
+    })
+  );
+
 export const VerifiedIcon: FunctionalComponent = () =>
   h(
     'svg',

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">
@@ -13,7 +25,9 @@
         :root-id="comment.objectId"
         :comment="comment"
         :reply="reply"
+        :edit="edit"
         @reply="onReply"
+        @edit="onEdit"
         @submit="onSubmit"
         @status="onStatusChange"
         @delete="onDelete"
@@ -117,6 +131,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,9 +261,11 @@ 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);
+    const edit = ref<WalineComment | null>(null);
 
     const darkmodeStyle = computed(() => getDarkStyle(config.value.dark));
 
@@ -253,6 +287,7 @@ export default defineComponent({
         lang: config.value.lang,
         path,
         pageSize,
+        sortBy: sortBy.value,
         page: pageNumber,
         signal: controller.signal,
         token: userInfo.value?.token,
@@ -282,12 +317,27 @@ 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;
     };
 
+    const onEdit = (comment: WalineComment | null): void => {
+      edit.value = comment;
+    };
+
     const onSubmit = (comment: WalineComment): void => {
-      if (comment.rid) {
+      if (edit.value) {
+        edit.value.comment = comment.comment;
+        edit.value.orig = comment.orig;
+      } else if (comment.rid) {
         const repliedComment = data.value.find(
           ({ objectId }) => objectId === comment.rid
         );
@@ -412,17 +462,22 @@ export default defineComponent({
       count,
       page,
       totalPages,
+      sortBy,
+      sortByItems,
       data,
       reply,
+      edit,
 
       loadMore,
       refresh,
+      onSortByChange,
       onReply,
       onSubmit,
       onStatusChange,
       onDelete,
       onSticky,
       onLike,
+      onEdit,
 
       version: VERSION,
     };

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/card.scss

@@ -118,10 +118,6 @@
       font-size: var(--waline-info-font-size);
       line-height: 1.5;
 
-      @media (max-width: 520px) {
-        display: none;
-      }
-
       &:empty {
         display: none;
       }
@@ -134,7 +130,8 @@
 
   .wl-delete,
   .wl-like,
-  .wl-reply {
+  .wl-reply,
+  .wl-edit {
     display: inline-flex;
     align-items: center;
 

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/comment.ts

@@ -40,6 +40,11 @@ export interface WalineCommentData {
    */
   at?: string;
 
+  /**
+   * edit comment id
+   */
+  eid?: string;
+
   /**
    * Comment link
    */
@@ -80,4 +85,5 @@ export interface WalineComment extends Exclude<WalineCommentData, 'ua'> {
   user_id?: string | number;
   status?: WalineCommentStatus;
   like?: number;
+  orig?: string;
 }

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>)
@@ -144,6 +146,14 @@ export const postComment = ({
 
   if (token) headers.Authorization = `Bearer ${token}`;
 
+  if (comment.eid) {
+    return fetch(`${serverURL}/comment/${comment.eid}?lang=${lang}`, {
+      method: 'PUT',
+      headers,
+      body: JSON.stringify(comment),
+    }).then((resp) => resp.json() as Promise<PostCommentResponse>);
+  }
+
   return fetch(`${serverURL}/comment?lang=${lang}`, {
     method: 'POST',
     headers,