@abpjs/theme-shared 1.0.0 → 1.1.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.
@@ -8,6 +8,18 @@ export interface LoaderBarProps {
8
8
  url?: string;
9
9
  method?: string;
10
10
  }) => boolean;
11
+ /**
12
+ * Interval period in milliseconds for progress bar animation.
13
+ * @default 300
14
+ * @since 1.1.0
15
+ */
16
+ intervalPeriod?: number;
17
+ /**
18
+ * Delay in milliseconds before hiding the progress bar after loading completes.
19
+ * @default 400
20
+ * @since 1.1.0
21
+ */
22
+ stopDelay?: number;
11
23
  }
12
24
  /**
13
25
  * A loading progress bar component that automatically shows/hides
@@ -30,5 +42,5 @@ export interface LoaderBarProps {
30
42
  * />
31
43
  * ```
32
44
  */
33
- export declare function LoaderBar({ containerClass, progressClass, filter, }: LoaderBarProps): import("react/jsx-runtime").JSX.Element | null;
45
+ export declare function LoaderBar({ containerClass, progressClass, filter, intervalPeriod, stopDelay, }: LoaderBarProps): import("react/jsx-runtime").JSX.Element | null;
34
46
  export default LoaderBar;
@@ -1,4 +1,5 @@
1
1
  import React, { type ReactNode } from 'react';
2
+ import type { Config } from '@abpjs/core';
2
3
  import { Toaster } from '../models';
3
4
  /**
4
5
  * Internal toast message with unique ID for tracking.
@@ -8,16 +9,17 @@ interface InternalToast extends Toaster.Message {
8
9
  }
9
10
  /**
10
11
  * ToasterService interface - matches the Angular service API.
12
+ * Updated in v1.1.0 to accept Config.LocalizationParam for message and title.
11
13
  */
12
14
  export interface ToasterService {
13
15
  /** Show an info toast */
14
- info(message: string, title?: string, options?: Toaster.Options): Promise<Toaster.Status>;
16
+ info(message: Config.LocalizationParam, title?: Config.LocalizationParam, options?: Toaster.Options): Promise<Toaster.Status>;
15
17
  /** Show a success toast */
16
- success(message: string, title?: string, options?: Toaster.Options): Promise<Toaster.Status>;
18
+ success(message: Config.LocalizationParam, title?: Config.LocalizationParam, options?: Toaster.Options): Promise<Toaster.Status>;
17
19
  /** Show a warning toast */
18
- warn(message: string, title?: string, options?: Toaster.Options): Promise<Toaster.Status>;
20
+ warn(message: Config.LocalizationParam, title?: Config.LocalizationParam, options?: Toaster.Options): Promise<Toaster.Status>;
19
21
  /** Show an error toast */
20
- error(message: string, title?: string, options?: Toaster.Options): Promise<Toaster.Status>;
22
+ error(message: Config.LocalizationParam, title?: Config.LocalizationParam, options?: Toaster.Options): Promise<Toaster.Status>;
21
23
  /** Add multiple messages at once */
22
24
  addAll(messages: Toaster.Message[]): void;
23
25
  /** Clear all toasts or a specific one by status */
package/dist/index.d.ts CHANGED
@@ -2,11 +2,17 @@
2
2
  * @abpjs/theme-shared
3
3
  *
4
4
  * ABP Framework Theme Shared components for React.
5
- * Translated from @abp/ng.theme.shared v0.9.0
5
+ * Translated from @abp/ng.theme.shared v1.1.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
+ * New in v1.1.0:
11
+ * - ToasterService now accepts Config.LocalizationParam for message and title
12
+ * - Confirmation.Options: Added cancelText/yesText (deprecated cancelCopy/yesCopy)
13
+ * - New HttpErrorConfig types for custom error screen configuration
14
+ * - LoaderBar: Added intervalPeriod and stopDelay props
15
+ *
10
16
  * New in v0.9.0:
11
17
  * - ChangePassword component (moved from theme-basic)
12
18
  * - Profile component (moved from theme-basic)
package/dist/index.js CHANGED
@@ -182,6 +182,11 @@ function generateId() {
182
182
  return `toast-${Date.now()}-${toastCounter}-${Math.random().toString(36).substring(2, 9)}`;
183
183
  }
184
184
  var DEFAULT_LIFE = 5e3;
185
+ function resolveLocalizationParam(param) {
186
+ if (param === void 0) return void 0;
187
+ if (typeof param === "string") return param;
188
+ return param.defaultValue || param.key;
189
+ }
185
190
  function ToasterProvider({ children }) {
186
191
  const [toasts, setToasts] = (0, import_react.useState)([]);
187
192
  const resolversRef = (0, import_react.useRef)(/* @__PURE__ */ new Map());
@@ -197,10 +202,12 @@ function ToasterProvider({ children }) {
197
202
  (message, title, severity, options) => {
198
203
  const id = options?.id?.toString() || generateId();
199
204
  const life = options?.sticky ? void 0 : options?.life ?? DEFAULT_LIFE;
205
+ const resolvedMessage = resolveLocalizationParam(message) || "";
206
+ const resolvedTitle = resolveLocalizationParam(title);
200
207
  const toast = {
201
208
  id,
202
- message,
203
- title,
209
+ message: resolvedMessage,
210
+ title: resolvedTitle,
204
211
  severity,
205
212
  ...options
206
213
  };
@@ -634,6 +641,11 @@ var import_react7 = require("@chakra-ui/react");
634
641
  var import_core2 = require("@abpjs/core");
635
642
  var import_lucide_react2 = require("lucide-react");
636
643
  var import_jsx_runtime4 = require("react/jsx-runtime");
644
+ function getLocalizationKey(param) {
645
+ if (param === void 0) return void 0;
646
+ if (typeof param === "string") return param;
647
+ return param.key;
648
+ }
637
649
  function SeverityIcon2({ severity }) {
638
650
  const iconProps = { size: 24 };
639
651
  switch (severity) {
@@ -672,8 +684,10 @@ function ConfirmationDialog({ className }) {
672
684
  ...options.messageLocalizationParams || []
673
685
  );
674
686
  const localizedTitle = title ? t(title, ...options.titleLocalizationParams || []) : void 0;
675
- const yesCopy = options.yesCopy ? t(options.yesCopy) : t("AbpUi::Yes");
676
- const cancelCopy = options.cancelCopy ? t(options.cancelCopy) : t("AbpUi::Cancel");
687
+ const yesKey = getLocalizationKey(options.yesText) || getLocalizationKey(options.yesCopy);
688
+ const cancelKey = getLocalizationKey(options.cancelText) || getLocalizationKey(options.cancelCopy);
689
+ const yesCopy = yesKey ? t(yesKey) : t("AbpUi::Yes");
690
+ const cancelCopy = cancelKey ? t(cancelKey) : t("AbpUi::Cancel");
677
691
  const handleConfirm = () => {
678
692
  respond(Toaster.Status.confirm);
679
693
  };
@@ -769,7 +783,9 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
769
783
  function LoaderBar({
770
784
  containerClass = "abp-loader-bar",
771
785
  progressClass = "abp-progress",
772
- filter
786
+ filter,
787
+ intervalPeriod = 300,
788
+ stopDelay = 400
773
789
  }) {
774
790
  const { loading } = (0, import_core3.useLoader)();
775
791
  const [isLoading, setIsLoading] = (0, import_react9.useState)(false);
@@ -806,7 +822,7 @@ function LoaderBar({
806
822
  }
807
823
  return prev + 10;
808
824
  });
809
- }, 300);
825
+ }, intervalPeriod);
810
826
  };
811
827
  const stopLoading = () => {
812
828
  setProgressLevel(100);
@@ -817,7 +833,7 @@ function LoaderBar({
817
833
  setTimeout(() => {
818
834
  setIsLoading(false);
819
835
  setProgressLevel(0);
820
- }, 400);
836
+ }, stopDelay);
821
837
  };
822
838
  if (!isLoading && progressLevel === 0) {
823
839
  return null;
package/dist/index.mjs CHANGED
@@ -114,6 +114,11 @@ function generateId() {
114
114
  return `toast-${Date.now()}-${toastCounter}-${Math.random().toString(36).substring(2, 9)}`;
115
115
  }
116
116
  var DEFAULT_LIFE = 5e3;
117
+ function resolveLocalizationParam(param) {
118
+ if (param === void 0) return void 0;
119
+ if (typeof param === "string") return param;
120
+ return param.defaultValue || param.key;
121
+ }
117
122
  function ToasterProvider({ children }) {
118
123
  const [toasts, setToasts] = useState([]);
119
124
  const resolversRef = useRef(/* @__PURE__ */ new Map());
@@ -129,10 +134,12 @@ function ToasterProvider({ children }) {
129
134
  (message, title, severity, options) => {
130
135
  const id = options?.id?.toString() || generateId();
131
136
  const life = options?.sticky ? void 0 : options?.life ?? DEFAULT_LIFE;
137
+ const resolvedMessage = resolveLocalizationParam(message) || "";
138
+ const resolvedTitle = resolveLocalizationParam(title);
132
139
  const toast = {
133
140
  id,
134
- message,
135
- title,
141
+ message: resolvedMessage,
142
+ title: resolvedTitle,
136
143
  severity,
137
144
  ...options
138
145
  };
@@ -598,6 +605,11 @@ import {
598
605
  XCircle as XCircle2
599
606
  } from "lucide-react";
600
607
  import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
608
+ function getLocalizationKey(param) {
609
+ if (param === void 0) return void 0;
610
+ if (typeof param === "string") return param;
611
+ return param.key;
612
+ }
601
613
  function SeverityIcon2({ severity }) {
602
614
  const iconProps = { size: 24 };
603
615
  switch (severity) {
@@ -636,8 +648,10 @@ function ConfirmationDialog({ className }) {
636
648
  ...options.messageLocalizationParams || []
637
649
  );
638
650
  const localizedTitle = title ? t(title, ...options.titleLocalizationParams || []) : void 0;
639
- const yesCopy = options.yesCopy ? t(options.yesCopy) : t("AbpUi::Yes");
640
- const cancelCopy = options.cancelCopy ? t(options.cancelCopy) : t("AbpUi::Cancel");
651
+ const yesKey = getLocalizationKey(options.yesText) || getLocalizationKey(options.yesCopy);
652
+ const cancelKey = getLocalizationKey(options.cancelText) || getLocalizationKey(options.cancelCopy);
653
+ const yesCopy = yesKey ? t(yesKey) : t("AbpUi::Yes");
654
+ const cancelCopy = cancelKey ? t(cancelKey) : t("AbpUi::Cancel");
641
655
  const handleConfirm = () => {
642
656
  respond(Toaster.Status.confirm);
643
657
  };
@@ -733,7 +747,9 @@ import { jsx as jsx6 } from "react/jsx-runtime";
733
747
  function LoaderBar({
734
748
  containerClass = "abp-loader-bar",
735
749
  progressClass = "abp-progress",
736
- filter
750
+ filter,
751
+ intervalPeriod = 300,
752
+ stopDelay = 400
737
753
  }) {
738
754
  const { loading } = useLoader();
739
755
  const [isLoading, setIsLoading] = useState4(false);
@@ -770,7 +786,7 @@ function LoaderBar({
770
786
  }
771
787
  return prev + 10;
772
788
  });
773
- }, 300);
789
+ }, intervalPeriod);
774
790
  };
775
791
  const stopLoading = () => {
776
792
  setProgressLevel(100);
@@ -781,7 +797,7 @@ function LoaderBar({
781
797
  setTimeout(() => {
782
798
  setIsLoading(false);
783
799
  setProgressLevel(0);
784
- }, 400);
800
+ }, stopDelay);
785
801
  };
786
802
  if (!isLoading && progressLevel === 0) {
787
803
  return null;
@@ -0,0 +1,42 @@
1
+ /**
2
+ * Common types for theme-shared module.
3
+ * Translated from @abp/ng.theme.shared/lib/models/common.ts
4
+ * @since 1.1.0
5
+ */
6
+ import type { ComponentType } from 'react';
7
+ /**
8
+ * Root parameters for ThemeSharedModule configuration.
9
+ * @since 1.1.0
10
+ */
11
+ export interface RootParams {
12
+ httpErrorConfig?: HttpErrorConfig;
13
+ }
14
+ /**
15
+ * Error screen error codes that can be customized.
16
+ * @since 1.1.0
17
+ */
18
+ export type ErrorScreenErrorCodes = 401 | 403 | 404 | 500;
19
+ /**
20
+ * Configuration for HTTP error handling.
21
+ * @since 1.1.0
22
+ */
23
+ export interface HttpErrorConfig {
24
+ /**
25
+ * Custom error screen configuration.
26
+ */
27
+ errorScreen?: {
28
+ /**
29
+ * Custom React component to render for errors.
30
+ */
31
+ component: ComponentType<any>;
32
+ /**
33
+ * Which error codes to show the custom component for.
34
+ * Defaults to all error codes if not specified.
35
+ */
36
+ forWhichErrors?: [ErrorScreenErrorCodes] | [ErrorScreenErrorCodes, ErrorScreenErrorCodes] | [ErrorScreenErrorCodes, ErrorScreenErrorCodes, ErrorScreenErrorCodes] | [ErrorScreenErrorCodes, ErrorScreenErrorCodes, ErrorScreenErrorCodes, ErrorScreenErrorCodes];
37
+ /**
38
+ * Whether to hide the close icon on the error screen.
39
+ */
40
+ hideCloseIcon?: boolean;
41
+ };
42
+ }
@@ -2,6 +2,7 @@
2
2
  * Confirmation namespace containing types for confirmation dialogs.
3
3
  * Translated from @abp/ng.theme.shared/lib/models/confirmation.ts
4
4
  */
5
+ import type { Config } from '@abpjs/core';
5
6
  import { Toaster } from './toaster';
6
7
  export declare namespace Confirmation {
7
8
  /**
@@ -13,9 +14,23 @@ export declare namespace Confirmation {
13
14
  hideCancelBtn?: boolean;
14
15
  /** Hide the yes/confirm button */
15
16
  hideYesBtn?: boolean;
16
- /** Custom text for the cancel button (localization key) */
17
- cancelCopy?: string;
18
- /** Custom text for the yes button (localization key) */
19
- yesCopy?: string;
17
+ /**
18
+ * Custom text for the cancel button
19
+ * @since 1.1.0 - Now accepts Config.LocalizationParam
20
+ */
21
+ cancelText?: Config.LocalizationParam;
22
+ /**
23
+ * Custom text for the yes button
24
+ * @since 1.1.0 - Now accepts Config.LocalizationParam
25
+ */
26
+ yesText?: Config.LocalizationParam;
27
+ /**
28
+ * @deprecated Use cancelText instead. Will be removed in v2.0.0
29
+ */
30
+ cancelCopy?: Config.LocalizationParam;
31
+ /**
32
+ * @deprecated Use yesCopy instead. Will be removed in v2.0.0
33
+ */
34
+ yesCopy?: Config.LocalizationParam;
20
35
  }
21
36
  }
@@ -1,3 +1,4 @@
1
+ export * from './common';
1
2
  export * from './toaster';
2
3
  export * from './confirmation';
3
4
  export * from './setting-management';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@abpjs/theme-shared",
3
- "version": "1.0.0",
3
+ "version": "1.1.0",
4
4
  "description": "ABP Framework Theme Shared components for React - translated from @abp/ng.theme.shared",
5
5
  "main": "dist/index.js",
6
6
  "module": "dist/index.mjs",
@@ -27,11 +27,11 @@
27
27
  "next-themes": "^0.4.6",
28
28
  "react-hook-form": "^7.48.0",
29
29
  "react-icons": "^5.5.0",
30
- "@abpjs/core": "1.0.0"
30
+ "@abpjs/core": "1.1.0"
31
31
  },
32
32
  "devDependencies": {
33
- "@abp/ng.theme.shared": "1.0.0",
34
- "@vitest/coverage-v8": "^1.6.1"
33
+ "@abp/ng.theme.shared": "1.1.0",
34
+ "@vitest/coverage-v8": "^3.2.0"
35
35
  },
36
36
  "author": "tekthar.com",
37
37
  "license": "LGPL-3.0",
@@ -40,7 +40,8 @@
40
40
  },
41
41
  "repository": {
42
42
  "type": "git",
43
- "url": "https://github.com/abpjs/abp-react"
43
+ "url": "https://github.com/abpjs/abp-react",
44
+ "directory": "packages/theme-shared"
44
45
  },
45
46
  "homepage": "https://docs.abpjs.io/docs/packages/theme-shared/overview",
46
47
  "bugs": {