@getmicdrop/svelte-components 2.6.0 → 2.6.3

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 (152) hide show
  1. package/dist/__LIB_STORES__.js +2 -30
  2. package/dist/components/Badges/Badge.svelte +17 -268
  3. package/dist/components/Badges/Badge.svelte.d.ts +2 -18
  4. package/dist/components/Badges/Badge.svelte.d.ts.map +1 -1
  5. package/dist/components/Breadcrumb/Breadcrumb.svelte +36 -65
  6. package/dist/components/Breadcrumb/Breadcrumb.svelte.d.ts +2 -16
  7. package/dist/components/Breadcrumb/Breadcrumb.svelte.d.ts.map +1 -1
  8. package/dist/components/Button/Button.svelte +3 -136
  9. package/dist/components/Button/Button.svelte.d.ts +0 -2
  10. package/dist/components/Button/Button.svelte.d.ts.map +1 -1
  11. package/dist/components/Calendar/Calendar.spec.d.ts +2 -0
  12. package/dist/components/Calendar/Calendar.spec.d.ts.map +1 -0
  13. package/dist/components/Calendar/Calendar.spec.js +131 -0
  14. package/dist/components/Calendar/Calendar.svelte +1115 -0
  15. package/dist/components/Calendar/{MiniMonthCalendar.svelte.d.ts → Calendar.svelte.d.ts} +21 -20
  16. package/dist/components/Calendar/Calendar.svelte.d.ts.map +1 -0
  17. package/dist/components/Calendar/QuarterView.spec.d.ts +2 -0
  18. package/dist/components/Calendar/QuarterView.spec.d.ts.map +1 -0
  19. package/dist/components/Calendar/QuarterView.spec.js +394 -0
  20. package/dist/components/Calendar/QuarterView.stories.svelte +134 -0
  21. package/dist/components/{ShowTimeCard/ShowTimeCard.svelte.d.ts → Calendar/QuarterView.stories.svelte.d.ts} +21 -17
  22. package/dist/components/Calendar/QuarterView.stories.svelte.d.ts.map +1 -0
  23. package/dist/components/Calendar/QuarterView.svelte +736 -0
  24. package/dist/components/{FAQs/FAQs.svelte.d.ts → Calendar/QuarterView.svelte.d.ts} +10 -10
  25. package/dist/components/{Skeleton/Skeleton.svelte.d.ts.map → Calendar/QuarterView.svelte.d.ts.map} +1 -1
  26. package/dist/components/Card.svelte +2 -2
  27. package/dist/components/Card.svelte.d.ts +2 -2
  28. package/dist/components/Card.svelte.d.ts.map +1 -1
  29. package/dist/components/DarkModeToggle.svelte +0 -2
  30. package/dist/components/DarkModeToggle.svelte.d.ts.map +1 -1
  31. package/dist/components/ErrorDisplay.svelte.d.ts +2 -2
  32. package/dist/components/Input/Input.svelte +12 -105
  33. package/dist/components/Input/Input.svelte.d.ts +12 -28
  34. package/dist/components/Input/Input.svelte.d.ts.map +1 -1
  35. package/dist/components/Input/MultiSelect.svelte +5 -4
  36. package/dist/components/Input/MultiSelect.svelte.d.ts +8 -8
  37. package/dist/components/Input/MultiSelect.svelte.d.ts.map +1 -1
  38. package/dist/components/Input/OTPInput.svelte +1 -1
  39. package/dist/components/Input/Select.svelte +5 -4
  40. package/dist/components/Input/Select.svelte.d.ts +8 -8
  41. package/dist/components/Input/Select.svelte.d.ts.map +1 -1
  42. package/dist/components/Layout/Header.svelte +4 -14
  43. package/dist/components/Modal/ConfirmationModal.svelte +17 -69
  44. package/dist/components/Modal/ConfirmationModal.svelte.d.ts +0 -22
  45. package/dist/components/Modal/ConfirmationModal.svelte.d.ts.map +1 -1
  46. package/dist/components/Modal/Modal.svelte +8 -34
  47. package/dist/components/Modal/Modal.svelte.d.ts +0 -2
  48. package/dist/components/Modal/Modal.svelte.d.ts.map +1 -1
  49. package/dist/components/PasswordStrengthIndicator/PasswordStrengthIndicator.svelte.d.ts +2 -2
  50. package/dist/components/Spinner/Spinner.svelte +17 -73
  51. package/dist/components/Spinner/Spinner.svelte.d.ts +3 -5
  52. package/dist/components/Spinner/Spinner.svelte.d.ts.map +1 -1
  53. package/dist/components/pages/performers/AvailabilityCalendarModal.svelte +632 -0
  54. package/dist/components/{PublicCard/PublicCard.svelte.d.ts → pages/performers/AvailabilityCalendarModal.svelte.d.ts} +14 -12
  55. package/dist/components/pages/performers/AvailabilityCalendarModal.svelte.d.ts.map +1 -0
  56. package/dist/components/pages/performers/ShowDetails.svelte.d.ts +4 -4
  57. package/dist/components/pages/performers/ShowItemCard.svelte.d.ts +8 -8
  58. package/dist/components/pages/performers/SwitchOption.svelte.d.ts +2 -2
  59. package/dist/components/pages/performers/VenueInfo.svelte.d.ts +2 -2
  60. package/dist/components/pages/performers/VenueItemCard.svelte +2 -2
  61. package/dist/components/pages/performers/VenueItemCard.svelte.d.ts +4 -4
  62. package/dist/components/pages/profile/profile-form.svelte +1 -1
  63. package/dist/components/pages/settings/tabs/CustomImageDropzone.svelte.d.ts +2 -2
  64. package/dist/components/pages/shows/TabNavigation.svelte +8 -7
  65. package/dist/constants/formOptions.d.ts +2 -5
  66. package/dist/constants/formOptions.d.ts.map +1 -1
  67. package/dist/constants/formOptions.js +1 -2
  68. package/dist/index.d.ts +4 -28
  69. package/dist/index.js +29 -33
  70. package/dist/services/EventService.js +75 -75
  71. package/dist/services/EventService.spec.js +217 -217
  72. package/dist/services/ShowService.spec.js +342 -342
  73. package/package.json +160 -160
  74. package/dist/components/AboutShow/AboutShow.svelte +0 -278
  75. package/dist/components/AboutShow/AboutShow.svelte.d.ts +0 -43
  76. package/dist/components/AboutShow/AboutShow.svelte.d.ts.map +0 -1
  77. package/dist/components/Accordion/Accordion.svelte +0 -44
  78. package/dist/components/Accordion/Accordion.svelte.d.ts +0 -42
  79. package/dist/components/Accordion/Accordion.svelte.d.ts.map +0 -1
  80. package/dist/components/Accordion/AccordionItem.svelte +0 -141
  81. package/dist/components/Accordion/AccordionItem.svelte.d.ts +0 -50
  82. package/dist/components/Accordion/AccordionItem.svelte.d.ts.map +0 -1
  83. package/dist/components/Calendar/MiniMonthCalendar.svelte +0 -1446
  84. package/dist/components/Calendar/MiniMonthCalendar.svelte.d.ts.map +0 -1
  85. package/dist/components/Checkbox/Checkbox.svelte +0 -90
  86. package/dist/components/Checkbox/Checkbox.svelte.d.ts +0 -64
  87. package/dist/components/Checkbox/Checkbox.svelte.d.ts.map +0 -1
  88. package/dist/components/Drawer/Drawer.svelte +0 -207
  89. package/dist/components/Drawer/Drawer.svelte.d.ts +0 -74
  90. package/dist/components/Drawer/Drawer.svelte.d.ts.map +0 -1
  91. package/dist/components/Dropdown/Dropdown.svelte +0 -193
  92. package/dist/components/Dropdown/Dropdown.svelte.d.ts +0 -50
  93. package/dist/components/Dropdown/Dropdown.svelte.d.ts.map +0 -1
  94. package/dist/components/Dropdown/DropdownItem.svelte +0 -111
  95. package/dist/components/Dropdown/DropdownItem.svelte.d.ts +0 -48
  96. package/dist/components/Dropdown/DropdownItem.svelte.d.ts.map +0 -1
  97. package/dist/components/Dropdown/SelectDropdown.svelte +0 -301
  98. package/dist/components/Dropdown/SelectDropdown.svelte.d.ts +0 -51
  99. package/dist/components/Dropdown/SelectDropdown.svelte.d.ts.map +0 -1
  100. package/dist/components/EmptyState/EmptyState.svelte +0 -80
  101. package/dist/components/EmptyState/EmptyState.svelte.d.ts +0 -37
  102. package/dist/components/EmptyState/EmptyState.svelte.d.ts.map +0 -1
  103. package/dist/components/FAQs/FAQs.svelte +0 -49
  104. package/dist/components/FAQs/FAQs.svelte.d.ts.map +0 -1
  105. package/dist/components/Input/Search.svelte +0 -173
  106. package/dist/components/Input/Search.svelte.d.ts +0 -68
  107. package/dist/components/Input/Search.svelte.d.ts.map +0 -1
  108. package/dist/components/Input/Textarea.svelte +0 -160
  109. package/dist/components/Input/Textarea.svelte.d.ts +0 -69
  110. package/dist/components/Input/Textarea.svelte.d.ts.map +0 -1
  111. package/dist/components/Label/Label.svelte +0 -60
  112. package/dist/components/Label/Label.svelte.d.ts +0 -48
  113. package/dist/components/Label/Label.svelte.d.ts.map +0 -1
  114. package/dist/components/Layout/PageLayout.svelte +0 -64
  115. package/dist/components/Layout/PageLayout.svelte.d.ts +0 -58
  116. package/dist/components/Layout/PageLayout.svelte.d.ts.map +0 -1
  117. package/dist/components/Modal/InputModal.svelte +0 -180
  118. package/dist/components/Modal/InputModal.svelte.d.ts +0 -77
  119. package/dist/components/Modal/InputModal.svelte.d.ts.map +0 -1
  120. package/dist/components/Modal/StatusModal.svelte +0 -221
  121. package/dist/components/Modal/StatusModal.svelte.d.ts +0 -59
  122. package/dist/components/Modal/StatusModal.svelte.d.ts.map +0 -1
  123. package/dist/components/MonthSwitcher/MonthSwitcher.svelte +0 -206
  124. package/dist/components/MonthSwitcher/MonthSwitcher.svelte.d.ts +0 -37
  125. package/dist/components/MonthSwitcher/MonthSwitcher.svelte.d.ts.map +0 -1
  126. package/dist/components/OrderSummary/OrderSummary.svelte +0 -553
  127. package/dist/components/OrderSummary/OrderSummary.svelte.d.ts +0 -65
  128. package/dist/components/OrderSummary/OrderSummary.svelte.d.ts.map +0 -1
  129. package/dist/components/Pagination/Pagination.svelte +0 -197
  130. package/dist/components/Pagination/Pagination.svelte.d.ts +0 -53
  131. package/dist/components/Pagination/Pagination.svelte.d.ts.map +0 -1
  132. package/dist/components/PublicCard/PublicCard.svelte +0 -267
  133. package/dist/components/PublicCard/PublicCard.svelte.d.ts.map +0 -1
  134. package/dist/components/Radio/Radio.svelte +0 -119
  135. package/dist/components/Radio/Radio.svelte.d.ts +0 -54
  136. package/dist/components/Radio/Radio.svelte.d.ts.map +0 -1
  137. package/dist/components/ShowCard/ShowCard.svelte +0 -240
  138. package/dist/components/ShowCard/ShowCard.svelte.d.ts +0 -39
  139. package/dist/components/ShowCard/ShowCard.svelte.d.ts.map +0 -1
  140. package/dist/components/ShowTimeCard/ShowTimeCard.svelte +0 -92
  141. package/dist/components/ShowTimeCard/ShowTimeCard.svelte.d.ts.map +0 -1
  142. package/dist/components/Skeleton/Skeleton.svelte +0 -68
  143. package/dist/components/Skeleton/Skeleton.svelte.d.ts +0 -37
  144. package/dist/components/Tabs/TabItem.svelte +0 -39
  145. package/dist/components/Tabs/TabItem.svelte.d.ts +0 -52
  146. package/dist/components/Tabs/TabItem.svelte.d.ts.map +0 -1
  147. package/dist/components/Tabs/Tabs.svelte +0 -181
  148. package/dist/components/Tabs/Tabs.svelte.d.ts +0 -46
  149. package/dist/components/Tabs/Tabs.svelte.d.ts.map +0 -1
  150. package/dist/components/Typography/Typography.svelte +0 -50
  151. package/dist/components/Typography/Typography.svelte.d.ts +0 -48
  152. package/dist/components/Typography/Typography.svelte.d.ts.map +0 -1
@@ -1 +0,0 @@
1
- {"version":3,"file":"MiniMonthCalendar.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Calendar/MiniMonthCalendar.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAwxBA;;;;;;;;;;;;;;;;;mBAAwR;6CAT3O,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
@@ -1,90 +0,0 @@
1
- <script>
2
- import { createEventDispatcher } from "svelte";
3
-
4
- /** @type {boolean} Whether the checkbox is checked */
5
- export let checked = false;
6
- /** @type {string} The value attribute */
7
- export let value = "";
8
- /** @type {string} Name attribute for form submission */
9
- export let name = "";
10
- /** @type {boolean} Whether the checkbox is disabled */
11
- export let disabled = false;
12
- /** @type {string} Color variant */
13
- export let color = "primary";
14
- /** @type {string} Additional CSS classes */
15
- let className = "";
16
- export { className as class };
17
-
18
- const dispatch = createEventDispatcher();
19
-
20
- function handleChange(event) {
21
- checked = event.target.checked;
22
- dispatch("change", { checked, value });
23
- }
24
-
25
- // Color classes matching flowbite-svelte
26
- const colorClasses = {
27
- primary: "text-primary-600 focus:ring-primary-500 dark:focus:ring-primary-600",
28
- red: "text-red-600 focus:ring-red-500 dark:focus:ring-red-600",
29
- green: "text-green-600 focus:ring-green-500 dark:focus:ring-green-600",
30
- blue: "text-blue-600 focus:ring-blue-500 dark:focus:ring-blue-600"
31
- };
32
-
33
- $: inputClasses = [
34
- "w-4 h-4 rounded",
35
- "bg-gray-100 border-gray-300",
36
- "dark:bg-gray-700 dark:border-gray-600 dark:ring-offset-gray-800",
37
- "focus:ring-2",
38
- colorClasses[color] || colorClasses.primary,
39
- disabled ? "cursor-not-allowed opacity-50" : "cursor-pointer"
40
- ].join(" ");
41
- </script>
42
-
43
- <label class="checkbox {className}" class:checkbox--disabled={disabled}>
44
- <input
45
- type="checkbox"
46
- {name}
47
- {value}
48
- {disabled}
49
- bind:checked
50
- on:change={handleChange}
51
- on:click
52
- on:focus
53
- on:blur
54
- on:keydown
55
- on:keyup
56
- class={inputClasses}
57
- />
58
- {#if $$slots.default}
59
- <span class="checkbox__label">
60
- <slot />
61
- </span>
62
- {/if}
63
- </label>
64
-
65
- <style>
66
- .checkbox {
67
- display: inline-flex;
68
- align-items: center;
69
- gap: 0.5rem;
70
- cursor: pointer;
71
- -webkit-user-select: none;
72
- -moz-user-select: none;
73
- user-select: none;
74
- }
75
-
76
- .checkbox--disabled {
77
- cursor: not-allowed;
78
- }
79
-
80
- .checkbox__label {
81
- font-size: 0.875rem;
82
- line-height: 1.5;
83
- color: var(--text-primary, #1f2937);
84
- }
85
-
86
- :global(.dark) .checkbox__label,
87
- :global(.micdrop.dark) .checkbox__label {
88
- color: #f3f4f6;
89
- }
90
- </style>
@@ -1,64 +0,0 @@
1
- export default Checkbox;
2
- type Checkbox = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
3
- class?: string | undefined;
4
- color?: string | undefined;
5
- disabled?: boolean | undefined;
6
- checked?: boolean | undefined;
7
- value?: string | undefined;
8
- name?: string | undefined;
9
- }, {
10
- default: {};
11
- }>, {
12
- click: PointerEvent;
13
- focus: FocusEvent;
14
- blur: FocusEvent;
15
- keydown: KeyboardEvent;
16
- keyup: KeyboardEvent;
17
- change: CustomEvent<any>;
18
- } & {
19
- [evt: string]: CustomEvent<any>;
20
- }, {
21
- default: {};
22
- }> & {
23
- $$bindings?: string | undefined;
24
- };
25
- declare const Checkbox: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
26
- class?: string | undefined;
27
- color?: string | undefined;
28
- disabled?: boolean | undefined;
29
- checked?: boolean | undefined;
30
- value?: string | undefined;
31
- name?: string | undefined;
32
- }, {
33
- default: {};
34
- }>, {
35
- click: PointerEvent;
36
- focus: FocusEvent;
37
- blur: FocusEvent;
38
- keydown: KeyboardEvent;
39
- keyup: KeyboardEvent;
40
- change: CustomEvent<any>;
41
- } & {
42
- [evt: string]: CustomEvent<any>;
43
- }, {
44
- default: {};
45
- }, {}, string>;
46
- type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
47
- default: any;
48
- } ? Props extends Record<string, never> ? any : {
49
- children?: any;
50
- } : {});
51
- interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
52
- new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
53
- $$bindings?: Bindings;
54
- } & Exports;
55
- (internal: unknown, props: Props & {
56
- $$events?: Events;
57
- $$slots?: Slots;
58
- }): Exports & {
59
- $set?: any;
60
- $on?: any;
61
- };
62
- z_$$bindings?: Bindings;
63
- }
64
- //# sourceMappingURL=Checkbox.svelte.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Checkbox.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Checkbox/Checkbox.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;AAgFA;;;;;;;;;;;;;;;;;;;;eAAiL;sCAT3I,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
@@ -1,207 +0,0 @@
1
- <script>
2
- import { createEventDispatcher, onDestroy } from "svelte";
3
- import { fly, fade } from "svelte/transition";
4
- import { cubicOut } from "svelte/easing";
5
-
6
- /** @type {boolean} Whether the drawer is visible */
7
- export let show = false;
8
- /** @type {boolean} Flowbite-style hidden prop (inverse of show) */
9
- export let hidden = true;
10
- /** @type {string} Optional title for the drawer header */
11
- export let title = "";
12
- /** @type {'left' | 'right' | 'top' | 'bottom'} Which side the drawer slides from */
13
- export let placement = "left";
14
- /** @type {string} Width of the drawer (for left/right placement) */
15
- export let width = "320px";
16
- /** @type {string} Height of the drawer (for top/bottom placement) */
17
- export let height = "auto";
18
- /** @type {number} Transition duration in ms */
19
- export let duration = 200;
20
- /** @type {boolean} Whether clicking the backdrop closes the drawer */
21
- export let closeOnBackdropClick = true;
22
- /** @type {boolean} Whether pressing Escape closes the drawer */
23
- export let closeOnEscape = true;
24
- /** @type {string} Optional id for the drawer element */
25
- export let id = "";
26
- /** @type {object|undefined} Custom transition params (flowbite API) */
27
- export let transitionParams = undefined;
28
-
29
- const dispatch = createEventDispatcher();
30
-
31
- // Support both show and hidden props (flowbite uses hidden)
32
- $: isVisible = show || !hidden;
33
-
34
- function close() {
35
- hidden = true;
36
- show = false;
37
- dispatch("close");
38
- }
39
-
40
- function handleBackdropClick(e) {
41
- if (closeOnBackdropClick && e.target === e.currentTarget) {
42
- close();
43
- }
44
- }
45
-
46
- function handleKeydown(e) {
47
- if (closeOnEscape && e.key === "Escape" && isVisible) {
48
- close();
49
- }
50
- }
51
-
52
- // Calculate transition params based on placement (use custom if provided)
53
- $: computedTransitionParams = transitionParams || (() => {
54
- switch (placement) {
55
- case "left":
56
- return { x: -320, duration, easing: cubicOut };
57
- case "right":
58
- return { x: 320, duration, easing: cubicOut };
59
- case "top":
60
- return { y: -320, duration, easing: cubicOut };
61
- case "bottom":
62
- return { y: 320, duration, easing: cubicOut };
63
- default:
64
- return { x: -320, duration, easing: cubicOut };
65
- }
66
- })();
67
-
68
- // Lock body scroll when drawer is open
69
- $: if (typeof document !== "undefined") {
70
- if (isVisible) {
71
- document.body.style.overflow = "hidden";
72
- } else {
73
- document.body.style.overflow = "";
74
- }
75
- }
76
-
77
- onDestroy(() => {
78
- if (typeof document !== "undefined") {
79
- document.body.style.overflow = "";
80
- }
81
- });
82
- </script>
83
-
84
- <svelte:window on:keydown={handleKeydown} />
85
-
86
- {#if isVisible}
87
- <!-- svelte-ignore a11y-click-events-have-key-events -->
88
- <!-- svelte-ignore a11y-no-static-element-interactions -->
89
- <div
90
- class="drawer-backdrop"
91
- on:click={handleBackdropClick}
92
- transition:fade={{ duration: 150 }}
93
- >
94
- <div
95
- {id}
96
- class="drawer drawer--{placement}"
97
- style="--drawer-width: {width}; --drawer-height: {height};"
98
- on:click|stopPropagation
99
- transition:fly={computedTransitionParams}
100
- >
101
- <!-- Optional header with title -->
102
- {#if title || $$slots.header}
103
- <div class="drawer__header">
104
- {#if $$slots.header}
105
- <slot name="header" />
106
- {:else}
107
- <h3 class="drawer__title">{title}</h3>
108
- {/if}
109
- </div>
110
- {/if}
111
-
112
- <!-- Content slot -->
113
- <div class="drawer__content">
114
- <slot />
115
- </div>
116
-
117
- <!-- Actions slot (optional) -->
118
- {#if $$slots.actions}
119
- <div class="drawer__actions">
120
- <slot name="actions" />
121
- </div>
122
- {/if}
123
- </div>
124
- </div>
125
- {/if}
126
-
127
- <style>
128
- .drawer-backdrop {
129
- position: fixed;
130
- inset: 0;
131
- background-color: rgba(0, 0, 0, 0.5);
132
- z-index: var(--z-modal, 50);
133
- display: flex;
134
- touch-action: none;
135
- }
136
-
137
- .drawer {
138
- position: absolute;
139
- background-color: hsl(var(--BG-Primary, 0 0% 100%));
140
- box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
141
- display: flex;
142
- flex-direction: column;
143
- overflow: hidden;
144
- }
145
-
146
- /* Placement variants */
147
- .drawer--left {
148
- left: 0;
149
- top: 0;
150
- bottom: 0;
151
- width: var(--drawer-width, 320px);
152
- max-width: 100vw;
153
- }
154
-
155
- .drawer--right {
156
- right: 0;
157
- top: 0;
158
- bottom: 0;
159
- width: var(--drawer-width, 320px);
160
- max-width: 100vw;
161
- }
162
-
163
- .drawer--top {
164
- top: 0;
165
- left: 0;
166
- right: 0;
167
- height: var(--drawer-height, auto);
168
- max-height: 100vh;
169
- }
170
-
171
- .drawer--bottom {
172
- bottom: 0;
173
- left: 0;
174
- right: 0;
175
- height: var(--drawer-height, auto);
176
- max-height: 100vh;
177
- }
178
-
179
- .drawer__header {
180
- padding: 1rem 1.5rem;
181
- border-bottom: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
182
- flex-shrink: 0;
183
- }
184
-
185
- .drawer__title {
186
- font-size: 1.125rem;
187
- font-weight: 600;
188
- color: hsl(var(--Text-Primary, 220 13% 13%));
189
- margin: 0;
190
- }
191
-
192
- .drawer__content {
193
- flex: 1;
194
- overflow-y: auto;
195
- overscroll-behavior: contain;
196
- -webkit-overflow-scrolling: touch;
197
- }
198
-
199
- .drawer__actions {
200
- padding: 1rem 1.5rem;
201
- border-top: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
202
- flex-shrink: 0;
203
- display: flex;
204
- flex-direction: column;
205
- gap: 0.75rem;
206
- }
207
- </style>
@@ -1,74 +0,0 @@
1
- export default Drawer;
2
- type Drawer = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
3
- duration?: number | undefined;
4
- title?: string | undefined;
5
- show?: boolean | undefined;
6
- hidden?: boolean | undefined;
7
- placement?: "left" | "right" | "top" | "bottom" | undefined;
8
- width?: string | undefined;
9
- height?: string | undefined;
10
- closeOnBackdropClick?: boolean | undefined;
11
- closeOnEscape?: boolean | undefined;
12
- id?: string | undefined;
13
- transitionParams?: object | undefined;
14
- }, {
15
- header: {};
16
- default: {};
17
- actions: {};
18
- }>, {
19
- click: PointerEvent;
20
- close: CustomEvent<any>;
21
- } & {
22
- [evt: string]: CustomEvent<any>;
23
- }, {
24
- header: {};
25
- default: {};
26
- actions: {};
27
- }> & {
28
- $$bindings?: string | undefined;
29
- };
30
- declare const Drawer: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
31
- duration?: number | undefined;
32
- title?: string | undefined;
33
- show?: boolean | undefined;
34
- hidden?: boolean | undefined;
35
- placement?: "left" | "right" | "top" | "bottom" | undefined;
36
- width?: string | undefined;
37
- height?: string | undefined;
38
- closeOnBackdropClick?: boolean | undefined;
39
- closeOnEscape?: boolean | undefined;
40
- id?: string | undefined;
41
- transitionParams?: object | undefined;
42
- }, {
43
- header: {};
44
- default: {};
45
- actions: {};
46
- }>, {
47
- click: PointerEvent;
48
- close: CustomEvent<any>;
49
- } & {
50
- [evt: string]: CustomEvent<any>;
51
- }, {
52
- header: {};
53
- default: {};
54
- actions: {};
55
- }, {}, string>;
56
- type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
57
- default: any;
58
- } ? Props extends Record<string, never> ? any : {
59
- children?: any;
60
- } : {});
61
- interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
62
- new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
63
- $$bindings?: Bindings;
64
- } & Exports;
65
- (internal: unknown, props: Props & {
66
- $$events?: Events;
67
- $$slots?: Slots;
68
- }): Exports & {
69
- $set?: any;
70
- $on?: any;
71
- };
72
- z_$$bindings?: Bindings;
73
- }
74
- //# sourceMappingURL=Drawer.svelte.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Drawer.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Drawer/Drawer.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwJA;;;;;;;;;;;uBAfW,MAAM,GAAC,SAAS;;;;;;;;;;;;;;eAe+N;sCATpN,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}
@@ -1,193 +0,0 @@
1
- <script>
2
- import { createEventDispatcher, onMount, onDestroy, tick } from "svelte";
3
-
4
- /** @type {boolean} Whether the dropdown is open */
5
- export let open = false;
6
- /** @type {string} Current active URL for highlighting (flowbite API) */
7
- export let activeUrl = "";
8
- /** @type {'bottom-start' | 'bottom-end' | 'bottom' | 'top-start' | 'top-end' | 'top'} Placement */
9
- export let placement = "bottom-start";
10
- /** @type {string} Additional CSS classes */
11
- let className = "";
12
- export { className as class };
13
- /** @type {string} Accessible label for the dropdown menu */
14
- export let ariaLabel = "Menu";
15
-
16
- const dispatch = createEventDispatcher();
17
-
18
- let dropdownRef;
19
- let focusedIndex = -1;
20
- let menuItems = [];
21
-
22
- // Update menu items when dropdown opens
23
- async function updateMenuItems() {
24
- await tick();
25
- if (dropdownRef) {
26
- menuItems = Array.from(dropdownRef.querySelectorAll('[role="menuitem"]:not([disabled])'));
27
- }
28
- }
29
-
30
- // Focus a specific menu item by index
31
- function focusItem(index) {
32
- if (menuItems.length === 0) return;
33
- if (index < 0) index = menuItems.length - 1;
34
- if (index >= menuItems.length) index = 0;
35
- focusedIndex = index;
36
- menuItems[focusedIndex]?.focus();
37
- }
38
-
39
- // Get trigger element (previous sibling)
40
- function getTriggerElement() {
41
- const parent = dropdownRef?.parentElement;
42
- if (parent) {
43
- const siblings = Array.from(parent.children);
44
- const dropdownIndex = siblings.indexOf(dropdownRef);
45
- if (dropdownIndex > 0) {
46
- return siblings[dropdownIndex - 1];
47
- }
48
- }
49
- return null;
50
- }
51
-
52
- function handleClickOutside(event) {
53
- if (dropdownRef && !dropdownRef.contains(event.target)) {
54
- const trigger = getTriggerElement();
55
- if (trigger?.contains(event.target)) {
56
- return; // Let the trigger handle toggling
57
- }
58
- open = false;
59
- }
60
- }
61
-
62
- function handleKeydown(event) {
63
- if (!open) return;
64
-
65
- // Only handle if event originated from within this dropdown or its trigger
66
- const trigger = getTriggerElement();
67
- if (!dropdownRef?.contains(event.target) && !trigger?.contains(event.target)) {
68
- return;
69
- }
70
-
71
- switch (event.key) {
72
- case "Escape":
73
- open = false;
74
- trigger?.focus();
75
- event.preventDefault();
76
- break;
77
- case "ArrowDown":
78
- focusItem(focusedIndex + 1);
79
- event.preventDefault();
80
- break;
81
- case "ArrowUp":
82
- focusItem(focusedIndex - 1);
83
- event.preventDefault();
84
- break;
85
- case "Home":
86
- focusItem(0);
87
- event.preventDefault();
88
- break;
89
- case "End":
90
- focusItem(menuItems.length - 1);
91
- event.preventDefault();
92
- break;
93
- case "Tab":
94
- open = false;
95
- break;
96
- }
97
- }
98
-
99
- // Watch for open state changes
100
- $: if (open) {
101
- focusedIndex = -1;
102
- updateMenuItems();
103
- }
104
-
105
- onMount(() => {
106
- document.addEventListener("click", handleClickOutside, true);
107
- document.addEventListener("keydown", handleKeydown);
108
- });
109
-
110
- onDestroy(() => {
111
- if (typeof document !== "undefined") {
112
- document.removeEventListener("click", handleClickOutside, true);
113
- document.removeEventListener("keydown", handleKeydown);
114
- }
115
- });
116
-
117
- // Provide context for DropdownItem
118
- import { setContext } from "svelte";
119
- setContext("dropdown", {
120
- activeUrl,
121
- close: () => { open = false; }
122
- });
123
- </script>
124
-
125
- {#if open}
126
- <div
127
- bind:this={dropdownRef}
128
- class="dropdown dropdown--{placement} {className}"
129
- role="menu"
130
- aria-label={ariaLabel}
131
- {...$$restProps}
132
- >
133
- <slot />
134
- </div>
135
- {/if}
136
-
137
- <style>
138
- .dropdown {
139
- position: absolute;
140
- z-index: 50;
141
- min-width: 10rem;
142
- background-color: hsl(var(--BG-Primary, 0 0% 100%));
143
- border: 1px solid hsl(var(--Stroke-Primary, 220 13% 85%));
144
- border-radius: 0.5rem;
145
- box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
146
- padding: 0.25rem 0;
147
- margin-top: 0.25rem;
148
- }
149
-
150
- .dropdown--bottom-start {
151
- top: 100%;
152
- left: 0;
153
- }
154
-
155
- .dropdown--bottom-end {
156
- top: 100%;
157
- right: 0;
158
- }
159
-
160
- .dropdown--bottom {
161
- top: 100%;
162
- left: 50%;
163
- transform: translateX(-50%);
164
- }
165
-
166
- .dropdown--top-start {
167
- bottom: 100%;
168
- left: 0;
169
- margin-top: 0;
170
- margin-bottom: 0.25rem;
171
- }
172
-
173
- .dropdown--top-end {
174
- bottom: 100%;
175
- right: 0;
176
- margin-top: 0;
177
- margin-bottom: 0.25rem;
178
- }
179
-
180
- .dropdown--top {
181
- bottom: 100%;
182
- left: 50%;
183
- transform: translateX(-50%);
184
- margin-top: 0;
185
- margin-bottom: 0.25rem;
186
- }
187
-
188
- /* Dark mode */
189
- :global(.dark) .dropdown {
190
- background-color: hsl(var(--BG-Primary, 220 13% 15%));
191
- border-color: hsl(var(--Stroke-Primary, 220 13% 30%));
192
- }
193
- </style>
@@ -1,50 +0,0 @@
1
- export default Dropdown;
2
- type Dropdown = SvelteComponent<$$__sveltets_2_PropsWithChildren<{
3
- [x: string]: any;
4
- class?: string | undefined;
5
- open?: boolean | undefined;
6
- placement?: "top" | "bottom" | "bottom-start" | "bottom-end" | "top-start" | "top-end" | undefined;
7
- activeUrl?: string | undefined;
8
- ariaLabel?: string | undefined;
9
- }, {
10
- default: {};
11
- }>, {
12
- [evt: string]: CustomEvent<any>;
13
- }, {
14
- default: {};
15
- }> & {
16
- $$bindings?: string | undefined;
17
- };
18
- declare const Dropdown: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<{
19
- [x: string]: any;
20
- class?: string | undefined;
21
- open?: boolean | undefined;
22
- placement?: "top" | "bottom" | "bottom-start" | "bottom-end" | "top-start" | "top-end" | undefined;
23
- activeUrl?: string | undefined;
24
- ariaLabel?: string | undefined;
25
- }, {
26
- default: {};
27
- }>, {
28
- [evt: string]: CustomEvent<any>;
29
- }, {
30
- default: {};
31
- }, {}, string>;
32
- type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
33
- default: any;
34
- } ? Props extends Record<string, never> ? any : {
35
- children?: any;
36
- } : {});
37
- interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
38
- new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
39
- $$bindings?: Bindings;
40
- } & Exports;
41
- (internal: unknown, props: Props & {
42
- $$events?: Events;
43
- $$slots?: Slots;
44
- }): Exports & {
45
- $set?: any;
46
- $on?: any;
47
- };
48
- z_$$bindings?: Bindings;
49
- }
50
- //# sourceMappingURL=Dropdown.svelte.d.ts.map
@@ -1 +0,0 @@
1
- {"version":3,"file":"Dropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/components/Dropdown/Dropdown.svelte.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;AAgKA;;;;;;;;;;;;;eAAyL;sCATnJ,KAAK,EAAE,KAAK;;;;;6CALL,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,WAAW,OAAO,SAAS,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,eAAe,QAAQ,CAAC"}