@keenmate/pure-admin-core 1.2.0 → 1.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@keenmate/pure-admin-core",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "description": "Lightweight, data-focused HTML/CSS admin framework built with PureCSS foundation and comprehensive component system",
   "style": "dist/css/main.css",
   "exports": {

package/src/scss/_base-css-variables.scss

@@ -448,6 +448,7 @@
   // =========================================================================
   --pa-detail-panel-overlay-bg: #{$detail-panel-overlay-bg};
   --pa-detail-panel-selected-bg: #{$detail-panel-selected-bg};
+  --pa-detail-panel-z-index: #{$detail-panel-z-index};
 
   // =========================================================================
   // COMMAND PALETTE COLORS

package/src/scss/_core.scss

@@ -104,5 +104,8 @@
 // Settings Panel
 @use 'core-components/settings-panel' as *;
 
+// Data Display (read-only fields)
+@use 'core-components/data-display' as *;
+
 // Utility classes and helpers
 @use 'core-components/utilities' as *;

package/src/scss/core-components/_data-display.scss

@@ -0,0 +1,347 @@
+/* ========================================
+   Data Display Components
+   Read-only label-value field pairs
+   ======================================== */
+@use '../variables' as *;
+
+// ============================================================================
+// SINGLE FIELD (.pa-field)
+// Default: stacked (label on top, value below)
+// ============================================================================
+
+.pa-field {
+  display: flex;
+  flex-direction: column;
+  gap: $field-gap;
+
+  &__label {
+    display: block;
+    font-size: $field-label-font-size;
+    font-weight: $field-label-font-weight;
+    opacity: $field-label-opacity;
+    line-height: $line-height-tight;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  &__value {
+    display: block;
+    font-size: $field-value-font-size;
+    font-weight: $font-weight-normal;
+    line-height: $line-height-base;
+  }
+
+  // Full-width modifier (spans entire row in grid layouts)
+  &--full {
+    grid-column: 1 / -1;
+  }
+
+  // ------------------------------------------------------------------
+  // COPYABLE: copy value to clipboard
+  // ------------------------------------------------------------------
+
+  // Copy button always visible
+  &--copy-btn {
+    .pa-field__value {
+      display: flex;
+      align-items: center;
+      gap: $spacing-sm;
+    }
+
+    .pa-field__copy {
+      flex-shrink: 0;
+      padding: 0.4rem;
+      background: transparent;
+      border: none;
+      border-radius: $border-radius;
+      cursor: pointer;
+      opacity: 0.5;
+      transition: opacity 0.15s, background 0.15s;
+
+      &:hover {
+        opacity: 1;
+        background: rgba(128, 128, 128, 0.1);
+      }
+    }
+  }
+
+  // Click value to copy
+  &--copy-click {
+    .pa-field__value {
+      cursor: pointer;
+      transition: opacity 0.15s;
+
+      &:hover {
+        opacity: 0.7;
+      }
+
+      &::after {
+        content: 'Click to copy';
+        font-size: $font-size-2xs;
+        opacity: 0;
+        margin-left: $spacing-sm;
+        transition: opacity 0.15s;
+      }
+
+      &:hover::after {
+        opacity: 0.6;
+      }
+    }
+  }
+
+  // Copy icon on hover only
+  &--copy-hover {
+    .pa-field__value {
+      display: flex;
+      align-items: center;
+      gap: $spacing-sm;
+    }
+
+    .pa-field__copy {
+      flex-shrink: 0;
+      padding: 0.4rem;
+      background: transparent;
+      border: none;
+      border-radius: $border-radius;
+      cursor: pointer;
+      opacity: 0;
+      transition: opacity 0.15s, background 0.15s;
+    }
+
+    &:hover .pa-field__copy {
+      opacity: 0.5;
+
+      &:hover {
+        opacity: 1;
+        background: rgba(128, 128, 128, 0.1);
+      }
+    }
+  }
+
+  // Copied feedback state
+  &--copied {
+    .pa-field__value::after {
+      content: 'Copied!' !important;
+      opacity: 1 !important;
+      color: var(--pa-color-4, #28a745);
+    }
+  }
+}
+
+// ============================================================================
+// FIELD GROUP (.pa-field-group)
+// Labeled section containing .pa-fields (e.g., "Customer", "Delivery Address")
+// ============================================================================
+
+.pa-field-group {
+  display: flex;
+  flex-direction: column;
+  gap: $field-group-gap;
+
+  &__title {
+    font-size: $field-group-title-font-size;
+    font-weight: $field-group-title-font-weight;
+    line-height: $line-height-tight;
+    padding-bottom: $spacing-xs;
+    border-bottom: $border-width-thin solid $field-group-title-border-color;
+    margin: 0;
+  }
+}
+
+// Vertical spacing between consecutive field groups
+.pa-field-group + .pa-field-group {
+  margin-top: $field-group-spacing;
+}
+
+// Vertical spacing between consecutive pa-fields containers
+.pa-fields + .pa-fields {
+  margin-top: $field-group-spacing;
+}
+
+// ============================================================================
+// FIELD CONTAINER (.pa-fields)
+// Container for multiple .pa-field items
+// ============================================================================
+
+.pa-fields {
+  display: flex;
+  flex-direction: column;
+  gap: $fields-gap;
+  border-left: $fields-border-left;
+  padding-left: $fields-padding-left;
+
+  // ------------------------------------------------------------------
+  // GRID COLUMNS: multi-column layouts using CSS grid
+  // ------------------------------------------------------------------
+  &--cols-2,
+  &--cols-3,
+  &--cols-4 {
+    display: grid;
+    gap: $fields-cols-gap $fields-cols-gap;
+  }
+
+  &--cols-2 { grid-template-columns: repeat(2, 1fr); }
+  &--cols-3 { grid-template-columns: repeat(3, 1fr); }
+  &--cols-4 { grid-template-columns: repeat(4, 1fr); }
+
+  @media (max-width: $mobile-breakpoint) {
+    &--cols-2,
+    &--cols-3,
+    &--cols-4 {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  // ------------------------------------------------------------------
+  // HORIZONTAL: label left, value right (side-by-side)
+  // ------------------------------------------------------------------
+  &--horizontal {
+    .pa-field {
+      flex-direction: row;
+      align-items: baseline;
+      gap: $spacing-base;
+    }
+
+    .pa-field__label {
+      flex: 0 0 auto;
+      min-width: 8rem;
+      max-width: 40%;
+    }
+
+    .pa-field__value {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+
+  // ------------------------------------------------------------------
+  // TABLE: consistent label widths, like a key-value table
+  // ------------------------------------------------------------------
+  &--table {
+    .pa-field {
+      flex-direction: row;
+      align-items: baseline;
+      gap: $spacing-base;
+    }
+
+    .pa-field__label {
+      flex: 0 0 auto;
+      min-width: 8rem;
+      max-width: 40%;
+    }
+
+    .pa-field__value {
+      flex: 1;
+      min-width: 0;
+    }
+  }
+
+  // ------------------------------------------------------------------
+  // BORDERED: bottom border separator between fields
+  // ------------------------------------------------------------------
+  &--bordered {
+    .pa-field {
+      padding-bottom: $fields-bordered-padding;
+      border-bottom: $border-width-thin solid $fields-bordered-border-color;
+    }
+
+    .pa-field:last-child {
+      border-bottom: none;
+      padding-bottom: 0;
+    }
+  }
+
+  // ------------------------------------------------------------------
+  // STRIPED: alternating background rows
+  // ------------------------------------------------------------------
+  &--striped {
+    .pa-field:nth-child(odd) {
+      background: var(--pa-table-stripe);
+      padding: $fields-bordered-padding;
+      border-radius: $border-radius;
+    }
+
+    .pa-field:nth-child(even) {
+      padding: $fields-bordered-padding;
+    }
+  }
+
+  // ------------------------------------------------------------------
+  // COMPACT: tighter spacing
+  // ------------------------------------------------------------------
+  &--compact {
+    gap: $spacing-xs;
+
+    .pa-field {
+      gap: $spacing-xs;
+    }
+  }
+
+  // ------------------------------------------------------------------
+  // INLINE: multiple fields flowing on one line
+  // ------------------------------------------------------------------
+  &--inline {
+    flex-direction: row;
+    flex-wrap: wrap;
+    gap: $spacing-base;
+
+    .pa-field {
+      flex: 0 0 auto;
+    }
+  }
+
+  // ------------------------------------------------------------------
+  // RELAXED: larger gap between fields
+  // ------------------------------------------------------------------
+  &--relaxed {
+    gap: $fields-relaxed-gap;
+  }
+
+  // ------------------------------------------------------------------
+  // ROW: equal-width columns (auto based on child count)
+  // ------------------------------------------------------------------
+  &--row {
+    flex-direction: row;
+
+    .pa-field {
+      flex: 1;
+      min-width: 0;
+    }
+
+    @media (max-width: $mobile-breakpoint) {
+      flex-direction: column;
+    }
+  }
+
+  // ------------------------------------------------------------------
+  // FILLED: subtle background panel
+  // ------------------------------------------------------------------
+  &--filled {
+    background: $fields-filled-bg;
+    padding: $fields-filled-padding;
+    border-radius: $border-radius;
+  }
+
+  // ------------------------------------------------------------------
+  // COLOR VARIANTS: theme colors for border and filled background
+  // Uses --pa-color-{1-9} CSS variables
+  // ------------------------------------------------------------------
+  @for $i from 1 through 9 {
+    &--color-#{$i} {
+      border-left-color: var(--pa-color-#{$i});
+
+      // When combined with --filled, tint the background
+      &.pa-fields--filled {
+        background: color-mix(in srgb, var(--pa-color-#{$i}) 10%, transparent);
+      }
+    }
+  }
+
+  // ------------------------------------------------------------------
+  // NO BORDER: remove left border
+  // ------------------------------------------------------------------
+  &--no-border {
+    border-left: none;
+    padding-left: 0;
+  }
+}

package/src/scss/core-components/_detail-panel.scss

@@ -99,7 +99,7 @@
   top: 0;
   right: 0;
   height: 100vh;
-  z-index: $detail-panel-z-index;
+  z-index: var(--pa-detail-panel-z-index);
   pointer-events: none;
   opacity: 0;
   visibility: hidden;
@@ -296,7 +296,7 @@
     top: 0;
     right: 0;
     height: 100vh;
-    z-index: $detail-panel-z-index;
+    z-index: var(--pa-detail-panel-z-index);
     pointer-events: none;
     opacity: 0;
     visibility: hidden;

package/src/scss/core-components/_grid.scss

@@ -173,6 +173,8 @@ $grid-columns-fractions: (
       .pa-col-#{$bp}-#{$size} {
         flex: 0 0 math.percentage(math.div($size, 100));
         max-width: math.percentage(math.div($size, 100));
+        padding-left: $grid-gutter;
+        padding-right: $grid-gutter;
         min-width: 0; // Prevent content overflow
       }
     }
@@ -182,6 +184,8 @@ $grid-columns-fractions: (
       .pa-col-#{$bp}-#{$name} {
         flex: 0 0 $width;
         max-width: $width;
+        padding-left: $grid-gutter;
+        padding-right: $grid-gutter;
         min-width: 0; // Prevent content overflow
       }
     }

package/src/scss/core-components/_tables.scss

@@ -13,6 +13,266 @@
   border-radius: $border-radius;
   border: $border-width-base solid var(--pa-border-color);
   background-color: var(--pa-table-bg);
+
+  // Panel modifier - card-like visual containment
+  &--panel {
+    box-shadow: $shadow-sm;
+    border-radius: $card-border-radius;
+    margin-bottom: $spacing-base;
+    transition: box-shadow $transition-fast $easing-snappy;
+
+    &:hover {
+      box-shadow: $shadow-lg;
+    }
+  }
+
+  // Header for panel tables
+  &__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: $card-header-padding-v $card-header-padding-h;
+    min-height: $card-header-min-height;
+    border-bottom: $border-width-base solid var(--pa-border-color);
+    background: var(--pa-card-header-bg);
+    border-top-left-radius: $card-border-radius;
+    border-top-right-radius: $card-border-radius;
+  }
+
+  &__title {
+    font-size: $font-size-base;
+    font-weight: $font-weight-semibold;
+    margin: 0;
+    color: var(--pa-text-color-1);
+  }
+
+  &__actions {
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+
+    // Buttons in header - negative margin to prevent header height growth
+    .pa-btn {
+      margin-top: -0.25rem;
+      margin-bottom: -0.25rem;
+    }
+  }
+}
+
+// ============================================================================
+// TABLE CARD
+// Card-like container specifically designed for tables
+// Similar to pa-card but with table as body content (no body padding)
+// ============================================================================
+.pa-table-card {
+  background: var(--pa-card-bg);
+  border: $card-border-width solid var(--pa-border-color);
+  border-radius: $card-border-radius;
+  margin-bottom: $spacing-base;
+  box-shadow: $shadow-sm;
+  transition: box-shadow $transition-fast $easing-snappy;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden; // Ensure table respects border-radius
+
+  &:hover {
+    box-shadow: $shadow-lg;
+  }
+
+  &__header {
+    padding: $card-header-padding-v $card-header-padding-h;
+    min-height: $card-header-min-height;
+    border-top-left-radius: $card-border-radius;
+    border-top-right-radius: $card-border-radius;
+    border-bottom: $border-width-base solid var(--pa-border-color);
+    background: var(--pa-card-header-bg);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    min-width: 0;
+
+    h1, h2, h3, h4, h5, h6, p {
+      margin: 0;
+      padding: 0;
+    }
+
+    h1, h2, h3, h4, h5, h6 {
+      color: var(--pa-text-color-1);
+      font-size: $font-size-base;
+      font-weight: $font-weight-semibold;
+    }
+
+    .pa-btn {
+      margin-top: -0.25rem;
+      margin-bottom: -0.25rem;
+    }
+  }
+
+  &__title {
+    display: flex;
+    align-items: center;
+    gap: $spacing-sm;
+    min-width: 0;
+    flex: 1;
+
+    &-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      margin: 0;
+      color: var(--pa-text-color-1);
+      font-size: $font-size-base;
+      font-weight: $font-weight-semibold;
+      line-height: 1;
+    }
+  }
+
+  &__actions {
+    display: flex;
+    gap: $spacing-sm;
+    align-items: center;
+  }
+
+  &__body {
+    flex: 1;
+    min-width: 0; // Allow body to shrink below content size for proper overflow
+
+    // Scrollable wrapper for tables (optional - use when table needs horizontal scroll)
+    &--scrollable {
+      overflow-x: auto;
+    }
+
+    // Table inside body
+    .pa-table {
+      border-radius: 0;
+
+      // Align first/last column with card header/footer padding
+      th:first-child,
+      td:first-child {
+        padding-left: $card-header-padding-h;
+      }
+
+      th:last-child,
+      td:last-child {
+        padding-right: $card-header-padding-h;
+      }
+
+      // Remove bottom border from last row (card border handles it)
+      tbody tr:last-child td {
+        border-bottom: none;
+      }
+    }
+  }
+
+  &__footer {
+    padding: $card-footer-padding-v $card-footer-padding-h;
+    border-top: $border-width-base solid var(--pa-border-color);
+    border-bottom-left-radius: $card-border-radius;
+    border-bottom-right-radius: $card-border-radius;
+    background: var(--pa-card-footer-bg);
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  // Color variants
+  &--primary {
+    border-color: var(--pa-accent);
+
+    .pa-table-card__header {
+      background-color: var(--pa-accent);
+      color: var(--pa-btn-primary-text);
+
+      h1, h2, h3, h4, h5, h6 {
+        color: var(--pa-btn-primary-text);
+      }
+    }
+  }
+
+  &--success {
+    border-color: var(--pa-success-bg);
+
+    .pa-table-card__header {
+      background-color: var(--pa-success-bg);
+      color: var(--pa-btn-success-text);
+
+      h1, h2, h3, h4, h5, h6 {
+        color: var(--pa-btn-success-text);
+      }
+    }
+  }
+
+  &--warning {
+    border-color: var(--pa-warning-bg);
+
+    .pa-table-card__header {
+      background-color: var(--pa-warning-bg);
+      color: var(--pa-btn-warning-text);
+
+      h1, h2, h3, h4, h5, h6 {
+        color: var(--pa-btn-warning-text);
+      }
+    }
+  }
+
+  &--danger {
+    border-color: var(--pa-danger-bg);
+
+    .pa-table-card__header {
+      background-color: var(--pa-danger-bg);
+      color: var(--pa-btn-danger-text);
+
+      h1, h2, h3, h4, h5, h6 {
+        color: var(--pa-btn-danger-text);
+      }
+    }
+  }
+
+  // Theme color variants (color-1 through color-9)
+  @for $i from 1 through 9 {
+    &--color-#{$i} {
+      border-color: var(--pa-color-#{$i});
+
+      .pa-table-card__header {
+        background-color: var(--pa-color-#{$i});
+        color: var(--pa-color-#{$i}-text);
+
+        h1, h2, h3, h4, h5, h6 {
+          color: var(--pa-color-#{$i}-text);
+        }
+      }
+    }
+  }
+
+  // Plain variant - no card visual styling, just layout structure
+  &--plain {
+    background: transparent;
+    border: none;
+    box-shadow: none;
+    border-radius: 0;
+
+    &:hover {
+      box-shadow: none;
+    }
+
+    // Header in plain mode - simple text header without card styling
+    .pa-table-card__header {
+      background: transparent;
+      border-bottom: none;
+      border-radius: 0;
+      padding-left: 0;
+      padding-right: 0;
+    }
+
+    // Footer in plain mode
+    .pa-table-card__footer {
+      background: transparent;
+      border-top: none;
+      border-radius: 0;
+      padding-left: 0;
+      padding-right: 0;
+    }
+  }
 }
 
 .pa-table {
@@ -63,6 +323,23 @@
     }
   }
 
+  // Bordered variant - full cell borders
+  &--bordered {
+    border: $border-width-base solid var(--pa-border-color);
+
+    th,
+    td {
+      border: $border-width-base solid var(--pa-border-color);
+    }
+
+    // Keep last row border in bordered mode
+    &:not(&--responsive) {
+      tbody tr:last-child td {
+        border-bottom: $border-width-base solid var(--pa-border-color);
+      }
+    }
+  }
+
   // Size variants - synchronized with button/input sizes
   &--xs {
     th, td {