@waline/client 2.5.1 → 2.6.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.5.1",
+  "version": "2.6.2",
   "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,41 +80,31 @@
     ]
   },
   "dependencies": {
-    "@vueuse/core": "^8.5.0",
+    "@vueuse/core": "^8.9.4",
     "autosize": "^5.0.1",
-    "marked": "^4.0.16",
-    "vue": "^3.2.35"
+    "marked": "^4.0.18",
+    "vue": "^3.2.37"
   },
   "devDependencies": {
-    "@babel/core": "^7.18.0",
-    "@babel/preset-env": "^7.18.0",
-    "@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",
-    "@types/node": "^17.0.35",
-    "@vitejs/plugin-vue": "^2.3.3",
-    "@vue/compiler-sfc": "^3.2.35",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.74.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.9"
+    "@babel/core": "7.18.9",
+    "@babel/preset-env": "7.18.9",
+    "@rollup/plugin-babel": "5.3.1",
+    "@rollup/plugin-commonjs": "22.0.1",
+    "@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",
+    "rimraf": "3.0.2",
+    "rollup": "2.77.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"
   },
   "engines": {
     "node": ">=14"
-  },
-  "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/comment.ts

@@ -1,5 +1,10 @@
 import { useUserInfo } from './composables';
-import { decodePath, errorHandler, fetchCommentCount } from './utils';
+import {
+  decodePath,
+  errorHandler,
+  fetchCommentCount,
+  getServerURL,
+} from './utils';
 import type { WalineAbort } from './typings';
 
 export interface WalineCommentCountOptions {
@@ -54,7 +59,7 @@ WalineCommentCountOptions): WalineAbort => {
 
   if (elements.length)
     void fetchCommentCount({
-      serverURL,
+      serverURL: getServerURL(serverURL),
       paths: Array.from(elements).map((element) =>
         decodePath(element.dataset.path || element.getAttribute('id') || path)
       ),

package/src/components/CommentBox.vue

@@ -6,12 +6,21 @@
           <CloseIcon :size="14" />
         </button>
 
-        <img :src="userInfo.avatar" alt="avatar" />
+        <a
+          href="#"
+          class="wl-login-nick"
+          aria-label="Profile"
+          :title="locale.profile"
+          @click="onProfile"
+        >
+          <img :src="userInfo.avatar" alt="avatar" />
+        </a>
       </div>
       <a
         href="#"
         class="wl-login-nick"
         aria-label="Profile"
+        :title="locale.profile"
         @click="onProfile"
         v-text="userInfo.display_name"
       />
@@ -22,7 +31,7 @@
         v-if="config.login !== 'force' && config.meta.length && !isLogin"
         :class="['wl-header', `item${config.meta.length}`]"
       >
-        <div v-for="kind in config.meta" class="wl-header-item" :key="kind">
+        <div v-for="kind in config.meta" :key="kind" class="wl-header-item">
           <label
             :for="kind"
             v-text="
@@ -33,34 +42,35 @@
             "
           />
           <input
+            :id="`wl-${kind}`"
             :ref="
               (element) => {
                 if (element) inputRefs[kind] = element as HTMLInputElement;
               }
             "
-            :id="`wl-${kind}`"
+            v-model="userMeta[kind]"
             :class="['wl-input', `wl-${kind}`]"
             :name="kind"
             :type="kind === 'mail' ? 'email' : 'text'"
-            v-model="userMeta[kind]"
           />
         </div>
       </div>
 
       <textarea
-        class="wl-editor"
-        ref="editorRef"
         id="wl-edit"
-        :placeholder="replyUser ? `@${replyUser}` : locale.placeholder"
+        ref="editorRef"
         v-model="editor"
+        class="wl-editor"
+        :placeholder="replyUser ? `@${replyUser}` : locale.placeholder"
         @keydown="onKeyDown"
         @drop="onDrop"
         @paste="onPaste"
       />
 
-      <div class="wl-preview" v-show="showPreview">
+      <div v-show="showPreview" class="wl-preview">
         <hr />
         <h4>{{ locale.preview }}:</h4>
+        <!-- eslint-disable-next-line vue/no-v-html -->
         <div class="wl-content" v-html="previewText" />
       </div>
 
@@ -89,6 +99,7 @@
           </button>
 
           <button
+            v-if="config.search"
             ref="gifButtonRef"
             class="wl-action"
             :class="{ actived: showGif }"
@@ -99,9 +110,9 @@
           </button>
 
           <input
+            id="wl-image-upload"
             ref="imageUploadRef"
             class="upload"
-            id="wl-image-upload"
             type="file"
             accept=".png,.jpg,.jpeg,.webp,.bmp,.gif"
             @change="onChange"
@@ -168,9 +179,9 @@
           :class="{ display: showGif }"
         >
           <input
+            ref="gifSearchInputRef"
             type="text"
             :placeholder="locale.gifSearchPlaceholder"
-            ref="gifSearchInputRef"
             @input="onGifSearch"
           />
 
@@ -192,10 +203,13 @@
           class="wl-emoji-popup"
           :class="{ display: showEmoji }"
         >
-          <template v-for="(config, index) in emoji.tabs" :key="config.name">
+          <template
+            v-for="(emojiItem, index) in emoji.tabs"
+            :key="emojiItem.name"
+          >
             <div v-if="index === emojiTabIndex" class="wl-tab-wrapper">
               <button
-                v-for="key in config.items"
+                v-for="key in emojiItem.items"
                 :key="key"
                 :title="key"
                 @click="insert(`:${key}:`)"
@@ -213,17 +227,17 @@
           </template>
           <div v-if="emoji.tabs.length > 1" class="wl-tabs">
             <button
-              v-for="(config, index) in emoji.tabs"
-              :key="config.name"
+              v-for="(emojiItem, index) in emoji.tabs"
+              :key="emojiItem.name"
               class="wl-tab"
               :class="{ active: emojiTabIndex === index }"
               @click="emojiTabIndex = index"
             >
               <img
                 class="wl-emoji"
-                :src="config.icon"
-                :alt="config.name"
-                :title="config.name"
+                :src="emojiItem.icon"
+                :alt="emojiItem.name"
+                :title="emojiItem.name"
                 loading="lazy"
                 referrerPolicy="no-referrer"
               />
@@ -245,6 +259,7 @@
 </template>
 
 <script lang="ts">
+import { useDebounceFn } from '@vueuse/core';
 import autosize from 'autosize';
 import {
   computed,
@@ -252,11 +267,11 @@ import {
   inject,
   onMounted,
   onUnmounted,
+  reactive,
   ref,
   watch,
 } from 'vue';
 
-import ImageWall from './ImageWall.vue';
 import {
   CloseIcon,
   EmojiIcon,
@@ -266,25 +281,25 @@ import {
   LoadingIcon,
   GifIcon,
 } from './Icons';
+import ImageWall from './ImageWall.vue';
 import { useEditor, useUserMeta, useUserInfo } from '../composables';
 import {
-  fetchGif,
   getEmojis,
   getImagefromDataTransfer,
   getWordNumber,
   parseEmoji,
   parseMarkdown,
   postComment,
-  throttle,
 } from '../utils';
 
 import type { ComputedRef, DeepReadonly } from 'vue';
-import type { WalineCommentData, WalineImageUploader } from '../typings';
 import type {
-  FetchGifResponse,
-  WalineConfig,
-  WalineEmojiConfig,
-} from '../utils';
+  WalineCommentData,
+  WalineImageUploader,
+  WalineSearchOptions,
+  WalineSearchResult,
+} from '../typings';
+import type { WalineConfig, WalineEmojiConfig } from '../utils';
 
 export default defineComponent({
   name: 'CommentBox',
@@ -342,11 +357,11 @@ export default defineComponent({
     const showPreview = ref(false);
     const previewText = ref('');
     const wordNumber = ref(0);
-    const gifData = ref<{
-      cursor: string;
-      loading: boolean;
-      list: FetchGifResponse['results'];
-    }>({ cursor: '', loading: true, list: [] });
+
+    const searchResults = reactive({
+      loading: true,
+      list: [] as WalineSearchResult[],
+    });
 
     const wordLimit = ref(0);
     const isWordNumberLegal = ref(false);
@@ -452,6 +467,7 @@ export default defineComponent({
         // check nick
         if (requiredMeta.indexOf('nick') > -1 && !comment.nick) {
           inputRefs.value.nick?.focus();
+
           return alert(locale.value.nickError);
         }
 
@@ -462,12 +478,14 @@ export default defineComponent({
             !/^\w(?:[\w._-]*\w)?@(?:\w(?:[\w-]*\w)?\.)*\w+$/.exec(comment.mail))
         ) {
           inputRefs.value.mail?.focus();
+
           return alert(locale.value.mailError);
         }
 
         // check comment
         if (!comment.comment) {
           editorRef.value?.focus();
+
           return;
         }
 
@@ -503,7 +521,6 @@ export default defineComponent({
 
           if (resp.errmsg) return alert(resp.errmsg);
 
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           emit('submit', resp.data!);
 
           editor.value = '';
@@ -576,24 +593,7 @@ export default defineComponent({
         `width=${width},height=${height},left=${left},top=${top},scrollbars=no,resizable=no,status=no,location=no,toolbar=no,menubar=no`
       );
 
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
       handler?.postMessage({ type: 'TOKEN', data: userInfo.value!.token }, '*');
-
-      // eslint-disable-next-line @typescript-eslint/no-explicit-any
-      const receiver = ({ data }: any): void => {
-        if (!data || data.type !== 'profile') return;
-
-        userInfo.value = { ...userInfo.value, ...data };
-
-        [localStorage, sessionStorage]
-          .filter((store) => store.getItem('WALINE_USER'))
-          .forEach((store) =>
-            store.setItem('WALINE_USER', JSON.stringify(userInfo))
-          );
-        window.removeEventListener('message', receiver);
-      };
-
-      window.addEventListener('message', receiver);
     };
 
     const popupHandler = (event: MouseEvent): void => {
@@ -614,31 +614,30 @@ export default defineComponent({
       const { scrollTop, clientHeight, scrollHeight } =
         event.target as HTMLDivElement;
       const percent = (clientHeight + scrollTop) / scrollHeight;
+      const searchOptions = config.value.search as WalineSearchOptions;
+      const keyword = gifSearchInputRef.value?.value || '';
 
-      if (percent < 0.9 || gifData.value.loading) return;
+      if (percent < 0.9 || searchResults.loading) return;
 
-      gifData.value.loading = true;
+      searchResults.loading = true;
 
-      const data = await fetchGif({
-        keyword: gifSearchInputRef.value?.value || '',
-        pos: gifData.value.cursor,
-      }).finally(() => {
-        gifData.value.loading = false;
-      });
+      searchResults.list.push(
+        ...(searchOptions.more
+          ? await searchOptions.more(keyword, searchResults.list.length)
+          : await searchOptions.search(keyword))
+      );
 
-      gifData.value.cursor = data.next;
-      gifData.value.list = gifData.value.list.concat(data.results);
+      searchResults.loading = false;
 
       setTimeout(() => {
         (event.target as HTMLDivElement).scrollTop = scrollTop;
       }, 50);
     };
 
-    const onGifSearch = throttle(async (event: Event) => {
-      gifData.value.cursor = '';
-      gifData.value.list = [];
+    const onGifSearch = useDebounceFn((event: Event) => {
+      searchResults.list = [];
       onImageWallScroll(event);
-    });
+    }, 300);
 
     // update wordNumber
     watch(
@@ -668,17 +667,36 @@ export default defineComponent({
     watch(showGif, async (showGif) => {
       if (!showGif) return;
 
-      gifData.value.loading = true;
-      const data = await fetchGif({ keyword: '' }).finally(() => {
-        gifData.value.loading = false;
-      });
+      const searchOptions = config.value.search as WalineSearchOptions;
+
+      // clear input
+      if (gifSearchInputRef.value) gifSearchInputRef.value.value = '';
+
+      searchResults.loading = true;
+
+      searchResults.list = searchOptions.default
+        ? await searchOptions.default()
+        : await searchOptions.search('');
 
-      gifData.value.cursor = data.next;
-      gifData.value.list = gifData.value.list.concat(data.results);
+      searchResults.loading = false;
     });
 
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    const onMessageRecive = ({ data }: any): void => {
+      if (!data || data.type !== 'profile') return;
+
+      userInfo.value = { ...userInfo.value, ...data.data };
+
+      [localStorage, sessionStorage]
+        .filter((store) => store.getItem('WALINE_USER'))
+        .forEach((store) =>
+          store.setItem('WALINE_USER', JSON.stringify(userInfo))
+        );
+    };
+
     onMounted(() => {
       document.body.addEventListener('click', popupHandler);
+      window.addEventListener('message', onMessageRecive);
 
       // watch editor
       watch(
@@ -694,9 +712,7 @@ export default defineComponent({
           });
           wordNumber.value = getWordNumber(value);
 
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           if (value) autosize(editorRef.value!);
-          // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
           else autosize.destroy(editorRef.value!);
         },
         { immediate: true }
@@ -717,6 +733,7 @@ export default defineComponent({
 
     onUnmounted(() => {
       document.body.removeEventListener('click', popupHandler);
+      window.removeEventListener('message', onMessageRecive);
     });
 
     return {
@@ -756,7 +773,7 @@ export default defineComponent({
       showEmoji,
 
       // gif
-      gifData,
+      gifData: searchResults,
       showGif,
 
       // image

package/src/components/CommentCard.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="wl-item" :id="comment.objectId">
+  <div :id="comment.objectId" class="wl-item">
     <div class="wl-user" aria-hidden="true">
       <img v-if="comment.avatar" :src="comment.avatar" />
       <VerifiedIcon v-if="comment.type" />
@@ -33,8 +33,8 @@
 
         <div class="wl-comment-actions">
           <button
-            class="wl-delete"
             v-if="isAdmin || isOwner"
+            class="wl-delete"
             @click="$emit('delete', comment)"
           >
             <DeleteIcon />
@@ -42,8 +42,8 @@
 
           <button
             class="wl-like"
-            @click="$emit('like', comment)"
             :title="like ? locale.cancelLike : locale.like"
+            @click="$emit('like', comment)"
           >
             <LikeIcon :active="like" />
             <span v-if="'like' in comment" v-text="comment.like" />
@@ -64,6 +64,7 @@
         <span v-if="comment.browser" v-text="comment.browser" />
         <span v-if="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="isAdmin" class="wl-admin-actions">
@@ -79,8 +80,8 @@
         </span>
 
         <button
-          class="wl-btn wl-sticky"
           v-if="isAdmin && !comment.rid"
+          class="wl-btn wl-sticky"
           @click="$emit('sticky', comment)"
         >
           {{ comment.sticky ? 'unsticky' : 'sticky' }}
@@ -89,9 +90,9 @@
 
       <div v-if="isReplyingCurrent" class="wl-reply-wrapper">
         <CommentBox
-          :replyId="comment.objectId"
-          :replyUser="comment.nick"
-          :rootId="rootId"
+          :reply-id="comment.objectId"
+          :reply-user="comment.nick"
+          :root-id="rootId"
           @submit="$emit('submit', $event)"
           @cancel-reply="$emit('reply', null)"
         />
@@ -102,7 +103,7 @@
           :key="child.objectId"
           :comment="child"
           :reply="reply"
-          :rootId="rootId"
+          :root-id="rootId"
           @reply="$emit('reply', $event)"
           @submit="$emit('submit', $event)"
           @like="$emit('like', $event)"
@@ -129,6 +130,14 @@ import type { WalineComment, WalineCommentStatus } from '../typings';
 const commentStatus: WalineCommentStatus[] = ['approved', 'waiting', 'spam'];
 
 export default defineComponent({
+  components: {
+    CommentBox,
+    DeleteIcon,
+    LikeIcon,
+    ReplyIcon,
+    VerifiedIcon,
+  },
+
   props: {
     comment: {
       type: Object as PropType<WalineComment>,
@@ -140,17 +149,10 @@ export default defineComponent({
     },
     reply: {
       type: Object as PropType<WalineComment | null>,
+      default: null,
     },
   },
 
-  components: {
-    CommentBox,
-    DeleteIcon,
-    LikeIcon,
-    ReplyIcon,
-    VerifiedIcon,
-  },
-
   emits: ['submit', 'reply', 'like', 'delete', 'status', 'sticky'],
 
   setup(props) {
@@ -163,7 +165,7 @@ export default defineComponent({
     const locale = computed(() => config.value.locale);
 
     const link = computed(() => {
-      let { link } = props.comment;
+      const { link } = props.comment;
 
       return link ? (isLinkHttp(link) ? link : `https://${link}`) : '';
     });