@waline/client 2.3.0 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -57,11 +57,11 @@
     "src"
   ],
   "scripts": {
-    "build": "npm run rollup && npm run style",
+    "build": "pnpm rollup && pnpm style",
     "clean": "rimraf ./dist",
     "dev": "vite -c config/vite.config.js",
     "lint": "eslint --ext .ts,.vue .",
-    "prepublish": "npm run clean && npm run build",
+    "prepublish": "pnpm clean && pnpm build",
     "rollup": "rollup -c ./config/rollup.config.js",
     "style": "sass ./src/styles/index.scss ./dist/waline.css --style=compressed"
   },
@@ -80,17 +80,16 @@
     ]
   },
   "dependencies": {
-    "@vueuse/core": "^8.4.0",
+    "@vueuse/core": "^8.4.2",
     "autosize": "^5.0.1",
-    "hanabi": "^0.4.0",
     "marked": "^4.0.15",
     "vue": "^3.2.33"
   },
   "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"

package/src/components/CommentBox.vue

@@ -405,9 +405,7 @@ export default defineComponent({
         if (
           (requiredMeta.indexOf('mail') > -1 && !comment.mail) ||
           (comment.mail &&
-            !/^\w(?:[\w._-]*\w)?@(?:\w(?:[\w-]*\w)?\.){0,2}\w+$/.exec(
-              comment.mail
-            ))
+            !/^\w(?:[\w._-]*\w)?@(?:\w(?:[\w-]*\w)?\.)*\w+$/.exec(comment.mail))
         ) {
           inputRefs.value.mail?.focus();
           return alert(locale.value.mailError);

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,24 +70,136 @@ 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,
   WalineImageUploader,
   WalineLocale,
   WalineProps,
+  WalineMeta,
 } from '../typings';
 
 declare const SHOULD_VALIDATE: boolean;
 declare const VERSION: string;
 
+const props = [
+  'serverURL',
+  'path',
+  'meta',
+  'requiredMeta',
+  'dark',
+  'lang',
+  'locale',
+  'pageSize',
+  'wordLimit',
+  'emoji',
+  'login',
+  'highlighter',
+  'texRenderer',
+  'imageUploader',
+  'copyright',
+];
+
+const propsWithValidate = {
+  serverURL: {
+    type: String,
+    required: true,
+  },
+
+  path: {
+    type: String,
+    required: true,
+  },
+
+  meta: {
+    type: Array as PropType<WalineMeta[]>,
+    default: (): WalineMeta[] => ['nick', 'mail', 'link'],
+    validator: (value: unknown): boolean =>
+      Array.isArray(value) &&
+      value.every((item) => ['nick', 'mail', 'link'].includes(item)),
+  },
+
+  requiredMeta: {
+    type: Array,
+    default: (): WalineMeta[] => [],
+    validator: (value: unknown): boolean =>
+      Array.isArray(value) &&
+      value.every((item) => ['nick', 'mail', 'link'].includes(item)),
+  },
+
+  dark: [String, Boolean],
+
+  lang: {
+    type: String,
+    default: 'zh-CN',
+    validator: (value: unknown): boolean =>
+      Object.keys(defaultLocales).includes(value as string),
+  },
+
+  locale: Object as PropType<Partial<WalineLocale>>,
+
+  pageSize: { type: Number, default: 10 },
+
+  wordLimit: {
+    type: [Number, Array] as PropType<number | [number, number]>,
+    validator: (value: unknown): boolean =>
+      typeof value === 'number' ||
+      (Array.isArray(value) &&
+        value.length === 2 &&
+        value.every((item) => typeof item === 'number')),
+  },
+
+  emoji: {
+    type: [Array, Boolean] as PropType<(string | WalineEmojiInfo)[] | false>,
+    validator: (value: unknown): boolean =>
+      value === false ||
+      (Array.isArray(value) &&
+        value.every(
+          (item) =>
+            typeof item === 'string' ||
+            (typeof item === 'object' &&
+              typeof item.name === 'string' &&
+              typeof item.folder === 'string' &&
+              typeof item.icon === 'string' &&
+              Array.isArray(item.items) &&
+              (item.items as unknown[]).every(
+                (icon) => typeof icon === 'string'
+              ))
+        )),
+  },
+
+  login: String as PropType<'enable' | 'disable' | 'force'>,
+
+  highlighter: Function as PropType<WalineHighlighter>,
+
+  imageUploader: {
+    type: [Function, Boolean] as PropType<WalineImageUploader | false>,
+    default: undefined,
+  },
+
+  texRenderer: {
+    type: [Function, Boolean] as PropType<WalineTexRenderer | false>,
+    default: undefined,
+  },
+
+  copyright: { type: Boolean, default: true },
+};
+
 export default defineComponent({
   name: 'WalineRoot',
 
@@ -93,119 +209,13 @@ export default defineComponent({
     LoadingIcon,
   },
 
-  props: {
-    serverURL: {
-      type: String,
-      required: true,
-    },
-
-    path: {
-      type: String,
-      required: true,
-    },
-
-    meta: {
-      type: Array,
-      ...(SHOULD_VALIDATE
-        ? {
-            validator: (value: unknown): boolean =>
-              Array.isArray(value) &&
-              value.every((item) => ['nick', 'mail', 'link'].includes(item)),
-          }
-        : {}),
-    },
-
-    requiredMeta: {
-      type: Array,
-      ...(SHOULD_VALIDATE
-        ? {
-            validator: (value: unknown): boolean =>
-              Array.isArray(value) &&
-              value.every((item) => ['nick', 'mail', 'link'].includes(item)),
-          }
-        : {}),
-    },
-
-    dark: {
-      type: [String, Boolean],
-    },
-
-    lang: {
-      type: String,
-      ...(SHOULD_VALIDATE
-        ? {
-            validator: (value: unknown): boolean =>
-              Object.keys(defaultLocales).includes(value as string),
-          }
-        : {}),
-    },
-
-    locale: {
-      type: Object as PropType<Partial<WalineLocale>>,
-    },
-
-    pageSize: {
-      type: Number,
-    },
-
-    wordLimit: {
-      type: [Number, Array] as PropType<number | [number, number]>,
-      // default: 0,
-      ...(SHOULD_VALIDATE
-        ? {
-            validator: (value: unknown): boolean =>
-              typeof value === 'number' ||
-              (Array.isArray(value) &&
-                value.length === 2 &&
-                value.every((item) => typeof item === 'number')),
-          }
-        : {}),
-    },
-
-    emoji: {
-      type: [Array, Boolean] as PropType<(string | WalineEmojiInfo)[] | false>,
-      ...(SHOULD_VALIDATE
-        ? {
-            validator: (value: unknown): boolean =>
-              value === false ||
-              (Array.isArray(value) &&
-                value.every(
-                  (item) =>
-                    typeof item === 'string' ||
-                    (typeof item === 'object' &&
-                      typeof item.name === 'string' &&
-                      typeof item.folder === 'string' &&
-                      typeof item.icon === 'string' &&
-                      Array.isArray(item.items) &&
-                      (item.items as unknown[]).every(
-                        (icon) => typeof icon === 'string'
-                      ))
-                )),
-          }
-        : {}),
-    },
-
-    login: {
-      type: String as PropType<'enable' | 'disable' | 'force'>,
-    },
-
-    highlighter: {
-      type: Function as PropType<WalineHighlighter>,
-    },
-
-    imageUploader: {
-      type: [Function, Boolean] as PropType<WalineImageUploader | false>,
-    },
-
-    texRenderer: {
-      type: [Function, Boolean] as PropType<WalineTexRenderer | false>,
-    },
-  },
+  props: SHOULD_VALIDATE ? propsWithValidate : props,
 
   setup(props) {
-    const config = computed(() => getConfig(props as WalineProps));
+    const config = computed(() => getConfig(props as unknown as WalineProps));
 
     const userInfo = useUserInfo();
+    const likeStorage = useLikeStorage();
 
     const status = ref<'loading' | 'success' | 'error'>('loading');
 
@@ -284,9 +294,83 @@ 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.path, refresh);
+    watch(() => (props as unknown as WalineProps).path, refresh);
 
     onMounted(() => refresh());
 
@@ -306,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';