add some files
This commit is contained in:
parent
d824da5a39
commit
abb43e054e
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "nuxt3-reusable-components",
|
||||
"version": "1.2.0",
|
||||
"version": "1.2.2",
|
||||
"private": false,
|
||||
"type": "module",
|
||||
"main": "index.js",
|
||||
|
@ -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>
|
||||
|
@ -2,7 +2,6 @@ export type ButtonProps = {
|
||||
rounded?: boolean;
|
||||
pt?: PTAttribs;
|
||||
spinerPlace?: spinerPlace;
|
||||
showSpiner?: boolean;
|
||||
};
|
||||
|
||||
export type PTAttribs = {
|
||||
|
Loading…
Reference in New Issue
Block a user