@x33025/sveltely 0.0.15 → 0.0.17
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/actions/portal.d.ts +3 -3
- package/dist/actions/portal.js +3 -3
- package/dist/components/Dropdown/Dropdown.svelte +2 -2
- package/dist/components/PortalContent.svelte +21 -0
- package/dist/components/PortalContent.svelte.d.ts +10 -0
- package/dist/components/PortalHost.svelte +12 -0
- package/dist/components/PortalHost.svelte.d.ts +8 -0
- package/dist/components/Sheet/Sheet.svelte +2 -2
- package/dist/components/Slider.svelte +114 -0
- package/dist/components/Slider.svelte.d.ts +12 -0
- package/dist/index.d.ts +4 -1
- package/dist/index.js +4 -1
- package/dist/style/index.css +6 -0
- package/dist/style.css +19 -0
- package/package.json +1 -1
- package/dist/components/Portal.svelte +0 -6
- package/dist/components/Portal.svelte.d.ts +0 -20
package/dist/actions/portal.d.ts
CHANGED
|
@@ -1,12 +1,12 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Creates a portal host. Use this on the element that should contain the portaled content.
|
|
3
3
|
*/
|
|
4
|
-
export declare function
|
|
4
|
+
export declare function portalHost(node: HTMLElement, id?: string): {
|
|
5
5
|
destroy(): void;
|
|
6
6
|
};
|
|
7
7
|
/**
|
|
8
|
-
*
|
|
8
|
+
* Mounts an element into a named host created with portalHost.
|
|
9
9
|
*/
|
|
10
|
-
export declare function
|
|
10
|
+
export declare function portalContent(node: HTMLElement, id?: string): {
|
|
11
11
|
destroy: () => void | undefined;
|
|
12
12
|
};
|
package/dist/actions/portal.js
CHANGED
|
@@ -3,7 +3,7 @@ const portal_map = new Map();
|
|
|
3
3
|
/**
|
|
4
4
|
* Creates a portal host. Use this on the element that should contain the portaled content.
|
|
5
5
|
*/
|
|
6
|
-
export function
|
|
6
|
+
export function portalHost(node, id = 'default') {
|
|
7
7
|
const key = `$$portal.${id}`;
|
|
8
8
|
if (portal_map.has(key)) {
|
|
9
9
|
throw new Error(`Duplicate portal key "${id}"`);
|
|
@@ -28,9 +28,9 @@ function mount(node, key) {
|
|
|
28
28
|
};
|
|
29
29
|
}
|
|
30
30
|
/**
|
|
31
|
-
*
|
|
31
|
+
* Mounts an element into a named host created with portalHost.
|
|
32
32
|
*/
|
|
33
|
-
export function
|
|
33
|
+
export function portalContent(node, id = 'default') {
|
|
34
34
|
let destroy;
|
|
35
35
|
const key = `$$portal.${id}`;
|
|
36
36
|
if (!portal_map.has(key)) {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import type { Snippet } from 'svelte';
|
|
3
|
-
import {
|
|
3
|
+
import { portalContent } from '../../actions/portal';
|
|
4
4
|
|
|
5
5
|
interface Props {
|
|
6
6
|
trigger: Snippet;
|
|
@@ -106,7 +106,7 @@
|
|
|
106
106
|
|
|
107
107
|
{#if isOpen}
|
|
108
108
|
<div
|
|
109
|
-
use:
|
|
109
|
+
use:portalContent
|
|
110
110
|
class="dropdown-menu fixed z-50 border border-gray-200 focus:outline-none"
|
|
111
111
|
style="top: {menuCoords.top}px; left: {menuCoords.left}px; transform: {menuTransform}; border-radius: var(--dropdown-border-radius); background: var(--dropdown-background); box-shadow: var(--dropdown-shadow);"
|
|
112
112
|
role="menu"
|
|
@@ -0,0 +1,21 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
import { portalContent } from '../actions/portal';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
to = 'default',
|
|
7
|
+
class: className = '',
|
|
8
|
+
style = '',
|
|
9
|
+
children,
|
|
10
|
+
...props
|
|
11
|
+
}: { to?: string; class?: string; style?: string; children?: Snippet } & Record<
|
|
12
|
+
string,
|
|
13
|
+
unknown
|
|
14
|
+
> = $props();
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<div use:portalContent={to} class={className} {style} {...props}>
|
|
18
|
+
{#if children}
|
|
19
|
+
{@render children()}
|
|
20
|
+
{/if}
|
|
21
|
+
</div>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
type $$ComponentProps = {
|
|
3
|
+
to?: string;
|
|
4
|
+
class?: string;
|
|
5
|
+
style?: string;
|
|
6
|
+
children?: Snippet;
|
|
7
|
+
} & Record<string, unknown>;
|
|
8
|
+
declare const PortalContent: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
9
|
+
type PortalContent = ReturnType<typeof PortalContent>;
|
|
10
|
+
export default PortalContent;
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { portalHost } from '../actions/portal';
|
|
3
|
+
|
|
4
|
+
let {
|
|
5
|
+
name = 'default',
|
|
6
|
+
class: className = '',
|
|
7
|
+
style = '',
|
|
8
|
+
...props
|
|
9
|
+
}: { name?: string; class?: string; style?: string } & Record<string, unknown> = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<div use:portalHost={name} class={className} {style} {...props}></div>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
type $$ComponentProps = {
|
|
2
|
+
name?: string;
|
|
3
|
+
class?: string;
|
|
4
|
+
style?: string;
|
|
5
|
+
} & Record<string, unknown>;
|
|
6
|
+
declare const PortalHost: import("svelte").Component<$$ComponentProps, {}, "">;
|
|
7
|
+
type PortalHost = ReturnType<typeof PortalHost>;
|
|
8
|
+
export default PortalHost;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import type { Snippet } from 'svelte';
|
|
3
|
-
import {
|
|
3
|
+
import { portalContent } from '../../actions/portal';
|
|
4
4
|
interface Props {
|
|
5
5
|
open?: boolean;
|
|
6
6
|
label?: string;
|
|
@@ -40,7 +40,7 @@
|
|
|
40
40
|
</script>
|
|
41
41
|
|
|
42
42
|
{#if open}
|
|
43
|
-
<div class="center fixed inset-0 z-50 flex" use:
|
|
43
|
+
<div class="center fixed inset-0 z-50 flex" use:portalContent>
|
|
44
44
|
<button
|
|
45
45
|
type="button"
|
|
46
46
|
aria-label="Close dialog"
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
let {
|
|
3
|
+
value = $bindable(0),
|
|
4
|
+
min = 0,
|
|
5
|
+
max = 100,
|
|
6
|
+
step = 1,
|
|
7
|
+
disabled = false,
|
|
8
|
+
class: className = '',
|
|
9
|
+
style = '',
|
|
10
|
+
...props
|
|
11
|
+
}: {
|
|
12
|
+
value?: number;
|
|
13
|
+
min?: number;
|
|
14
|
+
max?: number;
|
|
15
|
+
step?: number | string;
|
|
16
|
+
disabled?: boolean;
|
|
17
|
+
class?: string;
|
|
18
|
+
style?: string;
|
|
19
|
+
} & Record<string, unknown> = $props();
|
|
20
|
+
|
|
21
|
+
const percent = $derived.by(() => {
|
|
22
|
+
const minValue = Number(min);
|
|
23
|
+
const maxValue = Number(max);
|
|
24
|
+
const currentValue = Number(value);
|
|
25
|
+
const range = maxValue - minValue;
|
|
26
|
+
if (!Number.isFinite(range) || range <= 0) return 0;
|
|
27
|
+
const raw = ((currentValue - minValue) / range) * 100;
|
|
28
|
+
return Math.max(0, Math.min(100, raw));
|
|
29
|
+
});
|
|
30
|
+
|
|
31
|
+
const sliderStyle = $derived.by(() => {
|
|
32
|
+
const cssVars = `--slider-pct: ${percent}%;`;
|
|
33
|
+
return style ? `${cssVars} ${style}` : cssVars;
|
|
34
|
+
});
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
<input
|
|
38
|
+
type="range"
|
|
39
|
+
bind:value
|
|
40
|
+
{min}
|
|
41
|
+
{max}
|
|
42
|
+
{step}
|
|
43
|
+
{disabled}
|
|
44
|
+
class="slider {className}"
|
|
45
|
+
style={sliderStyle}
|
|
46
|
+
{...props}
|
|
47
|
+
/>
|
|
48
|
+
|
|
49
|
+
<style>
|
|
50
|
+
.slider {
|
|
51
|
+
appearance: none;
|
|
52
|
+
height: 6px;
|
|
53
|
+
border-radius: 9999px;
|
|
54
|
+
background: transparent;
|
|
55
|
+
outline: none;
|
|
56
|
+
cursor: pointer;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.slider:focus-visible {
|
|
60
|
+
outline: 2px solid color-mix(in oklab, var(--color-gray-900) 35%, white);
|
|
61
|
+
outline-offset: 4px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.slider:disabled {
|
|
65
|
+
opacity: 0.5;
|
|
66
|
+
cursor: not-allowed;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.slider::-webkit-slider-runnable-track {
|
|
70
|
+
height: 6px;
|
|
71
|
+
border-radius: 9999px;
|
|
72
|
+
background: linear-gradient(
|
|
73
|
+
to right,
|
|
74
|
+
var(--slider-fill) 0%,
|
|
75
|
+
var(--slider-fill) var(--slider-pct),
|
|
76
|
+
var(--slider-track) var(--slider-pct),
|
|
77
|
+
var(--slider-track) 100%
|
|
78
|
+
);
|
|
79
|
+
}
|
|
80
|
+
|
|
81
|
+
.slider::-webkit-slider-thumb {
|
|
82
|
+
appearance: none;
|
|
83
|
+
width: 16px;
|
|
84
|
+
height: 16px;
|
|
85
|
+
border-radius: 9999px;
|
|
86
|
+
border: 2px solid var(--slider-thumb-outer);
|
|
87
|
+
background: var(--slider-thumb-inner);
|
|
88
|
+
box-shadow: var(--slider-shadow);
|
|
89
|
+
margin-top: -5px;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
.slider::-moz-range-track {
|
|
93
|
+
height: 6px;
|
|
94
|
+
border: none;
|
|
95
|
+
border-radius: 9999px;
|
|
96
|
+
background: var(--slider-track);
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.slider::-moz-range-progress {
|
|
100
|
+
height: 6px;
|
|
101
|
+
border: none;
|
|
102
|
+
border-radius: 9999px;
|
|
103
|
+
background: var(--slider-fill);
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
.slider::-moz-range-thumb {
|
|
107
|
+
width: 16px;
|
|
108
|
+
height: 16px;
|
|
109
|
+
border-radius: 9999px;
|
|
110
|
+
border: 2px solid var(--slider-thumb-outer);
|
|
111
|
+
background: var(--slider-thumb-inner);
|
|
112
|
+
box-shadow: var(--slider-shadow);
|
|
113
|
+
}
|
|
114
|
+
</style>
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
type $$ComponentProps = {
|
|
2
|
+
value?: number;
|
|
3
|
+
min?: number;
|
|
4
|
+
max?: number;
|
|
5
|
+
step?: number | string;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
class?: string;
|
|
8
|
+
style?: string;
|
|
9
|
+
} & Record<string, unknown>;
|
|
10
|
+
declare const Slider: import("svelte").Component<$$ComponentProps, {}, "value">;
|
|
11
|
+
type Slider = ReturnType<typeof Slider>;
|
|
12
|
+
export default Slider;
|
package/dist/index.d.ts
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
export { motion, hover } from './actions/motion';
|
|
2
|
+
export { portalHost, portalContent } from './actions/portal';
|
|
2
3
|
export { default as AnimatedNumber } from './components/AnimatedNumber.svelte';
|
|
3
4
|
export { default as GlowEffect } from './components/GlowEffect.svelte';
|
|
4
5
|
export { default as NavigationStack } from './components/NavigationStack';
|
|
5
|
-
export { default as
|
|
6
|
+
export { default as PortalHost } from './components/PortalHost.svelte';
|
|
7
|
+
export { default as PortalContent } from './components/PortalContent.svelte';
|
|
8
|
+
export { default as Slider } from './components/Slider.svelte';
|
|
6
9
|
export { default as Sheet } from './components/Sheet';
|
|
7
10
|
export { default as Spinner } from './components/Spinner.svelte';
|
|
8
11
|
export { default as TextShimmer } from './components/TextShimmer.svelte';
|
package/dist/index.js
CHANGED
|
@@ -1,8 +1,11 @@
|
|
|
1
1
|
export { motion, hover } from './actions/motion';
|
|
2
|
+
export { portalHost, portalContent } from './actions/portal';
|
|
2
3
|
export { default as AnimatedNumber } from './components/AnimatedNumber.svelte';
|
|
3
4
|
export { default as GlowEffect } from './components/GlowEffect.svelte';
|
|
4
5
|
export { default as NavigationStack } from './components/NavigationStack';
|
|
5
|
-
export { default as
|
|
6
|
+
export { default as PortalHost } from './components/PortalHost.svelte';
|
|
7
|
+
export { default as PortalContent } from './components/PortalContent.svelte';
|
|
8
|
+
export { default as Slider } from './components/Slider.svelte';
|
|
6
9
|
export { default as Sheet } from './components/Sheet';
|
|
7
10
|
export { default as Spinner } from './components/Spinner.svelte';
|
|
8
11
|
export { default as TextShimmer } from './components/TextShimmer.svelte';
|
package/dist/style/index.css
CHANGED
|
@@ -65,6 +65,12 @@
|
|
|
65
65
|
--tooltip-background: var(--color-black);
|
|
66
66
|
--tooltip-text: var(--color-white);
|
|
67
67
|
|
|
68
|
+
--slider-shadow: var(--shadow-md);
|
|
69
|
+
--slider-track: var(--color-zinc-300);
|
|
70
|
+
--slider-fill: var(--color-gray-900);
|
|
71
|
+
--slider-thumb-inner: var(--color-gray-900);
|
|
72
|
+
--slider-thumb-outer: var(--color-white);
|
|
73
|
+
|
|
68
74
|
--navigation-stack-sidebar-width: 16rem;
|
|
69
75
|
}
|
|
70
76
|
}
|
package/dist/style.css
CHANGED
|
@@ -15,6 +15,7 @@
|
|
|
15
15
|
--color-gray-900: oklch(21% 0.034 264.665);
|
|
16
16
|
--color-zinc-100: oklch(96.7% 0.001 286.375);
|
|
17
17
|
--color-zinc-200: oklch(92% 0.004 286.32);
|
|
18
|
+
--color-zinc-300: oklch(87.1% 0.006 286.286);
|
|
18
19
|
--color-zinc-500: oklch(55.2% 0.016 285.938);
|
|
19
20
|
--color-zinc-700: oklch(37% 0.013 285.805);
|
|
20
21
|
--color-zinc-950: oklch(14.1% 0.005 285.823);
|
|
@@ -256,6 +257,9 @@
|
|
|
256
257
|
.w-5 {
|
|
257
258
|
width: calc(var(--spacing) * 5);
|
|
258
259
|
}
|
|
260
|
+
.w-60 {
|
|
261
|
+
width: calc(var(--spacing) * 60);
|
|
262
|
+
}
|
|
259
263
|
.w-full {
|
|
260
264
|
width: 100%;
|
|
261
265
|
}
|
|
@@ -422,6 +426,10 @@
|
|
|
422
426
|
--tw-ring-color: color-mix(in oklab, var(--color-zinc-950) 10%, transparent);
|
|
423
427
|
}
|
|
424
428
|
}
|
|
429
|
+
.outline {
|
|
430
|
+
outline-style: var(--tw-outline-style);
|
|
431
|
+
outline-width: 1px;
|
|
432
|
+
}
|
|
425
433
|
.blur {
|
|
426
434
|
--tw-blur: blur(8px);
|
|
427
435
|
filter: var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,);
|
|
@@ -559,6 +567,11 @@
|
|
|
559
567
|
--tooltip-font-size: 12px;
|
|
560
568
|
--tooltip-background: var(--color-black);
|
|
561
569
|
--tooltip-text: var(--color-white);
|
|
570
|
+
--slider-shadow: var(--shadow-md);
|
|
571
|
+
--slider-track: var(--color-zinc-300);
|
|
572
|
+
--slider-fill: var(--color-gray-900);
|
|
573
|
+
--slider-thumb-inner: var(--color-gray-900);
|
|
574
|
+
--slider-thumb-outer: var(--color-white);
|
|
562
575
|
--navigation-stack-sidebar-width: 16rem;
|
|
563
576
|
}
|
|
564
577
|
}
|
|
@@ -685,6 +698,11 @@
|
|
|
685
698
|
inherits: false;
|
|
686
699
|
initial-value: 0 0 #0000;
|
|
687
700
|
}
|
|
701
|
+
@property --tw-outline-style {
|
|
702
|
+
syntax: "*";
|
|
703
|
+
inherits: false;
|
|
704
|
+
initial-value: solid;
|
|
705
|
+
}
|
|
688
706
|
@property --tw-blur {
|
|
689
707
|
syntax: "*";
|
|
690
708
|
inherits: false;
|
|
@@ -818,6 +836,7 @@
|
|
|
818
836
|
--tw-ring-offset-width: 0px;
|
|
819
837
|
--tw-ring-offset-color: #fff;
|
|
820
838
|
--tw-ring-offset-shadow: 0 0 #0000;
|
|
839
|
+
--tw-outline-style: solid;
|
|
821
840
|
--tw-blur: initial;
|
|
822
841
|
--tw-brightness: initial;
|
|
823
842
|
--tw-contrast: initial;
|
package/package.json
CHANGED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
2
|
-
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
3
|
-
$$bindings?: Bindings;
|
|
4
|
-
} & Exports;
|
|
5
|
-
(internal: unknown, props: Props & {
|
|
6
|
-
$$events?: Events;
|
|
7
|
-
$$slots?: Slots;
|
|
8
|
-
}): Exports & {
|
|
9
|
-
$set?: any;
|
|
10
|
-
$on?: any;
|
|
11
|
-
};
|
|
12
|
-
z_$$bindings?: Bindings;
|
|
13
|
-
}
|
|
14
|
-
declare const Portal: $$__sveltets_2_IsomorphicComponent<{
|
|
15
|
-
name?: string;
|
|
16
|
-
}, {
|
|
17
|
-
[evt: string]: CustomEvent<any>;
|
|
18
|
-
}, {}, {}, string>;
|
|
19
|
-
type Portal = InstanceType<typeof Portal>;
|
|
20
|
-
export default Portal;
|