diff --git a/packages/skeleton/src/lib/index.ts b/packages/skeleton/src/lib/index.ts index 801437aa89..ec662e29e9 100644 --- a/packages/skeleton/src/lib/index.ts +++ b/packages/skeleton/src/lib/index.ts @@ -4,9 +4,9 @@ export type { AutocompleteOption } from './components/Autocomplete/types.js'; export type { ConicStop } from './components/ConicGradient/types.js'; -export type { DrawerSettings } from './utilities/Drawer/types.js'; -export type { ModalSettings, ModalComponent } from './utilities/Modal/types.js'; -export type { ToastSettings } from './utilities/Toast/types.js'; +export type { DrawerSettings, DrawerStore } from './utilities/Drawer/types.js'; +export type { ModalSettings, ModalComponent, ModalStore } from './utilities/Modal/types.js'; +export type { ToastSettings, ToastStore } from './utilities/Toast/types.js'; export type { TableSource } from './components/Table/types.js'; export type { PaginationSettings } from './components/Paginator/types.js'; export type { PopupSettings } from './utilities/Popup/types.js'; diff --git a/packages/skeleton/src/lib/utilities/Drawer/stores.ts b/packages/skeleton/src/lib/utilities/Drawer/stores.ts index b85a0dfb4c..1debb1eba0 100644 --- a/packages/skeleton/src/lib/utilities/Drawer/stores.ts +++ b/packages/skeleton/src/lib/utilities/Drawer/stores.ts @@ -9,13 +9,17 @@ const DRAWER_STORE_KEY = 'drawerStore'; /** * Retrieves the `drawerStore`. * + * This can *ONLY* be called from the **top level** of components! + * * @example - * ```ts - * import { getDrawerStore } from "@skeletonlabs/skeleton"; + * ```svelte + * * ``` */ export function getDrawerStore(): DrawerStore { @@ -38,7 +42,7 @@ export function initializeDrawerStore(): DrawerStore { return setContext(DRAWER_STORE_KEY, drawerStore); } -type DrawerStore = ReturnType; +export type DrawerStore = ReturnType; function drawerService() { const { subscribe, set, update } = writable({}); return { diff --git a/packages/skeleton/src/lib/utilities/Drawer/types.ts b/packages/skeleton/src/lib/utilities/Drawer/types.ts index 87875c5ece..ae4815b5ab 100644 --- a/packages/skeleton/src/lib/utilities/Drawer/types.ts +++ b/packages/skeleton/src/lib/utilities/Drawer/types.ts @@ -1,5 +1,7 @@ // Drawer Types +export type { DrawerStore } from './stores.js'; + export interface DrawerSettings { open?: boolean; /** A unique identifier, useful for setting contents. */ diff --git a/packages/skeleton/src/lib/utilities/Modal/stores.ts b/packages/skeleton/src/lib/utilities/Modal/stores.ts index 6cef05caf1..d1bb67bf22 100644 --- a/packages/skeleton/src/lib/utilities/Modal/stores.ts +++ b/packages/skeleton/src/lib/utilities/Modal/stores.ts @@ -9,13 +9,17 @@ const MODAL_STORE_KEY = 'modalStore'; /** * Retrieves the `modalStore`. * + * This can *ONLY* be called from the **top level** of components! + * * @example - * ```ts - * import { getmodalStore } from "@skeletonlabs/skeleton"; + * ```svelte + * * ``` */ export function getModalStore(): ModalStore { @@ -38,7 +42,7 @@ export function initializeModalStore(): ModalStore { return setContext(MODAL_STORE_KEY, modalStore); } -type ModalStore = ReturnType; +export type ModalStore = ReturnType; function modalService() { const { subscribe, set, update } = writable([]); return { diff --git a/packages/skeleton/src/lib/utilities/Modal/types.ts b/packages/skeleton/src/lib/utilities/Modal/types.ts index e6908c5d8e..f3e46dd935 100644 --- a/packages/skeleton/src/lib/utilities/Modal/types.ts +++ b/packages/skeleton/src/lib/utilities/Modal/types.ts @@ -1,5 +1,7 @@ // Modal Types +export type { ModalStore } from './stores.js'; + export interface ModalComponent { /** Import and provide your component reference. */ ref: any; diff --git a/packages/skeleton/src/lib/utilities/Toast/stores.ts b/packages/skeleton/src/lib/utilities/Toast/stores.ts index 262dc7a744..4ebbf8dec8 100644 --- a/packages/skeleton/src/lib/utilities/Toast/stores.ts +++ b/packages/skeleton/src/lib/utilities/Toast/stores.ts @@ -11,13 +11,17 @@ const TOAST_STORE_KEY = 'toastStore'; /** * Retrieves the `toastStore`. * + * This can *ONLY* be called from the **top level** of components! + * * @example - * ```ts - * import { getToastStore } from "@skeletonlabs/skeleton"; + * ```svelte + * * ``` */ export function getToastStore(): ToastStore { @@ -46,7 +50,7 @@ function randomUUID(): string { return Number(random).toString(32); } -type ToastStore = ReturnType; +export type ToastStore = ReturnType; function toastService() { const { subscribe, set, update } = writable([]); diff --git a/packages/skeleton/src/lib/utilities/Toast/types.ts b/packages/skeleton/src/lib/utilities/Toast/types.ts index 6ee12f4d9b..85fec1d27d 100644 --- a/packages/skeleton/src/lib/utilities/Toast/types.ts +++ b/packages/skeleton/src/lib/utilities/Toast/types.ts @@ -1,5 +1,7 @@ // Toast interface types +export type { ToastStore } from './stores.js'; + export interface ToastSettings { /** Provide the toast message. Supports HTML. */ message: string; diff --git a/sites/skeleton.dev/src/routes/(inner)/utilities/drawers/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/utilities/drawers/+page.svelte index 9e11cc4527..e4afd02d83 100644 --- a/sites/skeleton.dev/src/routes/(inner)/utilities/drawers/+page.svelte +++ b/sites/skeleton.dev/src/routes/(inner)/utilities/drawers/+page.svelte @@ -17,7 +17,7 @@ name: 'Drawers', description: 'Displays an overlay panel that attaches to any side of the screen.', imports: ['Drawer', 'getDrawerStore'], - types: ['DrawerSettings'], + types: ['DrawerSettings', 'DrawerStore'], source: 'utilities/Drawer', aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/', components: [{ sveld: sveldDrawer }], @@ -79,14 +79,7 @@ - -

- Implement the following in the root layout of your application. This is required only once when implementing Skeleton's Drawer, Modal, or Toast features, and will prevent known issues with SvelteKit SSR. -

- -

Implement a single instance of the drawer component in your app's root layout, above the App Shell (if present).

- \n\n`} /> -

We'll cover triggering this feature on-demand in the documentation below.

+

There are a several steps involved to utilize this feature. Please refer to the documented instruction below.

 @@ -100,22 +93,24 @@ and reusable via a Svelte writable store. Do not reimplement this component for each route page.

-
-

Drawer Component

+

Prerequisites

+

Initialize Stores

+ +

+ Implement the following in the root layout of your application. This is required only once when implementing Skeleton's Drawer, Modal, and Toast stores and will prevent known issues with SvelteKit SSR. +

+ +

Drawer Component

Implement a single instance of the drawer component in your app's root layout, above the App Shell (if present).

- (contents) - - - `} - /> + \n\n`} />

Drawer Store

-

Import this anywhere you wish to control the Drawer. Provides an interface to control the drawer component.

+

Provides an interface to control the drawer component.

+
+ NOTE: To retrieve the store, getDrawerStore must be invoked at the top level of your component! +

Open

diff --git a/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte index ab71bd3728..61f064c2b8 100644 --- a/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte +++ b/sites/skeleton.dev/src/routes/(inner)/utilities/modals/+page.svelte @@ -26,7 +26,7 @@ name: 'Modals', description: 'High priority dialogs and modals using a dynamic queue system.', imports: ['Modal', 'getModalStore'], - types: ['ModalSettings', 'ModalComponent'], + types: ['ModalSettings', 'ModalComponent', 'ModalStore'], source: 'utilities/Modal', aria: 'https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/', components: [{ sveld: sveldModal }], @@ -106,7 +106,7 @@ component: c, title: 'Custom Form Component', body: 'Complete the form below and then press submit.', - response: (r: any) => console.log('response:', r) + response: (r) => console.log('response:', r) }; modalStore.trigger(modal); } @@ -117,7 +117,7 @@ component: 'exampleList', title: 'Custom List Component', body: 'Make your selection then press submit.', - response: (r: any) => console.log('response:', r) + response: (r) => console.log('response:', r) }; modalStore.trigger(modal); } @@ -149,21 +149,7 @@ - -

- Implement the following in the root layout of your application. This is required only once when implementing Skeleton's Drawer, Modal, or Toast features, and will prevent known issues with SvelteKit SSR. -

- -

Implement a single instance of the modal component in your app's root layout, above the App Shell (if present).

- \n\n`} /> -

We'll cover triggering this feature on-demand in the documentation below.

+

There are a several steps involved to utilize this feature. Please refer to the documented instruction below.

 @@ -180,16 +166,16 @@ initializeStores();

-

Modal Component

+

Prerequisites

+

Initialize Stores

+ +

+ Implement the following in the root layout of your application. This is required only once when implementing Skeleton's Drawer, Modal, and Toast stores and will prevent known issues with SvelteKit SSR. +

+ +

Modal Component

Implement a single instance of the modal component in your app's root layout, above the App Shell (if present).

- - - - `} - /> + \n\n`} />

Modal Store

@@ -197,6 +183,9 @@ initializeStores(); When you wish to trigger a modal, import the getModalStore function and invoke it to retrieve the modalStore, which is a Svelte store that acts as the modal queue.

+
+ NOTE: To retrieve the store, getModalStore must be invoked at the top level of your component! +
- -

- Implement the following in the root layout of your application. This is required only once when implementing Skeleton's Drawer, Modal, or Toast features, and will prevent known issues with SvelteKit SSR. -

- -

Implement a single instance of the toast component in your app's root layout, above the App Shell (if present).

- \n\n`} /> -

We'll cover triggering this feature on-demand in the documentation below.

+

There are a several steps involved to utilize this feature. Please refer to the documented instruction below.

 @@ -162,23 +155,26 @@ and reusable via a Svelte writable store. Do not reimplement this component for each route page.

-
-

Toast Component

+

Prerequisites

+

Initialize Stores

+ +

+ Implement the following in the root layout of your application. This is required only once when implementing Skeleton's Drawer, Modal, and Toast stores and will prevent known issues with SvelteKit SSR. +

+ +

Toast Component

Implement a single instance of the toast component in your app's root layout, above the App Shell (if present).

- - - - `} - /> + \n\n`} /> +

We'll cover triggering this feature on-demand in the documentation below.

Toast Store

The Toast Store acts as a queue for your toast messages.

+
+ NOTE: To retrieve the store, getToastStore must be invoked at the top level of your component! +