Initial commit
This commit is contained in:
159
src/components/DataTable.vue
Normal file
159
src/components/DataTable.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<template>
|
||||
<div class="table-section">
|
||||
<Navigation
|
||||
@back="$emit('reset')"
|
||||
@next="$emit('configure')"
|
||||
/>
|
||||
<div class="table-container">
|
||||
<n-data-table
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
:pagination="{
|
||||
page: currentPage,
|
||||
pageSize: pageSize,
|
||||
pageSizes: [10, 20, 50, 100],
|
||||
showSizePicker: true,
|
||||
showQuickJumper: true,
|
||||
itemCount: data.length,
|
||||
onUpdatePage: handlePageChange,
|
||||
onUpdatePageSize: handlePageSizeChange
|
||||
}"
|
||||
:bordered="true"
|
||||
:striped="true"
|
||||
:scroll-x="scrollX"
|
||||
style="max-width: 100%"
|
||||
:single-line="false"
|
||||
:bottom-bordered="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { h } from 'vue'
|
||||
import Navigation from './Navigation.vue'
|
||||
|
||||
export default {
|
||||
name: 'DataTable',
|
||||
components: {
|
||||
Navigation
|
||||
},
|
||||
props: {
|
||||
jsonData: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
emits: ['reset', 'configure'],
|
||||
data() {
|
||||
return {
|
||||
columns: [],
|
||||
data: [],
|
||||
currentPage: 1,
|
||||
pageSize: 10,
|
||||
scrollX: 0
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
jsonData: {
|
||||
immediate: true,
|
||||
handler(newData) {
|
||||
if (newData && newData.length > 0) {
|
||||
this.processData(newData)
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
processData(jsonData) {
|
||||
const headers = jsonData[0]
|
||||
|
||||
// Calculate max width for each column
|
||||
const columnWidths = headers.map((header, columnIndex) => {
|
||||
let maxLength = header.toString().length
|
||||
jsonData.slice(1).forEach(row => {
|
||||
const cellContent = row[columnIndex]
|
||||
if (cellContent) {
|
||||
const contentLength = cellContent.toString().length
|
||||
maxLength = Math.max(maxLength, contentLength)
|
||||
}
|
||||
})
|
||||
return Math.min(Math.max(maxLength * 10, 80), 300)
|
||||
})
|
||||
|
||||
// Create columns
|
||||
this.columns = headers.map((header, index) => ({
|
||||
title: () => h(
|
||||
'span',
|
||||
{
|
||||
style: {
|
||||
color: 'white',
|
||||
fontWeight: '500'
|
||||
}
|
||||
},
|
||||
header
|
||||
),
|
||||
key: header,
|
||||
sortable: true,
|
||||
width: columnWidths[index],
|
||||
ellipsis: {
|
||||
tooltip: true
|
||||
}
|
||||
}))
|
||||
|
||||
// Process data
|
||||
this.data = jsonData.slice(1).map(row => {
|
||||
const rowData = {}
|
||||
headers.forEach((header, index) => {
|
||||
rowData[header] = row[index] || ''
|
||||
})
|
||||
return rowData
|
||||
})
|
||||
|
||||
// Calculate total width
|
||||
this.$nextTick(() => {
|
||||
const totalWidth = columnWidths.reduce((sum, width) => sum + width, 0)
|
||||
this.scrollX = Math.max(totalWidth + 100, 1200)
|
||||
})
|
||||
},
|
||||
handlePageChange(page) {
|
||||
this.currentPage = page
|
||||
},
|
||||
handlePageSizeChange(pageSize) {
|
||||
this.pageSize = pageSize
|
||||
this.currentPage = 1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.table-container {
|
||||
margin-top: 20px;
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
padding: 1rem;
|
||||
overflow-x: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.reset-btn {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: background-color 0.2s;
|
||||
}
|
||||
|
||||
.reset-btn:hover {
|
||||
background-color: var(--primary-hover);
|
||||
}
|
||||
</style>
|
||||
168
src/components/FileUpload.vue
Normal file
168
src/components/FileUpload.vue
Normal file
@@ -0,0 +1,168 @@
|
||||
<template>
|
||||
<div class="upload-container">
|
||||
<div class="upload-box"
|
||||
@dragover.prevent
|
||||
@drop.prevent="handleDrop"
|
||||
@click="triggerFileInput">
|
||||
<div class="upload-content">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||||
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
|
||||
<polyline points="17 8 12 3 7 8"/>
|
||||
<line x1="12" y1="3" x2="12" y2="15"/>
|
||||
</svg>
|
||||
<h3>Drop your Excel or CSV file here</h3>
|
||||
<p>or click to browse</p>
|
||||
</div>
|
||||
</div>
|
||||
<input
|
||||
type="file"
|
||||
ref="fileInput"
|
||||
@change="handleFileSelect"
|
||||
accept=".csv,.xlsx,.xls"
|
||||
style="display: none"
|
||||
>
|
||||
<div v-if="error" class="error-message">
|
||||
{{ error }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import * as XLSX from 'xlsx'
|
||||
|
||||
export default {
|
||||
name: 'FileUpload',
|
||||
emits: ['file-processed'],
|
||||
data() {
|
||||
return {
|
||||
error: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
triggerFileInput() {
|
||||
this.error = null
|
||||
this.$refs.fileInput.value = ''
|
||||
this.$refs.fileInput.click()
|
||||
},
|
||||
handleDrop(e) {
|
||||
this.error = null
|
||||
this.$refs.fileInput.value = ''
|
||||
const file = e.dataTransfer.files[0]
|
||||
if (file) {
|
||||
this.processFile(file)
|
||||
}
|
||||
},
|
||||
handleFileSelect(e) {
|
||||
this.error = null
|
||||
const file = e.target.files[0]
|
||||
if (file) {
|
||||
this.processFile(file)
|
||||
} else {
|
||||
this.$refs.fileInput.value = ''
|
||||
}
|
||||
},
|
||||
processFile(file) {
|
||||
const validTypes = [
|
||||
'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
|
||||
'application/vnd.ms-excel',
|
||||
'text/csv'
|
||||
]
|
||||
|
||||
if (!validTypes.includes(file.type)) {
|
||||
this.error = 'Please upload a valid Excel or CSV file.'
|
||||
this.$refs.fileInput.value = ''
|
||||
return
|
||||
}
|
||||
|
||||
const reader = new FileReader()
|
||||
|
||||
reader.onload = (e) => {
|
||||
try {
|
||||
const data = new Uint8Array(e.target.result)
|
||||
const workbook = XLSX.read(data, { type: 'array' })
|
||||
|
||||
const firstSheetName = workbook.SheetNames[0]
|
||||
const worksheet = workbook.Sheets[firstSheetName]
|
||||
|
||||
const jsonData = XLSX.utils.sheet_to_json(worksheet, { header: 1 })
|
||||
|
||||
if (jsonData.length > 0) {
|
||||
const headers = jsonData[0]
|
||||
|
||||
const hasBlankHeaders = headers.some(header =>
|
||||
!header || header.toString().trim() === ''
|
||||
)
|
||||
|
||||
if (hasBlankHeaders) {
|
||||
this.error = 'Invalid file format: The first row contains blank columns. Please ensure all headers are filled.'
|
||||
return
|
||||
}
|
||||
|
||||
const uniqueHeaders = new Set(headers)
|
||||
if (uniqueHeaders.size !== headers.length) {
|
||||
this.error = 'Invalid file format: The file contains duplicate column headers. Please ensure all headers are unique.'
|
||||
return
|
||||
}
|
||||
|
||||
this.$emit('file-processed', jsonData)
|
||||
} else {
|
||||
this.error = 'The file appears to be empty. Please upload a file with data.'
|
||||
}
|
||||
} catch (err) {
|
||||
this.error = 'Error processing file. Please ensure it is a valid Excel or CSV file.'
|
||||
console.error('File processing error:', err)
|
||||
}
|
||||
}
|
||||
|
||||
reader.onerror = () => {
|
||||
this.error = 'Error reading file. Please try again.'
|
||||
}
|
||||
|
||||
reader.readAsArrayBuffer(file)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.upload-container {
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
.upload-box {
|
||||
border: 2px dashed var(--border-color);
|
||||
border-radius: 8px;
|
||||
padding: 3rem;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s ease;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.upload-box:hover {
|
||||
border-color: var(--primary-color);
|
||||
background-color: #f8fafc;
|
||||
}
|
||||
|
||||
.upload-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.upload-content svg {
|
||||
color: var(--primary-color);
|
||||
}
|
||||
|
||||
.error-message {
|
||||
margin-top: 1rem;
|
||||
padding: 1rem;
|
||||
border-radius: 6px;
|
||||
background-color: #fee2e2;
|
||||
color: #991b1b;
|
||||
border: 1px solid #fecaca;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
</style>
|
||||
398
src/components/MetaData.vue
Normal file
398
src/components/MetaData.vue
Normal file
@@ -0,0 +1,398 @@
|
||||
<template>
|
||||
<div class="metadata-section">
|
||||
<Navigation
|
||||
@back="$emit('back')"
|
||||
@next="confirmMetadata"
|
||||
/>
|
||||
|
||||
<div class="table-container">
|
||||
<n-data-table
|
||||
:columns="metadataColumns"
|
||||
:data="metadata"
|
||||
:bordered="true"
|
||||
:single-line="false"
|
||||
:pagination="false"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { h, ref } from 'vue'
|
||||
import { NSelect, NInputNumber, NButton } from 'naive-ui'
|
||||
import Navigation from './Navigation.vue'
|
||||
import { apiClient } from '../services/ApiClient'
|
||||
import {
|
||||
generateSQLAttribute,
|
||||
generateSQLDefault,
|
||||
sanitizeColumnName,
|
||||
getExcelColumn
|
||||
} from '../utils/sqlUtils'
|
||||
|
||||
export default {
|
||||
name: 'MetaData',
|
||||
components: {
|
||||
Navigation
|
||||
},
|
||||
props: {
|
||||
jsonData: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
emits: ['back', 'sql-generated'],
|
||||
data() {
|
||||
return {
|
||||
metadata: [],
|
||||
metadataColumns: [
|
||||
{
|
||||
title: () => h('span', { style: { color: 'white' }}, 'Excel'),
|
||||
key: 'excelCol',
|
||||
width: 80
|
||||
},
|
||||
{
|
||||
title: () => h('span', { style: { color: 'white' }}, 'Column Name'),
|
||||
key: 'colName',
|
||||
editor: true,
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: () => h('span', { style: { color: 'white' }}, 'Description'),
|
||||
key: 'colDesc',
|
||||
editor: true,
|
||||
width: 200
|
||||
},
|
||||
{
|
||||
title: () => h('span', { style: { color: 'white' }}, 'Type'),
|
||||
key: 'colType',
|
||||
width: 120,
|
||||
render: (row) => h(NSelect, {
|
||||
value: row.colType,
|
||||
options: [
|
||||
{ label: 'String', value: 'String' },
|
||||
{ label: 'Number', value: 'Number' },
|
||||
{ label: 'Date', value: 'Date' }
|
||||
],
|
||||
onUpdateValue: (value) => {
|
||||
// When switching from Number to String, add 1 for decimal point
|
||||
let newLength = row.colLength
|
||||
if (row.colType === 'Number' && value === 'String' && row.colScale > 0) {
|
||||
newLength = row.colLength + 1
|
||||
}
|
||||
|
||||
if (value !== 'Number') {
|
||||
row.colScale = 0
|
||||
}
|
||||
if (value === 'Date') {
|
||||
newLength = 10
|
||||
}
|
||||
|
||||
this.updateRowSQL(row, value, newLength, row.colScale)
|
||||
}
|
||||
})
|
||||
},
|
||||
{
|
||||
title: () => h('span', { style: { color: 'white' }}, 'Length'),
|
||||
key: 'colLength',
|
||||
width: 100,
|
||||
render: (row) => h(NInputNumber, {
|
||||
value: row.colLength,
|
||||
min: 1,
|
||||
max: 999,
|
||||
onUpdateValue: (value) => {
|
||||
this.updateRowSQL(row, row.colType, value, row.colScale)
|
||||
}
|
||||
})
|
||||
},
|
||||
{
|
||||
title: () => h('span', { style: { color: 'white' }}, 'Scale'),
|
||||
key: 'colScale',
|
||||
width: 100,
|
||||
render: (row) => {
|
||||
return row.colType === 'Number' ? h(NInputNumber, {
|
||||
value: row.colScale,
|
||||
min: 0,
|
||||
max: row.colLength - 1,
|
||||
onUpdateValue: (value) => {
|
||||
this.updateRowSQL(row, row.colType, row.colLength, value)
|
||||
}
|
||||
}) : null
|
||||
}
|
||||
},
|
||||
{
|
||||
title: () => h('span', { style: { color: 'white' }}, 'SQL Attribute'),
|
||||
key: 'colSQLAttr',
|
||||
width: 250
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.processMetadata()
|
||||
},
|
||||
methods: {
|
||||
isNumericColumn(columnIndex) {
|
||||
const numTest = /^-?(\d{1,3}(,\d{3})*|\d+)(.\d+)?$/
|
||||
let isNumeric = true
|
||||
|
||||
for (let i = 1; i < this.jsonData.length; i++) {
|
||||
const cellValue = String(this.jsonData[i][columnIndex] || '')
|
||||
|
||||
if (!cellValue.trim()) continue
|
||||
|
||||
const cleanValue = cellValue.replace(/,/g, '')
|
||||
|
||||
if (!(numTest.test(cellValue) || !isNaN(cleanValue))) {
|
||||
isNumeric = false
|
||||
break
|
||||
}
|
||||
|
||||
const num = parseFloat(cleanValue)
|
||||
if (num > Number.MAX_SAFE_INTEGER || num < Number.MIN_SAFE_INTEGER) {
|
||||
isNumeric = false
|
||||
break
|
||||
}
|
||||
}
|
||||
return isNumeric
|
||||
},
|
||||
isDateFormatColumn(columnIndex) {
|
||||
const dateTest = new RegExp(/^\d{1,2}\/\d{1,2}\/(\d{4}|\d{2})$|^\d{4}-\d{1,2}-\d{1,2}$/)
|
||||
let isDate = true
|
||||
|
||||
for (let i = 1; i < this.jsonData.length; i++) {
|
||||
const cellValue = this.jsonData[i][columnIndex]
|
||||
if (cellValue instanceof Date) continue
|
||||
if (cellValue && !dateTest.test(String(cellValue))) {
|
||||
isDate = false
|
||||
break
|
||||
}
|
||||
}
|
||||
return isDate
|
||||
},
|
||||
getMaxColumnLength(columnIndex) {
|
||||
let length = 1
|
||||
let scale = 0
|
||||
|
||||
for (let i = 1; i < this.jsonData.length; i++) {
|
||||
const rawValue = this.jsonData[i][columnIndex]
|
||||
const cellValue = String(rawValue || '').replace(/,/g, '')
|
||||
|
||||
if (cellValue && cellValue.length > length) {
|
||||
length = cellValue.length
|
||||
if (typeof rawValue === 'number' || !isNaN(cellValue)) {
|
||||
if (cellValue.includes('.') && cellValue.split('.')[1].length > scale) {
|
||||
scale = cellValue.split('.')[1].length
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
return { length, scale }
|
||||
},
|
||||
updateRowSQL(row, newType, newLength, newScale) {
|
||||
const updatedRow = { ...row }
|
||||
updatedRow.colType = newType
|
||||
|
||||
// When switching from Number to String, just add 1 for decimal point
|
||||
if (row.colType === 'Number' && newType === 'String' && row.colScale > 0) {
|
||||
newLength = newLength + 1 // Add space just for decimal point
|
||||
}
|
||||
|
||||
updatedRow.colLength = newLength
|
||||
updatedRow.colScale = newScale
|
||||
updatedRow.colSQLAttr = generateSQLAttribute(newType, newLength, newScale)
|
||||
updatedRow.colSQLDefault = generateSQLDefault(newType)
|
||||
|
||||
const index = this.metadata.indexOf(row)
|
||||
if (index !== -1) {
|
||||
this.metadata[index] = updatedRow
|
||||
this.metadata = [...this.metadata]
|
||||
}
|
||||
},
|
||||
processMetadata() {
|
||||
if (!this.jsonData.length) return
|
||||
|
||||
const headers = this.jsonData[0]
|
||||
this.metadata = headers.map((header, index) => {
|
||||
const columnType = this.determineColumnType(index)
|
||||
const { length, scale } = this.getMaxColumnLength(index)
|
||||
|
||||
return {
|
||||
excelCol: getExcelColumn(index),
|
||||
colNum: index + 1,
|
||||
colName: sanitizeColumnName(header),
|
||||
colDesc: header.substring(0, 50),
|
||||
colType: columnType,
|
||||
colLength: length,
|
||||
colScale: scale,
|
||||
colSQLAttr: this.generateSQLAttribute(columnType, length, scale),
|
||||
colSQLDefault: this.generateSQLDefault(columnType)
|
||||
}
|
||||
})
|
||||
},
|
||||
determineColumnType(columnIndex) {
|
||||
if (this.isNumericColumn(columnIndex)) return 'Number'
|
||||
if (this.isDateFormatColumn(columnIndex)) return 'Date'
|
||||
return 'String'
|
||||
},
|
||||
generateSQLAttribute(type, length, scale) {
|
||||
switch (type) {
|
||||
case 'Number':
|
||||
return `Num(${length}, ${scale})`
|
||||
case 'Date':
|
||||
return 'Date'
|
||||
default:
|
||||
return `Varchar(${length})`
|
||||
}
|
||||
},
|
||||
generateSQLDefault(type) {
|
||||
switch (type) {
|
||||
case 'Number':
|
||||
return 'Not Null Default 0'
|
||||
case 'Date':
|
||||
return `Not Null Default '1980-01-01'`
|
||||
default:
|
||||
return `CCSID 37 Not Null Default ' '`
|
||||
}
|
||||
},
|
||||
async generateCreateTableSQL() {
|
||||
try {
|
||||
const token = await apiClient.getToken()
|
||||
const tableName = `QUERYFILES.${token}`
|
||||
|
||||
const columnDefinitions = this.metadata.map(col =>
|
||||
`${col.colName} ${col.colSQLAttr} ${col.colSQLDefault}`
|
||||
).join(',\n ')
|
||||
|
||||
const statements = [
|
||||
`Begin`,
|
||||
` Create Or Replace Table ${tableName} (`,
|
||||
` ${columnDefinitions}`,
|
||||
` );`,
|
||||
` Label On Table ${tableName} Is 'Generated From Excel Upload';`,
|
||||
` Label On Column ${tableName} (`,
|
||||
` ${this.metadata.map(col => `${col.colName} Is '${col.colDesc}'`).join(',\n ')}`,
|
||||
` );`,
|
||||
` Label On Column ${tableName} (`,
|
||||
` ${this.metadata.map(col => `${col.colName} Text Is '${col.colDesc}'`).join(',\n ')}`,
|
||||
` );`,
|
||||
`End`
|
||||
]
|
||||
|
||||
return {
|
||||
tableName,
|
||||
createTable: statements.join('\n')
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error generating SQL:', error)
|
||||
throw error
|
||||
}
|
||||
},
|
||||
|
||||
async confirmMetadata() {
|
||||
try {
|
||||
const sqlStatements = await this.generateCreateTableSQL()
|
||||
|
||||
this.$emit('sql-generated', {
|
||||
metadata: this.metadata,
|
||||
sql: sqlStatements,
|
||||
tableName: sqlStatements.tableName
|
||||
})
|
||||
} catch (error) {
|
||||
console.error('Error confirming metadata:', error)
|
||||
// You might want to show an error message to the user here
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.metadata-section {
|
||||
margin-top: 2rem;
|
||||
}
|
||||
|
||||
.controls {
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
min-width: 120px;
|
||||
padding: 0.5rem 1rem;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
background-color: #e5e7eb;
|
||||
color: #374151;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background-color: #d1d5db;
|
||||
}
|
||||
|
||||
.nav-btn.primary {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.nav-btn.primary:hover {
|
||||
background-color: var(--primary-hover);
|
||||
}
|
||||
|
||||
.table-container {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
:deep(.n-input-number) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.n-button) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
:deep(.n-select) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.n-data-table .n-data-table-td) {
|
||||
padding: 8px 12px !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
:deep(.n-data-table .n-data-table-th) {
|
||||
padding: 8px 12px !important;
|
||||
height: 40px !important;
|
||||
}
|
||||
|
||||
:deep(.n-base-selection) {
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
:deep(.n-input-number-input) {
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
:deep(.n-input-number), :deep(.n-select) {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
:deep(.n-select .n-base-selection__input) {
|
||||
height: 28px;
|
||||
min-height: 28px;
|
||||
}
|
||||
|
||||
:deep(.n-select .n-base-selection__placeholder) {
|
||||
height: 28px;
|
||||
line-height: 28px;
|
||||
}
|
||||
</style>
|
||||
82
src/components/Navigation.vue
Normal file
82
src/components/Navigation.vue
Normal file
@@ -0,0 +1,82 @@
|
||||
<template>
|
||||
<div class="nav-controls">
|
||||
<div class="nav-buttons">
|
||||
<button
|
||||
v-if="showBack"
|
||||
@click="$emit('back')"
|
||||
class="nav-btn"
|
||||
>
|
||||
Back
|
||||
</button>
|
||||
<button
|
||||
v-if="showNext"
|
||||
@click="$emit('next')"
|
||||
class="nav-btn primary"
|
||||
>
|
||||
Next
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'Navigation',
|
||||
props: {
|
||||
showBack: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showNext: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
emits: ['back', 'next']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.nav-controls {
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.nav-buttons {
|
||||
display: flex;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.nav-btn {
|
||||
min-width: 100px;
|
||||
padding: 0.5rem 1rem;
|
||||
border: 1px solid var(--border-color);
|
||||
cursor: pointer;
|
||||
font-weight: 500;
|
||||
transition: all 0.2s;
|
||||
background-color: white;
|
||||
color: var(--text-color);
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav-btn:first-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.nav-btn:hover {
|
||||
background-color: #f8fafc;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.nav-btn.primary {
|
||||
background-color: var(--primary-color);
|
||||
color: white;
|
||||
border-color: var(--primary-color);
|
||||
}
|
||||
|
||||
.nav-btn.primary:hover {
|
||||
background-color: var(--primary-hover);
|
||||
border-color: var(--primary-hover);
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user