From e6cae1aec98e0f61405554cd09dbf1150b257a9d Mon Sep 17 00:00:00 2001
From: Arina Yakovenko <yakovenko_arina@ma-al.com>
Date: Mon, 8 Jul 2024 13:24:09 +0200
Subject: [PATCH] add changes

---
 app.vue                                       | 276 +++++++++++++++---
 modules/module.ts                             |  12 +
 package.json                                  |   2 +-
 src/components/Ml/DropDown/MlDropDown.vue     |  88 +++---
 src/components/Ml/DropDown/MlDropDownItem.vue |   1 +
 5 files changed, 293 insertions(+), 86 deletions(-)

diff --git a/app.vue b/app.vue
index f0311fb..4bad47a 100644
--- a/app.vue
+++ b/app.vue
@@ -1,90 +1,274 @@
 <template>
-  <div>
-    <MlButton
+  <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-red-600 to-accent2' },
+          inner: { class: 'dark:bg-gradient-to-r bg-white' },
+        }"
+      >
+        Let's talk
+      </MlButton>
+
+      <!-- MlPaginator: Handles item pagination. Customize the appearance and behavior via props. Listens to changes with @update:paginatedItems to manage displayed items. -->
+      <MlPaginator
+        :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: '' },
-        outer: { class: 'bg-gradient-to-r from-green-300 to-red-400' },
-        inner: { class: 'dark:bg-gradient-to-r bg-white' },
+        slider: { class: '' },
+        counter: { class: '' },
       }"
+      class="my-[50px] relative z-30"
     >
-      Let's talk
-    </MlButton>
+      <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>
 
-    <h1 class="text-3xl bg-black text-white">
-      Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt,
-      laborum.
-    </h1>
+    <!-- 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",
-    href: "YourGold.cz",
-    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",
+    title:
+      "How to enforce conventional commits using git-cliff with a CI pipeline?",
+    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",
-    href: "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",
+    title: "Understanding JavaScript Promises",
+    date: "02.07.2024",
+    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",
-    href: "E-commerce",
-    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",
+    title: "An Introduction to WebAssembly",
+    date: "03.07.2024",
+    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",
-    href: "Hosting",
-    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",
+    title: "Building Responsive Web Applications",
+    date: "04.07.2024",
+    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",
-    href: "YourGol",
-    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",
+    title: "Exploring the Basics of Machine Learning",
+    date: "05.07.2024",
+    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",
-    href: "new-href-1",
-    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",
+    title: "Getting Started with Docker",
+    date: "06.07.2024",
+    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",
-    href: "new-href-2",
-    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",
+    title: "Introduction to Kubernetes",
+    date: "07.07.2024",
+    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,
-    title: "New Title 3",
-    href: "new-href-3",
-    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",
+    header: "E-commerce",
+    content: {
+      title: "Mobile App Development",
+      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,
-    title: "New Title 4",
-    href: "new-href-4",
-    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",
+    header: "Business Management and ERP Systems",
+    content: {
+      title: "Digital Marketing",
+      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,
-    title: "New Title 5",
-    href: "new-href-5",
-    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",
+    header: "Hosting and IT Infrastructure",
+    content: {
+      title: "Web App Development",
+      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>
diff --git a/modules/module.ts b/modules/module.ts
index 8c6d26e..54a0a78 100644
--- a/modules/module.ts
+++ b/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: {
diff --git a/package.json b/package.json
index fe8585f..3edb7e0 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Ml/DropDown/MlDropDown.vue b/src/components/Ml/DropDown/MlDropDown.vue
index c5b6b2c..c5e4ef1 100644
--- a/src/components/Ml/DropDown/MlDropDown.vue
+++ b/src/components/Ml/DropDown/MlDropDown.vue
@@ -1,61 +1,71 @@
 <template>
-    <div v-click-outside="closeDropDown" :class="rootPT">
-        <button
-            id="dropdownDefaultButton"
-            data-dropdown-toggle="dropdown"
-            :class="titlePT"
-            type="button"
-            @click="
-                useRipple($event, props.ripple);
-                openMenu();
-            "
-        >
-            {{ props.title }}
-            <span :class="arrowPT">
-                <ml-arrow></ml-arrow>
-            </span>
-        </button>
-        <div v-show="isMenuOpen" :class="dropdownPT" @click="isOpen = false">
-            <slot />
-        </div>
+  <div v-click-outside="closeDropDown" :class="rootPT">
+    <button
+      id="dropdownDefaultButton"
+      data-dropdown-toggle="dropdown"
+      :class="titlePT"
+      type="button"
+      @click="
+        useRipple($event, props.ripple);
+        openMenu();
+      "
+    >
+      {{ props.title }}
+      <span :class="arrowPT">
+        <ml-arrow></ml-arrow>
+      </span>
+    </button>
+    <div v-show="isMenuOpen" :class="dropdownPT" @click="isOpen = false">
+      <slot />
     </div>
+  </div>
 </template>
 <script setup lang="ts">
-import { twMerge } from 'tailwind-merge';
-import type { DropDownProps, DropDownPT } from './types';
+import { computed, ref } from "vue";
+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'
-    },
-    dropdown: {
-        class: 'z-10 absolute bg-white dark:bg-BgDark/85 rounded-3xl pointer text-black dark:text-white text-center'
-    },
-    title: {
-        class: 'text-black dark:text-BgLight inline-flex items-center rounded-lg font-medium text-center text-base pointer '
-    },
-    arrow: {
-        class: 'px-2'
-    }
+  root: {
+    class: "relative pointer",
+  },
+  dropdown: {
+    class:
+      "z-10 absolute bg-white rounded-3xl pointer text-black text-center",
+  },
+  title: {
+    class:
+      "text-black inline-flex items-center rounded-lg font-medium text-center text-base pointer ",
+  },
+  arrow: {
+    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 dropdownPT = computed(() => twMerge(PT.dropdown?.class, props.pt?.dropdown?.class));
-const arrowPT = computed(() => twMerge(PT.arrow?.class, props.pt?.arrow?.class));
+const titlePT = computed(() =>
+  twMerge(PT.title?.class, props.pt?.title?.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);
 
 function openMenu() {
-    isOpen.value = !isOpen.value;
+  isOpen.value = !isOpen.value;
 }
 
 function closeDropDown() {
-    isOpen.value = false;
+  isOpen.value = false;
 }
 
 const isMenuOpen = computed(() => isOpen.value);
diff --git a/src/components/Ml/DropDown/MlDropDownItem.vue b/src/components/Ml/DropDown/MlDropDownItem.vue
index ab4e091..1c8dc02 100644
--- a/src/components/Ml/DropDown/MlDropDownItem.vue
+++ b/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';