@waline/client 2.6.0 → 2.6.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.6.0",
+  "version": "2.6.3",
   "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,40 +80,31 @@
     ]
   },
   "dependencies": {
-    "@vueuse/core": "^8.6.0",
+    "@vueuse/core": "^9.1.0",
     "autosize": "^5.0.1",
-    "marked": "^4.0.16",
+    "marked": "^4.0.18",
     "vue": "^3.2.37"
   },
   "devDependencies": {
-    "@babel/core": "7.18.2",
-    "@babel/preset-env": "7.18.2",
+    "@babel/core": "7.18.10",
+    "@babel/preset-env": "7.18.10",
     "@rollup/plugin-babel": "5.3.1",
-    "@rollup/plugin-commonjs": "22.0.0",
+    "@rollup/plugin-commonjs": "22.0.2",
     "@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.41",
-    "@vitejs/plugin-vue": "2.3.3",
+    "@types/node": "18.7.3",
+    "@vitejs/plugin-vue": "3.0.3",
     "rimraf": "3.0.2",
-    "rollup": "2.75.6",
+    "rollup": "2.78.0",
     "rollup-plugin-dts": "4.2.2",
     "rollup-plugin-terser": "7.0.2",
     "rollup-plugin-ts": "3.0.2",
-    "typescript": "4.7.3",
-    "vite": "2.9.10"
+    "typescript": "4.7.4",
+    "vite": "3.0.7"
   },
   "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/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>
 
@@ -100,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"
@@ -169,9 +179,9 @@
           :class="{ display: showGif }"
         >
           <input
+            ref="gifSearchInputRef"
             type="text"
             :placeholder="locale.gifSearchPlaceholder"
-            ref="gifSearchInputRef"
             @input="onGifSearch"
           />
 
@@ -193,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}:`)"
@@ -214,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"
               />
@@ -398,6 +411,10 @@ export default defineComponent({
             uploadText,
             `\r\n![${file.name}](${url})`
           );
+        })
+        .catch((e) => {
+          alert(e.message);
+          editor.value = editor.value.replace(uploadText, '');
         });
     };
 
@@ -454,6 +471,7 @@ export default defineComponent({
         // check nick
         if (requiredMeta.indexOf('nick') > -1 && !comment.nick) {
           inputRefs.value.nick?.focus();
+
           return alert(locale.value.nickError);
         }
 
@@ -464,12 +482,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;
         }
 
@@ -505,7 +525,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 = '';
@@ -578,24 +597,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 => {
@@ -683,8 +685,22 @@ export default defineComponent({
       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(
@@ -700,9 +716,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 }
@@ -723,6 +737,7 @@ export default defineComponent({
 
     onUnmounted(() => {
       document.body.removeEventListener('click', popupHandler);
+      window.removeEventListener('message', onMessageRecive);
     });
 
     return {

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">
@@ -74,24 +75,24 @@
             :class="`wl-btn wl-${status}`"
             :disabled="comment.status === status"
             @click="$emit('status', { status, comment })"
-            v-text="status"
+            v-text="locale[status]"
           />
         </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' }}
+          {{ comment.sticky ? locale.unsticky : locale.sticky }}
         </button>
       </div>
 
       <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}`) : '';
     });

package/src/components/ImageWall.vue

@@ -80,7 +80,7 @@ export default defineComponent({
     gap: { type: Number, default: 0 },
   },
 
-  emit: ['insert'],
+  emits: ['insert'],
 
   setup(props) {
     let resizeObserver: ResizeObserver | null = null;
@@ -90,7 +90,6 @@ export default defineComponent({
 
     const getColumnCount = (): number => {
       const count = Math.floor(
-        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
         (wall.value!.getBoundingClientRect().width + props.gap) /
           (props.columnWidth + props.gap)
       );
@@ -149,11 +148,10 @@ export default defineComponent({
     onMounted(() => {
       redraw(true);
       resizeObserver = new ResizeObserver(() => redraw());
-      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+
       resizeObserver.observe(wall.value!);
     });
 
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     onBeforeUnmount(() => resizeObserver!.unobserve(wall.value!));
 
     return {

package/src/components/Waline.vue

@@ -89,6 +89,7 @@ import type {
   WalineHighlighter,
   WalineTexRenderer,
   WalineImageUploader,
+  WalineSearchOptions,
   WalineLocale,
   WalineProps,
   WalineMeta,
@@ -112,6 +113,7 @@ const props = [
   'highlighter',
   'texRenderer',
   'imageUploader',
+  'search',
   'copyright',
 ];
 
@@ -197,6 +199,11 @@ const propsWithValidate = {
     default: undefined,
   },
 
+  search: {
+    type: [Object, Boolean] as PropType<WalineSearchOptions | false>,
+    default: undefined,
+  },
+
   copyright: { type: Boolean, default: true },
 };
 

package/src/composables/userInfo.ts

@@ -23,6 +23,6 @@ let userInfoStorage: UserInfoRef | null = null;
 export const useUserInfo = (): UserInfoRef =>
   userInfoStorage ||
   (userInfoStorage = useStorage<UserInfo | Record<string, never>>(
-    'USER_KEY',
+    USER_KEY,
     {}
   ));

package/src/config/default.ts

@@ -9,7 +9,12 @@ export const defaultLang = 'zh-CN';
 
 export const defaultUploadImage = (file: File): Promise<string> =>
   new Promise((resolve, reject) => {
+    if (file.size > 128 * 1000) {
+      return reject(new Error('File too large! File size limit 128KB'));
+    }
+
     const reader = new FileReader();
+
     reader.readAsDataURL(file);
     reader.onload = (): void => resolve(reader.result?.toString() || '');
     reader.onerror = reject;
@@ -73,6 +78,7 @@ export const getDefaultSearchOptions = (): WalineSearchOptions => {
   }: FetchGifRequest): Promise<FetchGifResponse> => {
     const baseUrl = `https://g.tenor.com/v1/search`;
     const query = new URLSearchParams('media_filter=minimal');
+
     query.set('key', 'PAY5JLFIH6V6');
     query.set('limit', '20');
     query.set('pos', pos || '');

package/src/config/i18n/en.ts

@@ -41,4 +41,9 @@ export default generateLocale([
   'Maiar',
   'GIF',
   'Search GIF',
+  'Profile',
+  'Approved',
+  'Waiting',
+  'Spam',
+  'Unsticky',
 ]);

package/src/config/i18n/generate.ts

@@ -41,6 +41,11 @@ const localeKeys = [
   'level5',
   'gif',
   'gifSearchPlaceholder',
+  'profile',
+  'approved',
+  'waiting',
+  'spam',
+  'unsticky',
 ];
 
 export const generateLocale = (locale: string[]): WalineLocale =>

package/src/config/i18n/jp.ts

@@ -41,4 +41,9 @@ export default generateLocale([
   'なぬし',
   'GIF',
   '探す GIF',
+  '個人情報',
+  '承認済み',
+  '待っている',
+  'スパム',
+  'べたつかない',
 ]);

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

@@ -41,4 +41,9 @@ export default generateLocale([
   'Maiar',
   'GIF',
   'Pesquisar GIF',
+  'informação pessoal',
+  'Aprovado',
+  'Espera',
+  'Spam',
+  'Unsticky',
 ]);

package/src/config/i18n/ru.ts

@@ -41,4 +41,9 @@ export default generateLocale([
   'Maiar',
   'GIF',
   'Поиск GIF',
+  'Персональные данные',
+  'Одобренный',
+  'Ожидающий',
+  'Спам',
+  'Нелипкий',
 ]);

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

@@ -41,4 +41,9 @@ export default generateLocale([
   'Maiar',
   'GIF',
   'Tìm kiếm GIF',
+  'thông tin cá nhân',
+  'Đã được phê duyệt',
+  'Đang chờ đợi',
+  'Thư rác',
+  'Không dính',
 ]);

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

@@ -41,4 +41,9 @@ export default generateLocale([
   '传说',
   '表情包',
   '搜索表情包',
+  '个人资料',
+  '通过',
+  '待审核',
+  '垃圾',
+  '取消置顶',
 ]);

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

@@ -2,11 +2,11 @@ import { generateLocale } from './generate';
 
 export default generateLocale([
   '暱稱',
+  '暱稱不能少於3個字元',
   '郵箱',
+  '請填寫正確的郵件地址',
   '網址',
   '可選',
-  '暱稱不能少於3個字元',
-  '請填寫正確的郵件地址',
   '歡迎評論',
   '來發評論吧~',
   '提交',
@@ -41,4 +41,9 @@ export default generateLocale([
   '傳說',
   '表情包',
   '搜索表情包',
+  '個人資料',
+  '通過',
+  '待審核',
+  '垃圾',
+  '取消置頂',
 ]);

package/src/init.ts

@@ -80,7 +80,6 @@ export const init = ({
     ? createApp(() => h(Waline, { path: state.path, ...props }))
     : null;
 
-  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   if (app) app.mount(root!);
 
   const stopComment = watchEffect(updateCommentCount);

package/src/pageview.ts

@@ -97,7 +97,11 @@ export const pageviewCount = ({
     const normalElements = elements.filter((element) => !filter(element));
     const elementsNeedstoBeFetched = elements.filter(filter);
 
-    void updatePageviews({ serverURL, path, lang }).then((count) =>
+    void updatePageviews({
+      serverURL: getServerURL(serverURL),
+      path,
+      lang,
+    }).then((count) =>
       renderVisitorCount(
         new Array<number>(normalElements.length).fill(count),
         normalElements

package/src/styles/card.scss

@@ -233,10 +233,12 @@
       border-radius: 0;
 
       &:first-child {
+        border-right: 0;
         border-radius: 0.5em 0 0 0.5em;
       }
 
       &:last-child {
+        border-left: 0;
         border-radius: 0 0.5em 0.5em 0;
       }
     }

package/src/styles/emoji.scss

@@ -79,9 +79,12 @@
 
   .wl-tabs {
     position: relative;
+
+    overflow-x: scroll;
+
     height: 2em;
     padding: 0 6px 1px;
-    overflow-x: scroll;
+
     white-space: nowrap;
 
     &::before {