npm - @keenmate/pure-admin-core - Versions diffs - 2.0.2 → 2.1.1 - Mend

@keenmate/pure-admin-core 2.0.2 → 2.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (68) hide show

package/src/scss/_core.scss CHANGED Viewed

@@ -69,6 +69,9 @@
 // Table components
 @use 'core-components/tables' as *;
+// Filter card (expandable table filters)
+@use 'core-components/filter-card' as *;
 // Comparison tables
 @use 'core-components/comparison' as *;

package/src/scss/_fonts.scss CHANGED Viewed

@@ -1,37 +1,37 @@
-/* Pure Admin Visual Framework - Default Font Definitions */
-// Default framework fonts - themes can override these
-// Note: Font size classes for <html> are in _utilities.scss (use px values for correct rem scaling)
-// Font family classes with system defaults
-.font-family-system {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
-  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
-    font-family: inherit;
-  }
-}
-.font-family-sans {
-  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
-  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
-    font-family: inherit;
-  }
-}
-.font-family-serif {
-  font-family: Georgia, "Times New Roman", Times, serif;
-  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
-    font-family: inherit;
-  }
-}
-.font-family-mono {
-  font-family: "Courier New", Courier, monospace;
-  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
-    font-family: inherit;
-  }
+/* Pure Admin Visual Framework - Default Font Definitions */
+// Default framework fonts - themes can override these
+// Note: Font size classes for <html> are in _utilities.scss (use px values for correct rem scaling)
+// Font family classes with system defaults
+.font-family-system {
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
+}
+.font-family-sans {
+  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
+}
+.font-family-serif {
+  font-family: Georgia, "Times New Roman", Times, serif;
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
+}
+.font-family-mono {
+  font-family: "Courier New", Courier, monospace;
+  *, h1, h2, h3, h4, h5, h6, p, div, span, button, input, textarea, select {
+    font-family: inherit;
+  }
 }

package/src/scss/core-components/_buttons.scss CHANGED Viewed

@@ -423,5 +423,102 @@
     position: relative;
     z-index: $z-index-modal;
   }
+}
+// === Split Button (primary action + dropdown toggle) ===
+.pa-btn-split {
+  position: relative;
+  display: inline-flex;
+  // RTL: reverse order so toggle is on inline-start side
+  [dir="rtl"] & {
+    flex-direction: row-reverse;
+  }
+  // Joined buttons with no gap
+  .pa-btn {
+    border-radius: 0;
+    &:first-child {
+      border-start-start-radius: $border-radius;
+      border-end-start-radius: $border-radius;
+      border-inline-end: none;
+    }
+  }
+  // Toggle button (chevron) - fixed square width
+  &__toggle {
+    border-start-end-radius: $border-radius;
+    border-end-end-radius: $border-radius;
+    border-inline-start: $border-width-base solid rgba(255, 255, 255, 0.25);
+    border-inline-end: none;
+    padding-inline: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: $btn-height-base;
+    min-width: $btn-height-base;
+    &.pa-btn--xs { width: $btn-height-xs; min-width: $btn-height-xs; }
+    &.pa-btn--sm { width: $btn-height-sm; min-width: $btn-height-sm; }
+    &.pa-btn--lg { width: $btn-height-lg; min-width: $btn-height-lg; }
+    &.pa-btn--xl { width: $btn-height-xl; min-width: $btn-height-xl; }
+  }
+  // Chevron icon - opt-in rotation on open
+  &__chevron {
+    transition: transform $transition-fast $easing-snappy;
+  }
+  &--open &__chevron {
+    transform: rotate(180deg);
+  }
+  // Dropdown menu (moved to body and positioned by Floating UI)
+  &__menu {
+    display: none;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: max-content;
+    background: var(--pa-card-bg);
+    border: $border-width-base solid var(--pa-border-color);
+    border-radius: $border-radius;
+    box-shadow: $shadow-2xl;
+    z-index: $z-index-dropdown;
+    padding: $spacing-xs 0;
+    &--open {
+      display: block;
+    }
+  }
+  // Menu items
+  &__item {
+    display: block;
+    width: 100%;
+    padding: $spacing-sm $spacing-base;
+    border: none;
+    background: none;
+    text-align: start;
+    font-size: $font-size-sm;
+    color: var(--pa-text-color);
+    cursor: pointer;
+    white-space: nowrap;
+    &:hover {
+      background-color: var(--pa-accent-hover);
+    }
+    &--danger {
+      color: var(--pa-btn-danger-bg);
+      &:hover {
+        background-color: var(--pa-btn-danger-bg);
+        color: var(--pa-btn-danger-text);
+      }
+    }
+  }
 }

package/src/scss/core-components/_cards.scss CHANGED Viewed

@@ -14,6 +14,7 @@
   transition: box-shadow $transition-fast $easing-snappy;
   display: flex;
   flex-direction: column;
+  overflow: hidden;
   &:hover {
     box-shadow: $shadow-lg;
@@ -64,14 +65,17 @@
       font-size: $font-size-base;
     }
-    // Direct heading children - don't shrink (for three-part layout)
+    // Direct heading children - truncate when card is narrow
     > h1,
     > h2,
     > h3,
     > h4,
     > h5,
     > h6 {
-      flex-shrink: 0;
+      min-width: 0;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
     // Description paragraphs - flexible middle, truncate with ellipsis
@@ -155,10 +159,16 @@
       }
     }
-    // Wrap modifier - allow description to wrap (for mobile or long descriptions)
+    // Wrap modifier - allow heading and description to wrap instead of truncating
     &--wrap {
       flex-wrap: wrap;
+      > h1, > h2, > h3, > h4, > h5, > h6 {
+        white-space: normal;
+        overflow: visible;
+        text-overflow: clip;
+      }
       > p {
         white-space: normal;
         flex-basis: 100%;

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

@@ -556,6 +556,15 @@
     justify-content: center; // when --middle makes it flex
   }
+  // Value horizontal alignment
+  &--value-end &__value {
+    text-align: end;
+  }
+  &--value-center &__value {
+    text-align: center;
+  }
   // Truncate: single-line ellipsis on labels and values
   &--truncate &__label,
   &--truncate &__value {
@@ -581,6 +590,26 @@
     }
   }
+  // Responsive: stack label above value in very narrow containers
+  @container (max-width: 300px) {
+    &, &--cols-2, &--fixed, &--fixed#{&}--cols-2 {
+      grid-template-columns: 1fr;
+    }
+    .pa-desc-table__label {
+      border-inline-end: none;
+      border-bottom: none;
+    }
+    .pa-desc-table__value {
+      border-inline-end: none;
+    }
+    .pa-desc-table__value--full {
+      grid-column: 1;
+    }
+  }
   // Media fallback (for desc-tables outside a container context)
   @media (max-width: $mobile-breakpoint) {
     &, &--cols-2 {
@@ -876,8 +905,12 @@
   }
   // Label horizontal alignment
-  &--label-end &__label { justify-content: flex-end; }
-  &--label-center &__label { justify-content: center; }
+  &--label-end &__label { justify-content: flex-end; text-align: end; }
+  &--label-center &__label { justify-content: center; text-align: center; }
+  // Value horizontal alignment
+  &--value-end &__value { justify-content: flex-end; text-align: end; }
+  &--value-center &__value { justify-content: center; text-align: center; }
   // Truncate: single-line ellipsis on both labels and values
   &--truncate &__label,

package/src/scss/core-components/_filter-card.scss ADDED Viewed

@@ -0,0 +1,58 @@
+/* ========================================
+   Filter Card
+   Expandable filter card with inline filters and collapsible advanced section
+   Based on table-filters pattern from pure-admin demos
+   ======================================== */
+@use '../variables' as *;
+.pa-filter-card__row {
+  display: flex;
+  gap: $spacing-sm;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.pa-filter-card__filters {
+  display: flex;
+  gap: $spacing-sm;
+  align-items: center;
+  flex-wrap: wrap;
+  flex: 1;
+  min-width: 0;
+  > * {
+    flex: 1;
+    min-width: 200px;
+  }
+}
+.pa-filter-card__actions {
+  display: flex;
+  gap: $spacing-xs;
+  align-items: center;
+  flex-shrink: 0;
+}
+.pa-filter-card__advanced {
+  margin-top: $spacing-md;
+  padding-top: $spacing-md;
+  border-top: $border-width-base solid var(--pa-border-color);
+}
+.pa-filter-card__advanced-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: $spacing-sm;
+  margin-top: $spacing-md;
+}
+.pa-filter-card--loading {
+  opacity: 0.7;
+  pointer-events: none;
+}
+.pa-filter-card--disabled {
+  opacity: 0.5;
+  pointer-events: none;
+}

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

@@ -891,6 +891,10 @@
       background-color: transparent;
       box-shadow: $shadow-sm;
     }
+    tbody tr:hover td {
+      background-color: transparent;
+    }
   }
 }

package/src/scss/core-components/_timeline.scss CHANGED Viewed

@@ -557,8 +557,8 @@
       font-size: $timeline-feed-time-font-size;
       color: var(--pa-text-color-2);
       font-weight: $font-weight-medium;
-      text-align: right;
-      padding-right: $spacing-sm;
+      text-align: end;
+      padding-inline-end: $spacing-sm;
       padding-top: $timeline-feed-time-padding-top;
     }
   }

package/src/scss/core-components/_tooltips.scss CHANGED Viewed

@@ -21,6 +21,12 @@
     cursor: help;
   }
+  // Keyword modifier - dotted underline for inline term explanations
+  &--keyword {
+    border-bottom: $border-width-base dotted currentColor;
+    cursor: help;
+  }
   &::before,
   &::after {
     position: absolute;
@@ -91,25 +97,38 @@
     transform: translateX(-50%) translateY(0);
   }
-  // Right position
-  &--right::before {
+  // End position (inline-end: right in LTR, left in RTL)
+  &--end::before {
     bottom: auto;
-    left: calc(100% + $tooltip-distance);
+    left: auto;
+    inset-inline-start: calc(100% + $tooltip-distance);
     top: 50%;
     transform: translateX(-$tooltip-offset) translateY(-50%);
   }
-  &--right::after {
+  &--end::after {
     bottom: auto;
-    left: calc(100% + ($tooltip-arrow-size - 2px));
+    left: auto;
+    inset-inline-start: calc(100% + ($tooltip-arrow-size - 2px));
     top: 50%;
     transform: translateX(-$tooltip-offset) translateY(-50%);
     border-top-color: transparent;
-    border-right-color: var(--pa-tooltip-bg);
+    border-inline-end-color: var(--pa-tooltip-bg);
   }
-  &--right:hover::before,
-  &--right:hover::after {
+  &--end:hover::before,
+  &--end:hover::after {
+    transform: translateX(0) translateY(-50%);
+  }
+  // RTL: reverse slide direction for end position
+  [dir="rtl"] &--end::before,
+  [dir="rtl"] &--end::after {
+    transform: translateX($tooltip-offset) translateY(-50%);
+  }
+  [dir="rtl"] &--end:hover::before,
+  [dir="rtl"] &--end:hover::after {
     transform: translateX(0) translateY(-50%);
   }
@@ -135,27 +154,38 @@
     transform: translateX(-50%) translateY(0);
   }
-  // Left position
-  &--left::before {
+  // Start position (inline-start: left in LTR, right in RTL)
+  &--start::before {
     bottom: auto;
     left: auto;
-    right: calc(100% + $tooltip-distance);
+    inset-inline-end: calc(100% + $tooltip-distance);
     top: 50%;
     transform: translateX($tooltip-offset) translateY(-50%);
   }
-  &--left::after {
+  &--start::after {
     bottom: auto;
     left: auto;
-    right: calc(100% + ($tooltip-arrow-size - 2px));
+    inset-inline-end: calc(100% + ($tooltip-arrow-size - 2px));
     top: 50%;
     transform: translateX($tooltip-offset) translateY(-50%);
     border-top-color: transparent;
-    border-left-color: var(--pa-tooltip-bg);
+    border-inline-start-color: var(--pa-tooltip-bg);
+  }
+  &--start:hover::before,
+  &--start:hover::after {
+    transform: translateX(0) translateY(-50%);
+  }
+  // RTL: reverse slide direction for start position
+  [dir="rtl"] &--start::before,
+  [dir="rtl"] &--start::after {
+    transform: translateX(-$tooltip-offset) translateY(-50%);
   }
-  &--left:hover::before,
-  &--left:hover::after {
+  [dir="rtl"] &--start:hover::before,
+  [dir="rtl"] &--start:hover::after {
     transform: translateX(0) translateY(-50%);
   }
@@ -166,17 +196,17 @@
   &--primary::after {
     border-top-color: var(--pa-btn-primary-bg);
   }
-  &--primary.pa-tooltip--right::after {
+  &--primary.pa-tooltip--end::after {
     border-top-color: transparent;
-    border-right-color: var(--pa-btn-primary-bg);
+    border-inline-end-color: var(--pa-btn-primary-bg);
   }
   &--primary.pa-tooltip--bottom::after {
     border-top-color: transparent;
     border-bottom-color: var(--pa-btn-primary-bg);
   }
-  &--primary.pa-tooltip--left::after {
+  &--primary.pa-tooltip--start::after {
     border-top-color: transparent;
-    border-left-color: var(--pa-btn-primary-bg);
+    border-inline-start-color: var(--pa-btn-primary-bg);
   }
   &--success::before {
@@ -185,17 +215,17 @@
   &--success::after {
     border-top-color: var(--pa-btn-success-bg);
   }
-  &--success.pa-tooltip--right::after {
+  &--success.pa-tooltip--end::after {
     border-top-color: transparent;
-    border-right-color: var(--pa-btn-success-bg);
+    border-inline-end-color: var(--pa-btn-success-bg);
   }
   &--success.pa-tooltip--bottom::after {
     border-top-color: transparent;
     border-bottom-color: var(--pa-btn-success-bg);
   }
-  &--success.pa-tooltip--left::after {
+  &--success.pa-tooltip--start::after {
     border-top-color: transparent;
-    border-left-color: var(--pa-btn-success-bg);
+    border-inline-start-color: var(--pa-btn-success-bg);
   }
   &--warning::before {
@@ -205,17 +235,17 @@
   &--warning::after {
     border-top-color: var(--pa-btn-warning-bg);
   }
-  &--warning.pa-tooltip--right::after {
+  &--warning.pa-tooltip--end::after {
     border-top-color: transparent;
-    border-right-color: var(--pa-btn-warning-bg);
+    border-inline-end-color: var(--pa-btn-warning-bg);
   }
   &--warning.pa-tooltip--bottom::after {
     border-top-color: transparent;
     border-bottom-color: var(--pa-btn-warning-bg);
   }
-  &--warning.pa-tooltip--left::after {
+  &--warning.pa-tooltip--start::after {
     border-top-color: transparent;
-    border-left-color: var(--pa-btn-warning-bg);
+    border-inline-start-color: var(--pa-btn-warning-bg);
   }
   &--danger::before {
@@ -224,17 +254,17 @@
   &--danger::after {
     border-top-color: var(--pa-btn-danger-bg);
   }
-  &--danger.pa-tooltip--right::after {
+  &--danger.pa-tooltip--end::after {
     border-top-color: transparent;
-    border-right-color: var(--pa-btn-danger-bg);
+    border-inline-end-color: var(--pa-btn-danger-bg);
   }
   &--danger.pa-tooltip--bottom::after {
     border-top-color: transparent;
     border-bottom-color: var(--pa-btn-danger-bg);
   }
-  &--danger.pa-tooltip--left::after {
+  &--danger.pa-tooltip--start::after {
     border-top-color: transparent;
-    border-left-color: var(--pa-btn-danger-bg);
+    border-inline-start-color: var(--pa-btn-danger-bg);
   }
   // Numbered color variants (color-1 through color-9)
@@ -247,17 +277,17 @@
     &--color-#{$i}::after {
       border-top-color: var(--pa-color-#{$i});
     }
-    &--color-#{$i}.pa-tooltip--right::after {
+    &--color-#{$i}.pa-tooltip--end::after {
       border-top-color: transparent;
-      border-right-color: var(--pa-color-#{$i});
+      border-inline-end-color: var(--pa-color-#{$i});
     }
     &--color-#{$i}.pa-tooltip--bottom::after {
       border-top-color: transparent;
       border-bottom-color: var(--pa-color-#{$i});
     }
-    &--color-#{$i}.pa-tooltip--left::after {
+    &--color-#{$i}.pa-tooltip--start::after {
       border-top-color: transparent;
-      border-left-color: var(--pa-color-#{$i});
+      border-inline-start-color: var(--pa-color-#{$i});
     }
   }
@@ -304,43 +334,69 @@
     transform: translateX(-50%) translateY(0) !important;
   }
-  // Auto-flip from left to right
-  &--auto-flip-right::before {
-    left: calc(100% + $tooltip-distance) !important;
+  // Auto-flip from start to end
+  &--auto-flip-end::before {
+    left: auto !important;
     right: auto !important;
+    inset-inline-start: calc(100% + $tooltip-distance) !important;
     transform: translateX(-$tooltip-offset) translateY(-50%) !important;
   }
-  &--auto-flip-right::after {
-    left: calc(100% + ($tooltip-arrow-size - 2px)) !important;
+  &--auto-flip-end::after {
+    left: auto !important;
     right: auto !important;
+    inset-inline-start: calc(100% + ($tooltip-arrow-size - 2px)) !important;
     transform: translateX(-$tooltip-offset) translateY(-50%) !important;
-    border-left-color: transparent !important;
-    border-right-color: var(--pa-tooltip-bg) !important;
+    border-inline-start-color: transparent !important;
+    border-inline-end-color: var(--pa-tooltip-bg) !important;
+  }
+  &--auto-flip-end:hover::before,
+  &--auto-flip-end:hover::after {
+    transform: translateX(0) translateY(-50%) !important;
+  }
+  // RTL: reverse slide direction for auto-flip-end
+  [dir="rtl"] &--auto-flip-end::before,
+  [dir="rtl"] &--auto-flip-end::after {
+    transform: translateX($tooltip-offset) translateY(-50%) !important;
   }
-  &--auto-flip-right:hover::before,
-  &--auto-flip-right:hover::after {
+  [dir="rtl"] &--auto-flip-end:hover::before,
+  [dir="rtl"] &--auto-flip-end:hover::after {
     transform: translateX(0) translateY(-50%) !important;
   }
-  // Auto-flip from right to left
-  &--auto-flip-left::before {
-    right: calc(100% + $tooltip-distance) !important;
+  // Auto-flip from end to start
+  &--auto-flip-start::before {
     left: auto !important;
+    right: auto !important;
+    inset-inline-end: calc(100% + $tooltip-distance) !important;
     transform: translateX($tooltip-offset) translateY(-50%) !important;
   }
-  &--auto-flip-left::after {
-    right: calc(100% + ($tooltip-arrow-size - 2px)) !important;
+  &--auto-flip-start::after {
     left: auto !important;
+    right: auto !important;
+    inset-inline-end: calc(100% + ($tooltip-arrow-size - 2px)) !important;
     transform: translateX($tooltip-offset) translateY(-50%) !important;
-    border-right-color: transparent !important;
-    border-left-color: var(--pa-tooltip-bg) !important;
+    border-inline-end-color: transparent !important;
+    border-inline-start-color: var(--pa-tooltip-bg) !important;
+  }
+  &--auto-flip-start:hover::before,
+  &--auto-flip-start:hover::after {
+    transform: translateX(0) translateY(-50%) !important;
+  }
+  // RTL: reverse slide direction for auto-flip-start
+  [dir="rtl"] &--auto-flip-start::before,
+  [dir="rtl"] &--auto-flip-start::after {
+    transform: translateX(-$tooltip-offset) translateY(-50%) !important;
   }
-  &--auto-flip-left:hover::before,
-  &--auto-flip-left:hover::after {
+  [dir="rtl"] &--auto-flip-start:hover::before,
+  [dir="rtl"] &--auto-flip-start:hover::after {
     transform: translateX(0) translateY(-50%) !important;
   }
 }