@ims360/svelte-ivory 0.2.4 → 0.3.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/components/ai/AiMessage.svelte +1 -1
- package/dist/components/ai/Chat.svelte +1 -1
- package/dist/components/ai/Markdown.svelte +1 -1
- package/dist/components/ai/UserMessage.svelte +1 -1
- package/dist/components/basic/Element.svelte +81 -0
- package/dist/components/basic/Element.svelte.d.ts +30 -0
- package/dist/components/basic/Element.svelte.d.ts.map +1 -0
- package/dist/components/basic/MarkedText.svelte +70 -0
- package/dist/components/basic/MarkedText.svelte.d.ts +17 -0
- package/dist/components/basic/MarkedText.svelte.d.ts.map +1 -0
- package/dist/components/basic/Textarea.svelte +46 -0
- package/dist/components/basic/Textarea.svelte.d.ts +15 -0
- package/dist/components/basic/Textarea.svelte.d.ts.map +1 -0
- package/dist/components/basic/checkbox/Checkbox.svelte +3 -3
- package/dist/components/basic/checkbox/Checkbox.svelte.d.ts +2 -2
- package/dist/components/basic/checkbox/Checkbox.svelte.d.ts.map +1 -1
- package/dist/components/basic/index.d.ts +5 -4
- package/dist/components/basic/index.d.ts.map +1 -1
- package/dist/components/basic/index.js +3 -2
- package/dist/components/basic/toggle/Toggle.svelte +3 -3
- package/dist/components/basic/toggle/Toggle.svelte.d.ts +2 -2
- package/dist/components/basic/toggle/Toggle.svelte.d.ts.map +1 -1
- package/dist/components/inputs/ColorInput.svelte +1 -1
- package/dist/components/inputs/Input.svelte +1 -2
- package/dist/components/inputs/Input.svelte.d.ts.map +1 -1
- package/dist/components/inputs/TextareaInput.svelte +23 -0
- package/dist/components/inputs/TextareaInput.svelte.d.ts +7 -0
- package/dist/components/inputs/TextareaInput.svelte.d.ts.map +1 -0
- package/dist/components/inputs/index.d.ts +1 -0
- package/dist/components/inputs/index.d.ts.map +1 -1
- package/dist/components/inputs/index.js +1 -0
- package/dist/components/inputs/issues/FormIssues.svelte +1 -1
- package/dist/components/layout/Heading.svelte +1 -1
- package/dist/components/layout/dialog/Dialog.svelte +1 -1
- package/dist/components/layout/drawer/Drawer.svelte +1 -1
- package/dist/components/layout/modal/Modal.svelte +1 -1
- package/dist/components/layout/tabs/Tab.svelte +1 -2
- package/dist/components/layout/tabs/Tab.svelte.d.ts.map +1 -1
- package/dist/components/layout/tooltip/Tooltip.svelte +1 -1
- package/dist/components/table/Column.svelte +1 -1
- package/dist/components/table/Table.svelte +1 -1
- package/dist/components/table/VirtualList.svelte +1 -1
- package/dist/utils/functions/index.d.ts +1 -0
- package/dist/utils/functions/index.d.ts.map +1 -1
- package/dist/utils/functions/index.js +1 -0
- package/dist/utils/functions/merge.d.ts.map +1 -0
- package/package.json +4 -4
- package/src/lib/components/ai/AiMessage.svelte +1 -1
- package/src/lib/components/ai/Chat.svelte +1 -1
- package/src/lib/components/ai/Markdown.svelte +1 -1
- package/src/lib/components/ai/UserMessage.svelte +1 -1
- package/src/lib/components/basic/Element.svelte +81 -0
- package/src/lib/components/basic/MarkedText.svelte +70 -0
- package/src/lib/components/basic/Textarea.svelte +46 -0
- package/src/lib/components/basic/checkbox/Checkbox.svelte +3 -3
- package/src/lib/components/basic/index.ts +10 -4
- package/src/lib/components/basic/toggle/Toggle.svelte +3 -3
- package/src/lib/components/inputs/ColorInput.svelte +1 -1
- package/src/lib/components/inputs/Input.svelte +1 -2
- package/src/lib/components/inputs/TextareaInput.svelte +23 -0
- package/src/lib/components/inputs/index.ts +1 -0
- package/src/lib/components/inputs/issues/FormIssues.svelte +1 -1
- package/src/lib/components/layout/Heading.svelte +1 -1
- package/src/lib/components/layout/dialog/Dialog.svelte +1 -1
- package/src/lib/components/layout/drawer/Drawer.svelte +1 -1
- package/src/lib/components/layout/modal/Modal.svelte +1 -1
- package/src/lib/components/layout/tabs/Tab.svelte +1 -2
- package/src/lib/components/layout/tooltip/Tooltip.svelte +1 -1
- package/src/lib/components/table/Column.svelte +1 -1
- package/src/lib/components/table/Table.svelte +1 -1
- package/src/lib/components/table/VirtualList.svelte +1 -1
- package/src/lib/utils/functions/index.ts +1 -0
- package/dist/utils/merge.d.ts.map +0 -1
- /package/dist/utils/{merge.d.ts → functions/merge.d.ts} +0 -0
- /package/dist/utils/{merge.js → functions/merge.js} +0 -0
- /package/src/lib/utils/{merge.ts → functions/merge.ts} +0 -0
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
-->
|
|
6
6
|
|
|
7
7
|
<script lang="ts">
|
|
8
|
-
import { merge } from '../../utils/
|
|
8
|
+
import { merge } from '../../utils/functions';
|
|
9
9
|
import { ThumbsDown, ThumbsUp } from '@lucide/svelte';
|
|
10
10
|
import type { Snippet } from 'svelte';
|
|
11
11
|
import type { ClassValue } from 'svelte/elements';
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
-->
|
|
7
7
|
|
|
8
8
|
<script lang="ts" module>
|
|
9
|
-
import { merge } from '../../utils/
|
|
9
|
+
import { merge } from '../../utils/functions';
|
|
10
10
|
import { tick, type Snippet } from 'svelte';
|
|
11
11
|
import type { ClassValue } from 'svelte/elements';
|
|
12
12
|
import AiMessage from './AiMessage.svelte';
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import { merge } from '../../utils/functions';
|
|
3
|
+
import type {
|
|
4
|
+
HTMLAttributeAnchorTarget,
|
|
5
|
+
HTMLAttributes,
|
|
6
|
+
MouseEventHandler
|
|
7
|
+
} from 'svelte/elements';
|
|
8
|
+
import type { TransitionConfig } from 'svelte/transition';
|
|
9
|
+
|
|
10
|
+
export type AnchorAttributes = {
|
|
11
|
+
download?: string | undefined | null;
|
|
12
|
+
href?: string | undefined | null;
|
|
13
|
+
hreflang?: string | undefined | null;
|
|
14
|
+
rel?: string | undefined | null;
|
|
15
|
+
target?: HTMLAttributeAnchorTarget | undefined | null;
|
|
16
|
+
type?: string | undefined | null;
|
|
17
|
+
referrerpolicy?: ReferrerPolicy | undefined | null;
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
export type ButtonAttributes = {
|
|
21
|
+
onclick: MouseEventHandler<HTMLElement>;
|
|
22
|
+
disabled?: boolean | undefined | null;
|
|
23
|
+
form?: string | undefined | null;
|
|
24
|
+
name?: string | undefined | null;
|
|
25
|
+
type?: 'submit' | 'reset' | 'button' | undefined | null;
|
|
26
|
+
value?: string | string[] | number | undefined | null;
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export type ElementProps = HTMLAttributes<HTMLElement> & {
|
|
30
|
+
inTransition?: (element: HTMLElement) => TransitionConfig;
|
|
31
|
+
outTransition?: (element: HTMLElement) => TransitionConfig;
|
|
32
|
+
} & (AnchorAttributes | ButtonAttributes | HTMLAttributes<HTMLDivElement>);
|
|
33
|
+
</script>
|
|
34
|
+
|
|
35
|
+
<script lang="ts">
|
|
36
|
+
const noop = () => ({});
|
|
37
|
+
let {
|
|
38
|
+
div = $bindable(),
|
|
39
|
+
inTransition = noop,
|
|
40
|
+
outTransition = noop,
|
|
41
|
+
...props
|
|
42
|
+
}: ElementProps & { div?: HTMLElement } = $props();
|
|
43
|
+
|
|
44
|
+
function isAnchor(props: ElementProps): props is AnchorAttributes {
|
|
45
|
+
return 'href' in props;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
function isButton(props: ElementProps): props is ButtonAttributes {
|
|
49
|
+
return 'onclick' in props || 'type' in props;
|
|
50
|
+
}
|
|
51
|
+
</script>
|
|
52
|
+
|
|
53
|
+
{#if 'disabled' in props && props.disabled}
|
|
54
|
+
<div
|
|
55
|
+
{...props}
|
|
56
|
+
in:inTransition
|
|
57
|
+
out:outTransition
|
|
58
|
+
class={merge(props.class, 'pointer-events-none opacity-60 grayscale')}
|
|
59
|
+
bind:this={div}
|
|
60
|
+
>
|
|
61
|
+
{@render props.children?.()}
|
|
62
|
+
</div>
|
|
63
|
+
{:else if isAnchor(props)}
|
|
64
|
+
<a {...props} in:inTransition out:outTransition bind:this={div}>
|
|
65
|
+
{@render props.children?.()}
|
|
66
|
+
</a>
|
|
67
|
+
{:else if isButton(props)}
|
|
68
|
+
<button
|
|
69
|
+
{...props}
|
|
70
|
+
in:inTransition
|
|
71
|
+
out:outTransition
|
|
72
|
+
type={props.type || 'button'}
|
|
73
|
+
bind:this={div}
|
|
74
|
+
>
|
|
75
|
+
{@render props.children?.()}
|
|
76
|
+
</button>
|
|
77
|
+
{:else}
|
|
78
|
+
<div {...props} in:inTransition out:outTransition bind:this={div}>
|
|
79
|
+
{@render props.children?.()}
|
|
80
|
+
</div>
|
|
81
|
+
{/if}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import type { HTMLAttributeAnchorTarget, HTMLAttributes, MouseEventHandler } from 'svelte/elements';
|
|
2
|
+
import type { TransitionConfig } from 'svelte/transition';
|
|
3
|
+
export type AnchorAttributes = {
|
|
4
|
+
download?: string | undefined | null;
|
|
5
|
+
href?: string | undefined | null;
|
|
6
|
+
hreflang?: string | undefined | null;
|
|
7
|
+
rel?: string | undefined | null;
|
|
8
|
+
target?: HTMLAttributeAnchorTarget | undefined | null;
|
|
9
|
+
type?: string | undefined | null;
|
|
10
|
+
referrerpolicy?: ReferrerPolicy | undefined | null;
|
|
11
|
+
};
|
|
12
|
+
export type ButtonAttributes = {
|
|
13
|
+
onclick: MouseEventHandler<HTMLElement>;
|
|
14
|
+
disabled?: boolean | undefined | null;
|
|
15
|
+
form?: string | undefined | null;
|
|
16
|
+
name?: string | undefined | null;
|
|
17
|
+
type?: 'submit' | 'reset' | 'button' | undefined | null;
|
|
18
|
+
value?: string | string[] | number | undefined | null;
|
|
19
|
+
};
|
|
20
|
+
export type ElementProps = HTMLAttributes<HTMLElement> & {
|
|
21
|
+
inTransition?: (element: HTMLElement) => TransitionConfig;
|
|
22
|
+
outTransition?: (element: HTMLElement) => TransitionConfig;
|
|
23
|
+
} & (AnchorAttributes | ButtonAttributes | HTMLAttributes<HTMLDivElement>);
|
|
24
|
+
type $$ComponentProps = ElementProps & {
|
|
25
|
+
div?: HTMLElement;
|
|
26
|
+
};
|
|
27
|
+
declare const Element: import("svelte").Component<$$ComponentProps, {}, "div">;
|
|
28
|
+
type Element = ReturnType<typeof Element>;
|
|
29
|
+
export default Element;
|
|
30
|
+
//# sourceMappingURL=Element.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Element.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/basic/Element.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EACR,yBAAyB,EACzB,cAAc,EACd,iBAAiB,EACpB,MAAM,iBAAiB,CAAC;AACzB,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AAE1D,MAAM,MAAM,gBAAgB,GAAG;IAC3B,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACrC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,QAAQ,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACrC,GAAG,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IAChC,MAAM,CAAC,EAAE,yBAAyB,GAAG,SAAS,GAAG,IAAI,CAAC;IACtD,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,cAAc,CAAC,EAAE,cAAc,GAAG,SAAS,GAAG,IAAI,CAAC;CACtD,CAAC;AAEF,MAAM,MAAM,gBAAgB,GAAG;IAC3B,OAAO,EAAE,iBAAiB,CAAC,WAAW,CAAC,CAAC;IACxC,QAAQ,CAAC,EAAE,OAAO,GAAG,SAAS,GAAG,IAAI,CAAC;IACtC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;IACjC,IAAI,CAAC,EAAE,QAAQ,GAAG,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,IAAI,CAAC;IACxD,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,GAAG,MAAM,GAAG,SAAS,GAAG,IAAI,CAAC;CACzD,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACrD,YAAY,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,gBAAgB,CAAC;IAC1D,aAAa,CAAC,EAAE,CAAC,OAAO,EAAE,WAAW,KAAK,gBAAgB,CAAC;CAC9D,GAAG,CAAC,gBAAgB,GAAG,gBAAgB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC,CAAC;AAE9E,KAAK,gBAAgB,GAAI,YAAY,GAAG;IAAE,GAAG,CAAC,EAAE,WAAW,CAAA;CAAE,CAAC;AAyC/D,QAAA,MAAM,OAAO,yDAAwC,CAAC;AACtD,KAAK,OAAO,GAAG,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC;AAC1C,eAAe,OAAO,CAAC"}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
import type { ClassValue } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
export type MarkedTextProps = {
|
|
6
|
+
class?: ClassValue;
|
|
7
|
+
content: string | undefined;
|
|
8
|
+
search: string | undefined;
|
|
9
|
+
element?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
10
|
+
id?: string | undefined;
|
|
11
|
+
children?: Snippet<[{ match: string }]>;
|
|
12
|
+
};
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
<script lang="ts">
|
|
16
|
+
let {
|
|
17
|
+
class: clazz = 'shrink-0 whitespace-nowrap text-ellipsis overflow-hidden max-w-full',
|
|
18
|
+
content,
|
|
19
|
+
search,
|
|
20
|
+
element = 'p',
|
|
21
|
+
id,
|
|
22
|
+
children
|
|
23
|
+
}: MarkedTextProps = $props();
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* @param str
|
|
27
|
+
* @param search
|
|
28
|
+
* @return tokens: list with {match, prev}, where 'match' matches the search (case-insensitive) and prev is the string between 'match' and the prev 'match' (or start)
|
|
29
|
+
* @return tail: the string after the last match
|
|
30
|
+
*/
|
|
31
|
+
const split = (str: string, search: string) => {
|
|
32
|
+
const matchLen = search.length;
|
|
33
|
+
var tokens: { match: string; prev: string }[] = [];
|
|
34
|
+
let pos = str.toLowerCase().search(search.toLowerCase());
|
|
35
|
+
while (pos != -1) {
|
|
36
|
+
tokens.push({
|
|
37
|
+
match: str.slice(pos, pos + matchLen),
|
|
38
|
+
prev: str.slice(0, pos)
|
|
39
|
+
});
|
|
40
|
+
str = str.slice(pos + matchLen);
|
|
41
|
+
pos = str.search(search);
|
|
42
|
+
}
|
|
43
|
+
return {
|
|
44
|
+
tokens,
|
|
45
|
+
tail: str
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
const { tokens, tail } = $derived.by(() => {
|
|
50
|
+
if (!search || !content) return { tokens: [], tail: content };
|
|
51
|
+
return split(content, search);
|
|
52
|
+
});
|
|
53
|
+
</script>
|
|
54
|
+
|
|
55
|
+
<!-- @component
|
|
56
|
+
marks text-parts matching the given search parameter
|
|
57
|
+
-->
|
|
58
|
+
<svelte:element this={element} class={[clazz]} {id}>
|
|
59
|
+
{#each tokens as token (token)}
|
|
60
|
+
{token.prev}
|
|
61
|
+
{#if children}
|
|
62
|
+
{@render children?.({ match: token.match })}
|
|
63
|
+
{:else}
|
|
64
|
+
<mark class="bg-primary-500 text-surface-50 shrink-0 rounded-sm px-px py-0.5">
|
|
65
|
+
{token.match}
|
|
66
|
+
</mark>
|
|
67
|
+
{/if}
|
|
68
|
+
{/each}
|
|
69
|
+
{tail}
|
|
70
|
+
</svelte:element>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
import type { ClassValue } from 'svelte/elements';
|
|
3
|
+
export type MarkedTextProps = {
|
|
4
|
+
class?: ClassValue;
|
|
5
|
+
content: string | undefined;
|
|
6
|
+
search: string | undefined;
|
|
7
|
+
element?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
8
|
+
id?: string | undefined;
|
|
9
|
+
children?: Snippet<[{
|
|
10
|
+
match: string;
|
|
11
|
+
}]>;
|
|
12
|
+
};
|
|
13
|
+
/** marks text-parts matching the given search parameter */
|
|
14
|
+
declare const MarkedText: import("svelte").Component<MarkedTextProps, {}, "">;
|
|
15
|
+
type MarkedText = ReturnType<typeof MarkedText>;
|
|
16
|
+
export default MarkedText;
|
|
17
|
+
//# sourceMappingURL=MarkedText.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MarkedText.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/basic/MarkedText.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,eAAe,GAAG;IAC1B,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,OAAO,EAAE,MAAM,GAAG,SAAS,CAAC;IAC5B,MAAM,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,OAAO,CAAC,EAAE,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;IACxD,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB,QAAQ,CAAC,EAAE,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,MAAM,CAAA;KAAE,CAAC,CAAC,CAAC;CAC3C,CAAC;AA6DN,2DAA2D;AAC3D,QAAA,MAAM,UAAU,qDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { merge } from '../../utils/functions';
|
|
3
|
+
import type { ClassValue, HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
interface Props extends HTMLAttributes<HTMLTextAreaElement> {
|
|
6
|
+
class?: ClassValue;
|
|
7
|
+
value?: string;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
placeholder?: string;
|
|
10
|
+
name?: string;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
let { class: clazz, value = $bindable(), ...rest }: Props = $props();
|
|
14
|
+
|
|
15
|
+
let textareaEl = $state<HTMLTextAreaElement>();
|
|
16
|
+
|
|
17
|
+
function autoResize() {
|
|
18
|
+
if (!textareaEl) return;
|
|
19
|
+
textareaEl.style.height = 'auto';
|
|
20
|
+
textareaEl.style.height = `${textareaEl.scrollHeight}px`;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
$effect(() => {
|
|
24
|
+
value;
|
|
25
|
+
autoResize();
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
export function focus() {
|
|
29
|
+
textareaEl?.focus();
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export function isActive() {
|
|
33
|
+
return document.activeElement === textareaEl;
|
|
34
|
+
}
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
<textarea
|
|
38
|
+
class={merge(
|
|
39
|
+
'max-h-96 w-full resize-none overflow-y-auto border-none bg-transparent ring-0 outline-0 transition-all',
|
|
40
|
+
clazz
|
|
41
|
+
)}
|
|
42
|
+
bind:this={textareaEl}
|
|
43
|
+
bind:value
|
|
44
|
+
rows="1"
|
|
45
|
+
{...rest}
|
|
46
|
+
></textarea>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
import type { ClassValue, HTMLAttributes } from 'svelte/elements';
|
|
2
|
+
interface Props extends HTMLAttributes<HTMLTextAreaElement> {
|
|
3
|
+
class?: ClassValue;
|
|
4
|
+
value?: string;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
placeholder?: string;
|
|
7
|
+
name?: string;
|
|
8
|
+
}
|
|
9
|
+
declare const Textarea: import("svelte").Component<Props, {
|
|
10
|
+
focus: () => void;
|
|
11
|
+
isActive: () => boolean;
|
|
12
|
+
}, "value">;
|
|
13
|
+
type Textarea = ReturnType<typeof Textarea>;
|
|
14
|
+
export default Textarea;
|
|
15
|
+
//# sourceMappingURL=Textarea.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Textarea.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/basic/Textarea.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAG9D,UAAU,KAAM,SAAQ,cAAc,CAAC,mBAAmB,CAAC;IACvD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAqCL,QAAA,MAAM,QAAQ;;;WAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
2
|
import { theme } from '../../../theme.svelte';
|
|
3
3
|
import type { IvoryComponent } from '../../../types';
|
|
4
|
-
import { merge } from '../../../utils/
|
|
4
|
+
import { merge } from '../../../utils/functions';
|
|
5
5
|
import { Check, type Icon as LucideIcon, Minus } from '@lucide/svelte';
|
|
6
6
|
import clsx from 'clsx';
|
|
7
7
|
import type { ClassValue } from 'svelte/elements';
|
|
8
8
|
import { scale } from 'svelte/transition';
|
|
9
9
|
|
|
10
|
-
export
|
|
10
|
+
export type CheckboxProps = IvoryComponent<HTMLElement> & {
|
|
11
11
|
class?: ClassValue;
|
|
12
12
|
/** `checked` has prioriy over `partial` */
|
|
13
13
|
checked?: boolean | null;
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
/** if true, the onclick handler will not be called */
|
|
18
18
|
disabled?: boolean;
|
|
19
19
|
onclick?: () => void;
|
|
20
|
-
}
|
|
20
|
+
};
|
|
21
21
|
</script>
|
|
22
22
|
|
|
23
23
|
<!--
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { IvoryComponent } from '../../../types';
|
|
2
2
|
import type { ClassValue } from 'svelte/elements';
|
|
3
|
-
export
|
|
3
|
+
export type CheckboxProps = IvoryComponent<HTMLElement> & {
|
|
4
4
|
class?: ClassValue;
|
|
5
5
|
/** `checked` has prioriy over `partial` */
|
|
6
6
|
checked?: boolean | null;
|
|
@@ -10,7 +10,7 @@ export interface CheckboxProps extends IvoryComponent<HTMLElement> {
|
|
|
10
10
|
/** if true, the onclick handler will not be called */
|
|
11
11
|
disabled?: boolean;
|
|
12
12
|
onclick?: () => void;
|
|
13
|
-
}
|
|
13
|
+
};
|
|
14
14
|
/** It's a checkbox */
|
|
15
15
|
declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "">;
|
|
16
16
|
type Checkbox = ReturnType<typeof Checkbox>;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAIjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,
|
|
1
|
+
{"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/checkbox/Checkbox.svelte.ts"],"names":[],"mappings":"AAII,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAIjD,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACtD,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,2CAA2C;IAC3C,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAC;IACzB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,sDAAsD;IACtD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACxB,CAAC;AAuDN,sBAAsB;AACtB,QAAA,MAAM,QAAQ,mDAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
-
export
|
|
2
|
-
export { default as
|
|
3
|
-
export
|
|
4
|
-
export { default as
|
|
1
|
+
export { default as Checkbox, type CheckboxProps } from './checkbox/Checkbox.svelte';
|
|
2
|
+
export { default as Element, type AnchorAttributes, type ButtonAttributes, type ElementProps } from './Element.svelte';
|
|
3
|
+
export { default as MarkedText, type MarkedTextProps } from './MarkedText.svelte';
|
|
4
|
+
export { default as Textarea } from './Textarea.svelte';
|
|
5
|
+
export { default as Toggle, type ToggleProps } from './toggle/Toggle.svelte';
|
|
5
6
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/basic/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/basic/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACrF,OAAO,EACH,OAAO,IAAI,OAAO,EAClB,KAAK,gBAAgB,EACrB,KAAK,gBAAgB,EACrB,KAAK,YAAY,EACpB,MAAM,kBAAkB,CAAC;AAC1B,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,KAAK,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,KAAK,WAAW,EAAE,MAAM,wBAAwB,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
export * from './checkbox/Checkbox.svelte';
|
|
2
1
|
export { default as Checkbox } from './checkbox/Checkbox.svelte';
|
|
3
|
-
export
|
|
2
|
+
export { default as Element } from './Element.svelte';
|
|
3
|
+
export { default as MarkedText } from './MarkedText.svelte';
|
|
4
|
+
export { default as Textarea } from './Textarea.svelte';
|
|
4
5
|
export { default as Toggle } from './toggle/Toggle.svelte';
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
2
|
import type { IvoryComponent } from '../../../types';
|
|
3
|
-
import { merge } from '../../../utils/
|
|
3
|
+
import { merge } from '../../../utils/functions';
|
|
4
4
|
import type { Snippet } from 'svelte';
|
|
5
5
|
import type { ClassValue } from 'svelte/elements';
|
|
6
6
|
|
|
7
|
-
export
|
|
7
|
+
export type ToggleProps = IvoryComponent<HTMLElement> & {
|
|
8
8
|
value?: boolean;
|
|
9
9
|
class?: ClassValue;
|
|
10
10
|
children?: Snippet;
|
|
11
|
-
}
|
|
11
|
+
};
|
|
12
12
|
</script>
|
|
13
13
|
|
|
14
14
|
<script lang="ts">
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import type { IvoryComponent } from '../../../types';
|
|
2
2
|
import type { Snippet } from 'svelte';
|
|
3
3
|
import type { ClassValue } from 'svelte/elements';
|
|
4
|
-
export
|
|
4
|
+
export type ToggleProps = IvoryComponent<HTMLElement> & {
|
|
5
5
|
value?: boolean;
|
|
6
6
|
class?: ClassValue;
|
|
7
7
|
children?: Snippet;
|
|
8
|
-
}
|
|
8
|
+
};
|
|
9
9
|
declare const Toggle: import("svelte").Component<ToggleProps, {}, "">;
|
|
10
10
|
type Toggle = ReturnType<typeof Toggle>;
|
|
11
11
|
export default Toggle;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"Toggle.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/basic/toggle/Toggle.svelte.ts"],"names":[],"mappings":"AAGI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAElD,MAAM,MAAM,WAAW,GAAG,cAAc,CAAC,WAAW,CAAC,GAAG;IACpD,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB,CAAC;AA8BN,QAAA,MAAM,MAAM,iDAAwC,CAAC;AACrD,KAAK,MAAM,GAAG,UAAU,CAAC,OAAO,MAAM,CAAC,CAAC;AACxC,eAAe,MAAM,CAAC"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
2
|
import { theme } from '../../theme.svelte';
|
|
3
|
-
import { pseudoRandomId } from '../../utils/functions';
|
|
4
|
-
import { merge } from '../../utils/merge';
|
|
3
|
+
import { merge, pseudoRandomId } from '../../utils/functions';
|
|
5
4
|
import type { RemoteFormField, RemoteFormFieldValue } from '@sveltejs/kit';
|
|
6
5
|
import type { Snippet } from 'svelte';
|
|
7
6
|
import type { ClassValue } from 'svelte/elements';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/Input.svelte.ts"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Input.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/Input.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,KAAK,EAAE,eAAe,EAAE,oBAAoB,EAAE,MAAM,eAAe,CAAC;AAC3E,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AACtC,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAIlD,UAAU,WAAW;IACjB,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,WAAW,UAAU,CAAC,CAAC,SAAS,oBAAoB,CAAE,SAAQ,WAAW;IAC3E,IAAI,EAAE,eAAe,CAAC,CAAC,CAAC,CAAC;CAC5B;AAED,eAAO,MAAM,mBAAmB,iEACkC,CAAC;AAEnE,UAAU,KAAK,CAAC,CAAC,SAAS,oBAAoB,CAAE,SAAQ,WAAW;IAC/D,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,EAAE,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,CAAC;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,EAAE,IAAI,CAAC,eAAe,CAAC,CAAC,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC,CAAC;CACtD;AAAC,iBAAS,QAAQ,CAAC,CAAC,SAAS,oBAAoB;WAiEzB,KAAK,CAAC,CAAC,CAAC;;;;;EAA4E;AACjH,cAAM,iBAAiB,CAAC,CAAC,SAAS,oBAAoB;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS,oBAAoB,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACzZ,CAAC,CAAC,SAAS,oBAAoB,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACxJ,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD,QAAA,MAAM,KAAK,EAAE,qBAAmC,CAAC;AAC/B,KAAK,KAAK,CAAC,CAAC,SAAS,oBAAoB,IAAI,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;AAC7E,eAAe,KAAK,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import TextArea from '../basic/Textarea.svelte';
|
|
3
|
+
import Input, { type InputProps } from './Input.svelte';
|
|
4
|
+
|
|
5
|
+
let { ...props }: InputProps<string> = $props();
|
|
6
|
+
|
|
7
|
+
let inputElement = $state<TextArea>();
|
|
8
|
+
export function focus() {
|
|
9
|
+
inputElement?.focus();
|
|
10
|
+
}
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<Input {...props}>
|
|
14
|
+
{#snippet children(inputProps)}
|
|
15
|
+
{@const { name } = props.form.as?.('text')}
|
|
16
|
+
<TextArea
|
|
17
|
+
{...inputProps}
|
|
18
|
+
{name}
|
|
19
|
+
bind:value={props.form.value, props.form.set}
|
|
20
|
+
bind:this={inputElement}
|
|
21
|
+
/>
|
|
22
|
+
{/snippet}
|
|
23
|
+
</Input>
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { type InputProps } from './Input.svelte';
|
|
2
|
+
declare const TextareaInput: import("svelte").Component<InputProps<string>, {
|
|
3
|
+
focus: () => void;
|
|
4
|
+
}, "">;
|
|
5
|
+
type TextareaInput = ReturnType<typeof TextareaInput>;
|
|
6
|
+
export default TextareaInput;
|
|
7
|
+
//# sourceMappingURL=TextareaInput.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"TextareaInput.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/TextareaInput.svelte.ts"],"names":[],"mappings":"AAIA,OAAc,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAuBxD,QAAA,MAAM,aAAa;;MAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
|
|
@@ -10,6 +10,7 @@ export { default as PasswordCreateInput, type PasswordCreateInputProps, type Pas
|
|
|
10
10
|
export { default as PasswordInput } from './PasswordInput.svelte';
|
|
11
11
|
export { default as Select } from './select/Select.svelte';
|
|
12
12
|
export { default as SelectOption } from './select/SelectOption.svelte';
|
|
13
|
+
export { default as TextareaInput } from './TextareaInput.svelte';
|
|
13
14
|
export { default as TextInput } from './TextInput.svelte';
|
|
14
15
|
export { default as ToggleInput } from './ToggleInput.svelte';
|
|
15
16
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/E,OAAO,EACH,OAAO,IAAI,kBAAkB,EAC7B,KAAK,uBAAuB,EAC/B,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EACH,OAAO,IAAI,mBAAmB,EAC9B,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EAC3B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/components/inputs/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAC;AAC5D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,KAAK,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAC/E,OAAO,EACH,OAAO,IAAI,kBAAkB,EAC7B,KAAK,uBAAuB,EAC/B,MAAM,6BAA6B,CAAC;AACrC,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EACH,OAAO,IAAI,mBAAmB,EAC9B,KAAK,wBAAwB,EAC7B,KAAK,mBAAmB,EAC3B,MAAM,8BAA8B,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,wBAAwB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,8BAA8B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC"}
|
|
@@ -10,5 +10,6 @@ export { default as PasswordCreateInput } from './PasswordCreateInput.svelte';
|
|
|
10
10
|
export { default as PasswordInput } from './PasswordInput.svelte';
|
|
11
11
|
export { default as Select } from './select/Select.svelte';
|
|
12
12
|
export { default as SelectOption } from './select/SelectOption.svelte';
|
|
13
|
+
export { default as TextareaInput } from './TextareaInput.svelte';
|
|
13
14
|
export { default as TextInput } from './TextInput.svelte';
|
|
14
15
|
export { default as ToggleInput } from './ToggleInput.svelte';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { theme } from '../../../theme.svelte';
|
|
3
|
-
import { merge } from '../../../utils/
|
|
3
|
+
import { merge } from '../../../utils/functions';
|
|
4
4
|
import { TriangleAlert } from '@lucide/svelte';
|
|
5
5
|
import type { RemoteFormIssue } from '@sveltejs/kit';
|
|
6
6
|
import type { ClassValue } from 'svelte/elements';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
2
|
import { theme } from '../../theme.svelte';
|
|
3
3
|
import type { IvoryComponent } from '../../types';
|
|
4
|
-
import { merge } from '../../utils/
|
|
4
|
+
import { merge } from '../../utils/functions';
|
|
5
5
|
import type { ClassValue } from 'svelte/elements';
|
|
6
6
|
|
|
7
7
|
export interface HeadingProps extends IvoryComponent<HTMLHeadingElement> {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
2
|
import { theme } from '../../../theme.svelte';
|
|
3
3
|
import type { IvoryComponent, TransitionProps } from '../../../types';
|
|
4
|
-
import { merge } from '../../../utils/
|
|
4
|
+
import { merge } from '../../../utils/functions';
|
|
5
5
|
import { onMount, tick } from 'svelte';
|
|
6
6
|
import type { MouseEventHandler } from 'svelte/elements';
|
|
7
7
|
import { fade } from 'svelte/transition';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
2
|
import type { TransitionProps } from '../../../types';
|
|
3
|
-
import { merge } from '../../../utils/
|
|
3
|
+
import { merge } from '../../../utils/functions';
|
|
4
4
|
import { X } from '@lucide/svelte';
|
|
5
5
|
import type { Snippet } from 'svelte';
|
|
6
6
|
import { fly } from 'svelte/transition';
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import type { Variant } from '../../..';
|
|
3
3
|
import { theme } from '../../../theme.svelte';
|
|
4
4
|
import type { TransitionProps } from '../../../types';
|
|
5
|
-
import { merge } from '../../../utils/
|
|
5
|
+
import { merge } from '../../../utils/functions';
|
|
6
6
|
import { X } from '@lucide/svelte';
|
|
7
7
|
import { type Snippet } from 'svelte';
|
|
8
8
|
import type { ClassValue, MouseEventHandler } from 'svelte/elements';
|
|
@@ -2,8 +2,7 @@
|
|
|
2
2
|
import { page } from '$app/state';
|
|
3
3
|
import { theme } from '../../../theme.svelte';
|
|
4
4
|
import type { IvoryComponent } from '../../../types';
|
|
5
|
-
import { pseudoRandomId } from '../../../utils/functions
|
|
6
|
-
import { merge } from '../../../utils/merge';
|
|
5
|
+
import { merge, pseudoRandomId } from '../../../utils/functions';
|
|
7
6
|
import { onMount, type Snippet } from 'svelte';
|
|
8
7
|
import type { ClassValue } from 'svelte/elements';
|
|
9
8
|
import { getTabContext } from './Tabs.svelte';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tab.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tabs/Tab.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;
|
|
1
|
+
{"version":3,"file":"Tab.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/components/layout/tabs/Tab.svelte.ts"],"names":[],"mappings":"AAKI,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,YAAY,CAAC;AAEjD,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC/C,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iBAAiB,CAAC;AAGlD,MAAM,WAAW,QAAS,SAAQ,IAAI,CAAC,cAAc,CAAC,WAAW,CAAC,EAAE,UAAU,CAAC;IAC3E,KAAK,CAAC,EAAE,UAAU,GAAG,CAAC,CAAC,QAAQ,EAAE,OAAO,KAAK,UAAU,CAAC,CAAC;IACzD,EAAE,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACxB;;;;OAIG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC1B,QAAQ,EAAE,OAAO,CAAC,CAAC;QAAE,QAAQ,EAAE,OAAO,CAAA;KAAE,CAAC,CAAC,CAAC;IAC3C,oEAAoE;IACpE,MAAM,CAAC,EAAE,OAAO,CAAC;CACpB;AA8CL,QAAA,MAAM,GAAG,8CAAwC,CAAC;AAClD,KAAK,GAAG,GAAG,UAAU,CAAC,OAAO,GAAG,CAAC,CAAC;AAClC,eAAe,GAAG,CAAC"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
|
-
import { merge } from '../../../utils/
|
|
2
|
+
import { merge } from '../../../utils/functions';
|
|
3
3
|
import type { Snippet } from 'svelte';
|
|
4
4
|
import type { ClassValue, MouseEventHandler } from 'svelte/elements';
|
|
5
5
|
import Popover, { type PopoverPlacement } from '../popover/Popover.svelte';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
2
|
import { theme } from '../../theme.svelte';
|
|
3
|
-
import { merge } from '../../utils/
|
|
3
|
+
import { merge } from '../../utils/functions';
|
|
4
4
|
import { type Snippet } from 'svelte';
|
|
5
5
|
import type { ClassValue } from 'svelte/elements';
|
|
6
6
|
import type { ColumnConfig } from './columnController.svelte';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
|
-
import { merge } from '../../utils/
|
|
2
|
+
import { merge } from '../../utils/functions';
|
|
3
3
|
import { ChevronRight } from '@lucide/svelte';
|
|
4
4
|
import { getContext, setContext, untrack, type Snippet } from 'svelte';
|
|
5
5
|
import type { ClassValue } from 'svelte/elements';
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
export { cookie } from './cookie';
|
|
2
2
|
export { createDebouncedValue } from './debouncedValue.svelte';
|
|
3
|
+
export { merge } from './merge';
|
|
3
4
|
export { pseudoRandomId } from './pseudoRandomId';
|
|
4
5
|
export { queryParams } from './queryParams';
|
|
5
6
|
//# sourceMappingURL=index.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/functions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/functions/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,yBAAyB,CAAC;AAC/D,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAChC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"merge.d.ts","sourceRoot":"","sources":["../../../src/lib/utils/functions/merge.ts"],"names":[],"mappings":"AAAA,OAAa,EAAE,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C,+BAA+B;AAC/B,eAAO,MAAM,KAAK,GAAI,GAAG,SAAS,UAAU,WAE3C,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ims360/svelte-ivory",
|
|
3
|
-
"version": "0.2
|
|
3
|
+
"version": "0.3.2",
|
|
4
4
|
"keywords": [
|
|
5
5
|
"svelte"
|
|
6
6
|
],
|
|
@@ -113,8 +113,8 @@
|
|
|
113
113
|
"zod": "^4.1.13"
|
|
114
114
|
},
|
|
115
115
|
"peerDependencies": {
|
|
116
|
-
"@skeletonlabs/skeleton": "^
|
|
117
|
-
"@sveltejs/kit": "^2.
|
|
118
|
-
"svelte": "^5.
|
|
116
|
+
"@skeletonlabs/skeleton": "^4.0.0",
|
|
117
|
+
"@sveltejs/kit": "^2.49.5",
|
|
118
|
+
"svelte": "^5.46.4"
|
|
119
119
|
}
|
|
120
120
|
}
|
|
@@ -5,7 +5,7 @@
|
|
|
5
5
|
-->
|
|
6
6
|
|
|
7
7
|
<script lang="ts">
|
|
8
|
-
import { merge } from '$lib/utils/
|
|
8
|
+
import { merge } from '$lib/utils/functions';
|
|
9
9
|
import { ThumbsDown, ThumbsUp } from '@lucide/svelte';
|
|
10
10
|
import type { Snippet } from 'svelte';
|
|
11
11
|
import type { ClassValue } from 'svelte/elements';
|
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
-->
|
|
7
7
|
|
|
8
8
|
<script lang="ts" module>
|
|
9
|
-
import { merge } from '$lib/utils/
|
|
9
|
+
import { merge } from '$lib/utils/functions';
|
|
10
10
|
import { tick, type Snippet } from 'svelte';
|
|
11
11
|
import type { ClassValue } from 'svelte/elements';
|
|
12
12
|
import AiMessage from './AiMessage.svelte';
|
|
@@ -0,0 +1,81 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import { merge } from '$lib/utils/functions';
|
|
3
|
+
import type {
|
|
4
|
+
HTMLAttributeAnchorTarget,
|
|
5
|
+
HTMLAttributes,
|
|
6
|
+
MouseEventHandler
|
|
7
|
+
} from 'svelte/elements';
|
|
8
|
+
import type { TransitionConfig } from 'svelte/transition';
|
|
9
|
+
|
|
10
|
+
export type AnchorAttributes = {
|
|
11
|
+
download?: string | undefined | null;
|
|
12
|
+
href?: string | undefined | null;
|
|
13
|
+
hreflang?: string | undefined | null;
|
|
14
|
+
rel?: string | undefined | null;
|
|
15
|
+
target?: HTMLAttributeAnchorTarget | undefined | null;
|
|
16
|
+
type?: string | undefined | null;
|
|
17
|
+
referrerpolicy?: ReferrerPolicy | undefined | null;
|
|
18
|
+
};
|
|
19
|
+
|
|
20
|
+
export type ButtonAttributes = {
|
|
21
|
+
onclick: MouseEventHandler<HTMLElement>;
|
|
22
|
+
disabled?: boolean | undefined | null;
|
|
23
|
+
form?: string | undefined | null;
|
|
24
|
+
name?: string | undefined | null;
|
|
25
|
+
type?: 'submit' | 'reset' | 'button' | undefined | null;
|
|
26
|
+
value?: string | string[] | number | undefined | null;
|
|
27
|
+
};
|
|
28
|
+
|
|
29
|
+
export type ElementProps = HTMLAttributes<HTMLElement> & {
|
|
30
|
+
inTransition?: (element: HTMLElement) => TransitionConfig;
|
|
31
|
+
outTransition?: (element: HTMLElement) => TransitionConfig;
|
|
32
|
+
} & (AnchorAttributes | ButtonAttributes | HTMLAttributes<HTMLDivElement>);
|
|
33
|
+
</script>
|
|
34
|
+
|
|
35
|
+
<script lang="ts">
|
|
36
|
+
const noop = () => ({});
|
|
37
|
+
let {
|
|
38
|
+
div = $bindable(),
|
|
39
|
+
inTransition = noop,
|
|
40
|
+
outTransition = noop,
|
|
41
|
+
...props
|
|
42
|
+
}: ElementProps & { div?: HTMLElement } = $props();
|
|
43
|
+
|
|
44
|
+
function isAnchor(props: ElementProps): props is AnchorAttributes {
|
|
45
|
+
return 'href' in props;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
function isButton(props: ElementProps): props is ButtonAttributes {
|
|
49
|
+
return 'onclick' in props || 'type' in props;
|
|
50
|
+
}
|
|
51
|
+
</script>
|
|
52
|
+
|
|
53
|
+
{#if 'disabled' in props && props.disabled}
|
|
54
|
+
<div
|
|
55
|
+
{...props}
|
|
56
|
+
in:inTransition
|
|
57
|
+
out:outTransition
|
|
58
|
+
class={merge(props.class, 'pointer-events-none opacity-60 grayscale')}
|
|
59
|
+
bind:this={div}
|
|
60
|
+
>
|
|
61
|
+
{@render props.children?.()}
|
|
62
|
+
</div>
|
|
63
|
+
{:else if isAnchor(props)}
|
|
64
|
+
<a {...props} in:inTransition out:outTransition bind:this={div}>
|
|
65
|
+
{@render props.children?.()}
|
|
66
|
+
</a>
|
|
67
|
+
{:else if isButton(props)}
|
|
68
|
+
<button
|
|
69
|
+
{...props}
|
|
70
|
+
in:inTransition
|
|
71
|
+
out:outTransition
|
|
72
|
+
type={props.type || 'button'}
|
|
73
|
+
bind:this={div}
|
|
74
|
+
>
|
|
75
|
+
{@render props.children?.()}
|
|
76
|
+
</button>
|
|
77
|
+
{:else}
|
|
78
|
+
<div {...props} in:inTransition out:outTransition bind:this={div}>
|
|
79
|
+
{@render props.children?.()}
|
|
80
|
+
</div>
|
|
81
|
+
{/if}
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
import type { ClassValue } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
export type MarkedTextProps = {
|
|
6
|
+
class?: ClassValue;
|
|
7
|
+
content: string | undefined;
|
|
8
|
+
search: string | undefined;
|
|
9
|
+
element?: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
|
|
10
|
+
id?: string | undefined;
|
|
11
|
+
children?: Snippet<[{ match: string }]>;
|
|
12
|
+
};
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
<script lang="ts">
|
|
16
|
+
let {
|
|
17
|
+
class: clazz = 'shrink-0 whitespace-nowrap text-ellipsis overflow-hidden max-w-full',
|
|
18
|
+
content,
|
|
19
|
+
search,
|
|
20
|
+
element = 'p',
|
|
21
|
+
id,
|
|
22
|
+
children
|
|
23
|
+
}: MarkedTextProps = $props();
|
|
24
|
+
|
|
25
|
+
/**
|
|
26
|
+
* @param str
|
|
27
|
+
* @param search
|
|
28
|
+
* @return tokens: list with {match, prev}, where 'match' matches the search (case-insensitive) and prev is the string between 'match' and the prev 'match' (or start)
|
|
29
|
+
* @return tail: the string after the last match
|
|
30
|
+
*/
|
|
31
|
+
const split = (str: string, search: string) => {
|
|
32
|
+
const matchLen = search.length;
|
|
33
|
+
var tokens: { match: string; prev: string }[] = [];
|
|
34
|
+
let pos = str.toLowerCase().search(search.toLowerCase());
|
|
35
|
+
while (pos != -1) {
|
|
36
|
+
tokens.push({
|
|
37
|
+
match: str.slice(pos, pos + matchLen),
|
|
38
|
+
prev: str.slice(0, pos)
|
|
39
|
+
});
|
|
40
|
+
str = str.slice(pos + matchLen);
|
|
41
|
+
pos = str.search(search);
|
|
42
|
+
}
|
|
43
|
+
return {
|
|
44
|
+
tokens,
|
|
45
|
+
tail: str
|
|
46
|
+
};
|
|
47
|
+
};
|
|
48
|
+
|
|
49
|
+
const { tokens, tail } = $derived.by(() => {
|
|
50
|
+
if (!search || !content) return { tokens: [], tail: content };
|
|
51
|
+
return split(content, search);
|
|
52
|
+
});
|
|
53
|
+
</script>
|
|
54
|
+
|
|
55
|
+
<!-- @component
|
|
56
|
+
marks text-parts matching the given search parameter
|
|
57
|
+
-->
|
|
58
|
+
<svelte:element this={element} class={[clazz]} {id}>
|
|
59
|
+
{#each tokens as token (token)}
|
|
60
|
+
{token.prev}
|
|
61
|
+
{#if children}
|
|
62
|
+
{@render children?.({ match: token.match })}
|
|
63
|
+
{:else}
|
|
64
|
+
<mark class="bg-primary-500 text-surface-50 shrink-0 rounded-sm px-px py-0.5">
|
|
65
|
+
{token.match}
|
|
66
|
+
</mark>
|
|
67
|
+
{/if}
|
|
68
|
+
{/each}
|
|
69
|
+
{tail}
|
|
70
|
+
</svelte:element>
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { merge } from '$lib/utils/functions';
|
|
3
|
+
import type { ClassValue, HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
|
|
5
|
+
interface Props extends HTMLAttributes<HTMLTextAreaElement> {
|
|
6
|
+
class?: ClassValue;
|
|
7
|
+
value?: string;
|
|
8
|
+
disabled?: boolean;
|
|
9
|
+
placeholder?: string;
|
|
10
|
+
name?: string;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
let { class: clazz, value = $bindable(), ...rest }: Props = $props();
|
|
14
|
+
|
|
15
|
+
let textareaEl = $state<HTMLTextAreaElement>();
|
|
16
|
+
|
|
17
|
+
function autoResize() {
|
|
18
|
+
if (!textareaEl) return;
|
|
19
|
+
textareaEl.style.height = 'auto';
|
|
20
|
+
textareaEl.style.height = `${textareaEl.scrollHeight}px`;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
$effect(() => {
|
|
24
|
+
value;
|
|
25
|
+
autoResize();
|
|
26
|
+
});
|
|
27
|
+
|
|
28
|
+
export function focus() {
|
|
29
|
+
textareaEl?.focus();
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
export function isActive() {
|
|
33
|
+
return document.activeElement === textareaEl;
|
|
34
|
+
}
|
|
35
|
+
</script>
|
|
36
|
+
|
|
37
|
+
<textarea
|
|
38
|
+
class={merge(
|
|
39
|
+
'max-h-96 w-full resize-none overflow-y-auto border-none bg-transparent ring-0 outline-0 transition-all',
|
|
40
|
+
clazz
|
|
41
|
+
)}
|
|
42
|
+
bind:this={textareaEl}
|
|
43
|
+
bind:value
|
|
44
|
+
rows="1"
|
|
45
|
+
{...rest}
|
|
46
|
+
></textarea>
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
2
|
import { theme } from '$lib/theme.svelte';
|
|
3
3
|
import type { IvoryComponent } from '$lib/types';
|
|
4
|
-
import { merge } from '$lib/utils/
|
|
4
|
+
import { merge } from '$lib/utils/functions';
|
|
5
5
|
import { Check, type Icon as LucideIcon, Minus } from '@lucide/svelte';
|
|
6
6
|
import clsx from 'clsx';
|
|
7
7
|
import type { ClassValue } from 'svelte/elements';
|
|
8
8
|
import { scale } from 'svelte/transition';
|
|
9
9
|
|
|
10
|
-
export
|
|
10
|
+
export type CheckboxProps = IvoryComponent<HTMLElement> & {
|
|
11
11
|
class?: ClassValue;
|
|
12
12
|
/** `checked` has prioriy over `partial` */
|
|
13
13
|
checked?: boolean | null;
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
/** if true, the onclick handler will not be called */
|
|
18
18
|
disabled?: boolean;
|
|
19
19
|
onclick?: () => void;
|
|
20
|
-
}
|
|
20
|
+
};
|
|
21
21
|
</script>
|
|
22
22
|
|
|
23
23
|
<!--
|
|
@@ -1,4 +1,10 @@
|
|
|
1
|
-
export
|
|
2
|
-
export {
|
|
3
|
-
|
|
4
|
-
|
|
1
|
+
export { default as Checkbox, type CheckboxProps } from './checkbox/Checkbox.svelte';
|
|
2
|
+
export {
|
|
3
|
+
default as Element,
|
|
4
|
+
type AnchorAttributes,
|
|
5
|
+
type ButtonAttributes,
|
|
6
|
+
type ElementProps
|
|
7
|
+
} from './Element.svelte';
|
|
8
|
+
export { default as MarkedText, type MarkedTextProps } from './MarkedText.svelte';
|
|
9
|
+
export { default as Textarea } from './Textarea.svelte';
|
|
10
|
+
export { default as Toggle, type ToggleProps } from './toggle/Toggle.svelte';
|
|
@@ -1,14 +1,14 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
2
|
import type { IvoryComponent } from '$lib/types';
|
|
3
|
-
import { merge } from '$lib/utils/
|
|
3
|
+
import { merge } from '$lib/utils/functions';
|
|
4
4
|
import type { Snippet } from 'svelte';
|
|
5
5
|
import type { ClassValue } from 'svelte/elements';
|
|
6
6
|
|
|
7
|
-
export
|
|
7
|
+
export type ToggleProps = IvoryComponent<HTMLElement> & {
|
|
8
8
|
value?: boolean;
|
|
9
9
|
class?: ClassValue;
|
|
10
10
|
children?: Snippet;
|
|
11
|
-
}
|
|
11
|
+
};
|
|
12
12
|
</script>
|
|
13
13
|
|
|
14
14
|
<script lang="ts">
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
2
|
import { theme } from '$lib/theme.svelte';
|
|
3
|
-
import { pseudoRandomId } from '$lib/utils/functions';
|
|
4
|
-
import { merge } from '$lib/utils/merge';
|
|
3
|
+
import { merge, pseudoRandomId } from '$lib/utils/functions';
|
|
5
4
|
import type { RemoteFormField, RemoteFormFieldValue } from '@sveltejs/kit';
|
|
6
5
|
import type { Snippet } from 'svelte';
|
|
7
6
|
import type { ClassValue } from 'svelte/elements';
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import TextArea from '../basic/Textarea.svelte';
|
|
3
|
+
import Input, { type InputProps } from './Input.svelte';
|
|
4
|
+
|
|
5
|
+
let { ...props }: InputProps<string> = $props();
|
|
6
|
+
|
|
7
|
+
let inputElement = $state<TextArea>();
|
|
8
|
+
export function focus() {
|
|
9
|
+
inputElement?.focus();
|
|
10
|
+
}
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<Input {...props}>
|
|
14
|
+
{#snippet children(inputProps)}
|
|
15
|
+
{@const { name } = props.form.as?.('text')}
|
|
16
|
+
<TextArea
|
|
17
|
+
{...inputProps}
|
|
18
|
+
{name}
|
|
19
|
+
bind:value={props.form.value, props.form.set}
|
|
20
|
+
bind:this={inputElement}
|
|
21
|
+
/>
|
|
22
|
+
{/snippet}
|
|
23
|
+
</Input>
|
|
@@ -17,5 +17,6 @@ export {
|
|
|
17
17
|
export { default as PasswordInput } from './PasswordInput.svelte';
|
|
18
18
|
export { default as Select } from './select/Select.svelte';
|
|
19
19
|
export { default as SelectOption } from './select/SelectOption.svelte';
|
|
20
|
+
export { default as TextareaInput } from './TextareaInput.svelte';
|
|
20
21
|
export { default as TextInput } from './TextInput.svelte';
|
|
21
22
|
export { default as ToggleInput } from './ToggleInput.svelte';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { theme } from '$lib/theme.svelte';
|
|
3
|
-
import { merge } from '$lib/utils/
|
|
3
|
+
import { merge } from '$lib/utils/functions';
|
|
4
4
|
import { TriangleAlert } from '@lucide/svelte';
|
|
5
5
|
import type { RemoteFormIssue } from '@sveltejs/kit';
|
|
6
6
|
import type { ClassValue } from 'svelte/elements';
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
2
|
import { theme } from '$lib/theme.svelte';
|
|
3
3
|
import type { IvoryComponent } from '$lib/types';
|
|
4
|
-
import { merge } from '$lib/utils/
|
|
4
|
+
import { merge } from '$lib/utils/functions';
|
|
5
5
|
import type { ClassValue } from 'svelte/elements';
|
|
6
6
|
|
|
7
7
|
export interface HeadingProps extends IvoryComponent<HTMLHeadingElement> {
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
2
|
import { theme } from '$lib/theme.svelte';
|
|
3
3
|
import type { IvoryComponent, TransitionProps } from '$lib/types';
|
|
4
|
-
import { merge } from '$lib/utils/
|
|
4
|
+
import { merge } from '$lib/utils/functions';
|
|
5
5
|
import { onMount, tick } from 'svelte';
|
|
6
6
|
import type { MouseEventHandler } from 'svelte/elements';
|
|
7
7
|
import { fade } from 'svelte/transition';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
2
|
import type { TransitionProps } from '$lib/types';
|
|
3
|
-
import { merge } from '$lib/utils/
|
|
3
|
+
import { merge } from '$lib/utils/functions';
|
|
4
4
|
import { X } from '@lucide/svelte';
|
|
5
5
|
import type { Snippet } from 'svelte';
|
|
6
6
|
import { fly } from 'svelte/transition';
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import type { Variant } from '$lib';
|
|
3
3
|
import { theme } from '$lib/theme.svelte';
|
|
4
4
|
import type { TransitionProps } from '$lib/types';
|
|
5
|
-
import { merge } from '$lib/utils/
|
|
5
|
+
import { merge } from '$lib/utils/functions';
|
|
6
6
|
import { X } from '@lucide/svelte';
|
|
7
7
|
import { type Snippet } from 'svelte';
|
|
8
8
|
import type { ClassValue, MouseEventHandler } from 'svelte/elements';
|
|
@@ -2,8 +2,7 @@
|
|
|
2
2
|
import { page } from '$app/state';
|
|
3
3
|
import { theme } from '$lib/theme.svelte';
|
|
4
4
|
import type { IvoryComponent } from '$lib/types';
|
|
5
|
-
import { pseudoRandomId } from '$lib/utils/functions
|
|
6
|
-
import { merge } from '$lib/utils/merge';
|
|
5
|
+
import { merge, pseudoRandomId } from '$lib/utils/functions';
|
|
7
6
|
import { onMount, type Snippet } from 'svelte';
|
|
8
7
|
import type { ClassValue } from 'svelte/elements';
|
|
9
8
|
import { getTabContext } from './Tabs.svelte';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
|
-
import { merge } from '$lib/utils/
|
|
2
|
+
import { merge } from '$lib/utils/functions';
|
|
3
3
|
import type { Snippet } from 'svelte';
|
|
4
4
|
import type { ClassValue, MouseEventHandler } from 'svelte/elements';
|
|
5
5
|
import Popover, { type PopoverPlacement } from '../popover/Popover.svelte';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
2
|
import { theme } from '$lib/theme.svelte';
|
|
3
|
-
import { merge } from '$lib/utils/
|
|
3
|
+
import { merge } from '$lib/utils/functions';
|
|
4
4
|
import { type Snippet } from 'svelte';
|
|
5
5
|
import type { ClassValue } from 'svelte/elements';
|
|
6
6
|
import type { ColumnConfig } from './columnController.svelte';
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script lang="ts" module>
|
|
2
|
-
import { merge } from '$lib/utils/
|
|
2
|
+
import { merge } from '$lib/utils/functions';
|
|
3
3
|
import { ChevronRight } from '@lucide/svelte';
|
|
4
4
|
import { getContext, setContext, untrack, type Snippet } from 'svelte';
|
|
5
5
|
import type { ClassValue } from 'svelte/elements';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"merge.d.ts","sourceRoot":"","sources":["../../src/lib/utils/merge.ts"],"names":[],"mappings":"AAAA,OAAa,EAAE,KAAK,UAAU,EAAE,MAAM,MAAM,CAAC;AAG7C,+BAA+B;AAC/B,eAAO,MAAM,KAAK,GAAI,GAAG,SAAS,UAAU,WAE3C,CAAC"}
|
|
File without changes
|
|
File without changes
|
|
File without changes
|