fix: bugs related to frappe-ui update

pratikb64 · pratikb64 · commit e2a2d29b843a · 2025-12-03T12:19:42.000Z
diff --git a/desk/src/components/SelectDropdown.vue b/desk/src/components/SelectDropdown.vue
@@ -16,7 +16,7 @@
     </template>
     <template #body="{ togglePopover }">
       <div
-        class="p-1 text-ink-gray-6 top-1 absolute w-full bg-white shadow-2xl rounded"
+        class="p-1 text-ink-gray-6 top-1 absolute w-44 bg-white shadow-2xl rounded"
         :class="bodyClass"
       >
         <div class="max-h-52 overflow-y-auto">
@@ -56,15 +56,14 @@
 
 <script setup lang="ts">
 import { Button, FeatherIcon, Popover } from "frappe-ui";
-import { PopoverProps } from "frappe-ui/src/components/Popover/types";
 
 const model = defineModel();
 
 interface Props {
   options: Array<{ value: string; label: string }>;
   targetClass?: string;
   bodyClass?: string;
-  placement?: PopoverProps["placement"];
+  placement?: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
diff --git a/desk/src/components/Settings/Assignment Rules/AssignmentRuleListItem.vue b/desk/src/components/Settings/Assignment Rules/AssignmentRuleListItem.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="grid grid-cols-11 items-center gap-4 cursor-pointer hover:bg-gray-50 rounded"
+    class="grid grid-cols-12 items-center gap-4 cursor-pointer hover:bg-gray-50 rounded"
   >
     <div
       @click="assignmentRulesActiveScreen = { screen: 'view', data: data }"
@@ -14,13 +14,21 @@
         {{ data.description }}
       </div>
     </div>
-    <div class="col-span-2">
-      <Select
-        class="w-max bg-transparent -ml-2 border-0 text-ink-gray-6 focus-visible:!ring-0 bg-none"
-        :options="priorityOptions"
+    <div class="col-span-3">
+      <select
+        class="w-full h-7 text-base hover:bg-surface-gray-3 rounded-md p-0 pl-2 pr-5 bg-transparent -ml-2 border-0 text-ink-gray-8 focus-visible:!ring-0 bg-none truncate"
         v-model="data.priority"
         @update:modelValue="onPriorityChange"
-      />
+        @change="onPriorityChange"
+      >
+        <option
+          v-for="option in priorityOptions"
+          :key="option.value"
+          :value="option.value"
+        >
+          {{ option.label }}
+        </option>
+      </select>
     </div>
     <div class="flex justify-between items-center w-full pr-2 col-span-2">
       <div>
diff --git a/desk/src/components/Settings/Assignment Rules/AssignmentRulesListView.vue b/desk/src/components/Settings/Assignment Rules/AssignmentRulesListView.vue
@@ -31,9 +31,9 @@
       />
     </div>
     <div v-else>
-      <div class="grid grid-cols-11 items-center gap-4 text-sm text-gray-600">
+      <div class="grid grid-cols-12 items-center gap-4 text-sm text-gray-600">
         <div class="col-span-7 ml-2">{{ __("Assignment rule") }}</div>
-        <div class="col-span-2">{{ __("Priority") }}</div>
+        <div class="col-span-3">{{ __("Priority") }}</div>
         <div class="col-span-2">{{ __("Enabled") }}</div>
       </div>
       <hr class="mt-2 mx-2" />
diff --git a/desk/src/components/Settings/General/components/TicketSettings.vue b/desk/src/components/Settings/General/components/TicketSettings.vue
@@ -35,34 +35,37 @@
           class="grid grid-cols-2 gap-4 mt-3"
           v-if="settingsData.restrictTicketsByAgentGroup"
         >
-          <div
-            class="flex items-start sm:items-center gap-2"
-            @click="
-              () => {
-                settingsData.doNotRestrictTicketsWithoutAnAgentGroup =
-                  !settingsData.doNotRestrictTicketsWithoutAnAgentGroup;
-              }
-            "
-          >
-            <Checkbox
-              :model-value="
-                settingsData.doNotRestrictTicketsWithoutAnAgentGroup
-              "
-            />
-            <FormLabel :label="__('Do not restrict tickets without a team')" />
+          <div class="flex items-start sm:items-center gap-2">
+            <div class="inline-flex space-x-2 rounded transition">
+              <input
+                class="rounded-sm mt-[1px] bg-surface-white border-outline-gray-4 text-ink-gray-9 hover:border-outline-gray-5 focus:ring-offset-0 focus:border-outline-gray-8 active:border-outline-gray-6 transition hover:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 active:bg-surface-gray-2 w-3.5 h-3.5"
+                type="checkbox"
+                id="doNotRestrictTicketsWithoutAnAgentGroup"
+                v-model="settingsData.doNotRestrictTicketsWithoutAnAgentGroup"
+              />
+              <label
+                class="block text-sm font-medium text-ink-gray-8 select-none"
+                for="doNotRestrictTicketsWithoutAnAgentGroup"
+              >
+                {{ __("Do not restrict tickets without a team") }}
+              </label>
+            </div>
           </div>
-          <div
-            class="flex items-start sm:items-center gap-2"
-            @click="
-              () => {
-                settingsData.assignWithinTeam = !settingsData.assignWithinTeam;
-              }
-            "
-          >
-            <Checkbox :model-value="settingsData.assignWithinTeam" />
-            <FormLabel
-              :label="__('Restrict agent assignment to selected team')"
-            />
+          <div class="flex items-start sm:items-center gap-2">
+            <div class="inline-flex space-x-2 rounded transition">
+              <input
+                class="rounded-sm mt-[1px] bg-surface-white border-outline-gray-4 text-ink-gray-9 hover:border-outline-gray-5 focus:ring-offset-0 focus:border-outline-gray-8 active:border-outline-gray-6 transition hover:shadow-sm focus:ring-0 focus-visible:ring-2 focus-visible:ring-outline-gray-3 active:bg-surface-gray-2 w-3.5 h-3.5"
+                type="checkbox"
+                id="assignWithinTeam"
+                v-model="settingsData.assignWithinTeam"
+              />
+              <label
+                class="block text-sm font-medium text-ink-gray-8 select-none"
+                for="assignWithinTeam"
+              >
+                {{ __("Restrict agent assignment to selected team") }}
+              </label>
+            </div>
           </div>
         </div>
       </div>
@@ -92,7 +95,7 @@
             }
           "
           target-class="max-w-40"
-          placement="bottom-end"
+          placement="bottom-start"
         />
       </div>
       <div class="flex items-center justify-between">
@@ -128,7 +131,7 @@
           :options="ticketTypeList.data"
           v-model="settingsData.defaultTicketType"
           target-class="max-w-40"
-          placement="bottom-end"
+          placement="bottom-start"
         />
       </div>
       <div>
@@ -160,7 +163,7 @@
                 }
               "
               target-class="w-full"
-              placement="bottom-end"
+              placement="bottom-start"
             />
           </div>
           <div class="flex flex-col gap-1.5">
diff --git a/desk/src/components/Settings/Sla/SlaPriorityListItem.vue b/desk/src/components/Settings/Sla/SlaPriorityListItem.vue
@@ -37,12 +37,19 @@
           </template>
         </Popover>
       </div>
-      <div v-else>
-        <Select
-          class="w-full bg-transparent cursor-pointer border-0 focus-visible:!ring-0 bg-none"
-          :options="priorityOptions"
+      <div v-else class="ml-2">
+        <select
+          class="w-full h-7 text-base hover:bg-surface-gray-3 rounded-md p-0 pl-2 pr-5 bg-transparent -ml-2 border-0 text-ink-gray-8 focus-visible:!ring-0 bg-none truncate"
           v-model="props.row[column.key]"
-        />
+        >
+          <option
+            v-for="option in priorityOptions"
+            :key="option.value"
+            :value="option.value"
+          >
+            {{ option.label }}
+          </option>
+        </select>
       </div>
     </div>
     <div class="flex justify-end">
@@ -63,7 +70,7 @@
 import DurationPicker from "@/components/frappe-ui/DurationPicker.vue";
 import { slaData } from "@/stores/sla";
 import { ConfirmDelete } from "@/utils";
-import { Button, Checkbox, Dropdown, Popover, Select } from "frappe-ui";
+import { Button, Checkbox, Dropdown, Popover } from "frappe-ui";
 import { inject, ref } from "vue";
 import EditResponseResolutionModal from "./Modals/EditResponseResolutionModal.vue";
 import { formatTimeHMS } from "./utils";
diff --git a/desk/src/components/Settings/Sla/SlaWorkDaysListItem.vue b/desk/src/components/Settings/Sla/SlaWorkDaysListItem.vue
@@ -13,12 +13,19 @@
       <div v-if="column.key === 'start_time' || column.key === 'end_time'">
         {{ formatTime(props.row[column.key]) }}
       </div>
-      <div v-else>
-        <Select
-          class="bg-transparent cursor-pointer border-0 focus-visible:!ring-0 bg-none"
-          :options="workDayOptions"
+      <div v-else class="ml-2">
+        <select
+          class="w-full h-7 text-base hover:bg-surface-gray-3 rounded-md p-0 pl-2 pr-5 bg-transparent -ml-2 border-0 text-ink-gray-8 focus-visible:!ring-0 bg-none truncate"
           v-model="props.row[column.key]"
-        />
+        >
+          <option
+            v-for="option in workDayOptions"
+            :key="option.value"
+            :value="option.value"
+          >
+            {{ option.label }}
+          </option>
+        </select>
       </div>
     </div>
     <div class="flex justify-end">
@@ -40,7 +47,7 @@
 
 <script setup lang="ts">
 import { ref } from "vue";
-import { Button, Dropdown, Select } from "frappe-ui";
+import { Button, Dropdown } from "frappe-ui";
 import WorkDayModal from "./Modals/WorkDayModal.vue";
 import { ConfirmDelete, getGridTemplateColumnsForTable } from "@/utils";
 import { slaData } from "@/stores/sla";
