add changes

app.vue

@@ -1,90 +1,274 @@
 <template>
-  <div>
+  <div class="flex flex-col gap-10 bg-white dark:bg-BgDarkSecond p-10">
+    <div
+      class="flex items-center justify-center gap-20 relative w-[1200px] mx-auto"
+    >
+      <!-- MlButton: This button can be used for various actions like form submissions or dialog openings. Customize its appearance using the :pt prop. -->
       <MlButton
         :pt="{
           root: { class: '' },
-        outer: { class: 'bg-gradient-to-r from-green-300 to-red-400' },
+          outer: { class: 'bg-gradient-to-r from-red-600 to-accent2' },
           inner: { class: 'dark:bg-gradient-to-r bg-white' },
         }"
       >
         Let's talk
       </MlButton>
 
-    <h1 class="text-3xl bg-black text-white">
+      <!-- MlPaginator: Handles item pagination. Customize the appearance and behavior via props. Listens to changes with @update:paginatedItems to manage displayed items. -->
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt,
+      <MlPaginator
-      laborum.
+        :items="items"
+        :items-per-page="2"
+        :max-pages-shown="2"
+        @update:paginatedItems="handlePaginatedItems"
+        v-model="currentPage"
+        :pt="{
+          root: {
+            class:
+              'flex space-x-1 bg-white/85 dark:bg-BgDark/85 shadow-custom-lrb items-center px-3 py-2 rounded-full dark:text-white',
+          },
+          paginator: { class: 'bg-red-500' },
+          activePaginator: { class: 'bg-accent2 dark:bg-accent1' },
+        }"
+      />
+
+      <!-- MlDropDown: A customizable dropdown menu component for selecting options. 
+       Use the :pt prop to define styles for the root, dropdown, title, and arrow sections.
+       The dropdown supports multiple items which can be styled individually using the :pt prop for each MlDropDownItem. -->
+
+      <MlDropDown
+        title="Dropdown"
+        :title="''"
+        :pt="{
+          root: { class: 'w-10 h-10 text-left absolute left-0 z-0' },
+          dropdown: {
+            class:
+              'w-[150px] right-[-50px] absolute mt-4 shadow-custom-lrb dark:shadow-custom-drb block',
+          },
+          title: { class: 'w-[30px] h-10' },
+          arrow: { class: 'hidden' },
+        }"
+      >
+        <!-- Each MlDropDownItem represents an option in the dropdown menu. Style each item and define click behavior for interactivity. -->
+        <MlDropDownItem :pt="{ root: { class: 'block px-1 py-3' } }">
+          <span
+            class="w-full cursor-pointer font-medium flex items-center justify-center"
+            >English</span
+          >
+        </MlDropDownItem>
+        <MlDropDownItem :pt="{ root: { class: 'block px-1 py-3' } }">
+          <span
+            class="w-full cursor-pointer font-medium flex items-center justify-center"
+            >Polis</span
+          >
+        </MlDropDownItem>
+      </MlDropDown>
+
+      <!-- MlThemeSwitch: A button for toggling between light and dark themes. Does not require additional props for basic functionality. -->
+      <MlThemeSwitch />
+    </div>
+
+    <!-- MlSlider: Displays a series of items as a slider. Use the :pt prop to style it and the default slot to customize the content of each slide. -->
+    <MlSlider
+      :items="items"
+      :direction="'horizontal'"
+      :pt="{
+        root: { class: '' },
+        slider: { class: '' },
+        counter: { class: '' },
+      }"
+      class="my-[50px] relative z-30"
+    >
+      <template #default="{ item }">
+        <div
+          class="bg-white/85 dark:bg-BgDark/85 backdrop-blur-md mx-auto my-4 rounded-3xl w-80 md:w-[800px] shadow-custom-lrb text-black dark:text-white"
+        >
+          <div class="flex justify-between items-center px-8 py-2 border-b-2">
+            <p class="font-semibold text-[12px] uppercase tracking-widest">
+              {{ item.title }}
+            </p>
+            <div
+              class="bg-BgDark dark:bg-BgLight rounded-lg w-5 h-0.5 cursor-pointer"
+            ></div>
+          </div>
+          <div
+            class="flex md:flex-row-reverse flex-col gap-8 py-12 md:py-8 md:w-[800px]"
+          >
+            <div class="flex justify-center w-full">
+              <!-- Placeholder for image content -->
+            </div>
+            <div class="flex flex-col gap-4 mx-8">
+              <h1 class="font-bold text-2xl md:text-[32px]">
+                {{ item.title }}
               </h1>
+              <p class="font-ibm text-lg">
+                {{ item.info }}
+              </p>
+            </div>
+          </div>
+        </div>
+      </template>
+    </MlSlider>
+
+    <!-- MlSliderPoint: Similar to MlSlider but intended for full-page content viewing. Customize its layout and appearance using the :pt prop and slots. -->
+    <div class="flex w-full justify-center text-black dark:text-white">
+      <MlSliderPoint
+        :direction="direction"
+        :pt="{
+          root: {
+            class:
+              'px-5 w-full flex items-center justify-center flex-col md:max-w-[1200px] lg:flex-row md:justify-between md:gap-20 lg:gap-0',
+          },
+          slider: { class: 'w-full h-full md:max-h-[470px]' },
+          counter: { class: 'lg:rotate-90 z-10 w-[220px] md:w-[280px]' },
+        }"
+      >
+        <div
+          class="opacity-90 mx-auto rounded-3xl w-80 md:max-w-[800px] md:w-full h-full"
+        >
+          <div
+            class="flex md:flex-row flex-col items-center gap-8 py-12 md:py-0 w-full h-full"
+          >
+            <div class="w-full">
+              <!-- Placeholder for image content -->
+            </div>
+            <div class="flex flex-col gap-4 mb-4">
+              <h1 class="font-bold text-2xl md:text-[32px]">YourGold.cz</h1>
+              <div class="flex items-center gap-2 font-ibm">
+                <p class="bg-accent2 dark:bg-accent1 px-3 py-1 rounded-md">
+                  Tag one
+                </p>
+                <p class="bg-accent2 dark:bg-accent1 px-3 py-1 rounded-md">
+                  Tag two
+                </p>
+                <p class="bg-accent2 dark:bg-accent1 px-3 py-1 rounded-md">
+                  Tag three
+                </p>
+              </div>
+              <p class="font-ibm text-[16px]">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+                Suspendisse varius enim in eros elementum tristique. Duis
+                cursus, mi quis viverra ornare, eros dolor interdum nulla, ut
+                commodo diam libero vitae erat.
+              </p>
+            </div>
+          </div>
+        </div>
+      </MlSliderPoint>
+    </div>
+
+    <!-- Tabber Component: Use this for tabbed data display. Bind the tabs data structure to manage different tab content dynamically. -->
+    <div
+      class="max-w-[1200px] mx-auto border-[1.5px] border-gray-400 rounded-2xl text-black dark:text-white"
+    >
+      <MlTabberBase :tabs="tabs" />
+    </div>
   </div>
 </template>
 
-<script>
+<script setup>
+// Setup script for handling paginator and tab data.
 const currentItems = ref([]);
 const currentPage = ref(1);
-
 const handlePaginatedItems = (items) => {
   currentItems.value = items;
 };
-
+// Array of items to be displayed and managed by MlPaginator.
 const items = [
   {
     id: 1,
-    title: "YourGold.cz",
+    title:
-    href: "YourGold.cz",
+      "How to enforce conventional commits using git-cliff with a CI pipeline?",
-    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat",
+    date: "01.07.2024",
+    persone1: "Natalia Goc",
+    persone2: "Marek Goc",
+    info: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
   },
   {
     id: 2,
-    title: "Web App Development",
+    title: "Understanding JavaScript Promises",
-    href: "Web App Development",
+    date: "02.07.2024",
-    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat",
+    persone1: "John Doe",
+    persone2: "Jane Smith",
+    info: "JavaScript promises are used to handle asynchronous operations. They provide an alternative approach to callbacks by returning a value in the future.",
   },
   {
     id: 3,
-    title: "E-commerce",
+    title: "An Introduction to WebAssembly",
-    href: "E-commerce",
+    date: "03.07.2024",
-    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat",
+    persone1: "Alice Johnson",
+    persone2: "Bob Brown",
+    info: "WebAssembly is a binary instruction format for a stack-based virtual machine, designed as a portable target for compilation of high-level languages like C, C++, and Rust.",
   },
   {
     id: 4,
-    title: "Hosting",
+    title: "Building Responsive Web Applications",
-    href: "Hosting",
+    date: "04.07.2024",
-    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat",
+    persone1: "Emily White",
+    persone2: "Chris Green",
+    info: "Responsive web design ensures that web applications work well on a variety of devices, providing an optimal user experience across different screen sizes.",
   },
   {
     id: 5,
-    title: "Development",
+    title: "Exploring the Basics of Machine Learning",
-    href: "YourGol",
+    date: "05.07.2024",
-    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat",
+    persone1: "Michael Lee",
+    persone2: "Sara Kim",
+    info: "Machine learning is a field of artificial intelligence that uses statistical techniques to give computer systems the ability to learn from data.",
   },
   {
     id: 6,
-    title: "New Title 1",
+    title: "Getting Started with Docker",
-    href: "new-href-1",
+    date: "06.07.2024",
-    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat",
+    persone1: "David Brown",
+    persone2: "Laura Black",
+    info: "Docker is a tool designed to make it easier to create, deploy, and run applications by using containers, which allow a developer to package up an application with all of its parts.",
   },
   {
     id: 7,
-    title: "New Title 2",
+    title: "Introduction to Kubernetes",
-    href: "new-href-2",
+    date: "07.07.2024",
-    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat",
+    persone1: "James Wilson",
+    persone2: "Olivia Martin",
+    info: "Kubernetes is an open-source platform designed to automate deploying, scaling, and operating application containers, providing a framework to run distributed systems resiliently.",
+  },
+];
+
+// Array of tabber to be displayed and managed by MlTabberBase.
+const tabs = [
+  {
+    header: "Web App Development",
+    content: {
+      title: "Web App Development",
+      info: "From simple business portfolios to complex interactive web applications, we can realize almost any service available through the Web. We will take care of the aesthetics, accessibility, stability and performance of your web application.",
+    },
   },
   {
-    id: 8,
+    header: "E-commerce",
-    title: "New Title 3",
+    content: {
-    href: "new-href-3",
+      title: "Mobile App Development",
-    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat",
+      info: "E-commerce services have became a fundamental element of many well prospering businesses. Having our own experience with it we will be able to help you with the high expectations of your online customers.",
+    },
   },
   {
-    id: 9,
+    header: "Business Management and ERP Systems",
-    title: "New Title 4",
+    content: {
-    href: "new-href-4",
+      title: "Digital Marketing",
-    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat",
+      info: "Well designed IT infrastructure can be a key element in your company’s success. With us you will discover how modern software can help you manage your business.",
+    },
   },
   {
-    id: 10,
+    header: "Hosting and IT Infrastructure",
-    title: "New Title 5",
+    content: {
-    href: "new-href-5",
+      title: "Web App Development",
-    text: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique.Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat",
+      info: "We are ready to fill any gaps in your infrastructure. Working with us you won’t have to worry about managing complex costs or hardware resources.",
+    },
+  },
+  {
+    header: "IT Consulting",
+    content: {
+      title: "IT Consulting",
+      info: "We are happy to share our experiences with other companies. Besides free consulting during project cost evaluation we offer our knowledge as an independent and affordable service.",
+    },
   },
 ];
 </script>

modules/module.ts

@@ -13,6 +13,18 @@ const components = [
     name: "MlButton",
     path: "../src/components/Ml/Button/MlButton.vue",
   },
+  {
+    name: "MlPaginator",
+    path: "../src/components/Ml/Paginator/MlPaginator.vue",
+  },
+  {
+    name: "MlDropDown",
+    path: "../src/components/Ml/DropDown/MlDropDown.vue",
+  },
+  {
+    name: "MlDropDownItem",
+    path: "../src/components/Ml/DropDown/MlDropDownItem.vue",
+  },
 ];
 export default defineNuxtModule<ModuleOptions>({
   meta: {

package.json

@@ -3,7 +3,7 @@
   "version": "1.2.6",
   "private": false,
   "type": "module",
-  "main": "app.vue",
+  "main": "index.js",
   "scripts": {
     "build": "nuxt build",
     "prepack": "nuxt build",

src/components/Ml/DropDown/MlDropDown.vue

@@ -21,32 +21,42 @@
   </div>
 </template>
 <script setup lang="ts">
-import { twMerge } from 'tailwind-merge';
+import { computed, ref } from "vue";
-import type { DropDownProps, DropDownPT } from './types';
+import { useRipple } from "#imports";
+import { twMerge } from "tailwind-merge";
+import type { DropDownProps, DropDownPT } from "./types";
 
 const props = withDefaults(defineProps<DropDownProps>(), {
-    isOpen: false
+  isOpen: false,
 });
 
 const PT = {
   root: {
-        class: 'relative pointer'
+    class: "relative pointer",
   },
   dropdown: {
-        class: 'z-10 absolute bg-white dark:bg-BgDark/85 rounded-3xl pointer text-black dark:text-white text-center'
+    class:
+      "z-10 absolute bg-white rounded-3xl pointer text-black text-center",
   },
   title: {
-        class: 'text-black dark:text-BgLight inline-flex items-center rounded-lg font-medium text-center text-base pointer '
+    class:
+      "text-black inline-flex items-center rounded-lg font-medium text-center text-base pointer ",
   },
   arrow: {
-        class: 'px-2'
+    class: "px-2",
-    }
+  },
 } as DropDownPT;
 
 const rootPT = computed(() => twMerge(PT.root?.class, props.pt?.root?.class));
-const titlePT = computed(() => twMerge(PT.title?.class, props.pt?.title?.class));
+const titlePT = computed(() =>
-const dropdownPT = computed(() => twMerge(PT.dropdown?.class, props.pt?.dropdown?.class));
+  twMerge(PT.title?.class, props.pt?.title?.class)
-const arrowPT = computed(() => twMerge(PT.arrow?.class, props.pt?.arrow?.class));
+);
+const dropdownPT = computed(() =>
+  twMerge(PT.dropdown?.class, props.pt?.dropdown?.class)
+);
+const arrowPT = computed(() =>
+  twMerge(PT.arrow?.class, props.pt?.arrow?.class)
+);
 
 const isOpen = ref(props.isOpen);
 

src/components/Ml/DropDown/MlDropDownItem.vue

@@ -5,6 +5,7 @@
 </template>
 
 <script setup lang="ts">
+import { computed, ref } from "vue";
 import { twMerge } from 'tailwind-merge';
 import type { DropDownItemPT, DropDownItemProps } from './types';