@waline/client 2.14.0 → 2.14.2

package/src/config/default.ts

@@ -1,5 +1,6 @@
 import type { IGif } from '@giphy/js-types';
 import type {
+  WalineEmojiPresets,
   WalineMeta,
   WalineSearchOptions,
   WalineSearchResult,
@@ -10,6 +11,10 @@ const availableMeta: WalineMeta[] = ['nick', 'mail', 'link'];
 export const getMeta = (meta: WalineMeta[]): WalineMeta[] =>
   meta.filter((item) => availableMeta.includes(item));
 
+export const defaultEmoji: WalineEmojiPresets[] = [
+  '//unpkg.com/@waline/emojis@1.1.0/weibo',
+];
+
 export const defaultLang = 'zh-CN';
 
 export const defaultUploadImage = (file: File): Promise<string> =>

package/src/entries/components.ts

@@ -0,0 +1,2 @@
+export { default as Waline } from '../components/WalineComment.vue';
+export * from '../version';

package/src/init.ts

@@ -1,6 +1,6 @@
 import { createApp, h, reactive, watchEffect } from 'vue';
 
-import Waline from './components/Waline.vue';
+import Waline from './components/WalineComment.vue';
 import { commentCount } from './comment';
 import { pageviewCount } from './pageview';
 import { getRoot } from './utils';

package/src/styles/reaction.scss

@@ -2,7 +2,13 @@
   margin-bottom: 1.75em;
   text-align: center;
 
-  ul {
+  img {
+    width: 100%;
+    height: 100%;
+    transition: all 250ms ease-in-out;
+  }
+
+  &-list {
     display: flex;
     flex-direction: row;
     gap: 16px;
@@ -13,7 +19,7 @@
     list-style-type: none;
   }
 
-  li {
+  &-item {
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -23,31 +29,36 @@
     &.active img {
       transform: scale(1.15);
     }
-  }
 
-  li.active .wl-reaction {
-    &-votes {
-      background: var(--waline-theme-color);
-      color: var(--waline-bgcolor);
-    }
+    &.active .wl-reaction {
+      &-votes {
+        background: var(--waline-theme-color);
+        color: var(--waline-bgcolor);
+      }
 
-    &-text {
-      color: var(--waline-theme-color);
+      &-text {
+        color: var(--waline-theme-color);
+      }
     }
   }
 
-  img {
-    width: 100%;
-    height: 100%;
-    transition: all 250ms ease-in-out;
-  }
-
   &-img {
     position: relative;
     width: 42px;
     height: 42px;
   }
 
+  &-loading {
+    position: absolute;
+    top: -4px;
+    right: -5px;
+
+    width: 18px;
+    height: 18px;
+
+    color: var(--waline-theme-color);
+  }
+
   &-votes {
     position: absolute;
     top: -4px;

package/src/typings/base.ts

@@ -1,5 +1,10 @@
 export type WalineCommentSorting = 'latest' | 'oldest' | 'hottest';
 
+export type WalineEmojiPresets =
+  | `//${string}`
+  | `http://${string}`
+  | `https://${string}`;
+
 export interface WalineEmojiInfo {
   /**
    * 选项卡上的 Emoji 名称

package/src/typings/waline.ts

@@ -2,6 +2,7 @@ import type {
   WalineCommentSorting,
   WalineHighlighter,
   WalineEmojiInfo,
+  WalineEmojiPresets,
   WalineImageUploader,
   WalineLoginStatus,
   WalineMeta,
@@ -158,22 +159,26 @@ export interface WalineProps {
    *
    * @default ['//unpkg.com/@waline/emojis@1.1.0/weibo']
    */
-  emoji?: (string | WalineEmojiInfo)[] | false;
+  emoji?: (WalineEmojiInfo | WalineEmojiPresets)[] | boolean;
 
   /**
    * 设置搜索功能
    *
    * Customize Search feature
+   *
+   * @default true
    */
-  search?: WalineSearchOptions | false;
+  search?: WalineSearchOptions | boolean;
 
   /**
    * 代码高亮
    *
    * Code highlighting
+   *
+   * @default true
    */
 
-  highlighter?: WalineHighlighter | false;
+  highlighter?: WalineHighlighter | boolean;
 
   /**
    * 自定义图片上传方法，方便更好的存储图片
@@ -183,16 +188,20 @@ export interface WalineProps {
    * Custom image upload callback to manage picture by yourself.
    *
    * We will pass a picture file object when execute it.
+   *
+   * @default true
    */
 
-  imageUploader?: WalineImageUploader | false;
+  imageUploader?: WalineImageUploader | boolean;
 
   /**
    * 自定义数学公式处理方法，用于预览。
    *
    * Custom math formula parse callback for preview.
+   *
+   * @default true
    */
-  texRenderer?: WalineTexRenderer | false;
+  texRenderer?: WalineTexRenderer | boolean;
 
   /**
    *

package/src/utils/config.ts

@@ -1,4 +1,5 @@
 import {
+  defaultEmoji,
   defaultLang,
   defaultLocales,
   defaultReaction,
@@ -24,10 +25,26 @@ export interface WalineEmojiConfig {
 }
 
 export interface WalineConfig
-  extends Required<Omit<WalineProps, 'wordLimit' | 'reaction'>> {
+  extends Required<
+    Omit<
+      WalineProps,
+      | 'emoji'
+      | 'imageUploader'
+      | 'highlighter'
+      | 'texRenderer'
+      | 'wordLimit'
+      | 'reaction'
+      | 'search'
+    >
+  > {
   locale: WalineLocale;
   wordLimit: [number, number] | false;
   reaction: string[];
+  emoji: Exclude<WalineProps['emoji'], boolean | undefined>;
+  highlighter: Exclude<WalineProps['highlighter'], true | undefined>;
+  imageUploader: Exclude<WalineProps['imageUploader'], true | undefined>;
+  texRenderer: Exclude<WalineProps['texRenderer'], true | undefined>;
+  search: Exclude<WalineProps['search'], true | undefined>;
 }
 
 export const getServerURL = (serverURL: string): string => {
@@ -42,7 +59,7 @@ const getWordLimit = (
   Array.isArray(wordLimit) ? wordLimit : wordLimit ? [0, wordLimit] : false;
 
 const fallback = <T = unknown>(
-  value: T | false | undefined,
+  value: T | boolean | undefined,
   fallback: T
 ): T | false =>
   typeof value === 'function' ? value : value === false ? false : fallback;
@@ -53,7 +70,7 @@ export const getConfig = ({
   path = location.pathname,
   lang = defaultLang,
   locale,
-  emoji = ['//unpkg.com/@waline/emojis@1.1.0/weibo'],
+  emoji = defaultEmoji,
   meta = ['nick', 'mail', 'link'],
   requiredMeta = [],
   dark = false,
@@ -84,11 +101,16 @@ export const getConfig = ({
   texRenderer: fallback(texRenderer, defaultTexRenderer),
   lang,
   dark,
-  emoji,
+  emoji: typeof emoji === 'boolean' ? (emoji ? defaultEmoji : []) : emoji,
   pageSize,
   login,
   copyright,
-  search: search || getDefaultSearchOptions(lang),
+  search:
+    search === false
+      ? false
+      : typeof search === 'object'
+      ? search
+      : getDefaultSearchOptions(lang),
   recaptchaV3Key,
   reaction: Array.isArray(reaction)
     ? reaction

package/src/utils/image.ts

@@ -1,7 +1,7 @@
 const isImage = (item: DataTransferItem): boolean =>
   item.type.includes('image');
 
-export const getImagefromDataTransfer = (
+export const getImageFromDataTransfer = (
   items: DataTransferItemList
 ): File | null => {
   const image = Array.from(items).find(isImage);