ngx-tethys 18.0.0 → 18.0.2

package/styles/variables.scss

@@ -1,23 +1,27 @@
-@use 'sass:color';
 @use 'sass:map';
 
 $thy-prefix: 'thy';
 
 // gray color
 $white: #fff;
-$gray-70: #fdfdfd !default;
+$gray-70: #f7f7f7 !default;
 $gray-80: #fafafa !default; // 选项鼠标移上去的背景色，主要用于表格 Hover 移上去的颜色 和表格的编号背景色,
 $gray-100: #f5f5f5 !default; // bordered 表格的背景色, 完成任务卡片颜色， Menu Item 移上去的背景色
 $gray-200: #eee !default; // 模块左侧导航鼠标移上去的阴影, 次分割线，部分控件描边, 消息评论图标使用
-$gray-210: #e9e9e9 !default; //整块区域的背景色为 #f3f3f3 后，某个卡片模块的背景色，用于文件详情
 $gray-300: #ddd !default; // 主分割线, 进度条背景色，三级图标色
 $gray-400: #cacaca !default; // 搜索框默认文字， 禁用图标颜色, 部分图标颜色,
 $gray-500: #aaa !default; // 添加参与人,负责人等操作图标的边框颜色,说明文字, 搜索框文字
 $gray-600: #999 !default; // 次要文字,如 Tab 切换文字
 $gray-700: #666 !default; // 主要文字
 $gray-800: #333 !default; // 标题和重点文字
+
+// deprecated
+$gray-210: #e9e9e9 !default; //整块区域的背景色为 #f3f3f3 后，某个卡片模块的背景色，用于文件详情
+// deprecated
 $gray-900: #212529 !default;
+// deprecated
 $black: #000;
+
 //px to rem
 $rem-5px: 0.3125rem;
 $rem-10px: 0.625rem;
@@ -29,8 +33,7 @@ $rem-26px: 1.625rem;
 // color
 $body-color: $gray-800 !default;
 $primary: #6698ff !default;
-// deprecated
-$primary-active: color.adjust($primary, $lightness: -10%) !default;
+
 $secondary: $gray-700 !default;
 $success: #73d897 !default; // 2dbcff
 $info: #5dcfff !default;
@@ -41,13 +44,21 @@ $secondary-item-active: rgba($primary, 0.1) !default;
 $item-active-bg-color: rgba($primary, 0.1) !default;
 $light: $gray-300 !default;
 $dark: #48525c !default;
-// $light : $gray-100;
-// $dark : $gray-800;
-// enable-gradients
 
 // font
-$font-family-sans-serif: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, PingFang SC, Helvetica Neue, Noto Sans, Noto Sans CJK SC,
-    Microsoft Yahei, Arial, Hiragino Sans GB, sans-serif !default;
+$font-family-sans-serif:
+    -apple-system,
+    BlinkMacSystemFont,
+    Segoe UI,
+    Roboto,
+    PingFang SC,
+    Helvetica Neue,
+    Noto Sans,
+    Noto Sans CJK SC,
+    Microsoft Yahei,
+    Arial,
+    Hiragino Sans GB,
+    sans-serif !default;
 $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace !default;
 $font-family-base: $font-family-sans-serif !default;
 $font-family-statistics-number: $font-family-base !default;
@@ -161,13 +172,10 @@ $btn-link-color-default: $gray-500 !default;
 $btn-link-color-disabled: $gray-400 !default;
 $btn-icon-light-color: $gray-300 !default;
 $btn-link-disabled-color: $gray-400 !default;
-$btn-icon-color: $gray-400 !default; // #cacaca
-$btn-icon-thick-dashed-color: $gray-300 !default; // #ddd
-$btn-icon-thick-solid-color: $gray-400 !default; // #cacaca
-// $btn-icon-circle-padding-lg: 0.6875rem;
-// $btn-icon-circle-padding-base: 0.563rem;
-// $btn-icon-circle-padding-sm: 0.4375rem;
-// $btn-icon-circle-padding-xs: 0.25rem;
+$btn-icon-color: $gray-400 !default;
+$btn-icon-thick-dashed-color: $gray-300 !default;
+$btn-icon-thick-solid-color: $gray-400 !default;
+
 $btn-icon-circle-padding-lg: 11px;
 $btn-icon-circle-padding-base: 8px;
 $btn-icon-circle-padding-md: 7px;
@@ -317,7 +325,7 @@ $layout-header-box-shadow: 0 4px 8px 0px #00000008 !default;
 $layout-content-background: $gray-80 !default;
 $layout-content-padding: 15px 20px 15px 20px !default;
 $layout-sidebar-width: 240px !default;
-$layout-sidebar-background-light: scale-color($gray-80, $lightness: +20%);
+$layout-sidebar-background-light: #fbfbfb !default;
 $layout-sidebar-background-dark: $gray-800 !default;
 $layout-sidebar-border-color: $gray-200 !default;
 $layout-sidebar-border-right: 1px solid $layout-sidebar-border-color !default;
@@ -390,6 +398,7 @@ $badge-danger-color: #ff7461 !default;
 $tag-default-color: $gray-700 !default;
 $tag-default-border-color: $gray-200 !default;
 $tag-default-bg: $gray-100 !default;
+$tag-default-hover-bg: $gray-200 !default;
 $tag-colors: () !default;
 $tag-colors: map.merge(
     (
@@ -402,6 +411,31 @@ $tag-colors: map.merge(
     ),
     $tag-colors
 );
+
+$tag-bg-hover-colors: () !default;
+$tag-bg-hover-colors: map.merge(
+    (
+        'primary': #4d87ff,
+        'info': #44c7ff,
+        'success': #5fd288,
+        'warning': #ffc544,
+        'danger': #ff5c5c
+    ),
+    $tag-bg-hover-colors
+);
+
+$tag-weak-fill-bg-hover-colors: () !default;
+$tag-weak-fill-bg-hover-colors: map.merge(
+    (
+        'primary': #4d87ff1a,
+        'info': #44c7ff1a,
+        'success': #5fd2881a,
+        'warning': #ffc5441a,
+        'danger': #ff5c5c1a
+    ),
+    $tag-weak-fill-bg-hover-colors
+);
+
 $tag-height-sm: 20px !default;
 $tag-height-md: 24px !default;
 $tag-height-lg: 28px !default;
@@ -521,27 +555,28 @@ $action-padding-y: 0.5rem !default;
 
 // Modals
 // Padding applied to the modal body
-$modal-inner-padding: 1.25rem 1.875rem 1.875rem 1.875rem !default; //
-$modal-has-footer-inner-padding: 1.25rem 1.875rem 0 1.875rem !default; //
+// Deprecated
+$modal-inner-padding: 1.25rem 1.875rem 1.875rem 1.875rem !default;
+$modal-has-footer-inner-padding: 1.25rem 1.875rem 0 1.875rem !default;
 $modal-dialog-margin: 0.5rem !default;
-$modal-dialog-margin-y-sm-up: 3.75rem !default; //
+$modal-dialog-margin-y-sm-up: 3.75rem !default;
 $modal-title-line-height: 1.5 !default;
 $modal-content-bg: $white !default;
 $modal-content-border-color: rgba($black, 0.2) !default;
-$modal-content-border-width: 0 !default; //
-$modal-content-box-shadow-xs: 0 0 1.5rem rgba($black, 0.4) !default; //
-$modal-content-box-shadow-sm-up: 0 0 1.5rem rgba($black, 0.5) !default; //
+$modal-content-border-width: 0 !default;
+$modal-content-box-shadow-xs: 0 0 1.5rem rgba($black, 0.4) !default;
+$modal-content-box-shadow-sm-up: 0 0 1.5rem rgba($black, 0.5) !default;
 $modal-backdrop-bg: $black !default;
-$modal-backdrop-opacity: 0.3 !default; //
-$modal-header-border-color: $gray-200 !default; //
+$modal-backdrop-opacity: 0.3 !default;
+$modal-header-border-color: $gray-200 !default;
 $modal-footer-border-color: $modal-header-border-color !default;
 $modal-header-border-width: 1px !default;
 $modal-footer-border-width: $modal-header-border-width !default;
-$modal-header-padding: 1.875rem !default; //
-$modal-lg: 980px !default; //
+$modal-header-padding: 1.875rem !default;
+$modal-lg: 980px !default;
 $modal-blg: 800px !default; //稍微大点，自定义属性
-$modal-md: 660px !default; //
-$modal-sm: 400px !default; //
+$modal-md: 660px !default;
+$modal-sm: 400px !default;
 $modal-transition: transform 0.3s ease-out !default;
 
 // Dialog
@@ -556,16 +591,15 @@ $dialog-header-border-color: $gray-200 !default;
 $dialog-box-shadow: 0 0 24px rgba(0, 0, 0, 0.25) !default;
 $dialog-body-padding: 0.5rem 2rem 1rem 2rem !default;
 
-// $dialog-footer-padding: 1.25rem 1.875rem 1.875rem 1.875rem !default;
 $dialog-footer-padding: 1rem 2rem !default;
 $dialog-footer-border-width: 1px !default;
 $dialog-footer-border-color: $dialog-header-border-color !default;
 
 $dialog-default-max-height: 85vh !default;
-$dialog-max-lg: 980px !default; //
+$dialog-max-lg: 980px !default;
 $dialog-lg: 800px !default;
-$dialog-md: 660px !default; //
-$dialog-sm: 400px !default; //
+$dialog-md: 660px !default;
+$dialog-sm: 400px !default;
 $dialog-super-lg-max-height: 1000px !default;
 $dialog-super-lg-max-width: 1800px !default;
 $dialog-super-lg-height: 94vh !default;
@@ -577,7 +611,6 @@ $btn-dialog-confirm-cancel: $btn-pair-child-link-margin-left !default;
 $card-border-radius: 2px !default;
 $card-border-color: $gray-200 !default;
 $card-title-icon-color: $primary !default;
-// change from $gray-700(#888) to $gray-800 (#333) by Terry required
 $card-title-color: $gray-800 !default;
 $card-title-font-size: $font-size-title !default;
 $card-title-line-height: 32px !default;
@@ -678,8 +711,6 @@ $empty-description-size: $font-size-base !default;
 $empty-description-margin-top: 14px !default;
 
 //switch
-// $switch-lg-width: 48px !default;
-// $switch-lg-height: 28px !default;
 $switch-width: 42px !default;
 $switch-height: 24px !default;
 $handle-margin: 2px !default;
@@ -766,8 +797,9 @@ $slide-divider: $gray-200 !default;
 $slide-footer-padding: 15px 20px 0 !default;
 $slide-footer-height: 56px !default;
 $slide-border-color: $gray-200 !default;
-$slide-box-shadow: inset 0px 4px 8px 0px #00000008, -4px 0px 12px 4px #00000008 !default;
-// $slide-box-shadow: 6px 0 16px -8px #00000014, 9px 0 28px #0000000d, 12px 0 48px 16px #00000008 !default;
+$slide-box-shadow:
+    inset 0px 4px 8px 0px #00000008,
+    -4px 0px 12px 4px #00000008 !default;
 //slider
 $slider-height-sm: 6px !default;
 $slider-height-md: 10px !default;
@@ -834,7 +866,7 @@ $editable-padding-x-lg: $input-padding-x-lg !default;
 $arrow-switcher-btn-size: 30px !default;
 $arrow-switcher-sm-btn-size: 24px !default;
 $arrow-switcher-btn-bac: $gray-200 !default;
-$arrow-switcher-btn-disabled-bac: #fafafa !default;
+$arrow-switcher-btn-disabled-bac: $gray-80 !default;
 $arrow-switcher-btn-disabled-color: $gray-300 !default;
 $arrow-switcher-btn-hover-bac: $primary !default;
 $arrow-switcher-btn-hover-color: $white !default;
@@ -1083,7 +1115,7 @@ $skeleton-vertical-gap: 12px;
 $skeleton-row-height: 20px;
 $skeleton-row-radius: 4px;
 $skeleton-row-width: 100%;
-$skeleton-primary-color: #f7f7f7;
+$skeleton-primary-color: $gray-70;
 $skeleton-animated-interval: 1.5s;
 
 // Prevent style packing optimization

package/switch/styles/mixin.scss

@@ -53,7 +53,7 @@
         left: $handle-margin + px;
         width: $height - $handle-margin * 2;
         height: $height - $handle-margin * 2;
-        background: #fff;
+        background: variables.$white;
         // border: 1px solid $border-color;
         border-radius: 1px;
         transition: left 0.15s ease-out;

package/table/styles/table.scss

@@ -352,7 +352,7 @@
 
     &-fixed-header {
         thead {
-            box-shadow: 0 0 0 1px #eee;
+            box-shadow: 0 0 0 1px variables.$gray-200;
             background-color: variables.$white;
             position: sticky;
             left: 0;

package/tabs/styles/tabs.scss

@@ -2,6 +2,7 @@
 
 .thy-tabs {
     display: block;
+    background: variables.$white;
     // overflow: hidden;
     &-content {
         padding: variables.$tabs-content-space 0px;

package/tag/styles/mixin.scss

@@ -1,18 +1,23 @@
-@use 'sass:color';
 @use '../../styles/variables.scss';
 
-@mixin tag-bg-variant($bg-color) {
-    background-color: $bg-color;
+@mixin tag-bg-variant($bg-color, $bg-hover-color) {
+    & {
+        background-color: $bg-color;
+    }
+
     &.thy-tag-hover {
         &:hover {
-            background-color: color.adjust($bg-color, $lightness: -5%);
+            background-color: $bg-hover-color;
             cursor: variables.$hand-cursor;
         }
     }
 }
 
 @mixin tag-color-variant($color, $hover-color) {
-    color: $color;
+    & {
+        color: $color;
+    }
+
     &.thy-tag-hover {
         thy-icon.thy-icon-close,
         &:hover {

package/tag/styles/tag.scss

@@ -52,11 +52,11 @@
     /**** colors ****/
     @each $color, $value in variables.$tag-colors {
         &-#{$color} {
-            @include mixin.tag-bg-variant($value);
+            @include mixin.tag-bg-variant($value, map.get(variables.$tag-bg-hover-colors, $color));
             @include mixin.tag-color-variant(variables.$white, variables.$white);
         }
         &-weak-fill-#{$color} {
-            @include mixin.tag-bg-variant(rgba($value, 0.1));
+            @include mixin.tag-bg-variant(rgba($value, 0.1), map.get(variables.$tag-weak-fill-bg-hover-colors, $color));
             @include mixin.tag-color-variant($value, $value);
         }
         &-outline-#{$color} {
@@ -66,12 +66,12 @@
 
     /**** label type ****/
     &-default {
-        @include mixin.tag-bg-variant(variables.$tag-default-bg);
+        @include mixin.tag-bg-variant(variables.$tag-default-bg, variables.$tag-default-hover-bg);
         @include mixin.tag-color-variant(variables.$tag-default-color, variables.$tag-default-color);
     }
 
     &-weak-fill-default {
-        @include mixin.tag-bg-variant(variables.$tag-default-bg);
+        @include mixin.tag-bg-variant(variables.$tag-default-bg, variables.$tag-default-hover-bg);
         @include mixin.tag-color-variant(variables.$tag-default-color, variables.$tag-default-color);
     }
 

package/tree/styles/tree.scss

@@ -169,14 +169,6 @@
             }
         }
     }
-
-    &-empty-children-state {
-        width: 100%;
-        line-height: 50px;
-        padding: 0 30px;
-        background-color: #fafafa;
-        color: #aaa;
-    }
 }
 
 .thy-tree-sm {

package/tree-select/styles/tree-select.scss

@@ -55,7 +55,6 @@
                 display: flex;
                 align-items: center;
                 @include text-truncate.text-truncate();
-                max-width:12rem;
             }
         }
 
@@ -63,6 +62,10 @@
             @include option.thy-option();
             @include thy-tree-select-option();
         }
+
+        .cdk-virtual-scroll-content-wrapper {
+            width: 100%;
+        }
     }
 
     &.thy-tree-select-dropdown-multiple {

package/tree-select/tree-select.component.d.ts

@@ -1,6 +1,6 @@
 import { TabIndexDisabledControlValueAccessorMixin, ThyClickDispatcher } from 'ngx-tethys/core';
 import { Observable } from 'rxjs';
-import { CdkConnectedOverlay, CdkOverlayOrigin, ConnectionPositionPair, ViewportRuler } from '@angular/cdk/overlay';
+import { CdkConnectedOverlay, CdkOverlayOrigin, ViewportRuler } from '@angular/cdk/overlay';
 import { ChangeDetectorRef, ElementRef, EventEmitter, NgZone, OnDestroy, OnInit, TemplateRef } from '@angular/core';
 import { ControlValueAccessor } from '@angular/forms';
 import { ThyTreeSelectNode, ThyTreeSelectType } from './tree-select.class';
@@ -30,8 +30,7 @@ export declare class ThyTreeSelect extends TabIndexDisabledControlValueAccessorM
     flattenTreeNodes: ThyTreeSelectNode[];
     virtualTreeNodes: ThyTreeSelectNode[];
     cdkConnectOverlayWidth: number;
-    positions: ConnectionPositionPair[];
-    expandedDropdownPositions: ConnectionPositionPair[];
+    expandedDropdownPositions: import("@angular/cdk/overlay").ConnectionPositionPair[];
     icons: {
         expand: string;
         collapse: string;
@@ -202,6 +201,7 @@ export declare class ThyTreeSelectNodes implements OnInit {
     treeNodeTemplateRef: TemplateRef<any>;
     defaultItemSize: number;
     thyVirtualHeight: string;
+    hasNodeChildren: boolean;
     constructor(parent: ThyTreeSelect);
     ngOnInit(): void;
     treeNodeIsSelected(node: ThyTreeSelectNode): boolean | ThyTreeSelectNode;

package/watermark/examples/basic/basic.component.scss

@@ -1,6 +1,8 @@
+@use 'variables.scss' as variables2;
+
 .demo-col-section {
     height: 200px;
     width: 100%;
-    border: 1px solid #eee;
+    border: 1px solid variables2.$gray-200;
     position: relative;
 }

package/watermark/examples/custom/custom.component.scss

@@ -0,0 +1,8 @@
+@use 'variables.scss' as variables2;
+
+.demo-col-section {
+    height: 200px;
+    width: 100%;
+    border: 1px solid variables2.$gray-200;
+    position: relative;
+}

package/watermark/styles/watermark.scss

@@ -1,2 +1 @@
-@use "../../styles/variables";
-@use "../examples/basic/basic.component.scss";
+@use '../../styles/variables';

package/tabs/examples/basic/basic.component.scss

@@ -1,5 +0,0 @@
-:host {
-    .thy-tabs {
-        background: #fff;
-    }
-}