manolis-ui 0.0.11 → 0.0.13

package/src/components/data-display/carousel.vue

@@ -1,34 +0,0 @@
-<script setup lang="ts">
-// interface Props {
-//     snapTo?: "start" | "center" | "end";
-//     vertical?: boolean;
-// }
-
-// interface Carousel {
-
-// }
-
-// interface CarouselItem {
-
-// }
-
-// const props = withDefaults(defineProps<Props>(), {
-//     snapTo: "start",
-//     vertical: false
-//   });
-
-</script>
-
-<template>
-    <div class="carousel">
-        <div class="carousel-item">
-            <img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" alt="">
-        </div>
-        <div class="carousel-item">
-            <img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" alt="">
-        </div>
-        <div class="carousel-item">
-            <img src="https://img.daisyui.com/images/stock/photo-1559703248-dcaaec9fab78.webp" alt="">
-        </div>
-    </div>
-</template>

package/src/components/data-input/advancedSearch.vue

@@ -1,227 +0,0 @@
-<script setup lang="ts">
-import { ref, defineProps, defineAsyncComponent, nextTick } from 'vue';
-import { Search } from 'lucide-vue-next';
-import { onMounted } from 'vue';
-import { onBeforeUnmount } from 'vue';
-
-interface Tab {
-  name: string | any;
-  description: string;
-  type: "datetime";
-  range: boolean;
-  props?: Object;
-  value?: any;
-}
-
-interface Props {
-  searchOptions: Array<{ category: string; tabs: Tab[] }>;
-  currentCategory: string;
-}
-
-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);
-
-// 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', transform: 'translateX(0%)' });
-const searchContainer = ref<HTMLElement | null>(null);
-
-// made this function compatible with mobile and with desktop
-function componentValueUpdated(data: any, currentTab: number) {
-
-  if (activeTab.value?.name) {
-    emit('update:search-data', {
-      tab: activeTab.value.name,
-      data: data
-    })
-    return;
-  }
-  if(props.searchOptions) {
-    let _currentTab = props.searchOptions?.find((option: { category: any; }) => option?.category === props.currentCategory)?.tabs[currentTab]
-    if(_currentTab !== undefined) {
-      _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();
-
-  const tabElement = tabRefs.value[tab.name];
-  if (tabElement) {
-    const rect = tabElement.getBoundingClientRect();
-    const parentRect = searchContainer.value?.getBoundingClientRect() || { left: 0, top: 0 };
-
-    // 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);
-  }
-}
-
-
-
-onMounted(() => {
-  document.addEventListener('click', handleOutsideClick);
-});
-
-onBeforeUnmount(() => {
-  document.removeEventListener('click', handleOutsideClick);
-});
-</script>
-
-<template>
-  <div ref="searchContainer" class="w-full">
-    <!-- desktop/tablet -->
-    <div
-      class="group/search relative flex place-items-center border-2 shadow-md p-2 border-base-300/25 rounded-sm w-full transition-all cursor-pointer md:cursor-auto"
-      @click="openMobileView">
-      <div class="flex gap-4 bg-base-100 w-full tabs tabs-boxed">
-        <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 relative after:top-0 after:-right-2 after:absolute first-of-type:flex-auto last-of-type:flex-auto md:after:content-[''] last-of-type:after:content-none after:content-none after:bg-base-200 hover:bg-base-200 p-1 rounded-sm w-auto after:w-[1px] after:h-10 text-start overflow-x-hidden pointer-events-none md:pointer-events-auto"
-          :ref="(el: HTMLElement | any) => tabRefs[tab.name] = el">
-          <p class="text-sm">{{ tab.name }}</p>
-          <p class="md:block hidden opacity-35 text-xs truncate overflow-hidden ...">{{ tab.description }}</p>
-        </button>
-      </div>
-
-      <div class="absolute flex shadow-sm mt-4 w-fit max-w-full transition-all tab-content" v-if="activeTab" :style="popupStyle">
-        <component :is="componentMap[activeTab.type]" v-bind="activeTab.props ? activeTab.props : null"
-          @updated="componentValueUpdated" />
-      </div>
-
-      <button title="search" type="submit" class="ml-1 btn btn-primary btn-square" @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="font-bold text-lg">{{ currentCategory }}</h3>
-      </slot>
-
-      <div class="bg-base-200 my-4 collapse"
-        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="flex justify-between items-center pr-4 w-full font-medium text-xl collapse-title">{{ tab.name }} <p class="text-sm">{{ tab.description }}</p></div>
-        <div class="flex place-content-center p-0 collapse-content">
-          <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;
-  z-index: 10;
-  transform-origin: top center;
-  transition: opacity 0.3s ease;
-}
-
-.tabs-boxed :is(.tab-active, [aria-selected=true]):not(.tab-disabled):not([disabled]),
-.tabs-boxed :is(input:checked) {
-  background-color: var(--color-base-300);
-  color: var(--color-base-content);}
-
-/* Mobile specific styles for centering the popup */
-@media (max-width: 768px) {
-  .tab-content {
-    width: 100%;
-    /* Ensure it can take full width */
-    left: 50%;
-    transform: translateX(-50%);
-    top: auto;
-    /* Adjust top position as needed */
-    bottom: 0;
-    /* Position it just below the tabs or adjust as needed */
-  }
-}
-
-@media (min-width: 769px) {
-  .tab-content {
-    /* Ensure that popup on larger screens stays near the tab and doesn't stretch too wide */
-    width: auto;
-    left: unset;
-    transform: unset;
-  }
-}
-</style>

package/src/components/data-input/datetimePicker.vue

@@ -1,402 +0,0 @@
-<template>
-  <div class="inline-block relative w-full lg:w-[360px]" ref="pickerContainer">
-    <div class="flex items-center gap-2 cursor-pointer" @click="togglePopup">
-      <slot v-if="popup">
-        <input
-          type="text"
-          class="input-bordered w-full cursor-pointer input"
-          :placeholder="placeholder"
-          :value="formattedValue"
-          readonly
-          :id="inputId"
-        />
-        <button class="btn btn-ghost">
-          📅
-        </button>
-      </slot>
-    </div>
-
-    <div v-if="showPopup || !popup" class="z-50 lg:bg-base-100 md:mt-2 md:p-4 px-4 rounded-md w-full" :class="[{ absolute: popup }]" :id="popupId">
-      <div v-if="showDate" class="flex justify-between items-center place-content-center mb-4">
-        <button class="hidden md:block btn-outline btn btn-primary md:btn-sm" @click="previousMonth">
-          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-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="border-none w-fit select" v-model="currentMonth" @change="emitDateTimeChanged">
-          <option v-for="(month, index) in months" :key="index" :value="month">{{ month }}</option>
-        </select>
-
-        <select class="border-none w-24 select" v-model="currentYear" @change="emitDateTimeChanged">
-          <option v-for="year in years" :key="year" :value="year">{{ year }}</option>
-        </select>
-
-        <button class="hidden md:block btn-outline btn btn-primary md:btn-sm" @click="nextMonth">
-          <svg xmlns="http://www.w3.org/2000/svg" class="w-4 h-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>
-        </button>
-      </div>
-
-      <div v-if="showDate" class="gap-2 grid grid-cols-7">
-        <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="hover:bg-primary-10 py-1 rounded-full text-center cursor-pointer" :class="{
-          'bg-primary text-primary-content': isDateSelected(day),
-          'today': isToday(day),
-          'range-start bg-primary text-primary-content': isRangeStart(day),
-          'range-end bg-primary text-primary-content': isRangeEnd(day),
-          'in-range bg-primary/20 hover:bg-primary/10': isInDateRange(day),
-        }" @click="selectDate(day)">
-          {{ day.getDate() }}
-        </div>
-      </div>
-
-      <div v-if="showTime" class="mt-4 lg:w-80">
-        <h3 class="mb-2 font-bold text-lg" v-if="!props.range">Select Time</h3>
-        <div v-if="!props.range">
-          <input v-if="isMobile" type="time" class="input-bordered w-full input" v-model="selectedTime" @change="emitDateTimeChanged" />
-          <div v-else class="flex gap-4">
-            <select class="w-full select-bordered select" 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="w-full select-bordered select" 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>
-        <div v-else class="flex flex-col gap-4">
-          <div>
-            <p class="font-bold">Start Time</p>
-            <input v-if="isMobile" type="time" class="input-bordered w-full input" v-model="selectedTime.start" @change="emitDateTimeChanged" />
-            <div v-else class="flex gap-2">
-              <select class="w-full select-bordered select" 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="w-full select-bordered select" 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>
-          <div>
-            <p class="font-bold">End Time</p>
-            <input v-if="isMobile" type="time" class="input-bordered w-full input" v-model="selectedTime.end" @change="emitDateTimeChanged" />
-            <div v-else class="flex gap-2">
-              <select class="w-full select-bordered select" 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="w-full select-bordered select" 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>
-        </div>
-      </div>
-
-      <div class="flex gap-2 mt-4">
-        <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>
-</template>
-
-<script setup>
-import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
-
-// Props
-const props = defineProps({
-  mode: {
-    type: String,
-    default: 'datetime', // 'datetime', 'date', 'time'
-    validator: (value) => ['datetime', 'date', 'time'].includes(value),
-  },
-  range: {
-    type: Boolean,
-    default: false,
-  },
-  placeholder: {
-    type: String,
-    default: 'Select date and time',
-  },
-  popup: {
-    type: Boolean,
-    default: false,
-  },
-  id: {
-    type: String,
-    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'])
-
-// State
-const showPopup = ref(false)
-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: 0, end: 0 } : 0);
-const selectedMinute = ref(props.range ? { start: 0, end: 0 } : 0); 
-
-const pickerContainer = ref(null)
-
-// Computed properties for IDs
-const inputId = computed(() => `${props.id}-input`);
-const popupId = computed(() => `${props.id}-popup`);
-
-// Computed properties
-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(() => 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(() => {
-  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: 24 }, (_, i) => i)
-const minutes = Array.from({ length: 60 }, (_, i) => i)
-const isMobile = computed(() =>
-      typeof navigator !== 'undefined' &&
-      /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(
-        navigator.userAgent
-      )
-    );
-const months = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"]
-const years = computed(() => {
-  const currentYear = new Date().getFullYear()
-  return Array.from({ length: 100 }, (_, i) => currentYear - 50 + i)
-})
-
-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-US');
-    const endDate = selectedDate.value.end.toLocaleDateString('en-US');
-    return `${startDate} - ${endDate}`;
-  }
-
-  if (!props.range && selectedDate.value) {
-    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 '';
-
-  const formatTime = (time) => {
-    const hour = selectedHour.value?.[time] ?? selectedHour.value;
-    const minute = selectedMinute.value?.[time] ?? selectedMinute.value;
-    return isMobile.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 formatTime(); 
-});
-
-const formattedValue = computed(() => {
-  const date = formattedDate.value;
-  const time = formattedTime.value;
-  return `${date} ${time}`.trim(); 
-});
-
-// Methods
-const togglePopup = () => (showPopup.value = !showPopup.value)
-
-const closeAndEmit = () => {
-  emitDateTimeChanged();
-  closePopup();
-}
-
-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();
-};
-
-const selectDate = (date) => {
-  if (props.range) {
-    if (selectedDate.value.start && selectedDate.value.end) {
-      selectedDate.value = { start: date, end: null }
-    } else if (!selectedDate.value.start) {
-      selectedDate.value.start = date
-    } else {
-      selectedDate.value.end = date
-    }
-  } else {
-    selectedDate.value = date
-  }
-  emitDateTimeChanged()
-}
-
-const isDateSelected = (date) => {
-  date = ensureDate(date);
-  if (props.range) {
-    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) => {
-  date = ensureDate(date);
-  const today = new Date();
-  return date.getDate() === today.getDate() &&
-    date.getMonth() === today.getMonth() &&
-    date.getFullYear() === today.getFullYear();
-};
-
-const isRangeStart = (date) => {
-  date = ensureDate(date);
-  return props.range && isValidDate(selectedDate.value.start) && date.getTime() === selectedDate.value.start.getTime();
-};
-
-const isRangeEnd = (date) => {
-  date = ensureDate(date);
-  return props.range && isValidDate(selectedDate.value.end) && date.getTime() === selectedDate.value.end.getTime();
-};
-
-const isInDateRange = (date) => {
-  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;
-};
-
-// Month navigation
-const previousMonth = () => {
-  let newMonth = monthIndex.value - 1
-  if (newMonth < 0) {
-    newMonth = 11
-    currentYear.value--
-  }
-  currentMonth.value = months[newMonth]
-  emitDateTimeChanged()
-}
-
-const nextMonth = () => {
-  let newMonth = monthIndex.value + 1
-  if (newMonth > 11) {
-    newMonth = 0
-    currentYear.value++
-  }
-  currentMonth.value = months[newMonth]
-  emitDateTimeChanged()
-}
-
-// Close on outside click
-const handleClickOutside = (event) => {
-  if (pickerContainer.value && !pickerContainer.value.contains(event.target) && showPopup.value == true) {
-    closeAndEmit()
-  }
-}
-
-const emitDateTimeChanged = () => {
-  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
-    );
-  }
-
-  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) };
-    }
-  }
-
-  // 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();
-  }
-});
-
-if(props.popup) {
-  onMounted(() => document.addEventListener('click', handleClickOutside))
-}
-onUnmounted(() => document.removeEventListener('click', handleClickOutside))
-</script>
-
-<style scoped>
-.input {
-  cursor: pointer;
-}
-</style>