663 lines
19 KiB
Vue
663 lines
19 KiB
Vue
<template>
|
|
<div class="export-options" :class="containerClass">
|
|
<div class="export-content">
|
|
<div class="export-section">
|
|
<div class="export-buttons">
|
|
<UButton
|
|
@click="copyToClipboard"
|
|
class="export-btn"
|
|
:disabled="isProcessing"
|
|
ref="copyButton"
|
|
>
|
|
<UIcon name="i-heroicons-clipboard" />
|
|
<span>Copy as Text</span>
|
|
<UIcon v-if="showCopySuccess" name="i-heroicons-check" class="success-icon" />
|
|
</UButton>
|
|
|
|
<UButton
|
|
@click="downloadAsMarkdown"
|
|
class="export-btn"
|
|
:disabled="isProcessing"
|
|
ref="downloadButton"
|
|
>
|
|
<UIcon name="i-heroicons-arrow-down-tray" />
|
|
<span>Download Markdown</span>
|
|
<UIcon
|
|
v-if="showDownloadSuccess"
|
|
name="i-heroicons-check"
|
|
class="success-icon"
|
|
/>
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
interface Props {
|
|
exportData: any;
|
|
filename?: string;
|
|
title?: string;
|
|
containerClass?: string;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<Props>(), {
|
|
filename: "export",
|
|
title: "Export Data",
|
|
containerClass: "centered",
|
|
});
|
|
|
|
const isProcessing = ref(false);
|
|
const showCopySuccess = ref(false);
|
|
const showDownloadSuccess = ref(false);
|
|
|
|
const copyButton = ref<HTMLButtonElement>();
|
|
const downloadButton = ref<HTMLButtonElement>();
|
|
|
|
// Success feedback animation
|
|
const showSuccessFeedback = (
|
|
buttonRef: Ref<HTMLButtonElement | undefined>,
|
|
successRef: Ref<boolean>
|
|
) => {
|
|
if (!buttonRef.value) return;
|
|
|
|
successRef.value = true;
|
|
|
|
// Add checkmark overlay animation
|
|
const button = buttonRef.value;
|
|
button.classList.add("success-state");
|
|
|
|
setTimeout(() => {
|
|
successRef.value = false;
|
|
button.classList.remove("success-state");
|
|
}, 2000);
|
|
};
|
|
|
|
const copyToClipboard = async () => {
|
|
if (isProcessing.value) return;
|
|
|
|
isProcessing.value = true;
|
|
|
|
try {
|
|
const textContent = extractTextContent();
|
|
|
|
if (navigator.clipboard && navigator.clipboard.writeText) {
|
|
await navigator.clipboard.writeText(textContent);
|
|
} else {
|
|
// Fallback for browsers without clipboard API
|
|
const textarea = document.createElement("textarea");
|
|
textarea.value = textContent;
|
|
textarea.style.position = "fixed";
|
|
textarea.style.opacity = "0";
|
|
document.body.appendChild(textarea);
|
|
textarea.focus();
|
|
textarea.select();
|
|
|
|
const successful = document.execCommand("copy");
|
|
document.body.removeChild(textarea);
|
|
|
|
if (!successful) {
|
|
throw new Error("execCommand copy failed");
|
|
}
|
|
}
|
|
|
|
showSuccessFeedback(copyButton, showCopySuccess);
|
|
} catch (error) {
|
|
console.error("Copy failed:", error);
|
|
alert("Copy failed. Please try again or use the download option.");
|
|
} finally {
|
|
isProcessing.value = false;
|
|
}
|
|
};
|
|
|
|
const downloadAsMarkdown = () => {
|
|
if (isProcessing.value) return;
|
|
|
|
isProcessing.value = true;
|
|
|
|
try {
|
|
const content = convertToMarkdown();
|
|
downloadFile(content, `${props.filename}.md`, "text/markdown");
|
|
showSuccessFeedback(downloadButton, showDownloadSuccess);
|
|
} catch (error) {
|
|
console.error("Markdown download failed:", error);
|
|
alert("Download failed. Please try again.");
|
|
} finally {
|
|
isProcessing.value = false;
|
|
}
|
|
};
|
|
|
|
const extractTextContent = (): string => {
|
|
const today = new Date().toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
});
|
|
|
|
let content = `${props.title.toUpperCase()}\n${"=".repeat(
|
|
props.title.length
|
|
)}\n\nExported ${today}\n\n`;
|
|
|
|
// Convert data to readable text format
|
|
if (props.exportData) {
|
|
content += formatDataAsText(props.exportData);
|
|
}
|
|
|
|
return content;
|
|
};
|
|
|
|
const convertToMarkdown = (): string => {
|
|
const today = new Date().toLocaleDateString("en-US", {
|
|
year: "numeric",
|
|
month: "long",
|
|
day: "numeric",
|
|
});
|
|
|
|
let content = `# ${props.title}\n\n*Exported ${today}*\n\n`;
|
|
|
|
// Convert data to markdown format
|
|
if (props.exportData) {
|
|
content += formatDataAsMarkdown(props.exportData);
|
|
}
|
|
|
|
return content;
|
|
};
|
|
|
|
const formatDataAsText = (data: any): string => {
|
|
// Special handling for different template types
|
|
if (data.section === "tech-charter") {
|
|
return formatTechCharterAsText(data);
|
|
} else if (data.section === "membership-agreement") {
|
|
return formatMembershipAgreementAsText(data);
|
|
} else if (data.section === "conflict-resolution-framework") {
|
|
return formatConflictResolutionAsText(data);
|
|
} else if (data.section === "decision-framework") {
|
|
return formatDecisionFrameworkAsText(data);
|
|
}
|
|
|
|
if (Array.isArray(data)) {
|
|
return data
|
|
.map((item, index) => `${index + 1}. ${formatObjectAsText(item)}`)
|
|
.join("\n");
|
|
} else if (typeof data === "object" && data !== null) {
|
|
return formatObjectAsText(data);
|
|
}
|
|
return String(data);
|
|
};
|
|
|
|
const formatDataAsMarkdown = (data: any): string => {
|
|
// Special handling for different template types
|
|
if (data.section === "tech-charter") {
|
|
return formatTechCharterAsMarkdown(data);
|
|
} else if (data.section === "membership-agreement") {
|
|
return formatMembershipAgreementAsMarkdown(data);
|
|
} else if (data.section === "conflict-resolution-framework") {
|
|
return formatConflictResolutionAsMarkdown(data);
|
|
} else if (data.section === "decision-framework") {
|
|
return formatDecisionFrameworkAsMarkdown(data);
|
|
}
|
|
|
|
if (Array.isArray(data)) {
|
|
return data
|
|
.map((item, index) => `${index + 1}. ${formatObjectAsMarkdown(item)}`)
|
|
.join("\n\n");
|
|
} else if (typeof data === "object" && data !== null) {
|
|
return formatObjectAsMarkdown(data);
|
|
}
|
|
return String(data);
|
|
};
|
|
|
|
const formatTechCharterAsText = (data: any): string => {
|
|
let content = `PURPOSE\n-------\n\n${data.charterPurpose}\n\n`;
|
|
|
|
const selectedPrinciples = Object.keys(data.principleWeights).filter(
|
|
(p) => data.principleWeights[p] > 0
|
|
);
|
|
|
|
if (selectedPrinciples.filter((p) => !data.nonNegotiables.includes(p)).length > 0) {
|
|
content += `CORE PRINCIPLES\n---------------\n\n`;
|
|
selectedPrinciples
|
|
.filter((p) => !data.nonNegotiables.includes(p))
|
|
.forEach((pId) => {
|
|
const principle = data.principles.find((p: any) => p.id === pId);
|
|
if (principle) {
|
|
content += `• ${principle.name}\n`;
|
|
}
|
|
});
|
|
content += "\n";
|
|
}
|
|
|
|
if (data.nonNegotiables.length > 0) {
|
|
content += `NON-NEGOTIABLE REQUIREMENTS\n---------------------------\n\nAny vendor failing these requirements is automatically disqualified.\n\n`;
|
|
data.nonNegotiables.forEach((pId: string) => {
|
|
const principle = data.principles.find((p: any) => p.id === pId);
|
|
if (principle) {
|
|
content += `• ${principle.name}\n`;
|
|
}
|
|
});
|
|
content += "\n";
|
|
}
|
|
|
|
content += `TECHNICAL CONSTRAINTS\n---------------------\n\n`;
|
|
content += `• Authentication: ${data.constraints.sso}\n`;
|
|
content += `• Hosting: ${data.constraints.hosting}\n`;
|
|
if (data.constraints.integrations.length > 0) {
|
|
content += `• Required Integrations: ${data.constraints.integrations.join(", ")}\n`;
|
|
}
|
|
content += `• Support Level: ${data.constraints.support}\n`;
|
|
content += `• Migration Timeline: ${data.constraints.timeline}\n\n`;
|
|
|
|
if (data.sortedWeights.length > 0) {
|
|
content += `EVALUATION RUBRIC\n-----------------\n\nScore each vendor option using these weighted criteria (0-5 scale):\n\n`;
|
|
data.sortedWeights.forEach((principle: any) => {
|
|
content += `${principle.name} (Weight: ${data.principleWeights[principle.id]})\n${
|
|
principle.rubricDescription
|
|
}\n\n`;
|
|
});
|
|
}
|
|
|
|
return content;
|
|
};
|
|
|
|
const formatTechCharterAsMarkdown = (data: any): string => {
|
|
let content = `## Purpose\n\n${data.charterPurpose}\n\n`;
|
|
|
|
const selectedPrinciples = Object.keys(data.principleWeights).filter(
|
|
(p) => data.principleWeights[p] > 0
|
|
);
|
|
|
|
if (selectedPrinciples.filter((p) => !data.nonNegotiables.includes(p)).length > 0) {
|
|
content += `## Core Principles\n\n`;
|
|
selectedPrinciples
|
|
.filter((p) => !data.nonNegotiables.includes(p))
|
|
.forEach((pId) => {
|
|
const principle = data.principles.find((p: any) => p.id === pId);
|
|
if (principle) {
|
|
content += `- ${principle.name}\n`;
|
|
}
|
|
});
|
|
content += "\n";
|
|
}
|
|
|
|
if (data.nonNegotiables.length > 0) {
|
|
content += `## Non-Negotiable Requirements\n\n**Any vendor failing these requirements is automatically disqualified.**\n\n`;
|
|
data.nonNegotiables.forEach((pId: string) => {
|
|
const principle = data.principles.find((p: any) => p.id === pId);
|
|
if (principle) {
|
|
content += `- **${principle.name}**\n`;
|
|
}
|
|
});
|
|
content += "\n";
|
|
}
|
|
|
|
content += `## Technical Constraints\n\n`;
|
|
content += `- Authentication: ${data.constraints.sso}\n`;
|
|
content += `- Hosting: ${data.constraints.hosting}\n`;
|
|
if (data.constraints.integrations.length > 0) {
|
|
content += `- Required Integrations: ${data.constraints.integrations.join(", ")}\n`;
|
|
}
|
|
content += `- Support Level: ${data.constraints.support}\n`;
|
|
content += `- Migration Timeline: ${data.constraints.timeline}\n\n`;
|
|
|
|
if (data.sortedWeights.length > 0) {
|
|
content += `## Evaluation Rubric\n\nScore each vendor option using these weighted criteria (0-5 scale):\n\n`;
|
|
content += `| Criterion | Description | Weight |\n`;
|
|
content += `|-----------|-------------|--------|\n`;
|
|
data.sortedWeights.forEach((principle: any) => {
|
|
content += `| ${principle.name} | ${principle.rubricDescription} | ${
|
|
data.principleWeights[principle.id]
|
|
} |\n`;
|
|
});
|
|
}
|
|
|
|
return content;
|
|
};
|
|
|
|
const formatObjectAsText = (obj: any): string => {
|
|
if (!obj || typeof obj !== "object") return String(obj);
|
|
|
|
return Object.entries(obj)
|
|
.filter(([key, value]) => value !== null && value !== undefined && key !== "id")
|
|
.map(([key, value]) => {
|
|
const formattedKey = key
|
|
.replace(/([A-Z])/g, " $1")
|
|
.replace(/^./, (str) => str.toUpperCase());
|
|
if (typeof value === "object") {
|
|
return `${formattedKey}: ${JSON.stringify(value)}`;
|
|
}
|
|
return `${formattedKey}: ${value}`;
|
|
})
|
|
.join("\n");
|
|
};
|
|
|
|
const formatObjectAsMarkdown = (obj: any): string => {
|
|
if (!obj || typeof obj !== "object") return String(obj);
|
|
|
|
return Object.entries(obj)
|
|
.filter(([key, value]) => value !== null && value !== undefined && key !== "id")
|
|
.map(([key, value]) => {
|
|
const formattedKey = key
|
|
.replace(/([A-Z])/g, " $1")
|
|
.replace(/^./, (str) => str.toUpperCase());
|
|
if (typeof value === "object") {
|
|
return `**${formattedKey}**: \`${JSON.stringify(value)}\``;
|
|
}
|
|
return `**${formattedKey}**: ${value}`;
|
|
})
|
|
.join(" \n");
|
|
};
|
|
|
|
// Membership Agreement formatting
|
|
const formatMembershipAgreementAsText = (data: any): string => {
|
|
let content = `MEMBERSHIP AGREEMENT\n====================\n\n`;
|
|
content += `Cooperative Name: ${data.cooperativeName}\n`;
|
|
content += `Member Name: ${data.formData.memberName || "[Member Name]"}\n`;
|
|
content += `Effective Date: ${data.formData.effectiveDate || "[Date]"}\n\n`;
|
|
|
|
if (data.formData.purpose) {
|
|
content += `PURPOSE\n-------\n${data.formData.purpose}\n\n`;
|
|
}
|
|
|
|
if (data.formData.membershipRequirements) {
|
|
content += `MEMBERSHIP REQUIREMENTS\n----------------------\n${data.formData.membershipRequirements}\n\n`;
|
|
}
|
|
|
|
if (data.formData.rightsAndResponsibilities) {
|
|
content += `RIGHTS AND RESPONSIBILITIES\n--------------------------\n${data.formData.rightsAndResponsibilities}\n\n`;
|
|
}
|
|
|
|
return content;
|
|
};
|
|
|
|
const formatMembershipAgreementAsMarkdown = (data: any): string => {
|
|
let content = `## Membership Agreement\n\n`;
|
|
content += `**Cooperative Name:** ${data.cooperativeName} \n`;
|
|
content += `**Member Name:** ${data.formData.memberName || "[Member Name]"} \n`;
|
|
content += `**Effective Date:** ${data.formData.effectiveDate || "[Date]"} \n\n`;
|
|
|
|
if (data.formData.purpose) {
|
|
content += `### Purpose\n\n${data.formData.purpose}\n\n`;
|
|
}
|
|
|
|
if (data.formData.membershipRequirements) {
|
|
content += `### Membership Requirements\n\n${data.formData.membershipRequirements}\n\n`;
|
|
}
|
|
|
|
if (data.formData.rightsAndResponsibilities) {
|
|
content += `### Rights and Responsibilities\n\n${data.formData.rightsAndResponsibilities}\n\n`;
|
|
}
|
|
|
|
return content;
|
|
};
|
|
|
|
// Conflict Resolution Framework formatting
|
|
const formatConflictResolutionAsText = (data: any): string => {
|
|
let content = `CONFLICT RESOLUTION FRAMEWORK\n=============================\n\n`;
|
|
content += `Organization: ${data.orgName}\n`;
|
|
content += `Organization Type: ${data.orgType}\n`;
|
|
content += `Member Count: ${data.memberCount}\n\n`;
|
|
|
|
if (data.coreValues?.length > 0) {
|
|
content += `CORE VALUES\n-----------\n`;
|
|
data.coreValues.forEach((value: string, index: number) => {
|
|
content += `${index + 1}. ${value}\n`;
|
|
});
|
|
content += "\n";
|
|
}
|
|
|
|
if (data.principles?.length > 0) {
|
|
content += `PRINCIPLES\n----------\n`;
|
|
data.principles.forEach((principle: string, index: number) => {
|
|
content += `${index + 1}. ${principle}\n`;
|
|
});
|
|
content += "\n";
|
|
}
|
|
|
|
if (data.policies) {
|
|
content += `POLICIES\n--------\n`;
|
|
Object.entries(data.policies).forEach(([key, value]) => {
|
|
if (value) {
|
|
const formattedKey = key
|
|
.replace(/([A-Z])/g, " $1")
|
|
.replace(/^./, (str) => str.toUpperCase());
|
|
content += `${formattedKey}: ${value}\n`;
|
|
}
|
|
});
|
|
}
|
|
|
|
return content;
|
|
};
|
|
|
|
const formatConflictResolutionAsMarkdown = (data: any): string => {
|
|
let content = `## Conflict Resolution Framework\n\n`;
|
|
content += `**Organization:** ${data.orgName} \n`;
|
|
content += `**Organization Type:** ${data.orgType} \n`;
|
|
content += `**Member Count:** ${data.memberCount} \n\n`;
|
|
|
|
if (data.coreValues?.length > 0) {
|
|
content += `### Core Values\n\n`;
|
|
data.coreValues.forEach((value: string, index: number) => {
|
|
content += `${index + 1}. ${value}\n`;
|
|
});
|
|
content += "\n";
|
|
}
|
|
|
|
if (data.principles?.length > 0) {
|
|
content += `### Principles\n\n`;
|
|
data.principles.forEach((principle: string, index: number) => {
|
|
content += `${index + 1}. ${principle}\n`;
|
|
});
|
|
content += "\n";
|
|
}
|
|
|
|
if (data.policies) {
|
|
content += `### Policies\n\n`;
|
|
Object.entries(data.policies).forEach(([key, value]) => {
|
|
if (value) {
|
|
const formattedKey = key
|
|
.replace(/([A-Z])/g, " $1")
|
|
.replace(/^./, (str) => str.toUpperCase());
|
|
content += `**${formattedKey}:** ${value} \n`;
|
|
}
|
|
});
|
|
}
|
|
|
|
return content;
|
|
};
|
|
|
|
// Decision Framework formatting
|
|
const formatDecisionFrameworkAsText = (data: any): string => {
|
|
let content = `DECISION FRAMEWORK RESULTS\n=========================\n\n`;
|
|
|
|
if (data.surveyResponses) {
|
|
content += `SURVEY RESPONSES\n----------------\n`;
|
|
content += `Urgency: ${data.surveyResponses.urgency}\n`;
|
|
content += `Reversible: ${data.surveyResponses.reversible}\n`;
|
|
content += `Expertise: ${data.surveyResponses.expertise}\n`;
|
|
content += `Impact: ${data.surveyResponses.impact}\n`;
|
|
content += `Options: ${data.surveyResponses.options}\n`;
|
|
content += `Investment: ${data.surveyResponses.investment}\n`;
|
|
content += `Team Size: ${data.surveyResponses.teamSize}\n\n`;
|
|
}
|
|
|
|
if (data.recommendedFramework) {
|
|
const framework = data.recommendedFramework;
|
|
content += `RECOMMENDED FRAMEWORK\n--------------------\n`;
|
|
content += `Method: ${framework.method}\n`;
|
|
content += `Tagline: ${framework.tagline}\n\n`;
|
|
content += `Reasoning: ${framework.reasoning}\n\n`;
|
|
|
|
if (framework.steps) {
|
|
content += `IMPLEMENTATION STEPS\n-------------------\n`;
|
|
framework.steps.forEach((step: string, index: number) => {
|
|
content += `${index + 1}. ${step}\n`;
|
|
});
|
|
content += "\n";
|
|
}
|
|
|
|
if (framework.tips) {
|
|
content += `PRO TIPS\n--------\n`;
|
|
framework.tips.forEach((tip: string, index: number) => {
|
|
content += `${index + 1}. ${tip}\n`;
|
|
});
|
|
content += "\n";
|
|
}
|
|
}
|
|
|
|
return content;
|
|
};
|
|
|
|
const formatDecisionFrameworkAsMarkdown = (data: any): string => {
|
|
let content = `## Decision Framework Results\n\n`;
|
|
|
|
if (data.surveyResponses) {
|
|
content += `### Survey Responses\n\n`;
|
|
content += `**Urgency:** ${data.surveyResponses.urgency} \n`;
|
|
content += `**Reversible:** ${data.surveyResponses.reversible} \n`;
|
|
content += `**Expertise:** ${data.surveyResponses.expertise} \n`;
|
|
content += `**Impact:** ${data.surveyResponses.impact} \n`;
|
|
content += `**Options:** ${data.surveyResponses.options} \n`;
|
|
content += `**Investment:** ${data.surveyResponses.investment} \n`;
|
|
content += `**Team Size:** ${data.surveyResponses.teamSize} \n\n`;
|
|
}
|
|
|
|
if (data.recommendedFramework) {
|
|
const framework = data.recommendedFramework;
|
|
content += `### Recommended Framework\n\n`;
|
|
content += `**Method:** ${framework.method} \n`;
|
|
content += `**Tagline:** ${framework.tagline} \n\n`;
|
|
content += `**Reasoning:** ${framework.reasoning}\n\n`;
|
|
|
|
if (framework.steps) {
|
|
content += `#### Implementation Steps\n\n`;
|
|
framework.steps.forEach((step: string, index: number) => {
|
|
content += `${index + 1}. ${step}\n`;
|
|
});
|
|
content += "\n";
|
|
}
|
|
|
|
if (framework.tips) {
|
|
content += `#### Pro Tips\n\n`;
|
|
framework.tips.forEach((tip: string, index: number) => {
|
|
content += `${index + 1}. ${tip}\n`;
|
|
});
|
|
content += "\n";
|
|
}
|
|
}
|
|
|
|
return content;
|
|
};
|
|
|
|
const downloadFile = (content: string, filename: string, type: string) => {
|
|
const blob = new Blob([content], { type });
|
|
const url = URL.createObjectURL(blob);
|
|
const a = document.createElement("a");
|
|
a.href = url;
|
|
a.download = filename;
|
|
document.body.appendChild(a);
|
|
a.click();
|
|
document.body.removeChild(a);
|
|
URL.revokeObjectURL(url);
|
|
};
|
|
</script>
|
|
|
|
<style scoped>
|
|
@reference "tailwindcss";
|
|
.export-content {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 1.5rem;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.export-section {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.export-buttons {
|
|
@apply font-mono;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.75rem;
|
|
}
|
|
|
|
.export-btn {
|
|
@apply bg-neutral-100 dark:bg-neutral-900 border border-neutral-200 dark:border-neutral-800 text-neutral-900 dark:text-white;
|
|
}
|
|
|
|
.export-btn:hover:not(:disabled) {
|
|
background: #000;
|
|
color: #fff;
|
|
transform: translateY(-2px) translateX(-2px);
|
|
box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
|
|
}
|
|
|
|
.export-btn:disabled {
|
|
opacity: 0.6;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
.export-btn.success-state {
|
|
background: #10b981 !important;
|
|
color: white !important;
|
|
border-color: #10b981 !important;
|
|
}
|
|
|
|
.success-icon {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 0.5rem;
|
|
transform: translateY(-50%);
|
|
animation: successPulse 2s ease-out;
|
|
color: #10b981;
|
|
}
|
|
|
|
.export-btn.success-state .success-icon {
|
|
color: white;
|
|
}
|
|
|
|
@keyframes successPulse {
|
|
0% {
|
|
opacity: 0;
|
|
transform: translateY(-50%) scale(0.5);
|
|
}
|
|
20% {
|
|
opacity: 1;
|
|
transform: translateY(-50%) scale(1.2);
|
|
}
|
|
40% {
|
|
transform: translateY(-50%) scale(1);
|
|
}
|
|
100% {
|
|
opacity: 0;
|
|
transform: translateY(-50%) scale(1);
|
|
}
|
|
}
|
|
/* Mobile responsive */
|
|
@media (max-width: 768px) {
|
|
.export-content {
|
|
flex-direction: column;
|
|
align-items: stretch;
|
|
}
|
|
|
|
.export-section {
|
|
justify-content: center;
|
|
}
|
|
|
|
.export-buttons {
|
|
justify-content: center;
|
|
}
|
|
|
|
.export-btn {
|
|
flex: 1;
|
|
justify-content: center;
|
|
min-width: 140px;
|
|
}
|
|
}
|
|
</style>
|