@hkdigital/lib-sveltekit 0.2.8 → 0.2.9

package/dist/components/rows/panel-grid-row/PanelGridRow.svelte

@@ -1,104 +1,104 @@
-<script>
-  /**
-   * @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();
-
-  let colsCls = $derived.by(() => {
-    //
-    // The CSS classes to apply for the desired column layout
-    //
-    let out = '';
-
-    /* @note justify-end won't work with auto-cols-fr! */
-
-    if (justifyItems && justify !== 'end') {
-      out += 'auto-cols-fr';
-    } else {
-      out += 'auto-cols-auto';
-    }
-
-    if (flow) {
-      out += ` grid-flow-${flow}`;
-    }
-
-    // TODO: CSS for a specific number of columns
-
-    return out.replace(/\s{2,}/g, ' ').trim();
-  });
-
-  let justifyCls = $derived.by(() => {
-    //
-    // Determine justify classes
-    //
-    if (justify) {
-      return `justify-${justify}`;
-    }
-
-    return '';
-  });
-
-  let justifyItemsCls = $derived.by(() => {
-    //
-    // Determine justify-items classes
-    //
-    if (justifyItems) {
-      return `justify-items-${justifyItems}`;
-    }
-
-    return '';
-  });
-</script>
-
-<div
-  data-row="panel-grid-row"
-  class="{base} {bg} {gap} {classes} grid {colsCls} {justifyCls} {justifyItemsCls}"
-  {...attrs}
->
-  {@render children()}
-</div>
-
-<style>
-  /* This rule makes justify-items-start behave like
-     justify-items-center and justify-items-end */
-  /*[data-row='panel-grid-row'] {
-    & > :global(*) {
-      width: fit-content;
-      height: fit-content;
-    }
-  }*/
-
-  /*[data-row='panel-grid-row'] {
-    & > :global(*) {
-      min-width: 0;
-    }
-  }*/
-</style>
+<script>
+  /**
+   * @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();
+
+  let colsCls = $derived.by(() => {
+    //
+    // The CSS classes to apply for the desired column layout
+    //
+    let out = '';
+
+    /* @note justify-end won't work with auto-cols-fr! */
+
+    if (justifyItems && justify !== 'end') {
+      out += 'auto-cols-fr';
+    } else {
+      out += 'auto-cols-auto';
+    }
+
+    if (flow) {
+      out += ` grid-flow-${flow}`;
+    }
+
+    // TODO: CSS for a specific number of columns
+
+    return out.replace(/\s{2,}/g, ' ').trim();
+  });
+
+  let justifyCls = $derived.by(() => {
+    //
+    // Determine justify classes
+    //
+    if (justify) {
+      return `justify-${justify}`;
+    }
+
+    return '';
+  });
+
+  let justifyItemsCls = $derived.by(() => {
+    //
+    // Determine justify-items classes
+    //
+    if (justifyItems) {
+      return `justify-items-${justifyItems}`;
+    }
+
+    return '';
+  });
+</script>
+
+<div
+  data-row="panel-grid-row"
+  class="{base} {bg} {gap} {classes} grid {colsCls} {justifyCls} {justifyItemsCls}"
+  {...attrs}
+>
+  {@render children()}
+</div>
+
+<style>
+  /* This rule makes justify-items-start behave like
+     justify-items-center and justify-items-end */
+  /*[data-row='panel-grid-row'] {
+    & > :global(*) {
+      width: fit-content;
+      height: fit-content;
+    }
+  }*/
+
+  /*[data-row='panel-grid-row'] {
+    & > :global(*) {
+      min-width: 0;
+    }
+  }*/
+</style>

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

@@ -1,40 +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>
+<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/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);