@x33025/sveltely 0.1.7 → 0.1.8

package/dist/actions/LoaderOverlay.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+	import Spinner from '../components/Library/Spinner/Spinner.svelte';
+	import VStack from '../components/Library/VStack/VStack.svelte';
+
+	type Props = {
+		text: string;
+	};
+
+	let { text }: Props = $props();
+</script>
+
+<div class="sveltely-loader-overlay" role="status" aria-live="polite" aria-label={text}>
+	<VStack align="center" justify="center" gap="var(--sveltely-gap)">
+		<Spinner />
+		<span class="sveltely-loader-text">{text}</span>
+	</VStack>
+</div>
+
+<style>
+	.sveltely-loader-overlay {
+		position: absolute;
+		inset: 0;
+		z-index: 20;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		border-radius: inherit;
+		background: var(--sveltely-background-color, white);
+		color: var(--sveltely-primary-color, black);
+		padding: var(--sveltely-padding-y, 0.75rem) var(--sveltely-padding-x, 0.75rem);
+		pointer-events: auto;
+		text-align: center;
+	}
+
+	.sveltely-loader-text {
+		max-width: 100%;
+		overflow: hidden;
+		color: var(--sveltely-secondary-color, currentColor);
+		font-size: calc(var(--sveltely-font-size, 1rem) * 0.875);
+		line-height: 1.25;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+</style>

package/dist/actions/LoaderOverlay.svelte.d.ts

@@ -0,0 +1,6 @@
+type Props = {
+    text: string;
+};
+declare const LoaderOverlay: import("svelte").Component<Props, {}, "">;
+type LoaderOverlay = ReturnType<typeof LoaderOverlay>;
+export default LoaderOverlay;

package/dist/actions/loader.d.ts

@@ -0,0 +1,11 @@
+import type { Action } from 'svelte/action';
+type LoaderTrigger = boolean | PromiseLike<unknown> | null | undefined;
+export type LoaderOptions = LoaderTrigger | [text: string, loading: LoaderTrigger] | {
+    text?: string;
+    loading?: LoaderTrigger;
+    active?: LoaderTrigger;
+    promise?: PromiseLike<unknown> | null;
+    disabled?: boolean;
+};
+export declare const loader: Action<HTMLElement, LoaderOptions>;
+export {};

package/dist/actions/loader.js

@@ -0,0 +1,117 @@
+import { mount, unmount } from 'svelte';
+import LoaderOverlay from './LoaderOverlay.svelte';
+const DEFAULT_TEXT = 'Loading';
+const isPromiseLike = (value) => typeof value === 'object' &&
+    value !== null &&
+    'then' in value &&
+    typeof value.then === 'function';
+const parseOptions = (value = false) => {
+    if (Array.isArray(value)) {
+        return {
+            text: value[0] || DEFAULT_TEXT,
+            loading: value[1],
+            disabled: false
+        };
+    }
+    if (typeof value === 'object' && value !== null && !isPromiseLike(value)) {
+        return {
+            text: value.text || DEFAULT_TEXT,
+            loading: value.loading ?? value.active ?? value.promise ?? false,
+            disabled: value.disabled ?? false
+        };
+    }
+    return {
+        text: DEFAULT_TEXT,
+        loading: value,
+        disabled: false
+    };
+};
+export const loader = (node, initialOptions = false) => {
+    if (typeof document === 'undefined') {
+        return {
+            update() { },
+            destroy() { }
+        };
+    }
+    const originalPosition = node.style.position;
+    const originalAriaBusy = node.getAttribute('aria-busy');
+    let options = parseOptions(initialOptions);
+    let overlay = null;
+    let overlayText = '';
+    let promiseVersion = 0;
+    let appliedPosition = false;
+    const ensureHostPosition = () => {
+        if (getComputedStyle(node).position !== 'static')
+            return;
+        node.style.position = 'relative';
+        appliedPosition = true;
+    };
+    const resetHostPosition = () => {
+        if (!appliedPosition)
+            return;
+        if (node.style.position === 'relative') {
+            node.style.position = originalPosition;
+        }
+        appliedPosition = false;
+    };
+    const show = () => {
+        ensureHostPosition();
+        node.setAttribute('aria-busy', 'true');
+        if (overlay && overlayText === options.text) {
+            return;
+        }
+        if (overlay) {
+            void unmount(overlay);
+        }
+        overlayText = options.text;
+        overlay = mount(LoaderOverlay, {
+            target: node,
+            props: {
+                text: options.text
+            }
+        });
+    };
+    const hide = () => {
+        if (overlay) {
+            void unmount(overlay);
+            overlay = null;
+            overlayText = '';
+        }
+        if (originalAriaBusy === null) {
+            node.removeAttribute('aria-busy');
+        }
+        else {
+            node.setAttribute('aria-busy', originalAriaBusy);
+        }
+        resetHostPosition();
+    };
+    const render = () => {
+        const currentVersion = ++promiseVersion;
+        if (options.disabled || !options.loading) {
+            hide();
+            return;
+        }
+        show();
+        if (!isPromiseLike(options.loading))
+            return;
+        options.loading.then(() => {
+            if (currentVersion === promiseVersion)
+                hide();
+        }, () => {
+            if (currentVersion === promiseVersion)
+                hide();
+        });
+    };
+    render();
+    return {
+        update(nextOptions = false) {
+            options = parseOptions(nextOptions);
+            render();
+        },
+        destroy() {
+            promiseVersion++;
+            hide();
+            resetHostPosition();
+        }
+    };
+};

package/dist/components/Library/Loader/Loader.demo.svelte

@@ -0,0 +1,74 @@
+<script module lang="ts">
+	export const demo = {
+		name: 'Loader',
+		description: 'Overlay loading state for any component.',
+		columnSpan: 1,
+		rowSpan: 2
+	};
+</script>
+
+<script lang="ts">
+	import { loader } from '../../../actions/loader';
+	import Button from '../Button';
+
+	let pending = $state<Promise<void> | null>(null);
+
+	const startLoading = () => {
+		const next = new Promise<void>((resolve) => {
+			setTimeout(resolve, 1600);
+		});
+
+		pending = next;
+		next.finally(() => {
+			if (pending === next) {
+				pending = null;
+			}
+		});
+	};
+</script>
+
+<div class="loader-demo" use:loader={{ text: 'Loading preview...', promise: pending }}>
+	<div class="loader-demo-copy">
+		<strong>Preview panel</strong>
+		<span>Click the button to cover this component with the loader overlay.</span>
+	</div>
+	<Button label="Show loader" onclick={startLoading} disabled={pending !== null} />
+</div>
+
+<style>
+	.loader-demo {
+		display: flex;
+		min-height: 8rem;
+		width: 100%;
+		flex-direction: column;
+		align-items: flex-start;
+		justify-content: space-between;
+		gap: var(--sveltely-gap);
+		border: 1px solid var(--sveltely-border-color);
+		border-radius: var(--sveltely-border-radius);
+		background: color-mix(
+			in oklab,
+			var(--sveltely-background-color) 94%,
+			var(--sveltely-primary-color)
+		);
+		padding: var(--sveltely-padding-y) var(--sveltely-padding-x);
+	}
+
+	.loader-demo-copy {
+		display: flex;
+		min-width: 0;
+		flex-direction: column;
+		gap: calc(var(--sveltely-gap) * 0.5);
+	}
+
+	.loader-demo-copy strong {
+		font-size: var(--sveltely-font-size);
+		line-height: 1.25;
+	}
+
+	.loader-demo-copy span {
+		color: var(--sveltely-secondary-color);
+		font-size: calc(var(--sveltely-font-size) * 0.875);
+		line-height: 1.3;
+	}
+</style>

package/dist/components/Library/Loader/Loader.demo.svelte.d.ts

@@ -0,0 +1,9 @@
+export declare const demo: {
+    name: string;
+    description: string;
+    columnSpan: number;
+    rowSpan: number;
+};
+declare const Loader: import("svelte").Component<Record<string, never>, {}, "">;
+type Loader = ReturnType<typeof Loader>;
+export default Loader;

package/dist/index.d.ts

@@ -2,6 +2,8 @@ export { motion, hover } from './actions/motion';
 export { portalHost, portalContent } from './actions/portal';
 export { tooltip } from './actions/tooltip';
 export type { TooltipOptions } from './actions/tooltip';
+export { loader } from './actions/loader';
+export type { LoaderOptions } from './actions/loader';
 export { LayoutAlignment, LayoutJustification, LayoutSize } from './style/layout';
 export type { LayoutAlignmentValue, LayoutJustificationValue, LayoutProps, LayoutSizeValue } from './style/layout';
 export { LabelOrientation } from './style/label';

package/dist/index.js

@@ -1,6 +1,7 @@
 export { motion, hover } from './actions/motion';
 export { portalHost, portalContent } from './actions/portal';
 export { tooltip } from './actions/tooltip';
+export { loader } from './actions/loader';
 export { LayoutAlignment, LayoutJustification, LayoutSize } from './style/layout';
 export { LabelOrientation } from './style/label';
 export { ImageFit, ImageLoading } from './style/media';

package/dist/style.css

@@ -212,6 +212,9 @@
   .relative {
     position: relative;
   }
+  .static {
+    position: static;
+  }
   .inset-0 {
     inset: calc(var(--spacing) * 0);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@x33025/sveltely",
-	"version": "0.1.7",
+	"version": "0.1.8",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",