@ng-nest/ui 13.0.7 → 13.1.0

package/resizable/resizable.directive.d.ts

@@ -0,0 +1,57 @@
+import { ElementRef, OnDestroy, OnInit, Renderer2 } from '@angular/core';
+import { Subscription } from 'rxjs';
+import { XResizablePosition, XResizableProperty } from './resizable.property';
+import * as i0 from "@angular/core";
+export declare class XResizableDirective extends XResizableProperty implements OnInit, OnDestroy {
+    private renderer;
+    private elementRef;
+    document: Document;
+    ele: HTMLElement;
+    cornerPositions: XResizablePosition[];
+    allPositions: XResizablePosition[];
+    positions: XResizablePosition[];
+    direction?: XResizablePosition | null;
+    newBox: {
+        clientWidth: number;
+        clientHeight: number;
+        offsetLeft: number;
+        offsetTop: number;
+    };
+    mouseUpSub?: Subscription;
+    minWidth?: number;
+    maxWidth?: number;
+    minHeight?: number;
+    maxHeight?: number;
+    positionNodes: {
+        [key: string]: HTMLElement;
+    };
+    activatingNodes: HTMLElement[];
+    constructor(renderer: Renderer2, elementRef: ElementRef, doc: any);
+    ngOnInit(): void;
+    ngAfterViewInit(): void;
+    ngOnDestroy(): void;
+    mousedown(event: MouseEvent | TouchEvent): void;
+    setMapClass(): void;
+    setPosition(): void;
+    setActivatingNodes(direction: XResizablePosition): void;
+    createNode(...classes: XResizablePosition[]): void;
+    initResize(event: MouseEvent | TouchEvent, direction: XResizablePosition): void;
+    mouseup(event: MouseEvent | TouchEvent): void;
+    endResize(event: MouseEvent | TouchEvent): void;
+    move(event: MouseEvent | TouchEvent, width: number, height: number, top: number, left: number, screenX: number, screenY: number): void;
+    resizeWidth(box: {
+        clientWidth: number;
+        clientHeight: number;
+        offsetLeft: number;
+        offsetTop: number;
+    }): void;
+    resizeHeight(box: {
+        clientWidth: number;
+        clientHeight: number;
+        offsetLeft: number;
+        offsetTop: number;
+    }): void;
+    private destroySubscription;
+    static ɵfac: i0.ɵɵFactoryDeclaration<XResizableDirective, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<XResizableDirective, "[xResizable]", never, {}, {}, never>;
+}

package/resizable/resizable.module.d.ts

@@ -0,0 +1,8 @@
+import * as i0 from "@angular/core";
+import * as i1 from "./resizable.directive";
+import * as i2 from "@angular/common";
+export declare class XResizableModule {
+    static ɵfac: i0.ɵɵFactoryDeclaration<XResizableModule, never>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<XResizableModule, [typeof i1.XResizableDirective], [typeof i2.CommonModule], [typeof i1.XResizableDirective]>;
+    static ɵinj: i0.ɵɵInjectorDeclaration<XResizableModule>;
+}

package/resizable/resizable.property.d.ts

@@ -0,0 +1,92 @@
+import { EventEmitter } from '@angular/core';
+import { XBoolean, XCorner, XNumber, XPosition, XProperty } from '@ng-nest/ui/core';
+import * as i0 from "@angular/core";
+/**
+ * Resizable 指令名称
+ * @selector x-resizable
+ * @decorator Directive
+ */
+export declare const XResizablePrefix = "x-resizable";
+/**
+ * Resizable Property
+ */
+export declare class XResizableProperty extends XProperty {
+    /**
+     * @zh_CN 启用调整尺寸大小
+     * @en_US Enable adjustment size size
+     */
+    xResizable: XBoolean;
+    /**
+     * @zh_CN 调整方位
+     * @en_US Adjust the orientation
+     */
+    position?: XResizablePosition | XResizablePosition[];
+    /**
+     * @zh_CN 手动调整，通过回调的数值自行调整
+     * @en_US Manual adjustment, adjustment of the number of callbacks
+     */
+    ghost: XBoolean;
+    /**
+     * @zh_CN 偏移屏幕左边
+     * @en_US Distance on the left side
+     */
+    offsetLeft: XNumber;
+    /**
+     * @zh_CN 偏移屏幕顶部
+     * @en_US Distance to the top of the screen
+     */
+    offsetTop: XNumber;
+    /**
+     * @zh_CN 开始调整
+     * @en_US Adjust the orientation
+     */
+    resizeBegin: EventEmitter<any>;
+    /**
+     * @zh_CN 调整中
+     * @en_US Adjust the orientation
+     */
+    resizing: EventEmitter<XResizableEvent>;
+    /**
+     * @zh_CN 调整结束
+     * @en_US Adjust the orientation
+     */
+    resizeEnd: EventEmitter<XResizableEvent>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<XResizableProperty, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<XResizableProperty, "[xResizable]", never, { "xResizable": "xResizable"; "position": "position"; "ghost": "ghost"; "offsetLeft": "offsetLeft"; "offsetTop": "offsetTop"; }, { "resizeBegin": "resizeBegin"; "resizing": "resizing"; "resizeEnd": "resizeEnd"; }, never>;
+}
+/**
+ * @zh_CN 调整方位
+ * @en_US Adjust the orientation
+ */
+export declare type XResizablePosition = XPosition | XCorner | 'all';
+/**
+ * @zh_CN 调整尺寸的事件对象
+ * @en_US Adjust the size of event objects
+ */
+export interface XResizableEvent {
+    /**
+     * @zh_CN 事件
+     * @en_US Event
+     */
+    event?: MouseEvent | Touch;
+    /**
+     * @zh_CN 宽度
+     * @en_US Width
+     */
+    clientWidth?: number;
+    /**
+     * @zh_CN 高度
+     * @en_US height
+     */
+    clientHeight?: number;
+    /**
+     * @zh_CN 距离屏幕左边
+     * @en_US Distance on the left side
+     */
+    offsetLeft?: number;
+    /**
+     * @zh_CN 距离屏幕顶部
+     * @en_US Distance to the top of the screen
+     */
+    offsetTop?: number;
+}

package/slider/slider.property.d.ts

@@ -74,6 +74,11 @@ export interface XSliderNode extends XIdentityProperty {
      * @en_US Title, support template
      */
     label?: XTemplate;
+    /**
+     * @zh_CN 禁用节点
+     * @en_US Node disabled
+     */
+    disabled?: boolean;
 }
 /**
  * @zh_CN 布局方式

package/style/core/cdk.scss

@@ -66,4 +66,7 @@
   position: fixed;
   width: 100%;
   overflow-y: scroll;
+  &::-webkit-scrollbar {
+    width: 0;
+  }
 }

package/style/core/index.css

@@ -77,6 +77,9 @@
   width: 100%;
   overflow-y: scroll;
 }
+.cdk-global-scrollblock::-webkit-scrollbar {
+  width: 0;
+}
 
 :root {
   --x-black: #000000;
@@ -210,6 +213,10 @@ li {
   list-style: none;
 }
 
+.x-portal-resizable {
+  display: inline-block;
+}
+
 .x-ripple {
   overflow: hidden;
   position: relative;
@@ -248,4 +255,182 @@ li {
   background-color: rgba(0, 0, 0, 0.1);
 }
 
+.x-resizable {
+  position: relative;
+}
+.x-resizable-resizing {
+  user-select: none;
+}
+.x-resizable-bottom {
+  position: absolute;
+  cursor: s-resize;
+  width: 100%;
+  height: 0.625rem;
+  left: 0;
+  bottom: -0.375rem;
+  padding: 0.25rem 0;
+}
+.x-resizable-bottom::before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  display: block;
+  border-bottom: 0.0625rem dashed transparent;
+  pointer-events: none;
+}
+.x-resizable-bottom:hover::before {
+  transition: border-color var(--x-animation-duration-base) ease-in var(--x-animation-duration-base);
+  border-color: var(--x-primary);
+}
+.x-resizable-top {
+  position: absolute;
+  cursor: n-resize;
+  width: 100%;
+  height: 0.625rem;
+  left: 0;
+  top: -0.375rem;
+  padding: 0.25rem 0;
+}
+.x-resizable-top::before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  display: block;
+  border-top: 0.0625rem dashed transparent;
+  pointer-events: none;
+}
+.x-resizable-top:hover::before {
+  transition: border-color var(--x-animation-duration-base) ease-in var(--x-animation-duration-base);
+  border-color: var(--x-primary);
+}
+.x-resizable-left {
+  position: absolute;
+  cursor: w-resize;
+  width: 0.625rem;
+  height: 100%;
+  left: -0.375rem;
+  top: 0;
+  padding: 0 0.25rem;
+}
+.x-resizable-left::before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  display: block;
+  border-left: 0.0625rem dashed transparent;
+  pointer-events: none;
+}
+.x-resizable-left:hover::before {
+  transition: border-color var(--x-animation-duration-base) ease-in var(--x-animation-duration-base);
+  border-color: var(--x-primary);
+}
+.x-resizable-right {
+  position: absolute;
+  cursor: e-resize;
+  width: 0.625rem;
+  height: 100%;
+  right: -0.375rem;
+  top: 0;
+  padding: 0 0.25rem;
+}
+.x-resizable-right::before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  display: block;
+  border-right: 0.0625rem dashed transparent;
+  pointer-events: none;
+}
+.x-resizable-right:hover::before {
+  transition: border-color var(--x-animation-duration-base) ease-in var(--x-animation-duration-base);
+  border-color: var(--x-primary);
+}
+.x-resizable-top-start {
+  position: absolute;
+  cursor: nw-resize;
+  width: 0.625rem;
+  height: 0.625rem;
+  left: -0.375rem;
+  top: -0.375rem;
+  padding: 0 0;
+}
+.x-resizable-top-start::before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  display: block;
+  border: 0 dashed transparent;
+  pointer-events: none;
+}
+.x-resizable-top-start:hover::before {
+  transition: border-color var(--x-animation-duration-base) ease-in var(--x-animation-duration-base);
+  border-color: var(--x-primary);
+}
+.x-resizable-top-end {
+  position: absolute;
+  cursor: ne-resize;
+  width: 0.625rem;
+  height: 0.625rem;
+  right: -0.375rem;
+  top: -0.375rem;
+  padding: 0 0;
+}
+.x-resizable-top-end::before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  display: block;
+  border: 0 dashed transparent;
+  pointer-events: none;
+}
+.x-resizable-top-end:hover::before {
+  transition: border-color var(--x-animation-duration-base) ease-in var(--x-animation-duration-base);
+  border-color: var(--x-primary);
+}
+.x-resizable-bottom-start {
+  position: absolute;
+  cursor: sw-resize;
+  width: 0.625rem;
+  height: 0.625rem;
+  left: -0.375rem;
+  bottom: -0.375rem;
+  padding: 0 0;
+}
+.x-resizable-bottom-start::before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  display: block;
+  border: 0 dashed transparent;
+  pointer-events: none;
+}
+.x-resizable-bottom-start:hover::before {
+  transition: border-color var(--x-animation-duration-base) ease-in var(--x-animation-duration-base);
+  border-color: var(--x-primary);
+}
+.x-resizable-bottom-end {
+  position: absolute;
+  cursor: se-resize;
+  width: 0.625rem;
+  height: 0.625rem;
+  right: -0.375rem;
+  bottom: -0.375rem;
+  padding: 0 0;
+}
+.x-resizable-bottom-end::before {
+  content: "";
+  width: 100%;
+  height: 100%;
+  display: block;
+  border: 0 dashed transparent;
+  pointer-events: none;
+}
+.x-resizable-bottom-end:hover::before {
+  transition: border-color var(--x-animation-duration-base) ease-in var(--x-animation-duration-base);
+  border-color: var(--x-primary);
+}
+.x-resizable-activating::before {
+  border-color: var(--x-primary);
+}
+
 /*# sourceMappingURL=index.css.map */

package/style/core/index.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../../../../lib/ng-nest/ui/style/core/cdk.scss","../../../../../lib/ng-nest/ui/style/core/var.scss","../../../../../lib/ng-nest/ui/style/mixins/colors.scss","../../../../../lib/ng-nest/ui/style/mixins/hidden.scss","../../../../../lib/ng-nest/ui/style/core/base.scss","../../../../../lib/ng-nest/ui/style/params/primary.scss","../../../../../lib/ng-nest/ui/style/directives/ripple/index.scss","../../../../../lib/ng-nest/ui/style/directives/ripple/mixin.scss"],"names":[],"mappings":"AAAA;AAAA;EAEE;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;IACE;;;AAGJ;EACE;;;AAEF;AAAA;EAEE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AChEF;ECEI;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;;;ACDE;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;AADF;EADF;IAEI;;;;ACLR;AAAA;AAAA;EAGE;;;AAGF;AAAA;AAAA;EAGE,aCwJgB;EDvJhB,WCqJc;EDpJd,OCuFS;EDtFT,aC2JgB;;;ADxJlB;AAAA;AAAA;EAGE,aCgJqB;;;AD7IvB;AAAA;EAEE;EACA;EACA;;;AEtBF;ECIE;EACA;;AACA;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;AAaA;EACE,kBF8GgB;;AE/GlB;EACE,kBFnBY;;AEkBd;EACE;;AADF;EACE,kBFmBY;;AEpBd;EACE,kBFsCW;;AEvCb;EACE,kBFyDS;;AE1DX;EACE,kBANyB","file":"index.css"}
+{"version":3,"sourceRoot":"","sources":["../../../../../lib/ng-nest/ui/style/core/cdk.scss","../../../../../lib/ng-nest/ui/style/core/var.scss","../../../../../lib/ng-nest/ui/style/mixins/colors.scss","../../../../../lib/ng-nest/ui/style/mixins/hidden.scss","../../../../../lib/ng-nest/ui/style/core/base.scss","../../../../../lib/ng-nest/ui/style/params/primary.scss","../../../../../lib/ng-nest/ui/style/core/portal.scss","../../../../../lib/ng-nest/ui/style/directives/ripple/index.scss","../../../../../lib/ng-nest/ui/style/directives/ripple/mixin.scss","../../../../../lib/ng-nest/ui/style/directives/resizable/index.scss","../../../../../lib/ng-nest/ui/style/directives/resizable/mixin.scss"],"names":[],"mappings":"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","file":"index.css"}

package/style/core/index.scss

@@ -2,4 +2,5 @@
 @import './cdk';
 @import './var';
 @import './base';
+@import './portal';
 @import '../directives/index';

package/style/core/portal.scss

@@ -0,0 +1,5 @@
+.x-portal {
+  &-resizable {
+    display: inline-block;
+  }
+}

package/style/directives/index.scss

@@ -1,2 +1,3 @@
 // Directives
 @import './ripple/index';
+@import './resizable/index';

package/style/directives/resizable/index.scss

@@ -0,0 +1,6 @@
+// Resizable
+@import './mixin';
+
+.#{$--x-resizable-prefix} {
+  @include resizable();
+}

package/style/directives/resizable/mixin.scss

@@ -0,0 +1,53 @@
+// Resizable
+
+@import '../../themes/default';
+@import '../../mixins/index';
+@import './param';
+
+@mixin resizable {
+  position: relative;
+  &-resizing {
+    user-select: none;
+  }
+  @include resizable-position('bottom', s-resize, 100%, 0.625rem, null, null, -0.375rem, 0, 0.25rem 0, border-bottom, 0.0625rem);
+  @include resizable-position('top', n-resize, 100%, 0.625rem, -0.375rem, null, null, 0, 0.25rem 0, border-top, 0.0625rem);
+  @include resizable-position('left', w-resize, 0.625rem, 100%, 0, null, null, -0.375rem, 0 0.25rem, border-left, 0.0625rem);
+  @include resizable-position('right', e-resize, 0.625rem, 100%, 0, -0.375rem, null, null, 0 0.25rem, border-right, 0.0625rem);
+  @include resizable-position('top-start', nw-resize, 0.625rem, 0.625rem, -0.375rem, null, null, -0.375rem, 0 0, border, 0);
+  @include resizable-position('top-end', ne-resize, 0.625rem, 0.625rem, -0.375rem, -0.375rem, null, null, 0 0, border, 0);
+  @include resizable-position('bottom-start', sw-resize, 0.625rem, 0.625rem, null, null, -0.375rem, -0.375rem, 0 0, border, 0);
+  @include resizable-position('bottom-end', se-resize, 0.625rem, 0.625rem, null, -0.375rem, -0.375rem, null, 0 0, border, 0);
+  &-activating {
+    &::before {
+      border-color: $--x-primary;
+    }
+  }
+}
+
+@mixin resizable-position($type, $cursor, $width, $height, $top, $right, $bottom, $left, $padding, $border, $border-width) {
+  &-#{$type} {
+    position: absolute;
+    cursor: $cursor;
+    width: $width;
+    height: $height;
+    left: $left;
+    right: $right;
+    bottom: $bottom;
+    top: $top;
+    padding: $padding;
+    &::before {
+      content: '';
+      width: 100%;
+      height: 100%;
+      display: block;
+      #{$border}: $border-width dashed transparent;
+      pointer-events: none;
+    }
+    &:hover {
+      &::before {
+        transition: border-color $--x-animation-duration-base ease-in $--x-animation-duration-base;
+        border-color: $--x-primary;
+      }
+    }
+  }
+}

package/style/directives/resizable/param.scss

@@ -0,0 +1,3 @@
+// Resizable style paramters
+
+$--x-resizable-prefix: $--x-prefix + '-resizable';

package/style/directives/ripple/mixin.scss

@@ -19,16 +19,16 @@
     transition: opacity, transform 0ms cubic-bezier(0, 0, 0.2, 1);
     transform: scale(0);
   }
-  @include button-type('initial', $--x-background-a500);
-  @include button-type('primary', $--x-primary-200);
-  @include button-type('success', $--x-success-200);
-  @include button-type('warning', $--x-warning-200);
-  @include button-type('danger', $--x-danger-200);
-  @include button-type('info', $--x-info-200);
-  @include button-type('text', rgba(0, 0, 0, 0.1));
+  @include ripple-type('initial', $--x-background-a500);
+  @include ripple-type('primary', $--x-primary-200);
+  @include ripple-type('success', $--x-success-200);
+  @include ripple-type('warning', $--x-warning-200);
+  @include ripple-type('danger', $--x-danger-200);
+  @include ripple-type('info', $--x-info-200);
+  @include ripple-type('text', rgba(0, 0, 0, 0.1));
 }
 
-@mixin button-type($type, $background) {
+@mixin ripple-type($type, $background) {
   &-#{$type} {
     .#{$--x-ripple-prefix}-element {
       background-color: $background;

package/table/examples/en_US/default/rowclass/README.md

@@ -0,0 +1,6 @@
+---
+order: 10
+label: '行样式'
+---
+
+- 使用 `rowClass` 属性定义行样式，样式名需要写在 `::ng-deep` 中。

package/table/examples/zh_CN/default/rowclass/README.md

@@ -0,0 +1,6 @@
+---
+order: 10
+label: '行样式'
+---
+
+- 使用 `rowClass` 属性定义行样式，样式名需要写在 `::ng-deep` 中。

package/table/table.component.d.ts

@@ -41,6 +41,7 @@ export declare class XTableComponent extends XTableProperty implements OnInit, O
     ngOnChanges(simples: SimpleChanges): void;
     ngOnDestroy(): void;
     setClassMap(): void;
+    setPaginationPosition(): void;
     getSticky(column: XTableColumn | XTableCell): boolean;
     getIndex(index: number): number;
     setData(): void;

package/table/table.property.d.ts

@@ -62,6 +62,13 @@ export declare class XTableProperty extends XPaginationProperty implements XTabl
      * @en_US Column content custom template
      */
     bodyColumnTpl: XTableTemplate;
+    /**
+     * @zh_CN 行条件样式
+     * @en_US Row condition class
+     */
+    rowClass?: (row: XTableRow, index: number) => {
+        [className: string]: boolean;
+    };
     /**
      * @zh_CN 排序点击的事件
      * @en_US Sort click events
@@ -142,8 +149,18 @@ export declare class XTableProperty extends XPaginationProperty implements XTabl
      * @en_US Size
      */
     rowSize?: XSize;
+    /**
+     * @zh_CN 分页器位置
+     * @en_US Pagination position
+     */
+    paginationPosition: XPaginationPosition;
+    /**
+     * @zh_CN 显示分页器
+     * @en_US Pagination position
+     */
+    showPagination?: XBoolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<XTableProperty, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<XTableProperty, "ng-component", never, { "data": "data"; "columns": "columns"; "rowHeight": "rowHeight"; "loading": "loading"; "bordered": "bordered"; "showHeader": "showHeader"; "activatedRow": "activatedRow"; "headColumnTpl": "headColumnTpl"; "bodyColumnTpl": "bodyColumnTpl"; "allowSelectRow": "allowSelectRow"; "virtualScroll": "virtualScroll"; "bodyHeight": "bodyHeight"; "itemSize": "itemSize"; "minBufferPx": "minBufferPx"; "maxBufferPx": "maxBufferPx"; "adaptionHeight": "adaptionHeight"; "docPercent": "docPercent"; "checkedRow": "checkedRow"; "manual": "manual"; "scroll": "scroll"; "cellConfig": "cellConfig"; "rowSize": "rowSize"; }, { "activatedRowChange": "activatedRowChange"; "sortChange": "sortChange"; "manualChange": "manualChange"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<XTableProperty, "ng-component", never, { "data": "data"; "columns": "columns"; "rowHeight": "rowHeight"; "loading": "loading"; "bordered": "bordered"; "showHeader": "showHeader"; "activatedRow": "activatedRow"; "headColumnTpl": "headColumnTpl"; "bodyColumnTpl": "bodyColumnTpl"; "rowClass": "rowClass"; "allowSelectRow": "allowSelectRow"; "virtualScroll": "virtualScroll"; "bodyHeight": "bodyHeight"; "itemSize": "itemSize"; "minBufferPx": "minBufferPx"; "maxBufferPx": "maxBufferPx"; "adaptionHeight": "adaptionHeight"; "docPercent": "docPercent"; "checkedRow": "checkedRow"; "manual": "manual"; "scroll": "scroll"; "cellConfig": "cellConfig"; "rowSize": "rowSize"; "paginationPosition": "paginationPosition"; "showPagination": "showPagination"; }, { "activatedRowChange": "activatedRowChange"; "sortChange": "sortChange"; "manualChange": "manualChange"; }, never, never>;
 }
 /**
  * Table Option
@@ -185,6 +202,13 @@ export interface XTableOption extends XPaginationOption {
      * @en_US Column content custom template
      */
     bodyColumnTpl?: XTableTemplate;
+    /**
+     * @zh_CN 行条件样式
+     * @en_US Row condition class
+     */
+    rowClass?: (row: XTableRow, index: number) => {
+        [className: string]: boolean;
+    };
     /**
      * @zh_CN 开启虚拟滚动
      * @en_US Turn on virtual scrolling
@@ -381,6 +405,11 @@ export interface XTableCell {
  * @en_US Column type
  */
 export declare type XColumnType = 'label' | 'index' | 'checkbox';
+/**
+ * @zh_CN 分页器位置
+ * @en_US Paging position
+ */
+export declare type XPaginationPosition = 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
 /**
  * @zh_CN 模板
  * @en_US Template
@@ -524,8 +553,15 @@ export declare class XTableBodyProperty extends XProperty {
      * @en_US Cell config rules
      */
     cellConfig?: XTableCellConfigRule;
+    /**
+     * @zh_CN 行条件样式
+     * @en_US Row condition class
+     */
+    rowClass?: (row: XTableRow, index: number) => {
+        [className: string]: boolean;
+    };
     static ɵfac: i0.ɵɵFactoryDeclaration<XTableBodyProperty, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<XTableBodyProperty, "ng-component", never, { "data": "data"; "columns": "columns"; "columnTpl": "columnTpl"; "activatedRow": "activatedRow"; "rowHeight": "rowHeight"; "bodyHeight": "bodyHeight"; "allowSelectRow": "allowSelectRow"; "virtualScroll": "virtualScroll"; "itemSize": "itemSize"; "minBufferPx": "minBufferPx"; "maxBufferPx": "maxBufferPx"; "adaptionHeight": "adaptionHeight"; "docPercent": "docPercent"; "scroll": "scroll"; "cellConfig": "cellConfig"; }, { "activatedRowChange": "activatedRowChange"; }, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<XTableBodyProperty, "ng-component", never, { "data": "data"; "columns": "columns"; "columnTpl": "columnTpl"; "activatedRow": "activatedRow"; "rowHeight": "rowHeight"; "bodyHeight": "bodyHeight"; "allowSelectRow": "allowSelectRow"; "virtualScroll": "virtualScroll"; "itemSize": "itemSize"; "minBufferPx": "minBufferPx"; "maxBufferPx": "maxBufferPx"; "adaptionHeight": "adaptionHeight"; "docPercent": "docPercent"; "scroll": "scroll"; "cellConfig": "cellConfig"; "rowClass": "rowClass"; }, { "activatedRowChange": "activatedRowChange"; }, never, never>;
 }
 /**
  * Table Foot

package/tabs/tabs.property.d.ts

@@ -74,6 +74,16 @@ export declare class XTabsProperty extends XProperty {
  * @en_US Tabs data object
  */
 export interface XTabsNode extends XIdentityProperty {
+    /**
+     * @zh_CN 禁用节点
+     * @en_US Node disabled
+     */
+    disabled?: boolean;
+    /**
+     * @zh_CN 自定义属性
+     * @en_US Custom properties
+     */
+    [property: string]: any;
 }
 /**
  * @zh_CN 激活的tab
@@ -108,6 +118,11 @@ export declare class XTabProperty {
      * @en_US Label name, support custom template
      */
     label?: XTemplate;
+    /**
+     * @zh_CN 禁用
+     * @en_US Disabeld
+     */
+    disabled?: XBoolean;
     static ɵfac: i0.ɵɵFactoryDeclaration<XTabProperty, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<XTabProperty, "ng-component", never, { "label": "label"; }, {}, never, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<XTabProperty, "ng-component", never, { "label": "label"; "disabled": "disabled"; }, {}, never, never>;
 }

package/tag/examples/en_US/default/checked/README.md

@@ -0,0 +1,6 @@
+---
+order: 6
+label: 'Checked'
+---
+
+Use the `checked` property to set the tab to choose.

package/tag/examples/en_US/default/color/README.md

@@ -0,0 +1,6 @@
+---
+order: 5
+label: 'Custom'
+---
+
+Use the `style` property from the definition style.

package/tag/examples/zh_CN/default/checked/README.md

@@ -0,0 +1,6 @@
+---
+order: 6
+label: '选择'
+---
+
+使用 `checked` 属性来设置标签可选择。

package/tag/examples/zh_CN/default/color/README.md

@@ -0,0 +1,6 @@
+---
+order: 5
+label: '自定义样式'
+---
+
+使用 `style` 属性来自定义样式。