Add print behavior for components with hidden content

evidence-dev · Jan 3, 2025 · 27bca8e · 27bca8e
1 parent 18ae8a9
commit 27bca8e
Show file tree

Hide file tree

Showing 6 changed files with 116 additions and 30 deletions.
diff --git a/.changeset/angry-books-cheer.md b/.changeset/angry-books-cheer.md
@@ -0,0 +1,5 @@
+---
+'@evidence-dev/core-components': patch
+---
+
+Add print behavior for components with hidden content
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Details.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Details.svelte
@@ -3,24 +3,50 @@
 </script>
 
 <script>
+	import { slide } from 'svelte/transition';
+	import { toBoolean } from '../../utils.js';
+
 	export let title = 'Details';
 	export let open = false;
-	$: open = open === 'true' || open === true;
-	import { slide } from 'svelte/transition';
+	$: open = toBoolean(open);
+
+	export let printShowAll = true;
+	$: printShowAll = toBoolean(printShowAll);
+	let printing = false;
 </script>
 
-<div class="mb-4 mt-3">
-	<button class="text-sm cursor-pointer inline-flex gap-2" on:click={() => (open = !open)}>
-		<span class={open ? 'marker rotate-marker' : 'marker'} />
-		<span> {title} </span>
-	</button>
+<svelte:window
+	on:beforeprint={() => (printing = true)}
+	on:afterprint={() => (printing = false)}
+	on:export-beforeprint={() => (printing = true)}
+	on:export-afterprint={() => (printing = false)}
+/>
+
+{#if !printing || !printShowAll}
+	<div class="mb-4 mt-2">
+		<button
+			class="text-sm text-base-content-muted cursor-pointer inline-flex gap-2"
+			on:click={() => (open = !open)}
+		>
+			<span class={open ? 'marker rotate-marker' : 'marker'} />
+			<span> {title} </span>
+		</button>
+
+		{#if open}
+			<div class="pl-[calc(0.5rem+10px)] pt-3 mb-6 text-sm" transition:slide|local>
+				<slot />
+			</div>
+		{/if}
+	</div>
+{:else}
+	<div class="mb-4 mt-2 text-base-content-muted">
+		<span class="text-sm font-semibold inline-flex"> {title} </span>
 
-	{#if open}
-		<div class="pl-[calc(0.5rem+10px)] pt-3 mb-6" transition:slide|local>
+		<div class="pt-1 mb-6 text-sm">
 			<slot />
 		</div>
-	{/if}
-</div>
+	</div>
+{/if}
 
 <style>
 	.marker {

diff --git a/packages/ui/core-components/src/lib/unsorted/ui/LastRefreshed.svelte b/packages/ui/core-components/src/lib/unsorted/ui/LastRefreshed.svelte
@@ -4,10 +4,19 @@
 
 <script>
 	import { version } from '$app/environment';
+	import { toBoolean } from '../../utils.js';
+	import { fmt } from '@evidence-dev/component-utilities/formatting';
+
 	const timestamp = Number(version);
 
 	export let prefix = 'Last refreshed';
 
+	export let printShowDate = true;
+	$: printShowDate = toBoolean(printShowDate);
+	let printing = false;
+
+	export let dateFmt = 'h:mmam/pm mmm d, yyyy';
+
 	function timeAgo(startTimestamp, endTimestamp) {
 		const secondsAgo = Math.floor((endTimestamp - startTimestamp) / 1000);
 
@@ -37,7 +46,18 @@
 	const varTimeAgo = timeAgo(timestamp, Date.now());
 </script>
 
-<p class="text-sm py-1 cursor-text" title={new Date(timestamp).toLocaleString()}>
+<svelte:window
+	on:beforeprint={() => (printing = true)}
+	on:afterprint={() => (printing = false)}
+	on:export-beforeprint={() => (printing = true)}
+	on:export-afterprint={() => (printing = false)}
+/>
+
+<p class="text-sm mb-4 cursor-text" title={new Date(timestamp).toLocaleString()}>
 	{prefix}
-	{varTimeAgo}
+	{#if !printing || !printShowDate}
+		{varTimeAgo}
+	{:else}
+		{fmt(new Date(timestamp), dateFmt)}
+	{/if}
 </p>
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Tabs/Tab.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Tabs/Tab.svelte
@@ -5,6 +5,7 @@
 <script>
 	import { getContext, onDestroy, onMount } from 'svelte';
 	import { nanoid } from 'nanoid';
+	import TabDisplay from './TabDisplay.svelte';
 
 	/**
 	 * @type {string}
@@ -54,8 +55,25 @@
 	onDestroy(() => {
 		$context.tabs = $context.tabs.filter((t) => t.internalId !== internalId);
 	});
+
+	const color = $context.color;
 </script>
 
-{#if selected}
-	<slot />
+{#if !$context.printing || !$context.printShowAll}
+	{#if selected}
+		<div class="mb-5">
+			<slot />
+		</div>
+	{/if}
+{:else}
+	<nav class="my-6 flex flex-wrap gap-x-1 gap-y-1">
+		{#each $context.tabs as tab}
+			<TabDisplay id={tab.id} label={tab.label} activeId={id} {color}>
+				<slot />
+			</TabDisplay>
+		{/each}
+	</nav>
+	<div class="text-base">
+		<slot />
+	</div>
 {/if}
diff --git a/packages/ui/core-components/src/lib/unsorted/ui/Tabs/Tabs.svelte b/packages/ui/core-components/src/lib/unsorted/ui/Tabs/Tabs.svelte
@@ -6,9 +6,13 @@
 	import { onMount, setContext } from 'svelte';
 	import { writable } from 'svelte/store';
 	import TabDisplay from './TabDisplay.svelte';
+	import { toBoolean } from '../../../utils.js';
 
 	export let id;
 	export let color = undefined;
+	export let printShowAll = true;
+	$: printShowAll = toBoolean(printShowAll);
+	let printing = false;
 
 	/** @type {import('./index.d.ts').TabsContext} */
 	const context = writable({ tabs: [], activeId: null });
@@ -44,27 +48,40 @@
 		history.replaceState({}, '', url);
 	}
 
+	$: $context.color = color;
+	$: $context.printing = printing;
+	$: $context.printShowAll = printShowAll;
+
 	setContext('TABS_STORE', context);
 
 	const handleTabClick = (id) => {
 		$context.activeId = id;
 	};
 </script>
 
+<svelte:window
+	on:beforeprint={() => (printing = true)}
+	on:afterprint={() => (printing = false)}
+	on:export-beforeprint={() => (printing = true)}
+	on:export-afterprint={() => (printing = false)}
+/>
+
 <section>
-	<nav class="my-6 flex flex-wrap gap-x-1 gap-y-1">
-		{#each $context.tabs as tab}
-			<TabDisplay
-				id={tab.id}
-				label={tab.label}
-				{color}
-				activeId={$context.activeId}
-				on:click={() => handleTabClick(tab.id)}
-			>
-				<slot />
-			</TabDisplay>
-		{/each}
-	</nav>
+	{#if !printing || !printShowAll}
+		<nav class="my-6 flex flex-wrap gap-x-1 gap-y-1">
+			{#each $context.tabs as tab}
+				<TabDisplay
+					id={tab.id}
+					label={tab.label}
+					{color}
+					activeId={$context.activeId}
+					on:click={() => handleTabClick(tab.id)}
+				>
+					<slot />
+				</TabDisplay>
+			{/each}
+		</nav>
+	{/if}
 	<div class="text-base">
 		<slot />
 	</div>

diff --git a/sites/docs/pages/components/ui/details/index.md b/sites/docs/pages/components/ui/details/index.md
@@ -10,7 +10,7 @@ The details component allows you to add a collapsible section to your markdown.
 <DocTab>
     <div slot='preview'>
         <Details title="Definitions">
-            
+
             Definition of metrics in Solutions Targets
 
             ### Time to Proposal
@@ -50,7 +50,7 @@ The details component allows you to add a collapsible section to your markdown.
 <DocTab>
     <div slot='preview'>
         <Details title="Definitions" open=true>
-            
+
             Definition of metrics in Solutions Targets
 
             ### Time to Proposal