bnilsen/custom_ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add theme store and input, update some components to use theme

Browse source
This commit is contained in:
Casey 2025-12-12 14:21:42 -06:00
parent 43c205e577
commit 0c55c9996f
12 changed files with 459 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

68
frontend/src/components/common/DataTable.vue
View file

@ -1190,31 +1190,33 @@ defineExpose({
/* Modern DataTable Styling */
/* Filter Panel Styles */
.dt-filter-panel {
background: #ffffff;
border: 1px solid #e5e7eb;
background: var(--surface-card);
border: 1px solid var(--surface-border);
border-radius: 6px;
margin-bottom: 0.5rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.dt-filter-header {
padding: 0.5rem 0.75rem 0.25rem;
border-bottom: 1px solid #f3f4f6;
border-bottom: 1px solid var(--surface-border);
}
.dt-filter-title {
margin: 0;
font-size: 0.75rem;
font-weight: 600;
color: #374151;
color: var(--theme-text);
display: flex;
align-items: center;
gap: 0.375rem;
}
.dt-filter-title i {
color: #6366f1;
color: var(--theme-primary);
}
.dt-filter-content {
@ -1237,20 +1239,22 @@ defineExpose({
.dt-filter-label {
font-size: 0.75rem;
font-weight: 500;
color: #374151;
color: var(--theme-text);
}
.dt-filter-input {
border: 1px solid #d1d5db;
border: 1px solid var(--surface-border);
border-radius: 4px;
padding: 0.375rem 0.5rem;
font-size: 0.75rem;
transition: border-color 0.2s ease;
background: #ffffff;
background: var(--surface-card);
}
.dt-filter-input:focus {
border-color: #6366f1;
border-color: var(--theme-primary);
outline: none;
}
@ -1269,13 +1273,14 @@ defineExpose({
padding: 0.375rem 0.75rem;
}
.dt-filter-status {
margin-top: 0.5rem;
padding: 0.375rem 0.5rem;
background: #f9fafb;
background: var(--surface-hover);
border-radius: 4px;
font-size: 0.7rem;
color: #6b7280;
color: var(--theme-text-muted);
display: flex;
align-items: center;
gap: 0.375rem;
@ -1283,8 +1288,8 @@ defineExpose({
/* Pagination Panel Styles */
.dt-pagination-panel {
background: #ffffff;
border: 1px solid #e5e7eb;
background: var(--surface-card);
border: 1px solid var(--surface-border);
border-radius: 6px;
margin-bottom: 0.5rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
@ -1303,12 +1308,12 @@ defineExpose({
display: flex;
align-items: center;
gap: 0.375rem;
color: #6b7280;
color: var(--theme-text-muted);
font-size: 0.75rem;
}
.dt-pagination-info i {
color: #6366f1;
color: var(--theme-primary);
font-size: 0.75rem;
}
@ -1320,31 +1325,31 @@ defineExpose({
.dt-pagination-label {
font-size: 0.75rem;
color: #374151;
color: var(--theme-text);
font-weight: 500;
}
.dt-pagination-select {
border: 1px solid #d1d5db;
border: 1px solid var(--surface-border);
border-radius: 4px;
padding: 0.25rem 0.5rem;
font-size: 0.75rem;
background: white;
background: var(--surface-card);
transition: border-color 0.2s ease;
}
.dt-pagination-select:focus {
border-color: #6366f1;
border-color: var(--theme-primary);
outline: none;
}
/* Bulk Actions Panel Styles */
.dt-bulk-actions-panel {
background: #fef7ed;
border: 1px solid #fed7aa;
background: var(--theme-surface-alt);
border: 1px solid var(--surface-border);
border-radius: 6px;
margin-bottom: 0.5rem;
box-shadow: 0 1px 2px rgba(251, 146, 60, 0.1);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
animation: slideInBulk 0.2s ease-out;
}
@ -1379,12 +1384,13 @@ defineExpose({
padding: 0.375rem 0.75rem;
}
.dt-bulk-actions-status {
padding: 0.25rem 0.5rem;
background: rgba(255, 255, 255, 0.8);
background: var(--surface-card);
border-radius: 4px;
font-size: 0.7rem;
color: #ea580c;
color: var(--theme-secondary);
display: flex;
align-items: center;
gap: 0.375rem;
@ -1392,13 +1398,14 @@ defineExpose({
}
/* Global Actions Panel Styles */
.dt-global-actions-panel {
background: #ffffff;
border: 1px solid #e5e7eb;
background: var(--surface-card);
border: 1px solid var(--surface-border);
border-radius: 6px;
margin-bottom: 0.5rem;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
border-left: 3px solid #6366f1;
border-left: 3px solid var(--theme-primary);
}
.dt-global-actions-content {
@ -1469,12 +1476,13 @@ defineExpose({
color: white;
}
.dt-global-actions-status {
padding: 0.375rem 0.75rem;
background: #f9fafb;
border-top: 1px solid #f3f4f6;
background: var(--surface-hover);
border-top: 1px solid var(--surface-border);
font-size: 0.7rem;
color: #6b7280;
color: var(--theme-text-muted);
display: flex;
align-items: center;
gap: 0.375rem;