@hkdigital/lib-sveltekit 0.1.6 → 0.1.7

package/dist/components/layout/HkAppLayout.svelte

@@ -1,251 +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>
+<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

@@ -1,4 +1,8 @@
 export default HkAppLayout;
+type HkAppLayout = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<AppLayoutProps>): void;
+};
 declare const HkAppLayout: import("svelte").Component<{
     bgPageSnippet?: import("svelte").Snippet | undefined;
     bgSnippet?: import("svelte").Snippet | undefined;
@@ -6,3 +10,10 @@ declare const HkAppLayout: import("svelte").Component<{
     bottomSnippet?: import("svelte").Snippet | undefined;
     children: import("svelte").Snippet;
 }, {}, "">;
+type AppLayoutProps = {
+    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

@@ -1,82 +1,82 @@
-<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,
-	 *   height?: string,
-	 *   classes?: string,
-	 *   style?: string,
-	 *   boxBase?: string,
-	 *   boxBg?: string,
-	 *   boxPadding?: string,
-	 *   boxMargin?: string,
-	 *   boxClasses?: string,
-	 *   boxAttrs?: { [attr: string]: * },
-	 *   children: import('svelte').Snippet
-	 * } & { [attr: string]: any }}
-	 */
-	const {
-		// Style
-		base,
-		bg,
-		padding,
-		margin,
-		height = 'h-full',
-		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} {height} {classes} {margin} {padding}"
-		{style}
-	>
-		{@render children()}
-	</div>
-</div>
-
-<style>
-	[data-hk-grid-layers] > :global(.area-above) {
-		grid-area: 1/1/2/2;
-	}
-
-	[data-hk-grid-layers] > :global(*) {
-		grid-area: 2/1/3/2;
-	}
-
-	[data-hk-grid-layers] > :global(.area-below) {
-		grid-area: 3/1/4/2;
-	}
-</style>
+<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,
+	 *   height?: string,
+	 *   classes?: string,
+	 *   style?: string,
+	 *   boxBase?: string,
+	 *   boxBg?: string,
+	 *   boxPadding?: string,
+	 *   boxMargin?: string,
+	 *   boxClasses?: string,
+	 *   boxAttrs?: { [attr: string]: * },
+	 *   children: import('svelte').Snippet
+	 * } & { [attr: string]: any }}
+	 */
+	const {
+		// Style
+		base,
+		bg,
+		padding,
+		margin,
+		height = 'h-full',
+		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} {height} {classes} {margin} {padding}"
+		{style}
+	>
+		{@render children()}
+	</div>
+</div>
+
+<style>
+	[data-hk-grid-layers] > :global(.area-above) {
+		grid-area: 1/1/2/2;
+	}
+
+	[data-hk-grid-layers] > :global(*) {
+		grid-area: 2/1/3/2;
+	}
+
+	[data-hk-grid-layers] > :global(.area-below) {
+		grid-area: 3/1/4/2;
+	}
+</style>