@abpjs/theme-shared 2.7.0 → 2.9.0
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/dist/constants/styles.d.ts +9 -1
- package/dist/handlers/index.d.ts +1 -0
- package/dist/handlers/lazy-style.handler.d.ts +96 -0
- package/dist/index.d.ts +11 -1
- package/dist/index.js +361 -211
- package/dist/index.mjs +153 -18
- package/dist/models/common.d.ts +6 -0
- package/dist/models/confirmation.d.ts +12 -2
- package/dist/tokens/index.d.ts +2 -0
- package/dist/tokens/lazy-styles.token.d.ts +38 -0
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/nav-items.d.ts +110 -0
- package/package.json +3 -3
|
@@ -7,6 +7,8 @@
|
|
|
7
7
|
* - Added sorting icon styles
|
|
8
8
|
* - Added table scrollbar width styling
|
|
9
9
|
*
|
|
10
|
+
* @since 2.9.0 - Added RTL support for data-tables-filter
|
|
11
|
+
*
|
|
10
12
|
* @example
|
|
11
13
|
* ```tsx
|
|
12
14
|
* // Option 1: Use with a style tag in your app
|
|
@@ -25,5 +27,11 @@
|
|
|
25
27
|
* // Copy the content of DEFAULT_STYLES to your styles.css
|
|
26
28
|
* ```
|
|
27
29
|
*/
|
|
28
|
-
|
|
30
|
+
/**
|
|
31
|
+
* Bootstrap CSS file pattern with direction placeholder.
|
|
32
|
+
* Use with createLazyStyleHref to get the correct bootstrap CSS for RTL/LTR.
|
|
33
|
+
* @since 2.9.0
|
|
34
|
+
*/
|
|
35
|
+
export declare const BOOTSTRAP = "bootstrap-{{dir}}.min.css";
|
|
36
|
+
export declare const DEFAULT_STYLES = "\n.is-invalid .form-control {\n border-color: #dc3545;\n border-style: solid !important;\n}\n\n.is-invalid .invalid-feedback,\n.is-invalid + * .invalid-feedback {\n display: block;\n}\n\n.data-tables-filter {\n text-align: right;\n}\n\n/* RTL support - @since 2.9.0 */\n[dir=rtl] .data-tables-filter {\n text-align: left;\n}\n\n.pointer {\n cursor: pointer;\n}\n\n.navbar .dropdown-submenu a::after {\n transform: rotate(-90deg);\n position: absolute;\n right: 16px;\n top: 18px;\n}\n\n.navbar .dropdown-menu {\n min-width: 215px;\n}\n\n.ui-table-scrollable-body::-webkit-scrollbar {\n height: 5px !important;\n width: 5px !important;\n}\n\n.ui-table-scrollable-body::-webkit-scrollbar-track {\n background: #ddd;\n}\n\n.ui-table-scrollable-body::-webkit-scrollbar-thumb {\n background: #8a8686;\n}\n\n.abp-ellipsis-inline {\n display: inline-block;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.abp-ellipsis {\n overflow: hidden !important;\n text-overflow: ellipsis;\n white-space: nowrap;\n}\n\n.ui-widget-overlay {\n z-index: 1000;\n}\n\n.color-white {\n color: #FFF !important;\n}\n\n.custom-checkbox > label {\n cursor: pointer;\n}\n\n/* <animations */\n\n.fade-in-top {\n animation: fadeInTop 0.2s ease-in-out;\n}\n\n.fade-out-top {\n animation: fadeOutTop 0.2s ease-in-out;\n}\n\n.abp-collapsed-height {\n -moz-transition: max-height linear 0.35s;\n -ms-transition: max-height linear 0.35s;\n -o-transition: max-height linear 0.35s;\n -webkit-transition: max-height linear 0.35s;\n overflow:hidden;\n transition:max-height 0.35s linear;\n height:auto;\n max-height: 0;\n}\n\n.abp-mh-25 {\n max-height: 25vh;\n}\n\n.abp-mh-50 {\n transition:max-height 0.65s linear;\n max-height: 50vh;\n}\n\n.abp-mh-75 {\n transition:max-height 0.85s linear;\n max-height: 75vh;\n}\n\n.abp-mh-100 {\n transition:max-height 1s linear;\n max-height: 100vh;\n}\n\n/* Sorting icon styles - @since 2.0.0 */\n[class^=\"sorting\"] {\n opacity: .3;\n cursor: pointer;\n}\n[class^=\"sorting\"]:before {\n right: 0.5rem;\n content: \"\u2191\";\n}\n[class^=\"sorting\"]:after {\n right: 0.5rem;\n content: \"\u2193\";\n}\n\n.sorting_desc {\n opacity: 1;\n}\n.sorting_desc:before {\n opacity: .3;\n}\n\n.sorting_asc {\n opacity: 1;\n}\n.sorting_asc:after {\n opacity: .3;\n}\n\n@keyframes fadeInTop {\n from {\n transform: translateY(-5px);\n opacity: 0;\n }\n\n to {\n transform: translateY(0px);\n opacity: 1;\n }\n}\n\n@keyframes fadeOutTop {\n to {\n transform: translateY(-5px);\n opacity: 0;\n }\n}\n\n/* </animations */\n\n/* Loader bar styles */\n.abp-loader-bar {\n position: fixed;\n top: 0;\n left: 0;\n right: 0;\n height: 3px;\n z-index: 9999;\n background-color: rgba(0, 0, 0, 0.1);\n overflow: hidden;\n}\n\n.abp-progress {\n height: 100%;\n background-color: #3182ce;\n transition: width 0.3s ease-out;\n}\n";
|
|
29
37
|
export default DEFAULT_STYLES;
|
package/dist/handlers/index.d.ts
CHANGED
|
@@ -0,0 +1,96 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Lazy Style Handler
|
|
3
|
+
* Translated from @abp/ng.theme.shared/lib/handlers/lazy-style.handler.ts
|
|
4
|
+
*
|
|
5
|
+
* Handles RTL/LTR style switching based on locale direction.
|
|
6
|
+
*
|
|
7
|
+
* @since 2.9.0
|
|
8
|
+
*/
|
|
9
|
+
import type { LocaleDirection } from '../models/common';
|
|
10
|
+
/**
|
|
11
|
+
* Creates a lazy style href by replacing the direction placeholder.
|
|
12
|
+
* @param style - The style pattern with {{dir}} placeholder
|
|
13
|
+
* @param dir - The direction ('ltr' or 'rtl')
|
|
14
|
+
* @returns The resolved style href
|
|
15
|
+
* @since 2.9.0
|
|
16
|
+
*
|
|
17
|
+
* @example
|
|
18
|
+
* ```tsx
|
|
19
|
+
* const href = createLazyStyleHref('bootstrap-{{dir}}.min.css', 'rtl');
|
|
20
|
+
* // Returns: 'bootstrap-rtl.min.css'
|
|
21
|
+
* ```
|
|
22
|
+
*/
|
|
23
|
+
export declare function createLazyStyleHref(style: string, dir: string): string;
|
|
24
|
+
/**
|
|
25
|
+
* Options for the LazyStyleHandler hook.
|
|
26
|
+
* @since 2.9.0
|
|
27
|
+
*/
|
|
28
|
+
export interface LazyStyleHandlerOptions {
|
|
29
|
+
/**
|
|
30
|
+
* Array of style patterns with {{dir}} placeholder.
|
|
31
|
+
* Defaults to [BOOTSTRAP] if not provided.
|
|
32
|
+
*/
|
|
33
|
+
styles?: string[];
|
|
34
|
+
/**
|
|
35
|
+
* Initial direction. Defaults to 'ltr'.
|
|
36
|
+
*/
|
|
37
|
+
initialDirection?: LocaleDirection;
|
|
38
|
+
}
|
|
39
|
+
/**
|
|
40
|
+
* Hook for managing RTL/LTR style switching.
|
|
41
|
+
* Automatically switches Bootstrap and other stylesheets based on locale direction.
|
|
42
|
+
*
|
|
43
|
+
* @param options - Configuration options
|
|
44
|
+
* @returns Object with current direction and setDirection function
|
|
45
|
+
* @since 2.9.0
|
|
46
|
+
*
|
|
47
|
+
* @example
|
|
48
|
+
* ```tsx
|
|
49
|
+
* function App() {
|
|
50
|
+
* const { direction, setDirection } = useLazyStyleHandler({
|
|
51
|
+
* styles: [BOOTSTRAP],
|
|
52
|
+
* initialDirection: 'ltr',
|
|
53
|
+
* });
|
|
54
|
+
*
|
|
55
|
+
* // Switch to RTL when needed
|
|
56
|
+
* const handleLanguageChange = (lang: string) => {
|
|
57
|
+
* if (lang === 'ar' || lang === 'he') {
|
|
58
|
+
* setDirection('rtl');
|
|
59
|
+
* } else {
|
|
60
|
+
* setDirection('ltr');
|
|
61
|
+
* }
|
|
62
|
+
* };
|
|
63
|
+
*
|
|
64
|
+
* return <div dir={direction}>...</div>;
|
|
65
|
+
* }
|
|
66
|
+
* ```
|
|
67
|
+
*/
|
|
68
|
+
export declare function useLazyStyleHandler(options?: LazyStyleHandlerOptions): {
|
|
69
|
+
direction: LocaleDirection;
|
|
70
|
+
setDirection: import("react").Dispatch<import("react").SetStateAction<LocaleDirection>>;
|
|
71
|
+
};
|
|
72
|
+
/**
|
|
73
|
+
* Gets the currently loaded Bootstrap stylesheet direction.
|
|
74
|
+
* @param styles - Array of style patterns to check
|
|
75
|
+
* @returns The current direction or undefined if not loaded
|
|
76
|
+
* @since 2.9.0
|
|
77
|
+
*/
|
|
78
|
+
export declare function getLoadedBootstrapDirection(styles?: string[]): LocaleDirection | undefined;
|
|
79
|
+
/**
|
|
80
|
+
* Initialize lazy style handler for use in providers.
|
|
81
|
+
* Returns a function that creates the handler.
|
|
82
|
+
*
|
|
83
|
+
* @param options - Configuration options
|
|
84
|
+
* @returns Function that initializes the handler
|
|
85
|
+
* @since 2.9.0
|
|
86
|
+
*
|
|
87
|
+
* @example
|
|
88
|
+
* ```tsx
|
|
89
|
+
* // In your provider setup
|
|
90
|
+
* const initHandler = initLazyStyleHandler({ styles: [BOOTSTRAP] });
|
|
91
|
+
* const handler = initHandler();
|
|
92
|
+
* ```
|
|
93
|
+
*/
|
|
94
|
+
export declare function initLazyStyleHandler(options?: LazyStyleHandlerOptions): () => {
|
|
95
|
+
direction: LocaleDirection;
|
|
96
|
+
};
|
package/dist/index.d.ts
CHANGED
|
@@ -2,11 +2,21 @@
|
|
|
2
2
|
* @abpjs/theme-shared
|
|
3
3
|
*
|
|
4
4
|
* ABP Framework Theme Shared components for React.
|
|
5
|
-
* Translated from @abp/ng.theme.shared v2.
|
|
5
|
+
* Translated from @abp/ng.theme.shared v2.9.0
|
|
6
6
|
*
|
|
7
7
|
* This package provides shared UI components, services, and utilities
|
|
8
8
|
* for theme/modal management in ABP Framework React applications.
|
|
9
9
|
*
|
|
10
|
+
* Changes in v2.9.0:
|
|
11
|
+
* - Added LocaleDirection type for RTL/LTR support
|
|
12
|
+
* - Added LazyStyleHandler for RTL/LTR style switching
|
|
13
|
+
* - Added NavItem interface and functions (addNavItem, getNavItems, etc.)
|
|
14
|
+
* - Added LAZY_STYLES token and LazyStylesContext
|
|
15
|
+
* - Added BOOTSTRAP constant for bootstrap CSS pattern
|
|
16
|
+
* - Confirmation.Options: Added dismissible property, deprecated closable
|
|
17
|
+
* - Updated styles with RTL support for data-tables-filter
|
|
18
|
+
* - Dependency updates to @abp/ng.core v2.9.0
|
|
19
|
+
*
|
|
10
20
|
* Changes in v2.7.0:
|
|
11
21
|
* - Added ModalService with renderTemplate, clearModal, getContainer, detectChanges
|
|
12
22
|
* - HttpErrorConfig: Added skipHandledErrorCodes, simplified forWhichErrors to array
|