@hkdigital/lib-sveltekit 0.1.60 → 0.1.62

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/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);

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

@@ -1,49 +1,49 @@
-<script>
-  // prettier-ignore
-  // import { getTabBarSelectorState }
-  //   from "./HkTabBarSelector.state.svelte.js";
-
-  import { createOrGetState }
-    from "./HkTabBarSelector.state.svelte.js";
-
-  /**
-   * @type {{
-   *   base?: string,
-   *   bg?: string,
-   *   classes?: string,
-   *   boxBase?: string,
-   *   boxBg?: string,
-   *   boxPadding?: string,
-   *   boxMargin?: string,
-   *   boxClasses?: string,
-   *   boxAttrs?: { [attr: string]: * },
-   *   instanceKey?: Symbol | string
-   * } & { [attr: string]: any }}
-   */
-  let {
-    // Style
-    base,
-    bg,
-    classes,
-    boxBase,
-    boxBg,
-    boxClasses,
-
-    // State
-    instanceKey
-  } = $props();
-
-  const selectorState = createOrGetState(instanceKey);
-</script>
-
-<div
-  data-hk-tab-bar-selector-box
-  class="g-tab-bar-h w-full {boxBase} {boxBg} {boxClasses}"
->
-  <div
-    data-hk-tab-bar-selector
-    bind:clientWidth={selectorState.selectorWidth}
-    class="relative opacity-0 {base} {bg} {classes}"
-    style={selectorState.selectorStyle}
-  ></div>
-</div>
+<script>
+  // prettier-ignore
+  // import { getTabBarSelectorState }
+  //   from "./HkTabBarSelector.state.svelte.js";
+
+  import { createOrGetState }
+    from "./HkTabBarSelector.state.svelte.js";
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   classes?: string,
+   *   boxBase?: string,
+   *   boxBg?: string,
+   *   boxPadding?: string,
+   *   boxMargin?: string,
+   *   boxClasses?: string,
+   *   boxAttrs?: { [attr: string]: * },
+   *   instanceKey?: Symbol | string
+   * } & { [attr: string]: any }}
+   */
+  let {
+    // Style
+    base,
+    bg,
+    classes,
+    boxBase,
+    boxBg,
+    boxClasses,
+
+    // State
+    instanceKey
+  } = $props();
+
+  const selectorState = createOrGetState(instanceKey);
+</script>
+
+<div
+  data-hk-tab-bar-selector-box
+  class="g-tab-bar-h w-full {boxBase} {boxBg} {boxClasses}"
+>
+  <div
+    data-hk-tab-bar-selector
+    bind:clientWidth={selectorState.selectorWidth}
+    class="relative opacity-0 {base} {bg} {classes}"
+    style={selectorState.selectorStyle}
+  ></div>
+</div>

package/dist/components/tab-bar/index.js

@@ -1,17 +1,17 @@
-export {
-	createOrGetState as createOrGetTabBarState,
-	createState as createTabBarState,
-	getState as getTabBarState
-} from './HkTabBar.state.svelte.js';
-
-export { default as HkTabBar } from './HkTabBar.svelte';
-
-export {
-	createOrGetState as createOrGetTabBarSelectorState,
-	createState as createTabBarSelectorState,
-	getState as getTabBarSelectorState
-} from './HkTabBarSelector.state.svelte.js';
-
-export { default as HkTabBarSelector } from './HkTabBarSelector.svelte';
-
-export * from './typedef.js';
+export {
+	createOrGetState as createOrGetTabBarState,
+	createState as createTabBarState,
+	getState as getTabBarState
+} from './HkTabBar.state.svelte.js';
+
+export { default as HkTabBar } from './HkTabBar.svelte';
+
+export {
+	createOrGetState as createOrGetTabBarSelectorState,
+	createState as createTabBarSelectorState,
+	getState as getTabBarSelectorState
+} from './HkTabBarSelector.state.svelte.js';
+
+export { default as HkTabBarSelector } from './HkTabBarSelector.svelte';
+
+export * from './typedef.js';

package/dist/components/tab-bar/typedef.js

@@ -1,8 +1,8 @@
-/**
- * @typedef {object} Tab
- * @property {import('../icon/typedef.js').IconSource} icon
- * @property {string} [label]
- *
- * @property {string} [route]
- * @property {string} [routePrefix]
- */
+/**
+ * @typedef {object} Tab
+ * @property {import('../icon/typedef.js').IconSource} icon
+ * @property {string} [label]
+ *
+ * @property {string} [route]
+ * @property {string} [routePrefix]
+ */