@keenmate/pure-admin-core 1.0.0-rc01

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

@@ -0,0 +1,277 @@
+/* ========================================
+   Loader Components
+   Spinners, dots, bars, pulse, ring, wave loaders and animations
+   ======================================== */
+@use '../variables' as *;
+
+// Spinner animation
+@keyframes pa-spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+// Standalone Spinners
+.pa-spinner {
+  display: inline-block;
+  width: $spinner-size;
+  height: $spinner-size;
+  border: $spinner-border-width solid transparent;
+  border-top: $spinner-border-width solid currentColor;
+  border-radius: 50%;
+  animation: pa-spin $animation-spin-duration linear infinite;
+
+  // Size variants
+  &--xs {
+    width: $loader-dot-size;
+    height: $loader-dot-size;
+  }
+
+  // Color variants
+  &--primary {
+    border-top-color: $btn-primary-bg;
+  }
+
+  &--secondary {
+    border-top-color: $btn-secondary-bg;
+  }
+
+  &--success {
+    border-top-color: $btn-success-bg;
+  }
+
+  &--danger {
+    border-top-color: $btn-danger-bg;
+  }
+
+  &--warning {
+    border-top-color: $btn-warning-bg;
+  }
+
+  &--info {
+    border-top-color: $btn-info-bg;
+  }
+}
+
+// Dots Loader
+.pa-loader-dots {
+  display: inline-flex;
+  gap: $spacing-sm;
+  align-items: center;
+
+  span {
+    width: $loader-dot-size;
+    height: $loader-dot-size;
+    border-radius: 50%;
+    background-color: currentColor;
+    animation: pa-bounce 1.4s infinite ease-in-out both;
+
+    &:nth-child(1) {
+      animation-delay: $loader-dots-delay-1;
+    }
+
+    &:nth-child(2) {
+      animation-delay: $loader-dots-delay-2;
+    }
+  }
+
+  &--lg span {
+    width: $loader-dot-size;
+    height: $loader-dot-size;
+  }
+}
+
+@keyframes pa-bounce {
+  0%, 80%, 100% {
+    transform: scale(0);
+    opacity: $opacity-muted;
+  }
+  40% {
+    transform: scale(1);
+    opacity: 1;
+  }
+}
+
+// Bars Loader
+.pa-loader-bars {
+  display: inline-flex;
+  gap: $spacing-xs;
+  align-items: center;
+  height: $loader-bar-height;
+
+  span {
+    width: $loader-bar-width;
+    height: 100%;
+    background-color: currentColor;
+    animation: pa-stretch 1.2s infinite ease-in-out;
+
+    &:nth-child(1) {
+      animation-delay: $loader-bars-delay-1;
+    }
+
+    &:nth-child(2) {
+      animation-delay: $loader-bars-delay-2;
+    }
+
+    &:nth-child(3) {
+      animation-delay: $loader-bars-delay-3;
+    }
+
+    &:nth-child(4) {
+      animation-delay: $loader-bars-delay-4;
+    }
+
+    &:nth-child(5) {
+      animation-delay: $loader-bars-delay-5;
+    }
+  }
+
+  &--lg {
+    height: $spinner-size;
+
+    span {
+      width: $loader-bar-width;
+    }
+  }
+}
+
+@keyframes pa-stretch {
+  0%, 40%, 100% {
+    transform: scaleY(0.4);
+  }
+  20% {
+    transform: scaleY(1);
+  }
+}
+
+// Pulse Loader
+.pa-loader-pulse {
+  display: inline-block;
+  width: $spinner-size;
+  height: $spinner-size;
+  border-radius: 50%;
+  background-color: currentColor;
+  animation: pa-pulse $loader-pulse-duration infinite $loader-pulse-easing;
+
+  &--lg {
+    width: $stat-icon-size;
+    height: $stat-icon-size;
+  }
+}
+
+@keyframes pa-pulse {
+  0%, 100% {
+    opacity: 1;
+    transform: scale(0);
+  }
+  50% {
+    opacity: $opacity-muted;
+    transform: scale(1);
+  }
+}
+
+// Ring Loader
+.pa-loader-ring {
+  display: inline-block;
+  width: $spinner-size;
+  height: $spinner-size;
+  position: relative;
+
+  &::after {
+    content: '';
+    display: block;
+    width: 100%;
+    height: 100%;
+    border-radius: 50%;
+    border: $loader-border-width solid currentColor;
+    border-color: currentColor transparent currentColor transparent;
+    animation: pa-spin 1.2s linear infinite;
+  }
+
+  &--lg {
+    width: $stat-icon-size;
+    height: $stat-icon-size;
+
+    &::after {
+      border-width: $loader-border-width;
+    }
+  }
+}
+
+// Wave Loader
+.pa-loader-wave {
+  display: inline-flex;
+  gap: $badge-padding-v;
+  align-items: center;
+  height: $loader-bar-height;
+
+  span {
+    width: $loader-bar-width;
+    height: 100%;
+    background-color: currentColor;
+    animation: pa-wave 1.2s infinite ease-in-out;
+
+    &:nth-child(1) {
+      animation-delay: $loader-bars-delay-1;
+    }
+
+    &:nth-child(2) {
+      animation-delay: $loader-bars-delay-2;
+    }
+
+    &:nth-child(3) {
+      animation-delay: $loader-bars-delay-3;
+    }
+
+    &:nth-child(4) {
+      animation-delay: $loader-bars-delay-4;
+    }
+
+    &:nth-child(5) {
+      animation-delay: $loader-bars-delay-5;
+    }
+  }
+
+  &--lg {
+    height: $spinner-size;
+
+    span {
+      width: $loader-bar-width;
+    }
+  }
+}
+
+@keyframes pa-wave {
+  0%, 40%, 100% {
+    transform: scaleY(0.4);
+  }
+  20% {
+    transform: scaleY(1);
+  }
+}
+
+// Loader utilities
+.pa-loader-overlay {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: var(--pa-loader-overlay-bg);
+  z-index: $z-index-loader;
+}
+
+.pa-loader-center {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+}
+

package/src/scss/core-components/_logic-tree.scss

@@ -0,0 +1,280 @@
+/**
+ * Logic Tree Renderer - Scratch-style visual query representation
+ * Renders nested blocks showing logical flow and precedence
+ */
+@use '../variables' as *;
+
+.pa-logic-tree {
+    padding: $spacing-base;
+    background: #f9fafb;
+    border-radius: $border-radius;
+    min-height: 6.4rem;
+    font-family: $body-font-family;
+
+    // Empty state
+    &__empty {
+        text-align: center;
+        color: var(--pa-text-secondary);
+        padding: $spacing-xl;
+        font-style: italic;
+    }
+
+    // Empty branch (incomplete query)
+    &__empty-branch {
+        color: var(--pa-text-secondary);
+        font-style: italic;
+        padding: $spacing-sm $spacing-md;
+        background: #f9fafb;
+        border: 1.6px dashed #d1d5db;
+        border-radius: $border-radius-sm;
+        text-align: center;
+    }
+
+    // Node wrapper
+    &__node {
+        margin-bottom: $spacing-sm;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+
+    // Block (condition, logical, group)
+    &__block {
+        background: #fff;
+        border: 3.2px solid var(--pa-border-color);
+        border-radius: $border-radius;
+        padding: $spacing-sm;
+        position: relative;
+        transition: box-shadow 0.32s $easing-smooth;
+
+        &:hover {
+            box-shadow: $shadow-sm;
+        }
+
+        // Condition block (field operator value)
+        &--condition {
+            background: linear-gradient(135deg, #f8f9fa 0%, #ffffff 100%);
+            border-color: var(--pa-primary-bg);
+            border-left-width: 6.4px;
+        }
+
+        // Logical operator blocks
+        &--logical {
+            padding: $spacing-md;
+            background: #fff;
+        }
+
+        &--and {
+            border-color: $warning-bg;
+            background: linear-gradient(135deg, #fff8e1 0%, #ffffff 100%);
+        }
+
+        &--or {
+            border-color: $info-bg;
+            background: linear-gradient(135deg, #e3f2fd 0%, #ffffff 100%);
+        }
+
+        // Group block (parentheses)
+        &--group {
+            border-color: $secondary-bg;
+            border-style: dashed;
+            background: linear-gradient(135deg, #f3f4f6 0%, #ffffff 100%);
+        }
+    }
+
+    // Block content for conditions
+    &__block-content {
+        display: flex;
+        align-items: center;
+        gap: $spacing-sm;
+        flex-wrap: wrap;
+    }
+
+    // Tree structure container
+    &__tree-structure {
+        position: relative;
+        padding-left: 3.2rem;
+    }
+
+    // Tree branch (left or right operand)
+    &__tree-branch {
+        position: relative;
+        padding-left: 2.4rem;
+
+        // Vertical line connector
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 0;
+            bottom: 50%;
+            width: 3.2px;
+            background: #94a3b8;
+        }
+
+        // Horizontal line connector
+        &::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 1.6rem;
+            width: 1.6rem;
+            height: 3.2px;
+            background: #94a3b8;
+        }
+
+        // Left branch - extends vertical line down
+        &--left {
+            margin-bottom: 0.8rem;
+
+            &::before {
+                bottom: 0;
+            }
+        }
+
+        // Right branch - no bottom extension
+        &--right {
+            margin-top: 0.8rem;
+        }
+    }
+
+    // Operator node in tree
+    &__tree-operator {
+        position: relative;
+        padding-left: 2.4rem;
+        margin: 0.8rem 0;
+
+        // Vertical line through operator
+        &::before {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: -0.8rem;
+            bottom: -0.8rem;
+            width: 3.2px;
+            background: #94a3b8;
+        }
+
+        // Horizontal line to operator
+        &::after {
+            content: '';
+            position: absolute;
+            left: 0;
+            top: 50%;
+            transform: translateY(-50%);
+            width: 1.6rem;
+            height: 3.2px;
+            background: #94a3b8;
+        }
+
+        .pa-logic-tree__token--logical {
+            display: inline-block;
+            background: #fff3e0;
+            color: #e65100;
+            border: 3.2px solid #ff9800;
+            padding: 0.4rem 1.2rem;
+            border-radius: $border-radius;
+            font-weight: $font-weight-bold;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            box-shadow: 0 1.6px 4.8px rgba(0, 0, 0, 0.1);
+        }
+    }
+
+    // Group label
+    &__group-label {
+        font-weight: $font-weight-medium;
+        font-size: $font-size-sm;
+        color: var(--pa-text-secondary);
+        margin-bottom: $spacing-sm;
+        padding-bottom: $spacing-sm;
+        border-bottom: 1.6px dashed $border-color;
+    }
+
+    // Group content (indented)
+    &__group-content {
+        padding-left: $spacing-md;
+    }
+
+    // Token representation (colored badges)
+    &__token {
+        display: inline-block;
+        padding: 0.4rem 0.8rem;
+        border-radius: $border-radius-sm;
+        font-size: $font-size-xs;
+        font-weight: $font-weight-medium;
+        font-family: $font-stack-mono;
+        white-space: nowrap;
+
+        // Field token (blue)
+        &--field {
+            background: #e3f2fd;
+            color: #1565c0;
+            border: 1.6px solid #bbdefb;
+        }
+
+        // Operator token (gray)
+        &--operator {
+            background: #f5f5f5;
+            color: #616161;
+            border: 1.6px solid #e0e0e0;
+        }
+
+        // Value token (green)
+        &--value {
+            background: #e8f5e9;
+            color: #2e7d32;
+            border: 1.6px solid #c8e6c9;
+        }
+
+        // Logical token (orange/blue)
+        &--logical {
+            background: #fff3e0;
+            color: #e65100;
+            border: 1.6px solid #ffe0b2;
+            font-weight: $font-weight-bold;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+        }
+
+        // Paren token (purple)
+        &--paren {
+            background: #f3e5f5;
+            color: #7b1fa2;
+            border: 1.6px solid #e1bee7;
+        }
+    }
+
+    // Animation for tree building
+    &--animated {
+        .pa-logic-tree__node {
+            animation: slideIn 0.48s $easing-smooth;
+        }
+
+        .pa-logic-tree__block {
+            animation: fadeIn 0.64s $easing-smooth;
+        }
+    }
+}
+
+// Animations
+@keyframes slideIn {
+    from {
+        opacity: 0;
+        transform: translateX(-16px);
+    }
+    to {
+        opacity: 1;
+        transform: translateX(0);
+    }
+}
+
+@keyframes fadeIn {
+    from {
+        opacity: 0;
+    }
+    to {
+        opacity: 1;
+    }
+}