@waline/client 2.5.0 → 2.5.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.5.0",
+  "version": "2.5.1",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -56,15 +56,6 @@
     "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%",
@@ -80,26 +71,25 @@
     ]
   },
   "dependencies": {
-    "@vueuse/core": "^8.4.2",
+    "@vueuse/core": "^8.5.0",
     "autosize": "^5.0.1",
-    "marked": "^4.0.15",
-    "vue": "^3.2.33"
+    "marked": "^4.0.16",
+    "vue": "^3.2.35"
   },
   "devDependencies": {
-    "@babel/core": "^7.17.10",
-    "@babel/preset-env": "^7.17.10",
+    "@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.33",
+    "@types/node": "^17.0.35",
     "@vitejs/plugin-vue": "^2.3.3",
-    "@vue/compiler-sfc": "^3.2.33",
-    "@yeger/vue-masonry-wall": "^3.0.31",
+    "@vue/compiler-sfc": "^3.2.35",
     "rimraf": "^3.0.2",
-    "rollup": "^2.73.0",
+    "rollup": "^2.74.1",
     "rollup-plugin-dts": "^4.2.1",
     "rollup-plugin-terser": "^7.0.2",
     "rollup-plugin-ts": "^2.0.7",
@@ -108,5 +98,14 @@
   },
   "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

@@ -35,7 +35,7 @@
           <input
             :ref="
               (element) => {
-                if (element) inputRefs[kind] = element;
+                if (element) inputRefs[kind] = element as HTMLInputElement;
               }
             "
             :id="`wl-${kind}`"
@@ -174,30 +174,14 @@
             @input="onGifSearch"
           />
 
-          <masonry-wall
-            class="wl-gif-waterfall"
+          <ImageWall
             :items="gifData.list"
-            :ssr-columns="2"
             :column-width="200"
             :gap="6"
-            @scroll="onGifMasonryScroll"
+            @insert="insert($event)"
+            @scroll="onImageWallScroll"
           >
-            <template #default="{ item }">
-              <img
-                @click="insert(`![](${item.media[0].tinygif.url})`)"
-                :src="item.media[0].tinygif.url"
-                :title="item.title"
-                loading="lazy"
-                :style="{
-                  width: '200px',
-                  height:
-                    (200 * item.media[0].tinygif.dims[1]) /
-                      item.media[0].tinygif.dims[0] +
-                    'px',
-                }"
-              />
-            </template>
-          </masonry-wall>
+          </ImageWall>
 
           <div v-if="gifData.loading" class="wl-loading">
             <LoadingIcon :size="30" />
@@ -272,6 +256,7 @@ import {
   watch,
 } from 'vue';
 
+import ImageWall from './ImageWall.vue';
 import {
   CloseIcon,
   EmojiIcon,
@@ -283,20 +268,23 @@ import {
 } from './Icons';
 import { useEditor, useUserMeta, useUserInfo } from '../composables';
 import {
+  fetchGif,
+  getEmojis,
   getImagefromDataTransfer,
-  parseMarkdown,
   getWordNumber,
   parseEmoji,
+  parseMarkdown,
   postComment,
-  getEmojis,
-  fetchGif,
-  FetchGifResponse,
   throttle,
 } from '../utils';
 
 import type { ComputedRef, DeepReadonly } from 'vue';
 import type { WalineCommentData, WalineImageUploader } from '../typings';
-import type { WalineConfig, WalineEmojiConfig } from '../utils';
+import type {
+  FetchGifResponse,
+  WalineConfig,
+  WalineEmojiConfig,
+} from '../utils';
 
 export default defineComponent({
   name: 'CommentBox',
@@ -305,6 +293,7 @@ export default defineComponent({
     CloseIcon,
     EmojiIcon,
     ImageIcon,
+    ImageWall,
     MarkdownIcon,
     PreviewIcon,
     LoadingIcon,
@@ -621,21 +610,15 @@ export default defineComponent({
         showGif.value = false;
     };
 
-    const onGifSearch = throttle(async (event: Event) => {
-      gifData.value.cursor = '';
-      gifData.value.list = [];
-      onGifMasonryScroll(event);
-    });
-
-    const onGifMasonryScroll = async (event: Event): Promise<void> => {
+    const onImageWallScroll = async (event: Event): Promise<void> => {
       const { scrollTop, clientHeight, scrollHeight } =
         event.target as HTMLDivElement;
       const percent = (clientHeight + scrollTop) / scrollHeight;
-      if (percent < 0.9 || gifData.value.loading) {
-        return;
-      }
+
+      if (percent < 0.9 || gifData.value.loading) return;
 
       gifData.value.loading = true;
+
       const data = await fetchGif({
         keyword: gifSearchInputRef.value?.value || '',
         pos: gifData.value.cursor,
@@ -645,11 +628,18 @@ export default defineComponent({
 
       gifData.value.cursor = data.next;
       gifData.value.list = gifData.value.list.concat(data.results);
+
       setTimeout(() => {
         (event.target as HTMLDivElement).scrollTop = scrollTop;
       }, 50);
     };
 
+    const onGifSearch = throttle(async (event: Event) => {
+      gifData.value.cursor = '';
+      gifData.value.list = [];
+      onImageWallScroll(event);
+    });
+
     // update wordNumber
     watch(
       [config, wordNumber],
@@ -675,10 +665,8 @@ export default defineComponent({
       { immediate: true }
     );
 
-    watch([showGif], async ([showGif]) => {
-      if (!showGif) {
-        return;
-      }
+    watch(showGif, async (showGif) => {
+      if (!showGif) return;
 
       gifData.value.loading = true;
       const data = await fetchGif({ keyword: '' }).finally(() => {
@@ -746,7 +734,7 @@ export default defineComponent({
       onLogout,
       onProfile,
       submitComment,
-      onGifMasonryScroll,
+      onImageWallScroll,
       onGifSearch,
 
       isLogin,
@@ -768,6 +756,7 @@ export default defineComponent({
       showEmoji,
 
       // gif
+      gifData,
       showGif,
 
       // image
@@ -786,7 +775,6 @@ export default defineComponent({
       gifPopupRef,
       imageUploadRef,
       gifSearchInputRef,
-      gifData,
     };
   },
 });

package/src/components/CommentCard.vue

@@ -25,7 +25,7 @@
         <span v-if="comment.label" class="wl-badge" v-text="comment.label" />
         <span v-if="comment.sticky" class="wl-badge" v-text="locale.sticky" />
         <span
-          v-if="comment.level && comment.level >= 0"
+          v-if="comment.level !== undefined && comment.level >= 0"
           :class="`wl-badge level${comment.level}`"
           v-text="locale[`level${comment.level}`] || `Level ${comment.level}`"
         />

package/src/components/ImageWall.vue

@@ -0,0 +1,152 @@
+<!-- forked from https://github.com/DerYeger/vue-masonry-wall/blob/master/src/masonry-wall.vue -->
+
+<!-- MIT License
+
+Copyright (c) 2021 Fuxing Loh, Jan Müller
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE. -->
+
+<template>
+  <div ref="wall" class="wl-gallery" :style="{ gap: `${gap}px` }">
+    <div
+      v-for="(column, columnIndex) in columns"
+      :key="columnIndex"
+      class="wl-gallery-column"
+      :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})`)
+        "
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  nextTick,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  watch,
+} from 'vue';
+
+import type { PropType } from 'vue';
+
+type Column = number[];
+
+export default defineComponent({
+  props: {
+    columnWidth: { type: Number, default: 300 },
+    items: { type: Array as PropType<unknown[]>, default: () => [] },
+    gap: { type: Number, default: 0 },
+    rtl: { type: Boolean, default: false },
+  },
+
+  emit: ['insert'],
+
+  setup(props) {
+    let resizeObserver: ResizeObserver | null = null;
+    const wall = ref<HTMLDivElement | null>(null);
+
+    const columns = ref<Column[]>([]);
+
+    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)
+      );
+
+      return count > 0 ? count : 1;
+    };
+
+    const createColumns = (count: number): Column[] =>
+      new Array(count).fill(null).map(() => []);
+
+    const fillColumns = async (itemIndex: number): Promise<void> => {
+      if (itemIndex >= props.items.length) return;
+
+      await nextTick();
+
+      const columnDivs = Array.from(
+        wall.value?.children || []
+      ) as HTMLDivElement[];
+
+      if (props.rtl) columnDivs.reverse();
+
+      const target = columnDivs.reduce((prev, curr) =>
+        curr.getBoundingClientRect().height <
+        prev.getBoundingClientRect().height
+          ? curr
+          : prev
+      );
+
+      columns.value[Number(target.dataset.index)].push(itemIndex);
+
+      await fillColumns(itemIndex + 1);
+    };
+
+    const redraw = async (force = false): Promise<void> => {
+      if (columns.value.length === getColumnCount() && !force) return;
+
+      columns.value = createColumns(getColumnCount());
+
+      const scrollY = window.scrollY;
+
+      await fillColumns(0);
+
+      window.scrollTo({ top: scrollY });
+    };
+
+    watch(
+      () => [props.items, props.rtl],
+      () => redraw(true)
+    );
+    watch(
+      () => [props.columnWidth, props.gap],
+      () => redraw()
+    );
+
+    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 {
+      columns,
+      wall,
+    };
+  },
+});
+</script>

package/src/composables/like.ts

@@ -2,7 +2,7 @@ import { useStorage } from '@vueuse/core';
 
 import type { Ref } from 'vue';
 
-const LIKE_KEY = 'WALIKE_LIKE';
+const LIKE_KEY = 'WALINE_LIKE';
 
 export type LikeID = number | string;
 

package/src/init.ts

@@ -1,5 +1,4 @@
 import { createApp, h, reactive, watchEffect } from 'vue';
-import MasonryWall from '@yeger/vue-masonry-wall';
 
 import Waline from './components/Waline.vue';
 import { commentCount } from './comment';
@@ -81,12 +80,8 @@ export const init = ({
     ? createApp(() => h(Waline, { path: state.path, ...props }))
     : null;
 
-  if (app) {
-    // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
-    app.use(MasonryWall);
-    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-    app.mount(root!);
-  }
+  // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+  if (app) app.mount(root!);
 
   updateCommentCount();
   updatePageviewCount();

package/src/styles/emoji.scss

@@ -1,118 +1,116 @@
-@mixin emoji() {
-  .wl-emoji-popup {
-    position: absolute;
-    top: 100%;
-    left: 1.25em;
-    z-index: 10;
-
-    max-width: 526px;
-    border: var(--waline-border);
-    border-radius: 6px;
-
-    background: var(--waline-bgcolor);
-    box-shadow: var(--waline-box-shadow);
-
-    opacity: 0;
-    visibility: hidden;
-
-    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
-    transform: scale(0.9, 0.9);
-    transform-origin: 0 0;
-
-    &.display {
-      opacity: 1;
-      visibility: visible;
-      transform: none;
-    }
+.wl-emoji-popup {
+  position: absolute;
+  top: 100%;
+  left: 1.25em;
+  z-index: 10;
+
+  max-width: 526px;
+  border: var(--waline-border);
+  border-radius: 6px;
+
+  background: var(--waline-bgcolor);
+  box-shadow: var(--waline-box-shadow);
+
+  opacity: 0;
+  visibility: hidden;
+
+  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
+  transform: scale(0.9, 0.9);
+  transform-origin: 0 0;
+
+  &.display {
+    opacity: 1;
+    visibility: visible;
+    transform: none;
+  }
+
+  button {
+    display: inline-block;
+    vertical-align: middle;
+
+    width: 2em;
+    margin: 0.125em;
+    padding: 0;
+    border-width: 0;
+
+    background: transparent;
 
-    button {
-      display: inline-block;
-      vertical-align: middle;
+    font-size: inherit;
+    line-height: 2;
+    text-align: center;
 
-      width: 2em;
-      margin: 0.125em;
-      padding: 0;
-      border-width: 0;
+    cursor: pointer;
 
-      background: transparent;
+    &:hover {
+      background: var(--waline-bgcolor-hover);
+    }
+  }
 
-      font-size: inherit;
-      line-height: 2;
-      text-align: center;
+  .wl-emoji {
+    display: inline-block;
+    vertical-align: middle;
+    max-width: 1.5em;
+    max-height: 1.5em;
+  }
 
-      cursor: pointer;
+  .wl-tab-wrapper {
+    overflow-y: auto;
+    max-height: 145px;
+    padding: 0.5em;
 
-      &:hover {
-        background: var(--waline-bgcolor-hover);
-      }
+    &::-webkit-scrollbar {
+      width: 6px;
+      height: 6px;
     }
 
-    .wl-emoji {
-      display: inline-block;
-      vertical-align: middle;
-      max-width: 1.5em;
-      max-height: 1.5em;
+    &::-webkit-scrollbar-track-piece:vertical {
+      -webkit-border-radius: 6px;
+      border-radius: 6px;
+      background: rgb(0 0 0 / 10%);
     }
 
-    .wl-tab-wrapper {
-      overflow-y: auto;
-      max-height: 145px;
-      padding: 0.5em;
-
-      &::-webkit-scrollbar {
-        width: 6px;
-        height: 6px;
-      }
-
-      &::-webkit-scrollbar-track-piece:vertical {
-        -webkit-border-radius: 6px;
-        border-radius: 6px;
-        background: rgb(0 0 0 / 10%);
-      }
-
-      &::-webkit-scrollbar-thumb:vertical {
-        width: 6px;
-        -webkit-border-radius: 6px;
-        border-radius: 6px;
-        background: var(--waline-theme-color);
-      }
+    &::-webkit-scrollbar-thumb:vertical {
+      width: 6px;
+      -webkit-border-radius: 6px;
+      border-radius: 6px;
+      background: var(--waline-theme-color);
     }
+  }
 
-    .wl-tabs {
-      position: relative;
-      height: 2em;
-      padding: 0 6px 1px;
+  .wl-tabs {
+    position: relative;
+    height: 2em;
+    padding: 0 6px 1px;
 
-      &::before {
-        content: ' ';
+    &::before {
+      content: ' ';
 
-        position: absolute;
-        top: 0;
-        right: 0;
-        left: 0;
-        z-index: 2;
+      position: absolute;
+      top: 0;
+      right: 0;
+      left: 0;
+      z-index: 2;
 
-        height: 1px;
+      height: 1px;
 
-        background: var(--waline-border-color);
-      }
+      background: var(--waline-border-color);
     }
+  }
 
-    .wl-tab {
-      position: relative;
-      margin: 0;
-      padding: 0 0.5em;
+  .wl-tab {
+    position: relative;
+    margin: 0;
+    padding: 0 0.5em;
 
-      &.active {
-        z-index: 3;
+    &.active {
+      z-index: 3;
 
-        border: 1px solid var(--waline-border-color);
-        border-top-width: 0;
-        border-bottom-right-radius: 6px;
-        border-bottom-left-radius: 6px;
+      border: 1px solid var(--waline-border-color);
+      border-top-width: 0;
+      border-bottom-right-radius: 6px;
+      border-bottom-left-radius: 6px;
 
-        background: var(--waline-bgcolor);
-      }
+      background: var(--waline-bgcolor);
     }
   }
 }