svelte-multiselect 11.4.0 → 11.5.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.
- package/package.json +11 -11
- package/readme.md +138 -39
- package/dist/CircleSpinner.svelte +0 -29
- package/dist/CircleSpinner.svelte.d.ts +0 -8
- package/dist/CmdPalette.svelte +0 -74
- package/dist/CmdPalette.svelte.d.ts +0 -66
- package/dist/CodeExample.svelte +0 -85
- package/dist/CodeExample.svelte.d.ts +0 -25
- package/dist/CopyButton.svelte +0 -74
- package/dist/CopyButton.svelte.d.ts +0 -25
- package/dist/FileDetails.svelte +0 -52
- package/dist/FileDetails.svelte.d.ts +0 -23
- package/dist/GitHubCorner.svelte +0 -82
- package/dist/GitHubCorner.svelte.d.ts +0 -13
- package/dist/Icon.svelte +0 -23
- package/dist/Icon.svelte.d.ts +0 -8
- package/dist/MultiSelect.svelte +0 -1190
- package/dist/MultiSelect.svelte.d.ts +0 -25
- package/dist/Nav.svelte +0 -444
- package/dist/Nav.svelte.d.ts +0 -42
- package/dist/PrevNext.svelte +0 -101
- package/dist/PrevNext.svelte.d.ts +0 -56
- package/dist/Toggle.svelte +0 -74
- package/dist/Toggle.svelte.d.ts +0 -11
- package/dist/Wiggle.svelte +0 -15
- package/dist/Wiggle.svelte.d.ts +0 -15
- package/dist/attachments.d.ts +0 -57
- package/dist/attachments.js +0 -547
- package/dist/icons.d.ts +0 -47
- package/dist/icons.js +0 -46
- package/dist/index.d.ts +0 -16
- package/dist/index.js +0 -42
- package/dist/types.d.ts +0 -171
- package/dist/types.js +0 -1
- package/dist/utils.d.ts +0 -5
- package/dist/utils.js +0 -61
package/dist/Toggle.svelte
DELETED
|
@@ -1,74 +0,0 @@
|
|
|
1
|
-
<script lang="ts">let { checked = $bindable(false), onkeydown, children, input_props, ...rest } = $props();
|
|
2
|
-
// normally input type=checkbox toggles on space bar, this handler also responds to enter
|
|
3
|
-
function handle_keydown(event) {
|
|
4
|
-
onkeydown?.(event);
|
|
5
|
-
if (event.key === `Enter`) {
|
|
6
|
-
event.preventDefault();
|
|
7
|
-
const target = event.target;
|
|
8
|
-
target.click(); // simulate real user toggle so 'change' is dispatched
|
|
9
|
-
}
|
|
10
|
-
}
|
|
11
|
-
export {};
|
|
12
|
-
</script>
|
|
13
|
-
|
|
14
|
-
<label {...rest}>
|
|
15
|
-
{@render children?.()}
|
|
16
|
-
<input
|
|
17
|
-
type="checkbox"
|
|
18
|
-
bind:checked
|
|
19
|
-
{...input_props}
|
|
20
|
-
onkeydown={handle_keydown}
|
|
21
|
-
/>
|
|
22
|
-
<span></span>
|
|
23
|
-
</label>
|
|
24
|
-
|
|
25
|
-
<style>
|
|
26
|
-
label {
|
|
27
|
-
display: var(--toggle-label-display, inline-flex);
|
|
28
|
-
align-items: var(--toggle-label-align-items, center);
|
|
29
|
-
width: var(--toggle-label-width, max-content);
|
|
30
|
-
vertical-align: var(--toggle-label-vertical-align, middle);
|
|
31
|
-
}
|
|
32
|
-
span {
|
|
33
|
-
box-sizing: border-box;
|
|
34
|
-
height: var(--toggle-knob-height, 1.5em);
|
|
35
|
-
width: var(--toggle-knob-width, 3em);
|
|
36
|
-
padding: var(--toggle-knob-padding, 0.1em);
|
|
37
|
-
border: var(--toggle-knob-border, 1px solid lightgray);
|
|
38
|
-
border-radius: var(--toggle-knob-border-radius, 0.75em);
|
|
39
|
-
transition: var(--toggle-knob-transition, 0.3s);
|
|
40
|
-
}
|
|
41
|
-
input:checked + span {
|
|
42
|
-
background: var(--toggle-background, black);
|
|
43
|
-
}
|
|
44
|
-
input {
|
|
45
|
-
position: absolute;
|
|
46
|
-
opacity: 0;
|
|
47
|
-
width: var(--toggle-input-width, 1em);
|
|
48
|
-
}
|
|
49
|
-
input + span::after {
|
|
50
|
-
content: '';
|
|
51
|
-
display: var(--toggle-knob-after-display, block);
|
|
52
|
-
height: var(--toggle-knob-after-height, 1.2em);
|
|
53
|
-
width: var(--toggle-knob-after-width, 1.2em);
|
|
54
|
-
border-radius: var(--toggle-knob-after-border-radius, 50%);
|
|
55
|
-
background: var(--toggle-knob-after-background, gray);
|
|
56
|
-
transition: var(--toggle-knob-after-transition, 0.3s);
|
|
57
|
-
}
|
|
58
|
-
input:checked + span::after {
|
|
59
|
-
background: var(--toggle-knob-after-background, green);
|
|
60
|
-
transform: var(
|
|
61
|
-
--toggle-knob-after-transform,
|
|
62
|
-
translate(
|
|
63
|
-
calc(
|
|
64
|
-
var(--toggle-knob-width, 3em) - var(--toggle-knob-height, 1.5em)
|
|
65
|
-
+ var(--toggle-knob-padding, 0.1em)
|
|
66
|
-
- var(--toggle-knob-border, 2px)
|
|
67
|
-
)
|
|
68
|
-
)
|
|
69
|
-
);
|
|
70
|
-
}
|
|
71
|
-
input:focus + span {
|
|
72
|
-
border: var(--toggle-knob-focus-border, 1px solid cornflowerblue);
|
|
73
|
-
}
|
|
74
|
-
</style>
|
package/dist/Toggle.svelte.d.ts
DELETED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import type { Snippet } from 'svelte';
|
|
2
|
-
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
-
type $$ComponentProps = HTMLAttributes<HTMLLabelElement> & {
|
|
4
|
-
checked?: boolean;
|
|
5
|
-
onkeydown?: (event: KeyboardEvent) => void;
|
|
6
|
-
children?: Snippet<[]>;
|
|
7
|
-
input_props?: HTMLAttributes<HTMLInputElement>;
|
|
8
|
-
};
|
|
9
|
-
declare const Toggle: import("svelte").Component<$$ComponentProps, {}, "checked">;
|
|
10
|
-
type Toggle = ReturnType<typeof Toggle>;
|
|
11
|
-
export default Toggle;
|
package/dist/Wiggle.svelte
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
<script lang="ts">import { Spring } from 'svelte/motion';
|
|
2
|
-
let { wiggle = $bindable(false), angle = 0, scale = 1, dx = 0, dy = 0, duration = 200, stiffness = 0.05, damping = 0.1, children, } = $props();
|
|
3
|
-
const store = Spring.of(() => (wiggle ? { scale, angle, dx, dy } : { angle: 0, scale: 1, dx: 0, dy: 0 }), { stiffness, damping });
|
|
4
|
-
$effect.pre(() => {
|
|
5
|
-
if (wiggle)
|
|
6
|
-
setTimeout(() => (wiggle = false), duration);
|
|
7
|
-
});
|
|
8
|
-
</script>
|
|
9
|
-
|
|
10
|
-
<span
|
|
11
|
-
style:transform="rotate({store.current.angle}deg) scale({store.current.scale})
|
|
12
|
-
translate({store.current.dx}px, {store.current.dy}px)"
|
|
13
|
-
>
|
|
14
|
-
{@render children?.()}
|
|
15
|
-
</span>
|
package/dist/Wiggle.svelte.d.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import type { Snippet } from 'svelte';
|
|
2
|
-
type $$ComponentProps = {
|
|
3
|
-
wiggle?: boolean;
|
|
4
|
-
angle?: number;
|
|
5
|
-
scale?: number;
|
|
6
|
-
dx?: number;
|
|
7
|
-
dy?: number;
|
|
8
|
-
duration?: number;
|
|
9
|
-
stiffness?: number;
|
|
10
|
-
damping?: number;
|
|
11
|
-
children?: Snippet;
|
|
12
|
-
};
|
|
13
|
-
declare const Wiggle: import("svelte").Component<$$ComponentProps, {}, "wiggle">;
|
|
14
|
-
type Wiggle = ReturnType<typeof Wiggle>;
|
|
15
|
-
export default Wiggle;
|
package/dist/attachments.d.ts
DELETED
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import { type Attachment } from 'svelte/attachments';
|
|
2
|
-
declare global {
|
|
3
|
-
interface CSS {
|
|
4
|
-
highlights: HighlightRegistry;
|
|
5
|
-
}
|
|
6
|
-
interface HighlightRegistry extends Map<string, Highlight> {
|
|
7
|
-
clear(): void;
|
|
8
|
-
delete(key: string): boolean;
|
|
9
|
-
set(key: string, value: Highlight): this;
|
|
10
|
-
}
|
|
11
|
-
}
|
|
12
|
-
export interface DraggableOptions {
|
|
13
|
-
handle_selector?: string;
|
|
14
|
-
disabled?: boolean;
|
|
15
|
-
on_drag_start?: (event: MouseEvent) => void;
|
|
16
|
-
on_drag?: (event: MouseEvent) => void;
|
|
17
|
-
on_drag_end?: (event: MouseEvent) => void;
|
|
18
|
-
}
|
|
19
|
-
export declare const draggable: (options?: DraggableOptions) => Attachment;
|
|
20
|
-
export declare function get_html_sort_value(element: HTMLElement): string;
|
|
21
|
-
export interface SortableOptions {
|
|
22
|
-
header_selector?: string;
|
|
23
|
-
asc_class?: string;
|
|
24
|
-
desc_class?: string;
|
|
25
|
-
sorted_style?: Partial<CSSStyleDeclaration>;
|
|
26
|
-
disabled?: boolean;
|
|
27
|
-
}
|
|
28
|
-
export declare const sortable: (options?: SortableOptions) => (node: HTMLElement) => (() => void) | undefined;
|
|
29
|
-
export type HighlightOptions = {
|
|
30
|
-
query?: string;
|
|
31
|
-
disabled?: boolean;
|
|
32
|
-
fuzzy?: boolean;
|
|
33
|
-
node_filter?: (node: Node) => number;
|
|
34
|
-
css_class?: string;
|
|
35
|
-
};
|
|
36
|
-
export declare const highlight_matches: (ops: HighlightOptions) => (node: HTMLElement) => (() => boolean) | undefined;
|
|
37
|
-
/**
|
|
38
|
-
* Options for the tooltip attachment.
|
|
39
|
-
*
|
|
40
|
-
* @security Tooltip content is rendered as HTML. If you allow user-provided content
|
|
41
|
-
* to be set via `title`, `aria-label`, or `data-title` attributes, you MUST sanitize
|
|
42
|
-
* it first to prevent XSS attacks. This attachment does not perform any sanitization.
|
|
43
|
-
*/
|
|
44
|
-
export interface TooltipOptions {
|
|
45
|
-
content?: string;
|
|
46
|
-
placement?: `top` | `bottom` | `left` | `right`;
|
|
47
|
-
delay?: number;
|
|
48
|
-
disabled?: boolean;
|
|
49
|
-
style?: string;
|
|
50
|
-
}
|
|
51
|
-
export declare const tooltip: (options?: TooltipOptions) => Attachment;
|
|
52
|
-
export type ClickOutsideConfig<T extends HTMLElement> = {
|
|
53
|
-
enabled?: boolean;
|
|
54
|
-
exclude?: string[];
|
|
55
|
-
callback?: (node: T, config: ClickOutsideConfig<T>) => void;
|
|
56
|
-
};
|
|
57
|
-
export declare const click_outside: <T extends HTMLElement>(config?: ClickOutsideConfig<T>) => (node: T) => (() => void) | undefined;
|