@webitel/ui-datalist 1.1.32 → 1.1.33

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@webitel/ui-datalist",
-	"version": "1.1.32",
+	"version": "1.1.33",
 	"description": "Toolkit for building data lists in webitel ui system",
 	"scripts": {
 		"build:types": "vue-tsc -p ./tsconfig.build.json",

package/src/modules/card/composables/useCardComponent.ts

@@ -1,6 +1,7 @@
+import type { RegleSchema } from '@regle/schemas';
 import { refDebounced } from '@vueuse/core';
 import { type StoreDefinition, storeToRefs } from 'pinia';
-import { onUnmounted, watch } from 'vue';
+import { onUnmounted, type Ref, watch } from 'vue';
 
 import { useCardAnyFieldEditedWatcher } from './useCardAnyFieldEditedWatcher';
 import { useCardIsNew } from './useCardIsNew';
@@ -12,9 +13,18 @@ import { useItemCardSaveText } from './useItemCardSaveText';
 export const useCardComponent = <CardEntity>({
 	useCardStore,
 	onLoadErrorHandler,
+	manualSetup = false,
 }: {
 	useCardStore: StoreDefinition;
 	onLoadErrorHandler?: (err: unknown) => void;
+	/**
+	 * When `true` — the composable skips automatic initialization and
+	 * `onUnmounted` reset. Use this when you need manual control over
+	 * the card lifecycle (e.g. inside `useNestedCardComponent`).
+	 *
+	 * @default false
+	 */
+	manualSetup?: boolean;
 }) => {
 	const cardStore = useCardStore();
 
@@ -29,13 +39,9 @@ export const useCardComponent = <CardEntity>({
 
 	const { initialize, saveItem, $reset } = cardStore;
 
-	const { routeId } = useCardRouting({
-		itemId,
-	});
-
 	const { modelValue, validationFields, hasValidationErrors, validate } =
-		useCardValidation({
-			validationSchema,
+		useCardValidation<CardEntity>({
+			validationSchema: validationSchema as Ref<RegleSchema<CardEntity>>,
 		});
 
 	const { isAnyFieldEdited } = useCardAnyFieldEditedWatcher({
@@ -59,11 +65,17 @@ export const useCardComponent = <CardEntity>({
 		saveItem,
 	});
 
-	initialize({
-		itemId: routeId.value,
+	const { routeId } = useCardRouting({
+		itemId,
+		manualSetup,
 	});
 
-	onUnmounted($reset);
+	if (!manualSetup) {
+		initialize({
+			itemId: routeId.value,
+		});
+		onUnmounted($reset);
+	}
 
 	watch(error, (err) => {
 		if (onLoadErrorHandler) onLoadErrorHandler(err);

package/src/modules/card/composables/useCardRouting.ts

@@ -3,27 +3,47 @@ import { useRoute, useRouter } from 'vue-router';
 
 import type { CardItemId } from '../types/CardStore.types';
 
-export const useCardRouting = ({ itemId }: { itemId: Ref<CardItemId> }) => {
+/**
+ * Routing logic shared by top-level and nested card components.
+ *
+ * - `routeParamName` — which `route.params` key holds the item ID (default: `'id'`)
+ * - `parentId` — when provided, the card is treated as nested: URL is updated
+ *   only when a newly created item receives its server-assigned ID
+ */
+export const useCardRouting = ({
+	itemId,
+	routeParamName = 'id',
+	parentId,
+	manualSetup = false,
+}: {
+	itemId: Ref<CardItemId>;
+	routeParamName?: string;
+	parentId?: string;
+	manualSetup?: boolean;
+}) => {
 	const router = useRouter();
 	const route = useRoute();
 
-	const routeId = computed(() => {
-		return route.params.id;
-	});
+	const routeId = computed(() => route.params[routeParamName]);
 
-	const unwatch = watch(itemId, async (next, prev) => {
-		if (next && !prev) {
-			await router.replace({
-				params: {
-					...route.params,
-					id: next,
-				},
-			});
-			unwatch(); // Stop watching after successful redirect "null" -> "id"
-		}
-	});
+	if (!manualSetup) {
+		const unwatch = watch(itemId, async (next, prev) => {
+			if (next && !prev) {
+				if (!parentId || routeId.value === 'new') {
+					await router.replace({
+						params: {
+							...route.params,
+							[routeParamName]: next,
+						},
+					});
+				}
+				unwatch();
+			}
+		});
+	}
 
 	return {
 		routeId,
+		parentId,
 	};
 };

package/src/modules/card/composables/useNestedCardComponent.ts

@@ -0,0 +1,70 @@
+import { type StoreDefinition, storeToRefs } from 'pinia';
+import { watch } from 'vue';
+
+import { useCardComponent } from './useCardComponent';
+import { useCardRouting } from './useCardRouting';
+
+/**
+ * Composable for nested (popup) card components.
+ *
+ * Wraps `useCardComponent` with `manualSetup: true` and delegates
+ * routing to `useCardRouting`. Pass `parentId` from the component —
+ * its presence indicates a nested card context.
+ *
+ * @example
+ * ```ts
+ * const parentId = computed(() => route.params.id ?? null);
+ *
+ * const { isNew, hasValidationErrors, save } = useNestedCardComponent({
+ *   useCardStore: useSomeCardStore,
+ *   routeParamName: 'conditionId',
+ *   parentId,
+ * });
+ * ```
+ */
+export const useNestedCardComponent = <CardEntity>({
+	useCardStore,
+	onLoadErrorHandler,
+	routeParamName,
+	parentId,
+}: {
+	useCardStore: StoreDefinition;
+	onLoadErrorHandler?: (err: unknown) => void;
+	routeParamName: string;
+	parentId?: string;
+}) => {
+	const cardSetup = useCardComponent<CardEntity>({
+		useCardStore,
+		onLoadErrorHandler,
+		manualSetup: true,
+	});
+
+	const cardStore = useCardStore();
+	const { itemId } = storeToRefs(cardStore);
+	const { initialize, $reset } = cardStore;
+
+	const { routeId } = useCardRouting({
+		itemId,
+		routeParamName,
+		parentId,
+	});
+
+	watch(
+		routeId,
+		(value) => {
+			if (value) {
+				initialize({
+					itemId: value === 'new' ? null : value,
+					parentId,
+				});
+			} else {
+				$reset();
+			}
+		},
+		{
+			immediate: true,
+		},
+	);
+
+	return cardSetup;
+};

package/src/modules/card/index.ts

@@ -1,2 +1,4 @@
 export * from './composables/useCardComponent';
+export * from './composables/useNestedCardComponent';
 export * from './stores/createCardStore';
+export * from './types/CardValidationFields.types';

package/src/modules/card/types/CardValidationFields.types.ts

@@ -0,0 +1,5 @@
+import type { RegleSchemaFieldStatus } from '@regle/schemas';
+
+export type CardValidationFields<T> = {
+	[K in keyof T]: RegleSchemaFieldStatus<T[K]>;
+};

package/types/modules/card/composables/useCardComponent.d.ts

@@ -1,16 +1,25 @@
 import { type StoreDefinition } from 'pinia';
-export declare const useCardComponent: <CardEntity>({ useCardStore, onLoadErrorHandler, }: {
+import { type Ref } from 'vue';
+export declare const useCardComponent: <CardEntity>({ useCardStore, onLoadErrorHandler, manualSetup, }: {
     useCardStore: StoreDefinition;
     onLoadErrorHandler?: (err: unknown) => void;
+    /**
+     * When `true` — the composable skips automatic initialization and
+     * `onUnmounted` reset. Use this when you need manual control over
+     * the card lifecycle (e.g. inside `useNestedCardComponent`).
+     *
+     * @default false
+     */
+    manualSetup?: boolean;
 }) => {
-    modelValue: import("vue").ComputedRef<unknown>;
-    debouncedIsLoading: Readonly<import("vue").Ref<any, any>>;
-    originalItemInstance: import("vue").Ref<any, any> & import("vue").ComputedRef<any>;
-    error: import("vue").Ref<any, any> & import("vue").ComputedRef<any>;
+    modelValue: import("vue").ComputedRef<import("@regle/core").JoinDiscriminatedUnions<import("vue").UnwrapNestedRefs<CardEntity>> | import("@regle/schemas").RegleSchemaStatus<CardEntity, unknown, true>["$value"]>;
+    debouncedIsLoading: Readonly<Ref<any, any>>;
+    originalItemInstance: Ref<any, any> & import("vue").ComputedRef<any>;
+    error: Ref<any, any> & import("vue").ComputedRef<any>;
     isNew: import("vue").ComputedRef<boolean>;
     saveText: import("vue").ComputedRef<any>;
-    hasValidationErrors: import("vue").ComputedRef<boolean>;
-    isAnyFieldEdited: import("vue").Ref<boolean, boolean>;
-    validationFields: import("vue").ComputedRef<{} | ({} & {})>;
+    hasValidationErrors: import("vue").ComputedRef<boolean | import("@regle/schemas").RegleSchemaStatus<CardEntity, unknown, true>["$error"]>;
+    isAnyFieldEdited: Ref<boolean, boolean>;
+    validationFields: import("vue").ComputedRef<(import("@regle/core").HasNamedKeys<CardEntity> extends true ? { readonly [TKey in keyof import("@regle/core").JoinDiscriminatedUnions<CardEntity>]: TKey extends keyof import("@regle/core").JoinDiscriminatedUnions<CardEntity> ? import("@regle/schemas").InferRegleSchemaStatusType<NonNullable<import("@regle/core").JoinDiscriminatedUnions<CardEntity>[TKey]>, unknown> : never; } & { readonly [TKey_1 in keyof import("@regle/core").JoinDiscriminatedUnions<CardEntity> as TKey_1 extends keyof import("@regle/core").JoinDiscriminatedUnions<CardEntity> ? import("@regle/core").JoinDiscriminatedUnions<CardEntity>[TKey_1] extends NonNullable<import("@regle/core").JoinDiscriminatedUnions<CardEntity>[TKey_1]> ? TKey_1 : never : never]-?: TKey_1 extends keyof import("@regle/core").JoinDiscriminatedUnions<CardEntity> ? import("@regle/schemas").InferRegleSchemaStatusType<NonNullable<import("@regle/core").JoinDiscriminatedUnions<CardEntity>[TKey_1]>, unknown> : never; } : {}) | { [TIndex in keyof import("@regle/core").TupleToPlainObj<import("type-fest").UnionToTuple<CardEntity, import("type-fest").UnionToIntersection<CardEntity extends any ? () => CardEntity : never> extends () => (infer R) ? R : never>>]: TIndex extends `${infer TIndexInt extends number}` ? { [TKey_2 in keyof import("type-fest").UnionToTuple<CardEntity, import("type-fest").UnionToIntersection<CardEntity extends any ? () => CardEntity : never> extends () => (infer R) ? R : never>[TIndexInt] as NonNullable<import("type-fest").UnionToTuple<CardEntity, import("type-fest").UnionToIntersection<CardEntity extends any ? () => CardEntity : never> extends () => (infer R) ? R : never>[TIndexInt]>[TKey_2] extends import("type-fest").UnionToTuple<CardEntity, import("type-fest").UnionToIntersection<CardEntity extends any ? () => CardEntity : never> extends () => (infer R) ? R : never>[TIndexInt][TKey_2] ? TKey_2 : never]-?: import("@regle/schemas").InferRegleSchemaStatusType<NonNullable<import("type-fest").UnionToTuple<CardEntity, import("type-fest").UnionToIntersection<CardEntity extends any ? () => CardEntity : never> extends () => (infer R) ? R : never>[TIndexInt]>[TKey_2], unknown>; } & { [TKey_3 in keyof import("type-fest").UnionToTuple<CardEntity, import("type-fest").UnionToIntersection<CardEntity extends any ? () => CardEntity : never> extends () => (infer R) ? R : never>[TIndexInt] as NonNullable<import("type-fest").UnionToTuple<CardEntity, import("type-fest").UnionToIntersection<CardEntity extends any ? () => CardEntity : never> extends () => (infer R) ? R : never>[TIndexInt]>[TKey_3] extends import("type-fest").UnionToTuple<CardEntity, import("type-fest").UnionToIntersection<CardEntity extends any ? () => CardEntity : never> extends () => (infer R) ? R : never>[TIndexInt][TKey_3] ? never : TKey_3]?: import("@regle/schemas").InferRegleSchemaStatusType<NonNullable<import("type-fest").UnionToTuple<CardEntity, import("type-fest").UnionToIntersection<CardEntity extends any ? () => CardEntity : never> extends () => (infer R) ? R : never>[TIndexInt]>[TKey_3], unknown>; } : {}; }[keyof import("type-fest").UnionToTuple<CardEntity, import("type-fest").UnionToIntersection<CardEntity extends any ? () => CardEntity : never> extends () => (infer R) ? R : never> & `${number}`]>;
     save: () => Promise<unknown>;
 };

package/types/modules/card/composables/useCardRouting.d.ts

@@ -1,7 +1,18 @@
 import { type Ref } from 'vue';
 import type { CardItemId } from '../types/CardStore.types';
-export declare const useCardRouting: ({ itemId }: {
+/**
+ * Routing logic shared by top-level and nested card components.
+ *
+ * - `routeParamName` — which `route.params` key holds the item ID (default: `'id'`)
+ * - `parentId` — when provided, the card is treated as nested: URL is updated
+ *   only when a newly created item receives its server-assigned ID
+ */
+export declare const useCardRouting: ({ itemId, routeParamName, parentId, manualSetup, }: {
     itemId: Ref<CardItemId>;
+    routeParamName?: string;
+    parentId?: string;
+    manualSetup?: boolean;
 }) => {
     routeId: import("vue").ComputedRef<any>;
+    parentId: string;
 };

package/types/modules/card/composables/useNestedCardComponent.d.ts

@@ -0,0 +1,36 @@
+import { type StoreDefinition } from 'pinia';
+/**
+ * Composable for nested (popup) card components.
+ *
+ * Wraps `useCardComponent` with `manualSetup: true` and delegates
+ * routing to `useCardRouting`. Pass `parentId` from the component —
+ * its presence indicates a nested card context.
+ *
+ * @example
+ * ```ts
+ * const parentId = computed(() => route.params.id ?? null);
+ *
+ * const { isNew, hasValidationErrors, save } = useNestedCardComponent({
+ *   useCardStore: useSomeCardStore,
+ *   routeParamName: 'conditionId',
+ *   parentId,
+ * });
+ * ```
+ */
+export declare const useNestedCardComponent: <CardEntity>({ useCardStore, onLoadErrorHandler, routeParamName, parentId, }: {
+    useCardStore: StoreDefinition;
+    onLoadErrorHandler?: (err: unknown) => void;
+    routeParamName: string;
+    parentId?: string;
+}) => {
+    modelValue: import("vue").ComputedRef<import("@regle/core").JoinDiscriminatedUnions<import("vue").UnwrapNestedRefs<CardEntity>> | import("@regle/schemas").RegleSchemaStatus<CardEntity, unknown, true>["$value"]>;
+    debouncedIsLoading: Readonly<import("vue").Ref<any, any>>;
+    originalItemInstance: import("vue").Ref<any, any> & import("vue").ComputedRef<any>;
+    error: import("vue").Ref<any, any> & import("vue").ComputedRef<any>;
+    isNew: import("vue").ComputedRef<boolean>;
+    saveText: import("vue").ComputedRef<any>;
+    hasValidationErrors: import("vue").ComputedRef<boolean | import("@regle/schemas").RegleSchemaStatus<CardEntity, unknown, true>["$error"]>;
+    isAnyFieldEdited: import("vue").Ref<boolean, boolean>;
+    validationFields: import("vue").ComputedRef<(import("@regle/core").HasNamedKeys<CardEntity> extends true ? { readonly [TKey in keyof import("@regle/core").JoinDiscriminatedUnions<CardEntity>]: TKey extends keyof import("@regle/core").JoinDiscriminatedUnions<CardEntity> ? import("@regle/schemas").InferRegleSchemaStatusType<NonNullable<import("@regle/core").JoinDiscriminatedUnions<CardEntity>[TKey]>, unknown> : never; } & { readonly [TKey_1 in keyof import("@regle/core").JoinDiscriminatedUnions<CardEntity> as TKey_1 extends keyof import("@regle/core").JoinDiscriminatedUnions<CardEntity> ? import("@regle/core").JoinDiscriminatedUnions<CardEntity>[TKey_1] extends NonNullable<import("@regle/core").JoinDiscriminatedUnions<CardEntity>[TKey_1]> ? TKey_1 : never : never]-?: TKey_1 extends keyof import("@regle/core").JoinDiscriminatedUnions<CardEntity> ? import("@regle/schemas").InferRegleSchemaStatusType<NonNullable<import("@regle/core").JoinDiscriminatedUnions<CardEntity>[TKey_1]>, unknown> : never; } : {}) | { [TIndex in keyof import("@regle/core").TupleToPlainObj<import("type-fest").UnionToTuple<CardEntity, import("type-fest").UnionToIntersection<CardEntity extends any ? () => CardEntity : never> extends () => (infer R) ? R : never>>]: TIndex extends `${infer TIndexInt extends number}` ? { [TKey_2 in keyof import("type-fest").UnionToTuple<CardEntity, import("type-fest").UnionToIntersection<CardEntity extends any ? () => CardEntity : never> extends () => (infer R) ? R : never>[TIndexInt] as NonNullable<import("type-fest").UnionToTuple<CardEntity, import("type-fest").UnionToIntersection<CardEntity extends any ? () => CardEntity : never> extends () => (infer R) ? R : never>[TIndexInt]>[TKey_2] extends import("type-fest").UnionToTuple<CardEntity, import("type-fest").UnionToIntersection<CardEntity extends any ? () => CardEntity : never> extends () => (infer R) ? R : never>[TIndexInt][TKey_2] ? TKey_2 : never]-?: import("@regle/schemas").InferRegleSchemaStatusType<NonNullable<import("type-fest").UnionToTuple<CardEntity, import("type-fest").UnionToIntersection<CardEntity extends any ? () => CardEntity : never> extends () => (infer R) ? R : never>[TIndexInt]>[TKey_2], unknown>; } & { [TKey_3 in keyof import("type-fest").UnionToTuple<CardEntity, import("type-fest").UnionToIntersection<CardEntity extends any ? () => CardEntity : never> extends () => (infer R) ? R : never>[TIndexInt] as NonNullable<import("type-fest").UnionToTuple<CardEntity, import("type-fest").UnionToIntersection<CardEntity extends any ? () => CardEntity : never> extends () => (infer R) ? R : never>[TIndexInt]>[TKey_3] extends import("type-fest").UnionToTuple<CardEntity, import("type-fest").UnionToIntersection<CardEntity extends any ? () => CardEntity : never> extends () => (infer R) ? R : never>[TIndexInt][TKey_3] ? never : TKey_3]?: import("@regle/schemas").InferRegleSchemaStatusType<NonNullable<import("type-fest").UnionToTuple<CardEntity, import("type-fest").UnionToIntersection<CardEntity extends any ? () => CardEntity : never> extends () => (infer R) ? R : never>[TIndexInt]>[TKey_3], unknown>; } : {}; }[keyof import("type-fest").UnionToTuple<CardEntity, import("type-fest").UnionToIntersection<CardEntity extends any ? () => CardEntity : never> extends () => (infer R) ? R : never> & `${number}`]>;
+    save: () => Promise<unknown>;
+};

package/types/modules/card/index.d.ts

@@ -1,2 +1,4 @@
 export * from './composables/useCardComponent';
+export * from './composables/useNestedCardComponent';
 export * from './stores/createCardStore';
+export * from './types/CardValidationFields.types';

package/types/modules/card/types/CardValidationFields.types.d.ts

@@ -0,0 +1,4 @@
+import type { RegleSchemaFieldStatus } from '@regle/schemas';
+export type CardValidationFields<T> = {
+    [K in keyof T]: RegleSchemaFieldStatus<T[K]>;
+};