@waline/client 2.15.5 → 2.15.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.15.5",
+  "version": "2.15.6",
   "description": "client for waline comment system",
   "keywords": [
     "valine",
@@ -125,18 +125,18 @@
     "@vueuse/core": "^10.1.2",
     "autosize": "^6.0.1",
     "marked": "^4.3.0",
-    "vue": "^3.3.2"
+    "vue": "^3.3.4"
   },
   "devDependencies": {
-    "@babel/core": "7.21.8",
-    "@babel/preset-env": "7.21.5",
+    "@babel/core": "7.22.1",
+    "@babel/preset-env": "7.22.2",
     "@giphy/js-types": "4.4.0",
     "@types/autosize": "4.0.1",
-    "@types/marked": "4.3.0",
+    "@types/marked": "4.3.1",
     "@vitejs/plugin-vue": "4.2.3",
     "recaptcha-v3": "1.10.0",
     "user-agent-data-types": "0.3.1",
-    "vite": "4.3.6"
+    "vite": "4.3.9"
   },
   "engines": {
     "node": ">=14"

package/src/components/WalineComment.vue

@@ -14,7 +14,7 @@
         <li
           v-for="item in sortingMethods"
           :key="item"
-          :class="[item === commentSorting ? 'active' : '']"
+          :class="[item === commentSortingRef ? 'active' : '']"
           @click="onSortByChange(item)"
         >
           {{ i18n[item] }}
@@ -150,7 +150,7 @@ const totalPages = ref(0);
 const config = computed(() => getConfig(props as WalineProps));
 
 // eslint-disable-next-line vue/no-ref-object-destructure
-const commentSorting = ref(config.value.commentSorting);
+const commentSortingRef = ref(config.value.commentSorting);
 
 const data = ref<WalineComment[]>([]);
 const reply = ref<WalineComment | null>(null);
@@ -177,7 +177,7 @@ const getCommentData = (pageNumber: number): void => {
     lang: config.value.lang,
     path,
     pageSize,
-    sortBy: sortKeyMap[commentSorting.value],
+    sortBy: sortKeyMap[commentSortingRef.value],
     page: pageNumber,
     signal: controller.signal,
     token: userInfo.value?.token,
@@ -208,8 +208,8 @@ const refresh = (): void => {
 };
 
 const onSortByChange = (item: WalineCommentSorting): void => {
-  if (commentSorting.value !== item) {
-    commentSorting.value = item;
+  if (commentSortingRef.value !== item) {
+    commentSortingRef.value = item;
     refresh();
   }
 };

package/src/composables/turnstile.ts

@@ -8,6 +8,7 @@ interface TurnstileOptions {
 }
 interface TurnstileInstance {
   ready: (fn: () => void) => void;
+  excute: (className: string, options?: TurnstileOptions) => void;
   render: (className: string, options?: TurnstileOptions) => void;
 }
 
@@ -22,31 +23,28 @@ interface Turnstile {
 }
 
 export const useTurnstile = (key: string): Turnstile => {
-  const execute = (action: string): Promise<string> =>
-    new Promise((resolve) => {
-      useScriptTag(
-        'https://challenges.cloudflare.com/turnstile/v0/api.js',
-        () => {
-          const turnstile = window?.turnstile;
-
-          const options: TurnstileOptions = {
-            sitekey: key,
-            action,
-            size: 'compact',
-            callback(token: string): void {
-              resolve(token);
-            },
-          };
-
-          turnstile?.ready(() =>
-            turnstile?.render('.wl-captcha-container', options)
-          );
-        },
-        {
-          async: false,
-        }
-      );
+  const execute = async (action: string): Promise<string> => {
+    const { load } = useScriptTag(
+      'https://challenges.cloudflare.com/turnstile/v0/api.js',
+      undefined,
+      { async: false }
+    );
+
+    await load();
+
+    const turnstile = window?.turnstile;
+
+    return new Promise((resolve) => {
+      turnstile?.ready(() => {
+        turnstile?.render('.wl-captcha-container', {
+          sitekey: key,
+          action,
+          size: 'compact',
+          callback: resolve,
+        });
+      });
     });
+  };
 
   return { execute };
 };

package/src/styles/card.scss

@@ -5,7 +5,7 @@
     position: relative;
     margin-inline-end: 0.75em;
 
-    @media (max-width: 720px) {
+    @media (width <= 720px) {
       --avatar-size: var(--waline-m-avatar-size);
     }
 

package/src/styles/panel.scss

@@ -49,7 +49,7 @@
   border: var(--waline-border);
   border-radius: var(--waline-avatar-radius);
 
-  @media (max-width: 720px) {
+  @media (width <= 720px) {
     width: var(--waline-m-avatar-size);
     height: var(--waline-m-avatar-size);
   }
@@ -92,7 +92,7 @@
   border-top-left-radius: 0.75em;
   border-top-right-radius: 0.75em;
 
-  @media (max-width: 580px) {
+  @media (width <= 580px) {
     display: block;
   }
 
@@ -125,7 +125,7 @@
   flex: 1;
 
   &:not(:last-child) {
-    @media (max-width: 580px) {
+    @media (width <= 580px) {
       border-bottom: 2px dashed var(--waline-border-color);
     }
   }
@@ -137,7 +137,7 @@
   .wl-header-2 & {
     width: 50%;
 
-    @media (max-width: 580px) {
+    @media (width <= 580px) {
       flex: 0;
       width: 100%;
     }
@@ -146,7 +146,7 @@
   .wl-header-3 & {
     width: 33.33%;
 
-    @media (max-width: 580px) {
+    @media (width <= 580px) {
       width: 100%;
     }
   }

package/src/styles/reaction.scss

@@ -27,7 +27,7 @@
 
   list-style-type: none;
 
-  @media (max-width: 580px) {
+  @media (width <= 580px) {
     gap: 12px;
   }
 
@@ -54,7 +54,7 @@
   width: 42px;
   height: 42px;
 
-  @media (max-width: 580px) {
+  @media (width <= 580px) {
     width: 32px;
     height: 32px;
   }