@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.
Files changed (103) hide show
  1. package/README.md +8 -8
  2. package/dist/baseEditor/index.svelte +32 -32
  3. package/dist/builders/filters/FilterBuilder.svelte +641 -641
  4. package/dist/forms/FormCheckbox/FormCheckbox.svelte +53 -53
  5. package/dist/forms/FormClEditor/ClEdito.svelte +68 -68
  6. package/dist/forms/FormDatepicker/FormDatepicker.svelte +159 -159
  7. package/dist/forms/FormFileUpload/FormFileUplad.svelte +134 -134
  8. package/dist/forms/FormInput/FormInput.svelte +87 -87
  9. package/dist/forms/FormRadio/FormRadio.svelte +53 -53
  10. package/dist/forms/FormSelect/FormSelect.svelte +88 -88
  11. package/dist/forms/FormTextarea/FormTextarea.svelte +78 -78
  12. package/dist/forms/button-toggle/ButtonToggle.svelte +119 -119
  13. package/dist/forms/button-toggle/CheckIcon.svelte +28 -28
  14. package/dist/forms/checkbox/Checkbox.svelte +82 -82
  15. package/dist/forms/checkbox/CheckboxButton.svelte +92 -92
  16. package/dist/forms/datepicker/Datepicker.svelte +707 -707
  17. package/dist/forms/form/Form.svelte +69 -69
  18. package/dist/forms/input/Input.svelte +363 -363
  19. package/dist/forms/label/Label.svelte +38 -38
  20. package/dist/forms/radio/Radio.svelte +48 -48
  21. package/dist/forms/radio/RadioButton.svelte +22 -22
  22. package/dist/forms/select/Select.svelte +56 -56
  23. package/dist/forms/textarea/Textarea.svelte +165 -165
  24. package/dist/forms/toggle/Toggle.svelte +70 -70
  25. package/dist/layout/Chat/CategorySelector.svelte +52 -52
  26. package/dist/layout/Chat/ChatEntry.svelte +246 -246
  27. package/dist/layout/Chat/ChatEntrySkeleton.svelte +81 -81
  28. package/dist/layout/Chat/ChatHeader.svelte +172 -172
  29. package/dist/layout/Chat/ChatInput.svelte +207 -207
  30. package/dist/layout/Chat/DraggableWindow.svelte +230 -230
  31. package/dist/layout/Chat/PreviewPage.svelte +182 -182
  32. package/dist/layout/Chat/RichText.svelte +216 -216
  33. package/dist/layout/ComponentCanvas/Canvas.svelte +40 -40
  34. package/dist/layout/ComponentCanvas/ComponentRenderer.svelte +85 -85
  35. package/dist/layout/TF/Content/Content.svelte +21 -21
  36. package/dist/layout/TF/Header/Header.svelte +166 -166
  37. package/dist/layout/TF/Sidebar/Sidebar.svelte +148 -148
  38. package/dist/layout/TF/Wrapper/Wrapper.svelte +17 -17
  39. package/dist/layout/mailing/MailPaginator.svelte +36 -36
  40. package/dist/layout/mailing/MailSidebar.svelte +39 -39
  41. package/dist/layout/mailing/MailToolBar.svelte +174 -174
  42. package/dist/layout/mailing/MailingContent.svelte +10 -10
  43. package/dist/layout/mailing/MailingHeader.svelte +55 -55
  44. package/dist/layout/mailing/MailingMessageCard.svelte +112 -112
  45. package/dist/layout/mailing/MailingMessageViewer.svelte +87 -87
  46. package/dist/layout/mailing/MailingModule.svelte +448 -448
  47. package/dist/styles/docs.css +615 -615
  48. package/dist/styles/tf-layout.css +185 -185
  49. package/dist/themes/ThemeProvider.svelte +20 -20
  50. package/dist/types/index.d.ts +2 -0
  51. package/dist/typography/heading/Heading.svelte +35 -35
  52. package/dist/ui/accordion/Accordion.svelte +49 -49
  53. package/dist/ui/accordion/AccordionItem.svelte +173 -173
  54. package/dist/ui/alert/Alert.svelte +83 -83
  55. package/dist/ui/alertDialog/AlertDialog.svelte +40 -40
  56. package/dist/ui/avatar/Avatar.svelte +77 -77
  57. package/dist/ui/box/Box.svelte +28 -28
  58. package/dist/ui/breadcrumb/Breadcrumb.svelte +39 -39
  59. package/dist/ui/buttons/ActionButton.svelte +234 -234
  60. package/dist/ui/buttons/Button.svelte +102 -102
  61. package/dist/ui/buttons/GradientButton.svelte +59 -59
  62. package/dist/ui/datatable/Datatable.svelte +525 -525
  63. package/dist/ui/drawer/Drawer.svelte +300 -300
  64. package/dist/ui/dropdown/Dropdown.svelte +36 -36
  65. package/dist/ui/dropdown/DropdownDivider.svelte +11 -11
  66. package/dist/ui/dropdown/DropdownGroup.svelte +14 -14
  67. package/dist/ui/dropdown/DropdownHeader.svelte +14 -14
  68. package/dist/ui/dropdown/DropdownItem.svelte +52 -52
  69. package/dist/ui/footer/Footer.svelte +15 -15
  70. package/dist/ui/footer/FooterBrand.svelte +37 -37
  71. package/dist/ui/footer/FooterCopyright.svelte +45 -45
  72. package/dist/ui/footer/FooterIcon.svelte +22 -22
  73. package/dist/ui/footer/FooterLink.svelte +33 -33
  74. package/dist/ui/footer/FooterLinkGroup.svelte +13 -13
  75. package/dist/ui/icons/IconifyIcon.svelte +7 -7
  76. package/dist/ui/indicator/Indicator.svelte +42 -42
  77. package/dist/ui/modal/Modal.svelte +265 -265
  78. package/dist/ui/notificationList/NotificationList.svelte +123 -123
  79. package/dist/ui/pageLoader/PageLoader.svelte +14 -14
  80. package/dist/ui/pageLoader/PageLoader2.svelte +99 -0
  81. package/dist/ui/pageLoader/PageLoader2.svelte.d.ts +24 -0
  82. package/dist/ui/pageLoader/index.d.ts +2 -1
  83. package/dist/ui/pageLoader/index.js +2 -1
  84. package/dist/ui/paginate/Paginate.svelte +96 -96
  85. package/dist/ui/speedDial/SpeedDial.svelte +77 -77
  86. package/dist/ui/speedDial/SpeedDialButton.svelte +75 -75
  87. package/dist/ui/speedDial/SpeedDialTrigger.svelte +79 -79
  88. package/dist/ui/tab/Tab.svelte +93 -67
  89. package/dist/ui/table/Table.svelte +396 -396
  90. package/dist/ui/tableLoader/TableLoader.svelte +24 -24
  91. package/dist/ui/toast/Toast.svelte +337 -337
  92. package/dist/ui/toast/Toast.svelte.d.ts +10 -10
  93. package/dist/ui/toolbar/Toolbar.svelte +59 -59
  94. package/dist/ui/toolbar/ToolbarButton.svelte +56 -56
  95. package/dist/ui/toolbar/ToolbarGroup.svelte +43 -43
  96. package/dist/ui/tooltip/Tooltip.svelte +51 -51
  97. package/dist/utils/Popper.svelte +257 -257
  98. package/dist/utils/closeButton/CloseButton.svelte +88 -88
  99. package/dist/utils/index.d.ts +2 -2
  100. package/dist/utils/index.js +3 -3
  101. package/dist/utils/singleSelection.svelte.js +48 -48
  102. package/dist/youtube/index.svelte +12 -12
  103. 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}
@@ -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): any;
20
- export declare function formatTicketHeader(x: any): 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;
@@ -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>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rkosafo/cai.components",
3
- "version": "0.0.78",
3
+ "version": "0.0.80",
4
4
  "files": [
5
5
  "dist",
6
6
  "!dist/**/*.test.*",