manolis-ui 0.0.11 → 0.0.13

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

@@ -1,98 +0,0 @@
-<!-- <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

@@ -1,60 +0,0 @@
-<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

@@ -1,25 +0,0 @@
-<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

@@ -1,38 +0,0 @@
-<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>
-  <div class="bg-base-200 mx-auto md:px-10 py-10 text-base-content">
-    <footer class="footer sm:footer-horizontal container">
-      <nav v-for="footerCols in props.items">
-        <h6 class="footer-title">{{ footerCols.title }}</h6>
-        <a
-          v-for="footerItem in footerCols.items"
-          class="link link-hover"
-          :href="footerItem.link"
-          >{{ footerItem.text }}</a
-        >
-      </nav>
-
-      <aside class="ml-auto">
-        <slot></slot>
-      </aside>
-    </footer>
-  </div>
-</template>

package/src/components/layout/hero.vue

@@ -1,15 +0,0 @@
-<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

@@ -1,40 +0,0 @@
-<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

@@ -1,107 +0,0 @@
-<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

@@ -1,62 +0,0 @@
-<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>

package/src/composables/useLocalStorage.ts

@@ -1,24 +0,0 @@
-import { onMounted, ref, watch } from "vue";
-
-// composables/useLocalStorage.ts
-export const useLocalStorage = <T>(key: string, initialValue: T) => {
-    const storedValue = ref<T | null>(null);
-  
-    // Load value from localStorage on mount
-    onMounted(() => {
-      if (typeof window !== 'undefined') {
-        const stored = window.localStorage.getItem(key);
-        storedValue.value = stored ? JSON.parse(stored) : initialValue;
-      }
-    });
-  
-    // Watch the value and save it to localStorage when it changes
-    watch(storedValue, (newValue) => {
-      if (typeof window !== 'undefined') {
-        window.localStorage.setItem(key, JSON.stringify(newValue));
-      }
-    });
-  
-    return storedValue;
-  };
-  

package/src/index.ts

@@ -1,30 +0,0 @@
-// actions src/components
-export { default as ButtonComponent } from './components/actions/ButtonComponent.vue';
-export { default as Dropdown } from './components/actions/dropdown.vue';
-export { default as Modal } from './components/actions/modal.vue';
-export { default as Swap } from './components/actions/swap.vue';
-export { default as ThemeController } from './components/actions/theme-controller.vue';
-
-// data display
-export { default as Accordion } from './components/data-display/accordion.vue';
-export { default as Avatar } from './components/data-display/avatar.vue';
-export { default as Badge } from './components/data-display/badge.vue';
-export { default as Card } from './components/data-display/card.vue';
-
-// data input
-export { default as AdvancedSearch } from './components/data-input/advancedSearch.vue';
-export { default as DatetimePicker } from './components/data-input/datetimePicker.vue';
-export { default as Rating } from './components/data-input/rating.vue';
-
-// feedback
-export { default as Loader } from "./components/feedback/loader.vue";
-
-// layout
-export { default as Footer } from "./components/layout/footer.vue";
-export { default as Hero } from "./components/layout/hero.vue";
-
-// navigation
-export { default as CategoryNavigation } from "./components/navigation/categoryNavigation.vue";
-export { default as NavigationBar } from "./components/navigation/navigationBar.vue";
-export { default as Tab } from "./components/navigation/tab.vue";
-

package/src/main.ts

@@ -1,5 +0,0 @@
-import './style.css'
-import { createApp } from 'vue'
-import App from './App.vue'
-
-createApp(App).mount('#app')

package/src/stories/actions/Button.stories.ts

@@ -1,47 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/vue3';
-import Button from "../../components/actions/ButtonComponent.vue"
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const meta = {
-  title: 'Actions/Buttons',
-  component: Button,
-  parameters: {
-    slots: {
-      default: "Button",
-    },
-  },
-  // This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
-  argTypes: {
-    outlined: { control: 'boolean' },
-    active: { control: 'boolean' },
-    loading: { control: 'boolean' },
-    size: { control: 'select', options: ['wide', 'tiny', 'small', 'large'] },
-    shape: {control: 'select', options: ['square', 'circle']},
-    type: {
-      control: 'select',
-      options: ['neutral', 'primary', 'secondary', 'accent', 'ghost', 'link', 'info', 'success', 'warning', 'error']
-    },
-  },
-
-  args: {
-
-    // primary: false,
-    // Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked: https://storybook.js.org/docs/essentials/actions#action-args
-    // onClick: fn(),
-  },
-} satisfies Meta<typeof Button>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-/*
- *👇 Render functions are a framework specific feature to allow you control on how the component renders.
- * See https://storybook.js.org/docs/api/csf
- * to learn how to use render functions.
- */
-export const Primary: Story = {
-    args: {
-      type: 'primary',
-      default: 'Button',
-    },
-  };

package/src/stories/actions/Dropdown.stories.ts

@@ -1,70 +0,0 @@
-import Dropdown from '../../components/actions/dropdown.vue';
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  title: 'Actions/Dropdown',
-  component: Dropdown,
-  tags: ['autodocs'],
-  argTypes: {
-    items: {
-      control: 'object',
-      description: 'Array of dropdown items with `text` and `link`.',
-    },
-    position: {
-      control: 'select',
-      options: ['left', 'right', 'bottom', 'top'],
-      description: 'Controls the position of the dropdown relative to the button.',
-    },
-    floatPosition: {
-      control: 'select',
-      options: ['start', 'end'],
-      description: 'Determines the float position (start or end).',
-    },
-    openOnHover: {
-      control: 'boolean',
-      description: 'If true, the dropdown opens on hover.',
-    },
-    forceOpen: {
-      control: 'boolean',
-      description: 'If true, the dropdown remains open.',
-    },
-  },
-} as Meta<typeof Dropdown>;
-
-const Template: StoryFn<typeof Dropdown> = (args, { slots }) => ({
-  components: { Dropdown },
-  setup() {
-    return { args, slots };
-  },
-  template: `
-    <Dropdown v-bind="args">
-      <template #default>
-        <div class="btn m-1"><button>Custom Trigger</button></div>
-      </template>
-      <template #additional>
-        <div class="p-2 text-sm">Additional Slot Content</div>
-      </template>
-    </Dropdown>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  items: [
-    { text: 'Item 1', link: '#' },
-    { text: 'Item 2', link: '#' },
-    { text: 'Item 3', link: '#' },
-  ],
-  position: 'bottom',
-  floatPosition: 'start',
-  openOnHover: false,
-  forceOpen: false,
-};
-Default.parameters = {
-  docs: {
-    description: {
-      component:
-        'A dropdown component with configurable props and slots for customization. Be sure to put a button in the default slot to get the desired results!',
-    },
-  },
-};

package/src/stories/actions/Modal.stories.ts

@@ -1,56 +0,0 @@
-import Modal from '../../components/actions/modal.vue';
-import { Meta, StoryFn } from '@storybook/vue3';
-
-export default {
-  title: 'Actions/Modal',
-  component: Modal,
-  tags: ['autodocs'], // Added autodocs tag
-  argTypes: {
-    position: {
-      control: 'select',
-      options: ['top', 'bottom', 'center'],
-      description: 'Controls the position of the modal.',
-    },
-    withBackdrop: {
-      control: 'boolean',
-      description: 'If true, a backdrop is displayed behind the modal.',
-    },
-  },
-} as Meta<typeof Modal>;
-
-const Template: StoryFn<typeof Modal> = (args, { slots }) => ({
-  components: { Modal },
-  setup() {
-    return { args, slots };
-  },
-  template: `
-    <Modal v-bind="args">
-      <template #trigger>
-        <button class="btn">Custom Trigger</button>
-      </template>
-      <template #default>
-        <h2 class="text-xl font-bold">Modal Content</h2>
-        <p>This is an example modal.</p>
-      </template>
-      <template #actions>
-        <button class="btn btn-primary">Confirm</button>
-      </template>
-      <template #close-button>
-        <button class="btn btn-secondary">Dismiss</button>
-      </template>
-    </Modal>
-  `,
-});
-
-export const Default = Template.bind({});
-Default.args = {
-  position: 'center',
-  withBackdrop: true,
-};
-Default.parameters = {
-  docs: {
-    description: {
-      component: 'A customizable modal component with slots for trigger, content, actions, and a close button.',
-    },
-  },
-};