rest of the changes to the new workout struct
This commit is contained in:
Blake Ridgway
@@ -1,25 +1,35 @@
|
||||
<template>
|
||||
<Teleport to="body">
|
||||
<div v-if="visible" class="modal-overlay" @click.self="handleCancel">
|
||||
<div class="modal-confirm" :class="variantClass">
|
||||
<div class="confirm-icon" :class="variantClass">
|
||||
<svg v-if="variant === 'danger'" viewBox="0 0 24 24" fill="none">
|
||||
<div class="modal-panel max-w-[400px] w-full text-center p-6">
|
||||
<!-- Icon -->
|
||||
<div
|
||||
class="w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4"
|
||||
:class="{
|
||||
'bg-red-500/10 text-red-500': variant === 'danger',
|
||||
'bg-amber-500/10 text-amber-500': variant === 'warning',
|
||||
'bg-brand-500/10 text-brand-500': variant === 'info'
|
||||
}"
|
||||
>
|
||||
<svg v-if="variant === 'danger'" class="w-8 h-8" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 9V13M12 17H12.01M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
<svg v-else-if="variant === 'warning'" viewBox="0 0 24 24" fill="none">
|
||||
<svg v-else-if="variant === 'warning'" class="w-8 h-8" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 9V13M12 17H12.01M10.29 3.86L1.82 18C1.64 18.3 1.55 18.64 1.55 19C1.55 19.36 1.64 19.7 1.82 20C2 20.3 2.26 20.56 2.56 20.73C2.86 20.91 3.2 21 3.56 21H20.44C20.8 21 21.14 20.91 21.44 20.73C21.74 20.56 22 20.3 22.18 20C22.36 19.7 22.45 19.36 22.45 19C22.45 18.64 22.36 18.3 22.18 18L13.71 3.86C13.53 3.56 13.27 3.31 12.97 3.14C12.67 2.97 12.34 2.88 12 2.88C11.66 2.88 11.33 2.97 11.03 3.14C10.73 3.31 10.47 3.56 10.29 3.86Z" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
|
||||
</svg>
|
||||
<svg v-else viewBox="0 0 24 24" fill="none">
|
||||
<svg v-else class="w-8 h-8" viewBox="0 0 24 24" fill="none">
|
||||
<path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" stroke="currentColor" stroke-width="2"/>
|
||||
<path d="M12 8V12M12 16H12.01" stroke="currentColor" stroke-width="2" stroke-linecap="round"/>
|
||||
</svg>
|
||||
</div>
|
||||
<h3 class="confirm-title">{{ title }}</h3>
|
||||
<p class="confirm-message">{{ message }}</p>
|
||||
<div class="confirm-actions">
|
||||
|
||||
<h3 class="mb-2 text-lg font-semibold text-zinc-900 dark:text-zinc-100">{{ title }}</h3>
|
||||
<p class="mb-6 text-sm text-zinc-500 dark:text-zinc-400 leading-relaxed">{{ message }}</p>
|
||||
|
||||
<div class="flex gap-3 justify-center">
|
||||
<button
|
||||
type="button"
|
||||
class="btn-modern btn-modern-secondary"
|
||||
class="btn-secondary flex-1 max-w-[150px]"
|
||||
@click="handleCancel"
|
||||
:disabled="loading"
|
||||
>
|
||||
@@ -27,12 +37,12 @@
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-modern"
|
||||
class="flex-1 max-w-[150px]"
|
||||
:class="confirmButtonClass"
|
||||
@click="handleConfirm"
|
||||
:disabled="loading"
|
||||
>
|
||||
<span v-if="loading" class="btn-spinner"></span>
|
||||
<span v-if="loading" class="inline-block w-4 h-4 border-2 border-current border-r-transparent rounded-full animate-spin mr-1"></span>
|
||||
{{ confirmText }}
|
||||
</button>
|
||||
</div>
|
||||
@@ -78,13 +88,11 @@ const props = defineProps({
|
||||
|
||||
const emit = defineEmits(['confirm', 'cancel'])
|
||||
|
||||
const variantClass = computed(() => `variant-${props.variant}`)
|
||||
|
||||
const confirmButtonClass = computed(() => {
|
||||
switch (props.variant) {
|
||||
case 'danger': return 'btn-modern-danger'
|
||||
case 'warning': return 'btn-modern-warning'
|
||||
default: return 'btn-modern-primary'
|
||||
case 'danger': return 'btn-danger'
|
||||
case 'warning': return 'inline-flex items-center justify-center px-4 py-2 text-sm font-medium text-white bg-amber-500 rounded-lg hover:bg-amber-600 transition-colors'
|
||||
default: return 'btn-primary'
|
||||
}
|
||||
})
|
||||
|
||||
@@ -98,120 +106,3 @@ function handleCancel() {
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.modal-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
backdrop-filter: blur(4px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: var(--z-modal, 1000);
|
||||
padding: var(--spacing-md);
|
||||
}
|
||||
|
||||
.modal-confirm {
|
||||
background: var(--color-surface);
|
||||
border-radius: var(--radius-lg);
|
||||
padding: var(--spacing-xl);
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow-2xl);
|
||||
animation: modalSlideIn 0.2s ease-out;
|
||||
}
|
||||
|
||||
@keyframes modalSlideIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.95) translateY(-10px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1) translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.confirm-icon {
|
||||
width: 64px;
|
||||
height: 64px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto var(--spacing-lg);
|
||||
}
|
||||
|
||||
.confirm-icon svg {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
.confirm-icon.variant-danger {
|
||||
background: rgba(230, 57, 70, 0.1);
|
||||
color: var(--color-danger);
|
||||
}
|
||||
|
||||
.confirm-icon.variant-warning {
|
||||
background: rgba(255, 152, 0, 0.1);
|
||||
color: var(--color-warning);
|
||||
}
|
||||
|
||||
.confirm-icon.variant-info {
|
||||
background: rgba(0, 102, 204, 0.1);
|
||||
color: var(--color-primary);
|
||||
}
|
||||
|
||||
.confirm-title {
|
||||
margin: 0 0 var(--spacing-sm);
|
||||
font-size: var(--font-size-lg);
|
||||
font-weight: var(--font-weight-semibold);
|
||||
color: var(--color-text-primary);
|
||||
}
|
||||
|
||||
.confirm-message {
|
||||
margin: 0 0 var(--spacing-xl);
|
||||
font-size: var(--font-size-sm);
|
||||
color: var(--color-text-secondary);
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.confirm-actions {
|
||||
display: flex;
|
||||
gap: var(--spacing-md);
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.confirm-actions .btn-modern {
|
||||
flex: 1;
|
||||
max-width: 150px;
|
||||
}
|
||||
|
||||
.btn-spinner {
|
||||
display: inline-block;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid currentColor;
|
||||
border-right-color: transparent;
|
||||
border-radius: 50%;
|
||||
animation: spin 0.6s linear infinite;
|
||||
margin-right: var(--spacing-xs);
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
to { transform: rotate(360deg); }
|
||||
}
|
||||
|
||||
/* Warning button variant (not in base styles) */
|
||||
.btn-modern-warning {
|
||||
background: var(--color-warning);
|
||||
color: white;
|
||||
border: none;
|
||||
}
|
||||
|
||||
.btn-modern-warning:hover {
|
||||
background: #e68900;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user