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

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.
@@ -110,6 +128,7 @@ export type URLParams<T> = {
  * interface SearchParams {
  *    q: string
  *    isActive: boolean
+ *    attributes: string[]
  * }
  *
  * // NOTE: initial params values should come from the
@@ -123,17 +142,20 @@ export type URLParams<T> = {
  *
  * <BaseInput v-model="searchParams.q" label="Search" type="search" />
  * <Checkbox v-model="searchParams.isActive" label="Is Active" />
+ * <MultiCheckboxes v-model="searchParams.attributes" label="Attributes" :options="attrOpts" />
  *
- *  When q = "jimothy bobbitz" and isActive = false
- * /path?q=jimothy+bobbitz
+ * When initialized as {q: "", isActive: false, attributes: []}
+ * the query string is not immediately updated.  Updates
+ * begin once the Ref is mutated.
+ * /path
  *
- * When q = "jimothy bobbitz" and isActive = true
- * /path?q=jimothy+bobbitz&isActive=true
+ * When mutated to {q: "jimothy bobbitz", isActive: true, attributes: ['att-1', 'att-3']}
+ * /path?q=jimothy+bobbitz&isActive=true&attributes=att-1&attributes=att-3
  *
- * * When q = "" and isActive = false
- * /path
+ * When mutated later back to {q: "", isActive: false, attributes: []}
+ * /path?q=&isActive=false
  *
  * @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>>>;