@waline/client 2.14.0 → 2.14.2

package/src/components/CommentCard.vue

@@ -2,6 +2,7 @@
   <div :id="comment.objectId" class="wl-item">
     <div class="wl-user" aria-hidden="true">
       <img v-if="comment.avatar" :src="comment.avatar" />
+
       <VerifiedIcon v-if="comment.type" />
     </div>
 
@@ -12,9 +13,10 @@
           class="wl-nick"
           :href="link"
           target="_blank"
-          rel="nofollow noreferrer"
+          rel="noopener noreferrer"
           >{{ comment.nick }}</a
         >
+
         <span v-else class="wl-nick">{{ comment.nick }}</span>
 
         <span
@@ -22,26 +24,32 @@
           class="wl-badge"
           v-text="locale.admin"
         />
+
         <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 !== undefined && comment.level >= 0"
           :class="`wl-badge level${comment.level}`"
           v-text="locale[`level${comment.level}`] || `Level ${comment.level}`"
         />
+
         <span class="wl-time" v-text="time" />
 
         <div class="wl-comment-actions">
           <button
             v-if="isAdmin || isOwner"
+            type="button"
             class="wl-edit"
-            @click="$emit('edit', comment)"
+            @click="() => $emit('edit', comment)"
           >
             <EditIcon />
           </button>
 
           <button
             v-if="isAdmin || isOwner"
+            type="button"
             class="wl-delete"
             @click="$emit('delete', comment)"
           >
@@ -49,15 +57,18 @@
           </button>
 
           <button
+            type="button"
             class="wl-like"
             :title="like ? locale.cancelLike : locale.like"
             @click="$emit('like', comment)"
           >
             <LikeIcon :active="like" />
+
             <span v-if="'like' in comment" v-text="comment.like" />
           </button>
 
           <button
+            type="button"
             class="wl-reply"
             :class="{ active: isReplyingCurrent }"
             :title="isReplyingCurrent ? locale.cancelReply : locale.reply"
@@ -67,6 +78,7 @@
           </button>
         </div>
       </div>
+
       <div class="wl-meta" aria-hidden="true">
         <span
           v-if="comment.addr"
@@ -74,12 +86,14 @@
           :data-value="comment.addr"
           v-text="comment.addr"
         />
+
         <span
           v-if="comment.browser"
           class="wl-browser"
           :data-value="comment.browser"
           v-text="comment.browser"
         />
+
         <span
           v-if="comment.os"
           class="wl-os"
@@ -100,6 +114,7 @@
           <button
             v-for="status in commentStatus"
             :key="status"
+            type="submit"
             :class="`wl-btn wl-${status}`"
             :disabled="comment.status === status"
             @click="$emit('status', { status, comment })"
@@ -109,6 +124,7 @@
 
         <button
           v-if="isAdmin && !comment.rid"
+          type="submit"
           class="wl-btn wl-sticky"
           @click="$emit('sticky', comment)"
         >
@@ -128,12 +144,16 @@
           :reply-id="reply?.objectId"
           :reply-user="comment.nick"
           :root-id="rootId"
-          @submit="$emit('submit', $event)"
+          @log="$emit('log')"
           @cancel-reply="$emit('reply', null)"
           @cancel-edit="$emit('edit', null)"
+          @submit="$emit('submit', $event)"
         />
       </div>
+
       <div v-if="comment.children" class="wl-quote">
+        <!-- FIXME: This is a upstream bug -->
+        <!-- eslint-disable-next-line vue/no-undef-components -->
         <CommentCard
           v-for="child in comment.children"
           :key="child.objectId"
@@ -141,119 +161,110 @@
           :reply="reply"
           :edit="edit"
           :root-id="rootId"
-          @reply="$emit('reply', $event)"
-          @submit="$emit('submit', $event)"
-          @like="$emit('like', $event)"
-          @edit="$emit('edit', $event)"
+          @log="$emit('log')"
           @delete="$emit('delete', $event)"
+          @edit="$emit('edit', $event)"
+          @like="$emit('like', $event)"
+          @reply="$emit('reply', $event)"
           @status="$emit('status', $event)"
           @sticky="$emit('sticky', $event)"
+          @submit="$emit('submit', $event)"
         />
       </div>
     </div>
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject } from 'vue';
+<script setup lang="ts">
+import { useNow } from '@vueuse/core';
+import { computed, inject } from 'vue';
 import CommentBox from './CommentBox.vue';
 import {
   DeleteIcon,
+  EditIcon,
   LikeIcon,
   ReplyIcon,
-  EditIcon,
   VerifiedIcon,
-} from './Icons';
-import { isLinkHttp } from '../utils';
-import { useTimeAgo, useLikeStorage, useUserInfo } from '../composables';
+} from './Icons.js';
+import { getTimeAgo, isLinkHttp } from '../utils';
+import { useLikeStorage, useUserInfo } from '../composables/index.js';
+
+import type { ComputedRef } from 'vue';
+import type { WalineConfig } from '../utils/index.js';
+import type { WalineComment, WalineCommentStatus } from '../typings/index.js';
 
-import type { ComputedRef, PropType } from 'vue';
-import type { WalineConfig } from '../utils';
-import type { WalineComment, WalineCommentStatus } from '../typings';
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Comment data
+     */
+    comment: WalineComment;
+    /**
+     * Current comment to be edited
+     */
+    edit?: WalineComment | null;
+    /**
+     * Root comment id
+     */
+    rootId: string;
+    /**
+     * Current comment to be replied
+     */
+    reply?: WalineComment | null;
+  }>(),
+  {
+    edit: null,
+    reply: null,
+  }
+);
+
+defineEmits<{
+  (event: 'log'): void;
+  (event: 'submit', comment: WalineComment): void;
+  (event: 'delete', comment: WalineComment): void;
+  (event: 'edit', comment: WalineComment | null): void;
+  (event: 'like', comment: WalineComment): void;
+  (
+    event: 'status',
+    statusInfo: { status: WalineCommentStatus; comment: WalineComment }
+  ): void;
+  (event: 'sticky', comment: WalineComment): void;
+  (event: 'reply', comment: WalineComment | null): void;
+}>();
 
 const commentStatus: WalineCommentStatus[] = ['approved', 'waiting', 'spam'];
 
-export default defineComponent({
-  components: {
-    CommentBox,
-    DeleteIcon,
-    LikeIcon,
-    ReplyIcon,
-    EditIcon,
-    VerifiedIcon,
-  },
-
-  props: {
-    comment: {
-      type: Object as PropType<WalineComment>,
-      required: true,
-    },
-    rootId: {
-      type: String,
-      required: true,
-    },
-    reply: {
-      type: Object as PropType<WalineComment | null>,
-      default: null,
-    },
-    edit: {
-      type: Object as PropType<WalineComment | null>,
-      default: null,
-    },
-  },
-
-  emits: ['submit', 'reply', 'like', 'delete', 'status', 'sticky', 'edit'],
-
-  setup(props) {
-    const config = inject<ComputedRef<WalineConfig>>(
-      'config'
-    ) as ComputedRef<WalineConfig>;
-    const likes = useLikeStorage();
-    const userInfo = useUserInfo();
-
-    const locale = computed(() => config.value.locale);
-
-    const link = computed(() => {
-      const { link } = props.comment;
-
-      return link ? (isLinkHttp(link) ? link : `https://${link}`) : '';
-    });
-
-    const like = computed(() => likes.value.includes(props.comment.objectId));
-
-    const time = useTimeAgo(props.comment.insertedAt, locale.value);
-
-    const isAdmin = computed(() => userInfo.value.type === 'administrator');
-
-    const isOwner = computed(
-      () =>
-        props.comment.user_id &&
-        userInfo.value.objectId === props.comment.user_id
-    );
-
-    const isReplyingCurrent = computed(
-      () => props.comment.objectId === props.reply?.objectId
-    );
-
-    const isEditingCurrent = computed(
-      () => props.comment.objectId === props.edit?.objectId
-    );
-
-    return {
-      config,
-      locale,
-
-      isReplyingCurrent,
-      isEditingCurrent,
-      link,
-      like,
-      time,
-
-      isAdmin,
-      isOwner,
-
-      commentStatus,
-    };
-  },
+const config = inject<ComputedRef<WalineConfig>>('config')!;
+const likes = useLikeStorage();
+const now = useNow();
+const userInfo = useUserInfo();
+
+const locale = computed(() => config.value.locale);
+
+const link = computed(() => {
+  const { link } = props.comment;
+
+  return link ? (isLinkHttp(link) ? link : `https://${link}`) : '';
 });
+
+const like = computed(() => likes.value.includes(props.comment.objectId));
+
+const time = computed(() =>
+  getTimeAgo(props.comment.insertedAt, now.value, locale.value)
+);
+
+const isAdmin = computed(() => userInfo.value.type === 'administrator');
+
+const isOwner = computed(
+  () =>
+    props.comment.user_id && userInfo.value.objectId === props.comment.user_id
+);
+
+const isReplyingCurrent = computed(
+  () => props.comment.objectId === props.reply?.objectId
+);
+
+const isEditingCurrent = computed(
+  () => props.comment.objectId === props.edit?.objectId
+);
 </script>

package/src/components/ImageWall.vue

@@ -1,26 +1,28 @@
 <!-- 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. -->
+<!--
+  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` }">
@@ -32,11 +34,14 @@ SOFTWARE. -->
       :style="{ gap: `${gap}px` }"
     >
       <template v-for="itemIndex in column" :key="itemIndex">
+        <!-- eslint-disable vue/no-static-inline-styles -->
         <LoadingIcon
           v-if="!state[items[itemIndex].src]"
           :size="36"
           style="margin: 20px auto"
         />
+        <!-- eslint-enable vue/no-static-inline-styles -->
+
         <img
           class="wl-gallery-item"
           :src="items[itemIndex].src"
@@ -50,120 +55,116 @@ SOFTWARE. -->
   </div>
 </template>
 
-<script lang="ts">
-import {
-  defineComponent,
-  nextTick,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  watch,
-} from 'vue';
+<script setup lang="ts">
+import { nextTick, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 
-import { LoadingIcon } from './Icons';
+import { LoadingIcon } from './Icons.js';
 
-import type { PropType } from 'vue';
-import type { WalineSearchResult } from '../typings';
+import type { WalineSearchResult } from '../typings/index.js';
 
 type Column = number[];
 
-export default defineComponent({
-  name: 'ImageWall',
-
-  components: {
-    LoadingIcon,
-  },
-
-  props: {
-    items: { type: Array as PropType<WalineSearchResult>, default: () => [] },
-    columnWidth: { type: Number, default: 300 },
-    gap: { type: Number, default: 0 },
-  },
-
-  emits: ['insert'],
-
-  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 => {
-      const count = Math.floor(
-        (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[];
-
-      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 });
-    };
-
-    const imageLoad = (e: Event): void => {
-      state.value[(e.target as HTMLImageElement).src] = true;
-    };
-
-    onMounted(() => {
-      redraw(true);
-
-      resizeObserver = new ResizeObserver(() => redraw());
-      resizeObserver.observe(wall.value!);
-
-      watch(
-        () => [props.items],
-        () => {
-          state.value = {};
-          redraw(true);
-        }
-      );
-      watch(
-        () => [props.columnWidth, props.gap],
-        () => redraw()
-      );
-    });
-
-    onBeforeUnmount(() => resizeObserver!.unobserve(wall.value!));
-
-    return {
-      columns,
-      state,
-      wall,
-      imageLoad,
-    };
-  },
+const props = withDefaults(
+  defineProps<{
+    /**
+     * Image Items
+     */
+    items?: WalineSearchResult;
+    /**
+     * width in pixels of each column
+     */
+    columnWidth?: number;
+    /**
+     * gap in pixels between columns
+     */
+    gap?: number;
+  }>(),
+  {
+    items: () => [] as WalineSearchResult,
+    columnWidth: 300,
+    gap: 0,
+  }
+);
+
+defineEmits<{
+  (event: 'insert', content: string): void;
+}>();
+
+defineExpose();
+
+let resizeObserver: ResizeObserver | null = null;
+const wall = ref<HTMLDivElement | null>(null);
+const state = ref<Record<string, boolean>>({});
+const columns = ref<Column[]>([]);
+
+const getColumnCount = (): number => {
+  const count = Math.floor(
+    (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[];
+
+  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 });
+};
+
+const imageLoad = (e: Event): void => {
+  state.value[(e.target as HTMLImageElement).src] = true;
+};
+
+onMounted(() => {
+  void redraw(true);
+
+  resizeObserver = new ResizeObserver(() => {
+    void redraw();
+  });
+  resizeObserver.observe(wall.value!);
+
+  watch(
+    () => [props.items],
+    () => {
+      state.value = {};
+      void redraw(true);
+    }
+  );
+  watch(
+    () => [props.columnWidth, props.gap],
+    () => {
+      void redraw();
+    }
+  );
 });
+
+onBeforeUnmount(() => resizeObserver!.unobserve(wall.value!));
 </script>