@celar-ui/svelte 0.0.2 → 0.0.4
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.
package/dist/index.d.ts
CHANGED
|
@@ -12,6 +12,7 @@ export { default as Dialog } from './overlay/Dialog.svelte';
|
|
|
12
12
|
export { default as Gap } from './misc/Gap.svelte';
|
|
13
13
|
export { default as DuckSpinner } from './misc/DuckSpinner.svelte';
|
|
14
14
|
export { default as DotSpinner } from './misc/DotSpinner.svelte';
|
|
15
|
+
export { default as LinearProgressIndicator } from './misc/LinearProgressIndicator.svelte';
|
|
15
16
|
export { default as TextInput } from './inputs/TextInput.svelte';
|
|
16
17
|
export { default as FileInput } from './inputs/FileInput.svelte';
|
|
17
18
|
export { default as ColorInput } from './inputs/ColorInput.svelte';
|
package/dist/index.js
CHANGED
|
@@ -13,6 +13,7 @@ export { default as Dialog } from './overlay/Dialog.svelte';
|
|
|
13
13
|
export { default as Gap } from './misc/Gap.svelte';
|
|
14
14
|
export { default as DuckSpinner } from './misc/DuckSpinner.svelte';
|
|
15
15
|
export { default as DotSpinner } from './misc/DotSpinner.svelte';
|
|
16
|
+
export { default as LinearProgressIndicator } from './misc/LinearProgressIndicator.svelte';
|
|
16
17
|
export { default as TextInput } from './inputs/TextInput.svelte';
|
|
17
18
|
export { default as FileInput } from './inputs/FileInput.svelte';
|
|
18
19
|
export { default as ColorInput } from './inputs/ColorInput.svelte';
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
let props: HTMLAttributes<HTMLDivElement> = $props();
|
|
4
|
+
</script>
|
|
5
|
+
|
|
6
|
+
<div {...props} data-linear-progress-indicator>
|
|
7
|
+
<div data-linear-progress-indicator-line></div>
|
|
8
|
+
</div>
|
|
9
|
+
|
|
10
|
+
<style>[data-linear-progress-indicator] {
|
|
11
|
+
--line-height: var(--gap--sm);
|
|
12
|
+
--anim-duration: 1.7s;
|
|
13
|
+
display: block;
|
|
14
|
+
position: relative;
|
|
15
|
+
background-color: var(--color-primary--lighter);
|
|
16
|
+
width: 100%;
|
|
17
|
+
height: var(--line-height);
|
|
18
|
+
overflow: hidden;
|
|
19
|
+
}
|
|
20
|
+
[data-linear-progress-indicator] [data-linear-progress-indicator-line] {
|
|
21
|
+
position: absolute;
|
|
22
|
+
top: 0;
|
|
23
|
+
left: 0;
|
|
24
|
+
animation: linear-progress-animation var(--anim-duration) linear infinite;
|
|
25
|
+
background-color: var(--color-primary--dark);
|
|
26
|
+
width: 0;
|
|
27
|
+
height: 100%;
|
|
28
|
+
}
|
|
29
|
+
@keyframes linear-progress-animation {
|
|
30
|
+
0% {
|
|
31
|
+
left: -8%;
|
|
32
|
+
width: 8%;
|
|
33
|
+
}
|
|
34
|
+
100% {
|
|
35
|
+
left: 100%;
|
|
36
|
+
width: 100%;
|
|
37
|
+
}
|
|
38
|
+
}</style>
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
2
|
+
declare const LinearProgressIndicator: import("svelte").Component<HTMLAttributes<HTMLDivElement>, {}, "">;
|
|
3
|
+
type LinearProgressIndicator = ReturnType<typeof LinearProgressIndicator>;
|
|
4
|
+
export default LinearProgressIndicator;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { fade, fly } from 'svelte/transition';
|
|
3
|
-
import { Dialog, type DialogRootProps } from 'bits-ui';
|
|
3
|
+
import { Dialog as BitDialog, type DialogRootProps } from 'bits-ui';
|
|
4
4
|
import type { Snippet } from 'svelte';
|
|
5
5
|
import IconButton from '../buttons/IconButton.svelte';
|
|
6
6
|
|
|
@@ -30,33 +30,33 @@
|
|
|
30
30
|
let duration = 200;
|
|
31
31
|
</script>
|
|
32
32
|
|
|
33
|
-
<
|
|
34
|
-
<
|
|
33
|
+
<BitDialog.Root {...rest} bind:open>
|
|
34
|
+
<BitDialog.Trigger>
|
|
35
35
|
{#snippet child({ props })}
|
|
36
36
|
{@render trigger?.({ props })}
|
|
37
37
|
{/snippet}
|
|
38
|
-
</
|
|
39
|
-
<
|
|
40
|
-
<
|
|
38
|
+
</BitDialog.Trigger>
|
|
39
|
+
<BitDialog.Portal>
|
|
40
|
+
<BitDialog.Overlay forceMount>
|
|
41
41
|
{#snippet child({ props, open })}
|
|
42
42
|
{#if open}
|
|
43
43
|
<div {...props} transition:fade={{ duration }}></div>
|
|
44
44
|
{/if}
|
|
45
45
|
{/snippet}
|
|
46
|
-
</
|
|
47
|
-
<
|
|
46
|
+
</BitDialog.Overlay>
|
|
47
|
+
<BitDialog.Content forceMount data-xs={xs} data-sm={sm} data-md={md} data-fluid={fluid}>
|
|
48
48
|
{#snippet child({ props, open })}
|
|
49
49
|
{#if open}
|
|
50
50
|
<div {...props} transition:fly={{ duration, y: 50 }}>
|
|
51
51
|
<div data-dialog-header>
|
|
52
|
-
<
|
|
53
|
-
<
|
|
52
|
+
<BitDialog.Title children={title} />
|
|
53
|
+
<BitDialog.Close>
|
|
54
54
|
{#snippet child({ props })}
|
|
55
55
|
<IconButton {...props}>
|
|
56
56
|
{@render close?.()}
|
|
57
57
|
</IconButton>
|
|
58
58
|
{/snippet}
|
|
59
|
-
</
|
|
59
|
+
</BitDialog.Close>
|
|
60
60
|
</div>
|
|
61
61
|
|
|
62
62
|
<div data-dialog-body>
|
|
@@ -65,9 +65,9 @@
|
|
|
65
65
|
</div>
|
|
66
66
|
{/if}
|
|
67
67
|
{/snippet}
|
|
68
|
-
</
|
|
69
|
-
</
|
|
70
|
-
</
|
|
68
|
+
</BitDialog.Content>
|
|
69
|
+
</BitDialog.Portal>
|
|
70
|
+
</BitDialog.Root>
|
|
71
71
|
|
|
72
72
|
<style>:global([data-dialog-overlay]) {
|
|
73
73
|
position: fixed;
|