@hkdigital/lib-sveltekit 0.1.6 → 0.1.7

package/dist/components/tab-bar/HkTabBar.state.svelte.js

@@ -1,149 +1,149 @@
-import { defineStateContext } from '../../util/svelte/state-context/index.js';
-import { nav } from '../../states/navigation.svelte.js';
-
-import { goto } from '$app/navigation';
-
-/**
- * @typedef {import('./typedef.js').Tab} Tab
- */
-
-/* ------------------------------------------------------- Define state class */
-
-export class HkTabBarState {
-	/** @type {Tab[]} */
-	tabs = $state.raw([]);
-
-	/** @type {any} */
-	tabBarElement = $state();
-
-	/** @type {HTMLElement[]} */
-	tabElements = [];
-
-	currentTabIndex = $state(-1);
-
-	/** @type {Tab|null} */
-	currentTab = $state(null);
-
-	// /** @type {boolean} */
-	// ready = $derived(this.currentTab !== null);
-
-	constructor() {
-		$effect.pre(() => {
-			// > Update this.currentTab
-
-			const tabs = this.tabs;
-
-			if (!this.tabs?.length || this.currentTabIndex === -1) {
-				this.currentTab = null;
-			} else {
-				const index = this.currentTabIndex;
-				const tabValue = tabs[index] ?? null;
-
-				// console.log('Selected active tab', index, tabValue);
-
-				this.currentTab = tabValue;
-			}
-		});
-	} // end constructor
-
-	/**
-	 * Set tab contents
-	 *
-	 * @param {Tab[]} tabs
-	 */
-	setTabs(tabs) {
-		// console.log('setTabs', tabs);
-		this.tabs = tabs;
-
-		if (this.currentTabIndex >= tabs.length) {
-			this.currentTabIndex = 0;
-		}
-	}
-
-	/**
-	 * Navigate to the route that is specified on the current tab (if any)
-	 */
-	navigate() {
-		if (!this.currentTab || !this.currentTab.route) {
-			return;
-		}
-
-		goto(this.currentTab.route);
-	}
-
-	/**
-	 * Select the tab that has a route property that matches the current
-	 * browser location pathname
-	 *
-	 * @note the pathname starts with a '/'
-	 *
-	 * @param {string} [pathname]
-	 *   If not specified, pathname from the browser's location will be used
-	 */
-	selectTabByPathName(pathname) {
-		if (!this.tabs.length) {
-			return;
-		}
-
-		if (!pathname) {
-			pathname = nav.pathname;
-		}
-
-		// console.log(`selectTabByPathName [${pathname}]`);
-
-		const tabs = this.tabs;
-
-		// > Try to find an exact match
-
-		for (let j = 0, n = tabs.length; j < n; j = j + 1) {
-			const tab = tabs[j];
-
-			if (tab.route && tab.route === pathname) {
-				//console.log('Found tab by route', tab);
-				this.selectTabByIndex(j);
-
-				return;
-			}
-		} // end for
-
-		// > Try to find a match using a route prefix
-
-		for (let j = 0, n = tabs.length; j < n; j = j + 1) {
-			const tab = tabs[j];
-
-			if (tab.routePrefix && pathname.startsWith(tab.routePrefix)) {
-				//console.log('Found tab by route prefix', tab);
-				this.selectTabByIndex(j);
-
-				return;
-			}
-		} // end for
-	}
-
-	/**
-	 * Select a tab by its index in the array this.tabs
-	 *
-	 * @param {number} index
-	 */
-	selectTabByIndex(index) {
-		// console.log(`Select tab by index [${index}]`);
-		this.currentTabIndex = index;
-	}
-
-	/**
-	 * Link a tab to a DOM element
-	 * - An reference is stored as property
-	 * - This reference can be used by extensions of this tab bar,
-	 *   e.g. to manipulate the visual appearance of the tabs
-	 *
-	 * @param {number} index
-	 * @param {HTMLElement} tabElement
-	 */
-	linkTab(index, tabElement) {
-		this.tabElements[index] = tabElement;
-	}
-} // end class
-
-/* -------------------------------------- Export create & get state functions */
-
-export const [createOrGetState, createState, getState] = defineStateContext(HkTabBarState);
+import { defineStateContext } from '../../util/svelte/state-context/index.js';
+import { nav } from '../../states/navigation.svelte.js';
+
+import { goto } from '$app/navigation';
+
+/**
+ * @typedef {import('./typedef.js').Tab} Tab
+ */
+
+/* ------------------------------------------------------- Define state class */
+
+export class HkTabBarState {
+	/** @type {Tab[]} */
+	tabs = $state.raw([]);
+
+	/** @type {any} */
+	tabBarElement = $state();
+
+	/** @type {HTMLElement[]} */
+	tabElements = [];
+
+	currentTabIndex = $state(-1);
+
+	/** @type {Tab|null} */
+	currentTab = $state(null);
+
+	// /** @type {boolean} */
+	// ready = $derived(this.currentTab !== null);
+
+	constructor() {
+		$effect.pre(() => {
+			// > Update this.currentTab
+
+			const tabs = this.tabs;
+
+			if (!this.tabs?.length || this.currentTabIndex === -1) {
+				this.currentTab = null;
+			} else {
+				const index = this.currentTabIndex;
+				const tabValue = tabs[index] ?? null;
+
+				// console.log('Selected active tab', index, tabValue);
+
+				this.currentTab = tabValue;
+			}
+		});
+	} // end constructor
+
+	/**
+	 * Set tab contents
+	 *
+	 * @param {Tab[]} tabs
+	 */
+	setTabs(tabs) {
+		// console.log('setTabs', tabs);
+		this.tabs = tabs;
+
+		if (this.currentTabIndex >= tabs.length) {
+			this.currentTabIndex = 0;
+		}
+	}
+
+	/**
+	 * Navigate to the route that is specified on the current tab (if any)
+	 */
+	navigate() {
+		if (!this.currentTab || !this.currentTab.route) {
+			return;
+		}
+
+		goto(this.currentTab.route);
+	}
+
+	/**
+	 * Select the tab that has a route property that matches the current
+	 * browser location pathname
+	 *
+	 * @note the pathname starts with a '/'
+	 *
+	 * @param {string} [pathname]
+	 *   If not specified, pathname from the browser's location will be used
+	 */
+	selectTabByPathName(pathname) {
+		if (!this.tabs.length) {
+			return;
+		}
+
+		if (!pathname) {
+			pathname = nav.pathname;
+		}
+
+		// console.log(`selectTabByPathName [${pathname}]`);
+
+		const tabs = this.tabs;
+
+		// > Try to find an exact match
+
+		for (let j = 0, n = tabs.length; j < n; j = j + 1) {
+			const tab = tabs[j];
+
+			if (tab.route && tab.route === pathname) {
+				//console.log('Found tab by route', tab);
+				this.selectTabByIndex(j);
+
+				return;
+			}
+		} // end for
+
+		// > Try to find a match using a route prefix
+
+		for (let j = 0, n = tabs.length; j < n; j = j + 1) {
+			const tab = tabs[j];
+
+			if (tab.routePrefix && pathname.startsWith(tab.routePrefix)) {
+				//console.log('Found tab by route prefix', tab);
+				this.selectTabByIndex(j);
+
+				return;
+			}
+		} // end for
+	}
+
+	/**
+	 * Select a tab by its index in the array this.tabs
+	 *
+	 * @param {number} index
+	 */
+	selectTabByIndex(index) {
+		// console.log(`Select tab by index [${index}]`);
+		this.currentTabIndex = index;
+	}
+
+	/**
+	 * Link a tab to a DOM element
+	 * - An reference is stored as property
+	 * - This reference can be used by extensions of this tab bar,
+	 *   e.g. to manipulate the visual appearance of the tabs
+	 *
+	 * @param {number} index
+	 * @param {HTMLElement} tabElement
+	 */
+	linkTab(index, tabElement) {
+		this.tabElements[index] = tabElement;
+	}
+} // end class
+
+/* -------------------------------------- Export create & get state functions */
+
+export const [createOrGetState, createState, getState] = defineStateContext(HkTabBarState);

package/dist/components/tab-bar/HkTabBar.svelte

@@ -1,74 +1,74 @@
-<script>
-	/**
-	 * TabBar component
-	 *
-	 * Following component guidelines from Skeleton
-	 * @see https://next.skeleton.dev/docs/resources/contribute/components
-	 */
-
-	import { createOrGetState } from './HkTabBar.state.svelte';
-
-	import { HkGridArea } from '../area/index.js';
-
-	/**
-	 * @type {{
-	 *   cols?: number,
-	 *   base?: string,
-	 *   bg?: string,
-	 *   padding?: string,
-	 *   margin?: string,
-	 *   classes?: string,
-	 *   style?: string,
-	 *   instanceKey?: Symbol | string,
-	 *   children: import('svelte').Snippet,
-	 *   onmount?: function,
-	 *   domElem?: HTMLElement
-	 * } & { [attr: string]: any }}
-	 */
-	let {
-		// Functional
-		cols = 3,
-
-		// Style
-		base,
-		bg,
-		padding,
-		margin,
-		classes,
-
-		style,
-
-		// State
-		instanceKey,
-
-		// Snippets
-		children,
-
-		// Event handlers
-		onmount,
-
-		// DOM Elements
-		domElem = $bindable(),
-
-		// Rest attributes
-		...attrs
-	} = $props();
-
-	createOrGetState(instanceKey);
-
-	//grid-cols-[repeat({cols},minmax(0,auto))]
-</script>
-
-<HkGridArea
-	data-hk-tab-bar
-	base="justify-center content-stretch items-center {base}"
-	style="grid-template-columns: repeat({cols}, minmax(0,auto)); {style}"
-	boxBg={bg}
-	boxPadding={padding}
-	boxMargin={margin}
-	bind:boxDomElem={domElem}
-	{classes}
-	{...attrs}
->
-	{@render children()}
-</HkGridArea>
+<script>
+	/**
+	 * TabBar component
+	 *
+	 * Following component guidelines from Skeleton
+	 * @see https://next.skeleton.dev/docs/resources/contribute/components
+	 */
+
+	import { createOrGetState } from './HkTabBar.state.svelte';
+
+	import { HkGridArea } from '../area/index.js';
+
+	/**
+	 * @type {{
+	 *   cols?: number,
+	 *   base?: string,
+	 *   bg?: string,
+	 *   padding?: string,
+	 *   margin?: string,
+	 *   classes?: string,
+	 *   style?: string,
+	 *   instanceKey?: Symbol | string,
+	 *   children: import('svelte').Snippet,
+	 *   onmount?: function,
+	 *   domElem?: HTMLElement
+	 * } & { [attr: string]: any }}
+	 */
+	let {
+		// Functional
+		cols = 3,
+
+		// Style
+		base,
+		bg,
+		padding,
+		margin,
+		classes,
+
+		style,
+
+		// State
+		instanceKey,
+
+		// Snippets
+		children,
+
+		// Event handlers
+		onmount,
+
+		// DOM Elements
+		domElem = $bindable(),
+
+		// Rest attributes
+		...attrs
+	} = $props();
+
+	createOrGetState(instanceKey);
+
+	//grid-cols-[repeat({cols},minmax(0,auto))]
+</script>
+
+<HkGridArea
+	data-hk-tab-bar
+	base="justify-center content-stretch items-center {base}"
+	style="grid-template-columns: repeat({cols}, minmax(0,auto)); {style}"
+	boxBg={bg}
+	boxPadding={padding}
+	boxMargin={margin}
+	bind:boxDomElem={domElem}
+	{classes}
+	{...attrs}
+>
+	{@render children()}
+</HkGridArea>

package/dist/components/tab-bar/HkTabBar.svelte.d.ts

@@ -1,4 +1,22 @@
 export default HkTabBar;
+type HkTabBar = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        cols?: number;
+        base?: string;
+        bg?: string;
+        padding?: string;
+        margin?: string;
+        classes?: string;
+        style?: string;
+        instanceKey?: string | Symbol;
+        children: Snippet<[]>;
+        onmount?: Function;
+        domElem?: HTMLElement;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
 declare const HkTabBar: import("svelte").Component<{
     cols?: number;
     base?: string;

package/dist/components/tab-bar/HkTabBarSelector.state.svelte.js

@@ -1,93 +1,93 @@
-import { defineStateContext } from '../../util/svelte/state-context/index.js';
-
-import { useResizeObserver } from '../../util/svelte/observe/index.js';
-
-/* ------------------------------------------------------- Define state class */
-
-export class HkTabBarSelectorState {
-	/** @type {HTMLElement|undefined} */
-	// outer = $state.raw();
-	// outerBox = $state.raw();
-
-	/** @type {number} */
-	// tabBarWidth = $state(0);
-
-	selectorWidth = $state(0);
-	selectorStyle = $state('');
-
-	//currentTabIndex;
-
-	/** @type {DOMRect[]} */
-	iconSizes = [];
-
-	constructor() {
-		// $effect(() => {
-		//   if (this.outer) {
-		//     this.outerBox = this.outer.getBoundingClientRect();
-		//   }
-		// });
-	}
-
-	/**
-	 * Link the tab bar selector to a tab bar state
-	 *
-	 * @param {import('./HkTabBar.svelte').TabBarState} tabBarState
-	 */
-	linkToTabBarState(tabBarState) {
-		// console.log('setBottomBar', bottomBarState);
-
-		// if this.bottomBarState > error
-
-		this.tabBarState = tabBarState;
-
-		$effect(() => {
-			tabBarState.currentTabIndex;
-
-			// console.log('currentTabIndex $effect');
-
-			this.#updateSelector();
-		});
-
-		useResizeObserver(
-			() => tabBarState.tabBarElement,
-			(entries) => {
-				this.#updateSelector();
-			}
-		);
-	}
-
-	/**
-	 * Update the size and position of the selector
-	 */
-	#updateSelector() {
-		if (!this.tabBarState) {
-			return;
-		}
-
-		const { currentTabIndex, tabBarElement, tabElements } = this.tabBarState;
-
-		const tabElem = tabElements[currentTabIndex];
-
-		if (!tabElem || !tabBarElement) {
-			return;
-		}
-
-		const tabElemRect = tabElem.getBoundingClientRect();
-
-		const tabBarRect = tabBarElement.getBoundingClientRect();
-
-		// const offsetX = (iconWidth - selectorWidth) / 2 - outerBox.x;
-		const offsetX = (tabElemRect.width - this.selectorWidth) / 2 - tabBarRect.x;
-
-		const x = tabElemRect.x + offsetX;
-		const w = tabBarRect.width;
-
-		this.selectorStyle = `left: ${(100 * x) / w}%; opacity: 1;`;
-
-		// console.log('selectorStyle', this.selectorStyle);
-	}
-}
-
-/* -------------------------------------- Export create & get state functions */
-
-export const [createOrGetState, createState, getState] = defineStateContext(HkTabBarSelectorState);
+import { defineStateContext } from '../../util/svelte/state-context/index.js';
+
+import { useResizeObserver } from '../../util/svelte/observe/index.js';
+
+/* ------------------------------------------------------- Define state class */
+
+export class HkTabBarSelectorState {
+	/** @type {HTMLElement|undefined} */
+	// outer = $state.raw();
+	// outerBox = $state.raw();
+
+	/** @type {number} */
+	// tabBarWidth = $state(0);
+
+	selectorWidth = $state(0);
+	selectorStyle = $state('');
+
+	//currentTabIndex;
+
+	/** @type {DOMRect[]} */
+	iconSizes = [];
+
+	constructor() {
+		// $effect(() => {
+		//   if (this.outer) {
+		//     this.outerBox = this.outer.getBoundingClientRect();
+		//   }
+		// });
+	}
+
+	/**
+	 * Link the tab bar selector to a tab bar state
+	 *
+	 * @param {import('./HkTabBar.svelte').TabBarState} tabBarState
+	 */
+	linkToTabBarState(tabBarState) {
+		// console.log('setBottomBar', bottomBarState);
+
+		// if this.bottomBarState > error
+
+		this.tabBarState = tabBarState;
+
+		$effect(() => {
+			tabBarState.currentTabIndex;
+
+			// console.log('currentTabIndex $effect');
+
+			this.#updateSelector();
+		});
+
+		useResizeObserver(
+			() => tabBarState.tabBarElement,
+			(entries) => {
+				this.#updateSelector();
+			}
+		);
+	}
+
+	/**
+	 * Update the size and position of the selector
+	 */
+	#updateSelector() {
+		if (!this.tabBarState) {
+			return;
+		}
+
+		const { currentTabIndex, tabBarElement, tabElements } = this.tabBarState;
+
+		const tabElem = tabElements[currentTabIndex];
+
+		if (!tabElem || !tabBarElement) {
+			return;
+		}
+
+		const tabElemRect = tabElem.getBoundingClientRect();
+
+		const tabBarRect = tabBarElement.getBoundingClientRect();
+
+		// const offsetX = (iconWidth - selectorWidth) / 2 - outerBox.x;
+		const offsetX = (tabElemRect.width - this.selectorWidth) / 2 - tabBarRect.x;
+
+		const x = tabElemRect.x + offsetX;
+		const w = tabBarRect.width;
+
+		this.selectorStyle = `left: ${(100 * x) / w}%; opacity: 1;`;
+
+		// console.log('selectorStyle', this.selectorStyle);
+	}
+}
+
+/* -------------------------------------- Export create & get state functions */
+
+export const [createOrGetState, createState, getState] = defineStateContext(HkTabBarSelectorState);