feat(4ps): update breadcrumb

mixcore · Jan 11, 2024 · 4d31a37 · 4d31a37 · vercel · Jan 11, 2024
1 parent 75bcfca
commit 4d31a37
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 47 deletions.
diff --git a/apps/mix-cms/project.json b/apps/mix-cms/project.json
@@ -59,8 +59,8 @@
             },
             {
               "type": "anyComponentStyle",
-              "maximumWarning": "20kb",
-              "maximumError": "20kb"
+              "maximumWarning": "30kb",
+              "maximumError": "30kb"
             }
           ],
           "fileReplacements": [
@@ -80,8 +80,8 @@
             },
             {
               "type": "anyComponentStyle",
-              "maximumWarning": "20kb",
-              "maximumError": "20kb"
+              "maximumWarning": "30kb",
+              "maximumError": "30kb"
             }
           ],
           "fileReplacements": [
@@ -101,8 +101,8 @@
             },
             {
               "type": "anyComponentStyle",
-              "maximumWarning": "20kb",
-              "maximumError": "20kb"
+              "maximumWarning": "30kb",
+              "maximumError": "30kb"
             }
           ],
           "fileReplacements": [

diff --git a/apps/mix-database/project.json b/apps/mix-database/project.json
@@ -60,8 +60,8 @@
             },
             {
               "type": "anyComponentStyle",
-              "maximumWarning": "20kb",
-              "maximumError": "20kb"
+              "maximumWarning": "30kb",
+              "maximumError": "30kb"
             }
           ],
           "fileReplacements": [

diff --git a/apps/mix-kanban/project.json b/apps/mix-kanban/project.json
@@ -59,8 +59,8 @@
             },
             {
               "type": "anyComponentStyle",
-              "maximumWarning": "20kb",
-              "maximumError": "20kb"
+              "maximumWarning": "30kb",
+              "maximumError": "30kb"
             }
           ],
           "fileReplacements": [
@@ -80,8 +80,8 @@
             },
             {
               "type": "anyComponentStyle",
-              "maximumWarning": "20kb",
-              "maximumError": "20kb"
+              "maximumWarning": "30kb",
+              "maximumError": "30kb"
             }
           ],
           "fileReplacements": [

diff --git a/libs/mix-share/src/modules/database/database.layout.html b/libs/mix-share/src/modules/database/database.layout.html
@@ -1,37 +1,21 @@
 <router-outlet></router-outlet>
 
 <ng-template #breadcrumb>
-  <nav class="flex" aria-label="Breadcrumb">
-    <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
-      <li class="inline-flex items-center">
-        <a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600 dark:text-gray-400 dark:hover:text-white">
-          <svg class="w-3 h-3 me-2.5" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-            <path d="m19.707 9.293-2-2-7-7a1 1 0 0 0-1.414 0l-7 7-2 2a1 1 0 0 0 1.414 1.414L2 10.414V18a2 2 0 0 0 2 2h3a1 1 0 0 0 1-1v-4a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1v4a1 1 0 0 0 1 1h3a2 2 0 0 0 2-2v-7.586l.293.293a1 1 0 0 0 1.414-1.414Z"/>
-          </svg>
-          Home
-        </a>
-      </li>
-      <li>
-        <div class="flex items-center">
-          <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
-          </svg>
-          <a href="#" class="ms-1 text-sm font-medium text-gray-700 hover:text-blue-600 md:ms-2 dark:text-gray-400 dark:hover:text-white">Context</a>
-        </div>
-      </li>
-      <li aria-current="page">
-        <div class="flex items-center">
-          <svg class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 6 10">
-            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 9 4-4-4-4"/>
-          </svg>
-          <span class="ms-1 text-sm font-medium text-gray-500 md:ms-2 dark:text-gray-400">
-            <mix-db-context-select
-            [size]="'s'"
-            (selectedItemChange)="uiStore.changeSelected($event)"
-          ></mix-db-context-select>
-          </span>
-        </div>
-      </li>
-    </ol>
-  </nav>
+  <mix-breadcrumbs>
+    <div name="Home" icon="home" mixBreadcrumbItem></div>
+
+    <div
+      name="Home"
+      icon="home"
+      mixBreadcrumbItem
+      [templateRef]="contextSelect"
+    >
+      <ng-template #contextSelect>
+        <mix-db-context-select
+          [size]="'s'"
+          (selectedItemChange)="uiStore.changeSelected($event)"
+        ></mix-db-context-select>
+      </ng-template>
+    </div>
+  </mix-breadcrumbs>
 </ng-template>
diff --git a/libs/mix-share/src/modules/database/database.layout.ts b/libs/mix-share/src/modules/database/database.layout.ts
@@ -3,6 +3,7 @@ import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { RouterModule } from '@angular/router';
 import { BasePageComponent } from '@mixcore/share/base';
 import { ToolbarService } from '@mixcore/share/components';
+import { MixBreadcrumbsModule } from '@mixcore/ui/breadcrumbs';
 import { TuiLinkModule } from '@taiga-ui/core';
 import { TuiBreadcrumbsModule } from '@taiga-ui/kit';
 import { DbContextSelectComponent } from './components/db-context-select/db-context-select.component';
@@ -19,6 +20,7 @@ import { DbUiStore } from './store/db-ui.store';
     TuiBreadcrumbsModule,
     TuiLinkModule,
     DbContextSelectComponent,
+    MixBreadcrumbsModule,
   ],
   styles: `
   .database-menu {

diff --git a/libs/mix-ui/src/breadcrumbs/breadcrumbs.component.html b/libs/mix-ui/src/breadcrumbs/breadcrumbs.component.html
@@ -2,7 +2,8 @@
      aria-label="Breadcrumb">
   <ol class="inline-flex items-center space-x-1 md:space-x-2 rtl:space-x-reverse">
     @for (item of displayItems(); track item; let idx = $index, last = $last) {
-    <li class="hidden lg:inline-flex items-center">
+    <li class="items-center"
+        [ngClass]="{'hidden lg:inline-flex': !last, 'inline-flex': last}">
       <svg *ngIf="idx > 0"
            class="rtl:rotate-180 w-3 h-3 text-gray-400 mx-1"
            xmlns="http://www.w3.org/2000/svg"
@@ -28,7 +29,13 @@
           </path>
         </svg>
 
-        <div>{{ item.name}}</div>
+        <ng-container *ngIf="item.templateRef">
+          <ng-container *ngTemplateOutlet="item.templateRef"></ng-container>
+        </ng-container>
+        <ng-container *ngIf="!item.templateRef">
+          <div>{{ item.name}}</div>
+        </ng-container>
+
       </a>
     </li>
     }