add changes
This commit is contained in:
parent
6c19db0c07
commit
b61c96f9e5
13
app.vue
13
app.vue
@ -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>
|
||||
14
index.js
14
index.js
@ -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"
|
||||
}
|
||||
}
|
||||
15
pnpm-lock.yaml
generated
15
pnpm-lock.yaml
generated
@ -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: [],
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user