@feedmepos/mf-order-setting 0.0.54 → 0.0.56-dev.2

package/src/views/order-settings/reservation/CustomTimePicker.vue

@@ -0,0 +1,311 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
+
+const props = defineProps<{
+  modelValue: string
+  minTime?: string // Optional minimum time (HH:MM format)
+  restrictMinTime?: boolean
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const isOpen = ref(false)
+const wrapperRef = ref<HTMLDivElement | null>(null)
+const inputRef = ref<HTMLInputElement | null>(null)
+const dropdownRef = ref<HTMLDivElement | null>(null)
+
+// Generate time options in 30-minute intervals
+const timeOptions = computed(() => {
+  const options: string[] = []
+  for (let hour = 0; hour < 24; hour++) {
+    for (let minute = 0; minute < 60; minute += 30) {
+      const timeString = `${String(hour).padStart(2, '0')}:${String(minute).padStart(2, '0')}`
+      options.push(timeString)
+    }
+  }
+
+  options.push('23:59')
+
+  // Filter out times earlier than minTime if provided
+  if (props.minTime && props.restrictMinTime !== false) {
+    return options.filter((time) => isTimeGreaterOrEqual(time, props.minTime!))
+  }
+
+  return options
+})
+
+// Helper function to compare times in HH:MM format
+function isTimeGreaterOrEqual(time1: string, time2: string): boolean {
+  const [hours1, minutes1] = time1.split(':').map(Number)
+  const [hours2, minutes2] = time2.split(':').map(Number)
+
+  const totalMinutes1 = hours1 * 60 + minutes1
+  const totalMinutes2 = hours2 * 60 + minutes2
+
+  return totalMinutes1 >= totalMinutes2
+}
+
+const displayValue = computed({
+  get: () => props.modelValue || '',
+  set: (value: string) => {
+    emit('update:modelValue', value)
+  }
+})
+
+function selectTime(time: string) {
+  displayValue.value = time
+  isOpen.value = false
+}
+
+function handleClickOutside(event: MouseEvent) {
+  const target = event.target as Node
+  const wrapperElement = wrapperRef.value
+
+  if (
+    dropdownRef.value &&
+    wrapperElement &&
+    !dropdownRef.value.contains(target) &&
+    !wrapperElement.contains(target)
+  ) {
+    isOpen.value = false
+  }
+}
+
+function handleFocus() {
+  isOpen.value = true
+}
+
+function toggleDropdown(event?: Event) {
+  event?.stopPropagation()
+  const willOpen = !isOpen.value
+
+  // Close all other open dropdowns by dispatching a global event
+  if (willOpen) {
+    window.dispatchEvent(new CustomEvent('closeTimePickers'))
+  }
+  isOpen.value = willOpen
+
+  // Scroll to selected time when opening
+  if (willOpen) {
+    nextTick(() => {
+      inputRef.value?.focus()
+      scrollToSelectedTime()
+    })
+  }
+}
+
+function scrollToSelectedTime() {
+  const scrollContainer = dropdownRef.value?.querySelector('.overflow-y-auto')
+  if (!scrollContainer) return
+
+  const selectedElement = scrollContainer.querySelector(
+    '[data-selected="true"]'
+  ) as HTMLElement | null
+  if (selectedElement) {
+    const container = scrollContainer as HTMLElement
+    const targetScrollTop =
+      selectedElement.offsetTop - container.clientHeight / 2 + selectedElement.clientHeight / 2
+    container.scrollTop = Math.max(0, targetScrollTop)
+  }
+}
+
+function formatTimeInput(value: string) {
+  const digits = value.replace(/\D/g, '').slice(0, 4)
+
+  if (!digits) {
+    return ''
+  }
+
+  let hours = digits.slice(0, 2)
+  let minutes = digits.slice(2, 4)
+
+  if (hours.length === 2) {
+    hours = String(Math.min(Number(hours), 23)).padStart(2, '0')
+  }
+
+  if (minutes.length === 1) {
+    minutes = String(Math.min(Number(minutes), 5))
+  }
+
+  if (minutes.length === 2) {
+    minutes = String(Math.min(Number(minutes), 59)).padStart(2, '0')
+  }
+
+  if (digits.length <= 2) {
+    return digits.length === 2 ? `${hours}:` : hours
+  }
+
+  return `${hours}:${minutes}`
+}
+
+function hasSelection(input: HTMLInputElement) {
+  return (input.selectionStart ?? 0) !== (input.selectionEnd ?? 0)
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.ctrlKey || event.metaKey || event.altKey) {
+    return
+  }
+
+  const allowedKeys = ['Backspace', 'Delete', 'Tab', 'ArrowLeft', 'ArrowRight', 'Home', 'End']
+  if (allowedKeys.includes(event.key)) {
+    return
+  }
+
+  if (!/^\d$/.test(event.key)) {
+    event.preventDefault()
+    return
+  }
+
+  const input = event.target as HTMLInputElement | null
+  if (!input) {
+    return
+  }
+
+  const digitCount = input.value.replace(/\D/g, '').length
+  if (digitCount >= 4 && !hasSelection(input)) {
+    event.preventDefault()
+  }
+}
+
+function handleInput(event: Event) {
+  const input = event.target as HTMLInputElement | null
+  if (!input) {
+    return
+  }
+
+  const formattedValue = formatTimeInput(input.value)
+  input.value = formattedValue
+  displayValue.value = formattedValue
+}
+
+function handlePaste(event: ClipboardEvent) {
+  event.preventDefault()
+
+  const pastedText = event.clipboardData?.getData('text') || ''
+  const formattedValue = formatTimeInput(pastedText)
+
+  displayValue.value = formattedValue
+}
+
+function focusInput() {
+  inputRef.value?.focus()
+  isOpen.value = true
+}
+
+function handleCloseTimePickers() {
+  isOpen.value = false
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+  window.addEventListener('closeTimePickers', handleCloseTimePickers)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+  window.removeEventListener('closeTimePickers', handleCloseTimePickers)
+})
+</script>
+
+<template>
+  <div class="relative">
+    <div ref="wrapperRef" @click="focusInput" class="relative inline-flex w-[132px] max-w-full">
+      <input
+        ref="inputRef"
+        :value="displayValue"
+        @input="handleInput"
+        @keydown="handleKeydown"
+        @paste="handlePaste"
+        @focus="handleFocus"
+        placeholder="HH:MM"
+        class="time-picker-field"
+        maxlength="5"
+        inputmode="numeric"
+        autocomplete="off"
+      />
+      <button
+        type="button"
+        @click.stop="toggleDropdown"
+        class="absolute inset-y-0 right-0 flex items-center pr-3 text-gray-500 hover:text-gray-700"
+      >
+        <FmIcon
+          class="text-[18px] transition-all duration-200"
+          name="chevron_right"
+          :class="{ 'rotate-[-90deg]': isOpen, 'rotate-[90deg]': !isOpen }"
+        />
+      </button>
+    </div>
+
+    <div
+      v-if="isOpen"
+      ref="dropdownRef"
+      class="absolute z-50 w-full mt-2 bg-white border border-gray-200 rounded-md shadow-lg max-h-[240px] overflow-hidden"
+    >
+      <div class="max-h-[240px] overflow-y-auto scrollbar-thin">
+        <div
+          v-for="time in timeOptions"
+          :key="time"
+          @click.stop="selectTime(time)"
+          :data-selected="time === displayValue"
+          class="px-3 py-2 text-sm cursor-pointer transition-colors hover:bg-gray-50"
+          :class="{
+            'bg-orange-50 text-orange-600 font-medium': time === displayValue
+          }"
+        >
+          {{ time }}
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Custom scrollbar for dropdown - target the scrollable container */
+.scrollbar-thin::-webkit-scrollbar {
+  width: 6px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+  border-radius: 3px;
+  margin: 4px 0;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb {
+  background: #d1d5db;
+  border-radius: 3px;
+}
+
+.scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background: #9ca3af;
+}
+
+.time-picker-field {
+  width: 100%;
+  height: 40px;
+  border-width: 1.5px;
+  border-style: solid;
+  border-color: rgb(209 213 219);
+  border-radius: 0.625rem;
+  padding: 8px 36px 8px 12px;
+  font-size: 0.95rem;
+  line-height: 1.25rem;
+  font-weight: 500;
+  transition: all 0.2s;
+  background-color: white;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.time-picker-field:hover {
+  border-color: rgb(156 163 175);
+}
+
+.time-picker-field:focus {
+  border-color: rgb(249 115 22) !important;
+  background-color: rgb(255 247 237) !important;
+}
+</style>