@waline/client 2.3.2 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.3.2",
+  "version": "2.4.0",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -56,6 +56,15 @@
     "dist",
     "src"
   ],
+  "scripts": {
+    "build": "pnpm rollup && pnpm style",
+    "clean": "rimraf ./dist",
+    "dev": "vite -c config/vite.config.js",
+    "lint": "eslint --ext .ts,.vue .",
+    "prepublish": "pnpm clean && pnpm build",
+    "rollup": "rollup -c ./config/rollup.config.js",
+    "style": "sass ./src/styles/index.scss ./dist/waline.css --style=compressed"
+  },
   "browserslist": {
     "production": [
       ">0.5%",
@@ -71,7 +80,7 @@
     ]
   },
   "dependencies": {
-    "@vueuse/core": "^8.4.0",
+    "@vueuse/core": "^8.4.2",
     "autosize": "^5.0.1",
     "marked": "^4.0.15",
     "vue": "^3.2.33"
@@ -79,19 +88,10 @@
   "devDependencies": {
     "@types/autosize": "^4.0.1",
     "@types/marked": "^4.0.3",
-    "@vitejs/plugin-vue": "^2.3.1",
-    "vite": "^2.9.7"
+    "@vitejs/plugin-vue": "^2.3.2",
+    "vite": "^2.9.8"
   },
   "engines": {
     "node": ">=12.20.0"
-  },
-  "scripts": {
-    "build": "pnpm rollup && pnpm style",
-    "clean": "rimraf ./dist",
-    "dev": "vite -c config/vite.config.js",
-    "lint": "eslint --ext .ts,.vue .",
-    "prepublish": "pnpm clean && pnpm build",
-    "rollup": "rollup -c ./config/rollup.config.js",
-    "style": "sass ./src/styles/index.scss ./dist/waline.css --style=compressed"
   }
-}
+}

package/src/components/CommentCard.vue

@@ -25,11 +25,10 @@
         <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
@@ -40,6 +39,23 @@
         >
           <ReplyIcon />
         </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-delete"
+          v-if="isAdmin || isOwner"
+          @click="$emit('delete', comment)"
+        >
+          <DeleteIcon />
+        </button>
       </div>
       <div class="wl-meta" aria-hidden="true">
         <span v-if="comment.addr" v-text="comment.addr" />
@@ -48,6 +64,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 +103,9 @@
           :rootId="rootId"
           @reply="$emit('reply', $event)"
           @submit="$emit('submit', $event)"
+          @like="$emit('like', $event)"
+          @status="$emit('status', $event)"
+          @sticky="$emit('sticky', $event)"
         />
       </div>
     </div>
@@ -75,13 +115,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 +142,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 +165,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 +187,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,80 @@ 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,
+      });
+      // todo: render comment list
+    };
+
+    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,
+      });
+      // todo: render comment list
+    };
+
+    const onDelete = async (comment: 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: comment.objectId,
+      });
+      // todo render comment list
+    };
+
+    const onLike = async (comment: WalineComment): Promise<void> => {
+      const { serverURL, lang } = config.value;
+      const hasLiked = likeStorage.value.includes(comment.objectId);
+
+      await likeComment({
+        serverURL,
+        lang,
+        objectId: comment.objectId,
+        like: !hasLiked,
+      });
+
+      if (hasLiked)
+        likeStorage.value = likeStorage.value.filter(
+          (id) => id !== comment.objectId
+        );
+      else {
+        likeStorage.value.push(comment.objectId);
+
+        if (likeStorage.value.length > 50) 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 +390,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 './likeStorage';

package/src/composables/likeStorage.ts

@@ -0,0 +1,11 @@
+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[]>;
+
+export const useLikeStorage = (): LikeRef => useStorage<LikeID[]>(LIKE_KEY, []);

package/src/composables/userInfo.ts

@@ -10,6 +10,8 @@ export interface UserInfo {
   token: string;
   avatar: string;
   mailMd5: string;
+  objectId: string | number;
+  type: 'administrator' | 'guest';
 }
 
 export const USER_KEY = 'WALINE_USER';

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

@@ -101,6 +101,8 @@
     font-size: 0.75em;
   }
 
+  .wl-delete,
+  .wl-like,
   .wl-reply {
     float: right;
 
@@ -213,6 +215,28 @@
     }
   }
 
+  .wl-admin-actions {
+    margin: 8px 0;
+    text-align: right;
+    font-size: 12px;
+  }
+
+  .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/typings/comment.ts

@@ -1,21 +1,71 @@
 export interface WalineCommentData {
+  /**
+   * User Nickname
+   */
   nick: string;
+
+  /**
+   * User email
+   */
   mail: string;
+
+  /**
+   * User link
+   */
   link?: string;
+
+  /**
+   * Content of comment
+   */
   comment: string;
+
+  /**
+   * User Agent
+   */
   ua: string;
 
+  /**
+   * Parent comment id
+   */
+
   pid?: string;
+
+  /**
+   * Root comment id
+   */
   rid?: string;
+
+  /**
+   * User id being at
+   */
   at?: string;
+
+  /**
+   * Comment link
+   */
   url: string;
 }
 
+export type WalineCommentStatus = 'approved' | 'waiting' | 'spam';
+
 export interface WalineComment extends Exclude<WalineCommentData, 'ua'> {
+  /**
+   * User avatar
+   */
   avatar: string;
-  type?: string;
+
+  /**
+   * User type
+   */
+  type?: 'administrator' | 'guest' | `verify:${string}`;
+
   objectId: string;
+
+  /**
+   * Time ISOString when the comment is created
+   */
   createdAt: string;
+
   insertedAt: string;
   updatedAt: string;
   children: WalineComment[];
@@ -25,4 +75,9 @@ export interface WalineComment extends Exclude<WalineCommentData, 'ua'> {
   level?: number;
   addr?: string;
   label?: string;
+  // TODO: Rename it to `userId` in next major version
+  // eslint-disable-next-line @typescript-eslint/naming-convention
+  user_id?: string | number;
+  status?: WalineCommentStatus;
+  like?: number;
 }

package/src/typings/locale.ts

@@ -6,14 +6,7 @@ export interface WalineDateLocale {
   now: string;
 }
 
-export interface WalineLevelLocale {
-  level0: string;
-  level1: string;
-  level2: string;
-  level3: string;
-  level4: string;
-  level5: string;
-}
+export type WalineLevelLocale = Record<`level${number}`, string>;
 
 export interface WalineLocale extends WalineDateLocale, WalineLevelLocale {
   nick: string;
@@ -25,6 +18,8 @@ export interface WalineLocale extends WalineDateLocale, WalineLevelLocale {
   placeholder: string;
   sofa: string;
   submit: string;
+  like: string;
+  cancelLike: string;
   reply: string;
   cancelReply: string;
   comment: string;

package/src/utils/config.ts

@@ -68,7 +68,7 @@ export const getConfig = ({
   locale: {
     ...(defaultLocales[lang] || defaultLocales[defaultLang]),
     ...(typeof locale === 'object' ? locale : {}),
-  },
+  } as WalineLocale,
   wordLimit: getWordLimit(wordLimit),
   meta: getMeta(meta),
   requiredMeta: getMeta(requiredMeta),