@ng-nest/ui 14.0.6 → 14.0.7

package/image/image.property.d.ts

@@ -0,0 +1,96 @@
+import { XProperty } from '@ng-nest/ui/core';
+import * as i0 from "@angular/core";
+/**
+ * Image
+ * @selector x-image
+ * @decorator component
+ */
+export declare const XImagePrefix = "x-image";
+/**
+ * Image Property
+ */
+export declare class XImageProperty extends XProperty {
+    /**
+     * @zh_CN 图片显示地址
+     * @en_US Picture display address
+     */
+    src: string;
+    /**
+     * @zh_CN 图片宽度
+     * @en_US Picture width
+     */
+    width: string;
+    /**
+     * @zh_CN 图片高度
+     * @en_US Picture height
+     */
+    height: string;
+    /**
+     * @zh_CN 图像描述
+     * @en_US Image description
+     */
+    alt: string;
+    /**
+     * @zh_CN 加载失败显示的地址
+     * @en_US Load fault tolerance address
+     */
+    fallback: string;
+    /**
+     * @zh_CN 预览文字
+     * @en_US Preview text
+     * @default '预览'
+     */
+    previewText?: string;
+    /**
+     * @zh_CN 渐进加载显示的图片
+     * @en_US Gradually loaded the display of the display
+     */
+    placeholder?: string;
+    static ɵfac: i0.ɵɵFactoryDeclaration<XImageProperty, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<XImageProperty, "ng-component", never, { "src": "src"; "width": "width"; "height": "height"; "alt": "alt"; "fallback": "fallback"; "previewText": "previewText"; "placeholder": "placeholder"; }, {}, never, never, false>;
+}
+/**
+ * @zh_CN 图片节点数据
+ * @en_US Image node data
+ */
+export interface XImageNode {
+    /**
+     * @zh_CN 图片显示地址
+     * @en_US Picture display address
+     */
+    src?: string;
+    /**
+     * @zh_CN 图像描述
+     * @en_US Image description
+     */
+    alt?: string;
+    /**
+     * @zh_CN 加载失败显示的地址
+     * @en_US Load fault tolerance address
+     */
+    fallback?: string;
+    /**
+     * @zh_CN 当前激活的图片
+     * @en_US Current activated pictures
+     */
+    activated?: boolean;
+}
+/**
+ * Image Preview
+ * @selector x-image-preview
+ * @decorator component
+ */
+export declare const XImagePreviewPrefix = "x-image-preview";
+/**
+ * Image Preview Property
+ */
+export declare class XImagePreviewProperty extends XProperty {
+    static ɵfac: i0.ɵɵFactoryDeclaration<XImagePreviewProperty, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<XImagePreviewProperty, "ng-component", never, {}, {}, never, never, false>;
+}
+/**
+ * Image Group
+ * @selector x-image-group
+ * @decorator component
+ */
+export declare const XImageGroupPrefix = "x-image-group";

package/image/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Generated bundle index. Do not edit.
+ */
+/// <amd-module name="@ng-nest/ui/image" />
+export * from './public-api';

package/image/public-api.d.ts

@@ -0,0 +1,5 @@
+export * from './image.component';
+export * from './image-preview.component';
+export * from './image-group.component';
+export * from './image.module';
+export * from './image.property';

package/index.d.ts

@@ -27,6 +27,7 @@ export * from '@ng-nest/ui/calendar';
 export * from '@ng-nest/ui/comment';
 export * from '@ng-nest/ui/description';
 export * from '@ng-nest/ui/empty';
+export * from '@ng-nest/ui/image';
 export * from '@ng-nest/ui/outlet';
 export * from '@ng-nest/ui/pagination';
 export * from '@ng-nest/ui/progress';

package/list/examples/en_US/default/scroll/README.md

@@ -0,0 +1,8 @@
+---
+order: 4
+label: 'Virtual Scroll'
+---
+
+- Use the `virtualScroll` to enable the function of virtual rolling. The function of dragging nodes up and down will fail.
+- Use the `scrollHeight` to set the height of the virtual rolling area.
+- Use the `heightAdaption` to from the high change of the specified object from the specified object.

package/list/examples/zh_CN/default/scroll/README.md

@@ -0,0 +1,8 @@
+---
+order: 4
+label: '虚拟滚动'
+---
+
+- 使用 `virtualScroll` 这个来启用虚拟滚动的功能，上下拖动节点的功能将失效。
+- 使用 `scrollHeight` 这个来设置虚拟滚动区域的高度。
+- 使用 `heightAdaption` 这个来自适应滚动区域，跟随指定对象的高度变化。

package/list/list.component.d.ts

@@ -5,6 +5,7 @@ import { CdkDragDrop } from '@angular/cdk/drag-drop';
 import { XListOptionComponent } from './list-option.component';
 import { ActiveDescendantKeyManager } from '@angular/cdk/a11y';
 import { XI18nList, XI18nService } from '@ng-nest/ui/i18n';
+import { CdkVirtualScrollViewport } from '@angular/cdk/scrolling';
 import * as i0 from "@angular/core";
 export declare class XListComponent extends XListProperty implements OnInit, OnChanges {
     renderer: Renderer2;
@@ -14,6 +15,11 @@ export declare class XListComponent extends XListProperty implements OnInit, OnC
     private i18n;
     nodes: XListNode[];
     selectedNodes: XListNode[];
+    headerRef: ElementRef;
+    footerRef: ElementRef;
+    selectAllRef: ElementRef;
+    loadMoreRef: ElementRef;
+    virtualBody: CdkVirtualScrollViewport;
     listItems: ElementRef;
     options: QueryList<XListOptionComponent>;
     keyManager: ActiveDescendantKeyManager<XListOptionComponent>;
@@ -22,21 +28,27 @@ export declare class XListComponent extends XListProperty implements OnInit, OnC
     loadMoreIndex: number;
     icon: string;
     iconSpin: boolean;
+    private _resizeObserver;
     role: string;
     tabindex: number;
     keydown($event: KeyboardEvent): void;
+    itemSizeMap: {
+        [key: string]: number;
+    };
+    get getItemSize(): number;
     get isEmpty(): boolean;
     get getSelectAllText(): string | undefined;
     get getLoadMoreText(): string | undefined;
     get getLoadingMoreText(): string | undefined;
+    get getVirtualScrollHeight(): number;
     writeValue(value: any): void;
     private _unSubject;
     constructor(renderer: Renderer2, cdr: ChangeDetectorRef, elementRef: ElementRef, configService: XConfigService, i18n: XI18nService);
     ngOnInit(): void;
     ngOnChanges(changes: SimpleChanges): void;
     ngAfterViewInit(): void;
-    ngAfterViewChecked(): void;
     ngOnDestroy(): void;
+    private setVirtualScrollHeight;
     private setData;
     private initKeyManager;
     setScorllTop(_num: number): void;

package/list/list.module.d.ts

@@ -11,8 +11,9 @@ import * as i9 from "@ng-nest/ui/empty";
 import * as i10 from "@ng-nest/ui/base-form";
 import * as i11 from "@ng-nest/ui/i18n";
 import * as i12 from "@ng-nest/ui/outlet";
+import * as i13 from "@angular/cdk/scrolling";
 export declare class XListModule {
     static ɵfac: i0.ɵɵFactoryDeclaration<XListModule, never>;
-    static ɵmod: i0.ɵɵNgModuleDeclaration<XListModule, [typeof i1.XListComponent, typeof i2.XListOptionComponent, typeof i3.XListProperty, typeof i3.XListOptionProperty], [typeof i4.CommonModule, typeof i5.FormsModule, typeof i5.ReactiveFormsModule, typeof i6.DragDropModule, typeof i7.A11yModule, typeof i8.XIconModule, typeof i9.XEmptyModule, typeof i10.XBaseFormModule, typeof i11.XI18nModule, typeof i12.XOutletModule], [typeof i1.XListComponent, typeof i2.XListOptionComponent]>;
+    static ɵmod: i0.ɵɵNgModuleDeclaration<XListModule, [typeof i1.XListComponent, typeof i2.XListOptionComponent, typeof i3.XListProperty, typeof i3.XListOptionProperty], [typeof i4.CommonModule, typeof i5.FormsModule, typeof i5.ReactiveFormsModule, typeof i6.DragDropModule, typeof i7.A11yModule, typeof i8.XIconModule, typeof i9.XEmptyModule, typeof i10.XBaseFormModule, typeof i11.XI18nModule, typeof i12.XOutletModule, typeof i13.ScrollingModule], [typeof i1.XListComponent, typeof i2.XListOptionComponent]>;
     static ɵinj: i0.ɵɵInjectorDeclaration<XListModule>;
 }

package/list/list.property.d.ts

@@ -1,5 +1,5 @@
 import { XData, XParentIdentityProperty, XNumber, XBoolean, XTemplate, XSize } from '@ng-nest/ui/core';
-import { EventEmitter, TemplateRef } from '@angular/core';
+import { EventEmitter, TemplateRef, ElementRef } from '@angular/core';
 import { XControlValueAccessor } from '@ng-nest/ui/base-form';
 import * as i0 from "@angular/core";
 /**
@@ -90,6 +90,31 @@ export declare class XListProperty extends XControlValueAccessor<any> {
      * @default '正在加载中'
      */
     loadingMoreText?: string;
+    /**
+     * @zh_CN 开启虚拟滚动，不支持节点拖动功能
+     * @en_US Turn on virtual scrolling
+     */
+    virtualScroll: XBoolean;
+    /**
+     * @zh_CN 虚拟滚动高度, 实际会去掉头尾、全选、更多的高度
+     * @en_US The virtual rolling height will actually remove the head and end, the full selection, more height
+     */
+    scrollHeight: XNumber;
+    /**
+     * @zh_CN 虚拟滚动高度自适应指定元素
+     * @en_US virtual rolling height follows the specified object
+     */
+    heightAdaption: ElementRef<HTMLElement> | HTMLElement;
+    /**
+     * @zh_CN 超出可视窗口缓冲区的最小值，对应 cdk scroll 中的参数
+     * @en_US Exceed the minimum value of the visible window buffer, corresponding to the parameters in cdk scroll
+     */
+    minBufferPx: number;
+    /**
+     * @zh_CN 渲染新数据缓冲区的像素，对应 cdk scroll 中的参数
+     * @en_US Render the pixels of the new data buffer, corresponding to the parameters in cdk scroll
+     */
+    maxBufferPx: number;
     /**
      * @zh_CN Full event
      * @en_US 全选事件
@@ -110,6 +135,11 @@ export declare class XListProperty extends XControlValueAccessor<any> {
      * @en_US Node click event
      */
     nodeClick: EventEmitter<XListNode>;
+    /**
+     * @zh_CN 拖动结束事件
+     * @en_US Drag the end
+     */
+    dropListDropped: EventEmitter<XListDragDrop>;
     /**
      * @zh_CN Tab out 事件
      * @en_US Tab Out event
@@ -121,7 +151,7 @@ export declare class XListProperty extends XControlValueAccessor<any> {
      */
     keyManagerChange: EventEmitter<number>;
     static ɵfac: i0.ɵɵFactoryDeclaration<XListProperty, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<XListProperty, "ng-component", never, { "data": "data"; "multiple": "multiple"; "selectAll": "selectAll"; "selectAllText": "selectAllText"; "checked": "checked"; "drag": "drag"; "objectArray": "objectArray"; "nodeTpl": "nodeTpl"; "header": "header"; "footer": "footer"; "scrollElement": "scrollElement"; "size": "size"; "loadMore": "loadMore"; "loadMoreText": "loadMoreText"; "loadingMoreText": "loadingMoreText"; }, { "onSelectAll": "onSelectAll"; "nodeMouseenter": "nodeMouseenter"; "nodeMouseleave": "nodeMouseleave"; "nodeClick": "nodeClick"; "keyManagerTabOut": "keyManagerTabOut"; "keyManagerChange": "keyManagerChange"; }, never, never, false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<XListProperty, "ng-component", never, { "data": "data"; "multiple": "multiple"; "selectAll": "selectAll"; "selectAllText": "selectAllText"; "checked": "checked"; "drag": "drag"; "objectArray": "objectArray"; "nodeTpl": "nodeTpl"; "header": "header"; "footer": "footer"; "scrollElement": "scrollElement"; "size": "size"; "loadMore": "loadMore"; "loadMoreText": "loadMoreText"; "loadingMoreText": "loadingMoreText"; "virtualScroll": "virtualScroll"; "scrollHeight": "scrollHeight"; "heightAdaption": "heightAdaption"; "minBufferPx": "minBufferPx"; "maxBufferPx": "maxBufferPx"; }, { "onSelectAll": "onSelectAll"; "nodeMouseenter": "nodeMouseenter"; "nodeMouseleave": "nodeMouseleave"; "nodeClick": "nodeClick"; "dropListDropped": "dropListDropped"; "keyManagerTabOut": "keyManagerTabOut"; "keyManagerChange": "keyManagerChange"; }, never, never, false>;
 }
 /**
  * @zh_CN List 数据对象
@@ -227,3 +257,12 @@ export declare class XListOptionProperty {
     static ɵfac: i0.ɵɵFactoryDeclaration<XListOptionProperty, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<XListOptionProperty, "ng-component", never, { "node": "node"; "checked": "checked"; "nodeTpl": "nodeTpl"; "selected": "selected"; "disabled": "disabled"; "active": "active"; "icon": "icon"; "divided": "divided"; "label": "label"; "leaf": "leaf"; "size": "size"; }, { "activeChange": "activeChange"; }, never, never, false>;
 }
+/**
+ * @zh_CN 拖动相关的数据
+ * @en_US Drag related data
+ */
+export declare type XListDragDrop = {
+    data: XListNode[];
+    current: XListNode;
+    currentIndex: number;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ng-nest/ui",
-  "version": "14.0.6",
+  "version": "14.0.7",
   "homepage": "https://www.ngnest.com",
   "author": "ng-nest",
   "ng-update": {
@@ -328,6 +328,14 @@
       "node": "./fesm2015/ng-nest-ui-icon.mjs",
       "default": "./fesm2020/ng-nest-ui-icon.mjs"
     },
+    "./image": {
+      "types": "./image/index.d.ts",
+      "esm2020": "./esm2020/image/ng-nest-ui-image.mjs",
+      "es2020": "./fesm2020/ng-nest-ui-image.mjs",
+      "es2015": "./fesm2015/ng-nest-ui-image.mjs",
+      "node": "./fesm2015/ng-nest-ui-image.mjs",
+      "default": "./fesm2020/ng-nest-ui-image.mjs"
+    },
     "./inner": {
       "types": "./inner/index.d.ts",
       "esm2020": "./esm2020/inner/ng-nest-ui-inner.mjs",