add password in admin

src/components/owner/HmTimePickers.vue

@@ -1,35 +1,92 @@
 <template>
-  <div class="flex min-w-0 flex-1 items-center gap-1 rounded-xl border border-border bg-surface-2 px-2 py-2">
-    <select
-      :value="hour"
-      class="min-w-0 flex-1 appearance-none bg-transparent text-center text-lg font-semibold tabular-nums outline-none"
-      @change="onHour(($event.target as HTMLSelectElement).value)"
+  <div ref="rootRef" class="relative min-w-0 flex-1">
+    <button
+      type="button"
+      class="flex w-full items-center justify-center rounded-xl border border-border bg-surface-2 px-2 py-2.5 transition hover:border-brand-500/40"
+      :aria-expanded="open"
+      @click.stop="open = !open"
     >
-      <option v-for="h in hours" :key="h" :value="h">{{ h }}</option>
-    </select>
-    <span class="font-semibold text-muted">:</span>
-    <select
-      :value="minute"
-      class="min-w-0 flex-1 appearance-none bg-transparent text-center text-lg font-semibold tabular-nums outline-none"
-      @change="onMinute(($event.target as HTMLSelectElement).value)"
+      <span class="text-lg font-semibold tabular-nums text-text" dir="ltr">
+        {{ hour }}:{{ minute }}
+      </span>
+    </button>
+
+    <div
+      v-if="open"
+      class="absolute inset-x-0 top-full z-50 mt-1 overflow-hidden rounded-xl border border-border bg-surface shadow-lg"
+      @click.stop
     >
-      <option v-for="m in minutes" :key="m" :value="m">{{ m }}</option>
-    </select>
+      <div class="flex">
+        <div class="min-w-0 flex-1 border-e border-border">
+          <p class="border-b border-border py-1 text-center text-xs text-muted">ساعت</p>
+          <ul class="max-h-36 overflow-y-auto overscroll-contain">
+            <li v-for="h in hours" :key="h">
+              <button
+                type="button"
+                class="w-full px-2 py-2 text-center text-sm tabular-nums transition"
+                :class="
+                  h === hour
+                    ? 'bg-brand-500/15 font-semibold text-brand-700 dark:text-brand-500'
+                    : 'text-text hover:bg-surface-3'
+                "
+                @click="pickHour(h)"
+              >
+                {{ h }}
+              </button>
+            </li>
+          </ul>
+        </div>
+        <div class="min-w-0 flex-1">
+          <p class="border-b border-border py-1 text-center text-xs text-muted">دقیقه</p>
+          <ul class="max-h-36 overflow-y-auto overscroll-contain">
+            <li v-for="m in minutes" :key="m">
+              <button
+                type="button"
+                class="w-full px-2 py-2 text-center text-sm tabular-nums transition"
+                :class="
+                  m === minute
+                    ? 'bg-brand-500/15 font-semibold text-brand-700 dark:text-brand-500'
+                    : 'text-text hover:bg-surface-3'
+                "
+                @click="pickMinute(m)"
+              >
+                {{ m }}
+              </button>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
 <script setup lang="ts">
+import { onMounted, onUnmounted, ref } from 'vue';
+
 const hours = Array.from({ length: 24 }, (_, i) => String(i).padStart(2, '0'));
 const minutes = Array.from({ length: 60 }, (_, i) => String(i).padStart(2, '0'));
 
 const hour = defineModel<string>('hour', { required: true });
 const minute = defineModel<string>('minute', { required: true });
 
-function onHour(v: string) {
+const open = ref(false);
+const rootRef = ref<HTMLElement | null>(null);
+
+function pickHour(v: string) {
   hour.value = v;
 }
 
-function onMinute(v: string) {
+function pickMinute(v: string) {
   minute.value = v;
 }
+
+function onDocumentClick(e: MouseEvent) {
+  if (!open.value || !rootRef.value) return;
+  if (!rootRef.value.contains(e.target as Node)) {
+    open.value = false;
+  }
+}
+
+onMounted(() => document.addEventListener('click', onDocumentClick));
+onUnmounted(() => document.removeEventListener('click', onDocumentClick));
 </script>

src/components/owner/TimeRangeList.vue

@@ -6,12 +6,12 @@
         :key="idx"
         class="flex items-center gap-3 rounded-2xl border border-border bg-surface-3 px-3 py-3"
       >
-        <div class="flex flex-1 items-center justify-center gap-2" dir="ltr">
-          <span class="text-2xl font-semibold tabular-nums text-text">
+        <div class="flex flex-1 items-center justify-center gap-2">
+          <span class="text-2xl font-semibold tabular-nums text-text" dir="ltr">
             {{ range.startTime }}
           </span>
-          <span class="text-muted">–</span>
-          <span class="text-2xl font-semibold tabular-nums text-text">
+          <span class="text-muted">تا</span>
+          <span class="text-2xl font-semibold tabular-nums text-text" dir="ltr">
             {{ range.endTime }}
           </span>
         </div>
@@ -32,9 +32,10 @@
 
     <div class="rounded-2xl border border-dashed border-brand-500/40 bg-brand-500/5 p-3">
       <p class="mb-2 text-xs font-medium text-muted">بازه جدید</p>
-      <div class="flex items-center gap-2" dir="ltr">
+      <div class="flex items-center gap-2">
+        <span class="shrink-0 text-xs font-medium text-muted">از</span>
         <HmTimePickers v-model:hour="startH" v-model:minute="startM" />
-        <span class="text-muted">تا</span>
+        <span class="shrink-0 text-xs font-medium text-muted">تا</span>
         <HmTimePickers v-model:hour="endH" v-model:minute="endM" />
       </div>
       <p v-if="localError" class="mt-2 text-xs text-red-600">{{ localError }}</p>

src/styles/main.css

@@ -32,4 +32,18 @@
   #app {
     @apply min-h-dvh;
   }
+
+  select {
+    @apply text-text;
+    color-scheme: light;
+  }
+
+  .dark select {
+    color-scheme: dark;
+  }
+
+  select option {
+    background-color: var(--color-surface-2);
+    color: var(--color-text);
+  }
 }