@sveltia/ui 0.48.0 → 0.49.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
<script>
|
|
2
|
+
import { removeVisibilityResolver, waitForVisibility } from '@sveltia/utils/element';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* @import { Snippet } from 'svelte';
|
|
6
|
+
*/
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* @typedef {object} Props
|
|
10
|
+
* @property {Snippet} children Slot content.
|
|
11
|
+
*/
|
|
12
|
+
|
|
13
|
+
/** @type {Props} */
|
|
14
|
+
let {
|
|
15
|
+
/* eslint-disable prefer-const */
|
|
16
|
+
children,
|
|
17
|
+
/* eslint-enable prefer-const */
|
|
18
|
+
} = $props();
|
|
19
|
+
|
|
20
|
+
/** @type {HTMLElement | null} */
|
|
21
|
+
let placeholder = $state(null);
|
|
22
|
+
/** @type {boolean} */
|
|
23
|
+
let visible = $state(false);
|
|
24
|
+
|
|
25
|
+
$effect(() => {
|
|
26
|
+
if (placeholder) {
|
|
27
|
+
(async () => {
|
|
28
|
+
await waitForVisibility(placeholder);
|
|
29
|
+
visible = true;
|
|
30
|
+
})();
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
// Clean up
|
|
34
|
+
return () => {
|
|
35
|
+
if (placeholder) {
|
|
36
|
+
removeVisibilityResolver(placeholder);
|
|
37
|
+
}
|
|
38
|
+
};
|
|
39
|
+
});
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
{#if visible}
|
|
43
|
+
{@render children()}
|
|
44
|
+
{:else}
|
|
45
|
+
<div class="placeholder" bind:this={placeholder}></div>
|
|
46
|
+
{/if}
|
|
47
|
+
|
|
48
|
+
<style>
|
|
49
|
+
.placeholder {
|
|
50
|
+
height: 64px;
|
|
51
|
+
}
|
|
52
|
+
</style>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
export default VisibilityObserver;
|
|
2
|
+
type VisibilityObserver = {
|
|
3
|
+
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
+
$set?(props: Partial<Props>): void;
|
|
5
|
+
};
|
|
6
|
+
declare const VisibilityObserver: import("svelte").Component<{
|
|
7
|
+
/**
|
|
8
|
+
* Slot content.
|
|
9
|
+
*/
|
|
10
|
+
children: Snippet;
|
|
11
|
+
}, {}, "">;
|
|
12
|
+
type Props = {
|
|
13
|
+
/**
|
|
14
|
+
* Slot content.
|
|
15
|
+
*/
|
|
16
|
+
children: Snippet;
|
|
17
|
+
};
|
|
18
|
+
import type { Snippet } from 'svelte';
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sveltia/ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.49.0",
|
|
4
4
|
"description": "A collection of Svelte components and utilities for building user interfaces.",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"@lexical/table": "^0.48.0",
|
|
47
47
|
"@lexical/utils": "^0.48.0",
|
|
48
48
|
"@sveltia/i18n": "^1.1.3",
|
|
49
|
-
"@sveltia/utils": "^0.
|
|
49
|
+
"@sveltia/utils": "^0.12.0",
|
|
50
50
|
"lexical": "^0.48.0",
|
|
51
51
|
"prismjs": "^1.30.0"
|
|
52
52
|
},
|
|
@@ -62,13 +62,13 @@
|
|
|
62
62
|
"eslint-config-airbnb-extended": "^3.1.1",
|
|
63
63
|
"eslint-config-prettier": "^10.1.8",
|
|
64
64
|
"eslint-plugin-import": "^2.32.0",
|
|
65
|
-
"eslint-plugin-jsdoc": "^63.3.
|
|
65
|
+
"eslint-plugin-jsdoc": "^63.3.2",
|
|
66
66
|
"eslint-plugin-package-json": "^1.6.2",
|
|
67
67
|
"eslint-plugin-svelte": "^3.22.0",
|
|
68
68
|
"globals": "^17.8.0",
|
|
69
69
|
"happy-dom": "^20.11.1",
|
|
70
70
|
"oxlint": "^1.76.0",
|
|
71
|
-
"postcss": "^8.5.
|
|
71
|
+
"postcss": "^8.5.24",
|
|
72
72
|
"postcss-html": "^1.8.1",
|
|
73
73
|
"prettier": "^3.9.6",
|
|
74
74
|
"prettier-plugin-svelte": "^4.1.1",
|