@rt-tools/ui-kit 0.3.1 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rt-tools/ui-kit",
-  "version": "0.3.1",
+  "version": "0.5.0",
   "license": "Apache-2.0",
   "author": "Yauheni Krumin",
   "type": "module",
@@ -8,13 +8,12 @@
     "tslib": "^2.8.0",
     "@rt-tools/core": "^0.3.1",
     "@rt-tools/store": "^0.3.1",
-    "@rt-tools/utils": "^0.3.1"
+    "@rt-tools/utils": "^0.4.0"
   },
   "peerDependencies": {
     "@rt-tools/core": "^0.3.1",
     "@rt-tools/store": "^0.3.1",
-    "@rt-tools/utils": "^0.3.1",
-    "@angular/animations": "^22.0.0",
+    "@rt-tools/utils": "^0.4.0",
     "@angular/cdk": "^22.0.0",
     "@angular/common": "^22.0.0",
     "@angular/compiler": "^22.0.0",

package/src/lib/ui-kit/action-bar/components/bar/rtui-action-bar.component.scss

@@ -27,8 +27,12 @@
         align-items: center;
         justify-content: center;
         padding: var(--rt-action-bar-action-padding);
+        border: 0;
         border-radius: var(--rt-action-bar-action-border-radius);
+        background-color: transparent;
+        color: inherit;
         cursor: pointer;
+        font-family: inherit;
         font-size: var(--rt-action-bar-action-font-size);
         font-weight: var(--rt-action-bar-action-font-weight);
         gap: var(--rt-action-bar-action-gap);
@@ -39,7 +43,13 @@
     }
 
     &__close-button {
+        display: flex;
+        align-items: center;
+        padding: 0;
+        border: 0;
         margin-left: auto;
+        background-color: transparent;
+        color: inherit;
         cursor: pointer;
 
         svg {
@@ -81,8 +91,12 @@
         align-items: center;
         justify-content: center;
         padding: var(--rt-action-bar-action-menu-action-padding);
+        border: 0;
         border-radius: var(--rt-action-bar-action-menu-action-border-radius);
+        background-color: transparent;
+        color: inherit;
         cursor: pointer;
+        font-family: inherit;
         font-size: var(--rt-action-bar-action-menu-action-font-size);
         font-weight: var(--rt-action-bar-action-menu-action-font-weight);
         gap: var(--rt-action-bar-action-menu-action-gap);

package/src/lib/ui-kit/action-bar/components/container/rtui-action-bar-container.component.scss

@@ -8,3 +8,50 @@
     inset: var(--rt-action-bar-container-top) var(--rt-action-bar-container-right) var(--rt-action-bar-container-bottom)
         var(--rt-action-bar-container-left);
 }
+
+// Выезд панели: снизу, с проскоком выше места и возвратом — тем же порядком долей, каким он шёл
+// прежде. Проскок и делает движение живым, а не равномерным.
+@keyframes rtui-action-bar-enter {
+    0% {
+        opacity: 0;
+        transform: translateY(100%);
+    }
+
+    30% {
+        opacity: 1;
+        transform: translateY(-15px);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}
+
+// Уход панели: тот же путь в обратную сторону, и проскок стоит ближе к концу.
+@keyframes rtui-action-bar-leave {
+    0% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+
+    70% {
+        opacity: 1;
+        transform: translateY(-15px);
+    }
+
+    100% {
+        opacity: 0;
+        transform: translateY(100%);
+    }
+}
+
+.rtui-action-bar-container__bar {
+    animation: rtui-action-bar-enter 300ms;
+}
+
+.rtui-action-bar-container__bar--leaving {
+    // `forwards`: панель держится за нижней кромкой до того мига, когда её снимет разметка.
+    // Без него она возвращается на место в конце ухода и успевает мигнуть на своём месте.
+    animation: rtui-action-bar-leave 300ms forwards;
+}

package/src/lib/ui-kit/action-bar/stories/component/test-action-bar.component.scss

@@ -0,0 +1,15 @@
+:host {
+    display: block;
+
+    .stand {
+        display: flex;
+        flex-direction: column;
+        padding: 1rem;
+        gap: 1rem;
+
+        &__log {
+            color: var(--rt-text-neutral-secondary);
+            font-size: 0.875rem;
+        }
+    }
+}

package/src/lib/ui-kit/aside/components/container/aside-container.component.scss

@@ -4,7 +4,10 @@
         --rt-scrollable-content-padding: 0;
         --rt-scrollable-footer-padding: 0;
 
-        // TODO: fix styles affect x-scroll
+        // Направление тела решает, куда тянется его единственный ребёнок — содержимое панели.
+        // При `row` он растягивается по высоте зоны: 305 против 290 при замере, и форма,
+        // рассчитанная на всю высоту, стоит на месте. При `column` он растянулся бы по ширине
+        // переполнения — 589 против видимых 525 — и уехал бы за правый край вместе с фоном.
         --rt-scrollable-content-flex-direction: row;
 
         @supports (height: 100dvh) {

package/src/lib/ui-kit/aside/components/error-notification/aside-error-box.component.scss

@@ -28,7 +28,7 @@
                 font-size: var(--rt-aside-error-box-button-font-size);
             }
 
-            &.--complete {
+            &--complete {
                 background-color: transparent;
                 cursor: not-allowed;
             }

package/src/lib/ui-kit/aside/components/panel/aside-panel.component.scss

@@ -74,6 +74,10 @@ $aside: (
     tab-badge-incorrect: (
         color: var(--rt-text-accent-danger),
     ),
+    slide: (
+        duration: 200ms,
+        timing: ease-in,
+    ),
 );
 
 // NOTE: emitted at :root on purpose (ViewEncapsulation.None): consumers override
@@ -91,6 +95,26 @@ $aside: (
     --rt-aside-footer-margin-left-betwen-buttons: var(--rt-aside-footer-margin-left-between-buttons);
 }
 
+// SLIDE
+// Шторка выезжает из-за своей кромки и уходит туда же. Начальное положение задаёт сторона,
+// конечное — модификатор открытия: он объявлен ниже и потому перебивает сторону.
+.rtui-aside-panel {
+    display: block;
+    transition: transform var(--rt-aside-slide-duration) var(--rt-aside-slide-timing);
+}
+
+.rtui-aside-panel--left {
+    transform: translateX(-100%);
+}
+
+.rtui-aside-panel--right {
+    transform: translateX(100%);
+}
+
+.rtui-aside-panel--open {
+    transform: translateX(0);
+}
+
 // BADGE
 .icon-badge {
     position: absolute !important;