Implement MonacoUSA Portal redesign foundations
Some checks failed
Build And Push Image / docker (push) Failing after 1m11s
Some checks failed
Build And Push Image / docker (push) Failing after 1m11s
- Added VueUse Motion for animations with custom presets - Created base UI component library with glass morphism effects: * GlassCard - Flexible card component with 4 variants * MonacoButton - Multi-variant button system * FloatingInput - Modern input with floating labels * StatsCard - Dashboard statistics display * AnimatedNumber - Smooth number animations * Icon system - Modular icon components - Created comprehensive page mockups: * Dashboard mockup with stats, activity feed, and widgets * Events page with filtering, search, and calendar - Established Monaco brand design system (red #dc2626) - Configured spring animations and glass effects 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
510
Design/components/dropdowns/AnimatedSelect.vue
Normal file
510
Design/components/dropdowns/AnimatedSelect.vue
Normal file
@@ -0,0 +1,510 @@
|
||||
<template>
|
||||
<div class="animated-select" ref="selectRef">
|
||||
<button
|
||||
@click="toggleSelect"
|
||||
class="animated-select__trigger"
|
||||
:class="{ 'animated-select__trigger--open': isOpen }"
|
||||
>
|
||||
<div class="animated-select__display">
|
||||
<Transition name="slide-fade" mode="out-in">
|
||||
<span
|
||||
v-if="!selectedOption"
|
||||
key="placeholder"
|
||||
class="animated-select__placeholder"
|
||||
>
|
||||
{{ placeholder }}
|
||||
</span>
|
||||
<div
|
||||
v-else
|
||||
key="selected"
|
||||
class="animated-select__selected"
|
||||
>
|
||||
<Icon
|
||||
v-if="selectedOption.icon"
|
||||
:name="selectedOption.icon"
|
||||
class="animated-select__icon"
|
||||
/>
|
||||
<span>{{ selectedOption.label }}</span>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
<div class="animated-select__arrow">
|
||||
<svg
|
||||
class="animated-select__arrow-icon"
|
||||
:class="{ 'animated-select__arrow-icon--rotate': isOpen }"
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 20 20"
|
||||
fill="currentColor"
|
||||
>
|
||||
<path
|
||||
fill-rule="evenodd"
|
||||
d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z"
|
||||
clip-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<Teleport to="body">
|
||||
<Transition name="select-dropdown">
|
||||
<div
|
||||
v-if="isOpen"
|
||||
class="animated-select__dropdown"
|
||||
:style="dropdownStyle"
|
||||
@click.stop
|
||||
>
|
||||
<div class="animated-select__options">
|
||||
<TransitionGroup name="option-list">
|
||||
<div
|
||||
v-for="(option, index) in options"
|
||||
:key="option.value"
|
||||
class="animated-select__option"
|
||||
:class="{
|
||||
'animated-select__option--selected': modelValue === option.value,
|
||||
'animated-select__option--highlighted': highlightedIndex === index,
|
||||
'animated-select__option--disabled': option.disabled
|
||||
}"
|
||||
:style="{ '--delay': `${index * 30}ms` }"
|
||||
@click="!option.disabled && selectOption(option)"
|
||||
@mouseenter="highlightedIndex = index"
|
||||
@mouseleave="highlightedIndex = -1"
|
||||
>
|
||||
<div class="animated-select__option-content">
|
||||
<Icon
|
||||
v-if="option.icon"
|
||||
:name="option.icon"
|
||||
class="animated-select__option-icon"
|
||||
/>
|
||||
<span class="animated-select__option-label">
|
||||
{{ option.label }}
|
||||
</span>
|
||||
<span
|
||||
v-if="option.description"
|
||||
class="animated-select__option-description"
|
||||
>
|
||||
{{ option.description }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Transition name="check">
|
||||
<Icon
|
||||
v-if="modelValue === option.value"
|
||||
name="check"
|
||||
class="animated-select__option-check"
|
||||
/>
|
||||
</Transition>
|
||||
</div>
|
||||
</TransitionGroup>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue'
|
||||
import Icon from '~/components/ui/Icon.vue'
|
||||
|
||||
interface SelectOption {
|
||||
label: string
|
||||
value: string | number
|
||||
icon?: string
|
||||
description?: string
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
interface Props {
|
||||
modelValue?: string | number | null
|
||||
options: SelectOption[]
|
||||
placeholder?: string
|
||||
searchable?: boolean
|
||||
multiple?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
placeholder: 'Select an option',
|
||||
searchable: false,
|
||||
multiple: false
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string | number | null]
|
||||
'change': [value: string | number | null]
|
||||
'open': []
|
||||
'close': []
|
||||
}>()
|
||||
|
||||
const selectRef = ref<HTMLElement>()
|
||||
const isOpen = ref(false)
|
||||
const highlightedIndex = ref(-1)
|
||||
const dropdownStyle = ref({})
|
||||
|
||||
const selectedOption = computed(() => {
|
||||
return props.options.find(opt => opt.value === props.modelValue)
|
||||
})
|
||||
|
||||
const toggleSelect = () => {
|
||||
isOpen.value = !isOpen.value
|
||||
if (isOpen.value) {
|
||||
emit('open')
|
||||
nextTick(() => updateDropdownPosition())
|
||||
} else {
|
||||
emit('close')
|
||||
highlightedIndex.value = -1
|
||||
}
|
||||
}
|
||||
|
||||
const selectOption = (option: SelectOption) => {
|
||||
emit('update:modelValue', option.value)
|
||||
emit('change', option.value)
|
||||
isOpen.value = false
|
||||
highlightedIndex.value = -1
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const updateDropdownPosition = () => {
|
||||
if (!selectRef.value) return
|
||||
|
||||
const rect = selectRef.value.getBoundingClientRect()
|
||||
const spaceBelow = window.innerHeight - rect.bottom
|
||||
const spaceAbove = rect.top
|
||||
const dropdownHeight = 300 // Approximate max height
|
||||
|
||||
let top = rect.bottom + 8
|
||||
if (spaceBelow < dropdownHeight && spaceAbove > spaceBelow) {
|
||||
top = rect.top - dropdownHeight - 8
|
||||
}
|
||||
|
||||
dropdownStyle.value = {
|
||||
position: 'fixed',
|
||||
top: `${top}px`,
|
||||
left: `${rect.left}px`,
|
||||
width: `${rect.width}px`,
|
||||
zIndex: 9999
|
||||
}
|
||||
}
|
||||
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (selectRef.value && !selectRef.value.contains(event.target as Node)) {
|
||||
isOpen.value = false
|
||||
highlightedIndex.value = -1
|
||||
emit('close')
|
||||
}
|
||||
}
|
||||
|
||||
const handleEscape = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape' && isOpen.value) {
|
||||
isOpen.value = false
|
||||
highlightedIndex.value = -1
|
||||
emit('close')
|
||||
}
|
||||
}
|
||||
|
||||
const handleKeyNavigation = (event: KeyboardEvent) => {
|
||||
if (!isOpen.value) return
|
||||
|
||||
switch (event.key) {
|
||||
case 'ArrowDown':
|
||||
event.preventDefault()
|
||||
highlightedIndex.value = Math.min(
|
||||
highlightedIndex.value + 1,
|
||||
props.options.length - 1
|
||||
)
|
||||
break
|
||||
case 'ArrowUp':
|
||||
event.preventDefault()
|
||||
highlightedIndex.value = Math.max(highlightedIndex.value - 1, 0)
|
||||
break
|
||||
case 'Enter':
|
||||
event.preventDefault()
|
||||
if (highlightedIndex.value >= 0) {
|
||||
const option = props.options[highlightedIndex.value]
|
||||
if (!option.disabled) {
|
||||
selectOption(option)
|
||||
}
|
||||
}
|
||||
break
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
document.addEventListener('keydown', handleEscape)
|
||||
document.addEventListener('keydown', handleKeyNavigation)
|
||||
window.addEventListener('resize', updateDropdownPosition)
|
||||
window.addEventListener('scroll', updateDropdownPosition)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
document.removeEventListener('keydown', handleEscape)
|
||||
document.removeEventListener('keydown', handleKeyNavigation)
|
||||
window.removeEventListener('resize', updateDropdownPosition)
|
||||
window.removeEventListener('scroll', updateDropdownPosition)
|
||||
})
|
||||
|
||||
watch(isOpen, (newVal) => {
|
||||
if (newVal) {
|
||||
nextTick(() => updateDropdownPosition())
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.animated-select {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
|
||||
&__trigger {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 0.75rem 1rem;
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 2px solid transparent;
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
outline: none;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-color: rgba(220, 38, 38, 0.2);
|
||||
box-shadow: 0 6px 24px rgba(0, 0, 0, 0.08);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:focus {
|
||||
border-color: #dc2626;
|
||||
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
|
||||
}
|
||||
|
||||
&--open {
|
||||
border-color: #dc2626;
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&__display {
|
||||
flex: 1;
|
||||
min-height: 1.5rem;
|
||||
}
|
||||
|
||||
&__placeholder {
|
||||
color: #71717a;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
&__selected {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
color: #27272a;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
&__icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
&__arrow {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
|
||||
&__arrow-icon {
|
||||
color: #dc2626;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&--rotate {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&__dropdown {
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(30px);
|
||||
-webkit-backdrop-filter: blur(30px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 16px;
|
||||
box-shadow:
|
||||
0 20px 40px rgba(0, 0, 0, 0.1),
|
||||
0 0 0 1px rgba(220, 38, 38, 0.05);
|
||||
overflow: hidden;
|
||||
max-height: 300px;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 8px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: rgba(220, 38, 38, 0.2);
|
||||
border-radius: 4px;
|
||||
|
||||
&:hover {
|
||||
background: rgba(220, 38, 38, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__options {
|
||||
padding: 0.25rem;
|
||||
}
|
||||
|
||||
&__option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
padding: 0.75rem 1rem;
|
||||
margin: 0.125rem 0;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1) both;
|
||||
animation-delay: var(--delay);
|
||||
|
||||
&:hover:not(&--disabled) {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(220, 38, 38, 0.05) 0%,
|
||||
rgba(220, 38, 38, 0.1) 100%);
|
||||
transform: translateX(4px);
|
||||
}
|
||||
|
||||
&--highlighted {
|
||||
background: rgba(220, 38, 38, 0.05);
|
||||
}
|
||||
|
||||
&--selected {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(220, 38, 38, 0.1) 0%,
|
||||
rgba(220, 38, 38, 0.15) 100%);
|
||||
color: #dc2626;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&__option-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__option-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
&__option-label {
|
||||
font-size: 0.9375rem;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&__option-description {
|
||||
font-size: 0.75rem;
|
||||
color: #71717a;
|
||||
margin-left: auto;
|
||||
margin-right: 1rem;
|
||||
}
|
||||
|
||||
&__option-check {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
color: #dc2626;
|
||||
}
|
||||
}
|
||||
|
||||
// Animations
|
||||
@keyframes slideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
.slide-fade-enter-active,
|
||||
.slide-fade-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.slide-fade-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(-4px);
|
||||
}
|
||||
|
||||
.slide-fade-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(4px);
|
||||
}
|
||||
|
||||
.select-dropdown-enter-active,
|
||||
.select-dropdown-leave-active {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.select-dropdown-enter-from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(-10px);
|
||||
filter: blur(4px);
|
||||
}
|
||||
|
||||
.select-dropdown-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(-10px);
|
||||
filter: blur(4px);
|
||||
}
|
||||
|
||||
.option-list-enter-active,
|
||||
.option-list-leave-active {
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.option-list-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(-20px);
|
||||
}
|
||||
|
||||
.option-list-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(20px);
|
||||
}
|
||||
|
||||
.check-enter-active,
|
||||
.check-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.check-enter-from,
|
||||
.check-leave-to {
|
||||
opacity: 0;
|
||||
transform: scale(0.5);
|
||||
}
|
||||
</style>
|
||||
713
Design/components/dropdowns/GlassDropdown.vue
Normal file
713
Design/components/dropdowns/GlassDropdown.vue
Normal file
@@ -0,0 +1,713 @@
|
||||
<template>
|
||||
<div class="glass-dropdown" ref="dropdownRef">
|
||||
<div
|
||||
class="glass-dropdown__trigger"
|
||||
@click="toggleDropdown"
|
||||
:class="{ 'glass-dropdown__trigger--active': isOpen }"
|
||||
>
|
||||
<div class="glass-dropdown__trigger-content">
|
||||
<slot name="trigger">
|
||||
<div class="glass-dropdown__trigger-default">
|
||||
<Icon
|
||||
v-if="icon"
|
||||
:name="icon"
|
||||
class="glass-dropdown__trigger-icon"
|
||||
/>
|
||||
<span class="glass-dropdown__trigger-text">{{ label }}</span>
|
||||
<div class="glass-dropdown__trigger-arrow">
|
||||
<svg
|
||||
width="16"
|
||||
height="16"
|
||||
viewBox="0 0 16 16"
|
||||
fill="none"
|
||||
class="glass-dropdown__arrow-svg"
|
||||
:class="{ 'glass-dropdown__arrow-svg--rotate': isOpen }"
|
||||
>
|
||||
<path
|
||||
d="M4 6L8 10L12 6"
|
||||
stroke="currentColor"
|
||||
stroke-width="2"
|
||||
stroke-linecap="round"
|
||||
stroke-linejoin="round"
|
||||
/>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</slot>
|
||||
</div>
|
||||
|
||||
<div class="glass-dropdown__trigger-glow"></div>
|
||||
</div>
|
||||
|
||||
<Teleport to="body">
|
||||
<Transition name="glass-fade">
|
||||
<div
|
||||
v-if="isOpen"
|
||||
class="glass-dropdown__backdrop"
|
||||
@click="closeDropdown"
|
||||
>
|
||||
<div
|
||||
class="glass-dropdown__menu"
|
||||
:style="menuStyle"
|
||||
@click.stop
|
||||
>
|
||||
<div class="glass-dropdown__menu-inner">
|
||||
<div
|
||||
v-if="$slots.header"
|
||||
class="glass-dropdown__header"
|
||||
>
|
||||
<slot name="header"></slot>
|
||||
</div>
|
||||
|
||||
<div class="glass-dropdown__items">
|
||||
<template v-if="groups.length > 0">
|
||||
<div
|
||||
v-for="(group, groupIndex) in groups"
|
||||
:key="groupIndex"
|
||||
class="glass-dropdown__group"
|
||||
>
|
||||
<div
|
||||
v-if="group.label"
|
||||
class="glass-dropdown__group-label"
|
||||
>
|
||||
{{ group.label }}
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-for="(item, itemIndex) in group.items"
|
||||
:key="`${groupIndex}-${itemIndex}`"
|
||||
class="glass-dropdown__item"
|
||||
:class="{
|
||||
'glass-dropdown__item--active': isItemActive(item),
|
||||
'glass-dropdown__item--disabled': item.disabled,
|
||||
'glass-dropdown__item--danger': item.variant === 'danger'
|
||||
}"
|
||||
@click="!item.disabled && handleItemClick(item)"
|
||||
@mouseenter="hoveredItem = item"
|
||||
@mouseleave="hoveredItem = null"
|
||||
>
|
||||
<div class="glass-dropdown__item-content">
|
||||
<Icon
|
||||
v-if="item.icon"
|
||||
:name="item.icon"
|
||||
class="glass-dropdown__item-icon"
|
||||
/>
|
||||
|
||||
<div class="glass-dropdown__item-text">
|
||||
<div class="glass-dropdown__item-label">
|
||||
{{ item.label }}
|
||||
</div>
|
||||
<div
|
||||
v-if="item.description"
|
||||
class="glass-dropdown__item-description"
|
||||
>
|
||||
{{ item.description }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="item.badge"
|
||||
class="glass-dropdown__item-badge"
|
||||
>
|
||||
{{ item.badge }}
|
||||
</div>
|
||||
|
||||
<Icon
|
||||
v-if="item.submenu"
|
||||
name="chevron-right"
|
||||
class="glass-dropdown__item-chevron"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<Transition name="submenu-slide">
|
||||
<div
|
||||
v-if="item.submenu && hoveredItem === item"
|
||||
class="glass-dropdown__submenu"
|
||||
>
|
||||
<div
|
||||
v-for="(subItem, subIndex) in item.submenu"
|
||||
:key="subIndex"
|
||||
class="glass-dropdown__submenu-item"
|
||||
:class="{
|
||||
'glass-dropdown__submenu-item--disabled': subItem.disabled
|
||||
}"
|
||||
@click.stop="!subItem.disabled && handleSubmenuClick(subItem)"
|
||||
>
|
||||
<Icon
|
||||
v-if="subItem.icon"
|
||||
:name="subItem.icon"
|
||||
class="glass-dropdown__submenu-icon"
|
||||
/>
|
||||
<span>{{ subItem.label }}</span>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="groupIndex < groups.length - 1"
|
||||
class="glass-dropdown__divider"
|
||||
></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div v-else class="glass-dropdown__empty">
|
||||
<slot name="empty">
|
||||
<p>No items available</p>
|
||||
</slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="$slots.footer"
|
||||
class="glass-dropdown__footer"
|
||||
>
|
||||
<slot name="footer"></slot>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="glass-dropdown__menu-glow"></div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
|
||||
import Icon from '~/components/ui/Icon.vue'
|
||||
|
||||
interface DropdownItem {
|
||||
label: string
|
||||
value?: string | number
|
||||
icon?: string
|
||||
description?: string
|
||||
badge?: string | number
|
||||
variant?: 'default' | 'danger'
|
||||
disabled?: boolean
|
||||
action?: () => void
|
||||
submenu?: DropdownItem[]
|
||||
}
|
||||
|
||||
interface DropdownGroup {
|
||||
label?: string
|
||||
items: DropdownItem[]
|
||||
}
|
||||
|
||||
interface Props {
|
||||
label?: string
|
||||
icon?: string
|
||||
groups?: DropdownGroup[]
|
||||
items?: DropdownItem[]
|
||||
modelValue?: string | number | null
|
||||
closeOnSelect?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
label: 'Menu',
|
||||
closeOnSelect: true
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string | number | null]
|
||||
'select': [item: DropdownItem]
|
||||
'open': []
|
||||
'close': []
|
||||
}>()
|
||||
|
||||
const dropdownRef = ref<HTMLElement>()
|
||||
const isOpen = ref(false)
|
||||
const hoveredItem = ref<DropdownItem | null>(null)
|
||||
const menuStyle = ref({})
|
||||
|
||||
const groups = computed(() => {
|
||||
if (props.groups && props.groups.length > 0) {
|
||||
return props.groups
|
||||
}
|
||||
if (props.items && props.items.length > 0) {
|
||||
return [{ items: props.items }]
|
||||
}
|
||||
return []
|
||||
})
|
||||
|
||||
const toggleDropdown = () => {
|
||||
isOpen.value = !isOpen.value
|
||||
if (isOpen.value) {
|
||||
emit('open')
|
||||
nextTick(() => updateMenuPosition())
|
||||
} else {
|
||||
emit('close')
|
||||
hoveredItem.value = null
|
||||
}
|
||||
}
|
||||
|
||||
const closeDropdown = () => {
|
||||
isOpen.value = false
|
||||
hoveredItem.value = null
|
||||
emit('close')
|
||||
}
|
||||
|
||||
const handleItemClick = (item: DropdownItem) => {
|
||||
if (item.action) {
|
||||
item.action()
|
||||
}
|
||||
|
||||
if (item.value !== undefined) {
|
||||
emit('update:modelValue', item.value)
|
||||
}
|
||||
|
||||
emit('select', item)
|
||||
|
||||
if (props.closeOnSelect && !item.submenu) {
|
||||
closeDropdown()
|
||||
}
|
||||
}
|
||||
|
||||
const handleSubmenuClick = (item: DropdownItem) => {
|
||||
if (item.action) {
|
||||
item.action()
|
||||
}
|
||||
|
||||
emit('select', item)
|
||||
|
||||
if (props.closeOnSelect) {
|
||||
closeDropdown()
|
||||
}
|
||||
}
|
||||
|
||||
const isItemActive = (item: DropdownItem) => {
|
||||
return item.value !== undefined && item.value === props.modelValue
|
||||
}
|
||||
|
||||
const updateMenuPosition = () => {
|
||||
if (!dropdownRef.value) return
|
||||
|
||||
const rect = dropdownRef.value.getBoundingClientRect()
|
||||
const windowWidth = window.innerWidth
|
||||
const windowHeight = window.innerHeight
|
||||
|
||||
let top = rect.bottom + 8
|
||||
let left = rect.left
|
||||
|
||||
// Adjust if menu would go off screen
|
||||
const menuWidth = 320 // Approximate menu width
|
||||
const menuHeight = 400 // Approximate max menu height
|
||||
|
||||
if (left + menuWidth > windowWidth) {
|
||||
left = windowWidth - menuWidth - 16
|
||||
}
|
||||
|
||||
if (top + menuHeight > windowHeight && rect.top > menuHeight) {
|
||||
top = rect.top - menuHeight - 8
|
||||
}
|
||||
|
||||
menuStyle.value = {
|
||||
position: 'fixed',
|
||||
top: `${top}px`,
|
||||
left: `${left}px`,
|
||||
minWidth: `${rect.width}px`,
|
||||
zIndex: 10001
|
||||
}
|
||||
}
|
||||
|
||||
const handleEscape = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape' && isOpen.value) {
|
||||
closeDropdown()
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('keydown', handleEscape)
|
||||
window.addEventListener('resize', updateMenuPosition)
|
||||
window.addEventListener('scroll', updateMenuPosition)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('keydown', handleEscape)
|
||||
window.removeEventListener('resize', updateMenuPosition)
|
||||
window.removeEventListener('scroll', updateMenuPosition)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.glass-dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&__trigger {
|
||||
position: relative;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 0.625rem 1rem;
|
||||
background: rgba(255, 255, 255, 0.6);
|
||||
backdrop-filter: blur(30px) saturate(180%);
|
||||
-webkit-backdrop-filter: blur(30px) saturate(180%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 14px;
|
||||
cursor: pointer;
|
||||
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
box-shadow:
|
||||
0 4px 20px rgba(0, 0, 0, 0.04),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.8);
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
border-color: rgba(220, 38, 38, 0.3);
|
||||
transform: translateY(-2px);
|
||||
box-shadow:
|
||||
0 8px 30px rgba(220, 38, 38, 0.1),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||||
|
||||
.glass-dropdown__trigger-glow {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
border-color: rgba(220, 38, 38, 0.4);
|
||||
box-shadow:
|
||||
0 0 0 4px rgba(220, 38, 38, 0.1),
|
||||
0 8px 30px rgba(220, 38, 38, 0.15),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 1);
|
||||
}
|
||||
}
|
||||
|
||||
&__trigger-content {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
&__trigger-default {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
&__trigger-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
&__trigger-text {
|
||||
font-weight: 500;
|
||||
color: #27272a;
|
||||
font-size: 0.9375rem;
|
||||
}
|
||||
|
||||
&__trigger-arrow {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
&__arrow-svg {
|
||||
color: #dc2626;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&--rotate {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&__trigger-glow {
|
||||
position: absolute;
|
||||
inset: -1px;
|
||||
background: linear-gradient(135deg,
|
||||
rgba(220, 38, 38, 0.2) 0%,
|
||||
rgba(220, 38, 38, 0) 100%);
|
||||
border-radius: 14px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.4s ease;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 10000;
|
||||
background: rgba(0, 0, 0, 0.2);
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
&__menu {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.85);
|
||||
backdrop-filter: blur(40px) saturate(200%);
|
||||
-webkit-backdrop-filter: blur(40px) saturate(200%);
|
||||
border: 1px solid rgba(255, 255, 255, 0.4);
|
||||
border-radius: 20px;
|
||||
box-shadow:
|
||||
0 20px 60px rgba(0, 0, 0, 0.15),
|
||||
0 0 0 1px rgba(220, 38, 38, 0.05),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.9);
|
||||
overflow: hidden;
|
||||
min-width: 280px;
|
||||
max-width: 400px;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
|
||||
&::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-track {
|
||||
background: rgba(0, 0, 0, 0.05);
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&::-webkit-scrollbar-thumb {
|
||||
background: linear-gradient(180deg,
|
||||
rgba(220, 38, 38, 0.3) 0%,
|
||||
rgba(220, 38, 38, 0.1) 100%);
|
||||
border-radius: 10px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.9);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(180deg,
|
||||
rgba(220, 38, 38, 0.4) 0%,
|
||||
rgba(220, 38, 38, 0.2) 100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&__menu-inner {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
padding: 0.5rem;
|
||||
}
|
||||
|
||||
&__menu-glow {
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: radial-gradient(
|
||||
ellipse at center,
|
||||
rgba(220, 38, 38, 0.1) 0%,
|
||||
transparent 70%
|
||||
);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
&__header {
|
||||
padding: 1rem;
|
||||
border-bottom: 1px solid rgba(220, 38, 38, 0.1);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
&__footer {
|
||||
padding: 1rem;
|
||||
border-top: 1px solid rgba(220, 38, 38, 0.1);
|
||||
margin-top: 0.5rem;
|
||||
}
|
||||
|
||||
&__group {
|
||||
margin: 0.25rem 0;
|
||||
}
|
||||
|
||||
&__group-label {
|
||||
padding: 0.5rem 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
color: #dc2626;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
|
||||
&__divider {
|
||||
height: 1px;
|
||||
background: linear-gradient(90deg,
|
||||
transparent 0%,
|
||||
rgba(220, 38, 38, 0.2) 50%,
|
||||
transparent 100%);
|
||||
margin: 0.5rem 0;
|
||||
}
|
||||
|
||||
&__item {
|
||||
position: relative;
|
||||
padding: 0.625rem 0.75rem;
|
||||
margin: 0.125rem 0;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&:hover:not(&--disabled) {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(220, 38, 38, 0.08) 0%,
|
||||
rgba(220, 38, 38, 0.04) 100%);
|
||||
transform: translateX(4px);
|
||||
|
||||
.glass-dropdown__item-icon {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
&--active {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(220, 38, 38, 0.15) 0%,
|
||||
rgba(220, 38, 38, 0.08) 100%);
|
||||
color: #dc2626;
|
||||
font-weight: 600;
|
||||
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 3px;
|
||||
height: 60%;
|
||||
background: #dc2626;
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
}
|
||||
|
||||
&--danger {
|
||||
color: #ef4444;
|
||||
|
||||
&:hover {
|
||||
background: rgba(239, 68, 68, 0.1);
|
||||
}
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&__item-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
}
|
||||
|
||||
&__item-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
color: #dc2626;
|
||||
flex-shrink: 0;
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
&__item-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
&__item-label {
|
||||
font-size: 0.9375rem;
|
||||
color: inherit;
|
||||
}
|
||||
|
||||
&__item-description {
|
||||
font-size: 0.75rem;
|
||||
color: #71717a;
|
||||
margin-top: 0.125rem;
|
||||
}
|
||||
|
||||
&__item-badge {
|
||||
padding: 0.125rem 0.5rem;
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
||||
color: white;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 600;
|
||||
border-radius: 999px;
|
||||
}
|
||||
|
||||
&__item-chevron {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
color: #71717a;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&__submenu {
|
||||
position: absolute;
|
||||
left: calc(100% + 0.5rem);
|
||||
top: 0;
|
||||
background: rgba(255, 255, 255, 0.95);
|
||||
backdrop-filter: blur(30px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
|
||||
padding: 0.25rem;
|
||||
min-width: 200px;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
&__submenu-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
font-size: 0.875rem;
|
||||
|
||||
&:hover:not(&--disabled) {
|
||||
background: rgba(220, 38, 38, 0.1);
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.4;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&__submenu-icon {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
&__empty {
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
color: #71717a;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
|
||||
// Animations
|
||||
.glass-fade-enter-active,
|
||||
.glass-fade-leave-active {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.glass-fade-enter-from {
|
||||
opacity: 0;
|
||||
|
||||
.glass-dropdown__menu {
|
||||
transform: scale(0.9) translateY(-20px);
|
||||
filter: blur(10px);
|
||||
}
|
||||
}
|
||||
|
||||
.glass-fade-leave-to {
|
||||
opacity: 0;
|
||||
|
||||
.glass-dropdown__menu {
|
||||
transform: scale(0.9) translateY(-20px);
|
||||
filter: blur(10px);
|
||||
}
|
||||
}
|
||||
|
||||
.submenu-slide-enter-active,
|
||||
.submenu-slide-leave-active {
|
||||
transition: all 0.2s ease;
|
||||
}
|
||||
|
||||
.submenu-slide-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
|
||||
.submenu-slide-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateX(-10px);
|
||||
}
|
||||
</style>
|
||||
391
Design/components/dropdowns/MonacoDropdown.vue
Normal file
391
Design/components/dropdowns/MonacoDropdown.vue
Normal file
@@ -0,0 +1,391 @@
|
||||
<template>
|
||||
<div class="monaco-dropdown" ref="dropdownRef">
|
||||
<button
|
||||
@click="toggleDropdown"
|
||||
class="monaco-dropdown__trigger"
|
||||
:class="[
|
||||
`monaco-dropdown__trigger--${variant}`,
|
||||
`monaco-dropdown__trigger--${size}`,
|
||||
{ 'monaco-dropdown__trigger--open': isOpen }
|
||||
]"
|
||||
:aria-expanded="isOpen"
|
||||
:aria-haspopup="true"
|
||||
>
|
||||
<slot name="trigger">
|
||||
<span class="monaco-dropdown__trigger-text">{{ label }}</span>
|
||||
</slot>
|
||||
<Icon
|
||||
:name="isOpen ? 'chevron-up' : 'chevron-down'"
|
||||
class="monaco-dropdown__trigger-icon"
|
||||
:class="{ 'monaco-dropdown__trigger-icon--rotate': isOpen }"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<Transition name="dropdown">
|
||||
<div
|
||||
v-if="isOpen"
|
||||
class="monaco-dropdown__content"
|
||||
:class="[
|
||||
`monaco-dropdown__content--${variant}`,
|
||||
`monaco-dropdown__content--${position}`
|
||||
]"
|
||||
>
|
||||
<div class="monaco-dropdown__content-inner">
|
||||
<div
|
||||
v-for="(option, index) in options"
|
||||
:key="option.value || index"
|
||||
class="monaco-dropdown__item"
|
||||
:class="{
|
||||
'monaco-dropdown__item--active': activeIndex === index,
|
||||
'monaco-dropdown__item--selected': modelValue === option.value,
|
||||
'monaco-dropdown__item--disabled': option.disabled
|
||||
}"
|
||||
@click="!option.disabled && selectOption(option)"
|
||||
@mouseenter="activeIndex = index"
|
||||
@mouseleave="activeIndex = -1"
|
||||
>
|
||||
<Icon
|
||||
v-if="option.icon"
|
||||
:name="option.icon"
|
||||
class="monaco-dropdown__item-icon"
|
||||
/>
|
||||
<span class="monaco-dropdown__item-label">{{ option.label }}</span>
|
||||
<span v-if="option.shortcut" class="monaco-dropdown__item-shortcut">
|
||||
{{ option.shortcut }}
|
||||
</span>
|
||||
<Icon
|
||||
v-if="modelValue === option.value"
|
||||
name="check"
|
||||
class="monaco-dropdown__item-check"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Transition>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, onUnmounted } from 'vue'
|
||||
import Icon from '~/components/ui/Icon.vue'
|
||||
|
||||
interface DropdownOption {
|
||||
label: string
|
||||
value: string | number
|
||||
icon?: string
|
||||
shortcut?: string
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
interface Props {
|
||||
modelValue?: string | number | null
|
||||
options: DropdownOption[]
|
||||
label?: string
|
||||
variant?: 'glass' | 'solid' | 'gradient' | 'outline'
|
||||
size?: 'sm' | 'md' | 'lg'
|
||||
position?: 'bottom' | 'top' | 'left' | 'right'
|
||||
closeOnSelect?: boolean
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
label: 'Select option',
|
||||
variant: 'glass',
|
||||
size: 'md',
|
||||
position: 'bottom',
|
||||
closeOnSelect: true
|
||||
})
|
||||
|
||||
const emit = defineEmits<{
|
||||
'update:modelValue': [value: string | number]
|
||||
'change': [value: string | number]
|
||||
'open': []
|
||||
'close': []
|
||||
}>()
|
||||
|
||||
const dropdownRef = ref<HTMLElement>()
|
||||
const isOpen = ref(false)
|
||||
const activeIndex = ref(-1)
|
||||
|
||||
const toggleDropdown = () => {
|
||||
isOpen.value = !isOpen.value
|
||||
if (isOpen.value) {
|
||||
emit('open')
|
||||
} else {
|
||||
emit('close')
|
||||
activeIndex.value = -1
|
||||
}
|
||||
}
|
||||
|
||||
const selectOption = (option: DropdownOption) => {
|
||||
emit('update:modelValue', option.value)
|
||||
emit('change', option.value)
|
||||
|
||||
if (props.closeOnSelect) {
|
||||
isOpen.value = false
|
||||
activeIndex.value = -1
|
||||
emit('close')
|
||||
}
|
||||
}
|
||||
|
||||
const handleClickOutside = (event: MouseEvent) => {
|
||||
if (dropdownRef.value && !dropdownRef.value.contains(event.target as Node)) {
|
||||
isOpen.value = false
|
||||
activeIndex.value = -1
|
||||
emit('close')
|
||||
}
|
||||
}
|
||||
|
||||
const handleEscape = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape' && isOpen.value) {
|
||||
isOpen.value = false
|
||||
activeIndex.value = -1
|
||||
emit('close')
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handleClickOutside)
|
||||
document.addEventListener('keydown', handleEscape)
|
||||
})
|
||||
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handleClickOutside)
|
||||
document.removeEventListener('keydown', handleEscape)
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.monaco-dropdown {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
|
||||
&__trigger {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.5rem;
|
||||
font-weight: 500;
|
||||
border-radius: 12px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
outline: none;
|
||||
border: none;
|
||||
|
||||
&--glass {
|
||||
background: rgba(255, 255, 255, 0.7);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
color: #dc2626;
|
||||
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:hover {
|
||||
background: rgba(255, 255, 255, 0.8);
|
||||
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
&:active {
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
&--solid {
|
||||
background: #dc2626;
|
||||
color: white;
|
||||
box-shadow: 0 4px 16px rgba(220, 38, 38, 0.2);
|
||||
|
||||
&:hover {
|
||||
background: #b91c1c;
|
||||
box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
&--gradient {
|
||||
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%);
|
||||
color: white;
|
||||
box-shadow: 0 4px 16px rgba(220, 38, 38, 0.2);
|
||||
|
||||
&:hover {
|
||||
background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
|
||||
box-shadow: 0 6px 20px rgba(220, 38, 38, 0.3);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
}
|
||||
|
||||
&--outline {
|
||||
background: transparent;
|
||||
color: #dc2626;
|
||||
border: 2px solid #dc2626;
|
||||
|
||||
&:hover {
|
||||
background: rgba(220, 38, 38, 0.1);
|
||||
border-color: #b91c1c;
|
||||
}
|
||||
}
|
||||
|
||||
&--sm {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
&--md {
|
||||
padding: 0.5rem 1rem;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
&--lg {
|
||||
padding: 0.75rem 1.25rem;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
&--open {
|
||||
z-index: 10;
|
||||
}
|
||||
}
|
||||
|
||||
&__trigger-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
|
||||
&--rotate {
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
position: absolute;
|
||||
z-index: 50;
|
||||
min-width: 200px;
|
||||
margin-top: 0.5rem;
|
||||
padding: 0.25rem;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
|
||||
|
||||
&--glass {
|
||||
background: rgba(255, 255, 255, 0.9);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
&--solid {
|
||||
background: white;
|
||||
border: 1px solid #e5e5e5;
|
||||
}
|
||||
|
||||
&--gradient {
|
||||
background: linear-gradient(135deg,
|
||||
rgba(255, 255, 255, 0.95) 0%,
|
||||
rgba(255, 255, 255, 0.85) 100%);
|
||||
backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(220, 38, 38, 0.1);
|
||||
}
|
||||
|
||||
&--outline {
|
||||
background: white;
|
||||
border: 2px solid #dc2626;
|
||||
}
|
||||
|
||||
&--bottom {
|
||||
top: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&--top {
|
||||
bottom: 100%;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
&--left {
|
||||
right: 100%;
|
||||
top: 0;
|
||||
margin-right: 0.5rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
&--right {
|
||||
left: 100%;
|
||||
top: 0;
|
||||
margin-left: 0.5rem;
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
&__item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.75rem;
|
||||
padding: 0.5rem 0.75rem;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
color: #27272a;
|
||||
|
||||
&:hover:not(&--disabled) {
|
||||
background: rgba(220, 38, 38, 0.1);
|
||||
color: #dc2626;
|
||||
}
|
||||
|
||||
&--active:not(&--disabled) {
|
||||
background: rgba(220, 38, 38, 0.05);
|
||||
}
|
||||
|
||||
&--selected {
|
||||
color: #dc2626;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
&--disabled {
|
||||
opacity: 0.5;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
}
|
||||
|
||||
&__item-icon {
|
||||
width: 1.25rem;
|
||||
height: 1.25rem;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
&__item-label {
|
||||
flex: 1;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
&__item-shortcut {
|
||||
font-size: 0.75rem;
|
||||
color: #71717a;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
&__item-check {
|
||||
width: 1rem;
|
||||
height: 1rem;
|
||||
color: #dc2626;
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
|
||||
// Transition animations
|
||||
.dropdown-enter-active,
|
||||
.dropdown-leave-active {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.dropdown-enter-from {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px) scale(0.95);
|
||||
filter: blur(4px);
|
||||
}
|
||||
|
||||
.dropdown-leave-to {
|
||||
opacity: 0;
|
||||
transform: translateY(-10px) scale(0.95);
|
||||
filter: blur(4px);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user