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

add some files

Browse Source
This commit is contained in:
Arina Yakovenko 2024-07-08 12:03:25 +02:00
parent d824da5a39
commit abb43e054e
3 changed files with 37 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{ {
"name": "nuxt3-reusable-components", "name": "nuxt3-reusable-components",
"version": "1.2.0", "version": "1.2.2",
"private": false, "private": false,
"type": "module", "type": "module",
"main": "index.js", "main": "index.js",

63
src/components/Ml/Button/MlButton.vue
View File

@ -1,39 +1,48 @@
<template> <template>
<button :class="rootClasses" @click="useRipple($event, true)"> <button :class="rootClasses" @click="useRipple($event, true)">
<div :class="outerClasses"> <div :class="outerClasses">
<div :class="innerClasses"> <div :class="innerClasses">
<ml-spinner v-if="spinerPlace == 'prefix' && props.showSpiner" :color="props.spinerColor" :size="props.spinerSize" class="mx-2 fill-accent1" /> <slot></slot>
<slot></slot> </div>
<ml-spinner v-if="spinerPlace == 'suffix' && props.showSpiner" :color="props.spinerColor" :size="props.spinerSize" class="mx-2 fill-accent1" /> </div>
</div> </button>
</div>
</button>
</template> </template>
<script setup lang="ts"> <script setup lang="ts">
import type { ButtonProps, PTAttribs } from './types'; import { computed, ref } from "vue";
import { twMerge } from 'tailwind-merge'; import type { ButtonProps, PTAttribs } from "./types";
import { twMerge } from "tailwind-merge";
const props = withDefaults(defineProps<ButtonProps>(), { const props = withDefaults(defineProps<ButtonProps>(), {
rounded: true, rounded: true,
spinerSize: '6', spinerSize: "6",
spinerColor: 'accent1', spinerColor: "accent1",
spinerPlace: 'prefix' spinerPlace: "prefix",
}); });
const classes = ref({ const classes = ref({
root: { root: {
class: `flex justify-center items-center disabled:opacity-60` class: `flex justify-center items-center disabled:opacity-60`,
}, },
outer: { outer: {
class: `bg-gradient-to-r from-accent1 to-accent2 p-[2px] w-full focus:outline-none ${props.rounded ? 'rounded-3xl' : ''}` class: `bg-gradient-to-r from-accent1 to-accent2 p-[2px] w-full focus:outline-none ${
}, props.rounded ? "rounded-3xl" : ""
inner: { }`,
class: `justify-center flex items-center bg-white dark:bg-gradient-to-r px-5 py-2 w-full h-full font-semibold leading-[1.5] back ${props.rounded ? 'rounded-3xl' : ''}` },
} inner: {
class: `justify-center flex items-center bg-white dark:bg-gradient-to-r px-5 py-2 w-full h-full font-semibold leading-[1.5] back ${
props.rounded ? "rounded-3xl" : ""
}`,
},
} as PTAttribs); } as PTAttribs);
const rootClasses = computed(() => twMerge(classes.value.root?.class, props.pt?.root?.class)); const rootClasses = computed(() =>
const innerClasses = computed(() => twMerge(classes.value.inner?.class, props.pt?.inner?.class)); twMerge(classes.value.root?.class, props.pt?.root?.class)
const outerClasses = computed(() => twMerge(classes.value.outer?.class, props.pt?.outer?.class)); );
const innerClasses = computed(() =>
twMerge(classes.value.inner?.class, props.pt?.inner?.class)
);
const outerClasses = computed(() =>
twMerge(classes.value.outer?.class, props.pt?.outer?.class)
);
</script> </script>

1
src/components/Ml/Button/types.ts
View File

@ -2,7 +2,6 @@ export type ButtonProps = {
rounded?: boolean; rounded?: boolean;
pt?: PTAttribs; pt?: PTAttribs;
spinerPlace?: spinerPlace; spinerPlace?: spinerPlace;
showSpiner?: boolean;
}; };
export type PTAttribs = { export type PTAttribs = {