INIT
This commit is contained in:
+33
@@ -0,0 +1,33 @@
|
||||
<script lang="ts">
|
||||
import { boxWith, mergeProps } from "svelte-toolbelt";
|
||||
import type { SliderRangeProps } from "../types.js";
|
||||
import { SliderRangeState } from "../slider.svelte.js";
|
||||
import { createId } from "../../../internal/create-id.js";
|
||||
|
||||
const uid = $props.id();
|
||||
|
||||
let {
|
||||
children,
|
||||
child,
|
||||
ref = $bindable(null),
|
||||
id = createId(uid),
|
||||
...restProps
|
||||
}: SliderRangeProps = $props();
|
||||
|
||||
const rangeState = SliderRangeState.create({
|
||||
id: boxWith(() => id),
|
||||
ref: boxWith(
|
||||
() => ref,
|
||||
(v) => (ref = v)
|
||||
),
|
||||
});
|
||||
const mergedProps = $derived(mergeProps(restProps, rangeState.props));
|
||||
</script>
|
||||
|
||||
{#if child}
|
||||
{@render child({ props: mergedProps })}
|
||||
{:else}
|
||||
<span {...mergedProps}>
|
||||
{@render children?.()}
|
||||
</span>
|
||||
{/if}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { SliderRangeProps } from "../types.js";
|
||||
declare const SliderRange: import("svelte").Component<SliderRangeProps, {}, "ref">;
|
||||
type SliderRange = ReturnType<typeof SliderRange>;
|
||||
export default SliderRange;
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
<script lang="ts">
|
||||
import { boxWith, mergeProps } from "svelte-toolbelt";
|
||||
import type { SliderThumbLabelProps } from "../types.js";
|
||||
import { SliderRootContext, SliderThumbLabelState } from "../slider.svelte.js";
|
||||
import { createId } from "../../../internal/create-id.js";
|
||||
|
||||
const uid = $props.id();
|
||||
|
||||
let {
|
||||
children,
|
||||
child,
|
||||
ref = $bindable(null),
|
||||
id = createId(uid),
|
||||
index,
|
||||
position: positionProp,
|
||||
...restProps
|
||||
}: SliderThumbLabelProps = $props();
|
||||
|
||||
const root = SliderRootContext.get();
|
||||
|
||||
const position = $derived.by(() => {
|
||||
if (positionProp !== undefined) return positionProp;
|
||||
switch (root.direction) {
|
||||
case "lr":
|
||||
case "rl":
|
||||
return "top";
|
||||
case "tb":
|
||||
case "bt":
|
||||
return "left";
|
||||
}
|
||||
});
|
||||
|
||||
const tickLabelState = SliderThumbLabelState.create({
|
||||
id: boxWith(() => id),
|
||||
ref: boxWith(
|
||||
() => ref,
|
||||
(v) => (ref = v)
|
||||
),
|
||||
index: boxWith(() => index),
|
||||
position: boxWith(() => position),
|
||||
});
|
||||
|
||||
const mergedProps = $derived(mergeProps(restProps, tickLabelState.props));
|
||||
</script>
|
||||
|
||||
{#if child}
|
||||
{@render child({ props: mergedProps })}
|
||||
{:else}
|
||||
<span {...mergedProps}>{@render children?.()}</span>
|
||||
{/if}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { SliderThumbLabelProps } from "../types.js";
|
||||
declare const SliderThumbLabel: import("svelte").Component<SliderThumbLabelProps, {}, "ref">;
|
||||
type SliderThumbLabel = ReturnType<typeof SliderThumbLabel>;
|
||||
export default SliderThumbLabel;
|
||||
+43
@@ -0,0 +1,43 @@
|
||||
<script lang="ts">
|
||||
import { boxWith, mergeProps } from "svelte-toolbelt";
|
||||
import type { SliderThumbProps } from "../types.js";
|
||||
import { SliderThumbState } from "../slider.svelte.js";
|
||||
import { createId } from "../../../internal/create-id.js";
|
||||
|
||||
const uid = $props.id();
|
||||
|
||||
let {
|
||||
children,
|
||||
child,
|
||||
ref = $bindable(null),
|
||||
id = createId(uid),
|
||||
index,
|
||||
disabled = false,
|
||||
...restProps
|
||||
}: SliderThumbProps = $props();
|
||||
|
||||
const thumbState = SliderThumbState.create({
|
||||
id: boxWith(() => id),
|
||||
ref: boxWith(
|
||||
() => ref,
|
||||
(v) => (ref = v)
|
||||
),
|
||||
index: boxWith(() => index),
|
||||
disabled: boxWith(() => disabled),
|
||||
});
|
||||
|
||||
const mergedProps = $derived(mergeProps(restProps, thumbState.props));
|
||||
</script>
|
||||
|
||||
{#if child}
|
||||
{@render child({
|
||||
active: thumbState.root.isThumbActive(thumbState.opts.index.current),
|
||||
props: mergedProps,
|
||||
})}
|
||||
{:else}
|
||||
<span {...mergedProps}>
|
||||
{@render children?.({
|
||||
active: thumbState.root.isThumbActive(thumbState.opts.index.current),
|
||||
})}
|
||||
</span>
|
||||
{/if}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { SliderThumbProps } from "../types.js";
|
||||
declare const SliderThumb: import("svelte").Component<SliderThumbProps, {}, "ref">;
|
||||
type SliderThumb = ReturnType<typeof SliderThumb>;
|
||||
export default SliderThumb;
|
||||
+50
@@ -0,0 +1,50 @@
|
||||
<script lang="ts">
|
||||
import { boxWith, mergeProps } from "svelte-toolbelt";
|
||||
import type { SliderTickLabelProps } from "../types.js";
|
||||
import { SliderRootContext, SliderTickLabelState } from "../slider.svelte.js";
|
||||
import { createId } from "../../../internal/create-id.js";
|
||||
|
||||
const uid = $props.id();
|
||||
|
||||
let {
|
||||
children,
|
||||
child,
|
||||
ref = $bindable(null),
|
||||
id = createId(uid),
|
||||
index,
|
||||
position: positionProp,
|
||||
...restProps
|
||||
}: SliderTickLabelProps = $props();
|
||||
|
||||
const root = SliderRootContext.get();
|
||||
|
||||
const position = $derived.by(() => {
|
||||
if (positionProp !== undefined) return positionProp;
|
||||
switch (root.direction) {
|
||||
case "lr":
|
||||
case "rl":
|
||||
return "top";
|
||||
case "tb":
|
||||
case "bt":
|
||||
return "left";
|
||||
}
|
||||
});
|
||||
|
||||
const tickLabelState = SliderTickLabelState.create({
|
||||
id: boxWith(() => id),
|
||||
ref: boxWith(
|
||||
() => ref,
|
||||
(v) => (ref = v)
|
||||
),
|
||||
index: boxWith(() => index),
|
||||
position: boxWith(() => position),
|
||||
});
|
||||
|
||||
const mergedProps = $derived(mergeProps(restProps, tickLabelState.props));
|
||||
</script>
|
||||
|
||||
{#if child}
|
||||
{@render child({ props: mergedProps })}
|
||||
{:else}
|
||||
<span {...mergedProps}>{@render children?.()}</span>
|
||||
{/if}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { SliderTickLabelProps } from "../types.js";
|
||||
declare const SliderTickLabel: import("svelte").Component<SliderTickLabelProps, {}, "ref">;
|
||||
type SliderTickLabel = ReturnType<typeof SliderTickLabel>;
|
||||
export default SliderTickLabel;
|
||||
+34
@@ -0,0 +1,34 @@
|
||||
<script lang="ts">
|
||||
import { boxWith, mergeProps } from "svelte-toolbelt";
|
||||
import type { SliderTickProps } from "../types.js";
|
||||
import { SliderTickState } from "../slider.svelte.js";
|
||||
import { createId } from "../../../internal/create-id.js";
|
||||
|
||||
const uid = $props.id();
|
||||
|
||||
let {
|
||||
children,
|
||||
child,
|
||||
ref = $bindable(null),
|
||||
id = createId(uid),
|
||||
index,
|
||||
...restProps
|
||||
}: SliderTickProps = $props();
|
||||
|
||||
const tickState = SliderTickState.create({
|
||||
id: boxWith(() => id),
|
||||
ref: boxWith(
|
||||
() => ref,
|
||||
(v) => (ref = v)
|
||||
),
|
||||
index: boxWith(() => index),
|
||||
});
|
||||
|
||||
const mergedProps = $derived(mergeProps(restProps, tickState.props));
|
||||
</script>
|
||||
|
||||
{#if child}
|
||||
{@render child({ props: mergedProps })}
|
||||
{:else}
|
||||
<span {...mergedProps}>{@render children?.()}</span>
|
||||
{/if}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { SliderTickProps } from "../types.js";
|
||||
declare const SliderTick: import("svelte").Component<SliderTickProps, {}, "ref">;
|
||||
type SliderTick = ReturnType<typeof SliderTick>;
|
||||
export default SliderTick;
|
||||
+99
@@ -0,0 +1,99 @@
|
||||
<script lang="ts">
|
||||
import { boxWith, mergeProps, type WritableBox } from "svelte-toolbelt";
|
||||
import type { SliderRootProps } from "../types.js";
|
||||
import { SliderRootState } from "../slider.svelte.js";
|
||||
import { createId } from "../../../internal/create-id.js";
|
||||
import { noop } from "../../../internal/noop.js";
|
||||
import { watch } from "runed";
|
||||
|
||||
const uid = $props.id();
|
||||
|
||||
let {
|
||||
children,
|
||||
child,
|
||||
id = createId(uid),
|
||||
ref = $bindable(null),
|
||||
value = $bindable(),
|
||||
type,
|
||||
onValueChange = noop,
|
||||
onValueCommit = noop,
|
||||
disabled = false,
|
||||
min: minProp,
|
||||
max: maxProp,
|
||||
step = 1,
|
||||
dir = "ltr",
|
||||
autoSort = true,
|
||||
orientation = "horizontal",
|
||||
thumbPositioning = "contain",
|
||||
trackPadding,
|
||||
...restProps
|
||||
}: SliderRootProps = $props();
|
||||
|
||||
const min = $derived.by(() => {
|
||||
if (minProp !== undefined) return minProp;
|
||||
if (Array.isArray(step)) return Math.min(...step);
|
||||
return 0;
|
||||
});
|
||||
|
||||
const max = $derived.by(() => {
|
||||
if (maxProp !== undefined) return maxProp;
|
||||
if (Array.isArray(step)) return Math.max(...step);
|
||||
return 100;
|
||||
});
|
||||
|
||||
function handleDefaultValue() {
|
||||
if (value !== undefined) return;
|
||||
if (type === "single") {
|
||||
return min;
|
||||
}
|
||||
return [];
|
||||
}
|
||||
|
||||
// SSR
|
||||
handleDefaultValue();
|
||||
|
||||
watch.pre(
|
||||
() => value,
|
||||
() => {
|
||||
handleDefaultValue();
|
||||
}
|
||||
);
|
||||
|
||||
const rootState = SliderRootState.create({
|
||||
id: boxWith(() => id),
|
||||
ref: boxWith(
|
||||
() => ref,
|
||||
(v) => (ref = v)
|
||||
),
|
||||
value: boxWith(
|
||||
() => value,
|
||||
(v) => {
|
||||
value = v;
|
||||
// @ts-expect-error - we know
|
||||
onValueChange(v);
|
||||
}
|
||||
) as WritableBox<number> | WritableBox<number[]>,
|
||||
// @ts-expect-error - we know
|
||||
onValueCommit: boxWith(() => onValueCommit),
|
||||
disabled: boxWith(() => disabled),
|
||||
min: boxWith(() => min),
|
||||
max: boxWith(() => max),
|
||||
step: boxWith(() => step),
|
||||
dir: boxWith(() => dir),
|
||||
autoSort: boxWith(() => autoSort),
|
||||
orientation: boxWith(() => orientation),
|
||||
thumbPositioning: boxWith(() => thumbPositioning),
|
||||
type,
|
||||
trackPadding: boxWith(() => trackPadding),
|
||||
});
|
||||
|
||||
const mergedProps = $derived(mergeProps(restProps, rootState.props));
|
||||
</script>
|
||||
|
||||
{#if child}
|
||||
{@render child({ props: mergedProps, ...rootState.snippetProps })}
|
||||
{:else}
|
||||
<span {...mergedProps}>
|
||||
{@render children?.(rootState.snippetProps)}
|
||||
</span>
|
||||
{/if}
|
||||
+4
@@ -0,0 +1,4 @@
|
||||
import type { SliderRootProps } from "../types.js";
|
||||
declare const Slider: import("svelte").Component<SliderRootProps, {}, "value" | "ref">;
|
||||
type Slider = ReturnType<typeof Slider>;
|
||||
export default Slider;
|
||||
Reference in New Issue
Block a user