@thelacanians/vue-native-navigation 0.1.0

package/dist/index.cjs

@@ -0,0 +1,393 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  RouterView: () => RouterView,
+  VNavigationBar: () => VNavigationBar,
+  VTabBar: () => VTabBar,
+  createRouter: () => createRouter,
+  createTabNavigator: () => createTabNavigator,
+  useRoute: () => useRoute,
+  useRouter: () => useRouter
+});
+module.exports = __toCommonJS(index_exports);
+var import_runtime_core = require("@vue/runtime-core");
+var ROUTER_KEY = /* @__PURE__ */ Symbol("router");
+var ROUTE_KEY = /* @__PURE__ */ Symbol("route");
+var keyCounter = 0;
+function createRouter(routes) {
+  if (routes.length === 0) {
+    throw new Error("[vue-native/navigation] createRouter requires at least one route");
+  }
+  const routeMap = new Map(routes.map((r) => [r.name, r]));
+  const initialEntry = { config: routes[0], params: {}, key: keyCounter++ };
+  const stack = (0, import_runtime_core.ref)([initialEntry]);
+  const currentRoute = (0, import_runtime_core.shallowRef)(initialEntry);
+  const canGoBack = (0, import_runtime_core.computed)(() => stack.value.length > 1);
+  function navigate(name, params = {}) {
+    const config = routeMap.get(name);
+    if (!config) {
+      console.warn(`[vue-native/navigation] Route "${name}" not found`);
+      return;
+    }
+    const entry = { config, params, key: keyCounter++ };
+    stack.value = [...stack.value, entry];
+    currentRoute.value = entry;
+  }
+  function goBack() {
+    if (stack.value.length <= 1) return;
+    const newStack = stack.value.slice(0, -1);
+    stack.value = newStack;
+    currentRoute.value = newStack[newStack.length - 1];
+  }
+  function replace(name, params = {}) {
+    const config = routeMap.get(name);
+    if (!config) {
+      console.warn(`[vue-native/navigation] Route "${name}" not found`);
+      return;
+    }
+    const entry = { config, params, key: keyCounter++ };
+    stack.value = [...stack.value.slice(0, -1), entry];
+    currentRoute.value = entry;
+  }
+  function reset(name, params = {}) {
+    const config = routeMap.get(name);
+    if (!config) {
+      console.warn(`[vue-native/navigation] Route "${name}" not found`);
+      return;
+    }
+    const entry = { config, params, key: keyCounter++ };
+    stack.value = [entry];
+    currentRoute.value = entry;
+  }
+  const router = {
+    currentRoute,
+    stack,
+    canGoBack,
+    navigate,
+    push: navigate,
+    goBack,
+    pop: goBack,
+    replace,
+    reset,
+    install(app) {
+      app.provide(ROUTER_KEY, router);
+    }
+  };
+  return router;
+}
+function useRouter() {
+  const router = (0, import_runtime_core.inject)(ROUTER_KEY);
+  if (!router) {
+    throw new Error(
+      "[vue-native/navigation] useRouter() called outside of router context. Make sure app.use(router) is called."
+    );
+  }
+  return router;
+}
+function useRoute() {
+  const perScreenRoute = (0, import_runtime_core.inject)(ROUTE_KEY);
+  if (perScreenRoute) return perScreenRoute;
+  const router = useRouter();
+  return (0, import_runtime_core.computed)(() => ({
+    name: router.currentRoute.value.config.name,
+    params: router.currentRoute.value.params,
+    options: router.currentRoute.value.config.options ?? {}
+  }));
+}
+var RouteProvider = (0, import_runtime_core.defineComponent)({
+  name: "RouteProvider",
+  props: {
+    entry: { type: Object, required: true }
+  },
+  setup(props, { slots }) {
+    const routeLocation = (0, import_runtime_core.computed)(() => ({
+      name: props.entry.config.name,
+      params: props.entry.params,
+      options: props.entry.config.options ?? {}
+    }));
+    (0, import_runtime_core.provide)(ROUTE_KEY, routeLocation);
+    return () => slots.default?.();
+  }
+});
+var RouterView = (0, import_runtime_core.defineComponent)({
+  name: "RouterView",
+  setup() {
+    const router = useRouter();
+    return () => {
+      const entries = router.stack.value;
+      return (0, import_runtime_core.h)(
+        "VView",
+        {
+          style: {
+            flex: 1,
+            overflow: "hidden",
+            position: "relative"
+          }
+        },
+        entries.map((entry, index) => {
+          const isTop = index === entries.length - 1;
+          return (0, import_runtime_core.h)(
+            "VView",
+            {
+              key: entry.key,
+              style: {
+                position: "absolute",
+                top: 0,
+                left: 0,
+                right: 0,
+                bottom: 0,
+                transform: isTop ? [] : [{ translateX: -50 }],
+                // Hide off-screen screens from the accessibility tree and
+                // prevent touch events from reaching them.
+                opacity: isTop ? 1 : 0
+              }
+            },
+            [
+              (0, import_runtime_core.h)(
+                RouteProvider,
+                { entry },
+                () => (0, import_runtime_core.h)(entry.config.component, { routeParams: entry.params })
+              )
+            ]
+          );
+        })
+      );
+    };
+  }
+});
+var VNavigationBar = (0, import_runtime_core.defineComponent)({
+  name: "VNavigationBar",
+  props: {
+    /** Screen title, rendered centered in the bar. */
+    title: { type: String, default: "" },
+    /** Whether to show the back chevron + backTitle on the left. */
+    showBack: { type: Boolean, default: false },
+    /** Text shown next to the back chevron. Defaults to "Back". */
+    backTitle: { type: String, default: "Back" },
+    /** Background colour of the bar. */
+    backgroundColor: { type: String, default: "#FFFFFF" },
+    /** Colour used for the back button text. */
+    tintColor: { type: String, default: "#007AFF" },
+    /** Colour of the title text. */
+    titleColor: { type: String, default: "#000000" }
+  },
+  emits: ["back"],
+  setup(props, { emit }) {
+    return () => (0, import_runtime_core.h)(
+      "VView",
+      {
+        style: {
+          flexDirection: "row",
+          alignItems: "center",
+          height: 44,
+          backgroundColor: props.backgroundColor,
+          paddingHorizontal: 16,
+          borderBottomWidth: 0.5,
+          borderBottomColor: "#C8C8CC"
+        }
+      },
+      [
+        // ── Left slot: back button or spacer ──────────────────────────────
+        props.showBack ? (0, import_runtime_core.h)(
+          "VButton",
+          {
+            style: {
+              flexDirection: "row",
+              alignItems: "center",
+              paddingHorizontal: 0,
+              paddingVertical: 8,
+              minWidth: 60,
+              backgroundColor: "transparent"
+            },
+            onPress: () => emit("back")
+          },
+          () => (0, import_runtime_core.h)(
+            "VText",
+            { style: { color: props.tintColor, fontSize: 17 } },
+            () => `\u2039 ${props.backTitle}`
+          )
+        ) : (0, import_runtime_core.h)("VView", { style: { minWidth: 60 } }),
+        // ── Center: title ────────────────────────────────────────────────
+        (0, import_runtime_core.h)("VView", { style: { flex: 1, alignItems: "center" } }, [
+          (0, import_runtime_core.h)(
+            "VText",
+            {
+              style: {
+                fontSize: 17,
+                fontWeight: "600",
+                color: props.titleColor
+              }
+            },
+            () => props.title
+          )
+        ]),
+        // ── Right slot: spacer to balance left side ───────────────────────
+        (0, import_runtime_core.h)("VView", { style: { minWidth: 60 } })
+      ]
+    );
+  }
+});
+var VTabBar = (0, import_runtime_core.defineComponent)({
+  name: "VTabBar",
+  props: {
+    /** Array of tab descriptors. */
+    tabs: { type: Array, required: true },
+    /** Name of the currently active tab (v-model). */
+    modelValue: { type: String, default: "" },
+    /** Text / icon colour for the active tab. */
+    activeColor: { type: String, default: "#007AFF" },
+    /** Text / icon colour for inactive tabs. */
+    inactiveColor: { type: String, default: "#8E8E93" },
+    /** Background colour of the tab bar. */
+    backgroundColor: { type: String, default: "#F9F9F9" }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    return () => (0, import_runtime_core.h)(
+      "VView",
+      {
+        style: {
+          flexDirection: "row",
+          backgroundColor: props.backgroundColor,
+          borderTopWidth: 0.5,
+          borderTopColor: "#C8C8CC",
+          paddingBottom: 4
+        }
+      },
+      props.tabs.map((tab) => {
+        const isActive = props.modelValue === tab.name;
+        return (0, import_runtime_core.h)(
+          "VButton",
+          {
+            key: tab.name,
+            style: {
+              flex: 1,
+              alignItems: "center",
+              paddingVertical: 8,
+              backgroundColor: "transparent"
+            },
+            onPress: () => emit("update:modelValue", tab.name)
+          },
+          () => [
+            // Icon (optional)
+            tab.icon != null ? (0, import_runtime_core.h)(
+              "VText",
+              {
+                style: {
+                  fontSize: 24,
+                  marginBottom: 2,
+                  color: isActive ? props.activeColor : props.inactiveColor
+                }
+              },
+              () => tab.icon
+            ) : null,
+            // Label
+            (0, import_runtime_core.h)(
+              "VText",
+              {
+                style: {
+                  fontSize: 10,
+                  color: isActive ? props.activeColor : props.inactiveColor,
+                  fontWeight: isActive ? "600" : "400"
+                }
+              },
+              () => tab.label ?? tab.name
+            )
+          ]
+        );
+      })
+    );
+  }
+});
+function createTabNavigator() {
+  const activeTab = (0, import_runtime_core.ref)("");
+  const TabNavigator = (0, import_runtime_core.defineComponent)({
+    name: "TabNavigator",
+    props: {
+      /** Ordered list of tab screen descriptors. */
+      screens: { type: Array, required: true },
+      /** Which tab is shown first. Defaults to the first screen. */
+      initialTab: { type: String, default: "" },
+      /** Active tab icon / label colour. */
+      activeColor: { type: String, default: "#007AFF" },
+      /** Inactive tab icon / label colour. */
+      inactiveColor: { type: String, default: "#8E8E93" },
+      /** Background colour of the tab bar. */
+      tabBarBackgroundColor: { type: String, default: "#F9F9F9" }
+    },
+    setup(props) {
+      return () => {
+        const screens = props.screens;
+        if (screens.length === 0) return null;
+        if (activeTab.value === "") {
+          activeTab.value = props.initialTab || screens[0].name;
+        }
+        const currentScreen = screens.find((s) => s.name === activeTab.value) ?? screens[0];
+        const tabs = screens.map((s) => ({
+          name: s.name,
+          label: s.label,
+          icon: s.icon
+        }));
+        return (0, import_runtime_core.h)("VView", { style: { flex: 1 } }, [
+          // ── Screen area ─────────────────────────────────────────────────
+          (0, import_runtime_core.h)("VView", { style: { flex: 1 } }, [
+            (0, import_runtime_core.h)(currentScreen.component)
+          ]),
+          // ── Tab bar ──────────────────────────────────────────────────────
+          (0, import_runtime_core.h)(VTabBar, {
+            tabs,
+            modelValue: activeTab.value,
+            activeColor: props.activeColor,
+            inactiveColor: props.inactiveColor,
+            backgroundColor: props.tabBarBackgroundColor,
+            "onUpdate:modelValue": (name) => {
+              activeTab.value = name;
+            }
+          })
+        ]);
+      };
+    }
+  });
+  const TabScreen = (0, import_runtime_core.defineComponent)({
+    name: "TabScreen",
+    props: {
+      name: { type: String, required: true },
+      label: { type: String, default: void 0 },
+      icon: { type: String, default: void 0 },
+      component: { type: Object, required: true }
+    },
+    setup() {
+      return () => null;
+    }
+  });
+  return { TabNavigator, TabScreen, activeTab };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  RouterView,
+  VNavigationBar,
+  VTabBar,
+  createRouter,
+  createTabNavigator,
+  useRoute,
+  useRouter
+});