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

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

@@ -4,6 +4,7 @@ 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<{
@@ -11,7 +12,8 @@ const emit = defineEmits<{
 }>()
 
 const isOpen = ref(false)
-const inputRef = ref<any>(null)
+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
@@ -27,7 +29,7 @@ const timeOptions = computed(() => {
   options.push('23:59')
 
   // Filter out times earlier than minTime if provided
-  if (props.minTime) {
+  if (props.minTime && props.restrictMinTime !== false) {
     return options.filter((time) => isTimeGreaterOrEqual(time, props.minTime!))
   }
 
@@ -59,7 +61,7 @@ function selectTime(time: string) {
 
 function handleClickOutside(event: MouseEvent) {
   const target = event.target as Node
-  const wrapperElement = inputRef.value?.$el || inputRef.value
+  const wrapperElement = wrapperRef.value
 
   if (
     dropdownRef.value &&
@@ -77,15 +79,18 @@ function handleFocus() {
 
 function toggleDropdown(event?: Event) {
   event?.stopPropagation()
+  const willOpen = !isOpen.value
+
   // Close all other open dropdowns by dispatching a global event
-  if (!isOpen.value) {
+  if (willOpen) {
     window.dispatchEvent(new CustomEvent('closeTimePickers'))
   }
-  isOpen.value = !isOpen.value
+  isOpen.value = willOpen
 
   // Scroll to selected time when opening
-  if (isOpen.value) {
+  if (willOpen) {
     nextTick(() => {
+      inputRef.value?.focus()
       scrollToSelectedTime()
     })
   }
@@ -95,28 +100,101 @@ function scrollToSelectedTime() {
   const scrollContainer = dropdownRef.value?.querySelector('.overflow-y-auto')
   if (!scrollContainer) return
 
-  const selectedElement = scrollContainer.querySelector('[data-selected="true"]')
+  const selectedElement = scrollContainer.querySelector(
+    '[data-selected="true"]'
+  ) as HTMLElement | null
   if (selectedElement) {
-    selectedElement.scrollIntoView({ block: 'center' })
+    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 handleInputValue(value: string) {
-  let formattedValue = value.replace(/[^\d:]/g, '')
+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
+  }
 
-  // Auto-format as user types
-  if (formattedValue.length === 2 && !formattedValue.includes(':')) {
-    formattedValue = formattedValue + ':'
+  if (!/^\d$/.test(event.key)) {
+    event.preventDefault()
+    return
   }
 
-  // Limit to HH:MM format
-  if (formattedValue.length > 5) {
-    formattedValue = formattedValue.slice(0, 5)
+  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
 }
@@ -133,26 +211,32 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <div class="relative w-full">
-    <div @click="toggleDropdown" class="cursor-pointer relative">
-      <FmTextField
+  <div class="relative">
+    <div ref="wrapperRef" @click="focusInput" class="relative inline-flex w-[132px] max-w-full">
+      <input
         ref="inputRef"
-        :model-value="displayValue"
-        @update:model-value="handleInputValue"
+        :value="displayValue"
+        @input="handleInput"
+        @keydown="handleKeydown"
+        @paste="handlePaste"
         @focus="handleFocus"
         placeholder="HH:MM"
         class="time-picker-field"
-        :class="{
-          focused: isOpen
-        }"
         maxlength="5"
-      >
-      </FmTextField>
-      <FmIcon
-        class="absolute right-1 transition-all duration-200"
-        name="chevron_right"
-        :class="{ 'rotate-[-90deg] top-[4px]': isOpen, 'rotate-[90deg] top-[5px]': !isOpen }"
+        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
@@ -199,33 +283,29 @@ onUnmounted(() => {
   background: #9ca3af;
 }
 
-/* Override FmTextField styling for orange theme */
-.time-picker-field :deep(.fm-text-field-input) {
-  width: 140px !important;
-  border-width: 2px;
-  border-radius: 0.75rem;
-  padding: 12px 16px;
-  font-size: 1.125rem;
-  transition: all 0.2s;
-}
-
-.time-picker-field :deep(.fm-text-field-input):not(:focus):not(:focus-within) {
+.time-picker-field {
+  width: 100%;
+  height: 40px;
+  border-width: 1.5px;
+  border-style: solid;
   border-color: rgb(209 213 219);
-  /* gray-300 */
+  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 :deep(.fm-text-field-input):not(:focus):not(:focus-within):hover {
+.time-picker-field:hover {
   border-color: rgb(156 163 175);
-  /* gray-400 */
 }
 
-.time-picker-field.focused :deep(.fm-text-field-input),
-.time-picker-field :deep(.fm-text-field-input):focus,
-.time-picker-field :deep(.fm-text-field-input):focus-within {
+.time-picker-field:focus {
   border-color: rgb(249 115 22) !important;
-  /* orange-500 */
   background-color: rgb(255 247 237) !important;
-  /* orange-50 */
 }
 </style>