From a211ab95c42e47f5da0af50330edfe13fa9576b1 Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Fri, 13 Dec 2024 17:59:25 +0700 Subject: [PATCH 1/3] refactor: use nuxt carousel --- components/carousel/CarouselTypeDrops.vue | 55 ++++++---------------- libs/ui/src/scss/tailwind.scss | 4 ++ libs/ui/tailwind.config.js | 1 - nuxt.config.ts | 11 ++++- pages/ui-playground.vue | 57 +++++++++++++++++++++++ 5 files changed, 86 insertions(+), 42 deletions(-) create mode 100644 pages/ui-playground.vue diff --git a/components/carousel/CarouselTypeDrops.vue b/components/carousel/CarouselTypeDrops.vue index d1c99d715b..e488c5119f 100644 --- a/components/carousel/CarouselTypeDrops.vue +++ b/components/carousel/CarouselTypeDrops.vue @@ -1,27 +1,18 @@ diff --git a/libs/ui/src/scss/tailwind.scss b/libs/ui/src/scss/tailwind.scss index 5b9acc702f..49ba1a3ffe 100644 --- a/libs/ui/src/scss/tailwind.scss +++ b/libs/ui/src/scss/tailwind.scss @@ -130,3 +130,7 @@ border: 0 solid currentColor; } } + +hr { + height: 1px; +} \ No newline at end of file diff --git a/libs/ui/tailwind.config.js b/libs/ui/tailwind.config.js index 09b9ab850d..63a72cb950 100644 --- a/libs/ui/tailwind.config.js +++ b/libs/ui/tailwind.config.js @@ -2,7 +2,6 @@ import defaultTheme from 'tailwindcss/defaultTheme' module.exports = { - content: ['./**/*.{js,vue,ts}', '!./**/node_modules/**'], theme: { screens: { xs: '400px', diff --git a/nuxt.config.ts b/nuxt.config.ts index 7b60113f74..fb8dffe98e 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -294,10 +294,19 @@ export default defineNuxtConfig({ '@nuxt/ui', ], + ui: { + global: true, + }, + tailwindcss: { - // exposeConfig: true, + exposeConfig: true, configPath: '~/libs/ui/tailwind.config.js', cssPath: '~/libs/ui/src/scss/tailwind.scss', + config: { + content: [ + './libs/ui/src/**/*.{js,vue,ts}', + ], + }, }, eslint: { diff --git a/pages/ui-playground.vue b/pages/ui-playground.vue new file mode 100644 index 0000000000..7f298d521d --- /dev/null +++ b/pages/ui-playground.vue @@ -0,0 +1,57 @@ + + + From 43ce51f0cc60b584950328381de3b4d959a064a7 Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Tue, 17 Dec 2024 10:34:07 +0700 Subject: [PATCH 2/3] refactor(config): remove global UI configuration from nuxt.config.ts --- nuxt.config.ts | 4 ---- 1 file changed, 4 deletions(-) diff --git a/nuxt.config.ts b/nuxt.config.ts index 61b1e0f295..412a0d4eb0 100644 --- a/nuxt.config.ts +++ b/nuxt.config.ts @@ -296,10 +296,6 @@ export default defineNuxtConfig({ '@nuxt/ui', ], - ui: { - global: true, - }, - tailwindcss: { exposeConfig: true, configPath: '~/libs/ui/tailwind.config.js', From 22273e36bcd254c6ece583c8b0a96e911584d3b4 Mon Sep 17 00:00:00 2001 From: Preschian Febryantara Date: Tue, 17 Dec 2024 19:22:58 +0700 Subject: [PATCH 3/3] feat(carousel): add carousel configuration and update dependencies - Introduced a new configuration file `app.config.ts` for carousel UI settings. - Updated `nuxt.config.ts` to include `@kodadot1/hyperdata` as a dependency and disabled devtools. - Added `@iconify-json/heroicons` to `package.json` as a new development dependency. - Modified `CarouselTypeDrops.vue` to adjust styling for carousel items. --- app.config.ts | 17 + components/carousel/CarouselTypeDrops.vue | 4 +- nuxt.config.ts | 3 +- package.json | 1 + pnpm-lock.yaml | 426 ++++++++++------------ 5 files changed, 210 insertions(+), 241 deletions(-) create mode 100644 app.config.ts diff --git a/app.config.ts b/app.config.ts new file mode 100644 index 0000000000..3ce5cf6543 --- /dev/null +++ b/app.config.ts @@ -0,0 +1,17 @@ +export default defineAppConfig({ + ui: { + carousel: { + item: 'snap-start', + default: { + prevButton: { + class: 'absolute top-1/2 -translate-y-1/2 -left-6 bg-white size-14 rounded-full hidden lg:flex disabled:hidden items-center justify-center border-black border shadow-[4px_4px] text-4xl text-black dark:text-white hover:bg-k-primary-light', + icon: 'i-heroicons-chevron-left', + }, + nextButton: { + class: 'absolute top-1/2 -translate-y-1/2 -right-6 bg-white size-14 rounded-full hidden lg:flex disabled:hidden items-center justify-center border-black border shadow-[4px_4px] text-4xl text-black dark:text-white hover:bg-k-primary-light', + icon: 'i-heroicons-chevron-right', + }, + }, + }, + }, +}) diff --git a/components/carousel/CarouselTypeDrops.vue b/components/carousel/CarouselTypeDrops.vue index e488c5119f..b27c09c555 100644 --- a/components/carousel/CarouselTypeDrops.vue +++ b/components/carousel/CarouselTypeDrops.vue @@ -2,11 +2,9 @@ -
+