add some files

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

View File

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

View File

@ -1,39 +1,48 @@
<template>
<button :class="rootClasses" @click="useRipple($event, true)">
<div :class="outerClasses">
<div :class="innerClasses">
<ml-spinner v-if="spinerPlace == 'prefix' && props.showSpiner" :color="props.spinerColor" :size="props.spinerSize" class="mx-2 fill-accent1" />
<slot></slot>
<ml-spinner v-if="spinerPlace == 'suffix' && props.showSpiner" :color="props.spinerColor" :size="props.spinerSize" class="mx-2 fill-accent1" />
</div>
</div>
</button>
<button :class="rootClasses" @click="useRipple($event, true)">
<div :class="outerClasses">
<div :class="innerClasses">
<slot></slot>
</div>
</div>
</button>
</template>
<script setup lang="ts">
import type { ButtonProps, PTAttribs } from './types';
import { twMerge } from 'tailwind-merge';
import { computed, ref } from "vue";
import type { ButtonProps, PTAttribs } from "./types";
import { twMerge } from "tailwind-merge";
const props = withDefaults(defineProps<ButtonProps>(), {
rounded: true,
spinerSize: '6',
spinerColor: 'accent1',
spinerPlace: 'prefix'
rounded: true,
spinerSize: "6",
spinerColor: "accent1",
spinerPlace: "prefix",
});
const classes = ref({
root: {
class: `flex justify-center items-center disabled:opacity-60`
},
outer: {
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' : ''}`
}
root: {
class: `flex justify-center items-center disabled:opacity-60`,
},
outer: {
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" : ""
}`,
},
} as PTAttribs);
const rootClasses = computed(() => twMerge(classes.value.root?.class, props.pt?.root?.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));
const rootClasses = computed(() =>
twMerge(classes.value.root?.class, props.pt?.root?.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>

View File

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