feat(kit): Segmented allow vertical orientation

taiga-family · Sep 4, 2024 · 26c15cc · 26c15cc
1 parent 3a66401
commit 26c15cc
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 22 deletions.
diff --git a/projects/demo/src/modules/components/segmented/examples/3/index.html b/projects/demo/src/modules/components/segmented/examples/3/index.html
@@ -18,7 +18,10 @@
     <button>Customized</button>
 </tui-segmented>
 
-<tui-segmented [style.font-weight]="'bold'">
+<tui-segmented
+    [style.flex-direction]="'column'"
+    [style.font-weight]="'bold'"
+>
     <button>Fonts</button>
     <button>Can also be</button>
     <button>Overridden</button>

diff --git a/projects/kit/components/segmented/segmented.component.ts b/projects/kit/components/segmented/segmented.component.ts
@@ -61,23 +61,21 @@ export class TuiSegmented implements OnChanges {
         this.refresh();
     }
 
-    private get left(): number {
-        const element = this.activeElement;
-
-        return tuiIsHTMLElement(element) ? element.offsetLeft : 0;
-    }
-
-    private get width(): number {
-        return this.activeElement?.clientWidth || 0;
-    }
-
     private get activeElement(): Element | null {
         return this.el.children.item(this.activeItemIndex);
     }
 
-    // TODO: Switch to HostBinding signals in Angular 17+
     private refresh(): void {
-        this.el.style.setProperty('--t-left', tuiPx(this.left));
-        this.el.style.setProperty('--t-width', tuiPx(this.width));
+        const el = this.activeElement;
+
+        if (!tuiIsHTMLElement(el)) {
+            return;
+        }
+
+        const {clientWidth = 0, offsetLeft = 0, offsetTop = 0} = el;
+
+        this.el.style.setProperty('--t-top', tuiPx(offsetTop));
+        this.el.style.setProperty('--t-left', tuiPx(offsetLeft));
+        this.el.style.setProperty('--t-width', tuiPx(clientWidth));
     }
 }
diff --git a/projects/kit/components/segmented/segmented.style.less b/projects/kit/components/segmented/segmented.style.less
@@ -12,13 +12,13 @@ tui-segmented {
         --t-padding: 0.625rem;
         --t-gap: 0.5rem;
         --t-margin: -0.125rem;
+        --t-height: var(--tui-height-s);
 
-        block-size: var(--tui-height-s);
         font: var(--tui-font-text-s);
         border-radius: var(--tui-radius-s);
 
-        & > *::before,
-        & > *::after,
+        > *::before,
+        > *::after,
         tui-icon {
             font-size: 1rem;
         }
@@ -28,8 +28,8 @@ tui-segmented {
         --t-padding: 0.875rem;
         --t-gap: 1rem;
         --t-margin: -0.375rem;
+        --t-height: var(--tui-height-m);
 
-        block-size: var(--tui-height-m);
         font: var(--tui-font-text-m);
         border-radius: var(--tui-radius-s);
     }
@@ -38,8 +38,8 @@ tui-segmented {
         --t-padding: 1.125rem;
         --t-gap: 1rem;
         --t-margin: -0.375rem;
+        --t-height: var(--tui-height-l);
 
-        block-size: var(--tui-height-l);
         font: var(--tui-font-text-l);
         border-radius: var(--tui-radius-m);
         border-width: 0.25rem;
@@ -60,6 +60,7 @@ tui-segmented {
         display: flex;
         align-items: center;
         justify-content: center;
+        block-size: var(--t-height);
         white-space: nowrap;
         gap: var(--t-gap);
         margin: 0;
@@ -70,7 +71,7 @@ tui-segmented {
         font: inherit;
         border-radius: inherit;
 
-        & > *,
+        > *,
         &::before,
         &::after {
             margin: 0 var(--t-margin);
@@ -97,12 +98,13 @@ tui-segmented {
     }
 
     &::before {
-        .transition(~'left, width');
+        .transition(~'top, left, width');
 
         content: '';
         position: absolute;
         left: var(--t-left);
-        block-size: 100%;
+        top: var(--t-top);
+        block-size: var(--t-height);
         inline-size: var(--t-width);
         border-radius: inherit;
         background: currentColor;