@waline/client 2.14.3 → 2.14.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.14.3",
+  "version": "2.14.5",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -93,16 +93,6 @@
     "dist",
     "src"
   ],
-  "scripts": {
-    "build": "pnpm rollup && pnpm style",
-    "clean": "rimraf ./dist",
-    "dev": "vite",
-    "prepublishOnly": "pnpm clean && pnpm build",
-    "rollup": "rollup -c",
-    "style": "pnpm style:main && pnpm style:meta",
-    "style:main": "sass ./src/styles/index.scss ./dist/waline.css --style=compressed",
-    "style:meta": "sass ./src/styles/meta.scss ./dist/waline-meta.css --style=compressed"
-  },
   "browserslist": {
     "production": [
       ">0.5%",
@@ -119,7 +109,7 @@
     ]
   },
   "dependencies": {
-    "@vueuse/core": "^9.8.2",
+    "@vueuse/core": "^9.10.0",
     "autosize": "^5.0.2",
     "marked": "^4.2.5",
     "vue": "^3.2.45"
@@ -135,17 +125,26 @@
     "@rollup/plugin-terser": "0.2.1",
     "@types/autosize": "4.0.1",
     "@types/marked": "4.0.8",
-    "@types/node": "18.11.17",
+    "@types/node": "18.11.18",
     "@vitejs/plugin-vue": "4.0.0",
     "recaptcha-v3": "1.10.0",
     "rimraf": "3.0.2",
-    "rollup": "3.8.1",
-    "rollup-plugin-dts": "5.0.0",
+    "rollup": "3.9.1",
+    "rollup-plugin-dts": "5.1.0",
     "rollup-plugin-ts": "3.0.2",
     "typescript": "4.9.4",
-    "vite": "4.0.3"
+    "vite": "4.0.4"
   },
   "engines": {
     "node": ">=14"
+  },
+  "scripts": {
+    "build": "pnpm rollup && pnpm style",
+    "clean": "rimraf ./dist",
+    "dev": "vite",
+    "rollup": "rollup -c",
+    "style": "pnpm style:main && pnpm style:meta",
+    "style:main": "sass ./src/styles/index.scss ./dist/waline.css --style=compressed",
+    "style:meta": "sass ./src/styles/meta.scss ./dist/waline-meta.css --style=compressed"
   }
-}
+}

package/src/components/ArticleReaction.vue

@@ -1,31 +1,24 @@
 <template>
   <div v-if="reactionsInfo.length" class="wl-reaction">
-    <h4 v-text="locale.reactionTitle" />
+    <div class="reaction-title" v-text="locale.reactionTitle" />
 
-    <ul class="wl-reaction-list">
+    <ul class="reaction-list">
       <li
         v-for="({ active, icon, desc }, index) in reactionsInfo"
         :key="index"
-        class="wl-reaction-item"
+        class="reaction-item"
         :class="{ active }"
         @click="vote(index)"
       >
-        <div class="wl-reaction-img">
+        <div class="reaction-img">
           <img :src="icon" :alt="desc" />
 
-          <LoadingIcon
-            v-if="votingIndex === index"
-            class="wl-reaction-loading"
-          />
+          <LoadingIcon v-if="votingIndex === index" class="reaction-loading" />
 
-          <div
-            v-else
-            class="wl-reaction-votes"
-            v-text="voteNumbers[index] || 0"
-          />
+          <div v-else class="reaction-votes" v-text="voteNumbers[index] || 0" />
         </div>
 
-        <div class="wl-reaction-text" v-text="desc" />
+        <div class="reaction-text" v-text="desc" />
       </li>
     </ul>
   </div>

package/src/components/WalineComment.vue

@@ -84,7 +84,10 @@
 </template>
 
 <script setup lang="ts">
+/* eslint-disable vue/define-props-declaration */
 /* eslint-disable vue/no-unused-properties */
+/* eslint-disable vue/require-prop-comment */
+/* eslint-disable vue/require-prop-types */
 import { useStyleTag } from '@vueuse/core';
 import { computed, onMounted, onUnmounted, provide, ref, watch } from 'vue';
 import Reaction from './ArticleReaction.vue';
@@ -98,372 +101,34 @@ import { version } from '../version.js';
 
 import type {
   WalineComment,
+  WalineCommentSorting,
   WalineCommentStatus,
-  WalineLocale,
+  WalineProps,
 } from '../typings/index.js';
 
 type SortKey = 'insertedAt_desc' | 'insertedAt_asc' | 'like_desc';
 
-// TODO: Currently complex types and type imports from other files are not supported. It is possible to support type imports in the future.
-// @see https://vuejs.org/api/sfc-script-setup.html#typescript-only-features
-// this issue may be addressed in Vue3.3
-// the following line is the same as WalineProps
-
-type WalineCommentSorting = 'latest' | 'oldest' | 'hottest';
-
-type WalineEmojiPresets =
-  | `//${string}`
-  | `http://${string}`
-  | `https://${string}`;
-
-interface WalineEmojiInfo {
-  /**
-   * 选项卡上的 Emoji 名称
-   *
-   * Emoji name show on tab
-   */
-  name: string;
-  /**
-   * 所在文件夹链接
-   *
-   * Current folder link
-   */
-  folder?: string;
-  /**
-   * Emoji 通用路径前缀
-   *
-   * Common prefix of Emoji icons
-   */
-  prefix?: string;
-  /**
-   * Emoji 图片的类型，会作为文件扩展名使用
-   *
-   * Type of Emoji icons, will be regarded as file extension
-   */
-  type?: string;
-  /**
-   * 选项卡显示的 Emoji 图标
-   *
-   * Emoji icon show on tab
-   */
-  icon: string;
-  /**
-   * Emoji 图片列表
-   *
-   * Emoji image list
-   */
-  items: string[];
-}
-
-type WalineLoginStatus = 'enable' | 'disable' | 'force';
-
-interface WalineSearchImageData extends Record<string, unknown> {
-  /**
-   * 图片链接
-   *
-   * Image link
-   */
-  src: string;
-
-  /**
-   * 图片标题
-   *
-   * @description 用于图片的 alt 属性
-   *
-   * Image title
-   *
-   * @description Used for alt attribute of image
-   */
-  title?: string;
-
-  /**
-   * 图片缩略图
-   *
-   * @description 为了更好的加载性能，我们会优先在列表中使用此缩略图
-   *
-   * Image preview link
-   *
-   * @description For better loading performance, we will use this thumbnail first in the list
-   *
-   * @default src
-   */
-  preview?: string;
-}
-
-type WalineSearchResult = WalineSearchImageData[];
-
-interface WalineSearchOptions {
-  /**
-   * 搜索操作
-   *
-   * Search action
-   */
-  search: (word: string) => Promise<WalineSearchResult>;
-
-  /**
-   * 打开列表时展示的默认结果
-   *
-   * Default result when opening list
-   *
-   * @default () => search('')
-   */
-  default?: () => Promise<WalineSearchResult>;
-
-  /**
-   * 获取更多的操作
-   *
-   * @description 会在列表滚动到底部时触发，如果你的搜索服务支持分页功能，你应该设置此项实现无限滚动
-   *
-   * Fetch more action
-   *
-   * @description It will be triggered when the list scrolls to the bottom. If your search service supports paging, you should set this to achieve infinite scrolling
-   *
-   * @default (word) => search(word)
-   */
-  more?: (word: string, currentCount: number) => Promise<WalineSearchResult>;
-}
-
-type WalineMeta = 'nick' | 'mail' | 'link';
-
-type WalineImageUploader = (image: File) => Promise<string>;
-
-type WalineHighlighter = (code: string, lang: string) => string;
-
-type WalineTexRenderer = (blockMode: boolean, tex: string) => string;
-
-const props = defineProps<{
-  /**
-   * Waline 的服务端地址
-   *
-   * Waline server address url
-   */
-  serverURL: string;
-
-  /**
-   * 当前 _文章页_ 路径，用于区分不同的 _文章页_ ，以保证正确读取该 _文章页_ 下的评论列表
-   *
-   * 你可以将其设置为 `window.location.pathname`
-   *
-   * Article path id. Used to distinguish different _article pages_ to ensure loading the correct comment list under the _article page_.
-   *
-   * You can set it to `window.location.pathname`
-   */
-  path: string;
-
-  /**
-   * 评论者相关属性
-   *
-   * `Meta` 可选值: `'nick'`, `'mail'`, `'link'`
-   *
-   * Reviewer attributes.
-   *
-   * Optional values for `Meta`: `'nick'`, `'mail'`, `'link'`
-   *
-   * @default ['nick', 'mail', 'link']
-   */
-  meta?: WalineMeta[];
-
-  /**
-   * 设置**必填项**，默认昵称为匿名
-   *
-   * Set required fields, default anonymous with nickname
-   *
-   * @default []
-   */
-  requiredMeta?: WalineMeta[];
-
-  /**
-   * 评论字数限制。填入单个数字时为最大字数限制
-   *
-   * @more 设置为 `0` 时无限制
-   *
-   * Comment word s limit. When a single number is filled in, it 's the maximum number of comment words.
-   *
-   * @more No limit when set to `0`.
-   *
-   * @default 0
-   */
-  wordLimit?: number | [number, number];
-
-  /**
-   * 评论列表分页，每页条数
-   *
-   * number of pages per page
-   *
-   * @default 10
-   */
-  pageSize?: number;
-
-  /**
-   * Waline 显示语言
-   *
-   * 可选值:
-   *
-   * - `'zh'`
-   * - `'zh-cn'`
-   * - `'zh-CN'`
-   * - `'zh-tw'`
-   * - `'zh-TW'`
-   * - `'en'`
-   * - `'en-US'`
-   * - `'en-us'`
-   * - `'jp'`
-   * - `'jp-jp'`
-   * - `'jp-JP'`
-   * - `'pt-br'`
-   * - `'pt-BR'`
-   * - `'ru'`
-   * - `'ru-ru'`
-   * - `'ru-RU'`
-   *
-   * Display language for waline
-   *
-   * Optional value:
-   *
-   * - `'zh'`
-   * - `'zh-cn'`
-   * - `'zh-CN'`
-   * - `'zh-tw'`
-   * - `'zh-TW'`
-   * - `'en'`
-   * - `'en-US'`
-   * - `'en-us'`
-   * - `'jp'`
-   * - `'jp-jp'`
-   * - `'jp-JP'`
-   * - `'pt-br'`
-   * - `'pt-BR'`
-   * - `'ru'`
-   * - `'ru-ru'`
-   * - `'ru-RU'`
-   *
-   * @default 'zh-CN'
-   */
-  lang?: string;
-
-  /**
-   * 自定义 waline 语言显示
-   *
-   * @see [自定义语言](https://waline.js.org/client/i18n.html)
-   *
-   * Custom display language in waline
-   *
-   * @see [I18n](https://waline.js.org/en/client/i18n.html)
-   */
-  locale?: Partial<WalineLocale>;
-
-  /**
-   * 评论列表排序方式
-   *
-   * Sorting method for comment list
-   *
-   * @default 'latest'
-   */
-  commentSorting?: WalineCommentSorting;
-
-  /**
-   * 是否启用暗黑模式适配
-   *
-   * @more 设置 `'auto'` 会根据设备暗黑模式自适应。填入 CSS 选择器会在对应选择器生效时启用夜间模式。
-   *
-   * Whether to enable darkmode support
-   *
-   * @more Setting `'auto'` will display darkmode due to device settings. Filling in CSS selector will enable darkmode only when the selector match waline ancestor nodes.
-   */
-  dark?: string | boolean;
-
-  /**
-   * 设置表情包
-   *
-   * Set Emojis
-   *
-   * @default ['//unpkg.com/@waline/emojis@1.1.0/weibo']
-   */
-  emoji?: (WalineEmojiInfo | WalineEmojiPresets)[] | boolean;
-
-  /**
-   * 设置搜索功能
-   *
-   * Customize Search feature
-   *
-   * @default true
-   */
-  search?: WalineSearchOptions | boolean;
-
-  /**
-   * 代码高亮
-   *
-   * Code highlighting
-   *
-   * @default true
-   */
-
-  highlighter?: WalineHighlighter | boolean;
-
-  /**
-   * 自定义图片上传方法，方便更好的存储图片
-   *
-   * 方法执行时会将图片对象传入。
-   *
-   * Custom image upload callback to manage picture by yourself.
-   *
-   * We will pass a picture file object when execute it.
-   *
-   * @default true
-   */
-
-  imageUploader?: WalineImageUploader | boolean;
-
-  /**
-   * 自定义数学公式处理方法，用于预览。
-   *
-   * Custom math formula parse callback for preview.
-   *
-   * @default true
-   */
-  texRenderer?: WalineTexRenderer | boolean;
-
-  /**
-   *
-   * 登录模式状态，可选值:
-   *
-   * - `'enable'`: 启用登录 (默认)
-   * - `'disable'`: 禁用登录，用户只能填写信息评论
-   * - `'force'`: 强制登录，用户必须注册并登录才可发布评论
-   *
-   * Login mode status, optional values:
-   *
-   * - `'enable'`: enable login (default)
-   * - `'disable'`: Login is disabled, users should fill in information to comment
-   * - `'force'`: Forced login, users must login to comment
-   *
-   * @default 'enable'
-   */
-  login?: WalineLoginStatus;
-
-  /**
-   * 是否在页脚展示版权信息
-   *
-   * 为了支持 Waline，我们强烈建议你开启它
-   *
-   * Whether show copyright in footer
-   *
-   * We strongly recommended you to keep it on to support waline
-   *
-   * @default true
-   */
-  copyright?: boolean;
-
-  /**
-   * recaptcha v3 client key
-   */
-  recaptchaV3Key?: string;
-
-  /**
-   * reaction
-   */
-  reaction?: string[] | boolean;
-}>();
+const props = defineProps([
+  'serverURL',
+  'path',
+  'meta',
+  'requiredMeta',
+  'dark',
+  'commentSorting',
+  'lang',
+  'locale',
+  'pageSize',
+  'wordLimit',
+  'emoji',
+  'login',
+  'highlighter',
+  'texRenderer',
+  'imageUploader',
+  'search',
+  'copyright',
+  'recaptchaV3Key',
+  'reaction',
+]);
 
 const sortKeyMap: Record<WalineCommentSorting, SortKey> = {
   latest: 'insertedAt_desc',
@@ -481,7 +146,7 @@ const count = ref(0);
 const page = ref(1);
 const totalPages = ref(0);
 
-const config = computed(() => getConfig(props));
+const config = computed(() => getConfig(props as WalineProps));
 
 // eslint-disable-next-line vue/no-ref-object-destructure
 const commentSorting = ref(config.value.commentSorting);
@@ -674,6 +339,7 @@ provide('config', config);
 
 onMounted(() => {
   watch(
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-return
     () => [props.serverURL, props.path],
     () => refresh(),
     { immediate: true }

package/src/styles/card.scss

@@ -11,7 +11,7 @@
 
   .wl-card {
     .wl-item {
-      padding-right: 0;
+      padding-inline-end: 0;
     }
   }
 
@@ -19,7 +19,7 @@
     --avatar-size: var(--waline-avatar-size);
 
     position: relative;
-    margin-right: 0.75em;
+    margin-inline-end: 0.75em;
 
     @media (max-width: 720px) {
       --avatar-size: var(--waline-m-avatar-size);
@@ -35,7 +35,7 @@
     .verified-icon {
       position: absolute;
       top: calc(var(--avatar-size) * 3 / 4);
-      left: calc(var(--avatar-size) * 3 / 4);
+      inset-inline-start: calc(var(--avatar-size) * 3 / 4);
 
       border-radius: 50%;
 
@@ -52,7 +52,7 @@
   border-bottom: 1px dashed var(--waline-border-color);
 
   &:first-child {
-    margin-left: 1em;
+    margin-inline-start: 1em;
   }
 
   .wl-head {
@@ -65,7 +65,7 @@
 
     display: inline-block;
 
-    margin-right: 0.5em;
+    margin-inline-end: 0.5em;
 
     font-weight: bold;
     font-size: 0.875em;
@@ -86,7 +86,7 @@
   .wl-badge {
     display: inline-block;
 
-    margin-right: 1em;
+    margin-inline-end: 1em;
     padding: 0 0.3em;
     border: 1px solid var(--waline-badge-color);
     border-radius: 4px;
@@ -97,7 +97,7 @@
   }
 
   .wl-time {
-    margin-right: 0.875em;
+    margin-inline-end: 0.875em;
     color: var(--waline-info-color);
     font-size: 0.75em;
   }
@@ -109,7 +109,7 @@
     > span {
       display: inline-block;
 
-      margin-right: 0.25em;
+      margin-inline-end: 0.25em;
       padding: 2px 4px;
       border-radius: 0.2em;
 
@@ -128,6 +128,10 @@
   .wl-comment-actions {
     float: right;
     line-height: 1;
+
+    [dir='rtl'] & {
+      float: left;
+    }
   }
 
   .wl-delete,
@@ -179,7 +183,7 @@
         position: absolute;
         top: 0;
         bottom: 3.15em;
-        left: 0;
+        inset-inline-start: 0;
         z-index: 999;
 
         display: block;
@@ -194,7 +198,7 @@
 
         position: absolute;
         bottom: 0;
-        left: 0;
+        inset-inline-start: 0;
         z-index: 999;
 
         display: block;
@@ -232,19 +236,19 @@
       border-radius: 0;
 
       &:first-child {
-        border-right: 0;
+        border-inline-end: 0;
         border-radius: 0.5em 0 0 0.5em;
       }
 
       &:last-child {
-        border-left: 0;
+        border-inline-start: 0;
         border-radius: 0 0.5em 0.5em 0;
       }
     }
   }
 
   .wl-quote {
-    border-left: 1px dashed rgb(237 237 237 / 50%);
+    border-inline-start: 1px dashed rgb(237 237 237 / 50%);
 
     .wl-user {
       --avatar-size: var(--waline-m-avatar-size);

package/src/styles/emoji.scss

@@ -1,7 +1,7 @@
 .wl-emoji-popup {
   position: absolute;
   top: 100%;
-  left: 1.25em;
+  inset-inline-start: 1.25em;
   z-index: 10;
 
   max-width: 526px;

package/src/styles/gif.scss

@@ -1,7 +1,7 @@
 .wl-gif-popup {
   position: absolute;
   top: 100%;
-  left: 1.25em;
+  inset-inline-start: 1.25em;
   z-index: 10;
 
   width: calc(100% - 3em);

package/src/styles/highlight.scss

@@ -13,6 +13,7 @@
     line-height: 1.4;
 
     code {
+      direction: ltr;
       padding: 0;
       border-radius: 0;
       background: transparent !important;