manolis-ui 1.1.0 → 1.1.2

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "manolis-ui",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "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.0";
+const version = "1.1.2";
 
 function installTailwind(moduleOptions, nuxt = useNuxt(), resolve = createResolver(import.meta.url).resolve) {
   const runtimeDir = resolve("./runtime");

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

@@ -1,39 +1,126 @@
 <script setup lang="ts">
+import { ref, defineProps, defineEmits, onMounted, onBeforeUnmount, defineAsyncComponent, nextTick } from 'vue';
 import { Search } from 'lucide-vue-next';
-import { ref } from 'vue';
 
+interface Tab {
+  name: string;
+  description: string;
+  type: "date" | "time" | "datetime";
+  range: boolean;
+  props?: Object;
+}
+
+export interface SearchTab {
+  category: string;
+  tabs: Array<Tab>;
+}
 
 interface Props {
-  categories: Array<string>;
+  searchOptions: Array<SearchTab>;
 }
-const props = defineProps<Props>();
-const currentCategory = ref(props.categories[0]);
+
+const props = withDefaults(defineProps<Props>(), {
+  searchOptions: () => [],
+});
+
+const currentCategory = ref(props.searchOptions[0]?.category || '');
+const activeTab = ref<Tab | null>(null);
 
 const emit = defineEmits(['category-changed']);
 
 function setCurrentCategory(category: string) {
-    currentCategory.value = category;
-    emit('category-changed', category);
+  currentCategory.value = category;
+  emit('category-changed', category);
 }
 
+// Dynamic component loader
+const componentMap = {
+  datetime: defineAsyncComponent(() => import('./datetimePicker.vue')),
+};
+
+// 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) {
+  if (searchContainer.value && !searchContainer.value.contains(event.target as Node)) {
+    activeTab.value = null;
+  }
+}
+
+async function openTab(tab: Tab) {
+  activeTab.value = tab;
+  await nextTick(); // Ensure DOM updates
+
+  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
+    };
+  } else {
+    console.error('Tab element not found for:', tab.name);
+  }
+}
+
+
+function setDynamicData(data: any) {
+  console.log(data);
+}
+
+onMounted(() => {
+  document.addEventListener('click', handleOutsideClick);
+});
+
+onBeforeUnmount(() => {
+  document.removeEventListener('click', handleOutsideClick);
+});
 </script>
 
 <template>
-  <div class="flex gap-4 place-content-center" :class="categories.length > 1 ? 'flex' : 'hidden'">
-    <button type="button" v-for="category in categories" :class="[{['font-medium']: category == currentCategory }]" @click="setCurrentCategory(category)">{{ category }}</button>
-  </div>
+  <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>
 
-  <div class="my-8 rounded border-2 border-opacity-25 group/search flex shadow-md hover:shadow-lg transition-all p-2 place-items-center">
-    <!-- search fields -->
-    <div class="flex-auto flex gap-4">
-        <button type="button" class="group/searchitem 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">
-            <p class="text-sm">Wie</p>
-            <p class="text-xs opacity-35 group-hover/searchitem:text-base-500">Aantal personen</p>
+    <!-- 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 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 || []"
+          :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"
+          :ref="(el) => tabRefs[tab.name] = el">
+          <p class="text-sm">{{ tab.name }}</p>
+          <p class="text-xs opacity-35">{{ tab.description }}</p>
         </button>
-        <!-- <div class="divider divider-horizontal h-10"></div> -->
-        
+      </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" />
+      </div>
+      <!-- Search Button -->
+      <button title="search" type="submit" class="btn btn-primary btn-square ml-1">
+        <Search :size="24" color="white" />
+      </button>
     </div>
-    <!-- search button -->
-     <button title="search" type="submit" class="btn btn-primary btn-square ml-1"><Search :size="24" color="white" /></button>
   </div>
 </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}
+</style>

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

@@ -1,7 +1,7 @@
 <template>
   <div class="relative inline-block" ref="pickerContainer">
     <div class="flex items-center gap-2 cursor-pointer" @click="togglePopup">
-      <slot>
+      <slot v-if="popup">
         <input
           type="text"
           class="input input-bordered w-full cursor-pointer"
@@ -16,7 +16,7 @@
       </slot>
     </div>
 
-    <div v-if="showPopup" class="absolute z-50 bg-base-100 shadow-xl rounded-md p-4 mt-2 w-[360px]" :id="popupId"> 
+    <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="showDate" class="flex items-center justify-between mb-4 place-content-center">
         <button class="btn 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">
@@ -109,8 +109,8 @@
       </div>
 
       <div class="mt-4 flex gap-2">
-        <button class="btn btn-secondary w-fit" @click="clearSelection">Clear</button>
-        <button class="btn btn-primary btn-wide" @click="closeAndEmit">Close</button>
+        <button class="btn btn-secondary" :class="popup ? 'w-fit' : 'w-full'" @click="clearSelection">Clear</button>
+        <button v-if="popup" class="btn btn-primary btn-wide" @click="closeAndEmit">Close</button>
       </div>
     </div>
   </div>
@@ -134,6 +134,10 @@ const props = defineProps({
     type: String,
     default: 'Select date and time',
   },
+  popup: {
+    type: Boolean,
+    default: false,
+  },
   id: {
     type: String,
     default: 'datetimepicker', 
@@ -141,7 +145,7 @@ const props = defineProps({
 })
 
 // Emits
-const emit = defineEmits(['update:datetimeChanged'])
+const emit = defineEmits(['updated'])
 
 // State
 const showPopup = ref(false)
@@ -169,8 +173,9 @@ const monthIndex = computed(() => {
 const daysOfWeek = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat']
 const firstDay = computed(() => new Date(currentYear.value, monthIndex.value).getDay())
 const daysInMonth = computed(() => {
-  return Array.from({ length: new Date(currentYear.value, monthIndex.value + 1, 0).getDate() }, (_, i) => new Date(currentYear.value, monthIndex.value, i + 1))
-})
+  const days = new Date(currentYear.value, monthIndex.value + 1, 0).getDate();
+  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'))
@@ -359,10 +364,12 @@ const emitDateTimeChanged = () => {
   }
 
   // Emit the formatted string
-  emit('update:datetimeChanged', result.trim());
+  emit('updated', result.trim());
 };
 
-onMounted(() => document.addEventListener('click', handleClickOutside))
+if(props.popup) {
+  onMounted(() => document.addEventListener('click', handleClickOutside))
+}
 onUnmounted(() => document.removeEventListener('click', handleClickOutside))
 </script>
 

package/dist/runtime/composables/useLocalStorage.d.ts

@@ -1 +1 @@
-export declare const useLocalStorage: <T>(key: string, initialValue: T) => [T | null] extends [import("vue").Ref<any, any>] ? import("@vue/shared").IfAny<import("vue").Ref<any, any> & T, import("vue").Ref<import("vue").Ref<any, any> & T, import("vue").Ref<any, any> & T>, import("vue").Ref<any, any> & T> : import("vue").Ref<import("vue").UnwrapRef<T> | null, T | import("vue").UnwrapRef<T> | null>;
+export declare const useLocalStorage: <T>(key: string, initialValue: T) => any;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "manolis-ui",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "My new Nuxt module",
   "repository": "manolis-trading/manolis-ui",
   "license": "MIT",
@@ -44,6 +44,7 @@
     "@nuxt/test-utils": "^3.14.4",
     "@nuxtjs/tailwindcss": "^6.12.2",
     "@types/node": "latest",
+    "@types/vue": "^1.0.31",
     "autoprefixer": "^10.4.20",
     "changelogen": "^0.5.7",
     "eslint": "^9.15.0",