326 lines
6.5 KiB
Vue
326 lines
6.5 KiB
Vue
<template>
|
|
<button
|
|
v-motion
|
|
:initial="animated ? { scale: 0.95, opacity: 0 } : {}"
|
|
:enter="animated ? { scale: 1, opacity: 1 } : {}"
|
|
:hovered="hoverable ? { scale: 1.05 } : {}"
|
|
:tapped="{ scale: 0.95 }"
|
|
:delay="delay"
|
|
class="monaco-button"
|
|
:class="[
|
|
`monaco-button--${variant}`,
|
|
`monaco-button--${size}`,
|
|
{
|
|
'monaco-button--block': block,
|
|
'monaco-button--loading': loading,
|
|
'monaco-button--icon-only': !$slots.default && icon
|
|
}
|
|
]"
|
|
:disabled="disabled || loading"
|
|
@click="$emit('click', $event)"
|
|
>
|
|
<span v-if="loading" class="monaco-button__spinner">
|
|
<svg class="monaco-button__spinner-svg" viewBox="0 0 24 24">
|
|
<circle
|
|
class="monaco-button__spinner-circle"
|
|
cx="12"
|
|
cy="12"
|
|
r="10"
|
|
stroke-width="3"
|
|
fill="none"
|
|
/>
|
|
</svg>
|
|
</span>
|
|
|
|
<Icon
|
|
v-if="icon && !loading"
|
|
:name="icon"
|
|
class="monaco-button__icon"
|
|
:class="{ 'monaco-button__icon--left': $slots.default }"
|
|
/>
|
|
|
|
<span v-if="$slots.default" class="monaco-button__content">
|
|
<slot />
|
|
</span>
|
|
|
|
<Icon
|
|
v-if="rightIcon && !loading"
|
|
:name="rightIcon"
|
|
class="monaco-button__icon monaco-button__icon--right"
|
|
/>
|
|
</button>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import Icon from '~/components/ui/Icon.vue'
|
|
|
|
interface Props {
|
|
variant?: 'primary' | 'secondary' | 'glass' | 'gradient' | 'outline' | 'ghost'
|
|
size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'
|
|
icon?: string
|
|
rightIcon?: string
|
|
block?: boolean
|
|
disabled?: boolean
|
|
loading?: boolean
|
|
hoverable?: boolean
|
|
animated?: boolean
|
|
delay?: number
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
variant: 'primary',
|
|
size: 'md',
|
|
block: false,
|
|
disabled: false,
|
|
loading: false,
|
|
hoverable: true,
|
|
animated: true,
|
|
delay: 0
|
|
})
|
|
|
|
defineEmits<{
|
|
click: [event: MouseEvent]
|
|
}>()
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.monaco-button {
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 0.5rem;
|
|
font-weight: 600;
|
|
border-radius: 12px;
|
|
cursor: pointer;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
outline: none;
|
|
border: none;
|
|
overflow: hidden;
|
|
|
|
// Create shimmer effect for gradient variant
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
top: 0;
|
|
left: -100%;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent,
|
|
rgba(255, 255, 255, 0.2),
|
|
transparent
|
|
);
|
|
transition: left 0.5s;
|
|
}
|
|
|
|
&:hover::before {
|
|
left: 100%;
|
|
}
|
|
|
|
// Variants
|
|
&--primary {
|
|
background: #dc2626;
|
|
color: white;
|
|
box-shadow: 0 4px 14px rgba(220, 38, 38, 0.25);
|
|
|
|
&:hover:not(:disabled) {
|
|
background: #b91c1c;
|
|
box-shadow: 0 6px 20px rgba(220, 38, 38, 0.35);
|
|
transform: translateY(-2px);
|
|
}
|
|
|
|
&:active:not(:disabled) {
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
&--secondary {
|
|
background: white;
|
|
color: #dc2626;
|
|
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
|
|
|
|
&:hover:not(:disabled) {
|
|
background: #fef2f2;
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
|
|
transform: translateY(-2px);
|
|
}
|
|
}
|
|
|
|
&--glass {
|
|
background: rgba(255, 255, 255, 0.6);
|
|
backdrop-filter: blur(4px);
|
|
-webkit-backdrop-filter: blur(4px);
|
|
border: 1px solid rgba(255, 255, 255, 0.2);
|
|
color: #27272a;
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
|
|
&:hover:not(:disabled) {
|
|
background: rgba(255, 255, 255, 0.8);
|
|
border-color: rgba(220, 38, 38, 0.1);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-2px);
|
|
}
|
|
}
|
|
|
|
&--gradient {
|
|
background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
|
|
color: #dc2626;
|
|
border: 1px solid rgba(220, 38, 38, 0.1);
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
|
|
|
|
&:hover:not(:disabled) {
|
|
background: linear-gradient(135deg, #fee2e2 0%, #fef2f2 100%);
|
|
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
|
|
transform: translateY(-2px);
|
|
}
|
|
}
|
|
|
|
&--outline {
|
|
background: transparent;
|
|
color: #dc2626;
|
|
border: 2px solid #dc2626;
|
|
|
|
&:hover:not(:disabled) {
|
|
background: rgba(220, 38, 38, 0.1);
|
|
border-color: #b91c1c;
|
|
transform: translateY(-2px);
|
|
}
|
|
}
|
|
|
|
&--ghost {
|
|
background: transparent;
|
|
color: #dc2626;
|
|
|
|
&:hover:not(:disabled) {
|
|
background: rgba(220, 38, 38, 0.1);
|
|
transform: translateY(-2px);
|
|
}
|
|
}
|
|
|
|
// Sizes
|
|
&--xs {
|
|
padding: 0.25rem 0.5rem;
|
|
font-size: 0.75rem;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
&--sm {
|
|
padding: 0.375rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
&--md {
|
|
padding: 0.5rem 1rem;
|
|
font-size: 1rem;
|
|
}
|
|
|
|
&--lg {
|
|
padding: 0.75rem 1.5rem;
|
|
font-size: 1.125rem;
|
|
border-radius: 14px;
|
|
}
|
|
|
|
&--xl {
|
|
padding: 1rem 2rem;
|
|
font-size: 1.25rem;
|
|
border-radius: 16px;
|
|
}
|
|
|
|
// States
|
|
&--block {
|
|
width: 100%;
|
|
}
|
|
|
|
&--icon-only {
|
|
aspect-ratio: 1;
|
|
padding: 0;
|
|
|
|
&.monaco-button--xs { width: 1.75rem; }
|
|
&.monaco-button--sm { width: 2rem; }
|
|
&.monaco-button--md { width: 2.5rem; }
|
|
&.monaco-button--lg { width: 3rem; }
|
|
&.monaco-button--xl { width: 3.5rem; }
|
|
}
|
|
|
|
&:disabled {
|
|
opacity: 0.5;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
&--loading {
|
|
color: transparent;
|
|
pointer-events: none;
|
|
}
|
|
|
|
// Icons
|
|
&__icon {
|
|
width: 1.25em;
|
|
height: 1.25em;
|
|
flex-shrink: 0;
|
|
|
|
&--left {
|
|
margin-right: 0.25rem;
|
|
}
|
|
|
|
&--right {
|
|
margin-left: 0.25rem;
|
|
}
|
|
}
|
|
|
|
// Spinner
|
|
&__spinner {
|
|
position: absolute;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
&__spinner-svg {
|
|
width: 1.5em;
|
|
height: 1.5em;
|
|
animation: spin 1s linear infinite;
|
|
}
|
|
|
|
&__spinner-circle {
|
|
stroke: currentColor;
|
|
stroke-linecap: round;
|
|
stroke-dasharray: 64;
|
|
stroke-dashoffset: 64;
|
|
animation: dash 1.5s ease-in-out infinite;
|
|
}
|
|
}
|
|
|
|
// Animations
|
|
@keyframes spin {
|
|
to { transform: rotate(360deg); }
|
|
}
|
|
|
|
@keyframes dash {
|
|
0% { stroke-dashoffset: 64; }
|
|
50% { stroke-dashoffset: 16; }
|
|
100% { stroke-dashoffset: 64; }
|
|
}
|
|
|
|
// Dark mode support
|
|
@media (prefers-color-scheme: dark) {
|
|
.monaco-button {
|
|
&--secondary {
|
|
background: #27272a;
|
|
color: #dc2626;
|
|
|
|
&:hover:not(:disabled) {
|
|
background: #3f3f46;
|
|
}
|
|
}
|
|
|
|
&--glass {
|
|
background: rgba(30, 30, 30, 0.7);
|
|
border-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
}
|
|
}
|
|
</style> |