@quazardous/qdadm 1.19.3

package/src/styles/_helpers.scss

@@ -0,0 +1,153 @@
+/**
+ * qdadm - Helper Classes
+ *
+ * Common helper/utility classes for spacing, flexbox, grid, and text
+ */
+
+@use 'variables' as *;
+
+// =============================================================================
+// Spinners
+// =============================================================================
+
+.spinner-lg {
+  font-size: 2rem;
+}
+
+.spinner-md {
+  font-size: 1.5rem;
+}
+
+// =============================================================================
+// Cards
+// =============================================================================
+
+.card {
+  background: var(--p-surface-0);
+  border-radius: $radius-lg;
+  padding: $space-lg;
+  border: $border-width solid var(--p-surface-200);
+}
+
+.info-card {
+  background: var(--p-surface-50);
+  padding: $space-md;
+  border-radius: $radius-lg;
+}
+
+.card-title {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.card h3,
+.card-heading {
+  margin: 0 0 $space-md;
+  font-size: $font-size-md;
+  font-weight: $font-weight-semibold;
+  color: var(--p-surface-700);
+}
+
+.warning-card {
+  background: var(--p-yellow-50);
+  padding: $space-md;
+  border-radius: $radius-lg;
+  border: $border-width solid var(--p-yellow-200);
+
+  i {
+    color: var(--p-yellow-600);
+  }
+
+  span {
+    margin-left: $space-sm;
+    color: var(--p-yellow-700);
+  }
+}
+
+// =============================================================================
+// Grid Utilities
+// =============================================================================
+
+.span-full {
+  grid-column: 1 / -1;
+}
+
+.grid {
+  display: grid;
+}
+
+.grid-cols-2 {
+  grid-template-columns: repeat(2, 1fr);
+}
+
+.grid-cols-3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+
+// =============================================================================
+// Text Utilities
+// =============================================================================
+
+.text-uppercase {
+  text-transform: uppercase;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.monospace {
+  font-family: $font-family-mono;
+}
+
+.break-all {
+  word-break: break-all;
+}
+
+// =============================================================================
+// Width Utilities
+// =============================================================================
+
+.w-full {
+  width: 100% !important;
+}
+
+// =============================================================================
+// Spacing Utilities
+// =============================================================================
+
+// Margin bottom
+.mb-0 { margin-bottom: 0; }
+.mb-1 { margin-bottom: $space-sm; }
+.mb-2 { margin-bottom: $space-md; }
+.mb-3 { margin-bottom: $space-lg; }
+
+// Margin top
+.mt-0 { margin-top: 0; }
+.mt-1 { margin-top: $space-sm; }
+.mt-2 { margin-top: $space-md; }
+
+// Padding
+.p-2 { padding: $space-md; }
+.p-3 { padding: $space-lg; }
+.pt-2 { padding-top: $space-md; }
+
+// Gap
+.gap-1 { gap: $space-sm; }
+.gap-2 { gap: $space-md; }
+.gap-3 { gap: $space-lg; }
+
+// =============================================================================
+// Flexbox Utilities
+// =============================================================================
+
+.flex { display: flex; }
+.flex-col { flex-direction: column; }
+.flex-wrap { flex-wrap: wrap; }
+.items-center { align-items: center; }
+.items-start { align-items: flex-start; }
+.items-end { align-items: flex-end; }
+.justify-center { justify-content: center; }
+.justify-between { justify-content: space-between; }
+.flex-1 { flex: 1; }

package/src/styles/_lists.scss

@@ -0,0 +1,225 @@
+/**
+ * qdadm - List Page Styles
+ *
+ * Patterns for list/table pages:
+ * - Status and type tags
+ * - External and domain links
+ * - Clickable cells
+ * - Entity links
+ * - Tags preview
+ * - Table actions
+ */
+
+@use 'variables' as *;
+
+// =============================================================================
+// DataTable Compact Rows
+// =============================================================================
+
+.p-datatable {
+  .p-datatable-tbody > tr > td {
+    padding: 0.5rem 0.75rem !important;
+  }
+
+  .p-datatable-thead > tr > th {
+    padding: 0.625rem 0.75rem !important;
+  }
+}
+
+// =============================================================================
+// Table Actions
+// =============================================================================
+
+.table-actions {
+  display: flex;
+  gap: $space-xs;
+  justify-content: flex-start;
+}
+
+// =============================================================================
+// Status/Type Tags
+// =============================================================================
+
+.text-muted {
+  color: var(--p-surface-400);
+}
+
+.status-tags,
+.type-tags {
+  display: flex;
+  gap: $space-xs;
+  flex-wrap: wrap;
+}
+
+// =============================================================================
+// External Links
+// =============================================================================
+
+.external-link {
+  display: flex;
+  align-items: center;
+  gap: $space-sm;
+  color: var(--p-primary-500);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  i {
+    font-size: $font-size-xs;
+    opacity: 0.6;
+  }
+}
+
+// =============================================================================
+// Domain Cells
+// =============================================================================
+
+.domain-cell {
+  display: flex;
+  align-items: center;
+}
+
+.domain-link {
+  display: flex;
+  align-items: center;
+  gap: $space-sm;
+  color: var(--p-primary-500);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  i {
+    font-size: $font-size-xs;
+    opacity: 0.6;
+  }
+}
+
+.domain-tags {
+  display: flex;
+  gap: $space-xs;
+}
+
+// =============================================================================
+// Clickable Cells
+// =============================================================================
+
+.clickable-cell {
+  cursor: pointer;
+  color: var(--p-primary-color);
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+// =============================================================================
+// Entity Links
+// =============================================================================
+
+.entity-link {
+  display: flex;
+  align-items: center;
+  gap: $space-sm;
+  text-decoration: none;
+  color: var(--p-primary-color);
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.entity-type {
+  font-weight: $font-weight-medium;
+}
+
+.entity-id {
+  font-size: $font-size-xs;
+  background: var(--p-surface-100);
+  padding: 0.15rem 0.35rem;
+  border-radius: 3px;
+}
+
+// =============================================================================
+// Tags Preview
+// =============================================================================
+
+.tags-preview {
+  display: flex;
+  gap: $space-xs;
+  flex-wrap: wrap;
+
+  .p-tag {
+    font-size: $font-size-xs;
+  }
+}
+
+// =============================================================================
+// Role & Permission Labels
+// =============================================================================
+
+.p-role-label,
+.p-permission-label {
+  display: inline-flex;
+  align-items: center;
+  background: transparent;
+  font-size: $font-size-xs;
+  font-weight: normal !important;
+  padding: 0.25rem 0.75rem;
+  border-radius: var(--p-tag-border-radius, 6px);
+  white-space: nowrap;
+
+  &--pill {
+    border-radius: 999px;
+  }
+
+  &--more {
+    border-style: dashed;
+  }
+}
+
+.p-role-label {
+  border: 1px solid var(--p-blue-500);
+  color: var(--p-blue-600);
+}
+
+.p-permission-label {
+  border: 1px solid var(--p-surface-400);
+  color: var(--p-surface-600);
+}
+
+.p-role-labels,
+.p-permission-labels {
+  display: flex;
+  flex-wrap: wrap;
+  gap: $space-xs;
+}
+
+// =============================================================================
+// Chip Override (thin border style)
+// =============================================================================
+
+.p-chip {
+  background: none !important;
+  border: 1px solid var(--p-surface-300) !important;
+  color: var(--p-surface-600) !important;
+  font-size: $font-size-xs !important;
+  padding: 0.2rem 0.6rem !important;
+}
+
+// =============================================================================
+// Mobile Row Tap
+// =============================================================================
+
+.datatable-row-clickable {
+  .p-datatable-tbody > tr {
+    cursor: pointer;
+
+    &:active {
+      background: var(--p-primary-50) !important;
+    }
+  }
+}

package/src/styles/_main.scss

@@ -0,0 +1,356 @@
+/**
+ * qdadm - Main Styles
+ *
+ * Core framework styles including:
+ * - Base resets
+ * - Page layout
+ * - Section headers
+ * - Info blocks
+ * - Breadcrumb
+ *
+ * Other styles are in separate partials:
+ * - _forms.scss - Form layouts and fields
+ * - _stats.scss - Stats cards
+ * - _states.scss - Loading/empty/error states
+ * - _lists.scss - List page patterns
+ * - _filter-bar.scss - Filter bar
+ * - _utilities.scss - Utility classes
+ */
+
+@use 'variables' as *;
+
+// =============================================================================
+// Base Reset
+// =============================================================================
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+html, body, #app {
+  height: 100%;
+  font-family: $font-family-base;
+}
+
+// =============================================================================
+// Global Placeholder Styling
+// =============================================================================
+
+input::placeholder,
+textarea::placeholder,
+.p-inputtext::placeholder,
+.p-autocomplete-input::placeholder,
+.p-textarea::placeholder,
+.p-select-label.p-placeholder,
+.p-dropdown-label.p-placeholder {
+  color: #a0aec0 !important;
+  opacity: 1;
+}
+
+// =============================================================================
+// Page Content
+// =============================================================================
+
+.page-content {
+  flex: 1;
+  padding: $space-lg;
+}
+
+// =============================================================================
+// Page Headers
+// =============================================================================
+
+.page-header {
+  margin-bottom: $space-lg;
+}
+
+.page-title {
+  font-size: $font-size-2xl;
+  font-weight: $font-weight-semibold;
+  color: var(--p-surface-900);
+}
+
+.header-actions {
+  display: flex;
+  gap: 0.75rem;
+  align-items: center;
+}
+
+// =============================================================================
+// PrimeVue Tabs
+// =============================================================================
+
+.p-tabpanels {
+  padding-top: $space-md;
+}
+
+.p-tabpanel > .form-field:first-child,
+.p-tabpanel > .form-row:first-child,
+.p-tabpanel > .form-grid:first-child {
+  margin-top: $space-sm;
+}
+
+// =============================================================================
+// Info Blocks
+// =============================================================================
+
+.info-block {
+  background: var(--p-surface-50);
+  padding: $space-lg;
+  border-radius: $radius-lg;
+}
+
+.info-block-title {
+  margin: 0 0 $space-md 0;
+  font-size: $font-size-md;
+  color: var(--p-surface-600);
+
+  i {
+    margin-right: $space-sm;
+  }
+}
+
+.info-label {
+  font-weight: $font-weight-medium;
+  color: var(--p-surface-500);
+  display: block;
+  margin-bottom: $space-xs;
+}
+
+.info-label-sm {
+  font-size: $font-size-xs;
+  font-weight: $font-weight-semibold;
+  color: var(--p-surface-500);
+  text-transform: uppercase;
+  display: block;
+  margin-bottom: $space-xs;
+}
+
+.value-lg {
+  font-size: $font-size-2xl;
+  font-weight: $font-weight-semibold;
+}
+
+// Accent blocks
+.accent-block {
+  background: var(--p-surface-50);
+  border-left: 3px solid var(--p-primary-500);
+  padding: $space-md;
+  border-radius: $radius-sm;
+}
+
+// Code/key display
+.code-block {
+  word-break: break-all;
+  font-family: $font-family-mono;
+  background: var(--p-surface-100);
+  padding: $space-md;
+  border-radius: $radius-sm;
+}
+
+// =============================================================================
+// Section Headers
+// =============================================================================
+
+.section-header {
+  display: flex;
+  align-items: center;
+  gap: $space-sm;
+  margin-bottom: $space-md;
+
+  h3 {
+    margin: 0;
+    font-size: $font-size-md;
+    font-weight: $font-weight-semibold;
+  }
+
+  i {
+    color: var(--p-primary-500);
+  }
+}
+
+.section-description {
+  color: var(--p-surface-500);
+  font-size: $font-size-sm;
+  margin-bottom: $space-md;
+}
+
+.section-title {
+  margin: 0 0 $space-md 0;
+  font-size: $font-size-md;
+  font-weight: $font-weight-semibold;
+  color: var(--p-surface-700);
+
+  &--separator {
+    border-top: $border-width solid var(--p-surface-200);
+    padding-top: $space-lg;
+  }
+
+  i {
+    margin-right: $space-sm;
+  }
+}
+
+// =============================================================================
+// Image Gallery Pattern
+// =============================================================================
+
+.image-gallery {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: $space-md;
+}
+
+.image-card {
+  position: relative;
+  border-radius: $radius-lg;
+  overflow: hidden;
+  border: $border-width solid var(--p-surface-200);
+
+  img {
+    width: 100%;
+    aspect-ratio: 16/9;
+    object-fit: cover;
+  }
+
+  &--clickable {
+    cursor: pointer;
+    transition: border-color $transition-normal, box-shadow $transition-normal;
+
+    &:hover {
+      border-color: var(--p-primary-300);
+      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+    }
+  }
+}
+
+.image-caption {
+  padding: $space-sm;
+  background: var(--p-surface-50);
+  font-size: $font-size-xs;
+  color: var(--p-surface-600);
+}
+
+// =============================================================================
+// Info Row Pattern
+// =============================================================================
+
+.info-row {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: $space-sm 0;
+  border-bottom: $border-width solid var(--p-surface-100);
+
+  &:last-child {
+    border-bottom: none;
+  }
+}
+
+// =============================================================================
+// Breadcrumb
+// =============================================================================
+
+.layout-breadcrumb {
+  padding: 0.75rem $space-lg;
+  background: var(--p-surface-0, white);
+  border-bottom: $border-width solid var(--p-surface-200, #e2e8f0);
+
+  .p-breadcrumb-list {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+.breadcrumb-link {
+  display: flex;
+  align-items: center;
+  gap: $radius-md;
+  color: var(--p-primary-600, #2563eb);
+  text-decoration: none;
+  font-size: $font-size-sm;
+
+  &:hover {
+    text-decoration: underline;
+  }
+
+  i {
+    font-size: $font-size-sm;
+  }
+}
+
+.breadcrumb-current {
+  display: flex;
+  align-items: center;
+  gap: $radius-md;
+  color: var(--p-surface-600, #475569);
+  font-size: $font-size-sm;
+
+  i {
+    font-size: $font-size-sm;
+  }
+}
+
+// =============================================================================
+// Breadcrumb Component
+// =============================================================================
+
+.breadcrumb {
+  margin-bottom: 0.5rem;
+}
+
+.breadcrumb-list {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  font-size: 0.875rem;
+}
+
+.breadcrumb-item {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+
+  &.is-current .breadcrumb-text {
+    color: var(--p-text-color, #333);
+    font-weight: 500;
+  }
+}
+
+.breadcrumb-separator {
+  font-size: 0.75rem;
+  color: var(--p-text-muted-color, #888);
+}
+
+// Note: .breadcrumb-link is already defined above for layout breadcrumb.
+// The component Breadcrumb.vue uses the same class name but with different
+// selectors. We extend with component-specific rules here.
+.breadcrumb-item .breadcrumb-link {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: var(--p-primary-color, #3b82f6);
+  text-decoration: none;
+  transition: color 0.2s;
+
+  &:hover {
+    color: var(--p-primary-hover-color, #2563eb);
+    text-decoration: underline;
+  }
+
+  i {
+    font-size: 0.875rem;
+  }
+}
+
+.breadcrumb-text {
+  display: flex;
+  align-items: center;
+  gap: 0.375rem;
+  color: var(--p-text-muted-color, #888);
+}