From 405c433ff93623813e1f043c2b797397f8fef619 Mon Sep 17 00:00:00 2001
From: Shyam-Chen <shyamchen1994@gmail.com>
Date: Thu, 21 Nov 2024 15:20:47 +0800
Subject: [PATCH] 1,592nd Commit

---
 ui/src/components/select/Select.vue        | 48 +++++++++++++++-------
 ui/src/components/text-field/TextField.vue | 20 ++++++---
 2 files changed, 49 insertions(+), 19 deletions(-)

diff --git a/ui/src/components/select/Select.vue b/ui/src/components/select/Select.vue
index 9cf46f1f..e1de4926 100644
--- a/ui/src/components/select/Select.vue
+++ b/ui/src/components/select/Select.vue
@@ -86,7 +86,7 @@ async function showPicker() {
   }
 
   // Scroll to the selected option
-  const active = panel.value?.querySelector('.Select-Item-Active') as HTMLDivElement;
+  const active = panel.value?.querySelector('.Select-Item.active') as HTMLDivElement;
   const offsetTop = props.filterable ? active?.offsetTop - 46 : active?.offsetTop;
   if (offsetTop && list.value) list.value.scrollTop = offsetTop - active.offsetHeight * 2;
 
@@ -179,7 +179,7 @@ function onKeydown(evt: KeyboardEvent) {
     hoverIndex.value += 1;
 
     if (list.value) {
-      const hover = list.value.querySelector('.Select-Item-Hover') as HTMLDivElement;
+      const hover = list.value.querySelector('.Select-Item.hover') as HTMLDivElement;
       const offsetTop = hover?.offsetTop;
       if (offsetTop) list.value.scrollTop = offsetTop - hover.offsetHeight;
     }
@@ -192,7 +192,7 @@ function onKeydown(evt: KeyboardEvent) {
     hoverIndex.value -= 1;
 
     if (list.value) {
-      const hover = list.value.querySelector('.Select-Item-Hover') as HTMLDivElement;
+      const hover = list.value.querySelector('.Select-Item.hover') as HTMLDivElement;
       const offsetTop = hover?.offsetTop;
       if (offsetTop) list.value.scrollTop = offsetTop - hover.offsetHeight;
     }
@@ -216,7 +216,7 @@ if (popover.withinPopover) {
 </script>
 
 <template>
-  <FormControl v-bind="formControlAttrs">
+  <FormControl v-bind="formControlAttrs" class="Select">
     <template #label>
       <slot></slot>
     </template>
@@ -244,8 +244,8 @@ if (popover.withinPopover) {
                 : 'i-material-symbols-arrow-drop-down-rounded'
           "
           readonly
-          class="text-ellipsis"
-          :class="{ '!opacity-100 !cursor-progress': loading }"
+          class="Select-Input"
+          :class="{ loading }"
           @clear="onClear"
           @click="showPicker"
           @append="showPicker"
@@ -273,8 +273,8 @@ if (popover.withinPopover) {
                 :key="item.value"
                 class="Select-Item"
                 :class="{
-                  'Select-Item-Hover': index === hoverIndex,
-                  'Select-Item-Active': value === item.value,
+                  hover: index === hoverIndex,
+                  active: value === item.value,
                 }"
                 @click="onSelect(item.value, item)"
                 @mouseenter="hoverIndex = index"
@@ -299,19 +299,39 @@ if (popover.withinPopover) {
 </template>
 
 <style lang="scss" scoped>
+.Select :deep(.Select-Input:not(.disabled)) {
+  @apply cursor-pointer;
+}
+
+.Select :deep(.Select-Input:not(.disabled) + .TextField-Append) {
+  @apply cursor-pointer;
+}
+
+.Select :deep(.Select-Input) {
+  @apply text-ellipsis;
+
+  &.loading {
+    @apply opacity-100 cursor-progress;
+  }
+}
+
+.Select :deep(.Select-Input.loading + .TextField-Append) {
+  @apply opacity-100 cursor-progress;
+}
+
 .Select-List {
   @apply max-h-40 overflow-auto p-2 empty:hidden;
 }
 
 .Select-Item {
   @apply px-3 py-1 cursor-pointer rounded-md whitespace-nowrap;
-}
 
-.Select-Item-Hover {
-  @apply text-primary-500 dark:text-primary-100 bg-primary-100 dark:bg-primary-600;
-}
+  &.hover {
+    @apply text-primary-500 dark:text-primary-100 bg-primary-100 dark:bg-primary-600;
+  }
 
-.Select-Item-Active {
-  @apply bg-primary-500 text-white hover:bg-primary-700 hover:text-white;
+  &.active {
+    @apply bg-primary-500 text-white hover:bg-primary-700 hover:text-white;
+  }
 }
 </style>
diff --git a/ui/src/components/text-field/TextField.vue b/ui/src/components/text-field/TextField.vue
index 213ad8c4..1ed8681f 100644
--- a/ui/src/components/text-field/TextField.vue
+++ b/ui/src/components/text-field/TextField.vue
@@ -53,6 +53,16 @@ watch(
   },
 );
 
+function onPrepend() {
+  if (props.disabled) return;
+  emit('prepend');
+}
+
+function onAppend() {
+  if (props.disabled) return;
+  emit('append');
+}
+
 function onClear() {
   if (props.disabled) return;
   valueModel.value = '';
@@ -61,14 +71,14 @@ function onClear() {
 </script>
 
 <template>
-  <FormControl v-bind="formControlAttrs">
+  <FormControl v-bind="formControlAttrs" class="TextField">
     <template #label>
       <slot></slot>
     </template>
 
     <template #default="{ id }">
-      <div class="TextField" :class="{ disabled }">
-        <div v-if="prepend" class="TextField-Prepend" @click.stop="emit('prepend')">
+      <div class="TextField-Container" :class="{ disabled }">
+        <div v-if="prepend" class="TextField-Prepend" @click.stop="onPrepend">
           <div :class="prepend" class="size-5"></div>
         </div>
 
@@ -83,7 +93,7 @@ function onClear() {
           :class="{ invalid, disabled, prepend, append, clearable }"
         />
 
-        <div v-if="append" class="TextField-Append" @click.stop="emit('append')">
+        <div v-if="append" class="TextField-Append" @click.stop="onAppend">
           <div :class="append" class="size-5"></div>
         </div>
 
@@ -99,7 +109,7 @@ function onClear() {
 </template>
 
 <style lang="scss" scoped>
-.TextField {
+.TextField-Container {
   @apply relative w-full;
 
   &.disabled {