fix: sort by clicking instead of select option

frontend/src/components/Icons/AscendingIcon.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-arrow-down-a-z"
+  >
+    <path d="m3 16 4 4 4-4" />
+    <path d="M7 20V4" />
+    <path d="M20 8h-5" />
+    <path d="M15 10V6.5a2.5 2.5 0 0 1 5 0V10" />
+    <path d="M15 14h5l-5 6h5" />
+  </svg>
+</template>

frontend/src/components/Icons/DesendingIcon.vue

@@ -0,0 +1,20 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width="16"
+    height="16"
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    stroke-width="1"
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    class="lucide lucide-arrow-up-z-a"
+  >
+    <path d="m3 8 4-4 4 4" />
+    <path d="M7 4v16" />
+    <path d="M15 4h5l-5 6h5" />
+    <path d="M15 20v-3.5a2.5 2.5 0 0 1 5 0V20" />
+    <path d="M20 18h-5" />
+  </svg>
+</template>

frontend/src/components/SortBy.vue

@@ -17,7 +17,7 @@
     </template>
     <template #body="{ close }">
       <div class="my-2 rounded-lg border border-gray-100 bg-white shadow-xl">
-        <div class="min-w-[352px] p-2">
+        <div class="min-w-60 p-2">
           <div
             v-if="sortValues?.size"
             id="sort-list"
@@ -26,34 +26,51 @@
             <div
               v-for="(sort, i) in sortValues"
               :key="sort.fieldname"
-              class="flex items-center gap-2"
+              class="flex items-center gap-1"
             >
               <div class="handle flex h-7 w-7 items-center justify-center">
                 <DragIcon class="h-4 w-4 cursor-grab text-gray-600" />
               </div>
-              <Autocomplete
-                class="!w-32"
-                :value="sort.fieldname"
-                :options="sortOptions.data"
-                @change="(e) => updateSort(e, i)"
-                :placeholder="__('First Name')"
-              />
-              <FormControl
-                class="!w-32"
-                type="select"
-                v-model="sort.direction"
-                :options="[
-                  { label: __('Ascending'), value: 'asc' },
-                  { label: __('Descending'), value: 'desc' },
-                ]"
-                @change="
-                  (e) => {
-                    sort.direction = e.target.value
-                    apply()
-                  }
-                "
-                :placeholder="__('Ascending')"
-              />
+              <div class="flex">
+                <Button
+                  size="md"
+                  class="rounded-r-none border-r"
+                  @click="
+                    () => {
+                      sort.direction = sort.direction == 'asc' ? 'desc' : 'asc'
+                      apply()
+                    }
+                  "
+                >
+                  <AscendingIcon v-if="sort.direction == 'asc'" class="h-4" />
+                  <DesendingIcon v-else class="h-4" />
+                </Button>
+                <Autocomplete
+                  class="!w-32"
+                  :value="sort.fieldname"
+                  :options="sortOptions.data"
+                  @change="(e) => updateSort(e, i)"
+                  :placeholder="__('First Name')"
+                >
+                  <template
+                    #target="{ togglePopover, selectedValue, displayValue }"
+                  >
+                    <Button
+                      class="flex w-full items-center justify-between rounded-l-none !text-gray-600"
+                      size="md"
+                      @click="togglePopover()"
+                    >
+                      {{ displayValue(selectedValue) }}
+                      <template #suffix>
+                        <FeatherIcon
+                          name="chevron-down"
+                          class="h-4 text-gray-600"
+                        />
+                      </template>
+                    </Button>
+                  </template>
+                </Autocomplete>
+              </div>
               <Button variant="ghost" icon="x" @click="removeSort(i)" />
             </div>
           </div>
@@ -98,6 +115,8 @@
 </template>
 
 <script setup>
+import AscendingIcon from '@/components/Icons/AscendingIcon.vue'
+import DesendingIcon from '@/components/Icons/DesendingIcon.vue'
 import NestedPopover from '@/components/NestedPopover.vue'
 import SortIcon from '@/components/Icons/SortIcon.vue'
 import DragIcon from '@/components/Icons/DragIcon.vue'

frontend/src/components/frappe-ui/Autocomplete.vue

@@ -2,7 +2,16 @@
   <Combobox v-model="selectedValue" nullable v-slot="{ open: isComboboxOpen }">
     <Popover class="w-full" v-model:show="showOptions">
       <template #target="{ open: openPopover, togglePopover }">
-        <slot name="target" v-bind="{ open: openPopover, togglePopover, isOpen: showOptions }">
+        <slot
+          name="target"
+          v-bind="{
+            open: openPopover,
+            togglePopover,
+            isOpen: showOptions,
+            selectedValue,
+            displayValue,
+          }"
+        >
           <div class="w-full">
             <button
               class="flex w-full items-center justify-between focus:outline-none"