ngx-tethys 18.2.2 → 18.2.3

package/nav/nav.component.d.ts

@@ -1,3 +1,4 @@
+import { ThyPopoverConfig } from 'ngx-tethys/popover';
 import { Observable } from 'rxjs';
 import { AfterContentChecked, AfterContentInit, AfterViewInit, ElementRef, OnChanges, OnInit, QueryList, Signal, SimpleChanges, TemplateRef } from '@angular/core';
 import { RouterLinkActive } from '@angular/router';
@@ -5,7 +6,7 @@ import { ThyNavInkBarDirective } from './nav-ink-bar.directive';
 import { ThyNavItemDirective } from './nav-item.directive';
 import { ThyNavLocale } from 'ngx-tethys/i18n';
 import * as i0 from "@angular/core";
-export type ThyNavType = 'pulled' | 'tabs' | 'pills' | 'lite' | 'primary' | 'secondary' | 'thirdly' | 'secondary-divider';
+export type ThyNavType = 'pulled' | 'tabs' | 'pills' | 'lite' | 'card' | 'primary' | 'secondary' | 'thirdly' | 'secondary-divider';
 export type ThyNavSize = 'lg' | 'md' | 'sm';
 export type ThyNavHorizontal = '' | 'start' | 'center' | 'end';
 /**
@@ -19,7 +20,7 @@ export declare class ThyNav implements OnInit, AfterViewInit, AfterContentInit,
     private changeDetectorRef;
     private popover;
     private readonly destroyRef;
-    private type;
+    type: ThyNavType;
     private size;
     initialized: boolean;
     horizontal: ThyNavHorizontal;
@@ -70,8 +71,14 @@ export declare class ThyNav implements OnInit, AfterViewInit, AfterContentInit,
     thyResponsive: boolean;
     /**
      * 更多操作的菜单点击内部是否可关闭
+     * @deprecated please use thyPopoverOptions
      */
     thyInsideClosable: boolean;
+    /**
+     * 更多菜单弹出框的参数，底层使用 Popover 组件
+     * @type ThyPopoverConfig
+     */
+    thyPopoverOptions: import("@angular/core").InputSignal<ThyPopoverConfig<unknown>>;
     /**
      * 右侧额外区域模板
      * @type TemplateRef
@@ -113,18 +120,19 @@ export declare class ThyNav implements OnInit, AfterViewInit, AfterContentInit,
     ngAfterContentInit(): void;
     ngAfterContentChecked(): void;
     private setMoreBtnOffset;
+    private setNavItemDivider;
     createResizeObserver(element: HTMLElement): Observable<unknown>;
     private calculateMoreIsActive;
     private setHiddenItems;
     private getShowItemsEndIndexWhenHorizontal;
     private getShowItemsEndIndexWhenVertical;
     private resetSizes;
-    openMore(event: Event, template: TemplateRef<any>): void;
+    openMoreMenu(event: Event, template: TemplateRef<any>): void;
     navItemClick(item: ThyNavItemDirective): void;
     private alignInkBarToSelectedTab;
     ngOnChanges(changes: SimpleChanges): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<ThyNav, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<ThyNav, "thy-nav", never, { "thyType": { "alias": "thyType"; "required": false; }; "thySize": { "alias": "thySize"; "required": false; }; "thyHorizontal": { "alias": "thyHorizontal"; "required": false; }; "thyVertical": { "alias": "thyVertical"; "required": false; }; "thyFill": { "alias": "thyFill"; "required": false; }; "thyResponsive": { "alias": "thyResponsive"; "required": false; }; "thyInsideClosable": { "alias": "thyInsideClosable"; "required": false; }; "thyExtra": { "alias": "thyExtra"; "required": false; }; }, {}, ["moreOperation", "morePopover", "extra", "links", "routers"], ["*"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<ThyNav, "thy-nav", never, { "thyType": { "alias": "thyType"; "required": false; }; "thySize": { "alias": "thySize"; "required": false; }; "thyHorizontal": { "alias": "thyHorizontal"; "required": false; }; "thyVertical": { "alias": "thyVertical"; "required": false; }; "thyFill": { "alias": "thyFill"; "required": false; }; "thyResponsive": { "alias": "thyResponsive"; "required": false; }; "thyInsideClosable": { "alias": "thyInsideClosable"; "required": false; }; "thyPopoverOptions": { "alias": "thyPopoverOptions"; "required": false; "isSignal": true; }; "thyExtra": { "alias": "thyExtra"; "required": false; }; }, {}, ["moreOperation", "morePopover", "extra", "links", "routers"], ["*"], true, never>;
     static ngAcceptInputType_thyVertical: boolean | string | number;
     static ngAcceptInputType_thyFill: boolean | string | number;
     static ngAcceptInputType_thyResponsive: boolean | string | number;

package/nav/styles/mixin.scss

@@ -1,7 +1,7 @@
-@use "sass:color";
-@use "../../styles/mixins/hover" as mixins-hover;
-@use "../../styles/mixins/hover";
-@use "../../styles/variables";
+@use 'sass:color';
+@use '../../styles/mixins/hover' as mixins-hover;
+@use '../../styles/mixins/hover';
+@use '../../styles/variables';
 
 @mixin nav-item-variant($color, $hover-color, $border-bottom) {
     & {
@@ -47,7 +47,6 @@
         border-radius: $border-radius;
     }
 
-
     &.thy-nav-origin-active {
         text-decoration: none;
         background: rgba($hover-color, 0.1);
@@ -79,35 +78,50 @@
     }
 }
 
-@mixin set-nav-size($nav-item-right-offset: 0px) {
+@mixin set-nav-size($nav-item-right-offset: 0px, $nav-type: '') {
+    $nav-card-item-padding: variables.$nav-card-item-padding-y variables.$nav-card-item-padding-x;
+    $nav-card-item-right: variables.$nav-card-item-right;
+
     .thy-nav-item {
         height: variables.$nav-height;
-        @include nav-item-size(
-            variables.$nav-item-padding-y variables.$nav-item-padding-x,
-            variables.$nav-item-right - $nav-item-right-offset,
-            variables.$nav-item-font-size
-        );
+        @if ($nav-type == 'card') {
+            @include nav-item-size($nav-card-item-padding, $nav-card-item-right, variables.$nav-item-font-size);
+        } @else {
+            @include nav-item-size(
+                variables.$nav-item-padding-y variables.$nav-item-padding-x,
+                variables.$nav-item-right - $nav-item-right-offset,
+                variables.$nav-item-font-size
+            );
+        }
     }
 
     &.thy-nav-lg {
         .thy-nav-item {
             height: variables.$nav-height-lg;
-            @include nav-item-size(
-                variables.$nav-item-padding-y-lg variables.$nav-item-padding-x-lg,
-                variables.$nav-item-right-lg - $nav-item-right-offset,
-                variables.$nav-item-font-size-lg
-            );
+            @if ($nav-type == 'card') {
+                @include nav-item-size($nav-card-item-padding, $nav-card-item-right, variables.$nav-item-font-size-lg);
+            } @else {
+                @include nav-item-size(
+                    variables.$nav-item-padding-y-lg variables.$nav-item-padding-x-lg,
+                    variables.$nav-item-right-lg - $nav-item-right-offset,
+                    variables.$nav-item-font-size-lg
+                );
+            }
         }
     }
 
     &.thy-nav-sm {
         .thy-nav-item {
             height: variables.$nav-height-sm;
-            @include nav-item-size(
-                variables.$nav-item-padding-y-sm variables.$nav-item-padding-x-sm,
-                variables.$nav-item-right-sm - $nav-item-right-offset,
-                variables.$nav-item-font-size-sm
-            );
+            @if ($nav-type == 'card') {
+                @include nav-item-size($nav-card-item-padding, $nav-card-item-right, variables.$nav-item-font-size-sm);
+            } @else {
+                @include nav-item-size(
+                    variables.$nav-item-padding-y-sm variables.$nav-item-padding-x-sm,
+                    variables.$nav-item-right-sm - $nav-item-right-offset,
+                    variables.$nav-item-font-size-sm
+                );
+            }
         }
     }
 }

package/nav/styles/nav.scss

@@ -1,9 +1,9 @@
-@use "sass:meta";
-@use "sass:list";
-@use "sass:map";
-@use "../../styles/variables";
-@use "../../tag/styles/mixin" as tag;
-@use "mixin";
+@use 'sass:meta';
+@use 'sass:list';
+@use 'sass:map';
+@use '../../styles/variables';
+@use '../../tag/styles/mixin' as tag;
+@use 'mixin';
 
 .thy-nav {
     display: flex;
@@ -29,6 +29,21 @@
     .thy-nav-extra {
         display: inline-flex;
         align-items: center;
+        flex-grow: 1;
+        justify-content: flex-end;
+    }
+
+    .thy-nav-more-icon {
+        margin-left: 8px;
+    }
+
+    .thy-nav-origin-active {
+        .thy-nav-more-icon {
+            svg {
+                transform: rotate(180deg);
+                transition: transform 0.2s cubic-bezier(0.34, 0.69, 0.1, 1);
+            }
+        }
     }
 
     &-ink-bar {
@@ -37,7 +52,9 @@
         pointer-events: none;
 
         &-animated {
-            transition: left 0.3s, top 0.3s;
+            transition:
+                left 0.3s,
+                top 0.3s;
         }
     }
 }
@@ -66,17 +83,62 @@
     @include mixin.set-nav-size(12px);
 }
 
+.thy-nav-card {
+    @include mixin.nav-border-bottom();
+    @include mixin.set-nav-size(0, 'card');
+
+    .thy-nav-item {
+        display: flex;
+        align-items: center;
+        padding: 12px 20px;
+        margin-right: 0;
+        border: 1px solid transparent;
+
+        &.has-right-divider {
+            position: relative;
+            &::after {
+                content: '';
+                position: absolute;
+                right: 0;
+                top: 50%;
+                transform: translateY(-50%);
+                display: inline-block;
+                height: 1rem;
+                vertical-align: middle;
+                border-left: 1px solid variables.$gray-300;
+            }
+        }
+
+        &.active {
+            &:not(.thy-nav-more-container) {
+                border: 1px solid variables.$border-color;
+                border-bottom-color: variables.$bg-default;
+                border-bottom-width: 2px;
+                border-radius: 8px 8px 0 0;
+                &::before {
+                    left: -8px;
+                    border-bottom-right-radius: 8px;
+                    border-width: 0 1px 1px 0;
+                    box-shadow: 1px 2px 0 variables.$white;
+                }
+                &::after {
+                    right: -8px;
+                    border-bottom-left-radius: 8px;
+                    border-width: 0 0 1px 1px;
+                    box-shadow: -1px 2px 0 variables.$white;
+                }
+            }
+        }
+
+        @include mixin.nav-item-variant(variables.$nav-item-color, variables.$nav-item-hover-color, null);
+    }
+}
+
 .thy-nav-pills {
     .thy-nav-item {
-        // height: variables.$nav-height - 28px;
         display: inline-flex;
         align-items: center;
         border-bottom-width: 0px;
-        // padding: {
-        //     left: 12px;
-        //     right: 12px;
-        // }
-        // @include tag.tag-size('md')
         @include mixin.nav-item-size(null, variables.$nav-item-right, variables.$font-size-sm);
         @include mixin.nav-item-pills-variant(variables.$tag-default-color, variables.$nav-item-hover-color);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-tethys",
-  "version": "18.2.2",
+  "version": "18.2.3",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/atinc/ngx-tethys.git"

package/schematics/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "18.2.2";
+export declare const VERSION = "18.2.3";

package/schematics/version.js

@@ -1,4 +1,4 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
-exports.VERSION = '18.2.2';
+exports.VERSION = '18.2.3';

package/styles/variables.scss

@@ -21,6 +21,7 @@ $success: #73d897 !default;
 $info: #5dcfff !default;
 $warning: #ffcd5d !default;
 $danger: #ff7575 !default;
+$black: #000 !default;
 
 $body-color: $gray-800 !default;
 $secondary: $gray-700 !default;
@@ -34,8 +35,6 @@ $pass: #2cccda !default;
 $gray-210: #e9e9e9 !default; //整块区域的背景色为 #f3f3f3 后，某个卡片模块的背景色，用于文件详情
 // deprecated
 $gray-900: #212529 !default;
-// deprecated
-$black: #000;
 
 /** text color  */
 $text-placeholder: $gray-400 !default;
@@ -529,6 +528,10 @@ $nav-item-padding-y-sm: 0.625rem !default; // 高度 44px
 $nav-item-padding-x-sm: 0.5rem !default;
 $nav-item-right-sm: 20px !default;
 $nav-item-font-size-sm: 14px !default;
+// nav card item size
+$nav-card-item-padding-y: 0px !default;
+$nav-card-item-padding-x: 20px !default;
+$nav-card-item-right: 0px !default;
 
 $nav-item-primary-padding-y: 0.9512rem !default; // 高度 56px, 文字 15px
 $nav-item-primary-padding-x: 1rem !default;

package/theme/examples/basic/basic.component.scss

@@ -0,0 +1,13 @@
+@use 'variables.scss' as variables2;
+
+.color-block {
+    height: 30px;
+    line-height: 30px;
+    padding: 0 20px;
+    width: 200px;
+}
+.default-use {
+    height: 30px;
+    width: 200px;
+    background-color: variables2.$gray-100; // or var(--gray-100)
+}