From 5c7328c84c02cfa7b36ae71e375ea99d7b7086a8 Mon Sep 17 00:00:00 2001
From: Shyam-Chen <shyamchen1994@gmail.com>
Date: Tue, 5 Nov 2024 10:18:19 +0800
Subject: [PATCH] 1,583rd Commit

---
 ui/src/components/table/Table.vue          |  8 ++++----
 ui/src/components/text-field/TextField.vue | 23 +++++++++++++++++-----
 2 files changed, 22 insertions(+), 9 deletions(-)

diff --git a/ui/src/components/table/Table.vue b/ui/src/components/table/Table.vue
index c04ca60a..af1648f2 100644
--- a/ui/src/components/table/Table.vue
+++ b/ui/src/components/table/Table.vue
@@ -84,12 +84,10 @@ const flux = reactive({
   rowsPerPage: 10,
   currentPage: 1,
   previousPage() {
-    if (flux.currentPage === 1) return;
     flux.currentPage -= 1;
     flux._updateChange();
   },
   nextPage() {
-    if (flux.currentPage === Math.ceil(countRef.value / flux.rowsPerPage)) return;
     flux.currentPage += 1;
     flux._updateChange();
   },
@@ -429,7 +427,7 @@ watchEffect(
           :label="locale.previousPage || 'Previous'"
           variant="text"
           color="secondary"
-          :disabled="loading"
+          :disabled="!countRef || flux.currentPage === 1 || loading"
           @click="flux.previousPage"
         />
         <Button
@@ -437,7 +435,9 @@ watchEffect(
           append="i-material-symbols-chevron-right-rounded"
           variant="text"
           color="secondary"
-          :disabled="loading"
+          :disabled="
+            !countRef || flux.currentPage === Math.ceil(countRef / flux.rowsPerPage) || loading
+          "
           @click="flux.nextPage"
         />
       </div>
diff --git a/ui/src/components/text-field/TextField.vue b/ui/src/components/text-field/TextField.vue
index d7818825..213ad8c4 100644
--- a/ui/src/components/text-field/TextField.vue
+++ b/ui/src/components/text-field/TextField.vue
@@ -54,6 +54,7 @@ watch(
 );
 
 function onClear() {
+  if (props.disabled) return;
   valueModel.value = '';
   emit('clear');
 }
@@ -66,9 +67,9 @@ function onClear() {
     </template>
 
     <template #default="{ id }">
-      <div class="relative w-full">
+      <div class="TextField" :class="{ disabled }">
         <div v-if="prepend" class="TextField-Prepend" @click.stop="emit('prepend')">
-          <div :class="prepend" class="w-5 h-5"></div>
+          <div :class="prepend" class="size-5"></div>
         </div>
 
         <input
@@ -83,13 +84,13 @@ function onClear() {
         />
 
         <div v-if="append" class="TextField-Append" @click.stop="emit('append')">
-          <div :class="append" class="w-5 h-5"></div>
+          <div :class="append" class="size-5"></div>
         </div>
 
         <div
           v-if="clearable && valueModel"
           class="i-material-symbols-close-small-rounded TextField-Clear"
-          :class="{ prepend, append }"
+          :class="{ disabled, prepend, append }"
           @click.stop="onClear"
         ></div>
       </div>
@@ -98,6 +99,14 @@ function onClear() {
 </template>
 
 <style lang="scss" scoped>
+.TextField {
+  @apply relative w-full;
+
+  &.disabled {
+    @apply cursor-not-allowed opacity-60;
+  }
+}
+
 .TextField-Prepend {
   @apply absolute start-2 top-1/2 z-1 w-5 h-5 -translate-y-1/2;
 }
@@ -114,7 +123,7 @@ function onClear() {
   }
 
   &.disabled {
-    @apply cursor-not-allowed opacity-60;
+    @apply cursor-not-allowed;
   }
 
   &.prepend {
@@ -141,6 +150,10 @@ function onClear() {
 .TextField-Clear {
   @apply absolute end-2 top-1/2 z-99 w-5 h-5 -translate-y-1/2 cursor-pointer transition-transform hover:scale-125;
 
+  &.disabled {
+    @apply cursor-not-allowed;
+  }
+
   &.append {
     @apply end-8;
   }