manolis-ui 1.1.2 → 1.1.3

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "manolis-ui",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "configKey": "manolisUI",
   "compatibility": {
     "nuxt": ">=3.10.0"

package/dist/module.mjs

@@ -13,7 +13,7 @@ const __filename = __cjs_url__.fileURLToPath(import.meta.url);
 const __dirname = __cjs_path__.dirname(__filename);
 const require = __cjs_mod__.createRequire(import.meta.url);
 const name = "manolis-ui";
-const version = "1.1.2";
+const version = "1.1.3";
 
 function installTailwind(moduleOptions, nuxt = useNuxt(), resolve = createResolver(import.meta.url).resolve) {
   const runtimeDir = resolve("./runtime");
@@ -110,7 +110,6 @@ const module = defineNuxtModule({
       "data-input",
       "feedback",
       "layout",
-      "misc",
       "navigation"
     ];
     for (const dir of componentDirs) {

package/dist/runtime/components/data-input/advancedSearch.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, defineProps, defineEmits, onMounted, onBeforeUnmount, defineAsyncComponent, nextTick } from 'vue';
+import { ref, defineProps, defineAsyncComponent, nextTick } from 'vue';
 import { Search } from 'lucide-vue-next';
 
 interface Tab {
@@ -8,31 +8,21 @@ interface Tab {
   type: "date" | "time" | "datetime";
   range: boolean;
   props?: Object;
-}
-
-export interface SearchTab {
-  category: string;
-  tabs: Array<Tab>;
+  value?: any;
 }
 
 interface Props {
-  searchOptions: Array<SearchTab>;
+  searchOptions: Array<{ category: string; tabs: Tab[] }>;
+  currentCategory: string;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-  searchOptions: () => [],
-});
-
-const currentCategory = ref(props.searchOptions[0]?.category || '');
+const props = defineProps<Props>();
+const emit = defineEmits<{
+  (e: 'search'): void;
+  (e: 'update:search-data', payload: { tab: string, data: any }): void;
+}>();
 const activeTab = ref<Tab | null>(null);
 
-const emit = defineEmits(['category-changed']);
-
-function setCurrentCategory(category: string) {
-  currentCategory.value = category;
-  emit('category-changed', category);
-}
-
 // Dynamic component loader
 const componentMap = {
   datetime: defineAsyncComponent(() => import('./datetimePicker.vue')),
@@ -41,39 +31,82 @@ const componentMap = {
 // Refs for tabs and popup positioning
 const tabRefs = ref<Record<string, HTMLElement | null>>({});
 const popupStyle = ref({ left: '0px', top: '0px' });
-
 const searchContainer = ref<HTMLElement | null>(null);
 
-function handleOutsideClick(event: MouseEvent) {
+// made this function compatible with mobile and with desktop
+function componentValueUpdated(data: any, currenTab: number) {
+
+  if (activeTab.value?.name) {
+    c('update:search-data', {
+      tab: activeTab.name,
+      data: data
+    })
+    return;
+  }
+  
+  let _currentTab = props.searchOptions.find((option: { category: any; }) => option.category === props.currentCategory).tabs[currenTab]
+  _currentTab.value = data
+  emit('update:search-data', {
+    tab: _currentTab.name,
+    data: _currentTab.value
+  })
+
+}
+
+
+function searchClicked() {
+  emit('search');
+}
+
+async function handleOutsideClick(event: MouseEvent) {
   if (searchContainer.value && !searchContainer.value.contains(event.target as Node)) {
+    await nextTick();
     activeTab.value = null;
   }
 }
 
+
+async function openMobileView() {
+  if (typeof window !== 'undefined' && window.innerWidth <= 768) {
+    const modal = document.getElementById('advancedSearchMobile') as HTMLDialogElement | null;
+    if (modal) {
+      modal.showModal();
+    } else {
+      console.warn('Modal element not found.');
+    }
+    // return; // Early return to avoid running desktop logic
+  }
+}
+
 async function openTab(tab: Tab) {
   activeTab.value = tab;
-  await nextTick(); // Ensure DOM updates
+  await nextTick();
 
   const tabElement = tabRefs.value[tab.name];
   if (tabElement) {
     const rect = tabElement.getBoundingClientRect();
     const parentRect = searchContainer.value?.getBoundingClientRect() || { left: 0, top: 0 };
-    
-    // Center the popup
-    popupStyle.value = {
-      left: `${rect.left + (rect.width / 2) - (parentRect.left)}px`,
-      top: `${rect.bottom - parentRect.top}px`,
-      transform: `translateX(-50%)`,  // Center horizontally
-    };
+
+    // Calculate the popup position for centering on larger screens
+    if (window.innerWidth > 768) {  // Desktop or tablet screen
+      popupStyle.value = {
+        left: `${rect.left + (rect.width / 2) - (parentRect.left)}px`,
+        top: `${rect.bottom - parentRect.top}px`,
+        transform: `translateX(-50%)`,
+      };
+    } else {  // Mobile screen
+      popupStyle.value = {
+        left: '50%',
+        top: `${rect.bottom - parentRect.top}px`,
+        transform: `translateX(-50%)`, // Center the popup horizontally on mobile
+      };
+    }
   } else {
     console.error('Tab element not found for:', tab.name);
   }
 }
 
 
-function setDynamicData(data: any) {
-  console.log(data);
-}
 
 onMounted(() => {
   document.addEventListener('click', handleOutsideClick);
@@ -85,42 +118,68 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <div>
-    <!-- Category Navigation -->
-    <div class="flex gap-4 place-content-center w-full"
-      :class="{ 'flex': props.searchOptions.length > 1, 'hidden': props.searchOptions.length <= 1 }">
-      <button v-for="searchOption in props.searchOptions" :key="searchOption.category" type="button"
-        :class="{ 'font-medium': searchOption.category === currentCategory }"
-        @click="setCurrentCategory(searchOption.category)">
-        {{ searchOption.category }}
-      </button>
-    </div>
-
-    <!-- Tab Navigation and Content -->
-    <div ref="searchContainer"
-      class="relative my-8 rounded border-2 border-opacity-25 group/search flex shadow-md transition-all p-2 place-items-center">
+  <div ref="searchContainer" class="w-full">
+    <!-- desktop/tablet -->
+    <div
+      class="relative rounded border-2 border-opacity-25 group/search flex shadow-md transition-all p-2 place-items-center w-full cursor-pointer md:cursor-auto"
+      @click="openMobileView">
       <div class="tabs tabs-boxed bg-base-100 flex gap-4 w-full">
-        <button v-for="tab in props.searchOptions.find(opt => opt.category === currentCategory)?.tabs || []"
+        <button v-for="tab in props.searchOptions.find(opt => opt.category === props.currentCategory)?.tabs || []"
           :key="tab.name" @click="openTab(tab)" :class="{ 'tab-active': activeTab?.name === tab.name }"
-          class="group/searchitem text-start relative p-1 hover:bg-base-200 rounded"
+          class="group/searchitem pointer-events-none md:pointer-events-auto w-auto overflow-x-hidden text-start relative p-1 hover:bg-base-200 rounded after:h-10 after:bg-base-200 after:absolute after:-right-2 after:w-[1px] after:top-0 last-of-type:after:content-none last-of-type:flex-auto first-of-type:flex-auto after:content-none after:md:content-['']"
           :ref="(el) => tabRefs[tab.name] = el">
           <p class="text-sm">{{ tab.name }}</p>
-          <p class="text-xs opacity-35">{{ tab.description }}</p>
+          <p class="text-xs opacity-35 truncate ... overflow-hidden md:block hidden">{{ tab.description }}</p>
         </button>
       </div>
 
-      <!-- Dynamic Component Rendering -->
       <div class="tab-content absolute w-fit max-w-full flex mt-4 transition-all" v-if="activeTab" :style="popupStyle">
-        <component :is="componentMap[activeTab.type]" @updated="setDynamicData" v-bind="activeTab.props ? activeTab.props : null" />
+        <component :is="componentMap[activeTab.type]" v-bind="activeTab.props ? activeTab.props : null"
+          @updated="componentValueUpdated" />
       </div>
-      <!-- Search Button -->
-      <button title="search" type="submit" class="btn btn-primary btn-square ml-1">
+
+      <button title="search" type="submit" class="btn btn-primary btn-square ml-1" @click="searchClicked">
+        <Search :size="24" color="white" />
+      </button>
+    </div>
+    <div class="hidden">
+      <button title="search" @click="">
         <Search :size="24" color="white" />
       </button>
     </div>
   </div>
+
+
+  <dialog id="advancedSearchMobile" class="modal">
+    <div class="modal-box">
+      <slot name="additionalForMobile">
+        <h3 class="text-lg font-bold">{{ currentCategory }}</h3>
+      </slot>
+
+      <div class="collapse bg-base-200 my-4"
+        v-for="(tab, index) in props.searchOptions.find(opt => opt.category === props.currentCategory)?.tabs || []"
+        :key="tab.name">
+        <input type="radio" name="my-accordion-1" :checked="index === 0" />
+        <div class="collapse-title text-xl font-medium flex justify-between pr-4 items-center w-full">{{ tab.name }} <p class="text-sm">{{ tab.description }}</p></div>
+        <div class="collapse-content flex place-content-center p-0">
+          <br>
+
+          <component :is="componentMap[tab.type]" v-bind="tab.props || {}"
+            @updated="(data: any) => componentValueUpdated(data, index)" />
+        </div>
+      </div>
+
+      <div class="modal-action">
+        <form method="dialog">
+          <!-- if there is a button in form, it will close the modal -->
+          <button class="btn btn-primary" @click="searchClicked">Close and Search</button>
+        </form>
+      </div>
+    </div>
+  </dialog>
+
 </template>
 
 <style scoped>
-.tabs button{cursor:pointer}.tab-content{position:absolute;transform-origin:top center;transition:opacity .3s ease;z-index:10}.tabs-boxed :is(.tab-active,[aria-selected=true]):not(.tab-disabled):not([disabled]),.tabs-boxed :is(input:checked){@apply bg-base-300 text-base-content}
+.tabs button{cursor:pointer}.tab-content{position:absolute;transform-origin:top center;transition:opacity .3s ease;z-index:10}.tabs-boxed :is(.tab-active,[aria-selected=true]):not(.tab-disabled):not([disabled]),.tabs-boxed :is(input:checked){@apply bg-base-300 text-base-content}@media (max-width:768px){.tab-content{bottom:0;left:50%;top:auto;transform:translateX(-50%);width:100%}}@media (min-width:769px){.tab-content{left:unset;transform:unset;width:auto}}
 </style>

package/dist/runtime/components/data-input/datetimePicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="relative inline-block" ref="pickerContainer">
+  <div class="relative inline-block w-full lg:w-[360px]" ref="pickerContainer">
     <div class="flex items-center gap-2 cursor-pointer" @click="togglePopup">
       <slot v-if="popup">
         <input
@@ -8,7 +8,7 @@
           :placeholder="placeholder"
           :value="formattedValue"
           readonly
-          :id="inputId" 
+          :id="inputId"
         />
         <button class="btn btn-ghost">
           📅
@@ -16,23 +16,23 @@
       </slot>
     </div>
 
-    <div v-if="showPopup || !popup" class="z-50 bg-base-100 shadow-xl rounded-md p-4 mt-2 w-[360px]" :class="[{'absolute': popup}]" :id="popupId"> 
+    <div v-if="showPopup || !popup" class="z-50 rounded-md px-4 md:p-4 md:mt-2 w-full lg:bg-base-100" :class="[{ absolute: popup }]" :id="popupId">
       <div v-if="showDate" class="flex items-center justify-between mb-4 place-content-center">
-        <button class="btn btn-sm btn-primary btn-outline" @click="previousMonth">
+        <button class="btn hidden md:block md:btn-sm btn-primary btn-outline" @click="previousMonth">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
           </svg>
         </button>
 
-        <select class="select border-none w-fit" v-model="currentMonth" @change="emitDateTimeChanged"> 
+        <select class="select border-none w-fit" v-model="currentMonth" @change="emitDateTimeChanged">
           <option v-for="(month, index) in months" :key="index" :value="month">{{ month }}</option>
         </select>
 
-        <select class="select w-24 border-none" v-model="currentYear" @change="emitDateTimeChanged"> 
+        <select class="select w-24 border-none" v-model="currentYear" @change="emitDateTimeChanged">
           <option v-for="year in years" :key="year" :value="year">{{ year }}</option>
         </select>
 
-        <button class="btn btn-sm btn-primary btn-outline" @click="nextMonth">
+        <button class="btn hidden md:block md:btn-sm btn-primary btn-outline" @click="nextMonth">
           <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
             <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
           </svg>
@@ -42,33 +42,27 @@
       <div v-if="showDate" class="grid grid-cols-7 gap-2">
         <div v-for="day in daysOfWeek" :key="day" class="text-center">{{ day }}</div>
         <div v-for="emptyDay in emptyDays" :key="emptyDay" class="text-center"></div>
-        <div v-for="day in daysInMonth" :key="day" class="text-center cursor-pointer py-1 rounded-full hover:bg-primary/10"
-          :class="{
-            'bg-primary text-primary-content': isDateSelected(day),
-            'today': isToday(day),
-            'range-start': isRangeStart(day),
-            'range-end': isRangeEnd(day),
-            'in-range': isInDateRange(day),
-          }"
-          @click="selectDate(day)">
+        <div v-for="day in daysInMonth" :key="day" class="text-center cursor-pointer py-1 rounded-full hover:bg-primary/10" :class="{
+          'bg-primary text-primary-content': isDateSelected(day),
+          'today': isToday(day),
+          'range-start': isRangeStart(day),
+          'range-end': isRangeEnd(day),
+          'in-range': isInDateRange(day),
+        }" @click="selectDate(day)">
           {{ day.getDate() }}
         </div>
       </div>
 
-      <div v-if="showTime" class="mt-4">
-        <h3 class="text-lg font-bold mb-2">Select Time</h3>
+      <div v-if="showTime" class="mt-4 lg:w-80">
+        <h3 class="text-lg font-bold mb-2" v-if="!props.range">Select Time</h3>
         <div v-if="!props.range">
           <input v-if="isMobile" type="time" class="input input-bordered w-full" v-model="selectedTime" @change="emitDateTimeChanged" />
           <div v-else class="flex gap-4">
-            <select class="select select-bordered w-full" v-model="selectedHour" @change="emitDateTimeChanged">
-              <option v-for="hour in hours" :key="hour" :value="hour">{{ hour }}</option>
+            <select class="select select-bordered w-full" v-model.number="selectedHour" @change="emitDateTimeChanged"> 
+              <option v-for="hour in hours" :key="hour" :value="hour">{{ hour.toString().padStart(2, '0') }}</option>
             </select>
-            <select class="select select-bordered w-full" v-model="selectedMinute" @change="emitDateTimeChanged">
-              <option v-for="minute in minutes" :key="minute" :value="minute">{{ minute }}</option>
-            </select>
-            <select class="select select-bordered w-full" v-model="selectedPeriod" @change="emitDateTimeChanged">
-              <option value="AM">AM</option>
-              <option value="PM">PM</option>
+            <select class="select select-bordered w-full" v-model.number="selectedMinute" @change="emitDateTimeChanged">
+              <option v-for="minute in minutes" :key="minute" :value="minute">{{ minute.toString().padStart(2, '0') }}</option>
             </select>
           </div>
         </div>
@@ -77,15 +71,11 @@
             <p class="font-bold">Start Time</p>
             <input v-if="isMobile" type="time" class="input input-bordered w-full" v-model="selectedTime.start" @change="emitDateTimeChanged" />
             <div v-else class="flex gap-2">
-              <select class="select select-bordered w-full" v-model="selectedHour.start" @change="emitDateTimeChanged">
-                <option v-for="hour in hours" :key="hour" :value="hour">{{ hour }}</option>
-              </select>
-              <select class="select select-bordered w-full" v-model="selectedMinute.start" @change="emitDateTimeChanged">
-                <option v-for="minute in minutes" :key="minute" :value="minute">{{ minute }}</option>
+              <select class="select select-bordered w-full" v-model.number="selectedHour.start" @change="emitDateTimeChanged">
+                <option v-for="hour in hours" :key="hour" :value="hour">{{ hour.toString().padStart(2, '0') }}</option>
               </select>
-              <select class="select select-bordered w-full" v-model="selectedPeriod.start" @change="emitDateTimeChanged">
-                <option value="AM">AM</option>
-                <option value="PM">PM</option>
+              <select class="select select-bordered w-full" v-model.number="selectedMinute.start" @change="emitDateTimeChanged">
+                <option v-for="minute in minutes" :key="minute" :value="minute">{{ minute.toString().padStart(2, '0') }}</option>
               </select>
             </div>
           </div>
@@ -93,15 +83,11 @@
             <p class="font-bold">End Time</p>
             <input v-if="isMobile" type="time" class="input input-bordered w-full" v-model="selectedTime.end" @change="emitDateTimeChanged" />
             <div v-else class="flex gap-2">
-              <select class="select select-bordered w-full" v-model="selectedHour.end" @change="emitDateTimeChanged">
-                <option v-for="hour in hours" :key="hour" :value="hour">{{ hour }}</option>
+              <select class="select select-bordered w-full" v-model.number="selectedHour.end" @change="emitDateTimeChanged"> 
+                <option v-for="hour in hours" :key="hour" :value="hour">{{ hour.toString().padStart(2, '0') }}</option>
               </select>
-              <select class="select select-bordered w-full" v-model="selectedMinute.end" @change="emitDateTimeChanged">
-                <option v-for="minute in minutes" :key="minute" :value="minute">{{ minute }}</option>
-              </select>
-              <select class="select select-bordered w-full" v-model="selectedPeriod.end" @change="emitDateTimeChanged">
-                <option value="AM">AM</option>
-                <option value="PM">PM</option>
+              <select class="select select-bordered w-full" v-model.number="selectedMinute.end" @change="emitDateTimeChanged"> 
+                <option v-for="minute in minutes" :key="minute" :value="minute">{{ minute.toString().padStart(2, '0') }}</option>
               </select>
             </div>
           </div>
@@ -140,10 +126,25 @@ const props = defineProps({
   },
   id: {
     type: String,
-    default: 'datetimepicker', 
+    default: 'datetimepicker',
+  },
+  initialDate: { 
+    type: Object,
+    default: () => null
   }
 })
 
+// Watchers
+watch(() => props.range, (newRange) => {
+  if (newRange) {
+    selectedDate.value = { start: null, end: null };
+    selectedTime.value = { start: null, end: null };
+  } else {
+    selectedDate.value = null;
+    selectedTime.value = null;
+  }
+});
+
 // Emits
 const emit = defineEmits(['updated'])
 
@@ -153,9 +154,8 @@ const selectedDate = ref(props.range ? { start: null, end: null } : null)
 const selectedTime = ref(props.range ? { start: null, end: null } : null)
 const currentMonth = ref(new Date().toLocaleString('default', { month: 'long' }))
 const currentYear = ref(new Date().getFullYear())
-const selectedHour = ref(props.range ? { start: new Date().getHours() % 12 || 12, end: new Date().getHours() % 12 || 12 } : new Date().getHours() % 12 || 12)
-const selectedMinute = ref(props.range ? { start: new Date().getMinutes().toString().padStart(2, '0'), end: new Date().getMinutes().toString().padStart(2, '0') } : new Date().getMinutes().toString().padStart(2, '0'))
-const selectedPeriod = ref(props.range ? { start: new Date().getHours() < 12 ? 'AM' : 'PM', end: new Date().getHours() < 12 ? 'AM' : 'PM' } : new Date().getHours() < 12 ? 'AM' : 'PM')
+const selectedHour = ref(props.range ? { start: 0, end: 0 } : 0);
+const selectedMinute = ref(props.range ? { start: 0, end: 0 } : 0); 
 
 const pickerContainer = ref(null)
 
@@ -167,9 +167,7 @@ const popupId = computed(() => `${props.id}-popup`);
 const showDate = computed(() => props.mode === 'date' || props.mode === 'datetime')
 const showTime = computed(() => props.mode === 'time' || props.mode === 'datetime')
 const currentMonthYear = computed(() => new Date(currentYear.value, monthIndex.value))
-const monthIndex = computed(() => {
-  return months.indexOf(currentMonth.value)
-})
+const monthIndex = computed(() => months.indexOf(currentMonth.value))
 const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
 const firstDay = computed(() => new Date(currentYear.value, monthIndex.value).getDay())
 const daysInMonth = computed(() => {
@@ -177,9 +175,9 @@ const daysInMonth = computed(() => {
   return Array.from({ length: days }, (_, i) => new Date(currentYear.value, monthIndex.value, i + 1));
 });
 const emptyDays = computed(() => Array.from({ length: firstDay.value }, (_, i) => i))
-const hours = Array.from({ length: 12 }, (_, i) => (i + 1).toString().padStart(2, '0'))
-const minutes = Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0'))
-const isMobile = computed(() => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent))
+const hours = Array.from({ length: 24 }, (_, i) => i)
+const minutes = Array.from({ length: 60 }, (_, i) => i)
+const isMobile = computed(() => /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(process.client ? navigator.userAgent : 'nope'))
 const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
 const years = computed(() => {
   const currentYear = new Date().getFullYear()
@@ -190,52 +188,45 @@ const formattedDate = computed(() => {
   if (!showDate.value || !selectedDate.value) return '';
 
   if (props.range && selectedDate.value.start && selectedDate.value.end) {
-    const startDate = selectedDate.value.start.toLocaleDateString('en-GB');
-    const endDate = selectedDate.value.end.toLocaleDateString('en-GB');
+    const startDate = selectedDate.value.start.toLocaleDateString('en-US');
+    const endDate = selectedDate.value.end.toLocaleDateString('en-US');
     return `${startDate} - ${endDate}`;
-  } 
+  }
 
   if (!props.range && selectedDate.value) {
-    return selectedDate.value.toLocaleDateString('en-GB');
+    return selectedDate.value.toLocaleDateString('en-US');
   }
 
   return '';
 });
 
+const ensureDate = (d) => d instanceof Date ? d : new Date(d);
+const isValidDate = (d) => d instanceof Date && !isNaN(d);
+
 const formattedTime = computed(() => {
   if (!showTime.value) return '';
 
-  if (props.range && selectedTime.value.start && selectedTime.value.end) {
-    const formattedStartTime = isMobile.value
-      ? selectedTime.value.start
-      : `${selectedHour.value.start}:${selectedMinute.value.start} ${selectedPeriod.value.start}`;
-    const formattedEndTime = isMobile.value
-      ? selectedTime.value.end
-      : `<span class="math-inline">\{selectedHour\.value\.end\}\:</span>{selectedMinute.value.end} ${selectedPeriod.value.end}`;
-    return `${formattedStartTime} - ${formattedEndTime}`;
-  }
-
-  if (!props.range && selectedTime.value) {
+  const formatTime = (time) => {
+    const hour = selectedHour.value?.[time] ?? selectedHour.value;
+    const minute = selectedMinute.value?.[time] ?? selectedMinute.value;
     return isMobile.value
-      ? selectedTime.value
-      : `<span class="math-inline">\{selectedHour\.value\}\:</span>{selectedMinute.value} ${selectedPeriod.value}`;
+      ? selectedTime.value?.[time] ?? selectedTime.value
+      : `${hour.toString().padStart(2, '0')}:${minute.toString().padStart(2, '0')}`;
+  };
+
+  if (props.range) {
+    return `${formatTime('start')} - ${formatTime('end')}`; 
   }
 
-  return '';
+  return formatTime(); 
 });
 
 const formattedValue = computed(() => {
   const date = formattedDate.value;
   const time = formattedTime.value;
-
-  if (date && time) return `${date} ${time}`;
-  if (date) return date;
-  if (time) return time;
-
-  return '';
+  return `${date} ${time}`.trim(); 
 });
 
-
 // Methods
 const togglePopup = () => (showPopup.value = !showPopup.value)
 
@@ -247,10 +238,10 @@ const closeAndEmit = () => {
 const closePopup = () => (showPopup.value = false)
 
 const clearSelection = () => {
-  selectedDate.value = props.range ? { start: null, end: null } : null
-  selectedTime.value = props.range ? { start: null, end: null } : null
-  emitDateTimeChanged()
-}
+  selectedDate.value = props.range ? { start: null, end: null } : null;
+  selectedTime.value = props.range ? { start: null, end: null } : null;
+  emitDateTimeChanged();
+};
 
 const selectDate = (date) => {
   if (props.range) {
@@ -264,42 +255,46 @@ const selectDate = (date) => {
   } else {
     selectedDate.value = date
   }
-  emitDateTimeChanged() 
+  emitDateTimeChanged()
 }
 
 const isDateSelected = (date) => {
+  date = ensureDate(date);
   if (props.range) {
-    return (selectedDate.value.start && date.getTime() === selectedDate.value.start.getTime()) || (selectedDate.value.end && date.getTime() === selectedDate.value.end.getTime())
-  } else {
-    return selectedDate.value && date.getTime() === selectedDate.value.getTime()
-  }
-}
+    return (selectedDate.value.start && isValidDate(selectedDate.value.start) && date.getTime() === selectedDate.value.start.getTime()) ||
+      (selectedDate.value.end && isValidDate(selectedDate.value.end) && date.getTime() === selectedDate.value.end.getTime());
+  } 
+  return isValidDate(selectedDate.value) && date.getTime() === selectedDate.value.getTime();
+};
 
 const isToday = (date) => {
-  const today = new Date()
+  date = ensureDate(date);
+  const today = new Date();
   return date.getDate() === today.getDate() &&
     date.getMonth() === today.getMonth() &&
-    date.getFullYear() === today.getFullYear()
-}
+    date.getFullYear() === today.getFullYear();
+};
 
 const isRangeStart = (date) => {
-  return props.range && selectedDate.value.start && date.getTime() === selectedDate.value.start.getTime()
-}
+  date = ensureDate(date);
+  return props.range && isValidDate(selectedDate.value.start) && date.getTime() === selectedDate.value.start.getTime();
+};
 
 const isRangeEnd = (date) => {
-  return props.range && selectedDate.value.end && date.getTime() === selectedDate.value.end.getTime()
-}
+  date = ensureDate(date);
+  return props.range && isValidDate(selectedDate.value.end) && date.getTime() === selectedDate.value.end.getTime();
+};
 
 const isInDateRange = (date) => {
-  if (props.range && selectedDate.value.start && selectedDate.value.end) {
-    const start = selectedDate.value.start.getTime()
-    const end = selectedDate.value.end.getTime()
-    const current = date.getTime()
-    return current > start && current < end
+  date = ensureDate(date);
+  if (props.range && isValidDate(selectedDate.value.start) && isValidDate(selectedDate.value.end)) {
+    const start = selectedDate.value.start.getTime();
+    const end = selectedDate.value.end.getTime();
+    const current = date.getTime();
+    return current > start && current < end;
   }
-  return false
-}
-
+  return false;
+};
 
 // Month navigation
 const previousMonth = () => {
@@ -309,6 +304,7 @@ const previousMonth = () => {
     currentYear.value--
   }
   currentMonth.value = months[newMonth]
+  emitDateTimeChanged()
 }
 
 const nextMonth = () => {
@@ -318,6 +314,7 @@ const nextMonth = () => {
     currentYear.value++
   }
   currentMonth.value = months[newMonth]
+  emitDateTimeChanged()
 }
 
 // Close on outside click
@@ -328,44 +325,64 @@ const handleClickOutside = (event) => {
 }
 
 const emitDateTimeChanged = () => {
-  let dateStr = '';
-  let timeStr = '';
-
-  // Handle date formatting
-  if (selectedDate.value) {
-    if (props.range) {
-      const start = selectedDate.value.start?.toLocaleDateString('en-GB') || '';
-      const end = selectedDate.value.end?.toLocaleDateString('en-GB') || '';
-      dateStr = `${start} - ${end}`;
-    } else {
-      dateStr = selectedDate.value.toLocaleDateString('en-GB');
+  let result = {};
+
+  const formatUTCDate = (date, hour, minute) => {
+    if (!(date instanceof Date && !isNaN(date))) {
+      // If no date is provided, use today's date
+      date = new Date(); 
     }
+    const newDate = new Date(date);
+    newDate.setUTCHours(hour, minute, 0, 0);
+    return newDate.toISOString();
+  };
+
+  if (props.range) {
+    result.from = formatUTCDate(
+      selectedDate.value.start,
+      selectedHour.value.start,
+      selectedMinute.value.start
+    );
+    result.to = formatUTCDate(
+      selectedDate.value.end,
+      selectedHour.value.end,
+      selectedMinute.value.end
+    );
+  } else {
+    result = formatUTCDate(
+      selectedDate.value, 
+      selectedHour.value, 
+      selectedMinute.value
+    );
   }
 
-  // Handle time formatting
-  if (showTime.value) {
-    if (props.range) {
-      const start = selectedTime.value.start || `${selectedHour.value.start}:${selectedMinute.value.start} ${selectedPeriod.value.start}`;
-      const end = selectedTime.value.end || `${selectedHour.value.end}:${selectedMinute.value.end} ${selectedPeriod.value.end}`;
-      timeStr = `${start} - ${end}`;
-    } else {
-      timeStr = `${selectedHour.value}:${selectedMinute.value} ${selectedPeriod.value}`;
+  emit('updated', result);
+};
+
+onMounted(() => {
+  // Initialize selectedDate from props.initialDate
+  if (props.initialDate) {
+    if (props.range && props.initialDate.start && props.initialDate.end) {
+      selectedDate.value = { 
+        start: new Date(props.initialDate.start), 
+        end: new Date(props.initialDate.end) 
+      };
+    } else if (props.initialDate.start){
+      selectedDate.value = { start: new Date(props.initialDate.start) };
     }
   }
 
-  // Combine date and time based on mode
-  let result = '';
-  if (props.mode === 'datetime') {
-    result = props.range ? `${dateStr} ${timeStr}` : `${dateStr} ${timeStr}`;
-  } else if (props.mode === 'date') {
-    result = dateStr;
-  } else if (props.mode === 'time') {
-    result = timeStr;
+  // Initialize selectedHour and selectedMinute if they are null in range mode
+  if (props.range) {
+    selectedHour.value.start = selectedHour.value.start ?? new Date().getHours();
+    selectedHour.value.end = selectedHour.value.end ?? new Date().getHours();
+    selectedMinute.value.start = selectedMinute.value.start ?? new Date().getMinutes();
+    selectedMinute.value.end = selectedMinute.value.end ?? new Date().getMinutes();
+  } else {
+    selectedHour.value = selectedHour.value ?? new Date().getHours();
+    selectedMinute.value = selectedMinute.value ?? new Date().getMinutes();
   }
-
-  // Emit the formatted string
-  emit('updated', result.trim());
-};
+});
 
 if(props.popup) {
   onMounted(() => document.addEventListener('click', handleClickOutside))
@@ -375,4 +392,4 @@ onUnmounted(() => document.removeEventListener('click', handleClickOutside))
 
 <style scoped>
 .input{cursor:pointer}.in-range{@apply bg-primary/20}.in-range:hover{@apply bg-primary/10}.range-end,.range-start{@apply bg-primary text-primary-content}
-</style>
+</style>

package/dist/runtime/components/navigation/categoryNavigation.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { defineProps, defineEmits } from 'vue';
+
+interface Category {
+  category: string;
+  tabs: Tab[];
+}
+
+interface Props {
+  searchOptions: Array<Category>;
+  currentCategory: string;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{ (e: 'update:currentCategory', category: string): void }>();
+
+function changeCategory(category: string) {
+  emit('update:currentCategory', category);
+}
+</script>
+
+<template>
+  <div class="categories flex flex-row gap-4 place-content-center">
+    <div v-for="category in props.searchOptions" :key="category.category">
+      <button @click="changeCategory(category.category)" class="truncate" :class="{ 'font-semibold': props.currentCategory === category.category }">
+        {{ category.category }}
+      </button>
+    </div>
+  </div>
+</template>

package/dist/runtime/components/navigation/navigation-bar.vue

@@ -1,19 +1,26 @@
 <script lang="ts" setup></script>
 
 <template>
-    <nav class="navbar border-b-4 border-primary px-5 py-5 place-items-start">
-        <div class="navbar-start flex-1">
+    <nav class="navbar border-b-4 border-primary px-5 py-5 place-items-start transition-all">
+        <div class="navbar-start hidden md:flex">
             <slot name="start"></slot>
         </div>
-        
-        <div class="navbar-center flex-auto hidden md:block">
+
+        <div class="navbar-center hidden md:flex justify-center items-center">
             <slot name="center"></slot>
         </div>
 
-        <div class="navbar-end flex-1">
+        <div class="navbar-end md:flex hidden">
             <slot name="end"></slot>
         </div>
+        <div class="navbar-bottom md:flex hidden">
+            <slot name="bottom"></slot>
+        </div>
     </nav>
 </template>
 
 
+<style scoped>
+.navbar{display:grid;gap:0;grid-template-areas:"center center center" "bottom bottom bottom";grid-template-columns:auto auto auto;grid-template-rows:auto auto;width:100%}@media (min-width:768px){.navbar{grid-row-gap:4rem}}.navbar-start{grid-area:start;height:100%}.navbar-center{grid-area:center;height:100%;width:100%}.navbar-end{grid-area:end;height:100%;width:100%}.navbar-bottom{align-items:center;display:flex;grid-area:center;justify-content:center;width:100%}@media (min-width:768px){.navbar-bottom{grid-area:bottom}.navbar{grid-template-areas:"start center end" "bottom bottom bottom";grid-template-columns:.7fr 1.6fr .7fr}}
+</style>
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "manolis-ui",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "My new Nuxt module",
   "repository": "manolis-trading/manolis-ui",
   "license": "MIT",