@hkdigital/lib-sveltekit 0.0.31

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 {*} */
+    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: (instanceKey?: string | Symbol) => HkTabBarState;
+export const createState: (instanceKey?: string | Symbol) => HkTabBarState;
+export const getState: (instanceKey?: string | Symbol) => 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 {*} */
+	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,
+	 *   instanceKey?: Symbol | string,
+	 *   children: import('svelte').Snippet,
+	 *   onmount?: function,
+	 *   domElem?: HTMLElement
+	 * } & { [attr: string]: * }}
+	 */
+	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

@@ -0,0 +1,16 @@
+export default HkTabBar;
+declare const HkTabBar: import("svelte").Component<{
+    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;
+}, {}, "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: (instanceKey?: string | Symbol) => HkTabBarSelectorState;
+export const createState: (instanceKey?: string | Symbol) => HkTabBarSelectorState;
+export const getState: (instanceKey?: string | Symbol) => 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]: * },
+   *   instanceKey?: Symbol | string
+   * } & { [attr: string]: * }}
+   */
+  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/HkTabBarSelector.svelte.d.ts

@@ -0,0 +1,17 @@
+export default HkTabBarSelector;
+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;
+    };
+    instanceKey?: 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,6 @@
+export type Tab = {
+    icon: import("../icon/typedef.js").IconSource;
+    label?: string;
+    route?: string;
+    routePrefix?: string;
+};

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

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

package/dist/constants/index.d.ts

@@ -0,0 +1,2 @@
+export * as regexp from "./regexp/index.js";
+export * as time from "./time.js";

package/dist/constants/index.js

@@ -0,0 +1,2 @@
+export * as regexp from './regexp/index.js';
+export * as time from './time.js';

package/dist/constants/regexp/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./text.js";
+export * from "./user.js";
+export * from "./web.js";

package/dist/constants/regexp/index.js

@@ -0,0 +1,31 @@
+/**
+ * Index file for various regexp categories
+ *
+ * @note
+ * To enable unicode search, use the unicode flag 'u'.
+ *
+ * \p and \P are only supported in Unicode-aware mode. In Unicode-unaware mode,
+ * they are identity escapes for the p or P character.
+ *
+ * @note
+ * To enable unicode symbols that consist of multiple 'code points'(characters),
+ * such a some emoji, you must use the flag 'v'.
+ *
+ * @eg
+ * const re = new RegExp('^[${Latin_Number}]', 'u');
+ *
+ * @eg
+ * const re = new RegExp('^[${Symbols_Emoji}]', 'v');
+ *
+ * @see https://developer.mozilla.org/en-US/docs/Web/JavaScript/
+ *      Reference/Regular_expressions/Unicode_character_class_escape
+ *
+ * @see https://javascript.info/regexp-unicode
+ *
+ * @see https://v8.dev/features/regexp-v-flag
+ *
+ * @see https://www.regular-expressions.info/unicode.html
+ */
+export * from './text.js';
+export * from './user.js';
+export * from './web.js';

package/dist/constants/regexp/inspiratie.js__

@@ -0,0 +1,95 @@
+//
+// EXT_LATIN_TOKENS_LC
+// - Extended list of latin tokens, works for most latin languages
+//
+// @note
+//   Both upper- and lower case extended latin tokens are:
+//   "ŠŒŽšœžŸñÑÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÒÓÔÕÖØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðòóôõöøùúûüýþÿ"
+//
+// TODO:
+//   Replace with unicode property escapes when supported ES2018
+//   (not yet supported by MS Edge 12)
+//   https://github.com/tc39/proposal-regexp-unicode-property-escapes
+//   http://unicode.org/Public/UNIDATA/PropertyValueAliases.txt
+//   https://www.fileformat.info/info/unicode/category/index.htm
+//   https://github.com/danielberndt/babel-plugin-utf-8-regex/
+//     blob/master/src/transformer.js
+//
+export const EXT_LATIN_TOKENS_LC = 'šœžÿñàáâãäåæçèéêëìíîïðòóôõöøùúûüýþß';
+
+// RegExp and RegExp part constants
+
+// TODO:
+//   regexAstralSymbols = /[\uD800-\uDBFF][\uDC00-\uDFFF]/g;
+//   "-~.,`'\"‘’“”„±€$@%&¡¿©®"
+//   REP_PUNCTUATION = ",.¡!¿?;:-";
+
+export const C = {
+  EXT_LATIN_TOKENS_LC,
+  REP_NUMBER: '0-9',
+  REP_LETTER_LC: `a-z${EXT_LATIN_TOKENS_LC}`,
+  REP_LETTER_NUMBER_LC: `0-9a-z${EXT_LATIN_TOKENS_LC}`
+};
+
+export const RE_EMAIL = new RegExp(
+  '^(([^<>()[\\]\\.,;:\\s@"]+(.[^<>()[\\]\\.,;:\\s@"]+)*)|(".+"))@((([' +
+    '\\-' +
+    C.REP_LETTER_NUMBER_LC +
+    ']+\\.)+[' +
+    C.REP_LETTER_LC +
+    ']{2,}))$',
+  'i'
+);
+
+// export const RE_URL = << TODO
+
+export const RE_PHONE =
+  /(^\+[0-9]{2}|^\+[0-9]{2}\(0\)|^\(\+[0-9]{2}\)\(0\)|^00[0-9]{2}|^0)([0-9]{9}$|[0-9\-\s]{10}$)/;
+
+export const RE_POSTCODE_DUTCH = /^[1-9]{1}[0-9]{3} ?[A-Za-z]{2}$/;
+
+export const RE_PLACE_DUTCH = new RegExp(
+  "^['`]{0,1}" +
+    `[${C.REP_LETTER_LC}]{0,}` +
+    '[-\\s]{0,1}' +
+    `[${C.REP_LETTER_LC}]{2,}$`,
+  'i'
+);
+
+// export const RE_NAME =
+//   new RegExp( `^[${C.REP_LETTER_LC}\\s-\`']{2,}$`, "i" );
+
+export const RE_NAME = new RegExp(
+  `^[${C.REP_LETTER_LC}]{1}` + `[${C.REP_LETTER_LC}\\s-\`'\\.]{0,}$`,
+  'i'
+);
+
+export const RE_FANTASY_NAME = new RegExp(
+  '^[' +
+    C.REP_LETTER_NUMBER_LC +
+    "\\x20!@#\\$%\\^&\\*\\(\\)-_+=\\|:;'\"'`~<,>.?/\\\\]{2,}$",
+  'i'
+);
+
+export const RE_ADDRESS = new RegExp(
+  '^[' + C.REP_LETTER_NUMBER_LC + '.,°\\s-]{2,}$',
+  'i'
+);
+
+export const RE_HAS_A_LETTER_OR_NUMBER = new RegExp('[a-z0-9]+', 'i');
+
+export const RE_MULTIPLE_SPACES = new RegExp('[\\s]{2,}', 'g');
+// export const RE_MULTIPLE_SPACES = /  +/g
+
+export const RE_LABEL = new RegExp('^[a-z0-9_-]{2,}$');
+
+export const RE_COLLECTION_NAME = new RegExp('^[a-z0-9\\s-_]{1,}$', 'i');
+
+export const RE_URI_COMPONENT = new RegExp(
+  '^[' + C.REP_LETTER_LC + '\\s-_]{1,}$',
+  'i'
+);
+
+//
+// @see https://usefulshortcuts.com/alt-codes/accents-alt-codes.php
+//