Skip to content

Commit 6082c88

Browse files
artembelikartembelik
committed
feat(sidebar): refactored module (#DS-3649)
1 parent 42c41a3 commit 6082c88

File tree

15 files changed

+395
-395
lines changed

15 files changed

+395
-395
lines changed

‎apps/docs/src/app/services/documentation-items.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -549,6 +549,18 @@ const DOCS: { [key: string]: DocCategory[] } = {
549549
apiId: 'select',
550550
hasExamples: true
551551
},
552+
{
553+
id: 'sidebar',
554+
name: {
555+
ru: 'Sidebar',
556+
en: 'Sidebar'
557+
},
558+
svgPreview: 'sidebar',
559+
hasApi: true,
560+
apiId: 'sidebar',
561+
hasExamples: false,
562+
isNew: expiresAt('2025-06-16')
563+
},
552564
{
553565
id: 'sidepanel',
554566
name: {

‎apps/docs/src/sitemap.xml

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -480,6 +480,18 @@
480480
<url>
481481
<loc>https://koobiq.io/ru/components/select/api</loc>
482482
</url>
483+
<url>
484+
<loc>https://koobiq.io/en/components/sidebar/overview</loc>
485+
</url>
486+
<url>
487+
<loc>https://koobiq.io/ru/components/sidebar/overview</loc>
488+
</url>
489+
<url>
490+
<loc>https://koobiq.io/en/components/sidebar/api</loc>
491+
</url>
492+
<url>
493+
<loc>https://koobiq.io/ru/components/sidebar/api</loc>
494+
</url>
483495
<url>
484496
<loc>https://koobiq.io/en/components/sidepanel/overview</loc>
485497
</url>

‎packages/components-dev/sidebar/module.ts

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
1-
import { JsonPipe } from '@angular/common';
21
import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
32
import { KbqButtonModule } from '@koobiq/components/button';
4-
import { KbqSidebarModule, SidebarPositions } from '@koobiq/components/sidebar';
3+
import { KbqSidebarModule, KbqSidebarPositions } from '@koobiq/components/sidebar';
54
import { Direction, KbqSplitterModule } from '@koobiq/components/splitter';
65

76
@Component({
87
standalone: true,
98
imports: [
109
KbqSplitterModule,
1110
KbqButtonModule,
12-
KbqSidebarModule,
13-
JsonPipe
11+
KbqSidebarModule
1412
],
1513
selector: 'dev-app',
1614
templateUrl: './template.html',
@@ -19,16 +17,15 @@ import { Direction, KbqSplitterModule } from '@koobiq/components/splitter';
1917
changeDetection: ChangeDetectionStrategy.OnPush
2018
})
2119
export class DevApp {
22-
direction = Direction;
23-
sidebarPositions = SidebarPositions;
20+
readonly direction = Direction;
21+
readonly sidebarPositions = KbqSidebarPositions;
2422

2523
leftSidebarSidebarState: boolean = false;
2624
leftSplitterState: boolean = false;
27-
2825
rightSidebarSidebarState: boolean = false;
2926

30-
onStateChanged($event): void {
31-
console.log('onStateChanged: ', $event);
27+
onStateChanged(event: boolean): void {
28+
console.log('onStateChanged: ', event);
3229
}
3330

3431
toggleLeftSidebar() {

‎packages/components-dev/sidebar/styles.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,10 @@ dev-app {
1616
background-color: antiquewhite;
1717
}
1818

19-
.kbq-sidebar-opened {
19+
.kbq-sidebar_opened {
2020
background-color: #6fba53;
2121
}
2222

23-
.kbq-sidebar-closed {
23+
.kbq-sidebar_closed {
2424
background-color: darkgray;
2525
}

‎packages/components-dev/sidebar/template.html

Lines changed: 11 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,36 +1,24 @@
1-
<br />
2-
31
<div class="layout-row layout-align-space-between">
4-
<div>
5-
<button kbq-button (click)="leftSidebar.toggle()">toggle by method</button>
6-
&nbsp;
7-
</div>
8-
9-
<div>
10-
<button kbq-button (click)="rightSidebar.toggle()">toggle by method</button>
11-
&nbsp;
12-
</div>
2+
<button kbq-button (click)="leftSidebar.toggle()">toggle by method</button>
3+
<button kbq-button (click)="rightSidebar.toggle()">toggle by method</button>
134
</div>
145

15-
<br />
166
<br />
177

188
<div class="dev-container layout-row layout-align-space-between">
199
<kbq-sidebar #leftSidebar="kbqSidebar" [position]="sidebarPositions.Left" (stateChanged)="onStateChanged($event)">
20-
<div kbq-sidebar-opened class="kbq-sidebar-opened">kbq-sidebar-opened</div>
21-
<div kbq-sidebar-closed class="kbq-sidebar-closed">kbq-sidebar-closed</div>
10+
<div kbqSidebarOpened>kbqSidebarOpened</div>
11+
<div kbqSidebarClosed>kbqSidebarClosed</div>
2212
</kbq-sidebar>
2313

2414
<div class="dev-container__body">main area</div>
2515

2616
<kbq-sidebar #rightSidebar="kbqSidebar" [position]="sidebarPositions.Right" (stateChanged)="onStateChanged($event)">
27-
<div kbq-sidebar-opened class="kbq-sidebar-opened">kbq-sidebar-opened</div>
28-
<div kbq-sidebar-closed class="kbq-sidebar-closed">kbq-sidebar-closed</div>
17+
<div kbqSidebarOpened>kbqSidebarOpened</div>
18+
<div kbqSidebarClosed>kbqSidebarClosed</div>
2919
</kbq-sidebar>
3020
</div>
3121

32-
<br />
33-
<br />
3422
<br />
3523

3624
<div class="layout-row layout-align-space-between">
@@ -47,7 +35,6 @@
4735
</div>
4836
</div>
4937

50-
<br />
5138
<br />
5239

5340
<kbq-splitter
@@ -57,15 +44,13 @@
5744
>
5845
<kbq-sidebar
5946
kbq-splitter-area
60-
[opened]="leftSidebarSidebarState"
6147
[position]="sidebarPositions.Left"
48+
[(opened)]="leftSidebarSidebarState"
6249
(stateChanged)="onStateChanged($event)"
6350
>
64-
<div kbq-sidebar-opened class="kbq-sidebar-opened" [maxWidth]="'600px'" [minWidth]="'320px'">
65-
kbq-sidebar-opened
66-
</div>
51+
<div kbqSidebarOpened [maxWidth]="'600px'" [minWidth]="'320px'">kbqSidebarOpened</div>
6752

68-
<div kbq-sidebar-closed class="kbq-sidebar-closed" [width]="'32px'">kbq-sidebar-closed</div>
53+
<div kbqSidebarClosed>kbqSidebarClosed</div>
6954
</kbq-sidebar>
7055

7156
<div kbq-splitter-area class="flex dev-container__body">main body</div>
@@ -76,13 +61,7 @@
7661
[position]="sidebarPositions.Right"
7762
(stateChanged)="onStateChanged($event)"
7863
>
79-
<div kbq-sidebar-opened class="kbq-sidebar-opened">kbq-sidebar-opened</div>
80-
<div kbq-sidebar-closed class="kbq-sidebar-closed">kbq-sidebar-closed</div>
64+
<div kbqSidebarOpened>kbqSidebarOpened</div>
65+
<div kbqSidebarClosed>kbqSidebarClosed</div>
8166
</kbq-sidebar>
8267
</kbq-splitter>
83-
84-
<br />
85-
<br />
86-
<br />
87-
88-
<div>{{ leftSidebar.params | json }}</div>

‎packages/components/sidebar/public-api.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,2 @@
1-
export * from './sidebar.component';
1+
export * from './sidebar';
22
export * from './sidebar.module';

‎packages/components/sidebar/sidebar-animations.ts

Lines changed: 0 additions & 32 deletions
This file was deleted.

‎packages/components/sidebar/sidebar.component.html

Lines changed: 0 additions & 5 deletions
This file was deleted.

‎packages/components/sidebar/sidebar.component.ts

Lines changed: 0 additions & 178 deletions
This file was deleted.

0 commit comments

Comments
 (0)