manolis-ui 0.1.5 → 0.2.5

package/README.md

@@ -1,5 +1,85 @@
-# Vue 3 + TypeScript + Vite
+# Manolis UI - Accelerate Your Vue 3 Development
 
-This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
+Manolis UI is a high-quality Vue 3 component library meticulously crafted to accelerate your development process without compromising on visual appeal or ease of use. Built on the solid foundation of Tailwind CSS 4 and enhanced with the extensive component set of Daisy UI v5 (including potential additions), Manolis UI provides you with a rich collection of ready-to-use, customizable components. Spend less time building the basics and more time focusing on the unique aspects of your application.
 
-Learn more about the recommended Project Setup and IDE Support in the [Vue Docs TypeScript Guide](https://vuejs.org/guide/typescript/overview.html#project-setup).
+## ✨ Features
+
+* **Comprehensive Component Library:** Includes all components from Daisy UI v5, ensuring you have a wide range of UI elements at your fingertips. We are committed to continuously expanding this library with additional high-quality components where needed.
+* **Interactive Showcase with Storybook:** Explore and experiment with each component in isolation using our integrated Storybook. This provides clear documentation and live examples to understand component behavior and customization options.
+* **Built for Vue 3:** Leverages the latest features and performance improvements of Vue 3, ensuring a modern and efficient development experience.
+* **Beautiful Icons with Lucide:** Features a consistent and elegant set of icons powered by Lucide, enhancing the visual appeal of your application.
+* **Powered by Tailwind CSS 4 and Vite:** Built with the utility-first approach of Tailwind CSS 4 for rapid styling and customization, and bundled with the lightning-fast Vite build tool for an optimized development workflow.
+* **Effortless Integration:** Easily integrate Manolis UI into your existing Vue 3 project with a simple CSS import.
+
+## 🚀 Getting Started
+
+1.  **Installation:** First, ensure you have Tailwind CSS and Daisy UI installed in your Vue 3 project. Follow their respective documentation for installation instructions.
+
+2.  **Install Manolis UI:**
+    ```bash
+    # Using npm
+    npm install manolis-ui
+
+    # Or using yarn
+    yarn add manolis-ui
+
+    # Or using pnpm
+    pnpm add manolis-ui
+    ```
+
+3.  **Import Styles:** Add the following lines to your main CSS file (e.g., `src/assets/main.css` or similar), **after** your Tailwind CSS and Daisy UI imports:
+
+    ```css
+    @source '../../../';
+
+    @plugin "daisyui" {
+      /* themes: light --default; */
+      themes: all;
+      root: ":root";
+    }
+    ```
+
+    **Explanation:**
+    * `@source '../../../';` tells the CSS preprocessor where to find the Manolis UI styles. Adjust the relative path if your `main.css` file is located in a different directory structure.
+    * The `@plugin "daisyui"` block configures Daisy UI themes. Uncomment `themes: light --default;` for a single light theme, or keep `themes: all;` to include all Daisy UI themes.
+
+4.  **Import and Use Components:** You can now import and use individual components in your Vue 3 templates:
+
+    ```vue
+    <template>
+      <ButtonComponent>Click Me</ButtonComponent>
+    </template>
+
+    <script setup>
+    import { ButtonComponent } from 'manolis-ui';
+    </script>
+    ```
+
+## 📖 Documentation and Examples
+
+Explore the full range of components and their usage in our interactive Storybook:
+
+[**[Link to your Storybook deployment here]**](Replace this with the actual link to your deployed Storybook)
+
+Within Storybook, you'll find detailed documentation, live examples, and the ability to customize component properties to see the effects in real-time.
+
+## 🤝 Contributing
+
+We welcome contributions to Manolis UI! If you have suggestions, bug reports, or would like to contribute new components or features, please refer to our [Contributing Guidelines](link-to-contributing-guidelines.md).
+
+## 📄 License
+
+This project is licensed under the **GNU General Public License v3.0**. You can find the full text of the license in the [LICENSE](LICENSE) file.
+
+**Key aspects of the GPL v3.0 license include:**
+
+* **Copyleft:** Any derivative works (modifications or works that include Manolis UI code) must also be licensed under the GPL v3.0.
+* **Attribution:** You must provide appropriate attribution to the original authors of Manolis UI.
+* **Source Code Availability:** You must make the source code of any derivative works available.
+* **Permissions:** The license explicitly grants users permission to run, study, share, and modify the software.
+
+For more details, please refer to the complete [GNU General Public License v3.0](https://www.gnu.org/licenses/gpl-3.0.html).
+
+---
+
+**Enjoy building amazing user interfaces with Manolis UI!**

package/dist/index.d.ts

@@ -10,11 +10,13 @@ active: boolean;
 loading: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
 
-declare const __VLS_component_10: DefineComponent<Props_15, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props_15> & Readonly<{}>, {
+declare const __VLS_component_10: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+
+declare const __VLS_component_11: DefineComponent<Props_15, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props_15> & Readonly<{}>, {
 isCollapsed: boolean;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLElement>;
 
-declare const __VLS_component_11: DefineComponent<Props_16, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
+declare const __VLS_component_12: DefineComponent<Props_16, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {
 "tab-changed": (...args: any[]) => void;
 }, string, PublicProps, Readonly<Props_16> & Readonly<{
 "onTab-changed"?: ((...args: any[]) => any) | undefined;
@@ -72,9 +74,22 @@ data: any;
 searchContainer: HTMLDivElement;
 }, any>;
 
-declare const __VLS_component_8: DefineComponent<Props_13, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props_13> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+declare const __VLS_component_8: DefineComponent<__VLS_Props, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
+"update:modelValue": (value: string[]) => any;
+}, string, PublicProps, Readonly<__VLS_Props> & Readonly<{
+"onUpdate:modelValue"?: ((value: string[]) => any) | undefined;
+}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {
+inputRef: HTMLInputElement;
+}, HTMLDivElement>;
+
+declare const __VLS_component_9: DefineComponent<Props_13, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props_13> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
 
-declare const __VLS_component_9: DefineComponent<    {}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, ComponentProvideOptions, true, {}, HTMLDivElement>;
+declare type __VLS_Props = {
+    modelValue: string[];
+    maxTagAmount?: number;
+    placeholder?: string;
+    class?: string;
+};
 
 declare function __VLS_template(): {
     attrs: Partial<{}>;
@@ -86,6 +101,21 @@ declare function __VLS_template(): {
 };
 
 declare function __VLS_template_10(): {
+    attrs: Partial<{}>;
+    slots: {
+        title?(_: {}): any;
+        description?(_: {
+            class: string;
+        }): any;
+        'call-to-action-block'?(_: {
+            class: string;
+        }): any;
+    };
+    refs: {};
+    rootEl: HTMLDivElement;
+};
+
+declare function __VLS_template_11(): {
     attrs: Partial<{}>;
     slots: {
         start?(_: {}): any;
@@ -97,7 +127,7 @@ declare function __VLS_template_10(): {
     rootEl: HTMLElement;
 };
 
-declare function __VLS_template_11(): {
+declare function __VLS_template_12(): {
     attrs: Partial<{}>;
     slots: Partial<Record<`${string}-tab`, (_: {}) => any>> & {
         default?(_: {}): any;
@@ -178,22 +208,24 @@ declare function __VLS_template_7(): {
 declare function __VLS_template_8(): {
     attrs: Partial<{}>;
     slots: {
-        default?(_: {}): any;
+        tag?(_: {
+            key: string;
+            tag: string;
+        }): any;
+        input?(_: {
+            showInput: boolean;
+        }): any;
+    };
+    refs: {
+        inputRef: HTMLInputElement;
     };
-    refs: {};
     rootEl: HTMLDivElement;
 };
 
 declare function __VLS_template_9(): {
     attrs: Partial<{}>;
     slots: {
-        title?(_: {}): any;
-        description?(_: {
-            class: string;
-        }): any;
-        'call-to-action-block'?(_: {
-            class: string;
-        }): any;
+        default?(_: {}): any;
     };
     refs: {};
     rootEl: HTMLDivElement;
@@ -205,6 +237,8 @@ declare type __VLS_TemplateResult_10 = ReturnType<typeof __VLS_template_10>;
 
 declare type __VLS_TemplateResult_11 = ReturnType<typeof __VLS_template_11>;
 
+declare type __VLS_TemplateResult_12 = ReturnType<typeof __VLS_template_12>;
+
 declare type __VLS_TemplateResult_2 = ReturnType<typeof __VLS_template_2>;
 
 declare type __VLS_TemplateResult_3 = ReturnType<typeof __VLS_template_3>;
@@ -239,6 +273,12 @@ declare type __VLS_WithTemplateSlots_11<T, S> = T & {
     };
 };
 
+declare type __VLS_WithTemplateSlots_12<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+
 declare type __VLS_WithTemplateSlots_2<T, S> = T & {
     new (): {
         $slots: S;
@@ -341,7 +381,7 @@ declare const dropdownPosition: {
     top: string;
 };
 
-export declare const Footer: __VLS_WithTemplateSlots_8<typeof __VLS_component_8, __VLS_TemplateResult_8["slots"]>;
+export declare const Footer: __VLS_WithTemplateSlots_9<typeof __VLS_component_9, __VLS_TemplateResult_9["slots"]>;
 
 declare interface FooterNavigation {
     title: string;
@@ -354,10 +394,13 @@ declare interface FooterNavigationItem {
     enabled: Boolean;
 }
 
-export declare const Hero: __VLS_WithTemplateSlots_9<typeof __VLS_component_9, __VLS_TemplateResult_9["slots"]>;
+export declare const Hero: __VLS_WithTemplateSlots_10<typeof __VLS_component_10, __VLS_TemplateResult_10["slots"]>;
 
 export declare const Loader: DefineComponent<Props_12, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props_12> & Readonly<{}>, {
 loading: boolean;
+type: "spinner" | "dots" | "ring" | "balls" | "bars" | "infinity";
+size: "xs" | "sm" | "md" | "lg" | "xl";
+color: "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "error";
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
 
 export declare const Modal: __VLS_WithTemplateSlots_3<typeof __VLS_component_3, __VLS_TemplateResult_3["slots"]>;
@@ -368,7 +411,7 @@ declare const modalPosition: {
     center: string;
 };
 
-export declare const NavigationBar: __VLS_WithTemplateSlots_10<typeof __VLS_component_10, __VLS_TemplateResult_10["slots"]>;
+export declare const NavigationBar: __VLS_WithTemplateSlots_11<typeof __VLS_component_11, __VLS_TemplateResult_11["slots"]>;
 
 declare interface Props {
     outlined?: boolean;
@@ -397,10 +440,15 @@ declare interface Props_11 {
 
 declare interface Props_12 {
     loading?: boolean;
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    type: "spinner" | "dots" | "ring" | "balls" | "bars" | "infinity";
+    color: "primary" | "secondary" | "accent" | "neutral" | "info" | "success" | "warning" | "error";
 }
 
 declare interface Props_13 {
     items: Array<FooterNavigation>;
+    background?: string;
+    color?: string;
 }
 
 declare interface Props_14 {
@@ -462,13 +510,13 @@ declare interface Props_8 {
 }
 
 declare interface Props_9 {
-    imgUrl: string;
+    imgUrl?: string;
     alt?: string;
     title?: string;
     description?: string;
     outlined?: boolean;
     loading: boolean;
-    class: string;
+    class?: string;
 }
 
 export declare const Rating: DefineComponent<Props_11, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props_11> & Readonly<{}>, {
@@ -481,7 +529,7 @@ isInteractive: boolean;
 
 export declare const Swap: __VLS_WithTemplateSlots_4<typeof __VLS_component_4, __VLS_TemplateResult_4["slots"]>;
 
-export declare const Tab: __VLS_WithTemplateSlots_11<typeof __VLS_component_11, __VLS_TemplateResult_11["slots"]>;
+export declare const Tab: __VLS_WithTemplateSlots_12<typeof __VLS_component_12, __VLS_TemplateResult_12["slots"]>;
 
 declare interface Tab_2 {
     name: string | any;
@@ -501,6 +549,8 @@ declare interface Tab_3 {
     value?: any;
 }
 
+export declare const TagInput: __VLS_WithTemplateSlots_8<typeof __VLS_component_8, __VLS_TemplateResult_8["slots"]>;
+
 export declare const ThemeController: DefineComponent<Props_5, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props_5> & Readonly<{}>, {
 lightTheme: string;
 darkTheme: string;

package/dist/manolis-ui.css

@@ -1 +1 @@
-.tabs button[data-v-08fa37eb]{cursor:pointer}.tab-content[data-v-08fa37eb]{position:absolute;z-index:10;transform-origin:top center;transition:opacity .3s ease}.tabs-boxed[data-v-08fa37eb] :is(.tab-active,[aria-selected=true]):not(.tab-disabled):not([disabled]),.tabs-boxed[data-v-08fa37eb] :is(input:checked){background-color:var(--color-base-300);color:var(--color-base-content)}@media (max-width: 768px){.tab-content[data-v-08fa37eb]{width:100%;left:50%;transform:translate(-50%);top:auto;bottom:0}}@media (min-width: 769px){.tab-content[data-v-08fa37eb]{width:auto;left:unset;transform:unset}}.input[data-v-cb781ab6]{cursor:pointer}.navigationbar[data-v-8ddb2b45]{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, .5rem);min-height:4rem;z-index:5}@media (min-width: 768px){.navigationbar[data-v-8ddb2b45]{grid-template-columns:.7fr 1.6fr .7fr;grid-template-areas:"start center end" "bottom bottom bottom";grid-row-gap:2rem;padding:2rem}}.navbar-start[data-v-8ddb2b45]{grid-area:start;height:100%}.navbar-center[data-v-8ddb2b45]{grid-area:center;width:100%;height:100%}.navbar-end[data-v-8ddb2b45]{width:100%;height:100%;grid-area:end}.navbar-bottom[data-v-8ddb2b45]{grid-area:center;width:100%;display:flex;justify-content:center;align-items:center}@media (min-width: 768px){.navbar-bottom[data-v-8ddb2b45]{grid-area:bottom}}nav.navigationbar.collapsed[data-v-8ddb2b45]{top:0;z-index:10;grid-template-columns:auto 1fr auto!important}@media (min-width: 768px){nav.navigationbar.collapsed[data-v-8ddb2b45]{row-gap:0;padding:1rem}}nav.navigationbar.collapsed .navbar-bottom[data-v-8ddb2b45]{grid-area:center!important}
+.tabs button[data-v-08fa37eb]{cursor:pointer}.tab-content[data-v-08fa37eb]{position:absolute;z-index:10;transform-origin:top center;transition:opacity .3s ease}.tabs-boxed[data-v-08fa37eb] :is(.tab-active,[aria-selected=true]):not(.tab-disabled):not([disabled]),.tabs-boxed[data-v-08fa37eb] :is(input:checked){background-color:var(--color-base-300);color:var(--color-base-content)}@media (max-width: 768px){.tab-content[data-v-08fa37eb]{width:100%;left:50%;transform:translate(-50%);top:auto;bottom:0}}@media (min-width: 769px){.tab-content[data-v-08fa37eb]{width:auto;left:unset;transform:unset}}.input[data-v-488ecabe]{cursor:pointer}.navigationbar[data-v-8ddb2b45]{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, .5rem);min-height:4rem;z-index:5}@media (min-width: 768px){.navigationbar[data-v-8ddb2b45]{grid-template-columns:.7fr 1.6fr .7fr;grid-template-areas:"start center end" "bottom bottom bottom";grid-row-gap:2rem;padding:2rem}}.navbar-start[data-v-8ddb2b45]{grid-area:start;height:100%}.navbar-center[data-v-8ddb2b45]{grid-area:center;width:100%;height:100%}.navbar-end[data-v-8ddb2b45]{width:100%;height:100%;grid-area:end}.navbar-bottom[data-v-8ddb2b45]{grid-area:center;width:100%;display:flex;justify-content:center;align-items:center}@media (min-width: 768px){.navbar-bottom[data-v-8ddb2b45]{grid-area:bottom}}nav.navigationbar.collapsed[data-v-8ddb2b45]{top:0;z-index:10;grid-template-columns:auto 1fr auto!important}@media (min-width: 768px){nav.navigationbar.collapsed[data-v-8ddb2b45]{row-gap:0;padding:1rem}}nav.navigationbar.collapsed .navbar-bottom[data-v-8ddb2b45]{grid-area:center!important}