@waline/client 2.4.0 → 2.4.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@waline/client",
-  "version": "2.4.0",
+  "version": "2.4.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%",
@@ -86,12 +77,36 @@
     "vue": "^3.2.33"
   },
   "devDependencies": {
+    "@babel/core": "^7.17.10",
+    "@babel/preset-env": "^7.17.10",
+    "@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.31",
     "@vitejs/plugin-vue": "^2.3.2",
+    "@vue/compiler-sfc": "^3.2.33",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.72.1",
+    "rollup-plugin-dts": "^4.2.1",
+    "rollup-plugin-terser": "^7.0.2",
+    "rollup-plugin-ts": "^2.0.7",
+    "rollup-plugin-vue": "^6.0.0",
+    "typescript": "^4.6.4",
     "vite": "^2.9.8"
   },
   "engines": {
-    "node": ">=12.20.0"
+    "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/CommentCard.vue

@@ -31,31 +31,33 @@
         />
         <span class="wl-time" v-text="time" />
 
-        <button
-          class="wl-reply"
-          :class="{ active: isReplyingCurrent }"
-          :title="isReplyingCurrent ? locale.cancelReply : locale.reply"
-          @click="$emit('reply', isReplyingCurrent ? null : comment)"
-        >
-          <ReplyIcon />
-        </button>
+        <div class="wl-comment-actions">
+          <button
+            class="wl-delete"
+            v-if="isAdmin || isOwner"
+            @click="$emit('delete', comment)"
+          >
+            <DeleteIcon />
+          </button>
 
-        <button
-          class="wl-like"
-          @click="$emit('like', comment)"
-          :title="like ? locale.cancelLike : locale.like"
-        >
-          <LikeIcon :active="like" />
-          <span v-if="'like' in comment" v-text="comment.like" />
-        </button>
+          <button
+            class="wl-like"
+            @click="$emit('like', comment)"
+            :title="like ? locale.cancelLike : locale.like"
+          >
+            <LikeIcon :active="like" />
+            <span v-if="'like' in comment" v-text="comment.like" />
+          </button>
 
-        <button
-          class="wl-delete"
-          v-if="isAdmin || isOwner"
-          @click="$emit('delete', comment)"
-        >
-          <DeleteIcon />
-        </button>
+          <button
+            class="wl-reply"
+            :class="{ active: isReplyingCurrent }"
+            :title="isReplyingCurrent ? locale.cancelReply : locale.reply"
+            @click="$emit('reply', isReplyingCurrent ? null : comment)"
+          >
+            <ReplyIcon />
+          </button>
+        </div>
       </div>
       <div class="wl-meta" aria-hidden="true">
         <span v-if="comment.addr" v-text="comment.addr" />
@@ -104,6 +106,7 @@
           @reply="$emit('reply', $event)"
           @submit="$emit('submit', $event)"
           @like="$emit('like', $event)"
+          @delete="$emit('delete', $event)"
           @status="$emit('status', $event)"
           @sticky="$emit('sticky', $event)"
         />

package/src/components/Waline.vue

@@ -312,7 +312,8 @@ export default defineComponent({
         objectId: comment.objectId,
         status,
       });
-      // todo: render comment list
+
+      comment.status = status;
     };
 
     const onSticky = async (comment: WalineComment): Promise<void> => {
@@ -327,10 +328,11 @@ export default defineComponent({
         objectId: comment.objectId,
         sticky: comment.sticky ? 0 : 1,
       });
-      // todo: render comment list
+
+      comment.sticky = !comment.sticky;
     };
 
-    const onDelete = async (comment: WalineComment): Promise<void> => {
+    const onDelete = async ({ objectId }: WalineComment): Promise<void> => {
       if (!confirm('Are you sure you want to delete this comment?')) return;
 
       const { serverURL, lang } = config.value;
@@ -339,30 +341,50 @@ export default defineComponent({
         serverURL,
         lang,
         token: userInfo.value?.token,
-        objectId: comment.objectId,
+        objectId: objectId,
+      });
+
+      // delete comment from data
+      data.value.some((item, index) => {
+        if (item.objectId === objectId) {
+          data.value = data.value.filter((_item, i) => i !== index);
+
+          return true;
+        }
+
+        return item.children.some((child, childIndex) => {
+          if (child.objectId === objectId) {
+            data.value[index].children = item.children.filter(
+              (_item, i) => i !== childIndex
+            );
+
+            return true;
+          }
+
+          return false;
+        });
       });
-      // todo render comment list
     };
 
     const onLike = async (comment: WalineComment): Promise<void> => {
       const { serverURL, lang } = config.value;
-      const hasLiked = likeStorage.value.includes(comment.objectId);
+      const { objectId } = comment;
+      const hasLiked = likeStorage.value.includes(objectId);
 
       await likeComment({
         serverURL,
         lang,
-        objectId: comment.objectId,
+        objectId,
         like: !hasLiked,
       });
 
       if (hasLiked)
-        likeStorage.value = likeStorage.value.filter(
-          (id) => id !== comment.objectId
-        );
+        likeStorage.value = likeStorage.value.filter((id) => id !== objectId);
       else {
-        likeStorage.value.push(comment.objectId);
+        likeStorage.value = [...likeStorage.value, objectId];
 
-        if (likeStorage.value.length > 50) likeStorage.value.slice(-50);
+        if (likeStorage.value.length > 50)
+          likeStorage.value = likeStorage.value.slice(-50);
       }
 
       comment.like = (comment.like || 0) + (hasLiked ? -1 : 1);

package/src/composables/index.ts

@@ -1,4 +1,4 @@
 export * from './inputs';
 export * from './timeAgo';
 export * from './userInfo';
-export * from './likeStorage';
+export * from './like';

package/src/composables/{likeStorage.ts → like.ts}

@@ -8,4 +8,7 @@ export type LikeID = number | string;
 
 export type LikeRef = Ref<LikeID[]>;
 
-export const useLikeStorage = (): LikeRef => useStorage<LikeID[]>(LIKE_KEY, []);
+let likeStorage: LikeRef | null = null;
+
+export const useLikeStorage = (): LikeRef =>
+  likeStorage || (likeStorage = useStorage<LikeID[]>(LIKE_KEY, []));

package/src/composables/userInfo.ts

@@ -18,5 +18,11 @@ export const USER_KEY = 'WALINE_USER';
 
 export type UserInfoRef = Ref<UserInfo | Record<string, never>>;
 
+let userInfoStorage: UserInfoRef | null = null;
+
 export const useUserInfo = (): UserInfoRef =>
-  useStorage<UserInfo | Record<string, never>>('USER_KEY', {});
+  userInfoStorage ||
+  (userInfoStorage = useStorage<UserInfo | Record<string, never>>(
+    'USER_KEY',
+    {}
+  ));

package/src/styles/card.scss

@@ -18,13 +18,13 @@
   .wl-user {
     --avatar-size: var(--waline-avatar-size);
 
+    position: relative;
+    margin-right: 0.75em;
+
     @media (max-width: 720px) {
       --avatar-size: var(--waline-m-avatar-size);
     }
 
-    position: relative;
-    margin-right: 0.75em;
-
     img {
       width: var(--avatar-size);
       height: var(--avatar-size);
@@ -101,32 +101,6 @@
     font-size: 0.75em;
   }
 
-  .wl-delete,
-  .wl-like,
-  .wl-reply {
-    float: right;
-
-    padding: 4px;
-    border: none;
-
-    background: transparent;
-    color: var(--waline-color);
-
-    line-height: 1;
-
-    cursor: pointer;
-
-    transition: color 0.2s ease;
-
-    &:hover {
-      color: var(--waline-theme-color);
-    }
-
-    &.active {
-      color: var(--waline-active-color);
-    }
-  }
-
   .wl-meta {
     position: relative;
     line-height: 1;
@@ -154,6 +128,36 @@
     }
   }
 
+  .wl-comment-actions {
+    float: right;
+  }
+
+  .wl-delete,
+  .wl-like,
+  .wl-reply {
+    display: inline-flex;
+    align-items: center;
+    padding: 4px;
+    border: none;
+
+    background: transparent;
+    color: var(--waline-color);
+
+    line-height: 1;
+
+    cursor: pointer;
+
+    transition: color 0.2s ease;
+
+    &:hover {
+      color: var(--waline-theme-color);
+    }
+
+    &.active {
+      color: var(--waline-active-color);
+    }
+  }
+
   .wl-content {
     position: relative;
 
@@ -217,8 +221,8 @@
 
   .wl-admin-actions {
     margin: 8px 0;
-    text-align: right;
     font-size: 12px;
+    text-align: right;
   }
 
   .wl-comment-status {

package/src/styles/nomalize.scss

@@ -19,7 +19,6 @@
     color: var(--waline-theme-color);
 
     text-decoration: none;
-
     word-break: break-word;
 
     cursor: pointer;

package/src/styles/panel.scss

@@ -196,7 +196,6 @@
   .wl-content {
     min-height: 1.25em;
     padding: 0.25em;
-
     word-break: break-word;
     hyphens: auto;