1,583rd Commit

Shyam-Chen · Nov 5, 2024 · 5c7328c · 5c7328c
1 parent 2ff0d68
commit 5c7328c
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 9 deletions.
diff --git 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,15 +427,17 @@ watchEffect(
           :label="locale.previousPage || 'Previous'"
           variant="text"
           color="secondary"
-          :disabled="loading"
+          :disabled="!countRef || flux.currentPage === 1 || loading"
           @click="flux.previousPage"
         />
         <Button
           :label="locale.nextPage || 'Next'"
           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
@@ -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;
   }