@feedmepos/mf-order-setting 0.0.50 → 0.0.52-dev.0

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

@@ -0,0 +1,99 @@
+<script setup lang="ts">
+import { ref, computed } from 'vue'
+import { components } from '@feedmepos/ui-library';
+
+interface SelectItem {
+  label: string
+  value: string
+  icon?: 'radio' | 'checkbox'
+}
+
+const props = defineProps<{
+  modelValue: string
+  items: SelectItem[]
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const isOpen = ref(false)
+const selectRef = ref<HTMLDivElement | null>(null)
+const menuRef = ref<typeof components['FmMenu'] | null>(null);
+
+const selectedItem = computed(() => {
+  const found = props.items.find((item) => item.value === props.modelValue)
+  return found || props.items[0] || { label: 'Select...', value: '', icon: undefined }
+})
+
+function selectItem(item: SelectItem) {
+  emit('update:modelValue', item.value)
+  menuRef.value?.toggleMenu();
+}
+
+// Close dropdown when clicking outside
+function handleClickOutside(event: MouseEvent) {
+  if (selectRef.value && !selectRef.value.contains(event.target as Node)) {
+    menuRef.value?.toggleMenu();
+  }
+}
+
+// Setup click outside listener when component mounts/unmounts
+import { onMounted, onUnmounted } from 'vue'
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>
+
+<template>
+  <div class="relative w-full" ref="selectRef">
+    <!-- Use FmMenu for dropdown behavior -->
+    <FmMenu ref="menuRef" @menu-changed="(v) => isOpen = v">
+      <template #menu-button>
+        <FmField>
+          <div class="flex items-center gap-4 w-full">
+            <FmCheckbox v-if="selectedItem.icon == 'checkbox'" :value="true" :model-value="true"
+              @update:model-value="(v) => v" />
+            <div v-if="selectedItem.icon == 'radio'" class="flex items-center">
+              <FmRadio :value="true" :model-value="true" @update:model-value="(v) => v" />
+            </div>
+            <!-- Label -->
+            <span class="text-gray-900 flex-1">
+              {{ selectedItem.label }}
+            </span>
+            <FmIcon name="keyboard_arrow_down" class="text-gray-500 transition-transform duration-200 ml-2"
+              :class="{ 'rotate-180': isOpen }" />
+          </div>
+        </FmField>
+      </template>
+
+      <!-- Dropdown Menu Items -->
+      <template #default>
+        <div :style="{ width: `${selectRef?.clientWidth}px` }" class="rounded-md flex flex-col gap-4">
+          <div v-for="item in items" :key="item.value" @click="selectItem(item)"
+            class="cursor-pointer transition-colors duration-150 flex items-center p-8 rounded-sm hover:bg-orange-100">
+            <FmCheckbox v-if="item.icon == 'checkbox'" :value="true" :model-value="true" @update:model-value="(v) => v"
+              class="mr-8" />
+            <div v-if="item.icon == 'radio'" class="flex items-center">
+              <FmRadio :value="true" :model-value="true" @update:model-value="(v) => v" />
+            </div>
+            <span class="text-gray-900 flex-1"> {{ item.label }} </span>
+          </div>
+        </div>
+      </template>
+    </FmMenu>
+  </div>
+</template>
+
+<style scoped>
+/* Match FmTextField styling */
+.fm-text-field-input {
+  font-size: 1.125rem;
+  line-height: 1.75rem;
+}
+</style>

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

@@ -0,0 +1,201 @@
+<script setup lang="ts">
+import { ref, computed, onMounted, onUnmounted } from 'vue'
+
+const props = defineProps<{
+  modelValue: string
+  minTime?: string // Optional minimum time (HH:MM format)
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: string): void
+}>()
+
+const isOpen = ref(false)
+const inputRef = ref<any>(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) {
+    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 = inputRef.value?.$el || inputRef.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()
+  isOpen.value = !isOpen.value
+}
+
+function handleInputValue(value: string) {
+  let formattedValue = value.replace(/[^\d:]/g, '')
+
+  // Auto-format as user types
+  if (formattedValue.length === 2 && !formattedValue.includes(':')) {
+    formattedValue = formattedValue + ':'
+  }
+
+  // Limit to HH:MM format
+  if (formattedValue.length > 5) {
+    formattedValue = formattedValue.slice(0, 5)
+  }
+
+  displayValue.value = formattedValue
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleClickOutside)
+})
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleClickOutside)
+})
+</script>
+
+<template>
+  <div class="relative w-full">
+    <div @click="toggleDropdown" class="cursor-pointer relative">
+      <FmTextField
+        ref="inputRef"
+        :model-value="displayValue"
+        @update:model-value="handleInputValue"
+        @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 }"
+      />
+    </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)"
+          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;
+}
+
+/* Override FmTextField styling for orange theme */
+.time-picker-field :deep(.fm-text-field-input) {
+  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) {
+  border-color: rgb(209 213 219);
+  /* gray-300 */
+  background-color: white;
+}
+
+.time-picker-field :deep(.fm-text-field-input):not(:focus):not(:focus-within):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 {
+  border-color: rgb(249 115 22) !important;
+  /* orange-500 */
+  background-color: rgb(255 247 237) !important;
+  /* orange-50 */
+}
+</style>