@ibobbyts/svelte-ui-utils 0.1.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/LICENSE +21 -0
- package/README.md +379 -0
- package/dist/data-table/BaseDataTable.svelte +322 -0
- package/dist/data-table/BaseDataTable.svelte.d.ts +49 -0
- package/dist/data-table/BaseDataTable.svelte.d.ts.map +1 -0
- package/dist/data-table/DataTable.svelte +104 -0
- package/dist/data-table/DataTable.svelte.d.ts +59 -0
- package/dist/data-table/DataTable.svelte.d.ts.map +1 -0
- package/dist/data-table/DateRangeFilter.svelte +174 -0
- package/dist/data-table/DateRangeFilter.svelte.d.ts +30 -0
- package/dist/data-table/DateRangeFilter.svelte.d.ts.map +1 -0
- package/dist/data-table/FilterControl.svelte +184 -0
- package/dist/data-table/FilterControl.svelte.d.ts +5 -0
- package/dist/data-table/FilterControl.svelte.d.ts.map +1 -0
- package/dist/data-table/FilterTable.svelte +25 -0
- package/dist/data-table/FilterTable.svelte.d.ts +24 -0
- package/dist/data-table/FilterTable.svelte.d.ts.map +1 -0
- package/dist/data-table/NumberRangeFilter.svelte +80 -0
- package/dist/data-table/NumberRangeFilter.svelte.d.ts +32 -0
- package/dist/data-table/NumberRangeFilter.svelte.d.ts.map +1 -0
- package/dist/data-table/filter.d.ts +23 -0
- package/dist/data-table/filter.d.ts.map +1 -0
- package/dist/data-table/filter.js +38 -0
- package/dist/data-table/index.d.ts +11 -0
- package/dist/data-table/index.d.ts.map +1 -0
- package/dist/data-table/index.js +8 -0
- package/dist/data-table/state.d.ts +11 -0
- package/dist/data-table/state.d.ts.map +1 -0
- package/dist/data-table/state.js +58 -0
- package/dist/data-table/types.d.ts +167 -0
- package/dist/data-table/types.d.ts.map +1 -0
- package/dist/data-table/types.js +1 -0
- package/dist/dropdown/Dropdown.svelte +159 -0
- package/dist/dropdown/Dropdown.svelte.d.ts +28 -0
- package/dist/dropdown/Dropdown.svelte.d.ts.map +1 -0
- package/dist/dropdown/index.d.ts +3 -0
- package/dist/dropdown/index.d.ts.map +1 -0
- package/dist/dropdown/index.js +1 -0
- package/dist/dropdown/types.d.ts +9 -0
- package/dist/dropdown/types.d.ts.map +1 -0
- package/dist/dropdown/types.js +1 -0
- package/dist/dropdown-search/DropdownSearch.svelte +312 -0
- package/dist/dropdown-search/DropdownSearch.svelte.d.ts +51 -0
- package/dist/dropdown-search/DropdownSearch.svelte.d.ts.map +1 -0
- package/dist/dropdown-search/index.d.ts +6 -0
- package/dist/dropdown-search/index.d.ts.map +1 -0
- package/dist/dropdown-search/index.js +3 -0
- package/dist/dropdown-search/state.d.ts +15 -0
- package/dist/dropdown-search/state.d.ts.map +1 -0
- package/dist/dropdown-search/state.js +44 -0
- package/dist/dropdown-search/types.d.ts +24 -0
- package/dist/dropdown-search/types.d.ts.map +1 -0
- package/dist/dropdown-search/types.js +1 -0
- package/dist/i18n.d.ts +31 -0
- package/dist/i18n.d.ts.map +1 -0
- package/dist/i18n.js +118 -0
- package/dist/index.d.ts +7 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +5 -0
- package/dist/pagination/Pagination.svelte +112 -0
- package/dist/pagination/Pagination.svelte.d.ts +30 -0
- package/dist/pagination/Pagination.svelte.d.ts.map +1 -0
- package/dist/pagination/index.d.ts +6 -0
- package/dist/pagination/index.d.ts.map +1 -0
- package/dist/pagination/index.js +3 -0
- package/dist/style.css +1110 -0
- package/dist/toast/Toast.svelte +37 -0
- package/dist/toast/Toast.svelte.d.ts +26 -0
- package/dist/toast/Toast.svelte.d.ts.map +1 -0
- package/dist/toast/ToastManager.svelte +29 -0
- package/dist/toast/ToastManager.svelte.d.ts +26 -0
- package/dist/toast/ToastManager.svelte.d.ts.map +1 -0
- package/dist/toast/index.d.ts +7 -0
- package/dist/toast/index.d.ts.map +1 -0
- package/dist/toast/index.js +4 -0
- package/dist/toast/store.d.ts +7 -0
- package/dist/toast/store.d.ts.map +1 -0
- package/dist/toast/store.js +114 -0
- package/dist/toast/types.d.ts +36 -0
- package/dist/toast/types.d.ts.map +1 -0
- package/dist/toast/types.js +1 -0
- package/package.json +83 -0
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { getUiMessages, type UiLanguage } from '../i18n.js';
|
|
3
|
+
import type { ToastItem } from './types.js';
|
|
4
|
+
|
|
5
|
+
export let toast: ToastItem;
|
|
6
|
+
export let onDismiss: (id: string) => void = () => {};
|
|
7
|
+
export let language: UiLanguage = 'en_us';
|
|
8
|
+
export let closeLabel: string | undefined = undefined;
|
|
9
|
+
|
|
10
|
+
$: messages = getUiMessages(language);
|
|
11
|
+
$: resolvedCloseLabel = closeLabel ?? messages.toast.closeLabel;
|
|
12
|
+
$: countdownStyle = `--suu-toast-duration: ${toast.duration}ms`;
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
<article
|
|
16
|
+
class={`suu-toast suu-toast--${toast.variant} ${toast.class ?? ''}`}
|
|
17
|
+
role={toast.variant === 'error' ? 'alert' : 'status'}
|
|
18
|
+
aria-live={toast.ariaLive}
|
|
19
|
+
>
|
|
20
|
+
<div class="suu-toast__accent" aria-hidden="true"></div>
|
|
21
|
+
<div class="suu-toast__content">
|
|
22
|
+
{#if toast.title}
|
|
23
|
+
<div class="suu-toast__title">{toast.title}</div>
|
|
24
|
+
{/if}
|
|
25
|
+
{#if toast.message}
|
|
26
|
+
<div class="suu-toast__message">{toast.message}</div>
|
|
27
|
+
{/if}
|
|
28
|
+
</div>
|
|
29
|
+
{#if toast.dismissible}
|
|
30
|
+
<button class="suu-toast__close" type="button" aria-label={resolvedCloseLabel} on:click={() => onDismiss(toast.id)}>
|
|
31
|
+
<span aria-hidden="true">×</span>
|
|
32
|
+
</button>
|
|
33
|
+
{/if}
|
|
34
|
+
{#if toast.showCountdown && toast.duration > 0}
|
|
35
|
+
<div class="suu-toast__countdown" style={countdownStyle} aria-hidden="true"></div>
|
|
36
|
+
{/if}
|
|
37
|
+
</article>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { type UiLanguage } from '../i18n.js';
|
|
2
|
+
import type { ToastItem } from './types.js';
|
|
3
|
+
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> {
|
|
4
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
5
|
+
$$bindings?: Bindings;
|
|
6
|
+
} & Exports;
|
|
7
|
+
(internal: unknown, props: Props & {
|
|
8
|
+
$$events?: Events;
|
|
9
|
+
$$slots?: Slots;
|
|
10
|
+
}): Exports & {
|
|
11
|
+
$set?: any;
|
|
12
|
+
$on?: any;
|
|
13
|
+
};
|
|
14
|
+
z_$$bindings?: Bindings;
|
|
15
|
+
}
|
|
16
|
+
declare const Toast: $$__sveltets_2_IsomorphicComponent<{
|
|
17
|
+
toast: ToastItem;
|
|
18
|
+
onDismiss?: (id: string) => void;
|
|
19
|
+
language?: UiLanguage;
|
|
20
|
+
closeLabel?: string | undefined;
|
|
21
|
+
}, {
|
|
22
|
+
[evt: string]: CustomEvent<any>;
|
|
23
|
+
}, {}, {}, string>;
|
|
24
|
+
type Toast = InstanceType<typeof Toast>;
|
|
25
|
+
export default Toast;
|
|
26
|
+
//# sourceMappingURL=Toast.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Toast.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/toast/Toast.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAiB,KAAK,UAAU,EAAE,MAAM,YAAY,CAAC;AAC5D,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,YAAY,CAAC;AAsC5C,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,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,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,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,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,KAAK;WAVoG,SAAS;gBAAc,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI;eAAa,UAAU;iBAAe,MAAM,GAAG,SAAS;;;kBAUxH,CAAC;AACzE,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import Toast from './Toast.svelte';
|
|
3
|
+
import { groupToastsByPosition, getToastStackDirection, toast as defaultToastStore, TOAST_POSITIONS } from './store.js';
|
|
4
|
+
import type { UiLanguage } from '../i18n.js';
|
|
5
|
+
import type { ToastPosition, ToastStore } from './types.js';
|
|
6
|
+
|
|
7
|
+
export let store: ToastStore = defaultToastStore;
|
|
8
|
+
export let positions: ToastPosition[] = TOAST_POSITIONS;
|
|
9
|
+
export let language: UiLanguage = 'en_us';
|
|
10
|
+
export let closeLabel: string | undefined = undefined;
|
|
11
|
+
|
|
12
|
+
$: groups = groupToastsByPosition($store);
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
{#each positions as position}
|
|
16
|
+
{@const items = groups[position]}
|
|
17
|
+
{#if items.length > 0}
|
|
18
|
+
<div
|
|
19
|
+
class={`suu-toast-region suu-toast-region--${position}`}
|
|
20
|
+
data-position={position}
|
|
21
|
+
data-stack={getToastStackDirection(position)}
|
|
22
|
+
aria-live={position.includes('top') ? 'polite' : 'off'}
|
|
23
|
+
>
|
|
24
|
+
{#each items as item (item.id)}
|
|
25
|
+
<Toast toast={item} onDismiss={store.dismiss} {language} {closeLabel} />
|
|
26
|
+
{/each}
|
|
27
|
+
</div>
|
|
28
|
+
{/if}
|
|
29
|
+
{/each}
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import type { UiLanguage } from '../i18n.js';
|
|
2
|
+
import type { ToastPosition, ToastStore } from './types.js';
|
|
3
|
+
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> {
|
|
4
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
5
|
+
$$bindings?: Bindings;
|
|
6
|
+
} & Exports;
|
|
7
|
+
(internal: unknown, props: Props & {
|
|
8
|
+
$$events?: Events;
|
|
9
|
+
$$slots?: Slots;
|
|
10
|
+
}): Exports & {
|
|
11
|
+
$set?: any;
|
|
12
|
+
$on?: any;
|
|
13
|
+
};
|
|
14
|
+
z_$$bindings?: Bindings;
|
|
15
|
+
}
|
|
16
|
+
declare const ToastManager: $$__sveltets_2_IsomorphicComponent<{
|
|
17
|
+
store?: ToastStore;
|
|
18
|
+
positions?: ToastPosition[];
|
|
19
|
+
language?: UiLanguage;
|
|
20
|
+
closeLabel?: string | undefined;
|
|
21
|
+
}, {
|
|
22
|
+
[evt: string]: CustomEvent<any>;
|
|
23
|
+
}, {}, {}, string>;
|
|
24
|
+
type ToastManager = InstanceType<typeof ToastManager>;
|
|
25
|
+
export default ToastManager;
|
|
26
|
+
//# sourceMappingURL=ToastManager.svelte.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToastManager.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/toast/ToastManager.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AA6B5D,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,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,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,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,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,YAAY;YAV8F,UAAU;gBAAc,aAAa,EAAE;eAAa,UAAU;iBAAe,MAAM,GAAG,SAAS;;;kBAU9G,CAAC;AAChF,KAAK,YAAY,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAC;AACxD,eAAe,YAAY,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export { default as Toast } from './Toast.svelte';
|
|
2
|
+
export { default as ToastManager } from './ToastManager.svelte';
|
|
3
|
+
export { createToastStore, getToastStackDirection, groupToastsByPosition, toast, TOAST_POSITIONS } from './store.js';
|
|
4
|
+
export { getUiMessages, resolveUiLanguage, uiLanguages } from '../i18n.js';
|
|
5
|
+
export type { UiLanguage, UiMessages } from '../i18n.js';
|
|
6
|
+
export type { ToastHandle, ToastItem, ToastOptions, ToastPosition, ToastStore, ToastVariant } from './types.js';
|
|
7
|
+
//# sourceMappingURL=index.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/lib/toast/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,KAAK,EAAE,eAAe,EAAE,MAAM,YAAY,CAAC;AACrH,OAAO,EAAE,aAAa,EAAE,iBAAiB,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAC3E,YAAY,EAAE,UAAU,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AACzD,YAAY,EAAE,WAAW,EAAE,SAAS,EAAE,YAAY,EAAE,aAAa,EAAE,UAAU,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC"}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { default as Toast } from './Toast.svelte';
|
|
2
|
+
export { default as ToastManager } from './ToastManager.svelte';
|
|
3
|
+
export { createToastStore, getToastStackDirection, groupToastsByPosition, toast, TOAST_POSITIONS } from './store.js';
|
|
4
|
+
export { getUiMessages, resolveUiLanguage, uiLanguages } from '../i18n.js';
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import type { ToastItem, ToastPosition, ToastStore } from './types.js';
|
|
2
|
+
export declare const TOAST_POSITIONS: ToastPosition[];
|
|
3
|
+
export declare function getToastStackDirection(position: ToastPosition): 'down' | 'up';
|
|
4
|
+
export declare function groupToastsByPosition(toasts: ToastItem[]): Record<ToastPosition, ToastItem[]>;
|
|
5
|
+
export declare function createToastStore(): ToastStore;
|
|
6
|
+
export declare const toast: ToastStore;
|
|
7
|
+
//# sourceMappingURL=store.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"store.d.ts","sourceRoot":"","sources":["../../src/lib/toast/store.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAe,SAAS,EAAgB,aAAa,EAAE,UAAU,EAAgB,MAAM,YAAY,CAAC;AAEhH,eAAO,MAAM,eAAe,EAAE,aAAa,EAS1C,CAAC;AAkCF,wBAAgB,sBAAsB,CAAC,QAAQ,EAAE,aAAa,GAAG,MAAM,GAAG,IAAI,CAE7E;AAED,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,SAAS,EAAE,GAAG,MAAM,CAAC,aAAa,EAAE,SAAS,EAAE,CAAC,CAW7F;AAED,wBAAgB,gBAAgB,IAAI,UAAU,CAgF7C;AAED,eAAO,MAAM,KAAK,YAAqB,CAAC"}
|
|
@@ -0,0 +1,114 @@
|
|
|
1
|
+
import { writable } from 'svelte/store';
|
|
2
|
+
export const TOAST_POSITIONS = [
|
|
3
|
+
'top-left',
|
|
4
|
+
'top-center',
|
|
5
|
+
'top-right',
|
|
6
|
+
'right-center',
|
|
7
|
+
'bottom-right',
|
|
8
|
+
'bottom-center',
|
|
9
|
+
'bottom-left',
|
|
10
|
+
'left-center'
|
|
11
|
+
];
|
|
12
|
+
const DEFAULT_DURATION = 5000;
|
|
13
|
+
const DEFAULT_POSITION = 'top-right';
|
|
14
|
+
let nextToastId = 1;
|
|
15
|
+
function toToastOptions(options, variant) {
|
|
16
|
+
if (typeof options === 'string') {
|
|
17
|
+
return { message: options, variant };
|
|
18
|
+
}
|
|
19
|
+
return { ...options, variant: variant ?? options.variant };
|
|
20
|
+
}
|
|
21
|
+
function normalizeToast(options, variant) {
|
|
22
|
+
const next = toToastOptions(options, variant);
|
|
23
|
+
const resolvedVariant = next.variant ?? 'info';
|
|
24
|
+
return {
|
|
25
|
+
id: next.id ?? `toast-${nextToastId++}`,
|
|
26
|
+
title: next.title ?? '',
|
|
27
|
+
message: next.message ?? '',
|
|
28
|
+
variant: resolvedVariant,
|
|
29
|
+
position: next.position ?? DEFAULT_POSITION,
|
|
30
|
+
duration: next.duration ?? DEFAULT_DURATION,
|
|
31
|
+
showCountdown: next.showCountdown ?? true,
|
|
32
|
+
dismissible: next.dismissible ?? true,
|
|
33
|
+
ariaLive: next.ariaLive ?? (resolvedVariant === 'error' ? 'assertive' : 'polite'),
|
|
34
|
+
class: next.class,
|
|
35
|
+
createdAt: Date.now()
|
|
36
|
+
};
|
|
37
|
+
}
|
|
38
|
+
export function getToastStackDirection(position) {
|
|
39
|
+
return position.startsWith('bottom') ? 'up' : 'down';
|
|
40
|
+
}
|
|
41
|
+
export function groupToastsByPosition(toasts) {
|
|
42
|
+
const groups = Object.fromEntries(TOAST_POSITIONS.map((position) => [position, []]));
|
|
43
|
+
for (const item of toasts) {
|
|
44
|
+
groups[item.position].push(item);
|
|
45
|
+
}
|
|
46
|
+
return groups;
|
|
47
|
+
}
|
|
48
|
+
export function createToastStore() {
|
|
49
|
+
const { subscribe, update, set } = writable([]);
|
|
50
|
+
const timers = new Map();
|
|
51
|
+
function clearTimer(id) {
|
|
52
|
+
const timer = timers.get(id);
|
|
53
|
+
if (timer) {
|
|
54
|
+
clearTimeout(timer);
|
|
55
|
+
timers.delete(id);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
function schedule(item) {
|
|
59
|
+
clearTimer(item.id);
|
|
60
|
+
if (item.duration > 0) {
|
|
61
|
+
timers.set(item.id, setTimeout(() => {
|
|
62
|
+
dismiss(item.id);
|
|
63
|
+
}, item.duration));
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
function dismiss(id) {
|
|
67
|
+
clearTimer(id);
|
|
68
|
+
update((items) => items.filter((item) => item.id !== id));
|
|
69
|
+
}
|
|
70
|
+
function showWithVariant(options, variant) {
|
|
71
|
+
const item = normalizeToast(options, variant);
|
|
72
|
+
update((items) => [...items.filter((existing) => existing.id !== item.id), item]);
|
|
73
|
+
schedule(item);
|
|
74
|
+
return {
|
|
75
|
+
id: item.id,
|
|
76
|
+
dismiss: () => dismiss(item.id),
|
|
77
|
+
update: (patch) => {
|
|
78
|
+
update((items) => items.map((existing) => {
|
|
79
|
+
if (existing.id !== item.id) {
|
|
80
|
+
return existing;
|
|
81
|
+
}
|
|
82
|
+
const next = { ...existing, ...patch };
|
|
83
|
+
schedule(next);
|
|
84
|
+
return next;
|
|
85
|
+
}));
|
|
86
|
+
}
|
|
87
|
+
};
|
|
88
|
+
}
|
|
89
|
+
return {
|
|
90
|
+
subscribe,
|
|
91
|
+
show: (options) => showWithVariant(options),
|
|
92
|
+
success: (options) => showWithVariant(options, 'success'),
|
|
93
|
+
error: (options) => showWithVariant(options, 'error'),
|
|
94
|
+
warning: (options) => showWithVariant(options, 'warning'),
|
|
95
|
+
info: (options) => showWithVariant(options, 'info'),
|
|
96
|
+
custom: (options) => showWithVariant(options, 'custom'),
|
|
97
|
+
dismiss,
|
|
98
|
+
clear: (position) => {
|
|
99
|
+
update((items) => {
|
|
100
|
+
const remaining = position ? items.filter((item) => item.position !== position) : [];
|
|
101
|
+
const removed = position ? items.filter((item) => item.position === position) : items;
|
|
102
|
+
for (const item of removed) {
|
|
103
|
+
clearTimer(item.id);
|
|
104
|
+
}
|
|
105
|
+
return remaining;
|
|
106
|
+
});
|
|
107
|
+
if (!position) {
|
|
108
|
+
timers.clear();
|
|
109
|
+
set([]);
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
}
|
|
114
|
+
export const toast = createToastStore();
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import type { Readable } from 'svelte/store';
|
|
2
|
+
export type ToastPosition = 'top-left' | 'top-center' | 'top-right' | 'right-center' | 'bottom-right' | 'bottom-center' | 'bottom-left' | 'left-center';
|
|
3
|
+
export type ToastVariant = 'success' | 'error' | 'warning' | 'info' | 'custom';
|
|
4
|
+
export interface ToastOptions {
|
|
5
|
+
id?: string;
|
|
6
|
+
title?: string;
|
|
7
|
+
message?: string;
|
|
8
|
+
variant?: ToastVariant;
|
|
9
|
+
position?: ToastPosition;
|
|
10
|
+
duration?: number;
|
|
11
|
+
showCountdown?: boolean;
|
|
12
|
+
dismissible?: boolean;
|
|
13
|
+
ariaLive?: 'polite' | 'assertive';
|
|
14
|
+
class?: string;
|
|
15
|
+
}
|
|
16
|
+
export interface ToastItem extends Required<Omit<ToastOptions, 'class'>> {
|
|
17
|
+
id: string;
|
|
18
|
+
createdAt: number;
|
|
19
|
+
class?: string;
|
|
20
|
+
}
|
|
21
|
+
export interface ToastHandle {
|
|
22
|
+
id: string;
|
|
23
|
+
dismiss: () => void;
|
|
24
|
+
update: (patch: Partial<ToastOptions>) => void;
|
|
25
|
+
}
|
|
26
|
+
export interface ToastStore extends Readable<ToastItem[]> {
|
|
27
|
+
show: (options: ToastOptions | string) => ToastHandle;
|
|
28
|
+
success: (options: ToastOptions | string) => ToastHandle;
|
|
29
|
+
error: (options: ToastOptions | string) => ToastHandle;
|
|
30
|
+
warning: (options: ToastOptions | string) => ToastHandle;
|
|
31
|
+
info: (options: ToastOptions | string) => ToastHandle;
|
|
32
|
+
custom: (options: ToastOptions | string) => ToastHandle;
|
|
33
|
+
dismiss: (id: string) => void;
|
|
34
|
+
clear: (position?: ToastPosition) => void;
|
|
35
|
+
}
|
|
36
|
+
//# sourceMappingURL=types.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/lib/toast/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE7C,MAAM,MAAM,aAAa,GACrB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,cAAc,GACd,cAAc,GACd,eAAe,GACf,aAAa,GACb,aAAa,CAAC;AAElB,MAAM,MAAM,YAAY,GAAG,SAAS,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE/E,MAAM,WAAW,YAAY;IAC3B,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,QAAQ,CAAC,EAAE,QAAQ,GAAG,WAAW,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,SAAU,SAAQ,QAAQ,CAAC,IAAI,CAAC,YAAY,EAAE,OAAO,CAAC,CAAC;IACtE,EAAE,EAAE,MAAM,CAAC;IACX,SAAS,EAAE,MAAM,CAAC;IAClB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,WAAW;IAC1B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,MAAM,EAAE,CAAC,KAAK,EAAE,OAAO,CAAC,YAAY,CAAC,KAAK,IAAI,CAAC;CAChD;AAED,MAAM,WAAW,UAAW,SAAQ,QAAQ,CAAC,SAAS,EAAE,CAAC;IACvD,IAAI,EAAE,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,KAAK,WAAW,CAAC;IACtD,OAAO,EAAE,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,KAAK,WAAW,CAAC;IACzD,KAAK,EAAE,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,KAAK,WAAW,CAAC;IACvD,OAAO,EAAE,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,KAAK,WAAW,CAAC;IACzD,IAAI,EAAE,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,KAAK,WAAW,CAAC;IACtD,MAAM,EAAE,CAAC,OAAO,EAAE,YAAY,GAAG,MAAM,KAAK,WAAW,CAAC;IACxD,OAAO,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IAC9B,KAAK,EAAE,CAAC,QAAQ,CAAC,EAAE,aAAa,KAAK,IAAI,CAAC;CAC3C"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|
package/package.json
ADDED
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@ibobbyts/svelte-ui-utils",
|
|
3
|
+
"version": "0.1.2",
|
|
4
|
+
"description": "Reusable Svelte 5 UI utilities for toast notifications, dropdown search, and data tables.",
|
|
5
|
+
"type": "module",
|
|
6
|
+
"license": "MIT",
|
|
7
|
+
"repository": {
|
|
8
|
+
"type": "git",
|
|
9
|
+
"url": "git+https://github.com/iBobbyTS/svelte-ui-utils.git"
|
|
10
|
+
},
|
|
11
|
+
"bugs": {
|
|
12
|
+
"url": "https://github.com/iBobbyTS/svelte-ui-utils/issues"
|
|
13
|
+
},
|
|
14
|
+
"homepage": "https://github.com/iBobbyTS/svelte-ui-utils#readme",
|
|
15
|
+
"files": [
|
|
16
|
+
"dist",
|
|
17
|
+
"README.md",
|
|
18
|
+
"LICENSE"
|
|
19
|
+
],
|
|
20
|
+
"exports": {
|
|
21
|
+
".": {
|
|
22
|
+
"types": "./dist/index.d.ts",
|
|
23
|
+
"svelte": "./dist/index.js",
|
|
24
|
+
"default": "./dist/index.js"
|
|
25
|
+
},
|
|
26
|
+
"./toast": {
|
|
27
|
+
"types": "./dist/toast/index.d.ts",
|
|
28
|
+
"svelte": "./dist/toast/index.js",
|
|
29
|
+
"default": "./dist/toast/index.js"
|
|
30
|
+
},
|
|
31
|
+
"./dropdown": {
|
|
32
|
+
"types": "./dist/dropdown/index.d.ts",
|
|
33
|
+
"svelte": "./dist/dropdown/index.js",
|
|
34
|
+
"default": "./dist/dropdown/index.js"
|
|
35
|
+
},
|
|
36
|
+
"./dropdown-search": {
|
|
37
|
+
"types": "./dist/dropdown-search/index.d.ts",
|
|
38
|
+
"svelte": "./dist/dropdown-search/index.js",
|
|
39
|
+
"default": "./dist/dropdown-search/index.js"
|
|
40
|
+
},
|
|
41
|
+
"./dropdown-search/state": {
|
|
42
|
+
"types": "./dist/dropdown-search/state.d.ts",
|
|
43
|
+
"default": "./dist/dropdown-search/state.js"
|
|
44
|
+
},
|
|
45
|
+
"./table": {
|
|
46
|
+
"types": "./dist/data-table/index.d.ts",
|
|
47
|
+
"svelte": "./dist/data-table/index.js",
|
|
48
|
+
"default": "./dist/data-table/index.js"
|
|
49
|
+
},
|
|
50
|
+
"./pagination": {
|
|
51
|
+
"types": "./dist/pagination/index.d.ts",
|
|
52
|
+
"svelte": "./dist/pagination/index.js",
|
|
53
|
+
"default": "./dist/pagination/index.js"
|
|
54
|
+
},
|
|
55
|
+
"./style.css": "./dist/style.css"
|
|
56
|
+
},
|
|
57
|
+
"publishConfig": {
|
|
58
|
+
"access": "public",
|
|
59
|
+
"registry": "https://registry.npmjs.org"
|
|
60
|
+
},
|
|
61
|
+
"scripts": {
|
|
62
|
+
"check": "svelte-check --tsconfig ./tsconfig.json",
|
|
63
|
+
"test": "vitest run",
|
|
64
|
+
"test:watch": "vitest",
|
|
65
|
+
"package": "svelte-package"
|
|
66
|
+
},
|
|
67
|
+
"peerDependencies": {
|
|
68
|
+
"svelte": ">=5"
|
|
69
|
+
},
|
|
70
|
+
"devDependencies": {
|
|
71
|
+
"@sveltejs/package": "^2.5.5",
|
|
72
|
+
"@sveltejs/vite-plugin-svelte": "^7.1.2",
|
|
73
|
+
"@testing-library/jest-dom": "^6.9.1",
|
|
74
|
+
"@testing-library/svelte": "^5.2.9",
|
|
75
|
+
"@tsconfig/svelte": "^5.0.5",
|
|
76
|
+
"jsdom": "^27.3.0",
|
|
77
|
+
"svelte": "^5.55.3",
|
|
78
|
+
"svelte-check": "^4.3.4",
|
|
79
|
+
"typescript": "^5.9.3",
|
|
80
|
+
"vite": "^8.0.16",
|
|
81
|
+
"vitest": "^4.0.16"
|
|
82
|
+
}
|
|
83
|
+
}
|