@hkdigital/lib-sveltekit 0.0.31

package/dist/components/icon/HkIcon.svelte

@@ -0,0 +1,86 @@
+<script>
+  /**
+   * Icon component
+   *
+   * Source code adapted from
+   * @see https://github.com/steeze-ui/icons
+   *
+   *
+   * Install icons
+   * For icon packs @see https://github.com/steeze-ui/icons
+   *
+   * @eg install Hero Icons
+   *
+   * pnpm add -D @steeze-ui/heroicons
+   */
+
+  /**
+   * Properties
+   * ----------
+   * src - icon component
+   * size - width and height of the icon as percentage (..%) or in pixels
+   * theme - name of the icon set theme (e.g. 'solid' or 'outline')
+   *
+   * @type {{
+   *   src: import('./types.js').IconSource,
+   *   size?: string,
+   *   theme?: string,
+   *   base?: string,
+   *   classes?: string
+   * } & { [attr: string]: * }}
+   */
+  let {
+    src,
+    size = '100%',
+    theme = 'default',
+    base,
+    classes,
+    ...attrs
+  } = $props();
+
+  /** @type {*} */
+  let icon = $state();
+
+  $effect(() => {
+    icon = src?.[theme] ?? src?.['default'] ?? Object.values(src)?.[0];
+  });
+
+  if (size !== '100%') {
+    if (size.slice(-1) !== '%') {
+      try {
+        size = parseInt(size, 10) + 'px';
+      } catch (error) {
+        size = '100%';
+      }
+    }
+  }
+</script>
+
+<svg
+  data-hk-icon
+  {...icon?.a}
+  xmlns="http://www.w3.org/2000/svg"
+  width={size}
+  height={size}
+  class="{base} {classes}"
+  {...attrs}
+>
+  {#each icon?.path ?? [] as a}
+    <path {...a} />
+  {/each}
+  {#each icon?.rect ?? [] as a}
+    <rect {...a} />
+  {/each}
+  {#each icon?.circle ?? [] as a}
+    <circle {...a} />
+  {/each}
+  {#each icon?.polygon ?? [] as a}
+    <polygon {...a} />
+  {/each}
+  {#each icon?.polyline ?? [] as a}
+    <polyline {...a} />
+  {/each}
+  {#each icon?.line ?? [] as a}
+    <line {...a} />
+  {/each}
+</svg>

package/dist/components/icon/HkIcon.svelte.d.ts

@@ -0,0 +1,10 @@
+export default HkIcon;
+declare const HkIcon: import("svelte").Component<{
+    src: any;
+    size?: string;
+    theme?: string;
+    base?: string;
+    classes?: string;
+} & {
+    [attr: string]: any;
+}, {}, "">;

package/dist/components/icon/HkTabIcon.svelte

@@ -0,0 +1,112 @@
+<script>
+	/**
+	 * TabBarIcon component
+	 *
+	 * Following component guidelines from Skeleton
+	 * @see https://next.skeleton.dev/docs/resources/contribute/components
+	 */
+
+	// import { ElementRect } from 'runed';
+
+	import { onMount } from 'svelte';
+
+	import { HkGridArea } from '../area';
+
+	import HkIcon from './HkIcon.svelte';
+
+	/**
+	 * Properties
+	 * ----------
+	 * src - icon component
+	 * theme - name of the icon set theme (e.g. 'solid' or 'outline')
+	 * label - text of the label to place below the icon
+	 *
+	 * @type {{
+	 *   src: import('./typedef.js').IconSource,
+	 *   iconTheme?: string,
+	 *   label?: string,
+	 *   route?: string,
+	 *   active?: boolean,
+	 *   base?: string,
+	 *   bg?: string,
+	 *   padding?: string,
+	 *   margin?: string,
+	 *   classes?: string,
+	 *   iconClasses? : string,
+	 *   iconHeight?: string,
+	 *   labelClasses? : string,
+	 *   rect?: DOMRect,
+	 * } & { [attr: string]: * }}
+	 *
+	 *
+	 */
+	let {
+		// Functional
+		src,
+		iconTheme,
+		label,
+		route,
+
+		active,
+
+		// Style
+		base,
+		bg,
+		padding,
+		margin,
+		classes,
+		iconClasses,
+		labelClasses,
+
+		// Event handlers
+		onmount,
+
+		// Rest attributes
+		...attrs
+	} = $props();
+
+	/** @type {HTMLElement} */
+	let iconBoxElem;
+
+	onMount(() => {
+		onmount(iconBoxElem);
+	});
+</script>
+
+{#snippet contents()}
+	<div data-hk--icon-box class="flex aspect-square w-full justify-center" bind:this={iconBoxElem}>
+		<HkIcon {src} size="100%" theme={iconTheme} classes={iconClasses} />
+	</div>
+
+	{#if label}
+		<div data-hk--label class="flex w-full justify-center {labelClasses}">
+			{label}
+		</div>
+	{/if}
+{/snippet}
+
+<HkGridArea
+	data-hk-tab-icon
+	boxMargin={margin}
+	boxPadding={padding}
+	base="grid-cols-1 justify-items-center cursor-pointer break-all overflow-clip h-full
+  {active ? 'active' : ''}
+  {label ? 'hasLabel' : ''} {base}"
+	{bg}
+	{...attrs}
+>
+	{#if !route}
+		{@render contents()}
+	{:else}
+		<a href={route}>
+			{@render contents()}
+		</a>
+	{/if}
+</HkGridArea>
+
+<style>
+	a {
+		display: block;
+		text-decoration: none;
+	}
+</style>

package/dist/components/icon/HkTabIcon.svelte.d.ts

@@ -0,0 +1,19 @@
+export default HkTabIcon;
+declare const HkTabIcon: import("svelte").Component<{
+    src: import("./typedef.js").IconSource;
+    iconTheme?: string;
+    label?: string;
+    route?: string;
+    active?: boolean;
+    base?: string;
+    bg?: string;
+    padding?: string;
+    margin?: string;
+    classes?: string;
+    iconClasses?: string;
+    iconHeight?: string;
+    labelClasses?: string;
+    rect?: DOMRect;
+} & {
+    [attr: string]: any;
+}, {}, "">;

package/dist/components/icon/index.d.ts

@@ -0,0 +1,3 @@
+export { default as HkIcon } from "./HkIcon.svelte";
+export { default as HkTabIcon } from "./HkTabIcon.svelte";
+export * from "./typedef.js";

package/dist/components/icon/index.js

@@ -0,0 +1,4 @@
+export { default as HkIcon } from './HkIcon.svelte';
+export { default as HkTabIcon } from './HkTabIcon.svelte';
+
+export * from './typedef.js';

package/dist/components/icon/typedef.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {};
+export default _default;
+export type AllowedTags = "path" | "circle" | "rect" | "polygon" | "polyline" | "line";
+export type IconThemeSource = {
+    a: {
+        [attribute: string]: string;
+    };
+} & { [tag in AllowedTags]?: {
+    [attribute: string]: string;
+}[]; };
+export type IconSource = {
+    [theme: string]: IconThemeSource;
+};

package/dist/components/icon/typedef.js

@@ -0,0 +1,16 @@
+/**
+ * @typedef {'path' | 'circle' | 'rect' | 'polygon' | 'polyline' | 'line'} AllowedTags
+ */
+
+/**
+ * @typedef { { a: { [attribute: string]: string }} &
+ *            { [tag in AllowedTags]?: { [attribute: string]: string }[] }
+ *   } IconThemeSource
+ */
+
+/**
+ * @typedef {{[theme: string]: IconThemeSource}} IconSource
+ */
+
+// Export default is required for exporting typedefs
+export default {};

package/dist/components/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/index.js

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

package/dist/components/layout/HkAppLayout.state.svelte.d.ts

@@ -0,0 +1,6 @@
+export class AppLayoutState {
+    landscapeOnSmallScreen: boolean;
+}
+export const createOrGetState: (instanceKey?: string | Symbol) => AppLayoutState;
+export const createState: (instanceKey?: string | Symbol) => AppLayoutState;
+export const getState: (instanceKey?: string | Symbol) => AppLayoutState;

package/dist/components/layout/HkAppLayout.state.svelte.js

@@ -0,0 +1,25 @@
+import { defineStateContext } from '../../util/svelte/state-context';
+
+import { browser } from '$app/environment';
+
+import { MediaQuery } from 'runed';
+
+/* ------------------------------------------------------- Define state class */
+
+export class AppLayoutState {
+	landscapeOnSmallScreen = $state(false);
+
+	constructor() {
+		if (browser) {
+			let mq = new MediaQuery('(max-height: 400px');
+
+			$effect(() => {
+				this.landscapeOnSmallScreen = mq.matches ? true : false;
+			});
+		}
+	}
+}
+
+/* -------------------------------------- Export create & get state functions */
+
+export const [createOrGetState, createState, getState] = defineStateContext(AppLayoutState);

package/dist/components/layout/HkAppLayout.svelte

@@ -0,0 +1,251 @@
+<script>
+	/**
+	 * @example
+	 * // file.svelte
+	 * <script>
+	 * import AppLayout from '.../components/layout';
+	 * <_/script>
+	 *
+	 * <AppLayout>
+	 *   {#snippet bgSnippet()}
+	 *     <BgGradient />
+	 *   {/snippet}
+	 *
+	 *   {#snippet bottomSnippet()}
+	 *     <BottomBar />
+	 *   {/snippet}
+	 *
+	 *   Main content
+	 *
+	 * </AppLayout>
+	 */
+
+	import { useResizeObserver } from '../../util/svelte/observe/index.js';
+
+	/**
+	 * @typedef AppLayoutProps
+	 *
+	 * @property {import('svelte').Snippet|undefined} [bgPageSnippet]
+	 * @property {import('svelte').Snippet|undefined} [bgSnippet]
+	 * @property {import('svelte').Snippet|undefined} [topSnippet]
+	 * @property {import('svelte').Snippet|undefined} [bottomSnippet]
+	 * @property {import('svelte').Snippet} children
+	 */
+
+	/** @type {AppLayoutProps} */
+	let {
+		// > Functional
+
+		/** @type {boolean} */
+		// hasAuth = false,
+
+		bgPageSnippet,
+		bgSnippet,
+
+		topSnippet,
+		bottomSnippet,
+
+		children
+
+		// > Style
+
+		// base = '',
+		// bg = '',
+		// classes = '',
+
+		// > Background (child) styles
+
+		// > AppTop (child) styles
+
+		// appTopBase = '',
+		// appTopBg = '',
+		// appTopPadding = '',
+		// appTopMargin = '',
+		// appTopClasses = ''
+	} = $props();
+
+	// setAppLayoutContext({});
+
+	// Observe AppLayoutHeight
+
+	/** @type {HTMLElement|null} */
+	let elemAppLayout = $state(null);
+	let elemAppLayoutHeight = $state(0);
+	let elemAppLayoutWidth = $state(0);
+
+	useResizeObserver(
+		() => elemAppLayout,
+		(entries) => {
+			for (const { contentRect } of entries) {
+				// console.log('elemLayoutHeight', entry.contentRect.height);
+				elemAppLayoutHeight = contentRect.height;
+				elemAppLayoutWidth = contentRect.width;
+				break;
+			}
+		}
+	);
+
+	// Observe layoutTopHeight
+
+	/** @type {HTMLElement|null} */
+	// let elemLayoutTop = $state(null);
+	// let elemLayoutTopHeight = $state(0);
+
+	// useResizeObserver(
+	//   () => elemLayoutTop,
+	//   (entries) => {
+	//     for (const entry of entries) {
+	//       console.log('elemLayoutTopHeight', entry.contentRect.height);
+	//       elemLayoutTopHeight = entry.contentRect.height;
+	//       break;
+	//     }
+	//   }
+	// );
+
+	// Observe layoutContentHeight
+
+	/** @type {HTMLElement|null} */
+	let elemLayoutContent = $state(null);
+	let elemLayoutContentHeight = $state(0);
+
+	useResizeObserver(
+		() => elemLayoutContent,
+		(entries) => {
+			for (const entry of entries) {
+				// console.log('elemLayoutHeight', entry.contentRect.height);
+				elemLayoutContentHeight = entry.contentRect.height;
+				break;
+			}
+		}
+	);
+
+	// Observe layoutBottomHeight
+
+	/** @type {HTMLElement|null} */
+	let elemLayoutBottom = $state(null);
+
+	let elemLayoutBottomHeight = $state(0);
+
+	useResizeObserver(
+		() => elemLayoutBottom,
+		(entries) => {
+			for (const entry of entries) {
+				// console.log('elemLayoutBottomRect', entry.contentRect);
+				elemLayoutBottomHeight = entry.contentRect.height;
+				break;
+			}
+		}
+	);
+
+	let contentMarginBottom = $derived(elemLayoutBottomHeight);
+
+	let innerWidth = $state(0);
+	let innerHeight = $state(0);
+	let outerHeight = $state(0);
+</script>
+
+<svelte:window bind:innerWidth bind:innerHeight bind:outerHeight />
+
+<div data-layout-page-bg class="fixed z-0 h-screen w-screen">
+	{#if bgPageSnippet}
+		{@render bgPageSnippet()}
+	{/if}
+</div>
+
+<!-- <div
+  data-app-layout
+  class="g-no-select g-no-double-tab-zoom relative z-10 mx-auto grid min-h-lvh w-full grid-cols-[1fr] place-items-stretch border-8 border-green-500"
+  bind:this={elemAppLayout}
+> -->
+<div
+	data-app-layout
+	class="g-no-select g-no-double-tab-zoom relative z-10 mx-auto min-h-svh w-full"
+	bind:this={elemAppLayout}
+>
+	<!-- BG (fixed)) -->
+
+	<div
+		data-layout-bg
+		class="relative bottom-0 z-20 h-svh w-full"
+		style:position={elemAppLayoutWidth ? 'fixed' : 'static'}
+		style:width={elemAppLayoutWidth ? `${elemAppLayoutWidth}px` : 'auto'}
+	>
+		{#if bgSnippet}
+			{@render bgSnippet()}
+		{/if}
+	</div>
+
+	<!-- FG (top, content) -->
+
+	<div data-layout-fg class="relative z-30 flex min-h-svh w-full flex-col">
+		<div data-layout-top class="relative z-40 w-full">
+			{#if topSnippet}
+				{@render topSnippet()}
+			{/if}
+		</div>
+
+		<div
+			data-layout-content
+			class="relative z-40 flex w-full grow flex-col"
+			bind:this={elemLayoutContent}
+			style:margin-bottom={`${contentMarginBottom}px`}
+		>
+			<!-- <div class="border text-white">
+        Top height: [{elemLayoutTopHeight}]<br />
+        Content height: [{elemLayoutContentHeight}]<br />
+        Bottom height: [{elemLayoutBottomHeight}]<br />
+        App Layout height: [{elemAppLayoutHeight}]<br />
+        Content margin bottom [{contentMarginBottom}]<br />
+        innerWidth [{innerWidth}]<br />
+        innerHeight [{innerHeight}]
+      </div> -->
+			<!-- -webkit-font-smoothing: antialiased; -->
+			{@render children()}
+		</div>
+	</div>
+
+	<!-- Bottom (fixed) -->
+
+	<div
+		data-layout-bottom
+		bind:this={elemLayoutBottom}
+		class="bottom-0 z-50 mx-auto"
+		style:position={elemAppLayoutWidth ? 'fixed' : 'static'}
+		style:width={elemAppLayoutWidth ? `${elemAppLayoutWidth}px` : 'auto'}
+	>
+		{#if bottomSnippet}
+			{@render bottomSnippet()}
+		{/if}
+
+		<!-- <AppBottom
+      base={appTopBase}
+      bg={appTopBg}
+      padding={appTopPadding}
+      margin={appTopMargin}
+      classes={appTopClasses}
+    /> -->
+	</div>
+</div>
+
+<style>
+	[data-layout-page-bg] {
+		overflow: hidden;
+	}
+
+	[data-layout-bg] {
+		grid-area: 1 / 1 / 2 / 2; /* row-start, col-start, row-end, col-end */
+		overflow: hidden;
+	}
+
+	[data-layout-fg] {
+		grid-area: 1 / 1 / 2 / 2; /* row-start, col-start, row-end, col-end */
+	}
+
+	:global(html:not(.no-scrollbar-shift-fix)) {
+		/*
+    * Shift contents of page to the left when scrollbar appears,
+    * so content like tab bars stay centered
+    */
+		padding-left: calc(100vw - 100%);
+	}
+</style>

package/dist/components/layout/HkAppLayout.svelte.d.ts

@@ -0,0 +1,8 @@
+export default HkAppLayout;
+declare const HkAppLayout: import("svelte").Component<{
+    bgPageSnippet?: import("svelte").Snippet | undefined;
+    bgSnippet?: import("svelte").Snippet | undefined;
+    topSnippet?: import("svelte").Snippet | undefined;
+    bottomSnippet?: import("svelte").Snippet | undefined;
+    children: import("svelte").Snippet;
+}, {}, "">;

package/dist/components/layout/HkGridLayers.svelte

@@ -0,0 +1,72 @@
+<script>
+	/**
+	 * Grid Layers component
+	 * This is a grid with only one cell. All direct children are
+	 * place in the same cell and form a visually stacked component.
+	 *
+	 * This can be used to place e.g. texts over an image. Place the
+	 * image in a layer and the text in another. The standard grid
+	 * content placement options can be used.
+	 *
+	 * Following component guidelines from Skeleton
+	 * @see https://next.skeleton.dev/docs/resources/contribute/components
+	 */
+
+	/**
+	 * @type {{
+	 *   base?: string,
+	 *   bg?: string,
+	 *   padding?: string,
+	 *   margin?: string,
+	 *   classes?: string,
+	 *   style?: string,
+	 *   boxBase?: string,
+	 *   boxBg?: string,
+	 *   boxPadding?: string,
+	 *   boxMargin?: string,
+	 *   boxClasses?: string,
+	 *   boxAttrs?: { [attr: string]: * },
+	 *   children: import('svelte').Snippet
+	 * } & { [attr: string]: * }}
+	 */
+	const {
+		// Style
+		base,
+		bg,
+		padding,
+		margin,
+		classes,
+		style,
+		boxBase,
+		boxBg,
+		boxPadding,
+		boxMargin,
+		boxClasses,
+
+		// Snippets
+		children,
+
+		// Attributes
+		...attrs
+	} = $props();
+</script>
+
+<div
+	data-hk-grid-layers-box
+	class="{boxBase} {boxBg} {boxPadding} {boxMargin} {boxClasses}"
+	{...attrs}
+>
+	<div
+		data-hk-grid-layers
+		class="grid grid-cols-1 grid-rows-1 {base} {bg} {classes} {margin}"
+		{style}
+	>
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	[data-hk-grid-layers] > :global(*) {
+		grid-area: 1/1/2/2;
+	}
+</style>

package/dist/components/layout/HkGridLayers.svelte.d.ts

@@ -0,0 +1,20 @@
+export default HkGridLayers;
+declare const HkGridLayers: import("svelte").Component<{
+    base?: string;
+    bg?: string;
+    padding?: string;
+    margin?: string;
+    classes?: string;
+    style?: string;
+    boxBase?: string;
+    boxBg?: string;
+    boxPadding?: string;
+    boxMargin?: string;
+    boxClasses?: string;
+    boxAttrs?: {
+        [attr: string]: any;
+    };
+    children: import("svelte").Snippet;
+} & {
+    [attr: string]: any;
+}, {}, "">;

package/dist/components/layout/index.d.ts

@@ -0,0 +1,3 @@
+export { default as HkAppLayout } from "./HkAppLayout.svelte";
+export { default as HkGridLayers } from "./HkGridLayers.svelte";
+export { createOrGetState as createOrGetAppLayoutState, createState as createAppLayoutState, getState as getAppLayoutState } from "./HkAppLayout.state.svelte.js";

package/dist/components/layout/index.js

@@ -0,0 +1,9 @@
+export {
+	createOrGetState as createOrGetAppLayoutState,
+	createState as createAppLayoutState,
+	getState as getAppLayoutState
+} from './HkAppLayout.state.svelte.js';
+
+export { default as HkAppLayout } from './HkAppLayout.svelte';
+
+export { default as HkGridLayers } from './HkGridLayers.svelte';