@waline/client 2.3.2 → 2.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.3.2",
+  "version": "2.4.2",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -71,19 +71,33 @@
     ]
   },
   "dependencies": {
-    "@vueuse/core": "^8.4.0",
+    "@vueuse/core": "^8.4.2",
     "autosize": "^5.0.1",
     "marked": "^4.0.15",
     "vue": "^3.2.33"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.10",
+    "@babel/preset-env": "^7.17.10",
+    "@rollup/plugin-babel": "^5.3.1",
+    "@rollup/plugin-commonjs": "^22.0.0",
+    "@rollup/plugin-node-resolve": "^13.3.0",
+    "@rollup/plugin-replace": "^4.0.0",
     "@types/autosize": "^4.0.1",
     "@types/marked": "^4.0.3",
-    "@vitejs/plugin-vue": "^2.3.1",
-    "vite": "^2.9.7"
+    "@types/node": "^17.0.31",
+    "@vitejs/plugin-vue": "^2.3.2",
+    "@vue/compiler-sfc": "^3.2.33",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.72.1",
+    "rollup-plugin-dts": "^4.2.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-ts": "^2.0.7",
+    "typescript": "^4.6.4",
+    "vite": "^2.9.8"
   },
   "engines": {
-    "node": ">=12.20.0"
+    "node": ">=14"
   },
   "scripts": {
     "build": "pnpm rollup && pnpm style",

package/src/components/CommentCard.vue

@@ -25,21 +25,39 @@
         <span v-if="comment.label" class="wl-badge" v-text="comment.label" />
         <span v-if="comment.sticky" class="wl-badge" v-text="locale.sticky" />
         <span
-          v-if="comment.level >= 0"
+          v-if="comment.level && comment.level >= 0"
           :class="`wl-badge level${comment.level}`"
           v-text="locale[`level${comment.level}`] || `Level ${comment.level}`"
         />
-
         <span class="wl-time" v-text="time" />
 
-        <button
-          class="wl-reply"
-          :class="{ active: isReplyingCurrent }"
-          :title="isReplyingCurrent ? locale.cancelReply : locale.reply"
-          @click="$emit('reply', isReplyingCurrent ? null : comment)"
-        >
-          <ReplyIcon />
-        </button>
+        <div class="wl-comment-actions">
+          <button
+            class="wl-delete"
+            v-if="isAdmin || isOwner"
+            @click="$emit('delete', comment)"
+          >
+            <DeleteIcon />
+          </button>
+
+          <button
+            class="wl-like"
+            @click="$emit('like', comment)"
+            :title="like ? locale.cancelLike : locale.like"
+          >
+            <LikeIcon :active="like" />
+            <span v-if="'like' in comment" v-text="comment.like" />
+          </button>
+
+          <button
+            class="wl-reply"
+            :class="{ active: isReplyingCurrent }"
+            :title="isReplyingCurrent ? locale.cancelReply : locale.reply"
+            @click="$emit('reply', isReplyingCurrent ? null : comment)"
+          >
+            <ReplyIcon />
+          </button>
+        </div>
       </div>
       <div class="wl-meta" aria-hidden="true">
         <span v-if="comment.addr" v-text="comment.addr" />
@@ -48,6 +66,27 @@
       </div>
       <div class="wl-content" v-html="comment.comment" />
 
+      <div v-if="isAdmin" class="wl-admin-actions">
+        <span class="wl-comment-status">
+          <button
+            v-for="status in commentStatus"
+            :key="status"
+            :class="`wl-btn wl-${status}`"
+            :disabled="comment.status === status"
+            @click="$emit('status', { status, comment })"
+            v-text="status"
+          />
+        </span>
+
+        <button
+          class="wl-btn wl-sticky"
+          v-if="isAdmin && !comment.rid"
+          @click="$emit('sticky', comment)"
+        >
+          {{ comment.sticky ? 'unsticky' : 'sticky' }}
+        </button>
+      </div>
+
       <div v-if="isReplyingCurrent" class="wl-reply-wrapper">
         <CommentBox
           :replyId="comment.objectId"
@@ -66,6 +105,10 @@
           :rootId="rootId"
           @reply="$emit('reply', $event)"
           @submit="$emit('submit', $event)"
+          @like="$emit('like', $event)"
+          @delete="$emit('delete', $event)"
+          @status="$emit('status', $event)"
+          @sticky="$emit('sticky', $event)"
         />
       </div>
     </div>
@@ -75,13 +118,15 @@
 <script lang="ts">
 import { computed, defineComponent, inject } from 'vue';
 import CommentBox from './CommentBox.vue';
-import { ReplyIcon, VerifiedIcon } from './Icons';
+import { DeleteIcon, LikeIcon, ReplyIcon, VerifiedIcon } from './Icons';
 import { isLinkHttp } from '../utils';
-import { useTimeAgo } from '../composables';
+import { useTimeAgo, useLikeStorage, useUserInfo } from '../composables';
 
 import type { ComputedRef, PropType } from 'vue';
 import type { WalineConfig } from '../utils';
-import type { WalineComment } from '../typings';
+import type { WalineComment, WalineCommentStatus } from '../typings';
+
+const commentStatus: WalineCommentStatus[] = ['approved', 'waiting', 'spam'];
 
 export default defineComponent({
   props: {
@@ -100,16 +145,21 @@ export default defineComponent({
 
   components: {
     CommentBox,
+    DeleteIcon,
+    LikeIcon,
     ReplyIcon,
     VerifiedIcon,
   },
 
-  emits: ['submit', 'reply'],
+  emits: ['submit', 'reply', 'like', 'delete', 'status', 'sticky'],
 
   setup(props) {
     const config = inject<ComputedRef<WalineConfig>>(
       'config'
     ) as ComputedRef<WalineConfig>;
+    const likes = useLikeStorage();
+    const userInfo = useUserInfo();
+
     const locale = computed(() => config.value.locale);
 
     const link = computed(() => {
@@ -118,8 +168,18 @@ export default defineComponent({
       return link ? (isLinkHttp(link) ? link : `https://${link}`) : '';
     });
 
+    const like = computed(() => likes.value.includes(props.comment.objectId));
+
     const time = useTimeAgo(props.comment.insertedAt, locale.value);
 
+    const isAdmin = computed(() => userInfo.value.type === 'administrator');
+
+    const isOwner = computed(
+      () =>
+        props.comment.user_id &&
+        userInfo.value.objectId === props.comment.user_id
+    );
+
     const isReplyingCurrent = computed(
       () => props.comment.objectId === props.reply?.objectId
     );
@@ -130,7 +190,13 @@ export default defineComponent({
 
       isReplyingCurrent,
       link,
+      like,
       time,
+
+      isAdmin,
+      isOwner,
+
+      commentStatus,
     };
   },
 });

package/src/components/Icons.ts

@@ -22,6 +22,16 @@ export const CloseIcon: FunctionalComponent<{ size: number }> = ({ size }) =>
     ]
   );
 
+export const DeleteIcon: FunctionalComponent = () =>
+  h(
+    'svg',
+    { viewBox: '0 0 1024 1024', width: '24', height: '24' },
+    h('path', {
+      d: 'm341.013 394.667 27.755 393.45h271.83l27.733-393.45h64.106l-28.01 397.952a64 64 0 0 1-63.83 59.498H368.768a64 64 0 0 1-63.83-59.52l-28.053-397.93h64.128zm139.307 19.818v298.667h-64V414.485h64zm117.013 0v298.667h-64V414.485h64zM181.333 288h640v64h-640v-64zm453.483-106.667v64h-256v-64h256z',
+      fill: 'red',
+    })
+  );
+
 export const EmojiIcon: FunctionalComponent = () =>
   h(
     'svg',
@@ -44,6 +54,22 @@ export const ImageIcon: FunctionalComponent = () =>
     }),
   ]);
 
+export const LikeIcon: FunctionalComponent<{ active: boolean }> = ({
+  active = false,
+}: {
+  active?: boolean;
+}) =>
+  h('svg', { viewBox: '0 0 1024 1024', width: '24', height: '24' }, [
+    h('path', {
+      d: `M850.654 323.804c-11.042-25.625-26.862-48.532-46.885-68.225-20.022-19.61-43.258-34.936-69.213-45.73-26.78-11.124-55.124-16.727-84.375-16.727-40.622 0-80.256 11.123-114.698 32.135A214.79 214.79 0 0 0 512 241.819a214.79 214.79 0 0 0-23.483-16.562c-34.442-21.012-74.076-32.135-114.698-32.135-29.25 0-57.595 5.603-84.375 16.727-25.872 10.711-49.19 26.12-69.213 45.73-20.105 19.693-35.843 42.6-46.885 68.225-11.453 26.615-17.303 54.877-17.303 83.963 0 27.439 5.603 56.03 16.727 85.117 9.31 24.307 22.659 49.52 39.715 74.981 27.027 40.293 64.188 82.316 110.33 124.915 76.465 70.615 152.189 119.394 155.402 121.371l19.528 12.525c8.652 5.52 19.776 5.52 28.427 0l19.529-12.525c3.213-2.06 78.854-50.756 155.401-121.371 46.143-42.6 83.304-84.622 110.33-124.915 17.057-25.46 30.487-50.674 39.716-74.981 11.124-29.087 16.727-57.678 16.727-85.117.082-29.086-5.768-57.348-17.221-83.963z${
+        active
+          ? ''
+          : 'M512 761.5S218.665 573.55 218.665 407.767c0-83.963 69.461-152.023 155.154-152.023 60.233 0 112.473 33.618 138.181 82.727 25.708-49.109 77.948-82.727 138.18-82.727 85.694 0 155.155 68.06 155.155 152.023C805.335 573.551 512 761.5 512 761.5z'
+      }`,
+      fill: active ? 'red' : 'currentColor',
+    }),
+  ]);
+
 export const PreviewIcon: FunctionalComponent = () =>
   h('svg', { viewBox: '0 0 1024 1024', width: '24', height: '24' }, [
     h('path', {
@@ -69,9 +95,9 @@ export const MarkdownIcon: FunctionalComponent = () =>
 export const ReplyIcon: FunctionalComponent = () =>
   h(
     'svg',
-    { viewBox: '0 0 1024 1024', width: '18', height: '18' },
+    { viewBox: '0 0 1024 1024', width: '24', height: '24' },
     h('path', {
-      d: 'M1019.2 720C1001.6 625.6 968 566.4 904 497.6c-89.6-89.6-214.4-150.4-347.2-176v-120c0-25.6-8-51.2-25.6-64-33.6-30.4-81.6-30.4-112-4.8L33.6 441.6C12.8 459.2 0 484.8 0 510.4c0 25.6 12.8 51.2 30.4 68.8l385.6 312c17.6 12.8 33.6 17.6 51.2 17.6 12.8 0 25.6-4.8 38.4-8C536 888 552 857.6 552 824v-99.2c124.8 20.8 248 86.4 339.2 140.8 25.6 17.6 59.2 17.6 89.6 0 25.6-17.6 43.2-46.4 43.2-76.8 0-33.6 0-56-4.8-68.8zm-500.8-89.6-46.4-4.8v193.6L86.4 510.4 472 201.6V400l38.4 4.8c128 12.8 248 68.8 334.4 153.6 51.2 56 76.8 102.4 94.4 179.2 0 4.8 4.8 20.8 4.8 51.2C835.2 720 672 640 518.4 630.4z',
+      d: 'M810.667 213.333a64 64 0 0 1 64 64V704a64 64 0 0 1-64 64H478.336l-146.645 96.107a21.333 21.333 0 0 1-33.024-17.856V768h-85.334a64 64 0 0 1-64-64V277.333a64 64 0 0 1 64-64h597.334zm0 64H213.333V704h149.334v63.296L459.243 704h351.424V277.333zm-271.36 213.334v64h-176.64v-64h176.64zm122.026-128v64H362.667v-64h298.666z',
       fill: 'currentColor',
     })
   );

package/src/components/Waline.vue

@@ -15,6 +15,10 @@
         :reply="reply"
         @reply="onReply"
         @submit="onSubmit"
+        @status="onStatusChange"
+        @delete="onDelete"
+        @sticky="onSticky"
+        @like="onLike"
       />
     </div>
 
@@ -66,13 +70,21 @@ import { computed, defineComponent, onMounted, provide, ref, watch } from 'vue';
 import CommentBox from './CommentBox.vue';
 import CommentCard from './CommentCard.vue';
 import { LoadingIcon } from './Icons';
-import { useUserInfo } from '../composables';
+import { useUserInfo, useLikeStorage } from '../composables';
 import { defaultLocales } from '../config';
-import { fetchCommentList, getConfig, getDarkStyle } from '../utils';
+import {
+  deleteComment,
+  fetchCommentList,
+  likeComment,
+  getConfig,
+  getDarkStyle,
+  updateComment,
+} from '../utils';
 
 import type { PropType } from 'vue';
 import type {
   WalineComment,
+  WalineCommentStatus,
   WalineEmojiInfo,
   WalineHighlighter,
   WalineTexRenderer,
@@ -203,6 +215,7 @@ export default defineComponent({
     const config = computed(() => getConfig(props as unknown as WalineProps));
 
     const userInfo = useUserInfo();
+    const likeStorage = useLikeStorage();
 
     const status = ref<'loading' | 'success' | 'error'>('loading');
 
@@ -281,6 +294,102 @@ export default defineComponent({
       } else data.value.unshift(comment);
     };
 
+    const onStatusChange = async ({
+      comment,
+      status,
+    }: {
+      comment: WalineComment;
+      status: WalineCommentStatus;
+    }): Promise<void> => {
+      if (comment.status === status) return;
+
+      const { serverURL, lang } = config.value;
+
+      await updateComment({
+        serverURL,
+        lang,
+        token: userInfo.value?.token,
+        objectId: comment.objectId,
+        status,
+      });
+
+      comment.status = status;
+    };
+
+    const onSticky = async (comment: WalineComment): Promise<void> => {
+      if (comment.rid) return;
+
+      const { serverURL, lang } = config.value;
+
+      await updateComment({
+        serverURL,
+        lang,
+        token: userInfo.value?.token,
+        objectId: comment.objectId,
+        sticky: comment.sticky ? 0 : 1,
+      });
+
+      comment.sticky = !comment.sticky;
+    };
+
+    const onDelete = async ({ objectId }: WalineComment): Promise<void> => {
+      if (!confirm('Are you sure you want to delete this comment?')) return;
+
+      const { serverURL, lang } = config.value;
+
+      await deleteComment({
+        serverURL,
+        lang,
+        token: userInfo.value?.token,
+        objectId: objectId,
+      });
+
+      // delete comment from data
+      data.value.some((item, index) => {
+        if (item.objectId === objectId) {
+          data.value = data.value.filter((_item, i) => i !== index);
+
+          return true;
+        }
+
+        return item.children.some((child, childIndex) => {
+          if (child.objectId === objectId) {
+            data.value[index].children = item.children.filter(
+              (_item, i) => i !== childIndex
+            );
+
+            return true;
+          }
+
+          return false;
+        });
+      });
+    };
+
+    const onLike = async (comment: WalineComment): Promise<void> => {
+      const { serverURL, lang } = config.value;
+      const { objectId } = comment;
+      const hasLiked = likeStorage.value.includes(objectId);
+
+      await likeComment({
+        serverURL,
+        lang,
+        objectId,
+        like: !hasLiked,
+      });
+
+      if (hasLiked)
+        likeStorage.value = likeStorage.value.filter((id) => id !== objectId);
+      else {
+        likeStorage.value = [...likeStorage.value, objectId];
+
+        if (likeStorage.value.length > 50)
+          likeStorage.value = likeStorage.value.slice(-50);
+      }
+
+      comment.like = (comment.like || 0) + (hasLiked ? -1 : 1);
+    };
+
     provide('config', config);
 
     watch(() => (props as unknown as WalineProps).path, refresh);
@@ -303,6 +412,10 @@ export default defineComponent({
       refresh,
       onReply,
       onSubmit,
+      onStatusChange,
+      onDelete,
+      onSticky,
+      onLike,
 
       version: VERSION,
     };

package/src/composables/index.ts

@@ -1,3 +1,4 @@
 export * from './inputs';
 export * from './timeAgo';
 export * from './userInfo';
+export * from './like';

package/src/composables/like.ts

@@ -0,0 +1,14 @@
+import { useStorage } from '@vueuse/core';
+
+import type { Ref } from 'vue';
+
+const LIKE_KEY = 'WALIKE_LIKE';
+
+export type LikeID = number | string;
+
+export type LikeRef = Ref<LikeID[]>;
+
+let likeStorage: LikeRef | null = null;
+
+export const useLikeStorage = (): LikeRef =>
+  likeStorage || (likeStorage = useStorage<LikeID[]>(LIKE_KEY, []));

package/src/composables/userInfo.ts

@@ -10,11 +10,19 @@ export interface UserInfo {
   token: string;
   avatar: string;
   mailMd5: string;
+  objectId: string | number;
+  type: 'administrator' | 'guest';
 }
 
 export const USER_KEY = 'WALINE_USER';
 
 export type UserInfoRef = Ref<UserInfo | Record<string, never>>;
 
+let userInfoStorage: UserInfoRef | null = null;
+
 export const useUserInfo = (): UserInfoRef =>
-  useStorage<UserInfo | Record<string, never>>('USER_KEY', {});
+  userInfoStorage ||
+  (userInfoStorage = useStorage<UserInfo | Record<string, never>>(
+    'USER_KEY',
+    {}
+  ));

package/src/config/i18n/en.ts

@@ -10,6 +10,8 @@ export default generateLocale([
   'Comment here...',
   'No comment yet.',
   'Submit',
+  'Like',
+  'Cancel like',
   'Reply',
   'Cancel reply',
   'Comments',

package/src/config/i18n/generate.ts

@@ -10,6 +10,8 @@ const localeKeys = [
   'placeholder',
   'sofa',
   'submit',
+  'like',
+  'cancelLike',
   'reply',
   'cancelReply',
   'comment',

package/src/config/i18n/jp.ts

@@ -10,6 +10,8 @@ export default generateLocale([
   'ここにコメント',
   'コメントしましょう~',
   '提出する',
+  'Like',
+  'Cancel like',
   '返信する',
   'キャンセル',
   'コメント',

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

@@ -10,6 +10,8 @@ export default generateLocale([
   'Comente aqui...',
   'Nenhum comentário, ainda.',
   'Enviar',
+  'Like',
+  'Cancel like',
   'Responder',
   'Cancelar resposta',
   'Comentários',

package/src/config/i18n/ru.ts

@@ -10,6 +10,8 @@ export default generateLocale([
   'Комментарий здесь...',
   'Пока нет комментариев.',
   'Отправить',
+  'Like',
+  'Cancel like',
   'Отвечать',
   'Отменить ответ',
   'Комментарии',

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

@@ -10,6 +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',
   'Trả lời',
   'Hủy bỏ',
   'bình luận',

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

@@ -10,6 +10,8 @@ export default generateLocale([
   '欢迎评论',
   '来发评论吧~',
   '提交',
+  '喜欢',
+  '取消喜欢',
   '回复',
   '取消回复',
   '评论',

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

@@ -10,6 +10,8 @@ export default generateLocale([
   '歡迎評論',
   '來發評論吧~',
   '提交',
+  '喜歡',
+  '取消喜歡',
   '回覆',
   '取消回覆',
   '評論',

package/src/styles/card.scss

@@ -18,13 +18,13 @@
   .wl-user {
     --avatar-size: var(--waline-avatar-size);
 
+    position: relative;
+    margin-right: 0.75em;
+
     @media (max-width: 720px) {
       --avatar-size: var(--waline-m-avatar-size);
     }
 
-    position: relative;
-    margin-right: 0.75em;
-
     img {
       width: var(--avatar-size);
       height: var(--avatar-size);
@@ -101,30 +101,6 @@
     font-size: 0.75em;
   }
 
-  .wl-reply {
-    float: right;
-
-    padding: 4px;
-    border: none;
-
-    background: transparent;
-    color: var(--waline-color);
-
-    line-height: 1;
-
-    cursor: pointer;
-
-    transition: color 0.2s ease;
-
-    &:hover {
-      color: var(--waline-theme-color);
-    }
-
-    &.active {
-      color: var(--waline-active-color);
-    }
-  }
-
   .wl-meta {
     position: relative;
     line-height: 1;
@@ -152,6 +128,36 @@
     }
   }
 
+  .wl-comment-actions {
+    float: right;
+  }
+
+  .wl-delete,
+  .wl-like,
+  .wl-reply {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px;
+    border: none;
+
+    background: transparent;
+    color: var(--waline-color);
+
+    line-height: 1;
+
+    cursor: pointer;
+
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: var(--waline-theme-color);
+    }
+
+    &.active {
+      color: var(--waline-active-color);
+    }
+  }
+
   .wl-content {
     position: relative;
 
@@ -213,6 +219,28 @@
     }
   }
 
+  .wl-admin-actions {
+    margin: 8px 0;
+    font-size: 12px;
+    text-align: right;
+  }
+
+  .wl-comment-status {
+    margin: 0 8px;
+
+    .wl-btn {
+      border-radius: 0;
+
+      &:first-child {
+        border-radius: 0.5em 0 0 0.5em;
+      }
+
+      &:last-child {
+        border-radius: 0 0.5em 0.5em 0;
+      }
+    }
+  }
+
   .wl-quote {
     border-left: 1px dashed rgb(237 237 237 / 50%);
 

package/src/styles/nomalize.scss

@@ -19,7 +19,6 @@
     color: var(--waline-theme-color);
 
     text-decoration: none;
-
     word-break: break-word;
 
     cursor: pointer;

package/src/styles/panel.scss

@@ -196,7 +196,6 @@
   .wl-content {
     min-height: 1.25em;
     padding: 0.25em;
-
     word-break: break-word;
     hyphens: auto;