@waline/client 2.0.7 → 2.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.0.7",
+  "version": "2.1.0",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -40,9 +40,10 @@
   "scripts": {
     "build": "npm run rollup && npm run style",
     "clean": "rimraf ./dist",
+    "dev": "vite -c config/vite.config.js",
     "lint": "eslint --ext .ts,.vue .",
     "prepublish": "npm run clean && npm run build",
-    "rollup": "rollup -c ./scripts/rollup.config.js",
+    "rollup": "rollup -c ./config/rollup.config.js",
     "style": "sass ./src/styles/index.scss ./dist/waline.css --style=compressed"
   },
   "browserslist": {
@@ -63,12 +64,14 @@
     "@vueuse/core": "^8.3.1",
     "autosize": "^5.0.1",
     "hanabi": "^0.4.0",
-    "marked": "^4.0.14",
+    "marked": "^4.0.15",
     "vue": "^3.2.33"
   },
   "devDependencies": {
     "@types/autosize": "^4.0.1",
-    "@types/marked": "^4.0.3"
+    "@types/marked": "^4.0.3",
+    "@vitejs/plugin-vue": "^2.3.1",
+    "vite": "^2.9.6"
   },
   "engines": {
     "node": ">=12.20.0"

package/src/components/CommentBox.vue

@@ -78,7 +78,7 @@
           </a>
 
           <button
-            v-show="config.emoji.length"
+            v-show="emoji.tabs.length"
             ref="emojiButtonRef"
             class="wl-action"
             :class="{ actived: showEmoji }"
@@ -396,16 +396,19 @@ export default defineComponent({
         if (login === 'force') return;
 
         // check nick
-        if (
-          (requiredMeta.indexOf('nick') > -1 || comment.nick) &&
-          !comment.nick
-        ) {
+        if (requiredMeta.indexOf('nick') > -1 && !comment.nick) {
           inputRefs.value.nick?.focus();
           return alert(locale.value.nickError);
         }
 
         // check mail
-        if (requiredMeta.indexOf('mail') > -1 && !comment.mail) {
+        if (
+          (requiredMeta.indexOf('mail') > -1 && !comment.mail) ||
+          (comment.mail &&
+            !/^\w(?:[\w._-]*\w)?@(?:\w(?:[\w-]*\w)?\.){0,2}\w+$/.exec(
+              comment.mail
+            ))
+        ) {
           inputRefs.value.mail?.focus();
           return alert(locale.value.mailError);
         }
@@ -603,9 +606,11 @@ export default defineComponent({
       watch(
         () => config.value.emoji,
         (emojiConfig) =>
-          getEmojis(emojiConfig).then((config) => {
-            emoji.value = config;
-          }),
+          getEmojis(Array.isArray(emojiConfig) ? emojiConfig : []).then(
+            (config) => {
+              emoji.value = config;
+            }
+          ),
         { immediate: true }
       );
     });

package/src/components/CommentCard.vue

@@ -23,6 +23,11 @@
           v-text="locale.admin"
         />
         <span v-if="comment.sticky" class="wl-badge" v-text="locale.sticky" />
+        <span
+          v-if="comment.level >= 0"
+          class="wl-badge"
+          v-text="locale[`level${comment.level}`] || `Level ${comment.level}`"
+        />
 
         <span class="wl-time" v-text="time" />
 

package/src/components/Waline.vue

@@ -61,16 +61,8 @@
 </template>
 
 <script lang="ts">
-import {
-  computed,
-  defineComponent,
-  onBeforeUnmount,
-  onMounted,
-  provide,
-  ref,
-  watch,
-  watchEffect,
-} from 'vue';
+import { useStyleTag } from '@vueuse/core';
+import { computed, defineComponent, onMounted, provide, ref, watch } from 'vue';
 import CommentBox from './CommentBox.vue';
 import CommentCard from './CommentCard.vue';
 import { LoadingIcon } from './Icons';
@@ -171,23 +163,24 @@ export default defineComponent({
     },
 
     emoji: {
-      type: Array as PropType<(string | WalineEmojiInfo)[]>,
+      type: [Array, Boolean] as PropType<(string | WalineEmojiInfo)[] | false>,
       ...(SHOULD_VALIDATE
         ? {
             validator: (value: unknown): boolean =>
-              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'
-                    ))
-              ),
+              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'
+                      ))
+                )),
           }
         : {}),
     },
@@ -225,9 +218,10 @@ export default defineComponent({
 
     const darkmodeStyle = computed(() => getDarkStyle(config.value.dark));
 
+    useStyleTag(darkmodeStyle);
+
     // eslint-disable-next-line vue/no-setup-props-destructure
     let abort: () => void;
-    let stop: () => void;
 
     const fetchComment = (pageNumber: number): void => {
       const { serverURL, path, pageSize } = config.value;
@@ -293,21 +287,7 @@ export default defineComponent({
 
     watch(() => props.path, refresh);
 
-    onMounted(() => {
-      refresh();
-
-      const style = document.createElement('style');
-
-      style.innerText = darkmodeStyle.value;
-
-      document.querySelector('[data-waline]')?.appendChild(style);
-
-      stop = watchEffect(() => {
-        style.innerText = darkmodeStyle.value;
-      });
-    });
-
-    onBeforeUnmount(() => stop());
+    onMounted(() => refresh());
 
     return {
       config,

package/src/composables/timeAgo.ts

@@ -1,6 +1,6 @@
 import { useNow } from '@vueuse/core';
 import { computed } from 'vue';
-import { dateFormat } from '../utils';
+import { getTimeAgo } from '../utils';
 
 import type { ComputedRef } from 'vue';
 import type { WalineLocale } from '../typings';
@@ -11,51 +11,5 @@ export const useTimeAgo = (
 ): ComputedRef<string> => {
   const now = useNow();
 
-  return computed(() => {
-    if (!date) return '';
-
-    const time =
-      typeof date === 'string'
-        ? new Date(date.indexOf(' ') !== -1 ? date.replace(/-/g, '/') : date)
-        : date;
-
-    const timepassed = now.value.getTime() - time.getTime();
-
-    const days = Math.floor(timepassed / (24 * 3600 * 1000));
-
-    if (days === 0) {
-      // 计算相差小时数
-
-      // 计算天数后剩余的毫秒数
-      const leave1 = timepassed % (24 * 3600 * 1000);
-      const hours = Math.floor(leave1 / (3600 * 1000));
-
-      if (hours === 0) {
-        //计算相差分钟数
-
-        // 计算小时数后剩余的毫秒数
-        const leave2 = leave1 % (3600 * 1000);
-        const minutes = Math.floor(leave2 / (60 * 1000));
-
-        // 计算相差秒数
-        if (minutes === 0) {
-          // 计算分钟数后剩余的毫秒数
-          const leave3 = leave2 % (60 * 1000);
-          const seconds = Math.round(leave3 / 1000);
-
-          return `${seconds} ${locale.seconds}`;
-        }
-
-        return `${minutes} ${locale.minutes}`;
-      }
-
-      return `${hours} ${locale.hours}`;
-    }
-
-    if (days < 0) return locale.now;
-
-    if (days < 8) return `${days} ${locale.days}`;
-
-    return dateFormat(time);
-  });
+  return computed(() => getTimeAgo(date, now.value, locale));
 };

package/src/config/i18n/en.ts

@@ -31,4 +31,10 @@ export default generateLocale([
   'Words',
   'Please input comments between $0 and $1 words!\n Current word number: $2',
   'Anonymous',
+  'Dwarves',
+  'Hobbits',
+  'Ents',
+  'Wizards',
+  'Elves',
+  'Maiar',
 ]);

package/src/config/i18n/generate.ts

@@ -31,6 +31,12 @@ const localeKeys = [
   'word',
   'wordHint',
   'anonymous',
+  'level0',
+  'level1',
+  'level2',
+  'level3',
+  'level4',
+  'level5',
 ];
 
 export const generateLocale = (locale: string[]): WalineLocale =>

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

@@ -31,4 +31,10 @@ export default generateLocale([
   '字',
   '评论字数应在 $0 到 $1 字之间！\n当前字数：$2',
   '匿名',
+  '潜水',
+  '冒泡',
+  '吐槽',
+  '活跃',
+  '话痨',
+  '传说',
 ]);

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

@@ -31,4 +31,10 @@ export default generateLocale([
   '字',
   '評論字數應在 $0 到 $1 字之間！\n當前字數：$2',
   '匿名',
+  '潛水',
+  '冒泡',
+  '吐槽',
+  '活躍',
+  '話癆',
+  '傳說',
 ]);

package/src/entrys/legacy.ts

@@ -10,7 +10,7 @@ import type { WalineInitOptions } from '../typings';
 export { WalineInstance } from '../init';
 
 warning(
-  ' This is a legacy package compatable with Valine and Waline@v1, please switch to Waline@v2 using https://<CDN.LINK>/@waline/client/dist/waline.js instead!'
+  ' This is a legacy package compatible with Valine and Waline@v1, please switch to Waline@v2 using https://<CDN.LINK>/@waline/client/dist/waline.js instead!'
 );
 
 // inject css styles

package/src/typings/comment.ts

@@ -22,4 +22,5 @@ export interface WalineComment extends Exclude<WalineCommentData, 'ua'> {
   sticky?: boolean;
   browser?: string;
   os?: string;
+  level?: number;
 }

package/src/typings/locale.ts

@@ -1,4 +1,12 @@
-export interface WalineLocale {
+export interface WalineDateLocale {
+  seconds: string;
+  minutes: string;
+  hours: string;
+  days: string;
+  now: string;
+}
+
+export interface WalineLocale extends WalineDateLocale {
   nick: string;
   nickError: string;
   mail: string;
@@ -16,11 +24,6 @@ export interface WalineLocale {
   preview: string;
   emoji: string;
   uploadImage: string;
-  seconds: string;
-  minutes: string;
-  hours: string;
-  days: string;
-  now: string;
   uploading: string;
   login: string;
   logout: string;

package/src/typings/waline.ts

@@ -146,7 +146,7 @@ export interface WalineProps {
    *
    * @default ['https://cdn.jsdelivr.net/gh/walinejs/emojis/weibo']
    */
-  emoji?: (string | WalineEmojiInfo)[];
+  emoji?: (string | WalineEmojiInfo)[] | false;
 
   /**
    * 代码高亮

package/src/utils/date.ts

@@ -1,3 +1,5 @@
+import { WalineDateLocale } from '../typings';
+
 const padWithZeros = (vNumber: number, width: number): string => {
   let numAsString = vNumber.toString();
 
@@ -15,3 +17,55 @@ export const dateFormat = (date: Date): string => {
 
   return `${vYear}-${vMonth}-${vDay}`;
 };
+
+export const getTimeAgo = (
+  date: Date | string,
+  now: Date,
+  locale: WalineDateLocale
+): string => {
+  if (!date) return '';
+
+  const time =
+    typeof date === 'string'
+      ? new Date(date.indexOf(' ') !== -1 ? date.replace(/-/g, '/') : date)
+      : date;
+
+  const timepassed = now.getTime() - time.getTime();
+
+  const days = Math.floor(timepassed / (24 * 3600 * 1000));
+
+  if (days === 0) {
+    // 计算相差小时数
+
+    // 计算天数后剩余的毫秒数
+    const leave1 = timepassed % (24 * 3600 * 1000);
+    const hours = Math.floor(leave1 / (3600 * 1000));
+
+    if (hours === 0) {
+      //计算相差分钟数
+
+      // 计算小时数后剩余的毫秒数
+      const leave2 = leave1 % (3600 * 1000);
+      const minutes = Math.floor(leave2 / (60 * 1000));
+
+      // 计算相差秒数
+      if (minutes === 0) {
+        // 计算分钟数后剩余的毫秒数
+        const leave3 = leave2 % (60 * 1000);
+        const seconds = Math.round(leave3 / 1000);
+
+        return `${seconds} ${locale.seconds}`;
+      }
+
+      return `${minutes} ${locale.minutes}`;
+    }
+
+    return `${hours} ${locale.hours}`;
+  }
+
+  if (days < 0) return locale.now;
+
+  if (days < 8) return `${days} ${locale.days}`;
+
+  return dateFormat(time);
+};