@sveltia/ui 0.48.0 → 0.50.0

package/dist/components/util/visibility-observer.svelte

@@ -0,0 +1,52 @@
+<script>
+  import { removeVisibilityResolver, waitForVisibility } from '@sveltia/utils/element';
+
+  /**
+   * @import { Snippet } from 'svelte';
+   */
+
+  /**
+   * @typedef {object} Props
+   * @property {Snippet} children Slot content.
+   */
+
+  /** @type {Props} */
+  let {
+    /* eslint-disable prefer-const */
+    children,
+    /* eslint-enable prefer-const */
+  } = $props();
+
+  /** @type {HTMLElement | null} */
+  let placeholder = $state(null);
+  /** @type {boolean} */
+  let visible = $state(false);
+
+  $effect(() => {
+    if (placeholder) {
+      (async () => {
+        await waitForVisibility(placeholder);
+        visible = true;
+      })();
+    }
+
+    // Clean up
+    return () => {
+      if (placeholder) {
+        removeVisibilityResolver(placeholder);
+      }
+    };
+  });
+</script>
+
+{#if visible}
+  {@render children()}
+{:else}
+  <div class="placeholder" bind:this={placeholder}></div>
+{/if}
+
+<style>
+  .placeholder {
+    height: 64px;
+  }
+</style>

package/dist/components/util/visibility-observer.svelte.d.ts

@@ -0,0 +1,18 @@
+export default VisibilityObserver;
+type VisibilityObserver = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<Props>): void;
+};
+declare const VisibilityObserver: import("svelte").Component<{
+    /**
+     * Slot content.
+     */
+    children: Snippet;
+}, {}, "">;
+type Props = {
+    /**
+     * Slot content.
+     */
+    children: Snippet;
+};
+import type { Snippet } from 'svelte';

package/dist/index.d.ts

@@ -77,5 +77,7 @@ export { default as AppShell } from "./components/util/app-shell.svelte";
 export { default as EmptyState } from "./components/util/empty-state.svelte";
 export { default as Group } from "./components/util/group.svelte";
 export { default as Modal } from "./components/util/modal.svelte";
+export { default as Placeholder } from "./components/util/placeholder.svelte";
+export { default as VisibilityObserver } from "./components/util/visibility-observer.svelte";
 export * from "./typedefs.js";
 export { initLocales, strings } from "./services/i18n.js";

package/dist/index.js

@@ -77,6 +77,8 @@ export { default as AppShell } from './components/util/app-shell.svelte';
 export { default as EmptyState } from './components/util/empty-state.svelte';
 export { default as Group } from './components/util/group.svelte';
 export { default as Modal } from './components/util/modal.svelte';
+export { default as Placeholder } from './components/util/placeholder.svelte';
+export { default as VisibilityObserver } from './components/util/visibility-observer.svelte';
 export { initLocales, strings } from './services/i18n.js';
 
 // eslint-disable-next-line import/export

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sveltia/ui",
-  "version": "0.48.0",
+  "version": "0.50.0",
   "description": "A collection of Svelte components and utilities for building user interfaces.",
   "repository": {
     "type": "git",
@@ -46,7 +46,7 @@
     "@lexical/table": "^0.48.0",
     "@lexical/utils": "^0.48.0",
     "@sveltia/i18n": "^1.1.3",
-    "@sveltia/utils": "^0.11.0",
+    "@sveltia/utils": "^0.12.0",
     "lexical": "^0.48.0",
     "prismjs": "^1.30.0"
   },
@@ -62,13 +62,13 @@
     "eslint-config-airbnb-extended": "^3.1.1",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-import": "^2.32.0",
-    "eslint-plugin-jsdoc": "^63.3.1",
+    "eslint-plugin-jsdoc": "^63.3.2",
     "eslint-plugin-package-json": "^1.6.2",
     "eslint-plugin-svelte": "^3.22.0",
     "globals": "^17.8.0",
     "happy-dom": "^20.11.1",
     "oxlint": "^1.76.0",
-    "postcss": "^8.5.23",
+    "postcss": "^8.5.24",
     "postcss-html": "^1.8.1",
     "prettier": "^3.9.6",
     "prettier-plugin-svelte": "^4.1.1",