svelora 3.0.1 → 3.0.2
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/Accordion/Accordion.svelte +66 -97
- package/dist/Alert/Alert.svelte +39 -64
- package/dist/Alert/Alert.svelte.d.ts +1 -1
- package/dist/Avatar/Avatar.svelte +35 -75
- package/dist/AvatarGroup/AvatarGroup.svelte +38 -55
- package/dist/Badge/Badge.svelte +28 -50
- package/dist/Banner/Banner.svelte +46 -41
- package/dist/Banner/Banner.svelte.d.ts +1 -1
- package/dist/Breadcrumb/Breadcrumb.svelte +32 -26
- package/dist/Button/Button.svelte +70 -138
- package/dist/Calendar/Calendar.svelte +94 -157
- package/dist/Calendar/Calendar.svelte.d.ts +1 -1
- package/dist/Card/Card.svelte +18 -31
- package/dist/Carousel/Carousel.svelte +118 -173
- package/dist/Checkbox/Checkbox.svelte +52 -97
- package/dist/CheckboxGroup/CheckboxGroup.svelte +62 -107
- package/dist/CheckboxGroup/CheckboxGroup.svelte.d.ts +1 -1
- package/dist/Chip/Chip.svelte +22 -34
- package/dist/CodeBlock/CodeBlock.svelte +42 -59
- package/dist/Collapsible/Collapsible.svelte +22 -38
- package/dist/Collapsible/Collapsible.svelte.d.ts +1 -1
- package/dist/Collapsible/CollapsibleTestWrapper.svelte +2 -5
- package/dist/Collapsible/CollapsibleTestWrapper.svelte.d.ts +1 -1
- package/dist/Command/Command.svelte +40 -77
- package/dist/Command/Command.svelte.d.ts +1 -1
- package/dist/Command/CommandTestWrapper.svelte +2 -10
- package/dist/Command/CommandTestWrapper.svelte.d.ts +1 -1
- package/dist/Container/Container.svelte +11 -14
- package/dist/ContextMenu/ContextMenu.svelte +51 -114
- package/dist/ContextMenu/ContextMenu.svelte.d.ts +1 -1
- package/dist/Drawer/Drawer.svelte +72 -110
- package/dist/Drawer/DrawerTriggerTestWrapper.svelte +1 -2
- package/dist/DropdownMenu/DropdownMenu.svelte +63 -124
- package/dist/DropdownMenu/DropdownMenu.svelte.d.ts +1 -1
- package/dist/DropdownMenu/DropdownMenuTriggerTestWrapper.svelte +2 -5
- package/dist/Editor/Editor.svelte +441 -576
- package/dist/Editor/Editor.svelte.d.ts +1 -1
- package/dist/Editor/EditorUrlPrompt.svelte +40 -53
- package/dist/Editor/SlashPopup.svelte +12 -24
- package/dist/Empty/Empty.svelte +32 -63
- package/dist/FieldGroup/FieldGroup.svelte +23 -38
- package/dist/FileUpload/FileUpload.svelte +242 -320
- package/dist/FileUpload/FileUpload.svelte.d.ts +1 -1
- package/dist/Fonts/Fonts.svelte +15 -37
- package/dist/Form/Form.svelte +112 -170
- package/dist/FormField/FormField.svelte +102 -135
- package/dist/Icon/Icon.svelte +7 -32
- package/dist/Input/Input.svelte +71 -141
- package/dist/Input/Input.svelte.d.ts +2 -2
- package/dist/Kbd/Kbd.svelte +18 -34
- package/dist/Link/Link.svelte +129 -196
- package/dist/LocaleButton/LocaleButton.svelte +165 -0
- package/dist/LocaleButton/LocaleButton.svelte.d.ts +5 -0
- package/dist/LocaleButton/index.d.ts +2 -0
- package/dist/LocaleButton/index.js +1 -0
- package/dist/LocaleButton/locale-button.types.d.ts +182 -0
- package/dist/LocaleButton/locale-button.types.js +1 -0
- package/dist/LocaleButton/locale-button.variants.d.ts +61 -0
- package/dist/LocaleButton/locale-button.variants.js +34 -0
- package/dist/Modal/Modal.svelte +52 -106
- package/dist/Modal/ModalTriggerTestWrapper.svelte +1 -2
- package/dist/Pagination/Pagination.svelte +48 -92
- package/dist/Pagination/pagination.variants.d.ts +1 -1
- package/dist/PinInput/PinInput.svelte +57 -111
- package/dist/PinInput/PinInput.svelte.d.ts +1 -1
- package/dist/Popover/Popover.svelte +28 -61
- package/dist/Popover/Popover.svelte.d.ts +1 -1
- package/dist/Progress/Progress.svelte +75 -94
- package/dist/RadioGroup/RadioGroup.svelte +54 -99
- package/dist/RadioGroup/RadioGroup.svelte.d.ts +1 -1
- package/dist/Select/Select.svelte +112 -269
- package/dist/Select/Select.svelte.d.ts +1 -1
- package/dist/SelectMenu/SelectMenu.svelte +211 -409
- package/dist/SelectMenu/SelectMenu.svelte.d.ts +1 -1
- package/dist/SelectMenu/SelectMenuFormFieldTestWrapper.svelte +3 -6
- package/dist/Separator/Separator.svelte +29 -44
- package/dist/Skeleton/Skeleton.svelte +11 -23
- package/dist/Slideover/Slideover.svelte +52 -106
- package/dist/Slideover/SlideoverTriggerTestWrapper.svelte +1 -2
- package/dist/Slider/Slider.svelte +48 -84
- package/dist/Slider/Slider.svelte.d.ts +1 -1
- package/dist/Stepper/Stepper.svelte +139 -132
- package/dist/Stepper/Stepper.svelte.d.ts +1 -1
- package/dist/Switch/Switch.svelte +62 -98
- package/dist/Table/Table.svelte +232 -283
- package/dist/Table/table.variants.d.ts +1 -1
- package/dist/Tabs/Tabs.svelte +96 -129
- package/dist/Tabs/Tabs.svelte.d.ts +1 -1
- package/dist/Textarea/Textarea.svelte +90 -173
- package/dist/Textarea/Textarea.svelte.d.ts +1 -1
- package/dist/ThemeModeButton/ThemeModeButton.svelte +16 -38
- package/dist/Timeline/Timeline.svelte +75 -54
- package/dist/Toast/Toaster.svelte +8 -25
- package/dist/Tooltip/Tooltip.svelte +34 -66
- package/dist/Tooltip/Tooltip.svelte.d.ts +1 -1
- package/dist/Tooltip/TooltipTestWrapper.svelte +2 -5
- package/dist/User/User.svelte +33 -49
- package/dist/docs/navigation.js +6 -0
- package/dist/hooks/HookContextProbe.svelte +2 -4
- package/dist/hooks/HookContextProvider.svelte +8 -6
- package/dist/hooks/HookEmitProbe.svelte +8 -11
- package/dist/i18n.d.ts +2 -0
- package/dist/i18n.js +19 -0
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1 -0
- package/dist/mcp/svelora-docs.data.json +4 -2
- package/package.json +16 -8
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { EditorProps } from './editor.types.js';
|
|
2
2
|
export type Props = EditorProps;
|
|
3
3
|
import { Editor } from '@tiptap/core';
|
|
4
|
-
declare const Editor: import("svelte").Component<EditorProps, {}, "
|
|
4
|
+
declare const Editor: import("svelte").Component<EditorProps, {}, "ref" | "value" | "api">;
|
|
5
5
|
type Editor = ReturnType<typeof Editor>;
|
|
6
6
|
export default Editor;
|
|
@@ -1,62 +1,49 @@
|
|
|
1
|
-
<script lang="ts">import { untrack } from
|
|
2
|
-
import Button from
|
|
3
|
-
import Form from
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
7
|
-
import
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
description?: string;
|
|
13
|
-
placeholder?: string;
|
|
14
|
-
initialValue?: string;
|
|
15
|
-
confirmLabel?: string;
|
|
16
|
-
schema?: UrlSchema;
|
|
17
|
-
onConfirm?: (value: string) => void;
|
|
18
|
-
onCancel?: () => void;
|
|
19
|
-
}
|
|
20
|
-
let { open = $bindable(false), title = 'Enter URL', description, placeholder = 'https://', initialValue = '', confirmLabel = 'Insert', schema, onConfirm, onCancel }: Props = $props();
|
|
21
|
-
type UrlFormState = {
|
|
22
|
-
url: string;
|
|
23
|
-
};
|
|
24
|
-
let formApi = $state<FormApi<UrlFormState>>();
|
|
25
|
-
let formState = $state<UrlFormState>({ url: '' });
|
|
26
|
-
let inputRef: HTMLInputElement | null = $state(null);
|
|
1
|
+
<script lang="ts">import { untrack } from "svelte";
|
|
2
|
+
import Button from "../Button/Button.svelte";
|
|
3
|
+
import Form from "../Form/Form.svelte";
|
|
4
|
+
import FormField from "../FormField/FormField.svelte";
|
|
5
|
+
import Input from "../Input/Input.svelte";
|
|
6
|
+
import Modal from "../Modal/Modal.svelte";
|
|
7
|
+
import { httpUrlSchema } from "./editor.schemas.js";
|
|
8
|
+
let { open = $bindable(false), title = "Enter URL", description, placeholder = "https://", initialValue = "", confirmLabel = "Insert", schema, onConfirm, onCancel } = $props();
|
|
9
|
+
let formApi = $state();
|
|
10
|
+
let formState = $state({ url: "" });
|
|
11
|
+
let inputRef = $state(null);
|
|
27
12
|
let settled = $state(false);
|
|
28
13
|
const resolvedSchema = $derived(schema ?? httpUrlSchema);
|
|
29
14
|
$effect(() => {
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
}
|
|
15
|
+
if (open) {
|
|
16
|
+
const initial = untrack(() => initialValue);
|
|
17
|
+
formState = { url: initial };
|
|
18
|
+
settled = false;
|
|
19
|
+
untrack(() => formApi?.reset());
|
|
20
|
+
requestAnimationFrame(() => inputRef?.focus());
|
|
21
|
+
} else if (!settled) {
|
|
22
|
+
settled = true;
|
|
23
|
+
onCancel?.();
|
|
24
|
+
}
|
|
41
25
|
});
|
|
42
|
-
async function validate(state
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
26
|
+
async function validate(state) {
|
|
27
|
+
const url = state.url ?? "";
|
|
28
|
+
const result = await resolvedSchema["~standard"].validate(url);
|
|
29
|
+
if (result.issues) {
|
|
30
|
+
return [{
|
|
31
|
+
name: "url",
|
|
32
|
+
message: result.issues[0]?.message ?? "Invalid value"
|
|
33
|
+
}];
|
|
34
|
+
}
|
|
35
|
+
return [];
|
|
49
36
|
}
|
|
50
|
-
function handleSubmit(event
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
37
|
+
function handleSubmit(event) {
|
|
38
|
+
const data = event.data;
|
|
39
|
+
settled = true;
|
|
40
|
+
onConfirm?.(data.url.trim());
|
|
41
|
+
open = false;
|
|
55
42
|
}
|
|
56
|
-
function cancel()
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
43
|
+
function cancel() {
|
|
44
|
+
settled = true;
|
|
45
|
+
onCancel?.();
|
|
46
|
+
open = false;
|
|
60
47
|
}
|
|
61
48
|
</script>
|
|
62
49
|
|
|
@@ -1,27 +1,15 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
let { items, selectedIndex, onPick, listboxId, optionIdPrefix }: Props = $props()
|
|
14
|
-
|
|
15
|
-
let listEl: HTMLDivElement | null = $state(null)
|
|
16
|
-
|
|
17
|
-
$effect(() => {
|
|
18
|
-
if (!listEl) return
|
|
19
|
-
const active = listEl.querySelector(`[data-index="${selectedIndex}"]`)
|
|
20
|
-
if (!active) return
|
|
21
|
-
requestAnimationFrame(() => {
|
|
22
|
-
;(active as HTMLElement).scrollIntoView({ block: 'nearest' })
|
|
23
|
-
})
|
|
24
|
-
})
|
|
1
|
+
<script lang="ts">import Icon from "../Icon/Icon.svelte";
|
|
2
|
+
let { items, selectedIndex, onPick, listboxId, optionIdPrefix } = $props();
|
|
3
|
+
let listEl = $state(null);
|
|
4
|
+
$effect(() => {
|
|
5
|
+
if (!listEl) return;
|
|
6
|
+
const active = listEl.querySelector(`[data-index="${selectedIndex}"]`);
|
|
7
|
+
if (!active) return;
|
|
8
|
+
requestAnimationFrame(() => {
|
|
9
|
+
;
|
|
10
|
+
active.scrollIntoView({ block: "nearest" });
|
|
11
|
+
});
|
|
12
|
+
});
|
|
25
13
|
</script>
|
|
26
14
|
|
|
27
15
|
<div
|
package/dist/Empty/Empty.svelte
CHANGED
|
@@ -1,68 +1,37 @@
|
|
|
1
|
-
<script lang="ts" module>
|
|
2
|
-
import type { EmptyProps } from './empty.types.js'
|
|
3
|
-
|
|
4
|
-
export type Props = EmptyProps
|
|
1
|
+
<script lang="ts" module>export {};
|
|
5
2
|
</script>
|
|
6
3
|
|
|
7
|
-
<script lang="ts">
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
const classes = $derived.by(() => {
|
|
40
|
-
const slots = emptyVariants({ variant, size })
|
|
41
|
-
const c = config.slots
|
|
42
|
-
return {
|
|
43
|
-
root: slots.root({ class: [c.root, className, ui?.root] }),
|
|
44
|
-
header: slots.header({ class: [c.header, ui?.header] }),
|
|
45
|
-
avatar: slots.avatar({ class: [c.avatar, ui?.avatar] }),
|
|
46
|
-
title: slots.title({ class: [c.title, ui?.title] }),
|
|
47
|
-
description: slots.description({ class: [c.description, ui?.description] }),
|
|
48
|
-
body: slots.body({ class: [c.body, ui?.body] }),
|
|
49
|
-
actions: slots.actions({ class: [c.actions, ui?.actions] }),
|
|
50
|
-
footer: slots.footer({ class: [c.footer, ui?.footer] })
|
|
51
|
-
}
|
|
52
|
-
})
|
|
53
|
-
|
|
54
|
-
const hasHeader = $derived(
|
|
55
|
-
!!icon ||
|
|
56
|
-
!!avatar ||
|
|
57
|
-
!!title ||
|
|
58
|
-
!!description ||
|
|
59
|
-
!!leading ||
|
|
60
|
-
!!titleSlot ||
|
|
61
|
-
!!descriptionSlot ||
|
|
62
|
-
!!header
|
|
63
|
-
)
|
|
64
|
-
const hasActions = $derived(actions && actions.length > 0)
|
|
65
|
-
const hasBody = $derived(!!hasActions || !!actionsSlot || !!body || !!children)
|
|
4
|
+
<script lang="ts">import Avatar from "../Avatar/Avatar.svelte";
|
|
5
|
+
import Button from "../Button/Button.svelte";
|
|
6
|
+
import { getComponentConfig } from "../config.js";
|
|
7
|
+
import Icon from "../Icon/Icon.svelte";
|
|
8
|
+
import { emptyDefaults, emptyVariants } from "./empty.variants.js";
|
|
9
|
+
const config = getComponentConfig("empty", emptyDefaults);
|
|
10
|
+
let { ref = $bindable(null), as = "div", ui, icon, avatar, title, description, actions, variant = config.defaultVariants.variant, size = config.defaultVariants.size, class: className, leading, titleSlot, descriptionSlot, actionsSlot, header, body, footer, children, ...restProps } = $props();
|
|
11
|
+
const classes = $derived.by(() => {
|
|
12
|
+
const slots = emptyVariants({
|
|
13
|
+
variant,
|
|
14
|
+
size
|
|
15
|
+
});
|
|
16
|
+
const c = config.slots;
|
|
17
|
+
return {
|
|
18
|
+
root: slots.root({ class: [
|
|
19
|
+
c.root,
|
|
20
|
+
className,
|
|
21
|
+
ui?.root
|
|
22
|
+
] }),
|
|
23
|
+
header: slots.header({ class: [c.header, ui?.header] }),
|
|
24
|
+
avatar: slots.avatar({ class: [c.avatar, ui?.avatar] }),
|
|
25
|
+
title: slots.title({ class: [c.title, ui?.title] }),
|
|
26
|
+
description: slots.description({ class: [c.description, ui?.description] }),
|
|
27
|
+
body: slots.body({ class: [c.body, ui?.body] }),
|
|
28
|
+
actions: slots.actions({ class: [c.actions, ui?.actions] }),
|
|
29
|
+
footer: slots.footer({ class: [c.footer, ui?.footer] })
|
|
30
|
+
};
|
|
31
|
+
});
|
|
32
|
+
const hasHeader = $derived(!!icon || !!avatar || !!title || !!description || !!leading || !!titleSlot || !!descriptionSlot || !!header);
|
|
33
|
+
const hasActions = $derived(actions && actions.length > 0);
|
|
34
|
+
const hasBody = $derived(!!hasActions || !!actionsSlot || !!body || !!children);
|
|
66
35
|
</script>
|
|
67
36
|
|
|
68
37
|
<svelte:element this={as} bind:this={ref} class={classes.root} {...restProps}>
|
|
@@ -1,43 +1,28 @@
|
|
|
1
|
-
<script lang="ts" module>
|
|
2
|
-
import type { FieldGroupProps } from './field-group.types.js'
|
|
3
|
-
|
|
4
|
-
export type Props = FieldGroupProps
|
|
1
|
+
<script lang="ts" module>export {};
|
|
5
2
|
</script>
|
|
6
3
|
|
|
7
|
-
<script lang="ts">
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
setContext<{
|
|
31
|
-
orientation: NonNullable<Props['orientation']>
|
|
32
|
-
size: NonNullable<Props['size']>
|
|
33
|
-
}>('fieldGroup', {
|
|
34
|
-
get orientation() {
|
|
35
|
-
return orientation
|
|
36
|
-
},
|
|
37
|
-
get size() {
|
|
38
|
-
return size
|
|
39
|
-
}
|
|
40
|
-
})
|
|
4
|
+
<script lang="ts">import { setContext } from "svelte";
|
|
5
|
+
import { getComponentConfig } from "../config.js";
|
|
6
|
+
import { fieldGroupDefaults, fieldGroupVariants } from "./field-group.variants.js";
|
|
7
|
+
const config = getComponentConfig("fieldGroup", fieldGroupDefaults);
|
|
8
|
+
let { ref = $bindable(null), as = "div", ui, size = config.defaultVariants.size ?? "md", orientation = config.defaultVariants.orientation ?? "horizontal", class: className, children, ...restProps } = $props();
|
|
9
|
+
const variantSlots = $derived(fieldGroupVariants({
|
|
10
|
+
size,
|
|
11
|
+
orientation
|
|
12
|
+
}));
|
|
13
|
+
const classes = $derived({ root: variantSlots.root({ class: [
|
|
14
|
+
config.slots.root,
|
|
15
|
+
className,
|
|
16
|
+
ui?.root
|
|
17
|
+
] }) });
|
|
18
|
+
setContext("fieldGroup", {
|
|
19
|
+
get orientation() {
|
|
20
|
+
return orientation;
|
|
21
|
+
},
|
|
22
|
+
get size() {
|
|
23
|
+
return size;
|
|
24
|
+
}
|
|
25
|
+
});
|
|
41
26
|
</script>
|
|
42
27
|
|
|
43
28
|
<svelte:element
|