@thelacanians/vue-native-navigation 0.1.0

package/dist/index.d.cts

@@ -0,0 +1,376 @@
+import * as _vue_runtime_core from '@vue/runtime-core';
+import { Component, ShallowRef, Ref, ComputedRef } from '@vue/runtime-core';
+
+interface RouteConfig {
+    name: string;
+    component: Component;
+    options?: RouteOptions;
+}
+interface RouteOptions {
+    title?: string;
+    headerShown?: boolean;
+    animation?: 'push' | 'modal' | 'fade' | 'none';
+    tabBarLabel?: string;
+    tabBarIcon?: string;
+}
+/**
+ * @deprecated Use RouteOptions instead.
+ */
+type NavigationOptions = RouteOptions;
+interface RouteEntry {
+    config: RouteConfig;
+    params: Record<string, any>;
+    key: number;
+}
+interface RouteLocation {
+    name: string;
+    params: Record<string, any>;
+    options: RouteOptions;
+}
+interface RouterInstance {
+    /** The currently visible route entry (shallowRef). */
+    currentRoute: ShallowRef<RouteEntry>;
+    /** Full navigation stack (ref). */
+    stack: Ref<RouteEntry[]>;
+    /** Push a new route onto the stack. */
+    navigate(name: string, params?: Record<string, any>): void;
+    /** Alias for navigate — preferred name in new API. */
+    push(name: string, params?: Record<string, any>): void;
+    /** Pop the current route off the stack. */
+    goBack(): void;
+    /** Alias for goBack — preferred name in new API. */
+    pop(): void;
+    /** Replace the current route without adding to the stack. */
+    replace(name: string, params?: Record<string, any>): void;
+    /** Reset the stack to a single route. */
+    reset(name: string, params?: Record<string, any>): void;
+    /** Whether there is a previous route to go back to. */
+    canGoBack: ComputedRef<boolean>;
+    /** Install into a Vue app (app.use(router)). */
+    install(app: any): void;
+}
+interface TabBarItem {
+    name: string;
+    label?: string;
+    icon?: string;
+}
+declare function createRouter(routes: RouteConfig[]): RouterInstance;
+declare function useRouter(): RouterInstance;
+/**
+ * Returns a ComputedRef<RouteLocation> for the nearest enclosing route screen.
+ * When used inside RouterView, each screen gets its own route context.
+ * Falls back to the global router's currentRoute if no per-screen context exists.
+ */
+declare function useRoute(): ComputedRef<RouteLocation>;
+/**
+ * Renders the router's navigation stack.
+ *
+ * All routes in the history are mounted simultaneously (so back navigation
+ * is instant — no remounting). Only the top screen is fully visible; screens
+ * below it are slid off to the right via `transform: [{ translateX: 1000 }]`.
+ *
+ * The top screen slides in from the right on push and slides back out to the
+ * right on pop, giving the standard iOS "slide" push/pop feel.
+ *
+ * Per-screen route context is provided via RouteProvider so that useRoute()
+ * inside each screen component returns the correct route.
+ *
+ * @example
+ * <RouterView />
+ */
+declare const RouterView: _vue_runtime_core.DefineComponent<{}, () => _vue_runtime_core.VNode<_vue_runtime_core.RendererNode, _vue_runtime_core.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, _vue_runtime_core.ComponentOptionsMixin, _vue_runtime_core.ComponentOptionsMixin, {}, string, _vue_runtime_core.PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, _vue_runtime_core.ComponentProvideOptions, true, {}, any>;
+/**
+ * A navigation header bar with a centered title and an optional back button.
+ * Renders as a 44pt tall UIKit-style navigation bar at the top of a screen.
+ *
+ * @example
+ * const router = useRouter()
+ * const canGoBack = router.canGoBack
+ *
+ * <VNavigationBar
+ *   title="Settings"
+ *   :show-back="canGoBack"
+ *   @back="router.pop()"
+ * />
+ */
+declare const VNavigationBar: _vue_runtime_core.DefineComponent<_vue_runtime_core.ExtractPropTypes<{
+    /** Screen title, rendered centered in the bar. */
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Whether to show the back chevron + backTitle on the left. */
+    showBack: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Text shown next to the back chevron. Defaults to "Back". */
+    backTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Background colour of the bar. */
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Colour used for the back button text. */
+    tintColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Colour of the title text. */
+    titleColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => _vue_runtime_core.VNode<_vue_runtime_core.RendererNode, _vue_runtime_core.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, _vue_runtime_core.ComponentOptionsMixin, _vue_runtime_core.ComponentOptionsMixin, "back"[], "back", _vue_runtime_core.PublicProps, Readonly<_vue_runtime_core.ExtractPropTypes<{
+    /** Screen title, rendered centered in the bar. */
+    title: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Whether to show the back chevron + backTitle on the left. */
+    showBack: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    /** Text shown next to the back chevron. Defaults to "Back". */
+    backTitle: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Background colour of the bar. */
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Colour used for the back button text. */
+    tintColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Colour of the title text. */
+    titleColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    onBack?: ((...args: any[]) => any) | undefined;
+}>, {
+    title: string;
+    showBack: boolean;
+    backTitle: string;
+    backgroundColor: string;
+    tintColor: string;
+    titleColor: string;
+}, {}, {}, {}, string, _vue_runtime_core.ComponentProvideOptions, true, {}, any>;
+/**
+ * A bottom tab bar that lets users switch between top-level sections.
+ * Uses v-model (modelValue / update:modelValue) to track the active tab name.
+ *
+ * @example
+ * const activeTab = ref('home')
+ *
+ * <VTabBar
+ *   :tabs="[
+ *     { name: 'home',     label: 'Home',     icon: '🏠' },
+ *     { name: 'settings', label: 'Settings', icon: '⚙️' },
+ *   ]"
+ *   v-model="activeTab"
+ * />
+ */
+declare const VTabBar: _vue_runtime_core.DefineComponent<_vue_runtime_core.ExtractPropTypes<{
+    /** Array of tab descriptors. */
+    tabs: {
+        type: () => TabBarItem[];
+        required: true;
+    };
+    /** Name of the currently active tab (v-model). */
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Text / icon colour for the active tab. */
+    activeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Text / icon colour for inactive tabs. */
+    inactiveColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Background colour of the tab bar. */
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, () => _vue_runtime_core.VNode<_vue_runtime_core.RendererNode, _vue_runtime_core.RendererElement, {
+    [key: string]: any;
+}>, {}, {}, {}, _vue_runtime_core.ComponentOptionsMixin, _vue_runtime_core.ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", _vue_runtime_core.PublicProps, Readonly<_vue_runtime_core.ExtractPropTypes<{
+    /** Array of tab descriptors. */
+    tabs: {
+        type: () => TabBarItem[];
+        required: true;
+    };
+    /** Name of the currently active tab (v-model). */
+    modelValue: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Text / icon colour for the active tab. */
+    activeColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Text / icon colour for inactive tabs. */
+    inactiveColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    /** Background colour of the tab bar. */
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {
+    backgroundColor: string;
+    modelValue: string;
+    activeColor: string;
+    inactiveColor: string;
+}, {}, {}, {}, string, _vue_runtime_core.ComponentProvideOptions, true, {}, any>;
+interface TabScreenConfig {
+    name: string;
+    label?: string;
+    icon?: string;
+    component: Component;
+}
+/**
+ * Create a self-contained tab-based navigator.
+ *
+ * Returns a `TabNavigator` component and a reactive `activeTab` ref.
+ * Each screen is declared using `TabScreen` props passed directly to
+ * `TabNavigator` via the `screens` prop, keeping the setup ergonomic
+ * without requiring render-function slot tricks.
+ *
+ * @example
+ * const { TabNavigator } = createTabNavigator()
+ *
+ * // In your render / template:
+ * <TabNavigator
+ *   :screens="[
+ *     { name: 'home',     label: 'Home',     icon: '🏠', component: HomeView },
+ *     { name: 'settings', label: 'Settings', icon: '⚙️', component: SettingsView },
+ *   ]"
+ * />
+ */
+declare function createTabNavigator(): {
+    TabNavigator: _vue_runtime_core.DefineComponent<_vue_runtime_core.ExtractPropTypes<{
+        /** Ordered list of tab screen descriptors. */
+        screens: {
+            type: () => TabScreenConfig[];
+            required: true;
+        };
+        /** Which tab is shown first. Defaults to the first screen. */
+        initialTab: {
+            type: StringConstructor;
+            default: string;
+        };
+        /** Active tab icon / label colour. */
+        activeColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        /** Inactive tab icon / label colour. */
+        inactiveColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        /** Background colour of the tab bar. */
+        tabBarBackgroundColor: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, () => _vue_runtime_core.VNode<_vue_runtime_core.RendererNode, _vue_runtime_core.RendererElement, {
+        [key: string]: any;
+    }> | null, {}, {}, {}, _vue_runtime_core.ComponentOptionsMixin, _vue_runtime_core.ComponentOptionsMixin, {}, string, _vue_runtime_core.PublicProps, Readonly<_vue_runtime_core.ExtractPropTypes<{
+        /** Ordered list of tab screen descriptors. */
+        screens: {
+            type: () => TabScreenConfig[];
+            required: true;
+        };
+        /** Which tab is shown first. Defaults to the first screen. */
+        initialTab: {
+            type: StringConstructor;
+            default: string;
+        };
+        /** Active tab icon / label colour. */
+        activeColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        /** Inactive tab icon / label colour. */
+        inactiveColor: {
+            type: StringConstructor;
+            default: string;
+        };
+        /** Background colour of the tab bar. */
+        tabBarBackgroundColor: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{}>, {
+        activeColor: string;
+        inactiveColor: string;
+        initialTab: string;
+        tabBarBackgroundColor: string;
+    }, {}, {}, {}, string, _vue_runtime_core.ComponentProvideOptions, true, {}, any>;
+    TabScreen: _vue_runtime_core.DefineComponent<_vue_runtime_core.ExtractPropTypes<{
+        name: {
+            type: StringConstructor;
+            required: true;
+        };
+        label: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        icon: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        component: {
+            type: () => Component;
+            required: true;
+        };
+    }>, () => null, {}, {}, {}, _vue_runtime_core.ComponentOptionsMixin, _vue_runtime_core.ComponentOptionsMixin, {}, string, _vue_runtime_core.PublicProps, Readonly<_vue_runtime_core.ExtractPropTypes<{
+        name: {
+            type: StringConstructor;
+            required: true;
+        };
+        label: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        icon: {
+            type: StringConstructor;
+            default: undefined;
+        };
+        component: {
+            type: () => Component;
+            required: true;
+        };
+    }>> & Readonly<{}>, {
+        label: string;
+        icon: string;
+    }, {}, {}, {}, string, _vue_runtime_core.ComponentProvideOptions, true, {}, any>;
+    activeTab: Ref<string, string>;
+};
+
+export { type NavigationOptions, type RouteConfig, type RouteEntry, type RouteLocation, type RouteOptions, type RouterInstance, RouterView, type TabBarItem, type TabScreenConfig, VNavigationBar, VTabBar, createRouter, createTabNavigator, useRoute, useRouter };