@rkosafo/cai.components 0.0.78 → 0.0.80
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/README.md +8 -8
- package/dist/baseEditor/index.svelte +32 -32
- package/dist/builders/filters/FilterBuilder.svelte +641 -641
- package/dist/forms/FormCheckbox/FormCheckbox.svelte +53 -53
- package/dist/forms/FormClEditor/ClEdito.svelte +68 -68
- package/dist/forms/FormDatepicker/FormDatepicker.svelte +159 -159
- package/dist/forms/FormFileUpload/FormFileUplad.svelte +134 -134
- package/dist/forms/FormInput/FormInput.svelte +87 -87
- package/dist/forms/FormRadio/FormRadio.svelte +53 -53
- package/dist/forms/FormSelect/FormSelect.svelte +88 -88
- package/dist/forms/FormTextarea/FormTextarea.svelte +78 -78
- package/dist/forms/button-toggle/ButtonToggle.svelte +119 -119
- package/dist/forms/button-toggle/CheckIcon.svelte +28 -28
- package/dist/forms/checkbox/Checkbox.svelte +82 -82
- package/dist/forms/checkbox/CheckboxButton.svelte +92 -92
- package/dist/forms/datepicker/Datepicker.svelte +707 -707
- package/dist/forms/form/Form.svelte +69 -69
- package/dist/forms/input/Input.svelte +363 -363
- package/dist/forms/label/Label.svelte +38 -38
- package/dist/forms/radio/Radio.svelte +48 -48
- package/dist/forms/radio/RadioButton.svelte +22 -22
- package/dist/forms/select/Select.svelte +56 -56
- package/dist/forms/textarea/Textarea.svelte +165 -165
- package/dist/forms/toggle/Toggle.svelte +70 -70
- package/dist/layout/Chat/CategorySelector.svelte +52 -52
- package/dist/layout/Chat/ChatEntry.svelte +246 -246
- package/dist/layout/Chat/ChatEntrySkeleton.svelte +81 -81
- package/dist/layout/Chat/ChatHeader.svelte +172 -172
- package/dist/layout/Chat/ChatInput.svelte +207 -207
- package/dist/layout/Chat/DraggableWindow.svelte +230 -230
- package/dist/layout/Chat/PreviewPage.svelte +182 -182
- package/dist/layout/Chat/RichText.svelte +216 -216
- package/dist/layout/ComponentCanvas/Canvas.svelte +40 -40
- package/dist/layout/ComponentCanvas/ComponentRenderer.svelte +85 -85
- package/dist/layout/TF/Content/Content.svelte +21 -21
- package/dist/layout/TF/Header/Header.svelte +166 -166
- package/dist/layout/TF/Sidebar/Sidebar.svelte +148 -148
- package/dist/layout/TF/Wrapper/Wrapper.svelte +17 -17
- package/dist/layout/mailing/MailPaginator.svelte +36 -36
- package/dist/layout/mailing/MailSidebar.svelte +39 -39
- package/dist/layout/mailing/MailToolBar.svelte +174 -174
- package/dist/layout/mailing/MailingContent.svelte +10 -10
- package/dist/layout/mailing/MailingHeader.svelte +55 -55
- package/dist/layout/mailing/MailingMessageCard.svelte +112 -112
- package/dist/layout/mailing/MailingMessageViewer.svelte +87 -87
- package/dist/layout/mailing/MailingModule.svelte +448 -448
- package/dist/styles/docs.css +615 -615
- package/dist/styles/tf-layout.css +185 -185
- package/dist/themes/ThemeProvider.svelte +20 -20
- package/dist/types/index.d.ts +2 -0
- package/dist/typography/heading/Heading.svelte +35 -35
- package/dist/ui/accordion/Accordion.svelte +49 -49
- package/dist/ui/accordion/AccordionItem.svelte +173 -173
- package/dist/ui/alert/Alert.svelte +83 -83
- package/dist/ui/alertDialog/AlertDialog.svelte +40 -40
- package/dist/ui/avatar/Avatar.svelte +77 -77
- package/dist/ui/box/Box.svelte +28 -28
- package/dist/ui/breadcrumb/Breadcrumb.svelte +39 -39
- package/dist/ui/buttons/ActionButton.svelte +234 -234
- package/dist/ui/buttons/Button.svelte +102 -102
- package/dist/ui/buttons/GradientButton.svelte +59 -59
- package/dist/ui/datatable/Datatable.svelte +525 -525
- package/dist/ui/drawer/Drawer.svelte +300 -300
- package/dist/ui/dropdown/Dropdown.svelte +36 -36
- package/dist/ui/dropdown/DropdownDivider.svelte +11 -11
- package/dist/ui/dropdown/DropdownGroup.svelte +14 -14
- package/dist/ui/dropdown/DropdownHeader.svelte +14 -14
- package/dist/ui/dropdown/DropdownItem.svelte +52 -52
- package/dist/ui/footer/Footer.svelte +15 -15
- package/dist/ui/footer/FooterBrand.svelte +37 -37
- package/dist/ui/footer/FooterCopyright.svelte +45 -45
- package/dist/ui/footer/FooterIcon.svelte +22 -22
- package/dist/ui/footer/FooterLink.svelte +33 -33
- package/dist/ui/footer/FooterLinkGroup.svelte +13 -13
- package/dist/ui/icons/IconifyIcon.svelte +7 -7
- package/dist/ui/indicator/Indicator.svelte +42 -42
- package/dist/ui/modal/Modal.svelte +265 -265
- package/dist/ui/notificationList/NotificationList.svelte +123 -123
- package/dist/ui/pageLoader/PageLoader.svelte +14 -14
- package/dist/ui/pageLoader/PageLoader2.svelte +99 -0
- package/dist/ui/pageLoader/PageLoader2.svelte.d.ts +24 -0
- package/dist/ui/pageLoader/index.d.ts +2 -1
- package/dist/ui/pageLoader/index.js +2 -1
- package/dist/ui/paginate/Paginate.svelte +96 -96
- package/dist/ui/speedDial/SpeedDial.svelte +77 -77
- package/dist/ui/speedDial/SpeedDialButton.svelte +75 -75
- package/dist/ui/speedDial/SpeedDialTrigger.svelte +79 -79
- package/dist/ui/tab/Tab.svelte +93 -67
- package/dist/ui/table/Table.svelte +396 -396
- package/dist/ui/tableLoader/TableLoader.svelte +24 -24
- package/dist/ui/toast/Toast.svelte +337 -337
- package/dist/ui/toast/Toast.svelte.d.ts +10 -10
- package/dist/ui/toolbar/Toolbar.svelte +59 -59
- package/dist/ui/toolbar/ToolbarButton.svelte +56 -56
- package/dist/ui/toolbar/ToolbarGroup.svelte +43 -43
- package/dist/ui/tooltip/Tooltip.svelte +51 -51
- package/dist/utils/Popper.svelte +257 -257
- package/dist/utils/closeButton/CloseButton.svelte +88 -88
- package/dist/utils/index.d.ts +2 -2
- package/dist/utils/index.js +3 -3
- package/dist/utils/singleSelection.svelte.js +48 -48
- package/dist/youtube/index.svelte +12 -12
- package/package.json +1 -1
|
@@ -1,88 +1,88 @@
|
|
|
1
|
-
<script lang="ts" module>
|
|
2
|
-
export type CloseButtonProps = CloseButtonVariants &
|
|
3
|
-
AnchorButtonAttributes & {
|
|
4
|
-
onclick?: (ev: MouseEvent) => void;
|
|
5
|
-
name?: string;
|
|
6
|
-
ariaLabel?: string;
|
|
7
|
-
class?: string;
|
|
8
|
-
svgClass?: string;
|
|
9
|
-
};
|
|
10
|
-
</script>
|
|
11
|
-
|
|
12
|
-
<script lang="ts">
|
|
13
|
-
import clsx from 'clsx';
|
|
14
|
-
import { closeButton } from './index.js';
|
|
15
|
-
import { useDismiss } from '../dismissable.js';
|
|
16
|
-
import type { AnchorButtonAttributes } from '../../types/index.js';
|
|
17
|
-
import type { CloseButtonVariants } from './theme.js';
|
|
18
|
-
|
|
19
|
-
let {
|
|
20
|
-
children,
|
|
21
|
-
color = 'gray',
|
|
22
|
-
onclick: onclickorg,
|
|
23
|
-
name = 'Close',
|
|
24
|
-
ariaLabel,
|
|
25
|
-
size = 'md',
|
|
26
|
-
class: className,
|
|
27
|
-
svgClass,
|
|
28
|
-
...restProps
|
|
29
|
-
}: CloseButtonProps = $props();
|
|
30
|
-
|
|
31
|
-
const { base, svg } = $derived(closeButton({ color, size }));
|
|
32
|
-
|
|
33
|
-
const context = useDismiss();
|
|
34
|
-
|
|
35
|
-
function onclick(event: MouseEvent) {
|
|
36
|
-
onclickorg?.(event);
|
|
37
|
-
if (event.defaultPrevented) return;
|
|
38
|
-
context?.dismiss?.(event);
|
|
39
|
-
}
|
|
40
|
-
</script>
|
|
41
|
-
|
|
42
|
-
{#if restProps.href === undefined}
|
|
43
|
-
<button
|
|
44
|
-
type="button"
|
|
45
|
-
{...restProps}
|
|
46
|
-
class={base({ class: clsx(className) })}
|
|
47
|
-
{onclick}
|
|
48
|
-
aria-label={ariaLabel ?? name}
|
|
49
|
-
>
|
|
50
|
-
{#if name}<span class="sr-only">{name}</span>{/if}
|
|
51
|
-
{#if children}
|
|
52
|
-
{@render children()}
|
|
53
|
-
{:else}
|
|
54
|
-
<svg
|
|
55
|
-
class={svg({ class: svgClass })}
|
|
56
|
-
fill="currentColor"
|
|
57
|
-
viewBox="0 0 20 20"
|
|
58
|
-
xmlns="http://www.w3.org/2000/svg"
|
|
59
|
-
>
|
|
60
|
-
<path
|
|
61
|
-
fill-rule="evenodd"
|
|
62
|
-
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
63
|
-
clip-rule="evenodd"
|
|
64
|
-
/>
|
|
65
|
-
</svg>
|
|
66
|
-
{/if}
|
|
67
|
-
</button>
|
|
68
|
-
{:else}
|
|
69
|
-
<a
|
|
70
|
-
{...restProps}
|
|
71
|
-
{onclick}
|
|
72
|
-
class={base({ class: clsx(className) })}
|
|
73
|
-
aria-label={ariaLabel ?? name}
|
|
74
|
-
>
|
|
75
|
-
{#if name}<span class="sr-only">{name}</span>{/if}
|
|
76
|
-
{#if children}
|
|
77
|
-
{@render children()}
|
|
78
|
-
{:else}
|
|
79
|
-
<svg class={svg()} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
80
|
-
<path
|
|
81
|
-
fill-rule="evenodd"
|
|
82
|
-
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
83
|
-
clip-rule="evenodd"
|
|
84
|
-
/>
|
|
85
|
-
</svg>
|
|
86
|
-
{/if}
|
|
87
|
-
</a>
|
|
88
|
-
{/if}
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
export type CloseButtonProps = CloseButtonVariants &
|
|
3
|
+
AnchorButtonAttributes & {
|
|
4
|
+
onclick?: (ev: MouseEvent) => void;
|
|
5
|
+
name?: string;
|
|
6
|
+
ariaLabel?: string;
|
|
7
|
+
class?: string;
|
|
8
|
+
svgClass?: string;
|
|
9
|
+
};
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<script lang="ts">
|
|
13
|
+
import clsx from 'clsx';
|
|
14
|
+
import { closeButton } from './index.js';
|
|
15
|
+
import { useDismiss } from '../dismissable.js';
|
|
16
|
+
import type { AnchorButtonAttributes } from '../../types/index.js';
|
|
17
|
+
import type { CloseButtonVariants } from './theme.js';
|
|
18
|
+
|
|
19
|
+
let {
|
|
20
|
+
children,
|
|
21
|
+
color = 'gray',
|
|
22
|
+
onclick: onclickorg,
|
|
23
|
+
name = 'Close',
|
|
24
|
+
ariaLabel,
|
|
25
|
+
size = 'md',
|
|
26
|
+
class: className,
|
|
27
|
+
svgClass,
|
|
28
|
+
...restProps
|
|
29
|
+
}: CloseButtonProps = $props();
|
|
30
|
+
|
|
31
|
+
const { base, svg } = $derived(closeButton({ color, size }));
|
|
32
|
+
|
|
33
|
+
const context = useDismiss();
|
|
34
|
+
|
|
35
|
+
function onclick(event: MouseEvent) {
|
|
36
|
+
onclickorg?.(event);
|
|
37
|
+
if (event.defaultPrevented) return;
|
|
38
|
+
context?.dismiss?.(event);
|
|
39
|
+
}
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
{#if restProps.href === undefined}
|
|
43
|
+
<button
|
|
44
|
+
type="button"
|
|
45
|
+
{...restProps}
|
|
46
|
+
class={base({ class: clsx(className) })}
|
|
47
|
+
{onclick}
|
|
48
|
+
aria-label={ariaLabel ?? name}
|
|
49
|
+
>
|
|
50
|
+
{#if name}<span class="sr-only">{name}</span>{/if}
|
|
51
|
+
{#if children}
|
|
52
|
+
{@render children()}
|
|
53
|
+
{:else}
|
|
54
|
+
<svg
|
|
55
|
+
class={svg({ class: svgClass })}
|
|
56
|
+
fill="currentColor"
|
|
57
|
+
viewBox="0 0 20 20"
|
|
58
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
59
|
+
>
|
|
60
|
+
<path
|
|
61
|
+
fill-rule="evenodd"
|
|
62
|
+
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
63
|
+
clip-rule="evenodd"
|
|
64
|
+
/>
|
|
65
|
+
</svg>
|
|
66
|
+
{/if}
|
|
67
|
+
</button>
|
|
68
|
+
{:else}
|
|
69
|
+
<a
|
|
70
|
+
{...restProps}
|
|
71
|
+
{onclick}
|
|
72
|
+
class={base({ class: clsx(className) })}
|
|
73
|
+
aria-label={ariaLabel ?? name}
|
|
74
|
+
>
|
|
75
|
+
{#if name}<span class="sr-only">{name}</span>{/if}
|
|
76
|
+
{#if children}
|
|
77
|
+
{@render children()}
|
|
78
|
+
{:else}
|
|
79
|
+
<svg class={svg()} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
|
|
80
|
+
<path
|
|
81
|
+
fill-rule="evenodd"
|
|
82
|
+
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
|
|
83
|
+
clip-rule="evenodd"
|
|
84
|
+
/>
|
|
85
|
+
</svg>
|
|
86
|
+
{/if}
|
|
87
|
+
</a>
|
|
88
|
+
{/if}
|
package/dist/utils/index.d.ts
CHANGED
|
@@ -16,8 +16,8 @@ export declare const send: (node: any, params: import("svelte/transition").Cross
|
|
|
16
16
|
export declare function getInitials(val?: string): string;
|
|
17
17
|
export declare function getInitials2(x: string): string;
|
|
18
18
|
export declare function findTicketCategoryParents(selectedItem: ICaseCategory, data: ICaseCategory[]): string[] | null;
|
|
19
|
-
export declare function formatTicketDate(x: any):
|
|
20
|
-
export declare function formatTicketHeader(x: any):
|
|
19
|
+
export declare function formatTicketDate(x: any): string;
|
|
20
|
+
export declare function formatTicketHeader(x: any): string;
|
|
21
21
|
export declare function isImage(path: string): boolean;
|
|
22
22
|
export declare function isPdf(path: string): boolean;
|
|
23
23
|
export declare function isWord(path: string): boolean;
|
package/dist/utils/index.js
CHANGED
|
@@ -45,9 +45,9 @@ export const [send, receive] = crossfade({
|
|
|
45
45
|
return {
|
|
46
46
|
duration: 600,
|
|
47
47
|
easing: quintOut,
|
|
48
|
-
css: (t) => `
|
|
49
|
-
transform: ${transform} translateX(${(1 - t) * 100}%);
|
|
50
|
-
opacity: ${t}
|
|
48
|
+
css: (t) => `
|
|
49
|
+
transform: ${transform} translateX(${(1 - t) * 100}%);
|
|
50
|
+
opacity: ${t}
|
|
51
51
|
`
|
|
52
52
|
};
|
|
53
53
|
}
|
|
@@ -1,49 +1,49 @@
|
|
|
1
|
-
import { getContext, setContext } from "svelte";
|
|
2
|
-
|
|
3
|
-
/**
|
|
4
|
-
* @template T
|
|
5
|
-
* @typedef {Object} SingleSelectionContext
|
|
6
|
-
* @property {T=} value
|
|
7
|
-
*/
|
|
8
|
-
|
|
9
|
-
/** @type {symbol} */
|
|
10
|
-
const SINGLE_SELECTION_KEY = Symbol("singleton");
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* @template T
|
|
14
|
-
* @param {boolean} [nonReactive=false] - use a non-reactive placeholder to allow multiple selection and keep context shallow
|
|
15
|
-
* @returns {SingleSelectionContext<T>}
|
|
16
|
-
*/
|
|
17
|
-
export function createSingleSelectionContext(nonReactive = false) {
|
|
18
|
-
const context = $state({ value: undefined });
|
|
19
|
-
return setContext(SINGLE_SELECTION_KEY, nonReactive ? {} : context);
|
|
20
|
-
}
|
|
21
|
-
|
|
22
|
-
/**
|
|
23
|
-
* @template T
|
|
24
|
-
* @param {SingleSelectionContext<T>} context
|
|
25
|
-
* @param {boolean} open
|
|
26
|
-
* @param {T=} value
|
|
27
|
-
* @returns {SingleSelectionContext<T>}
|
|
28
|
-
*/
|
|
29
|
-
function setSelected(context, open, value) {
|
|
30
|
-
if (Object.hasOwn(context, 'value')) {
|
|
31
|
-
if (open) context.value = value;
|
|
32
|
-
else if (context.value === value) context.value = undefined;
|
|
33
|
-
}
|
|
34
|
-
return context;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
/**
|
|
38
|
-
* @template T
|
|
39
|
-
* @param {(value: T) => void} callback
|
|
40
|
-
* @returns {(open: boolean, v?: T) => SingleSelectionContext<T>}
|
|
41
|
-
*/
|
|
42
|
-
export function useSingleSelection(callback) {
|
|
43
|
-
const context = getContext(SINGLE_SELECTION_KEY) ?? createSingleSelectionContext(false);
|
|
44
|
-
|
|
45
|
-
$effect(() => {
|
|
46
|
-
if (context.value !== undefined) callback(context.value);
|
|
47
|
-
});
|
|
48
|
-
return (open, v) => setSelected(context, open, v);
|
|
1
|
+
import { getContext, setContext } from "svelte";
|
|
2
|
+
|
|
3
|
+
/**
|
|
4
|
+
* @template T
|
|
5
|
+
* @typedef {Object} SingleSelectionContext
|
|
6
|
+
* @property {T=} value
|
|
7
|
+
*/
|
|
8
|
+
|
|
9
|
+
/** @type {symbol} */
|
|
10
|
+
const SINGLE_SELECTION_KEY = Symbol("singleton");
|
|
11
|
+
|
|
12
|
+
/**
|
|
13
|
+
* @template T
|
|
14
|
+
* @param {boolean} [nonReactive=false] - use a non-reactive placeholder to allow multiple selection and keep context shallow
|
|
15
|
+
* @returns {SingleSelectionContext<T>}
|
|
16
|
+
*/
|
|
17
|
+
export function createSingleSelectionContext(nonReactive = false) {
|
|
18
|
+
const context = $state({ value: undefined });
|
|
19
|
+
return setContext(SINGLE_SELECTION_KEY, nonReactive ? {} : context);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
/**
|
|
23
|
+
* @template T
|
|
24
|
+
* @param {SingleSelectionContext<T>} context
|
|
25
|
+
* @param {boolean} open
|
|
26
|
+
* @param {T=} value
|
|
27
|
+
* @returns {SingleSelectionContext<T>}
|
|
28
|
+
*/
|
|
29
|
+
function setSelected(context, open, value) {
|
|
30
|
+
if (Object.hasOwn(context, 'value')) {
|
|
31
|
+
if (open) context.value = value;
|
|
32
|
+
else if (context.value === value) context.value = undefined;
|
|
33
|
+
}
|
|
34
|
+
return context;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
/**
|
|
38
|
+
* @template T
|
|
39
|
+
* @param {(value: T) => void} callback
|
|
40
|
+
* @returns {(open: boolean, v?: T) => SingleSelectionContext<T>}
|
|
41
|
+
*/
|
|
42
|
+
export function useSingleSelection(callback) {
|
|
43
|
+
const context = getContext(SINGLE_SELECTION_KEY) ?? createSingleSelectionContext(false);
|
|
44
|
+
|
|
45
|
+
$effect(() => {
|
|
46
|
+
if (context.value !== undefined) callback(context.value);
|
|
47
|
+
});
|
|
48
|
+
return (open, v) => setSelected(context, open, v);
|
|
49
49
|
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
let { url, videoId } = $props()
|
|
3
|
-
</script>
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
<div>
|
|
7
|
-
<div class="bg-red-100 p-4 m-4">
|
|
8
|
-
{url}
|
|
9
|
-
|
|
10
|
-
</div>
|
|
11
|
-
<br/>
|
|
12
|
-
{videoId}
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
let { url, videoId } = $props()
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
|
|
6
|
+
<div>
|
|
7
|
+
<div class="bg-red-100 p-4 m-4">
|
|
8
|
+
{url}
|
|
9
|
+
|
|
10
|
+
</div>
|
|
11
|
+
<br/>
|
|
12
|
+
{videoId}
|
|
13
13
|
</div>
|