@placeholderco/placeholder-ui 1.0.3 → 1.0.6

package/dist/display/LinkCollection.svelte

@@ -1,161 +1,161 @@
-<script lang="ts">
-	import type { Hyperlink } from '../models/Hyperlink.js';
-	import Icon from '../icon/Icon.svelte';
-	import Link from '../ui/Link.svelte';
-	import type { LinkCollectionItem } from '../models/LinkCollectionItem.js';
-
-	interface Props {
-		links?: Hyperlink[];
-		items?: LinkCollectionItem[];
-		classes?: string;
-		footerButtons?: Hyperlink[];
-		notRounded?: boolean;
-		noOutsideBorder?: boolean;
-		noSeperator?: boolean;
-	}
-
-	let {
-		links = [],
-		items = [],
-		classes = '',
-		footerButtons,
-		notRounded = false,
-		noOutsideBorder = false,
-		noSeperator = false
-	}: Props = $props();
-</script>
-
-<div
-	class="link-collection {classes} {notRounded ? 'not-rounded' : ''} {noOutsideBorder
-		? 'no-outside-border'
-		: ''} {noSeperator ? 'no-seperator' : ''}"
->
-	{#each links as link}
-		<Link class="link" target={link.newTab ? '_blank' : undefined} href={link.href}>
-			{#if link.svg}
-				<Icon svg={link.svg} size="18px" />
-			{/if}
-			{link.text}
-		</Link>
-	{/each}
-	{#each items as item}
-		<Link class="link item" target={item.newTab ? '_blank' : undefined} href={item.href}>
-			<div class="link-inner left">
-				{#if item.leftSvg}
-					<Icon svg={item.leftSvg} size="18px" />
-				{/if}
-				<div>{@html item.leftContent}</div>
-			</div>
-			<div class="link-inner right">
-				<div>{@html item.rightContent}</div>
-				{#if item.rightSvg}
-					<Icon svg={item.rightSvg} size="18px" />
-				{/if}
-			</div>
-		</Link>
-	{/each}
-	{#if footerButtons && footerButtons.length > 0}
-		<div class="footer">
-			{#each footerButtons as button}
-				<div class="footer-button">
-					<Link class="link" target={button.newTab ? '_blank' : undefined} href={button.href}>
-						{#if button.svg}
-							<Icon svg={button.svg} size="18px" />
-						{/if}
-						{button.text}
-					</Link>
-				</div>
-			{/each}
-		</div>
-	{/if}
-</div>
-
-<style>
-	.link-collection {
-		display: flex;
-		flex-direction: column;
-		border: 1px solid var(--pui-border-default);
-		border-radius: var(--pui-radius-md);
-	}
-
-	.link-collection.not-rounded {
-		border-radius: 0;
-	}
-
-	.link-collection.no-outside-border {
-		border: none;
-	}
-
-	.link-collection.no-seperator :global(.link) {
-		border-bottom: none;
-	}
-
-	.link-collection :global(.link.item) {
-		display: flex;
-		justify-content: space-between;
-	}
-
-	.link-inner {
-		display: flex;
-		align-items: center;
-		gap: var(--pui-spacing-2);
-	}
-
-	.link-inner.left {
-		flex: 1;
-	}
-
-	.link-collection :global(.link) {
-		transition: all var(--pui-transition-fast) var(--pui-ease-in-out);
-		border-bottom: 1px solid var(--pui-border-default);
-		padding: var(--pui-spacing-2);
-		display: flex;
-		align-items: center;
-		gap: var(--pui-spacing-2);
-		text-decoration: none;
-		color: var(--pui-color-accent);
-		font-weight: normal;
-
-		&:hover {
-			background: var(--pui-bg-hover);
-		}
-
-		&:last-child {
-			border-bottom: none;
-		}
-	}
-
-	:global(.dark) {
-		.link-collection :global(.link) {
-			color: var(--pui-color-accent);
-		}
-
-		.link-collection :global(.link) {
-			&:hover {
-				background: var(--pui-bg-hover);
-			}
-		}
-	}
-
-	.footer {
-		display: flex;
-	}
-
-	.footer-button {
-		flex: 1;
-		border-right: 1px solid var(--pui-border-default);
-	}
-
-	.link-collection .footer-button :global(.link) {
-		font-weight: var(--pui-font-weight-semibold);
-	}
-
-	.footer-button:last-child {
-		border-right: none;
-	}
-
-	.footer-button :global(.link) {
-		flex-grow: 1;
-		justify-content: center;
-	}
-</style>
+<script lang="ts">
+	import type { Hyperlink } from '../models/Hyperlink.js';
+	import Icon from '../icon/Icon.svelte';
+	import Link from '../ui/Link.svelte';
+	import type { LinkCollectionItem } from '../models/LinkCollectionItem.js';
+
+	interface Props {
+		links?: Hyperlink[];
+		items?: LinkCollectionItem[];
+		classes?: string;
+		footerButtons?: Hyperlink[];
+		notRounded?: boolean;
+		noOutsideBorder?: boolean;
+		noSeperator?: boolean;
+	}
+
+	let {
+		links = [],
+		items = [],
+		classes = '',
+		footerButtons,
+		notRounded = false,
+		noOutsideBorder = false,
+		noSeperator = false
+	}: Props = $props();
+</script>
+
+<div
+	class="link-collection {classes} {notRounded ? 'not-rounded' : ''} {noOutsideBorder
+		? 'no-outside-border'
+		: ''} {noSeperator ? 'no-seperator' : ''}"
+>
+	{#each links as link}
+		<Link class="link" target={link.newTab ? '_blank' : undefined} href={link.href}>
+			{#if link.svg}
+				<Icon svg={link.svg} size="18px" />
+			{/if}
+			{link.text}
+		</Link>
+	{/each}
+	{#each items as item}
+		<Link class="link item" target={item.newTab ? '_blank' : undefined} href={item.href}>
+			<div class="link-inner left">
+				{#if item.leftSvg}
+					<Icon svg={item.leftSvg} size="18px" />
+				{/if}
+				<div>{@html item.leftContent}</div>
+			</div>
+			<div class="link-inner right">
+				<div>{@html item.rightContent}</div>
+				{#if item.rightSvg}
+					<Icon svg={item.rightSvg} size="18px" />
+				{/if}
+			</div>
+		</Link>
+	{/each}
+	{#if footerButtons && footerButtons.length > 0}
+		<div class="footer">
+			{#each footerButtons as button}
+				<div class="footer-button">
+					<Link class="link" target={button.newTab ? '_blank' : undefined} href={button.href}>
+						{#if button.svg}
+							<Icon svg={button.svg} size="18px" />
+						{/if}
+						{button.text}
+					</Link>
+				</div>
+			{/each}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.link-collection {
+		display: flex;
+		flex-direction: column;
+		border: 1px solid var(--pui-border-default);
+		border-radius: var(--pui-radius-md);
+	}
+
+	.link-collection.not-rounded {
+		border-radius: 0;
+	}
+
+	.link-collection.no-outside-border {
+		border: none;
+	}
+
+	.link-collection.no-seperator :global(.link) {
+		border-bottom: none;
+	}
+
+	.link-collection :global(.link.item) {
+		display: flex;
+		justify-content: space-between;
+	}
+
+	.link-inner {
+		display: flex;
+		align-items: center;
+		gap: var(--pui-spacing-2);
+	}
+
+	.link-inner.left {
+		flex: 1;
+	}
+
+	.link-collection :global(.link) {
+		transition: all var(--pui-transition-fast) var(--pui-ease-in-out);
+		border-bottom: 1px solid var(--pui-border-default);
+		padding: var(--pui-spacing-2);
+		display: flex;
+		align-items: center;
+		gap: var(--pui-spacing-2);
+		text-decoration: none;
+		color: var(--pui-color-accent);
+		font-weight: normal;
+
+		&:hover {
+			background: var(--pui-bg-hover);
+		}
+
+		&:last-child {
+			border-bottom: none;
+		}
+	}
+
+	:global(.dark) {
+		.link-collection :global(.link) {
+			color: var(--pui-color-accent);
+		}
+
+		.link-collection :global(.link) {
+			&:hover {
+				background: var(--pui-bg-hover);
+			}
+		}
+	}
+
+	.footer {
+		display: flex;
+	}
+
+	.footer-button {
+		flex: 1;
+		border-right: 1px solid var(--pui-border-default);
+	}
+
+	.link-collection .footer-button :global(.link) {
+		font-weight: var(--pui-font-weight-semibold);
+	}
+
+	.footer-button:last-child {
+		border-right: none;
+	}
+
+	.footer-button :global(.link) {
+		flex-grow: 1;
+		justify-content: center;
+	}
+</style>

package/dist/display/Paper.svelte

@@ -1,118 +1,118 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		class?: string;
-		containerClass?: string;
-		bodyClass?: string;
-		titleClass?: string;
-		title?: string;
-		noPadding?: boolean;
-		noGap?: boolean;
-		minBodyHeight?: string;
-		onTitleClick?: () => void;
-		buttons?: Snippet;
-		children?: Snippet;
-	}
-
-	let {
-		class: className = '',
-		containerClass = '',
-		bodyClass = '',
-		titleClass = '',
-		title = '',
-		noPadding = false,
-		noGap = false,
-		minBodyHeight,
-		onTitleClick = () => {},
-		buttons,
-		children
-	}: Props = $props();
-</script>
-
-<div class="paper rounded {containerClass} {className}">
-	{#if title}
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="paper-title {titleClass}" onclick={onTitleClick}>
-			<div class="paper-title-text">{title}</div>
-			<div class="paper-title-buttons">
-				{@render buttons?.()}
-			</div>
-		</div>
-	{/if}
-	<div
-		class="paper-body paper-body-bg rounded-b relative {bodyClass} 
-		{title && 'rounded-t-none'}
-		{noPadding && 'p-0'}
-		{!noGap && 'gap'}"
-		style="min-height: {minBodyHeight ? minBodyHeight : '0'};"
-	>
-		{@render children?.()}
-	</div>
-</div>
-
-<style>
-	.paper-body {
-		border-radius: var(--pui-radius-base);
-		position: relative;
-		padding: var(--pui-spacing-3);
-		flex-grow: 1;
-	}
-
-	.paper-body.rounded-t-none {
-		border-top-left-radius: 0;
-		border-top-right-radius: 0;
-	}
-
-	/* Stretch out the paper body so that a loader can show */
-	.paper-body:has(> .loader) {
-		min-height: 60px;
-	}
-
-	.paper-body-bg {
-		background-color: var(--pui-paper-body-bg);
-	}
-
-	.paper {
-		box-shadow: var(--pui-shadow-sm);
-		display: flex;
-		flex-direction: column;
-	}
-
-	.paper-title {
-		border-bottom: 1px solid var(--pui-border-disabled);
-		background: var(--pui-paper-title-bg);
-		border-color: var(--pui-paper-title-border);
-		border-top-left-radius: var(--pui-radius-base);
-		border-top-right-radius: var(--pui-radius-base);
-		font-weight: var(--pui-font-weight-semibold);
-		display: flex;
-		justify-content: space-between;
-	}
-
-	:global(.dark) .paper-title {
-		border-bottom: none;
-	}
-
-	.paper-title-text {
-		padding: var(--pui-spacing-2) var(--pui-spacing-3);
-	}
-
-	.paper-title-buttons {
-		margin-right: var(--pui-spacing-2);
-		display: flex;
-		align-items: center;
-		gap: var(--pui-spacing-1);
-	}
-
-	.gap {
-		display: flex;
-		flex-direction: column;
-		gap: var(--pui-spacing-2);
-	}
-
-	.p-0 {
-		padding: 0;
-	}
-</style>
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		class?: string;
+		containerClass?: string;
+		bodyClass?: string;
+		titleClass?: string;
+		title?: string;
+		noPadding?: boolean;
+		noGap?: boolean;
+		minBodyHeight?: string;
+		onTitleClick?: () => void;
+		buttons?: Snippet;
+		children?: Snippet;
+	}
+
+	let {
+		class: className = '',
+		containerClass = '',
+		bodyClass = '',
+		titleClass = '',
+		title = '',
+		noPadding = false,
+		noGap = false,
+		minBodyHeight,
+		onTitleClick = () => {},
+		buttons,
+		children
+	}: Props = $props();
+</script>
+
+<div class="paper rounded {containerClass} {className}">
+	{#if title}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="paper-title {titleClass}" onclick={onTitleClick}>
+			<div class="paper-title-text">{title}</div>
+			<div class="paper-title-buttons">
+				{@render buttons?.()}
+			</div>
+		</div>
+	{/if}
+	<div
+		class="paper-body paper-body-bg rounded-b relative {bodyClass} 
+		{title && 'rounded-t-none'}
+		{noPadding && 'p-0'}
+		{!noGap && 'gap'}"
+		style="min-height: {minBodyHeight ? minBodyHeight : '0'};"
+	>
+		{@render children?.()}
+	</div>
+</div>
+
+<style>
+	.paper-body {
+		border-radius: var(--pui-radius-base);
+		position: relative;
+		padding: var(--pui-spacing-3);
+		flex-grow: 1;
+	}
+
+	.paper-body.rounded-t-none {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+	}
+
+	/* Stretch out the paper body so that a loader can show */
+	.paper-body:has(> .loader) {
+		min-height: 60px;
+	}
+
+	.paper-body-bg {
+		background-color: var(--pui-paper-body-bg);
+	}
+
+	.paper {
+		box-shadow: var(--pui-shadow-sm);
+		display: flex;
+		flex-direction: column;
+	}
+
+	.paper-title {
+		border-bottom: 1px solid var(--pui-border-disabled);
+		background: var(--pui-paper-title-bg);
+		border-color: var(--pui-paper-title-border);
+		border-top-left-radius: var(--pui-radius-base);
+		border-top-right-radius: var(--pui-radius-base);
+		font-weight: var(--pui-font-weight-semibold);
+		display: flex;
+		justify-content: space-between;
+	}
+
+	:global(.dark) .paper-title {
+		border-bottom: none;
+	}
+
+	.paper-title-text {
+		padding: var(--pui-spacing-2) var(--pui-spacing-3);
+	}
+
+	.paper-title-buttons {
+		margin-right: var(--pui-spacing-2);
+		display: flex;
+		align-items: center;
+		gap: var(--pui-spacing-1);
+	}
+
+	.gap {
+		display: flex;
+		flex-direction: column;
+		gap: var(--pui-spacing-2);
+	}
+
+	.p-0 {
+		padding: 0;
+	}
+</style>