@rkosafo/cai.components 0.0.80 → 0.0.81
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/ui/modal/Modal.svelte +97 -52
- package/dist/ui/toast/Toast.svelte +120 -281
- package/dist/ui/toast/Toast.svelte.d.ts +27 -52
- package/dist/ui/toast/index.d.ts +2 -1
- package/dist/ui/toast/index.js +1 -3
- package/package.json +1 -1
- package/dist/forms/FormSelect/index.d.ts +0 -1
- package/dist/forms/FormSelect/index.js +0 -1
- package/dist/forms/input/index.d.ts +0 -4
- package/dist/forms/input/index.js +0 -5
- package/dist/forms/input/theme.d.ts +0 -301
- package/dist/forms/input/theme.js +0 -100
- package/dist/layout/TF/Sidebar/Sidebar.svelte +0 -148
- package/dist/layout/TF/Sidebar/Sidebar.svelte.d.ts +0 -4
- package/dist/layout/TF/Sidebar/index.d.ts +0 -1
- package/dist/layout/TF/Sidebar/index.js +0 -1
- package/dist/layout/TF/Wrapper/index.d.ts +0 -1
- package/dist/layout/TF/Wrapper/index.js +0 -1
- package/dist/ui/accordion/theme.d.ts +0 -96
- package/dist/ui/accordion/theme.js +0 -59
- package/dist/ui/speedDial/SpeedDial.svelte +0 -77
- package/dist/ui/speedDial/SpeedDial.svelte.d.ts +0 -21
- package/dist/ui/tableLoader/TableLoader.svelte +0 -24
- package/dist/ui/tableLoader/TableLoader.svelte.d.ts +0 -13
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as TFSidebar } from "./Sidebar.svelte";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as TFSidebar } from "./Sidebar.svelte";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as TFLayoutWrapper } from "./Wrapper.svelte";
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default as TFLayoutWrapper } from "./Wrapper.svelte";
|
|
@@ -1,96 +0,0 @@
|
|
|
1
|
-
import type { Classes } from '../../themes/themeUtils.js';
|
|
2
|
-
import { type VariantProps } from 'tailwind-variants';
|
|
3
|
-
export type AccordionVariants = VariantProps<typeof accordion>;
|
|
4
|
-
export type AccordionItemVariants = VariantProps<typeof accordionItem> & Classes<typeof accordionItem>;
|
|
5
|
-
export declare const accordion: import("tailwind-variants").TVReturnType<{
|
|
6
|
-
color: {
|
|
7
|
-
primary: string;
|
|
8
|
-
secondary: string;
|
|
9
|
-
};
|
|
10
|
-
flush: {
|
|
11
|
-
true: string;
|
|
12
|
-
false: string;
|
|
13
|
-
};
|
|
14
|
-
}, undefined, "w-full", {
|
|
15
|
-
color: {
|
|
16
|
-
primary: string;
|
|
17
|
-
secondary: string;
|
|
18
|
-
};
|
|
19
|
-
flush: {
|
|
20
|
-
true: string;
|
|
21
|
-
false: string;
|
|
22
|
-
};
|
|
23
|
-
}, undefined, import("tailwind-variants").TVReturnType<{
|
|
24
|
-
color: {
|
|
25
|
-
primary: string;
|
|
26
|
-
secondary: string;
|
|
27
|
-
};
|
|
28
|
-
flush: {
|
|
29
|
-
true: string;
|
|
30
|
-
false: string;
|
|
31
|
-
};
|
|
32
|
-
}, undefined, "w-full", unknown, unknown, undefined>>;
|
|
33
|
-
export declare const accordionItem: import("tailwind-variants").TVReturnType<{
|
|
34
|
-
flush: {
|
|
35
|
-
true: {
|
|
36
|
-
button: string;
|
|
37
|
-
content: string;
|
|
38
|
-
};
|
|
39
|
-
false: {
|
|
40
|
-
button: string;
|
|
41
|
-
content: string;
|
|
42
|
-
};
|
|
43
|
-
};
|
|
44
|
-
open: {
|
|
45
|
-
true: {};
|
|
46
|
-
false: {};
|
|
47
|
-
};
|
|
48
|
-
}, {
|
|
49
|
-
base: string;
|
|
50
|
-
button: string;
|
|
51
|
-
content: string;
|
|
52
|
-
active: string;
|
|
53
|
-
inactive: string;
|
|
54
|
-
}, undefined, {
|
|
55
|
-
flush: {
|
|
56
|
-
true: {
|
|
57
|
-
button: string;
|
|
58
|
-
content: string;
|
|
59
|
-
};
|
|
60
|
-
false: {
|
|
61
|
-
button: string;
|
|
62
|
-
content: string;
|
|
63
|
-
};
|
|
64
|
-
};
|
|
65
|
-
open: {
|
|
66
|
-
true: {};
|
|
67
|
-
false: {};
|
|
68
|
-
};
|
|
69
|
-
}, {
|
|
70
|
-
base: string;
|
|
71
|
-
button: string;
|
|
72
|
-
content: string;
|
|
73
|
-
active: string;
|
|
74
|
-
inactive: string;
|
|
75
|
-
}, import("tailwind-variants").TVReturnType<{
|
|
76
|
-
flush: {
|
|
77
|
-
true: {
|
|
78
|
-
button: string;
|
|
79
|
-
content: string;
|
|
80
|
-
};
|
|
81
|
-
false: {
|
|
82
|
-
button: string;
|
|
83
|
-
content: string;
|
|
84
|
-
};
|
|
85
|
-
};
|
|
86
|
-
open: {
|
|
87
|
-
true: {};
|
|
88
|
-
false: {};
|
|
89
|
-
};
|
|
90
|
-
}, {
|
|
91
|
-
base: string;
|
|
92
|
-
button: string;
|
|
93
|
-
content: string;
|
|
94
|
-
active: string;
|
|
95
|
-
inactive: string;
|
|
96
|
-
}, undefined, unknown, unknown, undefined>>;
|
|
@@ -1,59 +0,0 @@
|
|
|
1
|
-
import { tv } from 'tailwind-variants';
|
|
2
|
-
export const accordion = tv({
|
|
3
|
-
base: 'w-full',
|
|
4
|
-
variants: {
|
|
5
|
-
color: {
|
|
6
|
-
primary: 'text-primary-500 dark:text-primary-400',
|
|
7
|
-
secondary: 'text-secondary-500 dark:text-secondary-400'
|
|
8
|
-
},
|
|
9
|
-
flush: {
|
|
10
|
-
true: '',
|
|
11
|
-
false: 'border border-gray-200 dark:border-gray-700 rounded-t-xl'
|
|
12
|
-
}
|
|
13
|
-
}
|
|
14
|
-
});
|
|
15
|
-
export const accordionItem = tv({
|
|
16
|
-
slots: {
|
|
17
|
-
base: 'group',
|
|
18
|
-
button: 'flex items-center justify-between w-full font-medium text-left group-first:rounded-t-xl border-gray-200 dark:border-gray-700 border-b',
|
|
19
|
-
content: 'border-b border-gray-200 dark:border-gray-700',
|
|
20
|
-
active: 'bg-gray-100 dark:bg-gray-800 text-gray-900 dark:text-white focus:ring-4 focus:ring-gray-200 dark:focus:ring-gray-800',
|
|
21
|
-
inactive: 'text-gray-500 dark:text-gray-400 hover:bg-gray-100 dark:hover:bg-gray-800'
|
|
22
|
-
},
|
|
23
|
-
variants: {
|
|
24
|
-
flush: {
|
|
25
|
-
true: {
|
|
26
|
-
button: 'py-5',
|
|
27
|
-
content: 'py-5'
|
|
28
|
-
},
|
|
29
|
-
false: {
|
|
30
|
-
button: 'p-5 border-s border-e group-first:border-t',
|
|
31
|
-
content: 'p-5 border-s border-e'
|
|
32
|
-
}
|
|
33
|
-
},
|
|
34
|
-
open: {
|
|
35
|
-
true: {},
|
|
36
|
-
false: {}
|
|
37
|
-
}
|
|
38
|
-
},
|
|
39
|
-
compoundVariants: [
|
|
40
|
-
{
|
|
41
|
-
flush: true,
|
|
42
|
-
open: true,
|
|
43
|
-
class: {
|
|
44
|
-
button: 'text-gray-900 dark:text-white'
|
|
45
|
-
}
|
|
46
|
-
},
|
|
47
|
-
{
|
|
48
|
-
flush: true,
|
|
49
|
-
open: false,
|
|
50
|
-
class: {
|
|
51
|
-
button: 'text-gray-500 dark:text-gray-400'
|
|
52
|
-
}
|
|
53
|
-
}
|
|
54
|
-
],
|
|
55
|
-
defaultVariants: {
|
|
56
|
-
flush: false,
|
|
57
|
-
open: false
|
|
58
|
-
}
|
|
59
|
-
});
|
|
@@ -1,77 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import clsx from 'clsx';
|
|
3
|
-
import Popper from '../../utils/Popper.svelte';
|
|
4
|
-
import { getSideAxis } from '@floating-ui/utils';
|
|
5
|
-
import { setContext, untrack } from 'svelte';
|
|
6
|
-
import { speedDial } from './theme.js';
|
|
7
|
-
import type { SpeedDialProps, SpeedCtxType } from '../../index.js';
|
|
8
|
-
import { getTheme, warnThemeDeprecation } from '../../themes/themeUtils.js';
|
|
9
|
-
|
|
10
|
-
let {
|
|
11
|
-
children,
|
|
12
|
-
popperClass,
|
|
13
|
-
placement = 'top',
|
|
14
|
-
pill = true,
|
|
15
|
-
tooltip = 'left',
|
|
16
|
-
trigger = 'hover',
|
|
17
|
-
textOutside = false,
|
|
18
|
-
class: className,
|
|
19
|
-
classes,
|
|
20
|
-
isOpen = $bindable(false),
|
|
21
|
-
...restProps
|
|
22
|
-
}: SpeedDialProps = $props();
|
|
23
|
-
|
|
24
|
-
warnThemeDeprecation(
|
|
25
|
-
'SpeedDial',
|
|
26
|
-
untrack(() => ({ popperClass })),
|
|
27
|
-
{ popperClass: 'popper' }
|
|
28
|
-
);
|
|
29
|
-
|
|
30
|
-
const styling = $derived(
|
|
31
|
-
classes ?? {
|
|
32
|
-
popper: popperClass
|
|
33
|
-
}
|
|
34
|
-
);
|
|
35
|
-
|
|
36
|
-
const theme = $derived(getTheme('speedDial'));
|
|
37
|
-
|
|
38
|
-
$effect(() => {
|
|
39
|
-
setContext<SpeedCtxType>('speed-dial', { pill, tooltip, textOutside });
|
|
40
|
-
});
|
|
41
|
-
|
|
42
|
-
let vertical: boolean = $derived(getSideAxis(placement) === 'y');
|
|
43
|
-
|
|
44
|
-
let { base, popper } = $derived(speedDial({ vertical }));
|
|
45
|
-
</script>
|
|
46
|
-
|
|
47
|
-
<Popper
|
|
48
|
-
{...restProps}
|
|
49
|
-
bind:isOpen
|
|
50
|
-
{trigger}
|
|
51
|
-
arrow={false}
|
|
52
|
-
{placement}
|
|
53
|
-
class={base({ class: clsx(theme?.base, className) })}
|
|
54
|
-
>
|
|
55
|
-
<div class={popper({ class: clsx(theme?.popper, styling.popper) })}>
|
|
56
|
-
{@render children()}
|
|
57
|
-
</div>
|
|
58
|
-
</Popper>
|
|
59
|
-
|
|
60
|
-
<!--
|
|
61
|
-
@component
|
|
62
|
-
[Go to docs](https://flowbite-svelte.com/)
|
|
63
|
-
## Type
|
|
64
|
-
[SpeedDialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1598)
|
|
65
|
-
## Props
|
|
66
|
-
@prop children
|
|
67
|
-
@prop popperClass
|
|
68
|
-
@prop placement = "top"
|
|
69
|
-
@prop pill = true
|
|
70
|
-
@prop tooltip = "left"
|
|
71
|
-
@prop trigger = "hover"
|
|
72
|
-
@prop textOutside = false
|
|
73
|
-
@prop class: className
|
|
74
|
-
@prop classes
|
|
75
|
-
@prop isOpen = $bindable(false)
|
|
76
|
-
@prop ...restProps
|
|
77
|
-
-->
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import type { SpeedDialProps } from '../../index.js';
|
|
2
|
-
/**
|
|
3
|
-
* [Go to docs](https://flowbite-svelte.com/)
|
|
4
|
-
* ## Type
|
|
5
|
-
* [SpeedDialProps](https://github.com/themesberg/flowbite-svelte/blob/main/src/lib/types.ts#L1598)
|
|
6
|
-
* ## Props
|
|
7
|
-
* @prop children
|
|
8
|
-
* @prop popperClass
|
|
9
|
-
* @prop placement = "top"
|
|
10
|
-
* @prop pill = true
|
|
11
|
-
* @prop tooltip = "left"
|
|
12
|
-
* @prop trigger = "hover"
|
|
13
|
-
* @prop textOutside = false
|
|
14
|
-
* @prop class: className
|
|
15
|
-
* @prop classes
|
|
16
|
-
* @prop isOpen = $bindable(false)
|
|
17
|
-
* @prop ...restProps
|
|
18
|
-
*/
|
|
19
|
-
declare const SpeedDial: import("svelte").Component<SpeedDialProps, {}, "isOpen">;
|
|
20
|
-
type SpeedDial = ReturnType<typeof SpeedDial>;
|
|
21
|
-
export default SpeedDial;
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
<script>
|
|
2
|
-
let { bodySize = 10, headerSize = 6 } = $props();
|
|
3
|
-
</script>
|
|
4
|
-
|
|
5
|
-
<table class="w-full animate-pulse">
|
|
6
|
-
<thead>
|
|
7
|
-
{#each Array(headerSize) as _}
|
|
8
|
-
<th class="whitespace-nowrap px-6 py-2">
|
|
9
|
-
<div class=" h-7 rounded-md bg-gray-300"></div>
|
|
10
|
-
</th>
|
|
11
|
-
{/each}
|
|
12
|
-
</thead>
|
|
13
|
-
<tbody class="divide-y border-t border-gray-300">
|
|
14
|
-
{#each Array(bodySize) as _}
|
|
15
|
-
<tr>
|
|
16
|
-
{#each Array(headerSize) as _}
|
|
17
|
-
<td class="whitespace-nowrap px-6 py-2">
|
|
18
|
-
<div class=" h-7 rounded-md bg-gray-300"></div>
|
|
19
|
-
</td>
|
|
20
|
-
{/each}
|
|
21
|
-
</tr>
|
|
22
|
-
{/each}
|
|
23
|
-
</tbody>
|
|
24
|
-
</table>
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
export default TableLoader;
|
|
2
|
-
type TableLoader = {
|
|
3
|
-
$on?(type: string, callback: (e: any) => void): () => void;
|
|
4
|
-
$set?(props: Partial<$$ComponentProps>): void;
|
|
5
|
-
};
|
|
6
|
-
declare const TableLoader: import("svelte").Component<{
|
|
7
|
-
bodySize?: number;
|
|
8
|
-
headerSize?: number;
|
|
9
|
-
}, {}, "">;
|
|
10
|
-
type $$ComponentProps = {
|
|
11
|
-
bodySize?: number;
|
|
12
|
-
headerSize?: number;
|
|
13
|
-
};
|