manolis-ui 0.0.1

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

@@ -0,0 +1,98 @@
+<!-- <script setup lang="ts">
+  import { ref, watch, withDefaults } from 'vue';
+  
+  interface Props {
+
+  }
+  
+  const props = withDefaults(defineProps<Props>(), {
+
+  });
+  
+  const rating = ref<number>(props.initialRating);
+  
+  const updateRating = (newRating: number) => {
+    rating.value = newRating;
+  };
+</script>
+
+<template>
+    <input type="text" placeholder="Type here" class="w-full max-w-xs input" v-model="" />
+</template> -->
+
+<script setup lang="ts">
+import { defineProps, defineEmits } from "vue";
+
+// Define props with TypeScript types
+const props = defineProps<{
+  modelValue: string;
+  label?: string;
+  labelSecondary?: string;
+  placeholder?: string;
+  type?: "text" | "password" | "email" | "number" | "tel" | "url" | "search";
+  size: "xs" | "sm" | "md" | "lg";
+  bordered: boolean;
+  inputClass?: string;
+  wrapperClass?: string;
+  helperText?: string;
+  disabled?: boolean;
+  readonly?: boolean;
+  name?: string;
+}>();
+
+// Default prop values
+const {
+  label = "",
+  labelSecondary = "",
+  placeholder = "",
+  bordered = true,
+  type = "text",
+  size = "md",
+  wrapperClass = "",
+  helperText = "",
+  disabled = false,
+  readonly = false,
+  name = "",
+} = props;
+
+// Define emits with TypeScript types
+const emit = defineEmits<{
+  (e: "updated", value: string): void;
+}>();
+
+// Update the input value on user input
+const updateValue = (event: Event) => {
+  const target = event.target as HTMLInputElement;
+  emit("updated", target.value);
+};
+</script>
+
+<template>
+  <div class="form-control w-full" :class="wrapperClass">
+    <!-- Input Label -->
+    <label v-if="label" class="label">
+      <span class="label-text">{{ label }}</span>
+      <span v-if="labelSecondary" class="label-text-alt">{{ labelSecondary }}</span>
+    </label>
+
+    <!-- Input Field -->
+    <input
+      :type="type"
+      :value="modelValue"
+      :placeholder="placeholder"
+      class="w-full input"
+      :class="[`input-${size}` ,{
+        'bordered': bordered,
+      }]"
+      :disabled="disabled"
+      :readonly="readonly"
+      :name="name"
+      @input="updateValue"
+    />
+
+    <!-- Helper Text -->
+    <label v-if="helperText" class="label">
+      <span class="label-text-alt">{{ helperText }}</span>
+    </label>
+  </div>
+</template>

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

@@ -0,0 +1,60 @@
+<script setup lang="ts">
+  import { ref, watch, withDefaults } from 'vue';
+  
+  interface Props {
+    initialRating: number;
+    numberOfStars?: number;
+    halfStars?: boolean;
+    isInteractive?: boolean;
+    size?: "xs" | "sm" | "md" | "lg";
+  }
+  
+  const props = withDefaults(defineProps<Props>(), {
+    initialRating: 0,
+    numberOfStars: 5,
+    halfStars: true,
+    isInteractive: false,
+    size: "sm",
+  });
+  
+  const rating = ref<number>(props.initialRating);
+  
+  watch(
+    () => props.initialRating,
+    (newValue) => {
+      rating.value = newValue;
+    }
+  );
+  
+  const updateRating = (newRating: number) => {
+    rating.value = newRating;
+  };
+</script>
+
+<template>
+    <div class="rating" :class="[
+      `rating-${props.size}`,
+      { 'rating-half': halfStars } 
+    ]">
+      <input
+        v-for="i in numberOfStars * (halfStars ? 2 : 1)"
+        :key="i"
+        type="radio"
+        :value="halfStars ? i * 0.5 : i"
+        :checked="rating === (halfStars ? i * 0.5 : i)"
+        @change="isInteractive ? updateRating(halfStars ? i * 0.5 : i) : null"
+        class="mask mask-star"
+        :class="{
+          'bg-yellow-400': rating >= (halfStars ? i * 0.5 : i),
+          'mask-half-1': halfStars && i % 2 !== 0,
+          'mask-half-2': halfStars && i % 2 === 0,
+          'cursor-pointer': isInteractive,
+          'cursor-default': !isInteractive
+        }"
+        :disabled="!isInteractive"
+      />
+    </div>
+  </template>
+  
+  
+  

package/src/components/feedback/loader.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+
+interface Props {
+    loading?: boolean;
+}
+  
+  const props = withDefaults(defineProps<Props>(), {
+    loading: true,
+  });
+
+  const loading = ref<boolean>(props.loading);
+
+  watch(
+    () => props.loading,
+    (newValue) => {
+        loading.value = newValue;
+    }
+  );
+  
+</script>
+
+<template>
+  <span class="loading loading-spinner loading-md mx-auto " v-if="loading"></span>
+</template>

package/src/components/layout/footer.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+interface Props {
+  items: Array<FooterNavigation>;
+}
+
+const props = defineProps<Props>();
+
+export interface FooterNavigation {
+  title: string;
+  items: Array<FooterNavigationItem>;
+}
+
+interface FooterNavigationItem {
+  text: string;
+  link: string;
+  enabled: Boolean;
+}
+</script>
+
+<template>
+  <footer class="bg-base-200 p-10 text-base-content">
+    <div class="flex lg:flex-row flex-col flex-wrap container space-between">
+      <div class="mb-16 w-full lg:w-2/3 footer">
+        <nav v-for="footerCols in props.items">
+          <h6 class="after:absolute after:flex opacity-100 border-b-4 border-base-300 after:border-b-2 after:border-base-300 after:w-full after:h-1 font-bold text-xl footer-title">{{ footerCols.title }}</h6>
+          <a v-for="footerItem in footerCols.items" class="link link-hover" :href="footerItem.link">{{ footerItem.text
+            }}</a>
+        </nav>
+      </div>
+
+      <slot></slot>
+    </div>
+  </footer>
+</template>
+
+
+<style scoped>
+.footer>* {
+  width: max-content;
+  position: relative
+}
+</style>

package/src/components/layout/hero.vue

@@ -0,0 +1,15 @@
+<template>
+    <div class="min-h-40 container hero">
+        <div class="px-0! text-center hero-content">
+            <div>
+                <h1 class="mt-9 text-4xl">
+                    <slot name="title">hero title</slot>
+                </h1>
+                <p>
+                    <slot name="description" class="py-9" />
+                </p>
+                <slot name="call-to-action-block" class="max-w-full"><button class="btn btn-primary">Call to action</button></slot>
+            </div>
+        </div>
+    </div>
+</template>

package/src/components/navigation/categoryNavigation.vue

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

package/src/components/navigation/navigationBar.vue

@@ -0,0 +1,107 @@
+<script lang="ts" setup>
+// import { ref, watch } from 'vue';
+
+interface Props {
+    isCollapsed: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isCollapsed: true
+});
+
+</script>
+
+<template>
+    <nav class="place-items-start border-primary bg-base-100 px-5 py-5 border-b-4 transition-all navbar navigationbar"
+        :class="props.isCollapsed ? 'collapsed' : ''">
+        <div class="md:flex hidden navbar-start">
+            <slot name="start"></slot>
+        </div>
+
+        <div class="md:flex justify-center items-center hidden navbar-center">
+            <slot name="center"></slot>
+        </div>
+
+        <div class="md:flex hidden navbar-end">
+            <slot name="end"></slot>
+        </div>
+        <div class="navbar-bottom md:flex hidden">
+            <slot name="bottom"></slot>
+        </div>
+    </nav>
+</template>
+
+<style scoped>
+.navigationbar {
+  display: grid;
+  grid-template-columns: auto auto auto;
+  grid-template-rows: auto auto;
+  grid-template-areas:
+    "center center center"
+    "bottom bottom bottom";
+  position: fixed;
+  width: 100% !important;
+  gap: 0 1rem;
+  align-items: center;
+  padding: var(--navbar-padding, 0.5rem);
+  min-height: 4rem;
+  z-index: 5;
+  
+
+  @media (min-width: 768px) {
+    grid-template-columns: 0.7fr 1.6fr 0.7fr;
+    grid-template-areas:
+      "start center end"
+      "bottom bottom bottom";
+
+    grid-row-gap: 2rem;
+    padding: 2rem;
+
+  }
+}
+
+.navbar-start {
+  grid-area: start;
+  height: 100%;
+}
+
+.navbar-center {
+  grid-area: center;
+  width: 100%;
+
+  height: 100%;
+}
+
+.navbar-end {
+  width: 100%;
+  height: 100%;
+  grid-area: end;
+}
+
+.navbar-bottom {
+  grid-area: center;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  @media (min-width: 768px) {
+    grid-area: bottom;
+  }
+}
+
+nav.navigationbar.collapsed {
+  top: 0;
+  z-index: 10;
+  grid-template-columns: auto 1fr auto !important;
+
+  @media (min-width: 768px) {
+    row-gap: 0;
+    padding: 1rem;
+  }
+
+  & .navbar-bottom {
+    grid-area: center !important;
+  }
+}
+</style>

package/src/components/navigation/tab.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { ref, onUnmounted } from 'vue'
+
+interface Props {
+    items: Array<string>;
+    withControlls?: boolean;
+    rotateTabsAfter?: number;//in seconds
+}
+
+const props = defineProps<Props>();
+
+const currentTab = ref(props.items[0]);
+
+// for setting a propperty in the template when needed (dynamic data for example)
+const emit = defineEmits(['tab-changed']);
+
+function setCurrentTab(tab: string) {
+    currentTab.value = tab;
+    emit('tab-changed', tab);
+}
+
+function nextTab() {
+    const currentIndex = props.items.indexOf(currentTab.value);
+    const nextIndex = (currentIndex + 1) % props.items.length;
+    setCurrentTab(props.items[nextIndex]);
+}
+
+function previousTab() {
+    const currentIndex = props.items.indexOf(currentTab.value);
+    const previousIndex = (currentIndex - 1 + props.items.length) % props.items.length;
+    setCurrentTab(props.items[previousIndex]);
+}
+onUnmounted(() => {
+    if (props.rotateTabsAfter) {
+        setInterval(() => {
+            nextTab();
+        }, props.rotateTabsAfter * 1000);
+    }
+})
+
+</script>
+
+<template>
+    <div role="tablist" class="tabs tabs-bordered tabs-lg mt-28 relative w-full">
+        <!-- controls -->
+        <div v-if="withControlls" class="hidden md:flex gap-4 right-0 top-4 absolute">
+            <button @click="previousTab()" class="cursor-pointer">Previous</button>
+            <button @click="nextTab()" class="cursor-pointer text-primary">Next</button>
+        </div>
+        <!-- tab buttons -->
+        <template v-for="item in items">
+            <a type="button" role="tab" class="tab min-w-max"
+                :class="item === currentTab ? 'bg-primary text-base-100' : ''" @click="setCurrentTab(item)"
+                :aria-selected="currentTab == item"> {{ item }}</a>
+            <!-- tab content -->
+            <div role="tabpanel"
+                class="tab-content border-base-300 border-t-2 border-x-0 border-b-0 p-6 overflow-x-auto max-w-full">
+                <slot :name="`${item}-tab`"></slot>
+            </div>
+        </template>
+    </div>
+</template>