yakovenko_arina/library_components
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

---

Browse Source
This commit is contained in:
Arina Yakovenko 2024-07-08 13:58:03 +02:00
parent faf626fbca
commit e2727a7b83
2 changed files with 48 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
app.vue
View File

@ -6,7 +6,9 @@
<!-- MlButton: This button can be used for various actions like form submissions or dialog openings. Customize its appearance using the :pt prop. --> <!-- MlButton: This button can be used for various actions like form submissions or dialog openings. Customize its appearance using the :pt prop. -->
<MlButton <MlButton
:pt="{ :pt="{
root: { class: 'flex justify-center items-center disabled:opacity-60' }, root: {
class: 'flex justify-center items-center disabled:opacity-60',
},
outer: { outer: {
class: class:
'bg-gradient-to-r from-green-300 to-red-400 p-[2px] w-full focus:outline-none rounded-3xl', 'bg-gradient-to-r from-green-300 to-red-400 p-[2px] w-full focus:outline-none rounded-3xl',
@ -29,13 +31,12 @@
:pt="{ :pt="{
root: { root: {
class: 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', 'w-auto flex space-x-1 bg-white/85 shadow-2xl items-center px-3 py-2 rounded-full text-black',
}, },
paginator: { class: 'bg-red-500' }, paginator: { class: '' },
activePaginator: { class: 'bg-accent2 dark:bg-accent1' }, activePaginator: { class: 'bg-green-500' },
}" }"
/> />
<!-- MlDropDown: A customizable dropdown menu component for selecting options. <!-- MlDropDown: A customizable dropdown menu component for selecting options.
Use the :pt prop to define styles for the root, dropdown, title, and arrow sections. 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. --> The dropdown supports multiple items which can be styled individually using the :pt prop for each MlDropDownItem. -->
@ -44,12 +45,11 @@
title="Dropdown" title="Dropdown"
:title="''" :title="''"
:pt="{ :pt="{
root: { class: 'w-10 h-10 text-left absolute left-0 z-0' }, root: { class: 'w-[100px] h-10 text-left relative' },
dropdown: { dropdown: {
class: class: 'w-[150px] right-[-50px] absolute mt-4 block',
'w-[150px] right-[-50px] absolute mt-4 shadow-custom-lrb dark:shadow-custom-drb block',
}, },
title: { class: 'w-[30px] h-10' }, title: { class: 'w-[100px] h-10 bg-white shadow-2xl' },
arrow: { class: 'hidden' }, arrow: { class: 'hidden' },
}" }"
> >

45
modules/module.ts
View File

@ -25,6 +25,37 @@ const components = [
name: "MlDropDownItem", name: "MlDropDownItem",
path: "../src/components/Ml/DropDown/MlDropDownItem.vue", path: "../src/components/Ml/DropDown/MlDropDownItem.vue",
}, },
{
name: "MlDropDownItem",
path: "../src/components/Ml/DropDown/MlDropDownItem.vue",
},
{
name: "MlSlider",
path: "../src/components/Ml/Slider/MlSlider.vue",
},
{
name: "MlSliderPoint",
path: "../src/components/Ml/MlSliderPoint/MlSliderPoint.vue",
},
];
const composables = [
{
name: "useRipple",
path: "../src/composables/useRipple.ts",
},
{
name: "useMergeClasses",
path: "../src/composables/useMergeClasses.ts",
},
{
name: "useBounce",
path: "../src/composables/useBounce.ts",
},
{
name: "useTailwindConf",
path: "../src/composables/useTailwindConf.ts",
},
]; ];
export default defineNuxtModule<ModuleOptions>({ export default defineNuxtModule<ModuleOptions>({
meta: { meta: {
@ -42,11 +73,13 @@ export default defineNuxtModule<ModuleOptions>({
}); });
} }
addImports([ for (let item of composables) {
{ addImports([
name: "useRipple", {
from: resolver.resolve("../src/composables/useRipple.ts"), name: item.name,
}, from: resolver.resolve(item.path),
]); },
]);
}
}, },
}); });