@webitel/ui-datalist 1.1.75 → 1.1.76

package/package.json

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

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

@@ -0,0 +1,30 @@
+import { useRoute, useRouter } from 'vue-router';
+
+/**
+ * Opens a nested-card popup on the same route by setting/replacing its
+ * optional route param (e.g. `phones/:commId?`). `open()` or `open('new')`
+ * opens the "add" card, `open(id)` opens an existing one.
+ */
+export const useCardListNavigation = ({
+	routeParamName,
+}: {
+	routeParamName: string;
+}) => {
+	const route = useRoute();
+	const router = useRouter();
+
+	const open = (id: string = 'new') => {
+		return router.push({
+			name: route.name,
+			params: {
+				...route.params,
+				[routeParamName]: id,
+			},
+			query: route.query,
+		});
+	};
+
+	return {
+		open,
+	};
+};

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

@@ -0,0 +1,38 @@
+import { type ComputedRef, computed, type Ref } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+
+export interface CardTab {
+	pathName: string;
+	[key: string]: unknown;
+}
+
+export const useCardTabs = <T extends CardTab>(
+	tabs: Ref<T[]> | ComputedRef<T[]>,
+) => {
+	const router = useRouter();
+	const route = useRoute();
+
+	const currentTab = computed<T | undefined>(() => {
+		return (
+			tabs.value.find(({ pathName }) =>
+				route.matched.some(({ name }) => name === pathName),
+			) || tabs.value[0]
+		);
+	});
+
+	function changeTab(tab: T) {
+		const { params, query, hash } = route;
+
+		return router.push({
+			name: tab.pathName,
+			params,
+			query,
+			hash,
+		});
+	}
+
+	return {
+		currentTab,
+		changeTab,
+	};
+};

package/src/modules/card/index.ts

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