@xy-planning-network/trees 0.9.2-rc1 → 0.9.2-rc2

package/types/composables/nav.d.ts

@@ -1,4 +1,4 @@
-import { Component, FunctionalComponent, MaybeRef, RenderFunction } from "vue";
+import { Component, FunctionalComponent, MaybeRef, Ref, RenderFunction } from "vue";
 export interface Item {
     icon?: Component | RenderFunction;
     name: string;
@@ -33,34 +33,52 @@ export interface UseTabHistoryOpts {
      */
     paramName?: string;
 }
+/**
+ * UseTabHistory is a convenience composable for adding history
+ * support to tab based navigation.
+ */
+export interface UseTabHistory {
+    /**
+     * activeTab is a ref of currently visible tab.
+     * The value typically should be one of tabs[number].value.
+     */
+    activeTab: Ref<string>;
+    /**
+     * isActiveTab is a helper method for determining if a string value
+     * is the currently active tab.  This is useful in templates where
+     * content is conditionally displayed based on the activeTab.
+     *
+     * @param tab string typically should be one of tabs[number].value.
+     * @return boolean
+     */
+    isActiveTab: (tab: string) => boolean;
+    /**
+     * tabs is the Ref of initialized tabs.
+     */
+    tabs: Ref<{
+        label: string;
+        value: string;
+    }[]>;
+}
 /**
  * useTabHistory
  *
  * Example Usage:
  *
- * const {activeTab, tabs} = useTabHistory([{label: "Tab One", value: "tab-1"}, {label: "Tab Two", value: "tab-2"}]})
+ * const {activeTab, isActiveTab, tabs} = useTabHistory([{label: "Tab One", value: "tab-1"}, {label: "Tab Two", value: "tab-2"}]})
  *
  * <Tabs v-model="activeTab" :tabs="tabs" />
  *
- * <div v-if="activeTab === 'tab-1'">Tab 1 Content</div>
- * <div v-if="activeTab === 'tab-2'">Tab 2 Content</div>
+ * <div v-if="isActiveTab('tab-1')">Tab 1 Content</div>
+ * <div v-if="isActiveTab('tab-2')">Tab 2 Content</div>
  *
  * @param opts UseTabHistoryOpts
- * @return {activeTab: Ref<string>, tabs: Ref<{labe: string, value: string}[]>}
+ * @return UseTabHistory
  */
 export declare const useTabHistory: (initialTabs: MaybeRef<{
     label: string;
     value: string;
-}[]>, opts?: UseTabHistoryOpts) => {
-    activeTab: import("vue").Ref<string>;
-    tabs: import("vue").Ref<{
-        label: string;
-        value: string;
-    }[] | {
-        label: string;
-        value: string;
-    }[]>;
-};
+}[]>, opts?: UseTabHistoryOpts) => UseTabHistory;
 /**
  * URLParamValue is the set of value types that are
  * currently spec'd to be parsed into a query string.
@@ -136,4 +154,4 @@ export type URLParams<T> = {
  * @param initial any Record<string, URLParamValue> like interface
  * @return Ref<T>
  */
-export declare const useUrlSearchParams: <T>(initial: URLParams<T>) => import("vue").Ref<import("vue").UnwrapRef<URLParams<T>>>;
+export declare const useUrlSearchParams: <T>(initial: URLParams<T>) => Ref<import("vue").UnwrapRef<URLParams<T>>>;