manolis-ui 1.0.12 → 1.1.0

package/README.md

@@ -35,6 +35,39 @@ Install the module to your Nuxt application with one command:
 npx nuxi module add manolis-ui
 ```
 
+
+Or install it as a npm package:
+```bash
+npm install manolis-ui daisyui@latest tailwindcss postcss autoprefixer lucide-vue-next
+```
+
+add manolis ui and tailwind to your project:
+
+```typescript
+export default defineNuxtConfig({
+  modules: ['manolis-ui', '@nuxtjs/tailwindcss'],
+    manolisUI: {
+      prefix: "",
+      global: false,
+      disableGlobalStyles: false,
+    },
+  })
+  ```
+
+Create a tailwind.config.ts
+
+```typescript
+import { darkMode } from '#tailwind-config'
+import type { Config } from 'tailwindcss'
+
+export default <Partial<Config>>{
+    // or further daisy ui settings see https://daisyui.com/docs/config/
+    daisyui: {
+      themes: ["light", "dark", "cupcake"]  //you can add custom themes aswell
+    }
+}
+```
+
 That's it! You can now use Manolis UI in your Nuxt app ✨
 
 
@@ -45,29 +78,29 @@ That's it! You can now use Manolis UI in your Nuxt app ✨
   
   ```bash
   # Install dependencies
-  yarn install
+  pnpm install
   
   # Generate type stubs
-  yarn run dev:prepare
+  pnpm dev:prepare
   
   # Develop with the playground
-  yarn run dev
+  pnpm dev
   
   # Build the playground
-  yarn run dev:build
+  pnpm dev:build
   
   # Run ESLint
-  yarn run lint
+  pnpm lint
   
   # Run Vitest
-  yarn run test
-  yarn run test:watch
+  pnpm test
+  pnpm test:watch
   
   # Release new version
-  yarn run release
+  pnpm release
 
   # Storybook
-  yarn run storybook
+  pnpm storybook
   ```
 
 </details>
@@ -84,4 +117,4 @@ That's it! You can now use Manolis UI in your Nuxt app ✨
 [license-href]: https://npmjs.com/package/manolis-ui
 
 [nuxt-src]: https://img.shields.io/badge/Nuxt-020420?logo=nuxt.js
-[nuxt-href]: https://nuxt.com
+[nuxt-href]: https://nuxt.com

package/dist/module.d.mts

@@ -1,14 +1,10 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
-interface ThemeOptions {
-    name: string;
-}
-interface ModuleOptions {
-    css: boolean;
-    theme?: ThemeOptions;
-}
 interface ModuleOptions {
+    prefix?: string;
+    global?: boolean;
+    disableGlobalStyles?: boolean;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { type ModuleOptions, type ThemeOptions, _default as default };
+export { type ModuleOptions, _default as default };

package/dist/module.d.ts

@@ -1,14 +1,10 @@
 import * as _nuxt_schema from '@nuxt/schema';
 
-interface ThemeOptions {
-    name: string;
-}
-interface ModuleOptions {
-    css: boolean;
-    theme?: ThemeOptions;
-}
 interface ModuleOptions {
+    prefix?: string;
+    global?: boolean;
+    disableGlobalStyles?: boolean;
 }
 declare const _default: _nuxt_schema.NuxtModule<ModuleOptions, ModuleOptions, false>;
 
-export { type ModuleOptions, type ThemeOptions, _default as default };
+export { type ModuleOptions, _default as default };

package/dist/module.json

@@ -1,7 +1,10 @@
 {
   "name": "manolis-ui",
+  "version": "1.1.0",
   "configKey": "manolisUI",
-  "version": "1.0.12",
+  "compatibility": {
+    "nuxt": ">=3.10.0"
+  },
   "builder": {
     "@nuxt/module-builder": "0.8.4",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,42 +1,126 @@
-import { defineNuxtModule, createResolver, addPlugin, installModule, addComponentsDir } from '@nuxt/kit';
+import { addTemplate, installModule, useNuxt, createResolver, defineNuxtModule, addPlugin, addComponentsDir, addImportsDir } from '@nuxt/kit';
+import { createRequire } from 'node:module';
+import { join } from 'pathe';
+import { defu } from 'defu';
 
+
+
+// -- Unbuild CommonJS Shims --
+import __cjs_url__ from 'url';
+import __cjs_path__ from 'path';
+import __cjs_mod__ from 'module';
+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";
+
+function installTailwind(moduleOptions, nuxt = useNuxt(), resolve = createResolver(import.meta.url).resolve) {
+  const runtimeDir = resolve("./runtime");
+  nuxt.hook("tailwindcss:config", function(tailwindConfig) {
+    tailwindConfig.theme = tailwindConfig.theme || {};
+    tailwindConfig.theme.extend = tailwindConfig.theme.extend || {};
+    tailwindConfig.theme.extend.colors = tailwindConfig.theme.extend.colors || {};
+    nuxt.options.appConfig.ui = {
+      primary: "green",
+      gray: "cool",
+      strategy: "merge"
+    };
+  });
+  const configTemplate = addTemplate({
+    filename: "nuxtui-tailwind.config.cjs",
+    write: true,
+    getContents: ({ nuxt: nuxt2 }) => `
+      const { defaultExtractor: createDefaultExtractor } = require('tailwindcss/lib/lib/defaultExtractor.js')
+
+      const defaultExtractor = createDefaultExtractor({ tailwindConfig: { separator: ':' } })
+
+      module.exports = {
+        plugins: [
+          require('daisyui')
+        ],
+        content: {
+          files: [
+            ${JSON.stringify(resolve(runtimeDir, "components/**/*.{vue,mjs,ts}"))},
+            ${JSON.stringify(resolve(runtimeDir, "ui.config/**/*.{mjs,js,ts}"))}
+          ],
+          transform: {
+            vue: (content) => {
+              return content.replaceAll(/(?:\\r\\n|\\r|\\n)/g, ' ')
+            }
+          },
+          extract: {
+            vue: (content) => {
+              return defaultExtractor(content)
+            }
+          }
+        },
+        daisyui: {
+          themes: ["light", "dark"],
+        },
+      }
+    `
+  });
+  const { configPath: userTwConfigPath = [], ...twModuleConfig } = nuxt.options.tailwindcss ?? {};
+  const twConfigPaths = [
+    configTemplate.dst,
+    join(nuxt.options.rootDir, "tailwind.config")
+  ];
+  if (typeof userTwConfigPath === "string") {
+    twConfigPaths.push(userTwConfigPath);
+  } else {
+    twConfigPaths.push(...userTwConfigPath);
+  }
+  return installModule("@nuxtjs/tailwindcss", defu({
+    exposeConfig: true,
+    config: {
+      darkMode: "class"
+    },
+    configPath: twConfigPaths
+  }, twModuleConfig));
+}
+
+createRequire(import.meta.url);
 const module = defineNuxtModule({
   meta: {
-    name: "manolis-ui",
-    configKey: "manolisUI"
+    name,
+    version,
+    configKey: "manolisUI",
+    compatibility: {
+      nuxt: ">=3.10.0"
+    }
   },
-  // Default configuration options of the Nuxt module
   defaults: {
-    css: true
+    prefix: "",
+    disableGlobalStyles: false
   },
-  async setup(_options, _nuxt) {
-    const resolver = createResolver(import.meta.url);
-    addPlugin(resolver.resolve("./runtime/plugin"));
-    await installModule("@nuxtjs/tailwindcss", {
-      /**
-       * Here, you specify where your config is.
-       * By default, the module have a configPath relative
-       * to the current path, ie the playground !
-       * (or the app using your module)
-       */
-      cssPath: _options.css ? resolver.resolve("./runtime/assets/css/tailwind.css") : false,
-      configPath: resolver.resolve("../tailwind.config")
-    });
-    addComponentsDir({
-      path: resolver.resolve("./runtime/components"),
-      pathPrefix: false,
-      prefix: "",
-      global: true
-    });
-    _nuxt.hook("nitro:config", async (nitroConfig) => {
-      nitroConfig.publicAssets ||= [];
-      nitroConfig.publicAssets.push({
-        dir: resolver.resolve("./runtime/assets"),
-        // path of assets
-        maxAge: 60 * 60 * 24 * 365
-        // cache assets for 1 year
+  async setup(options, nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    const runtimeDir = resolve("./runtime");
+    nuxt.options.build.transpile.push(runtimeDir);
+    nuxt.options.build.transpile.push("nuxt-lucide-icons");
+    await installTailwind(options, nuxt, resolve);
+    if (!options.disableGlobalStyles) {
+      nuxt.options.css.push(resolve(runtimeDir, "ui.css"));
+    }
+    addPlugin(resolve("./runtime/plugin"));
+    const componentDirs = [
+      "actions",
+      "data-display",
+      "data-input",
+      "feedback",
+      "layout",
+      "misc",
+      "navigation"
+    ];
+    for (const dir of componentDirs) {
+      addComponentsDir({
+        path: resolve(runtimeDir, "components", dir),
+        prefix: options.prefix,
+        global: options.global
       });
-    });
+    }
+    addImportsDir(resolve(runtimeDir, "composables"));
   }
 });
 

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

@@ -9,7 +9,7 @@ interface Props {
 }
 
 const props = withDefaults(defineProps<Props>(), {
-    theme: 'reserveren-dark',
+    theme: 'dark',
 });
 
 // Use the composable for localStorage functionality
@@ -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) => {
@@ -42,7 +40,7 @@ watch(themeValue, (newValue) => {
             class="theme-controller"
             v-model="themeValue"
             :true-value="'light'"
-            :false-value="'reserveren-dark'"
+            :false-value="'dark'"
         />
         <!-- Sun icon for light mode -->
         <Sun class="swap-off fill-current"></Sun>

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,371 @@
+<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(() => {
+  return Array.from({ length: new Date(currentYear.value, monthIndex.value + 1, 0).getDate() }, (_, 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/dist/runtime/plugin.d.ts

@@ -1,2 +1,2 @@
-declare const _default: import("nuxt/app").Plugin<Record<string, unknown>> & import("nuxt/app").ObjectPlugin<Record<string, unknown>>;
+declare const _default: any;
 export default _default;

package/dist/runtime/plugin.js

@@ -1,4 +1,4 @@
-import { defineNuxtPlugin } from "nuxt/app";
+import { defineNuxtPlugin } from "#app";
 export default defineNuxtPlugin((_nuxtApp) => {
-  console.log("Design System injected by manolis-ui!");
+  console.log("Plugin injected by manolis-ui!");
 });

package/dist/types.d.mts

@@ -1 +1 @@
-export { type ModuleOptions, type ThemeOptions, default } from './module.js'
+export { type ModuleOptions, default } from './module.js'

package/dist/types.d.ts

@@ -1 +1 @@
-export { type ModuleOptions, type ThemeOptions, default } from './module'
+export { type ModuleOptions, default } from './module'

package/package.json

@@ -1,18 +1,16 @@
 {
   "name": "manolis-ui",
-  "version": "1.0.12",
-  "description": "A modern design system made for vue based on daisy UI",
+  "version": "1.1.0",
+  "description": "My new Nuxt module",
   "repository": "manolis-trading/manolis-ui",
-  "license": "Apache-2.0",
+  "license": "MIT",
   "type": "module",
   "exports": {
     ".": {
       "types": "./dist/types.d.ts",
       "import": "./dist/module.mjs",
       "require": "./dist/module.cjs"
-    },
-    "./components/ButtonComponent": "./dist/runtime/components/actions/ButtonComponent.vue"
-
+    }
   },
   "main": "./dist/module.cjs",
   "types": "./dist/types.d.ts",
@@ -20,55 +18,42 @@
     "dist"
   ],
   "scripts": {
-    "start": "NODE_OPTIONS='--no-experimental-require-module' nuxi",
-    "prepack": "nuxt-module-build",
-    "dev": "npm run dev-playground",
-    "dev-playground": "nuxi dev playground",
-    "dev:build": "nuxi build playground",
-    "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground",
-    "release": "npm run lint && npm run test && npm run prepack && changelogen --release && npm publish && git push --follow-tags",
-    "lint": "eslint .",
+    "prepack": "nuxt-module-build build --no-fail-on-warnings",
+    "dev": "nuxi dev playground",
+    "dev:build": "nuxi build playground --no-fail-on-warnings",
+    "dev:prepare": "nuxt-module-build build --stub --no-fail-on-warnings && nuxt-module-build prepare --no-fail-on-warnings && nuxi prepare playground --no-fail-on-warnings",
+    "release": "npm run prepack && changelogen --release && npm publish && git push --follow-tags",
+    "lint": "eslint --max-warnings=0 .",
     "test": "vitest run",
-    "test:watch": "vitest watch"
-},
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+  },
   "dependencies": {
-    "@nuxt/kit": "^3.14.159",
-    "lucide-vue-next": "^0.460.0"
+    "@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": {
-    "@chromatic-com/storybook": "^3.2.2",
-    "@nuxt/devtools": "^1.6.0",
+    "@nuxt/devtools": "^1.6.1",
     "@nuxt/eslint-config": "^0.7.1",
     "@nuxt/module-builder": "^0.8.4",
-    "@nuxt/schema": "^3.14.159",
+    "@nuxt/schema": "^3.14.1592",
     "@nuxt/test-utils": "^3.14.4",
     "@nuxtjs/tailwindcss": "^6.12.2",
-    "@storybook/addon-essentials": "8.5.0-alpha.7",
-    "@storybook/addon-interactions": "8.5.0-alpha.7",
-    "@storybook/addon-links": "^8.4.4",
-    "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/blocks": "8.5.0-alpha.7",
-    "@storybook/test": "8.5.0-alpha.7",
-    "@storybook/vue3": "8.5.0-alpha.7",
-    "@storybook/vue3-vite": "8.5.0-alpha.7",
-    "@types/node": "^22.9.1",
-    "@vitejs/plugin-vue": "^5.2.0",
+    "@types/node": "latest",
+    "autoprefixer": "^10.4.20",
     "changelogen": "^0.5.7",
-    "daisyui": "^4.12.14",
     "eslint": "^9.15.0",
-    "eslint-plugin-storybook": "^0.11.1",
-    "nuxt": "^3.14.159",
-    "storybook": "8.5.0-alpha.7",
-    "storybook-addon-vue-slots": "^0.9.29",
+    "nuxt": "^3.14.1592",
+    "nuxt-lucide-icons": "^1.0.5",
+    "postcss": "^8.4.49",
+    "tailwindcss": "^3.4.15",
     "typescript": "latest",
     "vitest": "^2.1.5",
-    "vue": "^3.2",
     "vue-tsc": "^2.1.10"
   },
-  "packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e",
-  "eslintConfig": {
-    "extends": [
-      "plugin:storybook/recommended"
-    ]
-  }
+  "packageManager": "pnpm@9.14.2+sha512.6e2baf77d06b9362294152c851c4f278ede37ab1eba3a55fda317a4a17b209f4dbb973fb250a77abc463a341fcb1f17f17cfa24091c4eb319cda0d9b84278387"
 }

package/.vscode/settings.json

@@ -1,3 +0,0 @@
-{
-  "eslint.experimental.useFlatConfig": true
-}

package/CHANGELOG.md

@@ -1 +0,0 @@
-- no changes- no changes- no changes- no changes- no changes- no changes- no changes- no changes- no changes- no changes

package/CHANGELOG_NEW.md

@@ -1 +0,0 @@
-- no changes

package/LICENSE

@@ -1,201 +0,0 @@
-                                 Apache License
-                           Version 2.0, January 2004
-                        http://www.apache.org/licenses/
-
-   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
-   1. Definitions.
-
-      "License" shall mean the terms and conditions for use, reproduction,
-      and distribution as defined by Sections 1 through 9 of this document.
-
-      "Licensor" shall mean the copyright owner or entity authorized by
-      the copyright owner that is granting the License.
-
-      "Legal Entity" shall mean the union of the acting entity and all
-      other entities that control, are controlled by, or are under common
-      control with that entity. For the purposes of this definition,
-      "control" means (i) the power, direct or indirect, to cause the
-      direction or management of such entity, whether by contract or
-      otherwise, or (ii) ownership of fifty percent (50%) or more of the
-      outstanding shares, or (iii) beneficial ownership of such entity.
-
-      "You" (or "Your") shall mean an individual or Legal Entity
-      exercising permissions granted by this License.
-
-      "Source" form shall mean the preferred form for making modifications,
-      including but not limited to software source code, documentation
-      source, and configuration files.
-
-      "Object" form shall mean any form resulting from mechanical
-      transformation or translation of a Source form, including but
-      not limited to compiled object code, generated documentation,
-      and conversions to other media types.
-
-      "Work" shall mean the work of authorship, whether in Source or
-      Object form, made available under the License, as indicated by a
-      copyright notice that is included in or attached to the work
-      (an example is provided in the Appendix below).
-
-      "Derivative Works" shall mean any work, whether in Source or Object
-      form, that is based on (or derived from) the Work and for which the
-      editorial revisions, annotations, elaborations, or other modifications
-      represent, as a whole, an original work of authorship. For the purposes
-      of this License, Derivative Works shall not include works that remain
-      separable from, or merely link (or bind by name) to the interfaces of,
-      the Work and Derivative Works thereof.
-
-      "Contribution" shall mean any work of authorship, including
-      the original version of the Work and any modifications or additions
-      to that Work or Derivative Works thereof, that is intentionally
-      submitted to Licensor for inclusion in the Work by the copyright owner
-      or by an individual or Legal Entity authorized to submit on behalf of
-      the copyright owner. For the purposes of this definition, "submitted"
-      means any form of electronic, verbal, or written communication sent
-      to the Licensor or its representatives, including but not limited to
-      communication on electronic mailing lists, source code control systems,
-      and issue tracking systems that are managed by, or on behalf of, the
-      Licensor for the purpose of discussing and improving the Work, but
-      excluding communication that is conspicuously marked or otherwise
-      designated in writing by the copyright owner as "Not a Contribution."
-
-      "Contributor" shall mean Licensor and any individual or Legal Entity
-      on behalf of whom a Contribution has been received by Licensor and
-      subsequently incorporated within the Work.
-
-   2. Grant of Copyright License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      copyright license to reproduce, prepare Derivative Works of,
-      publicly display, publicly perform, sublicense, and distribute the
-      Work and such Derivative Works in Source or Object form.
-
-   3. Grant of Patent License. Subject to the terms and conditions of
-      this License, each Contributor hereby grants to You a perpetual,
-      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-      (except as stated in this section) patent license to make, have made,
-      use, offer to sell, sell, import, and otherwise transfer the Work,
-      where such license applies only to those patent claims licensable
-      by such Contributor that are necessarily infringed by their
-      Contribution(s) alone or by combination of their Contribution(s)
-      with the Work to which such Contribution(s) was submitted. If You
-      institute patent litigation against any entity (including a
-      cross-claim or counterclaim in a lawsuit) alleging that the Work
-      or a Contribution incorporated within the Work constitutes direct
-      or contributory patent infringement, then any patent licenses
-      granted to You under this License for that Work shall terminate
-      as of the date such litigation is filed.
-
-   4. Redistribution. You may reproduce and distribute copies of the
-      Work or Derivative Works thereof in any medium, with or without
-      modifications, and in Source or Object form, provided that You
-      meet the following conditions:
-
-      (a) You must give any other recipients of the Work or
-          Derivative Works a copy of this License; and
-
-      (b) You must cause any modified files to carry prominent notices
-          stating that You changed the files; and
-
-      (c) You must retain, in the Source form of any Derivative Works
-          that You distribute, all copyright, patent, trademark, and
-          attribution notices from the Source form of the Work,
-          excluding those notices that do not pertain to any part of
-          the Derivative Works; and
-
-      (d) If the Work includes a "NOTICE" text file as part of its
-          distribution, then any Derivative Works that You distribute must
-          include a readable copy of the attribution notices contained
-          within such NOTICE file, excluding those notices that do not
-          pertain to any part of the Derivative Works, in at least one
-          of the following places: within a NOTICE text file distributed
-          as part of the Derivative Works; within the Source form or
-          documentation, if provided along with the Derivative Works; or,
-          within a display generated by the Derivative Works, if and
-          wherever such third-party notices normally appear. The contents
-          of the NOTICE file are for informational purposes only and
-          do not modify the License. You may add Your own attribution
-          notices within Derivative Works that You distribute, alongside
-          or as an addendum to the NOTICE text from the Work, provided
-          that such additional attribution notices cannot be construed
-          as modifying the License.
-
-      You may add Your own copyright statement to Your modifications and
-      may provide additional or different license terms and conditions
-      for use, reproduction, or distribution of Your modifications, or
-      for any such Derivative Works as a whole, provided Your use,
-      reproduction, and distribution of the Work otherwise complies with
-      the conditions stated in this License.
-
-   5. Submission of Contributions. Unless You explicitly state otherwise,
-      any Contribution intentionally submitted for inclusion in the Work
-      by You to the Licensor shall be under the terms and conditions of
-      this License, without any additional terms or conditions.
-      Notwithstanding the above, nothing herein shall supersede or modify
-      the terms of any separate license agreement you may have executed
-      with Licensor regarding such Contributions.
-
-   6. Trademarks. This License does not grant permission to use the trade
-      names, trademarks, service marks, or product names of the Licensor,
-      except as required for reasonable and customary use in describing the
-      origin of the Work and reproducing the content of the NOTICE file.
-
-   7. Disclaimer of Warranty. Unless required by applicable law or
-      agreed to in writing, Licensor provides the Work (and each
-      Contributor provides its Contributions) on an "AS IS" BASIS,
-      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-      implied, including, without limitation, any warranties or conditions
-      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-      PARTICULAR PURPOSE. You are solely responsible for determining the
-      appropriateness of using or redistributing the Work and assume any
-      risks associated with Your exercise of permissions under this License.
-
-   8. Limitation of Liability. In no event and under no legal theory,
-      whether in tort (including negligence), contract, or otherwise,
-      unless required by applicable law (such as deliberate and grossly
-      negligent acts) or agreed to in writing, shall any Contributor be
-      liable to You for damages, including any direct, indirect, special,
-      incidental, or consequential damages of any character arising as a
-      result of this License or out of the use or inability to use the
-      Work (including but not limited to damages for loss of goodwill,
-      work stoppage, computer failure or malfunction, or any and all
-      other commercial damages or losses), even if such Contributor
-      has been advised of the possibility of such damages.
-
-   9. Accepting Warranty or Additional Liability. While redistributing
-      the Work or Derivative Works thereof, You may choose to offer,
-      and charge a fee for, acceptance of support, warranty, indemnity,
-      or other liability obligations and/or rights consistent with this
-      License. However, in accepting such obligations, You may act only
-      on Your own behalf and on Your sole responsibility, not on behalf
-      of any other Contributor, and only if You agree to indemnify,
-      defend, and hold each Contributor harmless for any liability
-      incurred by, or claims asserted against, such Contributor by reason
-      of your accepting any such warranty or additional liability.
-
-   END OF TERMS AND CONDITIONS
-
-   APPENDIX: How to apply the Apache License to your work.
-
-      To apply the Apache License to your work, attach the following
-      boilerplate notice, with the fields enclosed by brackets "[]"
-      replaced with your own identifying information. (Don't include
-      the brackets!)  The text should be enclosed in the appropriate
-      comment syntax for the file format. We also recommend that a
-      file or class name and description of purpose be included on the
-      same "printed page" as the copyright notice for easier
-      identification within third-party archives.
-
-   Copyright [yyyy] [name of copyright owner]
-
-   Licensed under the Apache License, Version 2.0 (the "License");
-   you may not use this file except in compliance with the License.
-   You may obtain a copy of the License at
-
-       http://www.apache.org/licenses/LICENSE-2.0
-
-   Unless required by applicable law or agreed to in writing, software
-   distributed under the License is distributed on an "AS IS" BASIS,
-   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-   See the License for the specific language governing permissions and
-   limitations under the License.

package/dist/runtime/assets/css/tailwind.css

@@ -1 +0,0 @@
-@tailwind base;@tailwind components;@tailwind utilities;