@waline/client 2.0.6 → 2.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.0.6",
+  "version": "2.1.1",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -24,9 +24,23 @@
       "require": "./dist/shim.js",
       "default": "./dist/shim.js"
     },
-    "./dist": "./dist/shim.js",
+    "./dist": {
+      "import": "./dist/shim.esm.js",
+      "require": "./dist/shim.js",
+      "default": "./dist/shim.js"
+    },
+    "./dist/pageview": {
+      "import": "./dist/pageview.esm.js",
+      "require": "./dist/pageview.cjs.js",
+      "default": "./dist/pageview.js"
+    },
+    "./dist/waline": {
+      "import": "./dist/waline.esm.js",
+      "require": "./dist/waline.cjs.js",
+      "default": "./dist/waline.js"
+    },
     "./dist/waline.css": "./dist/waline.css",
-    "./dist/*": "./dist/*.js",
+    "./dist/*": "./dist/*",
     "./src/*": "./src/*",
     "./package.json": "./package.json"
   },
@@ -40,9 +54,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 +78,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/comment.ts

@@ -27,12 +27,22 @@ export interface WalineCommentCountOptions {
    * @default window.location.pathname
    */
   path?: string;
+
+  /**
+   * 错误提示消息所使用的语言
+   *
+   * Language of error message
+   *
+   * @default 'zh-CN'
+   */
+  lang?: string;
 }
 
 export const commentCount = ({
   serverURL,
   path = window.location.pathname,
   selector = '.waline-comment-count',
+  lang = 'zh-CN',
 }: // eslint-disable-next-line @typescript-eslint/no-explicit-any
 WalineCommentCountOptions): WalineAbort => {
   const controller = new AbortController();
@@ -48,6 +58,7 @@ WalineCommentCountOptions): WalineAbort => {
       paths: Array.from(elements).map((element) =>
         decodePath(element.dataset.path || element.getAttribute('id') || path)
       ),
+      lang,
       signal: controller.signal,
       token: userInfo.value?.token,
     })

package/src/components/CommentBox.vue

@@ -78,6 +78,7 @@
           </a>
 
           <button
+            v-show="emoji.tabs.length"
             ref="emojiButtonRef"
             class="wl-action"
             :class="{ actived: showEmoji }"
@@ -395,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);
         }
@@ -602,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;
@@ -239,6 +233,7 @@ export default defineComponent({
 
       fetchCommentList({
         serverURL,
+        lang: config.value.lang,
         path,
         pageSize,
         page: pageNumber,
@@ -293,21 +288,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/pageview.ts

@@ -41,6 +41,15 @@ export interface WalinePageviewCountOptions {
    * @default true
    */
   update?: boolean;
+
+  /**
+   * 错误提示消息所使用的语言
+   *
+   * Language of error message
+   *
+   * @default 'zh-CN'
+   */
+  lang?: string;
 }
 
 const renderVisitorCount = (
@@ -57,6 +66,7 @@ export const pageviewCount = ({
   path = window.location.pathname,
   selector = '.waline-pageview-count',
   update = true,
+  lang = 'zh-CN',
 }: WalinePageviewCountOptions): WalineAbort => {
   const controller = new AbortController();
 
@@ -75,6 +85,7 @@ export const pageviewCount = ({
     fetchPageviews({
       serverURL,
       paths: elements.map((element) => getQuery(element) || path),
+      lang,
       signal: controller.signal,
     })
       .then((counts) => renderVisitorCount(counts, elements))
@@ -85,7 +96,7 @@ export const pageviewCount = ({
     const normalElements = elements.filter((element) => !filter(element));
     const elementsNeedstoBeFetched = elements.filter(filter);
 
-    void updatePageviews({ serverURL, path }).then((count) =>
+    void updatePageviews({ serverURL, path, lang }).then((count) =>
       renderVisitorCount(
         new Array<number>(normalElements.length).fill(count),
         normalElements

package/src/styles/card.scss

@@ -85,12 +85,12 @@
   .wl-badge {
     display: inline-block;
 
-    margin-right: 0.5em;
+    margin-right: 1em;
     padding: 0 0.3em;
-    border-radius: 3px;
+    border: 1px solid var(--waline-badge-color);
+    border-radius: 4px;
 
-    background: var(--waline-badge-color);
-    color: var(--waline-white);
+    color: var(--waline-badge-color);
 
     font-size: var(--waline-badge-font-size);
   }

package/src/styles/config.scss

@@ -1,6 +1,6 @@
 :root {
   // font-size
-  --waline-font-size: 16px;
+  --waline-font-size: 1rem;
 
   // regular colors
   --waline-white: #fff;
@@ -30,7 +30,7 @@
 
   // badge
   --waline-badge-color: #3498db;
-  --waline-badge-font-size: 0.775em;
+  --waline-badge-font-size: 0.75em;
 
   // info
   --waline-info-bgcolor: #f8f8f8;

package/src/styles/layout.scss

@@ -7,9 +7,9 @@
   .vemoji,
   .wl-emoji {
     display: inline-block;
-    vertical-align: middle;
-    width: 1.25em;
-    margin: 0.25em;
+    vertical-align: baseline;
+    height: 1.25em;
+    margin: -0.125em 0.25em;
   }
 
   .wl-tex {

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/config.ts

@@ -50,7 +50,7 @@ export const getConfig = ({
   path = location.pathname,
   lang = defaultLang,
   locale,
-  emoji = ['//unpkg.com/@waline/emojis@1.0.1/weibo/info.json'],
+  emoji = ['//unpkg.com/@waline/emojis@1.0.1/weibo'],
   meta = ['nick', 'mail', 'link'],
   requiredMeta = [],
   dark = false,
@@ -69,7 +69,6 @@ export const getConfig = ({
     ...(locales[lang] || locales[defaultLang]),
     ...(typeof locale === 'object' ? locale : {}),
   },
-  // emoji: getEmojis(emoji),
   wordLimit: getWordLimit(wordLimit),
   meta: getMeta(meta),
   requiredMeta: getMeta(requiredMeta),

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);
+};

package/src/utils/emoji.ts

@@ -16,7 +16,7 @@ const fetchEmoji = (link: string): Promise<WalineEmojiInfo> => {
   const result = hasVersion(link);
 
   if (result) {
-    const info = emojiStore.value.link;
+    const info = emojiStore.value[link];
 
     if (info) return Promise.resolve(info);
   }
@@ -29,7 +29,7 @@ const fetchEmoji = (link: string): Promise<WalineEmojiInfo> => {
         ...emojiInfo,
       };
 
-      if (result) emojiStore.value.link = info;
+      if (result) emojiStore.value[link] = info;
 
       return info;
     });