manolis-ui 1.0.16 → 1.1.1

package/dist/module.json

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

package/dist/runtime/components/actions/theme-controller.vue

@@ -24,9 +24,7 @@ function updateTheme(theme: string) {
 }
 
 // Apply the theme on mounted (client-side only)
-onMounted(() => {
-    updateTheme(themeValue.value);
-});
+onMounted(() => updateTheme(themeValue.value));
 
 // Watch themeValue changes and update localStorage
 watch(themeValue, (newValue) => {

package/dist/runtime/components/data-display/avatar.vue

@@ -25,7 +25,7 @@ watch(
 
 <template>
     <div class="avatar" :class="onlineStatus">
-        <div class="rounded-full" v-if="image">
+        <div class="rounded" v-if="image">
             <img :src="image" class="w-24">
         </div>
 

package/dist/runtime/components/data-display/card.vue

@@ -2,49 +2,55 @@
 import { ref, watch } from 'vue';
 
 interface Props {
-    imgUrl: string;
-    alt?: string;
-    title?: string;
-    description?: string;
-    outlined?: boolean;
+  imgUrl: string;
+  alt?: string;
+  title?: string;
+  description?: string;
+  outlined?: boolean;
+  loading: boolean;
 }
-  
-  const props = withDefaults(defineProps<Props>(), {
-    imgUrl: "",
-    alt: "A beautiful picture that says something about this card",
-    title: '',
-    outlined: false,
-    description: ""
-  });
 
-  const outlined = ref<boolean>(props.outlined);
+const props = withDefaults(defineProps<Props>(), {
+  imgUrl: "",
+  alt: "A beautiful picture that says something about this card",
+  title: '',
+  outlined: false,
+  description: "",
+  loading: false
+});
 
-  watch(
-    () => props.outlined,
-    (newValue) => {
-        outlined.value = newValue;
-    }
-  );
+const outlined = ref<boolean>(props.outlined);
+
+watch(
+  () => props.outlined,
+  (newValue) => {
+    outlined.value = newValue;
+  }
+);
 </script>
 
 
 <template>
-    <div class="card card-compact bg-base-100 max-w-80 min-w-64 shadow-xl rounded group h-full" :class="outlined ? 'border-4 border-primary' : ''">
+  <div class="card card-compact bg-base-100 max-w-80 min-w-64 shadow-xl rounded group h-full"
+    :class="outlined ? 'border-4 border-primary' : ''">
     <figure>
-        <img
-        :src="imgUrl"
-        :alt="alt"
-        class="object-cover w-full rounded"
-        v-if="imgUrl"
-        />
+      <img :src="imgUrl" :alt="alt" class="object-cover w-full rounded" v-if="imgUrl || imgUrl && !loading" />
+      <div class="skeleton h-32 w-full" v-if="loading"></div>
     </figure>
-    <div class="card-body">
-        <h2 class="card-title text-lg text-left group-hover:text-primary cursor-pointer" v-if="title">{{ title }}</h2>
-        <slot name="details"></slot>
-        <p class="text-left" v-if="description">{{ description }}</p>
-        <div class="card-actions flex-col flex-nowrap">
-         <slot name="actions" />
-        </div>
+    <div class="card-body" v-if="!loading">
+      <h2 class="card-title text-lg text-left group-hover:text-primary cursor-pointer" v-if="title">{{ title }}</h2>
+      <slot name="details"></slot>
+      <p class="text-left" v-if="description">{{ description }}</p>
+      <div class="card-actions flex-col flex-nowrap">
+        <slot name="actions" />
+      </div>
     </div>
+    <div class="card-body">
+      <div class="flex w-52 flex-col gap-4">
+        <div class="skeleton h-4 w-28"></div>
+        <div class="skeleton h-4 w-full"></div>
+        <div class="skeleton h-4 w-full"></div>
+      </div>
     </div>
+  </div>
 </template>

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

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { Search } from 'lucide-vue-next';
+import { ref } from 'vue';
+
+
+interface Props {
+  categories: Array<string>;
+}
+const props = defineProps<Props>();
+const currentCategory = ref(props.categories[0]);
+
+const emit = defineEmits(['category-changed']);
+
+function setCurrentCategory(category: string) {
+    currentCategory.value = category;
+    emit('category-changed', category);
+}
+
+</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 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>
+        </button>
+        <!-- <div class="divider divider-horizontal h-10"></div> -->
+        
+    </div>
+    <!-- search button -->
+     <button title="search" type="submit" class="btn btn-primary btn-square ml-1"><Search :size="24" color="white" /></button>
+  </div>
+</template>

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

@@ -0,0 +1,372 @@
+<template>
+  <div class="relative inline-block" ref="pickerContainer">
+    <div class="flex items-center gap-2 cursor-pointer" @click="togglePopup">
+      <slot>
+        <input
+          type="text"
+          class="input input-bordered w-full cursor-pointer"
+          :placeholder="placeholder"
+          :value="formattedValue"
+          readonly
+          :id="inputId" 
+        />
+        <button class="btn btn-ghost">
+          📅
+        </button>
+      </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="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">
+            <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"> 
+          <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"> 
+          <option v-for="year in years" :key="year" :value="year">{{ year }}</option>
+        </select>
+
+        <button class="btn 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>
+        </button>
+      </div>
+
+      <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)">
+          {{ 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="!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>
+            <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>
+          </div>
+        </div>
+        <div v-else class="flex gap-4 flex-col">
+          <div>
+            <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>
+              <select class="select select-bordered w-full" v-model="selectedPeriod.start" @change="emitDateTimeChanged">
+                <option value="AM">AM</option>
+                <option value="PM">PM</option>
+              </select>
+            </div>
+          </div>
+          <div>
+            <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>
+              <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>
+            </div>
+          </div>
+        </div>
+      </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>
+      </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',
+  },
+  id: {
+    type: String,
+    default: 'datetimepicker', 
+  }
+})
+
+// Emits
+const emit = defineEmits(['update:datetimeChanged'])
+
+// 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: 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 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(() => {
+  return 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: 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 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-GB');
+    const endDate = selectedDate.value.end.toLocaleDateString('en-GB');
+    return `${startDate} - ${endDate}`;
+  } 
+
+  if (!props.range && selectedDate.value) {
+    return selectedDate.value.toLocaleDateString('en-GB');
+  }
+
+  return '';
+});
+
+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) {
+    return isMobile.value
+      ? selectedTime.value
+      : `<span class="math-inline">\{selectedHour\.value\}\:</span>{selectedMinute.value} ${selectedPeriod.value}`;
+  }
+
+  return '';
+});
+
+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 '';
+});
+
+
+// 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) => {
+  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()
+  }
+}
+
+const isToday = (date) => {
+  const today = new Date()
+  return date.getDate() === today.getDate() &&
+    date.getMonth() === today.getMonth() &&
+    date.getFullYear() === today.getFullYear()
+}
+
+const isRangeStart = (date) => {
+  return props.range && selectedDate.value.start && date.getTime() === selectedDate.value.start.getTime()
+}
+
+const isRangeEnd = (date) => {
+  return props.range && 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
+  }
+  return false
+}
+
+
+// Month navigation
+const previousMonth = () => {
+  let newMonth = monthIndex.value - 1
+  if (newMonth < 0) {
+    newMonth = 11
+    currentYear.value--
+  }
+  currentMonth.value = months[newMonth]
+}
+
+const nextMonth = () => {
+  let newMonth = monthIndex.value + 1
+  if (newMonth > 11) {
+    newMonth = 0
+    currentYear.value++
+  }
+  currentMonth.value = months[newMonth]
+}
+
+// Close on outside click
+const handleClickOutside = (event) => {
+  if (pickerContainer.value && !pickerContainer.value.contains(event.target) && showPopup.value == true) {
+    closeAndEmit()
+  }
+}
+
+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');
+    }
+  }
+
+  // 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}`;
+    }
+  }
+
+  // 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;
+  }
+
+  // Emit the formatted string
+  emit('update:datetimeChanged', result.trim());
+};
+
+onMounted(() => document.addEventListener('click', handleClickOutside))
+onUnmounted(() => document.removeEventListener('click', handleClickOutside))
+</script>
+
+<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>

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

@@ -1,15 +1,13 @@
 <script lang="ts" setup></script>
 
 <template>
-    <nav class="navbar border-b-4 border-primary px-5 py-5">
+    <nav class="navbar border-b-4 border-primary px-5 py-5 place-items-start">
         <div class="navbar-start flex-1">
-            <!-- <a href="#" class="w-fit"><img src="/images/logo.svg"></a> -->
+            <slot name="start"></slot>
         </div>
         
-        <div class="navbar-center flex-1 hidden md:block">
-            <div class="form-control">
-                <input type="text" placeholder="Search" class="input input-bordered w-24 md:w-auto" />
-            </div>
+        <div class="navbar-center flex-auto hidden md:block">
+            <slot name="center"></slot>
         </div>
 
         <div class="navbar-end flex-1">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "manolis-ui",
-  "version": "1.0.16",
+  "version": "1.1.1",
   "description": "My new Nuxt module",
   "repository": "manolis-trading/manolis-ui",
   "license": "MIT",
@@ -32,6 +32,8 @@
     "@nuxt/kit": "^3.14.1592",
     "daisyui": "^4.12.14",
     "defu": "^6.1.4",
+    "lucide": "^0.462.0",
+    "lucide-vue-next": "^0.462.0",
     "pathe": "^1.1.2"
   },
   "devDependencies": {