From 790c76be56e490f13e45000bfefc10719b225647 Mon Sep 17 00:00:00 2001
From: Khafid Prayoga <khafidp@pm.me>
Date: Fri, 12 Sep 2025 15:26:23 +0700
Subject: [PATCH] style(form/select): improve select component styling and
 focus state

- Add focus outline and ring styles to SelectTrigger
- Conditionally apply text color based on modelValue
- Simplify SelectItem template structure
---
 app/components/pub/custom-ui/form/select.vue | 13 +++++--------
 1 file changed, 5 insertions(+), 8 deletions(-)

diff --git a/app/components/pub/custom-ui/form/select.vue b/app/components/pub/custom-ui/form/select.vue
index 53911bb8..ec5f882c 100644
--- a/app/components/pub/custom-ui/form/select.vue
+++ b/app/components/pub/custom-ui/form/select.vue
@@ -54,8 +54,10 @@ function onValueChange(value: string) {
 
 <template>
   <SelectRoot :model-value="modelValue" @update:model-value="onValueChange">
-    <SelectTrigger :class="cn('w-full', props.class)">
-      <SelectValue :placeholder="placeholder || 'Pilih item'" />
+    <SelectTrigger :class="cn('w-full focus:outline-none focus:ring-1 focus:ring-black bg-white', props.class)">
+      <SelectValue :placeholder="placeholder || 'Pilih item'" :class="cn(
+        props.modelValue ? 'text-black' : 'text-muted-foreground',
+      )" />
     </SelectTrigger>
 
     <SelectContent>
@@ -64,12 +66,7 @@ function onValueChange(value: string) {
           {{ label }}
         </SelectLabel>
 
-        <SelectItem
-          v-for="item in sortedItems"
-          :key="item.value"
-          :value="item.value"
-          class="cursor-pointer"
-        >
+        <SelectItem v-for="item in sortedItems" :key="item.value" :value="item.value" class="cursor-pointer">
           <div class="flex items-center justify-between w-full">
             <span>{{ item.label }}</span>
             <span v-if="item.code" class="text-xs text-muted-foreground ml-2">