@waline/client 2.14.4 → 2.14.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.14.4",
+  "version": "2.14.5",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -109,7 +109,7 @@
     ]
   },
   "dependencies": {
-    "@vueuse/core": "^9.9.0",
+    "@vueuse/core": "^9.10.0",
     "autosize": "^5.0.2",
     "marked": "^4.2.5",
     "vue": "^3.2.45"
@@ -125,15 +125,15 @@
     "@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": "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"

package/src/components/WalineComment.vue

@@ -84,7 +84,10 @@
 </template>
 
 <script setup lang="ts">
-/* eslint-disable vue/no-unused-properties vue/require-prop-comment vue/require-prop-types */
+/* 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';
@@ -336,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;

package/src/styles/layout.scss

@@ -20,7 +20,7 @@
   span.wl-tex {
     display: inline-block;
 
-    margin-right: 0.25em;
+    margin-inline-end: 0.25em;
     padding: 2px 4px;
     border-radius: 0.2em;
 
@@ -74,7 +74,7 @@
   padding: 0.5em 0;
   color: var(--waline-light-grey);
   font-size: var(--waline-info-font-size);
-  text-align: right;
+  text-align: end;
 }
 
 .wl-meta-head {
@@ -84,22 +84,22 @@
   padding: 0.375em;
 }
 
-ul.wl-sort {
+.wl-sort {
   margin: 0;
   list-style-type: none;
-}
 
-.wl-sort li {
-  display: inline-block;
-  color: var(--waline-info-color);
-  font-size: 0.75em;
-  cursor: pointer;
-}
+  li {
+    display: inline-block;
+    color: var(--waline-info-color);
+    font-size: 0.75em;
+    cursor: pointer;
 
-.wl-sort li + li {
-  margin-left: 1em;
-}
+    &.active {
+      color: var(--waline-theme-color);
+    }
 
-.wl-sort li.active {
-  color: var(--waline-theme-color);
+    + li {
+      margin-inline-start: 1em;
+    }
+  }
 }

package/src/styles/meta.scss

@@ -21,7 +21,7 @@ $safari-icon: '<svg viewBox="0 0 512 512" fill="#999"><path d="m274.69 274.69-37
 
     width: 1em;
     height: 1em;
-    margin-right: 2px;
+    margin-inline-end: 2px;
 
     background-position: center center;
     background-repeat: no-repeat;

package/src/styles/normalize.scss

@@ -1,6 +1,10 @@
 [data-waline] {
   font-size: var(--waline-font-size);
-  text-align: left;
+  text-align: start;
+
+  [dir='rtl'] & {
+    direction: rtl;
+  }
 
   * {
     box-sizing: content-box;
@@ -88,7 +92,7 @@
   blockquote {
     margin: 0.5em 0;
     padding: 0.5em 0 0.5em 1em;
-    border-left: 8px solid var(--waline-bq-color);
+    border-inline-start: 8px solid var(--waline-bq-color);
     color: var(--waline-dark-grey);
 
     > p {
@@ -98,7 +102,7 @@
 
   ol,
   ul {
-    margin-left: 1.25em;
+    margin-inline-start: 1.25em;
     padding: 0;
   }
 

package/src/styles/panel.scss

@@ -7,7 +7,7 @@
 .wl-close {
   position: absolute;
   top: -4px;
-  right: -4px;
+  inset-inline-end: -4px;
 
   padding: 0;
   border: none;
@@ -28,7 +28,7 @@
 .wl-logout-btn {
   position: absolute;
   top: -10px;
-  right: -10px;
+  inset-inline-end: -10px;
 
   padding: 3px;
   border: none;
@@ -275,7 +275,7 @@
   }
 
   button {
-    margin-left: 0.75em;
+    margin-inline-start: 0.75em;
 
     svg {
       display: block;

package/src/styles/reaction.scss

@@ -68,7 +68,7 @@
   .reaction-loading {
     position: absolute;
     top: -4px;
-    right: -5px;
+    inset-inline-end: -5px;
 
     width: 18px;
     height: 18px;
@@ -79,7 +79,7 @@
   .reaction-votes {
     position: absolute;
     top: -9px;
-    right: -9px;
+    inset-inline-end: -9px;
 
     min-width: 1em;
     padding: 2px;

package/src/styles/user-list.scss

@@ -37,7 +37,7 @@
 
     overflow: hidden;
 
-    margin-right: 10px;
+    margin-inline-end: 10px;
     border-radius: 4px;
 
     line-height: 0;
@@ -50,7 +50,7 @@
 
   .wl-user-badge {
     position: absolute;
-    right: 0;
+    inset-inline-end: 0;
     bottom: 0;
 
     min-width: 0.7em;
@@ -76,7 +76,7 @@
     display: inline-block;
     vertical-align: text-top;
 
-    margin-left: 0.5em;
+    margin-inline-start: 0.5em;
     padding: 0 0.3em;
     border: 1px solid var(--waline-badge-color);
     border-radius: 4px;