@hkdigital/lib-core 0.3.1

package/dist/components/rows/panel-row-2/PanelRow2.svelte

@@ -0,0 +1,40 @@
+<script>
+  import { PanelGridRow } from '../index.js';
+
+  /**
+   * @example
+   */
+
+  /**
+   * @type {{
+   *   base?: string,
+   *   bg?: string,
+   *   justify?: 'start'|'center'|'end'|'between'|'around'|'evenly'|'stretch'|'normal',
+   *   justifyItems?: 'start'|'center'|'end'|'stretch',
+   *   gap?: string,
+   *   classes?: string,
+   *   children?: import('svelte').Snippet,
+   * } & { [attr: string]: any }}
+   */
+  const {
+    // Style
+    // base,
+    // bg,
+    // justify,
+    // justifyItems,
+    // flow = 'col',
+    // gap,
+    // classes,
+
+    // // Snippets
+    // children,
+
+    // Attributes
+    ...attrs
+  } = $props();
+</script>
+
+<!-- class="test-small mb-8p mt-8 grid auto-cols-fr grid-flow-col justify-stretch gap-20p" -->
+
+<PanelGridRow data-wrapper="panel-row-2" gap="gap-20p" {...attrs}
+></PanelGridRow>

package/dist/components/rows/panel-row-2/PanelRow2.svelte.d.ts

@@ -0,0 +1,26 @@
+export default PanelRow2;
+type PanelRow2 = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        bg?: string;
+        justify?: "center" | "start" | "end" | "between" | "around" | "evenly" | "stretch" | "normal";
+        justifyItems?: "center" | "start" | "end" | "stretch";
+        gap?: string;
+        classes?: string;
+        children?: Snippet<[]>;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
+declare const PanelRow2: import("svelte").Component<{
+    base?: string;
+    bg?: string;
+    justify?: "start" | "center" | "end" | "between" | "around" | "evenly" | "stretch" | "normal";
+    justifyItems?: "start" | "center" | "end" | "stretch";
+    gap?: string;
+    classes?: string;
+    children?: import("svelte").Snippet;
+} & {
+    [attr: string]: any;
+}, {}, "">;

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

@@ -0,0 +1,54 @@
+/**
+ * @typedef {import('./typedef.js').Tab} Tab
+ */
+export class HkTabBarState {
+    /** @type {Tab[]} */
+    tabs: Tab[];
+    /** @type {any} */
+    tabBarElement: any;
+    /** @type {HTMLElement[]} */
+    tabElements: HTMLElement[];
+    currentTabIndex: number;
+    /** @type {Tab|null} */
+    currentTab: Tab | null;
+    /**
+     * Set tab contents
+     *
+     * @param {Tab[]} tabs
+     */
+    setTabs(tabs: Tab[]): void;
+    /**
+     * Navigate to the route that is specified on the current tab (if any)
+     */
+    navigate(): void;
+    /**
+     * 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?: string): void;
+    /**
+     * Select a tab by its index in the array this.tabs
+     *
+     * @param {number} index
+     */
+    selectTabByIndex(index: number): void;
+    /**
+     * 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: number, tabElement: HTMLElement): void;
+}
+export const createOrGetState: (contextKey?: import("../../typedef/context.js").ContextKey) => HkTabBarState;
+export const createState: (contextKey?: import("../../typedef/context.js").ContextKey) => HkTabBarState;
+export const getState: (contextKey?: import("../../typedef/context.js").ContextKey) => HkTabBarState;
+export type Tab = import("./typedef.js").Tab;

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

@@ -0,0 +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);

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

@@ -0,0 +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,
+	 *   contextKey?: 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
+		contextKey,
+
+		// Snippets
+		children,
+
+		// Event handlers
+		onmount,
+
+		// DOM Elements
+		domElem = $bindable(),
+
+		// Rest attributes
+		...attrs
+	} = $props();
+
+	createOrGetState(contextKey);
+
+	//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

@@ -0,0 +1,34 @@
+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;
+        contextKey?: string | Symbol;
+        children: Snippet<[]>;
+        onmount?: Function;
+        domElem?: HTMLElement;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
+declare const HkTabBar: import("svelte").Component<{
+    cols?: number;
+    base?: string;
+    bg?: string;
+    padding?: string;
+    margin?: string;
+    classes?: string;
+    style?: string;
+    contextKey?: Symbol | string;
+    children: import("svelte").Snippet;
+    onmount?: Function;
+    domElem?: HTMLElement;
+} & {
+    [attr: string]: any;
+}, {}, "domElem">;

package/dist/components/tab-bar/HkTabBarSelector.state.svelte.d.ts

@@ -0,0 +1,19 @@
+export class HkTabBarSelectorState {
+    /** @type {HTMLElement|undefined} */
+    /** @type {number} */
+    selectorWidth: number;
+    selectorStyle: string;
+    /** @type {DOMRect[]} */
+    iconSizes: DOMRect[];
+    /**
+     * Link the tab bar selector to a tab bar state
+     *
+     * @param {import('./HkTabBar.svelte').TabBarState} tabBarState
+     */
+    linkToTabBarState(tabBarState: import("./HkTabBar.svelte").TabBarState): void;
+    tabBarState: any;
+    #private;
+}
+export const createOrGetState: (contextKey?: import("../../typedef/context.js").ContextKey) => HkTabBarSelectorState;
+export const createState: (contextKey?: import("../../typedef/context.js").ContextKey) => HkTabBarSelectorState;
+export const getState: (contextKey?: import("../../typedef/context.js").ContextKey) => HkTabBarSelectorState;

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

@@ -0,0 +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);

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

@@ -0,0 +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]: * },
+   *   contextKey?: Symbol | string
+   * } & { [attr: string]: any }}
+   */
+  let {
+    // Style
+    base,
+    bg,
+    classes,
+    boxBase,
+    boxBg,
+    boxClasses,
+
+    // State
+    contextKey
+  } = $props();
+
+  const selectorState = createOrGetState(contextKey);
+</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/HkTabBarSelector.svelte.d.ts

@@ -0,0 +1,36 @@
+export default HkTabBarSelector;
+type HkTabBarSelector = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<{
+        base?: string;
+        bg?: string;
+        classes?: string;
+        boxBase?: string;
+        boxBg?: string;
+        boxPadding?: string;
+        boxMargin?: string;
+        boxClasses?: string;
+        boxAttrs?: {
+            [attr: string]: any;
+        };
+        contextKey?: string | Symbol;
+    } & {
+        [attr: string]: any;
+    }>): void;
+};
+declare const HkTabBarSelector: import("svelte").Component<{
+    base?: string;
+    bg?: string;
+    classes?: string;
+    boxBase?: string;
+    boxBg?: string;
+    boxPadding?: string;
+    boxMargin?: string;
+    boxClasses?: string;
+    boxAttrs?: {
+        [attr: string]: any;
+    };
+    contextKey?: Symbol | string;
+} & {
+    [attr: string]: any;
+}, {}, "">;

package/dist/components/tab-bar/index.d.ts

@@ -0,0 +1,5 @@
+export { default as HkTabBar } from "./HkTabBar.svelte";
+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 { createOrGetState as createOrGetTabBarSelectorState, createState as createTabBarSelectorState, getState as getTabBarSelectorState } from "./HkTabBarSelector.state.svelte.js";

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

@@ -0,0 +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';

package/dist/components/tab-bar/typedef.d.ts

@@ -0,0 +1,8 @@
+declare const _default: {};
+export default _default;
+export type Tab = {
+    icon: any;
+    label?: string;
+    route?: string;
+    routePrefix?: string;
+};

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

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

package/dist/config/imagetools-config.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Configures and returns a function that can be used as
+ * 'resolveConfigs' parameter in imagetools config
+ *
+ * @param {object} [options]
+ * @param {number[]} [options.widths=DEFAULT_WIDTHS]
+ *
+ * @returns {(
+ *   entries: [string, string[]][]
+ * ) => (Record<string, string | string[]>[])}
+ */
+export function generateResponseConfigs(options?: {
+    widths?: number[];
+}): (entries: [string, string[]][]) => (Record<string, string | string[]>[]);
+/**
+ * Configures and returns a function that can be used as
+ * 'defaultDirectives' parameter in imagetools config
+ *
+ * - This function runs before 'resolveConfigs'
+ *
+ * @param {object} [options]
+ * @param {number[]} [options.presets=DEFAULT_PRESETS]
+ */
+export function generateDefaultDirectives(options?: {
+    presets?: number[];
+}): (url: URL) => URLSearchParams;