add changes

2024-07-09 11:00:50 +02:00
1 parent 6c19db0c07
commit b61c96f9e5
@@ -19,6 +19,7 @@
          },
        }"
      >
+      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. -->
@@ -140,15 +141,9 @@
            <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-green-300 px-3 py-1 rounded-md">
-                  Tag one
-                </p>
-                <p class="bg-green-300 px-3 py-1 rounded-md">
-                  Tag two
-                </p>
-                <p class="bg-green-300 px-3 py-1 rounded-md">
-                  Tag three
-                </p>
+                <p class="bg-green-300 px-3 py-1 rounded-md">Tag one</p>
+                <p class="bg-green-300 px-3 py-1 rounded-md">Tag two</p>
+                <p class="bg-green-300 px-3 py-1 rounded-md">Tag three</p>
              </div>
              <p class="font-ibm text-[16px]">
                Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -9,7 +9,7 @@
 </template>

 <script setup lang="ts">
-import { useRipple } from "#imports";
+// import { useRipple } from "#imports";
 import { computed, ref } from "vue";
 import type { ButtonProps, PTAttribs } from "./types";
 import { twMerge } from "tailwind-merge";
@@ -1,5 +1,5 @@
 <template>
-  <div v-click-outside="closeDropDown" :class="rootPT">
+  <div :class="rootPT">
    <button
      id="dropdownDefaultButton"
      data-dropdown-toggle="dropdown"
@@ -35,8 +35,7 @@ const PT = {
    class: "",
  },
  dropdown: {
-    class:
-      "z-10 absolute bg-white rounded-3xl pointer text-black text-center",
+    class: "z-10 absolute bg-white rounded-3xl pointer text-black text-center",
  },
  title: {
    class:
@@ -64,9 +63,5 @@ function openMenu() {
  isOpen.value = !isOpen.value;
 }

-function closeDropDown() {
-  isOpen.value = false;
-}
-
 const isMenuOpen = computed(() => isOpen.value);
 </script>
@@ -58,7 +58,7 @@
 </template>

 <script setup lang="ts">
-import { useRipple } from "#imports";
+// import { useRipple } from "#imports";
 import { ref, computed, defineProps, withDefaults } from "vue";
 import { Swiper, SwiperSlide } from "swiper/vue";
 import type { Swiper as swiper } from "swiper/types";
@@ -1,15 +1,10 @@
 <template>
  <div class="flex md:flex-row flex-col text-black">
-    <div class="flex flex-col justify-between md:w-[40%] cursor-pointer">
+    <div class="flex flex-col justify-between cursor-pointer w-[40%]">
      <div
        v-for="(el, index) in props.tabs"
        :key="index"
-        :class="[
-          'w-full px-6 py-4 md:py-8 rtl:text-right text-left border-b border-gray-400 md:text-[18px] md:last:border-b-0 md:h-full flex items-center',
-          index === indexItem
-            ? 'md:border-r-0 font-[700]'
-            : 'md:border-r font-medium',
-        ]"
+        class="w-full px-6 py-4 md:py-8 rtl:text-right text-left border-b border-gray-400 md:text-[18px] md:last:border-b-0 md:h-full flex items-center"
        @click="
          showContent(index);
          useRipple($event, true);
@@ -19,12 +14,12 @@
      </div>
    </div>
    <div v-show="tabs[indexItem]" class="md:flex-1 h-auto">
-      <div class="flex flex-col items-start p-6 md:p-16">
+      <div class="flex flex-col items-start">
        <!-- Your image -->
-        <h1 class="my-5 font-bold text-2xl md:text-[32px]">
+        <h1 class="font-bold text-2xl md:text-[32px]">
          {{ tabs[indexItem].content.title }}
        </h1>
-        <p class="font-ibm text-[16px] md:text-[18px]">
+        <p class="text-[16px] md:text-[18px]">
          {{ tabs[indexItem].content.info }}
        </p>
      </div>
@@ -1,3 +1,13 @@
-import MyModule from './modules/module';
+import { defineNuxtModule } from "@nuxt/kit";

-export default MyModule;
+import { join } from "pathe";
+
+export default defineNuxtModule({
+  hooks: {
+    "components:dirs"(dirs) {
+      dirs.push({
+        path: join(__dirname, "components"),
+      });
+    },
+  },
+});
@@ -1,4 +1,3 @@
-// modules/my-module.ts
 import {
  defineNuxtModule,
  createResolver,
@@ -6,84 +5,94 @@ import {
  addImports,
 } from "@nuxt/kit";

+import { join } from 'pathe';
+
 export interface ModuleOptions {}

 const components = [
  {
    name: "MlButton",
-    path: "../src/components/Ml/Button/MlButton.vue",
+    path: "./components/Ml/Button/MlButton.vue",
  },
  {
    name: "MlPaginator",
-    path: "../src/components/Ml/Paginator/MlPaginator.vue",
+    path: "./components/Ml/Paginator/MlPaginator.vue",
  },
  {
    name: "MlDropDown",
-    path: "../src/components/Ml/DropDown/MlDropDown.vue",
+    path: "./components/Ml/DropDown/MlDropDown.vue",
  },
  {
    name: "MlDropDownItem",
-    path: "../src/components/Ml/DropDown/MlDropDownItem.vue",
-  },
-  {
-    name: "MlDropDownItem",
-    path: "../src/components/Ml/DropDown/MlDropDownItem.vue",
+    path: "./components/Ml/DropDown/MlDropDownItem.vue",
  },
  {
    name: "MlSlider",
-    path: "../src/components/Ml/Slider/MlSlider.vue",
+    path: "./components/Ml/Slider/MlSlider.vue",
  },
  {
    name: "MlSliderPoint",
-    path: "../src/components/Ml/SliderPoint/MlSliderPoint.vue",
+    path: "./components/Ml/SliderPoint/MlSliderPoint.vue",
  },
  {
    name: "MlTabberBase",
-    path: "../src/components/Ml/Tabber/MlTabberBase.vue",
+    path: "./components/Ml/Tabber/MlTabberBase.vue",
+  },
+  {
+    name: "MyComponent",
+    path: "./components/MyComponent",
  },
 ];

 const composables = [
  {
    name: "useRipple",
-    path: "../src/composables/useRipple.ts",
+    path: "./composables/useRipple.ts",
  },
  {
    name: "useMergeClasses",
-    path: "../src/composables/useMergeClasses.ts",
+    path: "./composables/useMergeClasses.ts",
  },
  {
    name: "useBounce",
-    path: "../src/composables/useBounce.ts",
+    path: "./composables/useBounce.ts",
  },
  {
    name: "useTailwindConf",
-    path: "../src/composables/useTailwindConf.ts",
+    path: "./composables/useTailwindConf.ts",
  },
 ];
+
 export default defineNuxtModule<ModuleOptions>({
-  meta: {
-    name: "module",
-    configKey: "myModule",
-  },
-  defaults: {},
-  setup(_options, _nuxt) {
-    const resolver = createResolver(import.meta.url);
+  // meta: {
+  //   name: "module",
+  //   configKey: "myModule",
+  // },
+  // defaults: {},
+  // setup(_options, _nuxt) {
+  //   const resolver = createResolver(import.meta.url);

-    for (let item of components) {
-      addComponent({
-        name: item.name,
-        filePath: resolver.resolve(item.path),
+  //   for (let item of components) {
+  //     addComponent({
+  //       name: item.name,
+  //       filePath: resolver.resolve(item.path),
+  //     });
+  //   }
+
+  //   for (let item of composables) {
+  //     addImports([
+  //       {
+  //         name: item.name,
+  //         from: resolver.resolve(item.path),
+  //       },
+  //     ]);
+  //   }
+  // },
+  hooks: {
+    "components:dirs"(dirs) {
+      dirs.push({
+        path: join(__dirname, "components"),
      });
-    }
-
-    for (let item of composables) {
-      addImports([
-        {
-          name: item.name,
-          from: resolver.resolve(item.path),
-        },
-      ]);
-    }
+    },
  },
 });
@@ -14,10 +14,12 @@
    "@heroicons/vue": "^2.1.4",
    "@nuxt/kit": "^3.12.3",
    "@nuxtjs/color-mode": "^3.4.2",
-    "@nuxtjs/tailwindcss": "^6.12.0",
    "@vueuse/core": "^10.11.0",
+    "autoprefixer": "^10.4.19",
    "classnames": "^2.5.1",
    "nuxt": "^3.12.3",
+    "pathe": "^1.1.2",
+    "postcss": "^8.4.39",
    "swiper": "^11.1.4",
    "tailwind-merge": "^2.3.0",
    "typescript": "^5.5.3",
@@ -25,6 +27,7 @@
  },
  "packageManager": "pnpm@9.1.1+sha512.14e915759c11f77eac07faba4d019c193ec8637229e62ec99eefb7cf3c3b75c64447882b7c485142451ee3a6b408059cdfb7b7fa0341b975f12d0f7629c71195",
  "devDependencies": {
+    "@nuxtjs/tailwindcss": "^6.12.0",
    "tailwindcss": "^3.4.4"
  }
 }
@@ -17,18 +17,24 @@ importers:
      '@nuxtjs/color-mode':
        specifier: ^3.4.2
        version: 3.4.2(magicast@0.3.4)(rollup@4.18.0)
-      '@nuxtjs/tailwindcss':
-        specifier: ^6.12.0
-        version: 6.12.0(magicast@0.3.4)(rollup@4.18.0)
      '@vueuse/core':
        specifier: ^10.11.0
        version: 10.11.0(vue@3.4.31(typescript@5.5.3))
+      autoprefixer:
+        specifier: ^10.4.19
+        version: 10.4.19(postcss@8.4.39)
      classnames:
        specifier: ^2.5.1
        version: 2.5.1
      nuxt:
        specifier: ^3.12.3
        version: 3.12.3(@opentelemetry/api@1.9.0)(@parcel/watcher@2.4.1)(@types/node@20.14.9)(ioredis@5.4.1)(magicast@0.3.4)(rollup@4.18.0)(terser@5.31.1)(typescript@5.5.3)(vite@5.3.3(@types/node@20.14.9)(terser@5.31.1))
+      pathe:
+        specifier: ^1.1.2
+        version: 1.1.2
+      postcss:
+        specifier: ^8.4.39
+        version: 8.4.39
      swiper:
        specifier: ^11.1.4
        version: 11.1.4
@@ -42,6 +48,9 @@ importers:
        specifier: latest
        version: 3.4.31(typescript@5.5.3)
    devDependencies:
+      '@nuxtjs/tailwindcss':
+        specifier: ^6.12.0
+        version: 6.12.0(magicast@0.3.4)(rollup@4.18.0)
      tailwindcss:
        specifier: ^3.4.4
        version: 3.4.4
@@ -1,50 +1,7 @@
 /** @type {import('tailwindcss').Config} */
 export default {
-  theme: {
-    extend: {
-      backgroundImage: {
-        gradient:
-          "linear-gradient(50deg, rgba(75,250,145,1) 0%, rgba(71,122,255,1) 100%);",
-        MainLightGradient:
-          "linear-gradient(0deg, rgba(0,0,0,0) 0%, rgba(114,151,246,0.6502976190476191) 36%, rgba(114,151,246,0.6502976190476191) 72%, rgba(0,0,0,0) 100%)",
-        MainDarkGradient:
-          "linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(13,54,161,0.6502976190476191) 49%, #161616 100%);",
-        FooterLightGradient:
-          "linear-gradient(180deg, #F8F8F8 0%, rgba(255,255,255,0.5) 50%, rgba(255,255,255,0) 100%), linear-gradient(65deg, rgba(75,250,145,0.5) 0%, rgba(20,76,220,0.5) 100%)",
-        FooterDarkGradient:
-          "linear-gradient(180deg, #161616 0%, rgba(0,0,0,0.5) 50%, rgba(0,0,0,0) 100%), linear-gradient(65deg, rgba(20,76,220,0.5) 0%, rgba(75,250,145,0.5) 100%)",
-        FormLightGradient:
-          "linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(114,151,246,1) 72%)",
-        FormDarkGradient:
-          "linear-gradient(180deg, #161616 20%, rgba(13,54,161,1) 90%)",
-        StudyLightGradient:
-          "linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(72,72,72,0.10127801120448177) 14%, rgba(249,249,249,0.3253676470588235) 50%, rgba(248,248,248,1) 100%), linear-gradient(65deg, rgba(75,250,145,0.5) 0%, rgba(20,76,220,0.5) 100%)",
-        StudyDarkGradient:
-          "linear-gradient(180deg, rgba(22,22,22,0) 0%, rgba(22,22,22,0.3309698879551821) 50%, #161616 100%), linear-gradient(72deg, rgba(20,76,220,0.5018382352941176) 0%, rgba(75,250,145,0.4990371148459384) 100%)",
-        ContactDarkGradient:
-          "linear-gradient(180deg, rgba(0,0,0,0) 20%, rgba(13,54,161,1) 90%)",
-        ContactLightGradient:
-          "linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(114,151,246,0.7231267507002801) 72%)",
-      },
-      colors: {
-        gradient:
-          "linear-gradient(50deg, rgba(75,250,145,1) 0%, rgba(71,122,255,1) 100%);",
-        accent1: "#144CDC",
-        accent2: "#4BFA91",
-
-        BgDark: "#090909",
-        BgLight: "#F8F8F8",
-
-        BgDarkSecond: "#161616",
-      },
-      screens: {
-        "3xl": "2560px",
-      },
-      boxShadow: {
-        "custom-lrb":
-          "0 10px 15px -3px rgba(0, 0, 0, 0.1), -10px 0 15px -3px rgba(0, 0, 0, 0.1), 10px 0 15px -3px rgba(0, 0, 0, 0.1)",
-        "custom-drb": "-3px 28px 42px 3px rgba(23, 23, 24, 1)",
-      },
-    },
+    theme: {
+    extend: {},
  },
+  plugins: [],
 };