ngx-tethys 20.0.2 → 20.0.3

package/native-table/styles/native-table.scss

@@ -0,0 +1,174 @@
+@use '../../styles/bootstrap/variables' as bootstrap-variables;
+@use '../../styles/mixins/utilities';
+@use '../../styles/variables';
+@use '../../styles/mixins/tables';
+
+.thy-native-table {
+    width: 100%;
+    max-width: 100%;
+    color: variables.$table-color;
+    background-color: variables.$table-bg;
+
+    th,
+    td {
+        padding: variables.$table-default-header-cell-padding;
+        vertical-align: middle;
+        border-bottom: variables.$table-border-width solid variables.$table-border-color;
+    }
+
+    tbody tr {
+        &.clear-hover {
+            cursor: default !important;
+            box-shadow: initial !important;
+            background-color: transparent !important;
+
+            td {
+                border-bottom: 0;
+            }
+        }
+    }
+
+    @include tables.table-size(
+        variables.$table-cell-height,
+        variables.$table-cell-height,
+        variables.$table-header-padding,
+        variables.$table-cell-padding
+    );
+
+    .thy-native-table {
+        background-color: bootstrap-variables.$body-bg;
+    }
+    .thy-native-table-content {
+        width: 100%;
+    }
+    .thy-table-pagination {
+        padding: 0 20px;
+        margin-top: 1.25rem;
+    }
+}
+
+.native-table-default {
+    @include tables.table-set-header(
+        left,
+        bottom,
+        400,
+        variables.$table-border-width,
+        transparent,
+        variables.$table-border-color,
+        variables.$table-default-header-color,
+        variables.$table-default-header-padding
+    );
+}
+
+.native-table-bordered {
+    border: variables.$table-border-width solid variables.$table-border-color;
+
+    th,
+    td {
+        border: variables.$table-border-width solid variables.$table-border-color;
+    }
+
+    &:has(+ .thy-table-skeleton) > thead {
+        // 有骨架屏去掉 thead 的 border-bottom，否则会和 table 的边框重叠加粗
+        tr th {
+            border-bottom: 0;
+        }
+    }
+
+    @include tables.table-set-header(
+        center,
+        middle,
+        400,
+        variables.$table-border-width,
+        variables.$table-bordered-bg,
+        variables.$table-border-color,
+        variables.$table-bordered-header-color,
+        0
+    );
+}
+
+.native-table-boxed {
+    border: variables.$table-border-width solid variables.$table-border-color;
+
+    tbody {
+        // 最后一行去掉 border-bottom，否则会和 table 的边框重叠加粗
+        tr:last-child {
+            td {
+                border-bottom: 0px;
+            }
+        }
+    }
+
+    &:has(+ .thy-table-skeleton) {
+        // 有骨架屏 给table只设置上左边框的border-radius
+        border-radius: 0 !important;
+        border-top-left-radius: variables.$border-radius !important;
+    }
+
+    &:has(+ .thy-table-skeleton) > thead {
+        // 有骨架屏去掉 thead 的 border-bottom，否则会和 table 的边框重叠加粗
+        tr th {
+            border-bottom: 0;
+        }
+    }
+
+    @include tables.table-set-header(
+        left,
+        middle,
+        400,
+        variables.$table-border-width,
+        variables.$table-bordered-bg,
+        variables.$table-border-color,
+        variables.$table-bordered-header-color,
+        0
+    );
+}
+
+.native-table-xlg {
+    @include tables.table-size(
+        variables.$table-cell-height-xlg,
+        variables.$table-cell-height-xlg,
+        variables.$table-header-padding-xlg,
+        variables.$table-cell-padding-xlg
+    );
+}
+
+.native-table-lg {
+    @include tables.table-size(
+        variables.$table-cell-height-lg,
+        variables.$table-cell-height-lg,
+        variables.$table-header-padding-lg,
+        variables.$table-cell-padding-lg
+    );
+}
+
+.native-table-md {
+    @include tables.table-size(
+        variables.$table-cell-height,
+        variables.$table-cell-height,
+        variables.$table-header-padding,
+        variables.$table-cell-padding
+    );
+}
+
+.native-table-sm {
+    @include tables.table-size(
+        variables.$table-cell-height-sm,
+        variables.$table-cell-height-sm,
+        variables.$table-header-padding-sm,
+        variables.$table-cell-padding-sm
+    );
+}
+
+.native-table-xs {
+    @include tables.table-size(
+        variables.$table-cell-height-xs,
+        variables.$table-cell-height-xs,
+        variables.$table-header-padding-xs,
+        variables.$table-cell-padding-xs
+    );
+}
+
+.table-fixed {
+    table-layout: fixed;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ngx-tethys",
-  "version": "20.0.2",
+  "version": "20.0.3",
   "repository": {
     "type": "git",
     "url": "git+ssh://git@github.com/atinc/ngx-tethys.git"
@@ -206,6 +206,10 @@
       "types": "./message/index.d.ts",
       "default": "./fesm2022/ngx-tethys-message.mjs"
     },
+    "./native-table": {
+      "types": "./native-table/index.d.ts",
+      "default": "./fesm2022/ngx-tethys-native-table.mjs"
+    },
     "./nav": {
       "types": "./nav/index.d.ts",
       "default": "./fesm2022/ngx-tethys-nav.mjs"

package/schematics/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "20.0.2";
+export declare const VERSION = "20.0.3";

package/schematics/version.js

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

package/select/index.d.ts

@@ -249,6 +249,11 @@ declare class ThySelect extends TabIndexDisabledControlValueAccessorMixin implem
      * 是否隐藏选择框边框
      */
     readonly thyBorderless: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    readonly panel: Signal<ElementRef<HTMLElement> | undefined>;
+    /**
+     * 是否启用虚拟滚动，默认值为 false
+     */
+    readonly thyVirtualScroll: _angular_core.InputSignalWithTransform<boolean, unknown>;
     private scrolledIndex;
     readonly cdkVirtualScrollViewport: Signal<CdkVirtualScrollViewport | undefined>;
     private shouldActivateOption;
@@ -301,7 +306,8 @@ declare class ThySelect extends TabIndexDisabledControlValueAccessorMixin implem
     private allGroupsAndOptionsByTemplate;
     private buildFilteredGroupsAndOptions;
     private updateSelectedOptions;
-    optionsScrolled(index: number): void;
+    optionsVirtualScrolled(index: number): void;
+    optionsScrolled(elementRef: ElementRef): void;
     search(keywords: string): void;
     onBlur(event?: FocusEvent): void;
     onFocus(event?: FocusEvent): void;
@@ -333,7 +339,7 @@ declare class ThySelect extends TabIndexDisabledControlValueAccessorMixin implem
     trackByFn(index: number, item: ThySelectFlattedItem): SafeAny;
     ngOnDestroy(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThySelect, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThySelect, "thy-select,thy-custom-select", ["thySelect"], { "thyDropdownWidthMode": { "alias": "thyDropdownWidthMode"; "required": false; "isSignal": true; }; "thyItemSize": { "alias": "thyItemSize"; "required": false; "isSignal": true; }; "thyShowSearch": { "alias": "thyShowSearch"; "required": false; "isSignal": true; }; "thyPlaceHolder": { "alias": "thyPlaceHolder"; "required": false; "isSignal": true; }; "thyServerSearch": { "alias": "thyServerSearch"; "required": false; "isSignal": true; }; "thyLoadState": { "alias": "thyLoadState"; "required": false; "isSignal": true; }; "thyAutoActiveFirstItem": { "alias": "thyAutoActiveFirstItem"; "required": false; "isSignal": true; }; "thyMode": { "alias": "thyMode"; "required": false; "isSignal": true; }; "thySize": { "alias": "thySize"; "required": false; "isSignal": true; }; "thyEmptyStateText": { "alias": "thyEmptyStateText"; "required": false; "isSignal": true; }; "thyEmptySearchMessageText": { "alias": "thyEmptySearchMessageText"; "required": false; "isSignal": true; }; "thyEnableScrollLoad": { "alias": "thyEnableScrollLoad"; "required": false; "isSignal": true; }; "thyAllowClear": { "alias": "thyAllowClear"; "required": false; "isSignal": true; }; "thyDisabled": { "alias": "thyDisabled"; "required": false; }; "thySortComparator": { "alias": "thySortComparator"; "required": false; "isSignal": true; }; "thyFooterTemplate": { "alias": "thyFooterTemplate"; "required": false; "isSignal": true; }; "thyPlacement": { "alias": "thyPlacement"; "required": false; "isSignal": true; }; "thyOrigin": { "alias": "thyOrigin"; "required": false; "isSignal": true; }; "thyFooterClass": { "alias": "thyFooterClass"; "required": false; "isSignal": true; }; "thyAutoExpand": { "alias": "thyAutoExpand"; "required": false; "isSignal": true; }; "thyHasBackdrop": { "alias": "thyHasBackdrop"; "required": false; "isSignal": true; }; "thyMaxTagCount": { "alias": "thyMaxTagCount"; "required": false; "isSignal": true; }; "thyBorderless": { "alias": "thyBorderless"; "required": false; "isSignal": true; }; "thyOptions": { "alias": "thyOptions"; "required": false; "isSignal": true; }; "thyPreset": { "alias": "thyPreset"; "required": false; "isSignal": true; }; }, { "thyOnSearch": "thyOnSearch"; "thyOnScrollToBottom": "thyOnScrollToBottom"; "thyOnExpandStatusChange": "thyOnExpandStatusChange"; }, ["selectedValueDisplayRef", "options", "groups"], ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThySelect, "thy-select,thy-custom-select", ["thySelect"], { "thyDropdownWidthMode": { "alias": "thyDropdownWidthMode"; "required": false; "isSignal": true; }; "thyItemSize": { "alias": "thyItemSize"; "required": false; "isSignal": true; }; "thyShowSearch": { "alias": "thyShowSearch"; "required": false; "isSignal": true; }; "thyPlaceHolder": { "alias": "thyPlaceHolder"; "required": false; "isSignal": true; }; "thyServerSearch": { "alias": "thyServerSearch"; "required": false; "isSignal": true; }; "thyLoadState": { "alias": "thyLoadState"; "required": false; "isSignal": true; }; "thyAutoActiveFirstItem": { "alias": "thyAutoActiveFirstItem"; "required": false; "isSignal": true; }; "thyMode": { "alias": "thyMode"; "required": false; "isSignal": true; }; "thySize": { "alias": "thySize"; "required": false; "isSignal": true; }; "thyEmptyStateText": { "alias": "thyEmptyStateText"; "required": false; "isSignal": true; }; "thyEmptySearchMessageText": { "alias": "thyEmptySearchMessageText"; "required": false; "isSignal": true; }; "thyEnableScrollLoad": { "alias": "thyEnableScrollLoad"; "required": false; "isSignal": true; }; "thyAllowClear": { "alias": "thyAllowClear"; "required": false; "isSignal": true; }; "thyDisabled": { "alias": "thyDisabled"; "required": false; }; "thySortComparator": { "alias": "thySortComparator"; "required": false; "isSignal": true; }; "thyFooterTemplate": { "alias": "thyFooterTemplate"; "required": false; "isSignal": true; }; "thyPlacement": { "alias": "thyPlacement"; "required": false; "isSignal": true; }; "thyOrigin": { "alias": "thyOrigin"; "required": false; "isSignal": true; }; "thyFooterClass": { "alias": "thyFooterClass"; "required": false; "isSignal": true; }; "thyAutoExpand": { "alias": "thyAutoExpand"; "required": false; "isSignal": true; }; "thyHasBackdrop": { "alias": "thyHasBackdrop"; "required": false; "isSignal": true; }; "thyMaxTagCount": { "alias": "thyMaxTagCount"; "required": false; "isSignal": true; }; "thyBorderless": { "alias": "thyBorderless"; "required": false; "isSignal": true; }; "thyVirtualScroll": { "alias": "thyVirtualScroll"; "required": false; "isSignal": true; }; "thyOptions": { "alias": "thyOptions"; "required": false; "isSignal": true; }; "thyPreset": { "alias": "thyPreset"; "required": false; "isSignal": true; }; }, { "thyOnSearch": "thyOnSearch"; "thyOnScrollToBottom": "thyOnScrollToBottom"; "thyOnExpandStatusChange": "thyOnExpandStatusChange"; }, ["selectedValueDisplayRef", "options", "groups"], ["*", "*"], true, never>;
     static ngAcceptInputType_thyDisabled: i1.ThyBooleanInput;
 }
 

package/shared/index.d.ts

@@ -470,10 +470,11 @@ declare class ThyOption {
      * 模板
      */
     readonly template: _angular_core.Signal<TemplateRef<any> | undefined>;
+    readonly suffixTemplate: _angular_core.Signal<TemplateRef<any> | undefined>;
     private readonly optionGroupComponent;
     get groupLabel(): string;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThyOption, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThyOption, "thy-option", never, { "thyValue": { "alias": "thyValue"; "required": false; "isSignal": true; }; "thyRawValue": { "alias": "thyRawValue"; "required": false; "isSignal": true; }; "thyLabelText": { "alias": "thyLabelText"; "required": false; "isSignal": true; }; "thyShowOptionCustom": { "alias": "thyShowOptionCustom"; "required": false; "isSignal": true; }; "thySearchKey": { "alias": "thySearchKey"; "required": false; "isSignal": true; }; "thyDisabled": { "alias": "thyDisabled"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<ThyOption, "thy-option", never, { "thyValue": { "alias": "thyValue"; "required": false; "isSignal": true; }; "thyRawValue": { "alias": "thyRawValue"; "required": false; "isSignal": true; }; "thyLabelText": { "alias": "thyLabelText"; "required": false; "isSignal": true; }; "thyShowOptionCustom": { "alias": "thyShowOptionCustom"; "required": false; "isSignal": true; }; "thySearchKey": { "alias": "thySearchKey"; "required": false; "isSignal": true; }; "thyDisabled": { "alias": "thyDisabled"; "required": false; "isSignal": true; }; }, { "selectionChange": "selectionChange"; }, ["suffixTemplate"], ["*"], true, never>;
 }
 
 /**

package/shared/option/styles/select-dropdown.scss

@@ -10,6 +10,11 @@ $optionsSize: 'sm', 'default', 'md', 'lg';
         overflow-y: hidden;
         .cdk-virtual-scroll-content-wrapper {
             width: 100%;
+
+            .thy-option-group-render {
+                height: 40px;
+                padding: 5px 0;
+            }
         }
     }
 
@@ -28,8 +33,6 @@ $optionsSize: 'sm', 'default', 'md', 'lg';
 
     .thy-option-group-render {
         flex-direction: column;
-        height: 40px;
-        padding: 5px 0;
 
         .group-name {
             width: 100%;

package/styles/index.scss

@@ -88,3 +88,4 @@
 @forward '../checkbox/styles/checkbox.scss';
 @forward '../color-picker/styles/color-picker.scss';
 @forward '../comment/styles/comment.scss';
+@forward '../native-table/styles/native-table.scss';