@shival99/z-ui 2.3.3 → 2.3.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/css/overlay.css +18 -8
- package/fesm2022/shival99-z-ui-components-z-calendar.mjs +2 -2
- package/fesm2022/shival99-z-ui-components-z-calendar.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-drawer.mjs +45 -3
- package/fesm2022/shival99-z-ui-components-z-drawer.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-modal.mjs +3 -1
- package/fesm2022/shival99-z-ui-components-z-modal.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-overlay.mjs +106 -15
- package/fesm2022/shival99-z-ui-components-z-overlay.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-components-z-tabs.mjs +1 -1
- package/fesm2022/shival99-z-ui-components-z-tabs.mjs.map +1 -1
- package/fesm2022/shival99-z-ui-services.mjs +2 -1
- package/fesm2022/shival99-z-ui-services.mjs.map +1 -1
- package/package.json +1 -1
- package/types/shival99-z-ui-components-z-calendar.d.ts +4 -4
- package/types/shival99-z-ui-components-z-drawer.d.ts +12 -0
- package/types/shival99-z-ui-components-z-overlay.d.ts +60 -4
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@shival99/z-ui",
|
|
3
|
-
"version": "2.3.
|
|
3
|
+
"version": "2.3.4",
|
|
4
4
|
"description": "Z-UI: Modern Angular UI Component Library - A comprehensive, high-performance design system built with Angular 22, featuring 40+ customizable components with dark mode, accessibility, and enterprise-ready features.",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"angular",
|
|
@@ -431,16 +431,16 @@ declare class ZCalendarComponent implements OnInit, ControlValueAccessor {
|
|
|
431
431
|
|
|
432
432
|
declare const zCalendarVariants: (props?: ({
|
|
433
433
|
zSize?: "sm" | "default" | "lg" | null | undefined;
|
|
434
|
-
zStatus?: "default" | "disabled" | "
|
|
434
|
+
zStatus?: "default" | "disabled" | "open" | "error" | "readonly" | null | undefined;
|
|
435
435
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
436
436
|
declare const zCalendarDayVariants: (props?: ({
|
|
437
|
-
state?: "default" | "
|
|
437
|
+
state?: "default" | "today" | "selected" | "inRange" | "rangeStart" | "rangeEnd" | "rangeSingle" | "disabled" | "otherMonth" | "hovered" | null | undefined;
|
|
438
438
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
439
439
|
declare const zCalendarMonthVariants: (props?: ({
|
|
440
|
-
state?: "default" | "
|
|
440
|
+
state?: "default" | "selected" | "disabled" | "current" | null | undefined;
|
|
441
441
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
442
442
|
declare const zCalendarYearVariants: (props?: ({
|
|
443
|
-
state?: "default" | "
|
|
443
|
+
state?: "default" | "selected" | "disabled" | "current" | null | undefined;
|
|
444
444
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
445
445
|
|
|
446
446
|
export { ZCalendarComponent, zCalendarDayVariants, zCalendarMonthVariants, zCalendarVariants, zCalendarYearVariants };
|
|
@@ -179,6 +179,12 @@ declare class ZDrawerComponent<T, U> implements OnDestroy, AfterViewChecked {
|
|
|
179
179
|
set drawerRef(value: ZDrawerRef<T> | undefined);
|
|
180
180
|
protected readonly contentOutlet: _angular_core.Signal<ViewContainerRef | undefined>;
|
|
181
181
|
protected readonly mainContentRef: _angular_core.Signal<NgScrollbar | undefined>;
|
|
182
|
+
/**
|
|
183
|
+
* Nội dung được yêu cầu gắn khi `#contentOutlet` chưa tồn tại. `@defer` bọc outlet chỉ render sau
|
|
184
|
+
* khi Angular nạp xong dependency của block, nên lần mở drawer ĐẦU TIÊN outlet vẫn còn ở
|
|
185
|
+
* `@placeholder` — giữ lại đây rồi gắn ngay khi outlet xuất hiện. Xem `_attachPendingContent`.
|
|
186
|
+
*/
|
|
187
|
+
private _pendingContent;
|
|
182
188
|
protected readonly config: ZDrawerOptions<T, U>;
|
|
183
189
|
private readonly _platformId;
|
|
184
190
|
private readonly _host;
|
|
@@ -251,6 +257,12 @@ declare class ZDrawerComponent<T, U> implements OnDestroy, AfterViewChecked {
|
|
|
251
257
|
getNativeElement(): HTMLElement;
|
|
252
258
|
attachComponentPortal<C>(component: Type<C>, injector?: Injector): ComponentRef<C>;
|
|
253
259
|
attachTemplatePortal<C>(templateRef: TemplateRef<C>, context: C): EmbeddedViewRef<C>;
|
|
260
|
+
/**
|
|
261
|
+
* Gắn nội dung đã bị hoãn ở `_pendingContent` ngay khi outlet có thật, và cập nhật
|
|
262
|
+
* `drawerRef.componentInstance` — thứ mà `ZDrawerService` không set được vì lúc nó gọi
|
|
263
|
+
* `attachComponentPortal` thì chưa có ref nào để trả về.
|
|
264
|
+
*/
|
|
265
|
+
private _attachPendingContent;
|
|
254
266
|
onOkClick(): void;
|
|
255
267
|
onCloseClick(): void;
|
|
256
268
|
onBackdropClick(): void;
|
|
@@ -46,6 +46,10 @@ interface ZOverlayGlobalConfig {
|
|
|
46
46
|
interface ZOverlayAnchoredConfig {
|
|
47
47
|
panelClass?: string;
|
|
48
48
|
}
|
|
49
|
+
/** Một overlay toàn màn hình đang mở trong `ZOverlayStackService`. */
|
|
50
|
+
interface ZOverlayStackEntry {
|
|
51
|
+
readonly hostElement: HTMLElement;
|
|
52
|
+
}
|
|
49
53
|
|
|
50
54
|
declare function computeZOverlayPlacement(config: ZFloatingPlacementConfig): Promise<ZFloatingPlacementResult>;
|
|
51
55
|
/** Bọc lại `autoUpdate` của Floating UI — thay cho `scrollStrategies.reposition()` của CDK. */
|
|
@@ -72,6 +76,30 @@ declare const Z_OVERLAY_FALLBACK_ORDER: Record<ZOverlayPlacement, ZOverlayPlacem
|
|
|
72
76
|
/** Thứ tự ưu tiên khi vị trí chính còn đủ chỗ (tooltip dùng để giữ đúng cạnh, không nhảy sang cạnh đối diện). */
|
|
73
77
|
declare const Z_OVERLAY_PREFERRED_SIDE_ORDER: Record<ZOverlayPlacement, ZOverlayPlacement[]>;
|
|
74
78
|
|
|
79
|
+
/**
|
|
80
|
+
* Ngăn xếp các overlay toàn màn hình (modal/drawer/dynamic) đang mở, theo đúng thứ tự mở.
|
|
81
|
+
*
|
|
82
|
+
* Mỗi ref (ZModalRef/ZDrawerRef/ZDynamicRef) tự lắng nghe `keydown` ở tầng `document`, nên nếu
|
|
83
|
+
* không hỏi ngăn xếp thì MỘT lần Escape sẽ đóng dồn cả stack — modal-trong-modal hay modal mở từ
|
|
84
|
+
* trong drawer đều biến mất cùng lúc. Có ngăn xếp thì chỉ overlay trên cùng phản hồi Escape.
|
|
85
|
+
*
|
|
86
|
+
* Overlay neo theo trigger (tooltip/popover) không đăng ký ở đây — chúng có cơ chế đóng riêng.
|
|
87
|
+
*/
|
|
88
|
+
declare class ZOverlayStackService {
|
|
89
|
+
private readonly _stack;
|
|
90
|
+
register(entry: ZOverlayStackEntry): void;
|
|
91
|
+
unregister(entry: ZOverlayStackEntry): void;
|
|
92
|
+
/**
|
|
93
|
+
* `true` khi không còn overlay nào mở phía trên `entry`.
|
|
94
|
+
*
|
|
95
|
+
* Ngăn xếp rỗng cũng trả `true`: overlay vừa rời ngăn xếp (đang chạy animation thoát) vẫn được
|
|
96
|
+
* quyền tự xử lý, còn việc chặn đóng hai lần đã do `_isClosing` của từng ref đảm nhiệm.
|
|
97
|
+
*/
|
|
98
|
+
isTopmost(entry: ZOverlayStackEntry): boolean;
|
|
99
|
+
static ɵfac: i0.ɵɵFactoryDeclaration<ZOverlayStackService, never>;
|
|
100
|
+
static ɵprov: i0.ɵɵInjectableDeclaration<ZOverlayStackService>;
|
|
101
|
+
}
|
|
102
|
+
|
|
75
103
|
/**
|
|
76
104
|
* Thay cho `OverlayRef` của CDK. `overlayElement` là pane được Floating UI định vị
|
|
77
105
|
* (overlay neo theo trigger) hoặc chính `hostElement` (overlay toàn màn hình — modal/drawer).
|
|
@@ -83,9 +111,20 @@ declare class ZOverlayRef {
|
|
|
83
111
|
private readonly _appRef;
|
|
84
112
|
private readonly _envInjector;
|
|
85
113
|
private readonly _onDispose?;
|
|
114
|
+
private readonly _stack?;
|
|
86
115
|
private _componentRef;
|
|
87
116
|
private _embeddedViewRef;
|
|
88
|
-
constructor(hostElement: HTMLElement, overlayElement: HTMLElement, backdropElement: HTMLElement | null, _appRef: ApplicationRef, _envInjector: EnvironmentInjector, _onDispose?: (() => void) | undefined);
|
|
117
|
+
constructor(hostElement: HTMLElement, overlayElement: HTMLElement, backdropElement: HTMLElement | null, _appRef: ApplicationRef, _envInjector: EnvironmentInjector, _onDispose?: (() => void) | undefined, _stack?: ZOverlayStackService | undefined);
|
|
118
|
+
/**
|
|
119
|
+
* `true` khi đây là overlay toàn màn hình trên cùng — dùng để chỉ overlay trên cùng phản hồi
|
|
120
|
+
* Escape. Overlay không tham gia ngăn xếp (tooltip/popover) luôn trả `true`, giữ nguyên hành vi cũ.
|
|
121
|
+
*/
|
|
122
|
+
isTopmost(): boolean;
|
|
123
|
+
/**
|
|
124
|
+
* Rời ngăn xếp ngay khi bắt đầu đóng, trước cả animation thoát, để lần Escape tiếp theo nhắm
|
|
125
|
+
* đúng overlay bên dưới thay vì overlay đang biến mất.
|
|
126
|
+
*/
|
|
127
|
+
markClosing(): void;
|
|
89
128
|
hasAttached(): boolean;
|
|
90
129
|
/**
|
|
91
130
|
* `viewContainerRef`, khi được truyền, cho component tạo ra thừa hưởng injector/vị trí trong
|
|
@@ -118,6 +157,7 @@ declare class ZOverlayService {
|
|
|
118
157
|
private readonly _envInjector;
|
|
119
158
|
private readonly _document;
|
|
120
159
|
private readonly _scrollLock;
|
|
160
|
+
private readonly _stack;
|
|
121
161
|
private _container;
|
|
122
162
|
createAnchored(config?: ZOverlayAnchoredConfig): ZOverlayRef;
|
|
123
163
|
createGlobal(config: ZOverlayGlobalConfig): ZOverlayRef;
|
|
@@ -131,7 +171,23 @@ declare class ZOverlayService {
|
|
|
131
171
|
/**
|
|
132
172
|
* Khoá scroll trang khi overlay toàn màn hình (modal/drawer) mở — thay cho
|
|
133
173
|
* `scrollStrategies.block()` của CDK. Đếm tham chiếu để modal-trong-modal không mở khoá sớm.
|
|
134
|
-
*
|
|
174
|
+
*
|
|
175
|
+
* Chống layout shift theo hai bước:
|
|
176
|
+
*
|
|
177
|
+
* 1. Nếu trang vốn đã dành chỗ cho scrollbar (`html` hẹp hơn `window.innerWidth`), khoá kèm
|
|
178
|
+
* `scrollbar-gutter: stable` để chỗ đó KHÔNG bị nhả ra. Cách này giữ đúng chiều rộng layout
|
|
179
|
+
* cho cả nội dung trong flow lẫn element `position: fixed` (backdrop, drawer, toast...),
|
|
180
|
+
* nên không cần bù padding và không có gì dịch chuyển.
|
|
181
|
+
* 2. Nếu trình duyệt vẫn nhả chỗ đó (không hỗ trợ `scrollbar-gutter`), ĐO đúng hiệu số chiều
|
|
182
|
+
* rộng của `<html>` trước/sau khi khoá rồi bù vào `padding-right` của body.
|
|
183
|
+
*
|
|
184
|
+
* Lưu ý: phải đo bằng `getBoundingClientRect()` của `<html>`, không dùng `documentElement.clientWidth`
|
|
185
|
+
* — với root element thuộc tính đó trả về kích thước viewport nên luôn cộng thêm chiều rộng scrollbar
|
|
186
|
+
* khi `overflow: hidden`, dẫn tới bù thừa và làm UI co lại đúng bằng chiều rộng scrollbar.
|
|
187
|
+
*
|
|
188
|
+
* Hiệu số còn được ghi ra biến CSS `--z-scroll-lock-gutter` (0px khi không nhả) để app bù thêm cho
|
|
189
|
+
* element `position: fixed` của riêng mình trong trường hợp 2.
|
|
190
|
+
*
|
|
135
191
|
* Vị trí scroll vẫn được lưu để khôi phục nếu ứng dụng thay đổi scroll programmatically trong lúc khoá.
|
|
136
192
|
*/
|
|
137
193
|
declare class ZScrollLockService {
|
|
@@ -145,5 +201,5 @@ declare class ZScrollLockService {
|
|
|
145
201
|
static ɵprov: i0.ɵɵInjectableDeclaration<ZScrollLockService>;
|
|
146
202
|
}
|
|
147
203
|
|
|
148
|
-
export { ZOverlayRef, ZOverlayService, ZScrollLockService, Z_OVERLAY_CONTAINER_CLASS, Z_OVERLAY_DEFAULT_ARROW_EDGE_PADDING, Z_OVERLAY_DEFAULT_VIEWPORT_PADDING, Z_OVERLAY_FALLBACK_ORDER, Z_OVERLAY_HOST_CLASS, Z_OVERLAY_PLACEMENT_MAP, Z_OVERLAY_PLACEMENT_REVERSE_MAP, Z_OVERLAY_PREFERRED_SIDE_ORDER, Z_OVERLAY_SCROLLABLE_CLASS, computeZOverlayArrowOffset, computeZOverlayPlacement, startZOverlayAutoUpdate };
|
|
149
|
-
export type { ZFloatingArrowOffsetConfig, ZFloatingPlacementConfig, ZFloatingPlacementResult, ZOverlayAnchoredConfig, ZOverlayGlobalConfig, ZOverlayPlacement, ZOverlaySide, ZOverlaySizeConfig };
|
|
204
|
+
export { ZOverlayRef, ZOverlayService, ZOverlayStackService, ZScrollLockService, Z_OVERLAY_CONTAINER_CLASS, Z_OVERLAY_DEFAULT_ARROW_EDGE_PADDING, Z_OVERLAY_DEFAULT_VIEWPORT_PADDING, Z_OVERLAY_FALLBACK_ORDER, Z_OVERLAY_HOST_CLASS, Z_OVERLAY_PLACEMENT_MAP, Z_OVERLAY_PLACEMENT_REVERSE_MAP, Z_OVERLAY_PREFERRED_SIDE_ORDER, Z_OVERLAY_SCROLLABLE_CLASS, computeZOverlayArrowOffset, computeZOverlayPlacement, startZOverlayAutoUpdate };
|
|
205
|
+
export type { ZFloatingArrowOffsetConfig, ZFloatingPlacementConfig, ZFloatingPlacementResult, ZOverlayAnchoredConfig, ZOverlayGlobalConfig, ZOverlayPlacement, ZOverlaySide, ZOverlaySizeConfig, ZOverlayStackEntry };
|