@placeholderco/placeholder-ui 1.0.3 → 1.0.6

package/dist/ui/Dropdown.svelte

@@ -1,97 +1,97 @@
-<!-- drop down component that displays a button, when clicked on the children expand -->
-<script lang="ts">
-	import Button from './Button.svelte';
-	import type { Hyperlink } from '../models/Hyperlink.js';
-	import LinkCollection from '../display/LinkCollection.svelte';
-	import { iconChevronDown } from '../icon/index.js';
-
-	interface Props {
-		show?: boolean;
-		label: string | undefined;
-		buttonSvg?: string | undefined;
-		links?: Hyperlink[] | Hyperlink[][];
-		class?: string;
-		alignToButton?: 'left' | 'right';
-	}
-
-	let {
-		show = $bindable(false),
-		label,
-		buttonSvg = iconChevronDown,
-		links = [],
-		class: classes = '',
-		alignToButton = 'left'
-	}: Props = $props();
-</script>
-
-<div class="dropdown {classes} {alignToButton}">
-	<Button class="ps-2" svg={buttonSvg} onclick={() => (show = !show)}>
-		{label}
-	</Button>
-	{#if show}
-		<!-- svelte-ignore a11y_click_events_have_key_events -->
-		<!-- svelte-ignore a11y_no_static_element_interactions -->
-		<div class="dropdown-content" onclick={(e) => e.stopPropagation()}>
-			{#if links.length > 0 && Array.isArray(links[0])}
-				{#each links as group}
-					<div class="dropdown-group">
-						<LinkCollection links={group as Hyperlink[]} noOutsideBorder noSeperator />
-					</div>
-				{/each}
-			{:else if links.length > 0}
-				<LinkCollection links={links as Hyperlink[]} noOutsideBorder noSeperator />
-			{/if}
-		</div>
-	{/if}
-</div>
-
-<style>
-	.dropdown {
-		position: relative;
-	}
-
-	.dropdown-content {
-		position: absolute;
-		top: 100%;
-		left: 0;
-		background-color: var(--pui-paper-body-bg);
-		min-width: 160px;
-		box-shadow: var(--pui-shadow-lg);
-		z-index: var(--pui-z-dropdown);
-		border-radius: var(--pui-radius-sm);
-		overflow: hidden;
-		border: 1px solid var(--pui-border-default);
-	}
-
-	.dropdown-group {
-		display: flex;
-		flex-direction: column;
-	}
-
-	.dropdown-group:not(:last-child) {
-		border-bottom: 1px solid var(--pui-border-default);
-	}
-
-	.dropdown-content :global(a) {
-		display: block;
-		padding: var(--pui-spacing-2) var(--pui-spacing-3);
-		text-decoration: none;
-		color: var(--pui-color-primary);
-		transition: background-color var(--pui-transition-fast) var(--pui-ease-out);
-	}
-
-	.dropdown-content :global(a:hover) {
-		background-color: var(--pui-bg-hover);
-	}
-
-	.dropdown.right .dropdown-content {
-		left: auto;
-		right: 0;
-	}
-
-	:global(.dark) {
-		.dropdown-content :global(a) {
-			color: var(--pui-color-secondary);
-		}
-	}
-</style>
+<!-- drop down component that displays a button, when clicked on the children expand -->
+<script lang="ts">
+	import Button from './Button.svelte';
+	import type { Hyperlink } from '../models/Hyperlink.js';
+	import LinkCollection from '../display/LinkCollection.svelte';
+	import { iconChevronDown } from '../icon/index.js';
+
+	interface Props {
+		show?: boolean;
+		label: string | undefined;
+		buttonSvg?: string | undefined;
+		links?: Hyperlink[] | Hyperlink[][];
+		class?: string;
+		alignToButton?: 'left' | 'right';
+	}
+
+	let {
+		show = $bindable(false),
+		label,
+		buttonSvg = iconChevronDown,
+		links = [],
+		class: classes = '',
+		alignToButton = 'left'
+	}: Props = $props();
+</script>
+
+<div class="dropdown {classes} {alignToButton}">
+	<Button class="ps-2" svg={buttonSvg} onclick={() => (show = !show)}>
+		{label}
+	</Button>
+	{#if show}
+		<!-- svelte-ignore a11y_click_events_have_key_events -->
+		<!-- svelte-ignore a11y_no_static_element_interactions -->
+		<div class="dropdown-content" onclick={(e) => e.stopPropagation()}>
+			{#if links.length > 0 && Array.isArray(links[0])}
+				{#each links as group}
+					<div class="dropdown-group">
+						<LinkCollection links={group as Hyperlink[]} noOutsideBorder noSeperator />
+					</div>
+				{/each}
+			{:else if links.length > 0}
+				<LinkCollection links={links as Hyperlink[]} noOutsideBorder noSeperator />
+			{/if}
+		</div>
+	{/if}
+</div>
+
+<style>
+	.dropdown {
+		position: relative;
+	}
+
+	.dropdown-content {
+		position: absolute;
+		top: 100%;
+		left: 0;
+		background-color: var(--pui-paper-body-bg);
+		min-width: 160px;
+		box-shadow: var(--pui-shadow-lg);
+		z-index: var(--pui-z-dropdown);
+		border-radius: var(--pui-radius-sm);
+		overflow: hidden;
+		border: 1px solid var(--pui-border-default);
+	}
+
+	.dropdown-group {
+		display: flex;
+		flex-direction: column;
+	}
+
+	.dropdown-group:not(:last-child) {
+		border-bottom: 1px solid var(--pui-border-default);
+	}
+
+	.dropdown-content :global(a) {
+		display: block;
+		padding: var(--pui-spacing-2) var(--pui-spacing-3);
+		text-decoration: none;
+		color: var(--pui-color-primary);
+		transition: background-color var(--pui-transition-fast) var(--pui-ease-out);
+	}
+
+	.dropdown-content :global(a:hover) {
+		background-color: var(--pui-bg-hover);
+	}
+
+	.dropdown.right .dropdown-content {
+		left: auto;
+		right: 0;
+	}
+
+	:global(.dark) {
+		.dropdown-content :global(a) {
+			color: var(--pui-color-secondary);
+		}
+	}
+</style>

package/dist/ui/Dropzone.svelte

@@ -1,122 +1,122 @@
-<script lang="ts">
-	import { toast } from './Toast.svelte.js';
-	import Loader from './Loader.svelte';
-
-	interface Props {
-		loading?: boolean;
-		multiple?: boolean;
-		onFileSubmit: (files: File[]) => void;
-		accept?: string;
-	}
-
-	let { loading = false, multiple = false, onFileSubmit, accept }: Props = $props();
-
-	let dragzoneElement: HTMLElement;
-	let fileInput: HTMLInputElement;
-	let dragOver: boolean = $state(false);
-	let labelText = $derived(dragOver ? 'Drop files here' : 'Click here or drag a file');
-
-	function handleClick(e: Event) {
-		e.preventDefault();
-		fileInput!.click();
-	}
-
-	function handleFileSubmission(files: File[]) {
-		onFileSubmit(files);
-	}
-
-	function handleFiles(event: DragEvent) {
-		event.preventDefault();
-		const files = event.dataTransfer?.files;
-		if (files) {
-			let array = Array.from(files);
-
-			if (!multiple && array.length > 1) array = [array[0]];
-
-			handleFileSubmission(array);
-		}
-		dragOver = false;
-	}
-
-	function handleDragOver(event: DragEvent) {
-		event.preventDefault();
-		dragOver = true;
-	}
-
-	function handleDragLeave(event: DragEvent) {
-		event.preventDefault();
-		dragOver = false;
-	}
-
-	function handleInputChange(event: Event) {
-		let fileList: FileList | null = (event.currentTarget as HTMLInputElement)?.files;
-		if (fileList) {
-			handleFileSubmission(Array.from(fileList));
-		} else {
-			toast.error('No file selected');
-		}
-	}
-</script>
-
-<input
-	type="file"
-	id="file-input"
-	multiple
-	onchange={handleInputChange}
-	bind:this={fileInput}
-	class="hidden"
-	accept={accept ? accept : '*.*'}
-/>
-<button
-	bind:this={dragzoneElement}
-	class="dropzone"
-	class:dragover={dragOver}
-	disabled={loading}
-	ondragenter={handleDragOver}
-	ondragover={(ev) => ev.preventDefault()}
-	ondragleave={handleDragLeave}
-	ondrop={handleFiles}
-	onclick={(e) => handleClick(e)}
->
-	{#if loading}
-		<Loader fullScreen />
-	{:else}
-		{labelText}
-	{/if}
-</button>
-
-<style>
-	.dropzone {
-		border: 1px dashed var(--pui-border-default);
-		padding: var(--pui-spacing-4);
-		text-align: center;
-		cursor: pointer;
-		transition: all var(--pui-transition-fast) var(--pui-ease-in-out);
-		border-radius: var(--pui-radius-lg);
-		flex-grow: 1;
-		background-color: var(--pui-input-bg);
-		color: var(--pui-text-primary);
-	}
-
-	.dropzone:hover,
-	.dropzone.dragover {
-		background-color: var(--pui-bg-hover);
-		border-color: var(--pui-color-primary);
-	}
-
-	.hidden {
-		display: none;
-	}
-
-	:global(.dark) .dropzone {
-		background-color: var(--pui-input-bg);
-		border-color: var(--pui-border-default);
-		color: var(--pui-text-primary);
-	}
-
-	:global(.dark) .dropzone:hover,
-	:global(.dark) .dropzone.dragover {
-		background-color: var(--pui-bg-hover);
-		border-color: var(--pui-color-secondary);
-	}
-</style>
+<script lang="ts">
+	import { toast } from './Toast.svelte.js';
+	import Loader from './Loader.svelte';
+
+	interface Props {
+		loading?: boolean;
+		multiple?: boolean;
+		onFileSubmit: (files: File[]) => void;
+		accept?: string;
+	}
+
+	let { loading = false, multiple = false, onFileSubmit, accept }: Props = $props();
+
+	let dragzoneElement: HTMLElement;
+	let fileInput: HTMLInputElement;
+	let dragOver: boolean = $state(false);
+	let labelText = $derived(dragOver ? 'Drop files here' : 'Click here or drag a file');
+
+	function handleClick(e: Event) {
+		e.preventDefault();
+		fileInput!.click();
+	}
+
+	function handleFileSubmission(files: File[]) {
+		onFileSubmit(files);
+	}
+
+	function handleFiles(event: DragEvent) {
+		event.preventDefault();
+		const files = event.dataTransfer?.files;
+		if (files) {
+			let array = Array.from(files);
+
+			if (!multiple && array.length > 1) array = [array[0]];
+
+			handleFileSubmission(array);
+		}
+		dragOver = false;
+	}
+
+	function handleDragOver(event: DragEvent) {
+		event.preventDefault();
+		dragOver = true;
+	}
+
+	function handleDragLeave(event: DragEvent) {
+		event.preventDefault();
+		dragOver = false;
+	}
+
+	function handleInputChange(event: Event) {
+		let fileList: FileList | null = (event.currentTarget as HTMLInputElement)?.files;
+		if (fileList) {
+			handleFileSubmission(Array.from(fileList));
+		} else {
+			toast.error('No file selected');
+		}
+	}
+</script>
+
+<input
+	type="file"
+	id="file-input"
+	multiple
+	onchange={handleInputChange}
+	bind:this={fileInput}
+	class="hidden"
+	accept={accept ? accept : '*.*'}
+/>
+<button
+	bind:this={dragzoneElement}
+	class="dropzone"
+	class:dragover={dragOver}
+	disabled={loading}
+	ondragenter={handleDragOver}
+	ondragover={(ev) => ev.preventDefault()}
+	ondragleave={handleDragLeave}
+	ondrop={handleFiles}
+	onclick={(e) => handleClick(e)}
+>
+	{#if loading}
+		<Loader fullScreen />
+	{:else}
+		{labelText}
+	{/if}
+</button>
+
+<style>
+	.dropzone {
+		border: 1px dashed var(--pui-border-default);
+		padding: var(--pui-spacing-4);
+		text-align: center;
+		cursor: pointer;
+		transition: all var(--pui-transition-fast) var(--pui-ease-in-out);
+		border-radius: var(--pui-radius-lg);
+		flex-grow: 1;
+		background-color: var(--pui-input-bg);
+		color: var(--pui-text-primary);
+	}
+
+	.dropzone:hover,
+	.dropzone.dragover {
+		background-color: var(--pui-bg-hover);
+		border-color: var(--pui-color-primary);
+	}
+
+	.hidden {
+		display: none;
+	}
+
+	:global(.dark) .dropzone {
+		background-color: var(--pui-input-bg);
+		border-color: var(--pui-border-default);
+		color: var(--pui-text-primary);
+	}
+
+	:global(.dark) .dropzone:hover,
+	:global(.dark) .dropzone.dragover {
+		background-color: var(--pui-bg-hover);
+		border-color: var(--pui-color-secondary);
+	}
+</style>

package/dist/ui/Link.svelte

@@ -1,32 +1,32 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Props {
-		href?: string;
-		rel?: string;
-		target?: '_self' | '_blank' | undefined;
-		class?: string;
-		children?: Snippet;
-		onclick?: (event: MouseEvent) => void;
-	}
-
-	let {
-		href,
-		rel = '',
-		target = undefined,
-		class: classes = '',
-		children,
-		onclick
-	}: Props = $props();
-</script>
-
-<a
-	{target}
-	class={classes}
-	{href}
-	{rel}
-	{onclick}
-	data-sveltekit-preload-data="hover"
->
-	{@render children?.()}
-</a>
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		href?: string;
+		rel?: string;
+		target?: '_self' | '_blank' | undefined;
+		class?: string;
+		children?: Snippet;
+		onclick?: (event: MouseEvent) => void;
+	}
+
+	let {
+		href,
+		rel = '',
+		target = undefined,
+		class: classes = '',
+		children,
+		onclick
+	}: Props = $props();
+</script>
+
+<a
+	{target}
+	class={classes}
+	{href}
+	{rel}
+	{onclick}
+	data-sveltekit-preload-data="hover"
+>
+	{@render children?.()}
+</a>

package/dist/ui/Loader.svelte

@@ -1,70 +1,70 @@
-<script lang="ts">
-	import Icon from '../icon/Icon.svelte';
-	import loaderSvg from '../icon/loader.svg?raw';
-
-	interface Props {
-		fullScreen?: boolean;
-		sizeOverride?: string;
-		class?: string;
-	}
-
-	let { fullScreen = false, sizeOverride = '50px', class: classes = '' }: Props = $props();
-
-	// export let fullScreen: boolean = false;
-	// export let sizeOverride: string = '50px';
-
-	// let classes: string = "";
-	// export { classes as class };
-</script>
-
-<span class="loader {classes} {fullScreen && 'full-screen'}">
-	<Icon size={sizeOverride} class="spin" svg={loaderSvg} />
-</span>
-
-<style>
-	.loader {
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-		color: var(--pui-loader-color, var(--pui-color-primary));
-	}
-
-	:global(.dark) .loader {
-		color: var(--pui-loader-color, var(--pui-color-secondary));
-	}
-
-	@keyframes -global-ckw {
-		from {
-			transform: rotate(0deg);
-		}
-		to {
-			transform: rotate(360deg);
-		}
-	}
-
-	.full-screen {
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		z-index: var(--pui-z-sticky);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background-color: rgba(255, 255, 255, 0.75);
-		border-radius: var(--pui-radius-base);
-		color: var(--pui-color-primary);
-	}
-
-	:global(.dark) .full-screen {
-		background-color: rgba(0, 0, 0, 0.75);
-		color: var(--pui-color-secondary);
-	}
-
-	:global(span.spin) {
-		display: inline-block;
-		transform-origin: 50% 50%;
-		animation: ckw 2s linear infinite;
-	}
-</style>
+<script lang="ts">
+	import Icon from '../icon/Icon.svelte';
+	import loaderSvg from '../icon/loader.svg?raw';
+
+	interface Props {
+		fullScreen?: boolean;
+		sizeOverride?: string;
+		class?: string;
+	}
+
+	let { fullScreen = false, sizeOverride = '50px', class: classes = '' }: Props = $props();
+
+	// export let fullScreen: boolean = false;
+	// export let sizeOverride: string = '50px';
+
+	// let classes: string = "";
+	// export { classes as class };
+</script>
+
+<span class="loader {classes} {fullScreen && 'full-screen'}">
+	<Icon size={sizeOverride} class="spin" svg={loaderSvg} />
+</span>
+
+<style>
+	.loader {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		color: var(--pui-loader-color, var(--pui-color-primary));
+	}
+
+	:global(.dark) .loader {
+		color: var(--pui-loader-color, var(--pui-color-secondary));
+	}
+
+	@keyframes -global-ckw {
+		from {
+			transform: rotate(0deg);
+		}
+		to {
+			transform: rotate(360deg);
+		}
+	}
+
+	.full-screen {
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		z-index: var(--pui-z-sticky);
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		background-color: rgba(255, 255, 255, 0.75);
+		border-radius: var(--pui-radius-base);
+		color: var(--pui-color-primary);
+	}
+
+	:global(.dark) .full-screen {
+		background-color: rgba(0, 0, 0, 0.75);
+		color: var(--pui-color-secondary);
+	}
+
+	:global(span.spin) {
+		display: inline-block;
+		transform-origin: 50% 50%;
+		animation: ckw 2s linear infinite;
+	}
+</style>