@waline/client 2.5.1 → 2.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -71,30 +71,29 @@
     ]
   },
   "dependencies": {
-    "@vueuse/core": "^8.5.0",
+    "@vueuse/core": "^8.6.0",
     "autosize": "^5.0.1",
     "marked": "^4.0.16",
-    "vue": "^3.2.35"
+    "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.2",
+    "@babel/preset-env": "7.18.2",
+    "@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.41",
+    "@vitejs/plugin-vue": "2.3.3",
+    "rimraf": "3.0.2",
+    "rollup": "2.75.6",
+    "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"
   },
   "engines": {
     "node": ">=14"

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

@@ -89,6 +89,7 @@
           </button>
 
           <button
+            v-if="config.search"
             ref="gifButtonRef"
             class="wl-action"
             :class="{ actived: showGif }"
@@ -245,6 +246,7 @@
 </template>
 
 <script lang="ts">
+import { useDebounceFn } from '@vueuse/core';
 import autosize from 'autosize';
 import {
   computed,
@@ -252,11 +254,11 @@ import {
   inject,
   onMounted,
   onUnmounted,
+  reactive,
   ref,
   watch,
 } from 'vue';
 
-import ImageWall from './ImageWall.vue';
 import {
   CloseIcon,
   EmojiIcon,
@@ -266,25 +268,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 +344,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);
@@ -614,31 +616,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,13 +669,18 @@ 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;
     });
 
     onMounted(() => {
@@ -756,7 +762,7 @@ export default defineComponent({
       showEmoji,
 
       // gif
-      gifData,
+      gifData: searchResults,
       showGif,
 
       // image

package/src/components/ImageWall.vue

@@ -31,17 +31,21 @@ SOFTWARE. -->
       :data-index="columnIndex"
       :style="{ gap: `${gap}px` }"
     >
-      <img
-        v-for="itemIndex in column"
-        :key="itemIndex"
-        class="wl-gallery-item"
-        :src="items[itemIndex].media[0].tinygif.url"
-        :title="items[itemIndex].title"
-        loading="lazy"
-        @click="
-          $emit('insert', `![](${items[itemIndex].media[0].tinygif.url})`)
-        "
-      />
+      <template v-for="itemIndex in column" :key="itemIndex">
+        <LoadingIcon
+          v-if="!state[items[itemIndex].src]"
+          :size="36"
+          style="margin: 20px auto"
+        />
+        <img
+          class="wl-gallery-item"
+          :src="items[itemIndex].src"
+          :title="items[itemIndex].title"
+          loading="lazy"
+          @load="state[items[itemIndex].src] = true"
+          @click="$emit('insert', `![](${items[itemIndex].src})`)"
+        />
+      </template>
     </div>
   </div>
 </template>
@@ -56,16 +60,24 @@ import {
   watch,
 } from 'vue';
 
+import { LoadingIcon } from './Icons';
+
 import type { PropType } from 'vue';
+import type { WalineSearchResult } from '../typings';
 
 type Column = number[];
 
 export default defineComponent({
+  name: 'ImageWall',
+
+  components: {
+    LoadingIcon,
+  },
+
   props: {
+    items: { type: Array as PropType<WalineSearchResult[]>, default: () => [] },
     columnWidth: { type: Number, default: 300 },
-    items: { type: Array as PropType<unknown[]>, default: () => [] },
     gap: { type: Number, default: 0 },
-    rtl: { type: Boolean, default: false },
   },
 
   emit: ['insert'],
@@ -73,7 +85,7 @@ export default defineComponent({
   setup(props) {
     let resizeObserver: ResizeObserver | null = null;
     const wall = ref<HTMLDivElement | null>(null);
-
+    const state = ref<Record<string, boolean>>({});
     const columns = ref<Column[]>([]);
 
     const getColumnCount = (): number => {
@@ -98,8 +110,6 @@ export default defineComponent({
         wall.value?.children || []
       ) as HTMLDivElement[];
 
-      if (props.rtl) columnDivs.reverse();
-
       const target = columnDivs.reduce((prev, curr) =>
         curr.getBoundingClientRect().height <
         prev.getBoundingClientRect().height
@@ -125,8 +135,11 @@ export default defineComponent({
     };
 
     watch(
-      () => [props.items, props.rtl],
-      () => redraw(true)
+      () => [props.items],
+      () => {
+        state.value = {};
+        redraw(true);
+      }
     );
     watch(
       () => [props.columnWidth, props.gap],
@@ -145,6 +158,7 @@ export default defineComponent({
 
     return {
       columns,
+      state,
       wall,
     };
   },

package/src/config/default.ts

@@ -1,4 +1,4 @@
-import type { WalineMeta } from '../typings';
+import type { WalineMeta, WalineSearchOptions } from '../typings';
 
 const availableMeta: WalineMeta[] = ['nick', 'mail', 'link'];
 
@@ -19,3 +19,93 @@ export const defaultTexRenderer = (blockMode: boolean): string =>
   blockMode === true
     ? '<p class="wl-tex">Tex is not available in preview</p>'
     : '<span class="wl-tex">Tex is not available in preview</span>';
+
+export const getDefaultSearchOptions = (): WalineSearchOptions => {
+  interface FetchGifRequest {
+    keyword: string;
+    pos?: string;
+  }
+
+  type GifFormat =
+    | 'gif'
+    | 'mediumgif'
+    | 'tinygif'
+    | 'nanogif'
+    | 'mp4'
+    | 'loopedmp4'
+    | 'tinymp4'
+    | 'nanomp4'
+    | 'webm'
+    | 'tinywebm'
+    | 'nanowebm';
+
+  interface MediaObject {
+    preview: string;
+    url: string;
+    dims: number[];
+    size: number;
+  }
+
+  interface GifObject {
+    created: number;
+    hasaudio: boolean;
+    id: string;
+    media: Record<GifFormat, MediaObject>[];
+    tags: string[];
+    title: string;
+    itemurl: string;
+    hascaption: boolean;
+    url: string;
+  }
+
+  interface FetchGifResponse {
+    next: string;
+    results: GifObject[];
+  }
+
+  const state = {
+    next: '',
+  };
+
+  const fetchGif = ({
+    keyword,
+    pos,
+  }: 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 || '');
+    query.set('q', keyword);
+
+    return fetch(`${baseUrl}?${query.toString()}`, {
+      headers: {
+        // eslint-disable-next-line @typescript-eslint/naming-convention
+        'Content-Type': 'application/json',
+      },
+    })
+      .then((resp) => resp.json() as Promise<FetchGifResponse>)
+      .catch(() => ({ next: pos || '', results: [] }));
+  };
+
+  return {
+    search: (word = '') =>
+      fetchGif({ keyword: word }).then((resp) => {
+        state.next = resp.next;
+
+        return resp.results.map((item) => ({
+          title: item.title,
+          src: item.media[0].tinygif.url,
+        }));
+      }),
+    more: (word) =>
+      fetchGif({ keyword: word, pos: state.next }).then((resp) => {
+        state.next = resp.next;
+
+        return resp.results.map((item) => ({
+          title: item.title,
+          src: item.media[0].tinygif.url,
+        }));
+      }),
+  };
+};

package/src/init.ts

@@ -83,9 +83,6 @@ export const init = ({
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   if (app) app.mount(root!);
 
-  updateCommentCount();
-  updatePageviewCount();
-
   const stopComment = watchEffect(updateCommentCount);
   const stopPageview = watchEffect(updatePageviewCount);
 

package/src/pageview.ts

@@ -2,6 +2,7 @@ import {
   errorHandler,
   fetchPageviews,
   getQuery,
+  getServerURL,
   updatePageviews,
 } from './utils';
 
@@ -83,7 +84,7 @@ export const pageviewCount = ({
 
   const fetch = (elements: HTMLElement[]): Promise<void> =>
     fetchPageviews({
-      serverURL,
+      serverURL: getServerURL(serverURL),
       paths: elements.map((element) => getQuery(element) || path),
       lang,
       signal: controller.signal,

package/src/styles/emoji.scss

@@ -81,6 +81,8 @@
     position: relative;
     height: 2em;
     padding: 0 6px 1px;
+    overflow-x: scroll;
+    white-space: nowrap;
 
     &::before {
       content: ' ';
@@ -95,6 +97,24 @@
 
       background: var(--waline-border-color);
     }
+
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
+    }
+
+    &::-webkit-scrollbar-track-piece:horizontal {
+      -webkit-border-radius: 6px;
+      border-radius: 6px;
+      background: rgb(0 0 0 / 10%);
+    }
+
+    &::-webkit-scrollbar-thumb:horizontal {
+      height: 6px;
+      -webkit-border-radius: 6px;
+      border-radius: 6px;
+      background: var(--waline-theme-color);
+    }
   }
 
   .wl-tab {

package/src/typings/base.ts

@@ -39,6 +39,46 @@ export interface WalineEmojiInfo {
 
 export type WalineEmojiMaps = Record<string, string>;
 
+export interface WalineSearchResult extends Record<string, unknown> {
+  /**
+   * Image link
+   */
+  src: string;
+
+  /**
+   * Image title, optional
+   */
+  title?: string;
+
+  /**
+   * Image preview link, optional
+   *
+   * @default src
+   */
+  preview?: string;
+}
+
+export interface WalineSearchOptions {
+  /**
+   * Search action
+   */
+  search: (word: string) => Promise<WalineSearchResult[]>;
+
+  /**
+   * Default search action
+   *
+   * @default () => search('')
+   */
+  default?: () => Promise<WalineSearchResult[]>;
+
+  /**
+   * Fetch more action
+   *
+   * @default (word) => search(word)
+   */
+  more?: (word: string, currectCount: number) => Promise<WalineSearchResult[]>;
+}
+
 export type WalineMeta = 'nick' | 'mail' | 'link';
 
 export type WalineImageUploader = (image: File) => Promise<string>;

package/src/typings/waline.ts

@@ -4,6 +4,7 @@ import type {
   WalineImageUploader,
   WalineMeta,
   WalineTexRenderer,
+  WalineSearchOptions,
 } from './base';
 import type { WalineLocale } from './locale';
 
@@ -148,6 +149,13 @@ export interface WalineProps {
    */
   emoji?: (string | WalineEmojiInfo)[] | false;
 
+  /**
+   * 设置搜索功能
+   *
+   * Customize Search feature
+   */
+  search?: WalineSearchOptions | false;
+
   /**
    * 代码高亮
    *

package/src/utils/config.ts

@@ -1,10 +1,11 @@
 import {
   defaultLang,
+  defaultLocales,
   defaultUploadImage,
   defaultHighlighter,
   defaultTexRenderer,
+  getDefaultSearchOptions,
   getMeta,
-  defaultLocales,
 } from '../config';
 
 import { decodePath, isLinkHttp, removeEndingSplash } from './path';
@@ -27,7 +28,7 @@ export interface WalineConfig extends Required<Omit<WalineProps, 'wordLimit'>> {
   // emoji: Promise<EmojiConfig>;
 }
 
-const getServerURL = (serverURL: string): string => {
+export const getServerURL = (serverURL: string): string => {
   const result = removeEndingSplash(serverURL);
 
   return isLinkHttp(result) ? result : `https://${result}`;
@@ -61,6 +62,7 @@ export const getConfig = ({
   texRenderer,
   copyright = true,
   login = 'enable',
+  search = getDefaultSearchOptions(),
   ...more
 }: WalineProps): WalineConfig => ({
   serverURL: getServerURL(serverURL),
@@ -81,5 +83,6 @@ export const getConfig = ({
   pageSize,
   login,
   copyright,
+  search,
   ...more,
 });

package/src/utils/index.ts

@@ -10,5 +10,3 @@ export * from './markdown';
 export * from './path';
 export * from './query';
 export * from './wordCount';
-export * from './fetchGif';
-export * from './throttle';

package/src/utils/fetchGif.ts

@@ -1,63 +0,0 @@
-export type GifFormat =
-  | 'gif'
-  | 'mediumgif'
-  | 'tinygif'
-  | 'nanogif'
-  | 'mp4'
-  | 'loopedmp4'
-  | 'tinymp4'
-  | 'nanomp4'
-  | 'webm'
-  | 'tinywebm'
-  | 'nanowebm';
-export interface MediaObject {
-  preview: string;
-  url: string;
-  dims: number[];
-  size: number;
-}
-
-export interface FetchGifRequest {
-  key?: string;
-  keyword: string;
-  pos?: string;
-  limit?: number;
-}
-
-export interface GifObject {
-  created: number;
-  hasaudio: boolean;
-  id: string;
-  media: Record<GifFormat, MediaObject>[];
-  tags: string[];
-  title: string;
-  itemurl: string;
-  hascaption: boolean;
-  url: string;
-}
-
-export interface FetchGifResponse {
-  next: string;
-  results: GifObject[];
-}
-
-export const fetchGif = ({
-  key,
-  keyword,
-  pos,
-  limit,
-}: FetchGifRequest): Promise<FetchGifResponse> => {
-  const baseUrl = `https://g.tenor.com/v1/search`;
-  const query = new URLSearchParams('media_filter=minimal');
-  query.set('key', key || 'PAY5JLFIH6V6');
-  query.set('limit', (limit || 20).toString());
-  query.set('pos', pos || '');
-  query.set('q', keyword);
-
-  return fetch(`${baseUrl}?${query.toString()}`, {
-    headers: {
-      // eslint-disable-next-line @typescript-eslint/naming-convention
-      'Content-Type': 'application/json',
-    },
-  }).then((resp) => resp.json() as Promise<FetchGifResponse>);
-};

package/src/utils/throttle.ts

@@ -1,15 +0,0 @@
-export const throttle = (
-  func: (...args: any[]) => void,
-  timeout = 300
-): ((...args: []) => void) => {
-  let timer: number | null;
-
-  return (...args: []): void => {
-    if (timer) clearTimeout(timer);
-
-    timer = window.setTimeout(() => {
-      func(...args);
-      timer = null;
-    }, timeout);
-  };
-};