feat: docker compose maybe
This commit is contained in:
217
node_modules/@skeletonlabs/skeleton/dist/utilities/Modal/Modal.svelte
generated
vendored
Normal file
217
node_modules/@skeletonlabs/skeleton/dist/utilities/Modal/Modal.svelte
generated
vendored
Normal file
@ -0,0 +1,217 @@
|
||||
<script context="module">import { fly, fade } from "svelte/transition";
|
||||
import { prefersReducedMotionStore } from "../../index.js";
|
||||
import { dynamicTransition } from "../../internal/transitions.js";
|
||||
</script>
|
||||
|
||||
<script generics="TransitionIn extends Transition = FlyTransition, TransitionOut extends Transition = FlyTransition">import { createEventDispatcher } from "svelte";
|
||||
const dispatch = createEventDispatcher();
|
||||
import { focusTrap } from "../../actions/FocusTrap/focusTrap.js";
|
||||
import { getModalStore } from "./stores.js";
|
||||
export let position = "items-center";
|
||||
export let components = {};
|
||||
export let background = "bg-surface-100-800-token";
|
||||
export let width = "w-modal";
|
||||
export let height = "h-auto";
|
||||
export let padding = "p-4";
|
||||
export let spacing = "space-y-4";
|
||||
export let rounded = "rounded-container-token";
|
||||
export let shadow = "shadow-xl";
|
||||
export let zIndex = "z-[999]";
|
||||
export let buttonNeutral = "variant-ghost-surface";
|
||||
export let buttonPositive = "variant-filled";
|
||||
export let buttonTextCancel = "Cancel";
|
||||
export let buttonTextConfirm = "Confirm";
|
||||
export let buttonTextSubmit = "Submit";
|
||||
export let regionBackdrop = "bg-surface-backdrop-token";
|
||||
export let regionHeader = "text-2xl font-bold";
|
||||
export let regionBody = "max-h-[200px] overflow-hidden";
|
||||
export let regionFooter = "flex justify-end space-x-2";
|
||||
export let transitions = !$prefersReducedMotionStore;
|
||||
export let transitionIn = fly;
|
||||
export let transitionInParams = { duration: 150, opacity: 0, x: 0, y: 100 };
|
||||
export let transitionOut = fly;
|
||||
export let transitionOutParams = { duration: 150, opacity: 0, x: 0, y: 100 };
|
||||
const cBackdrop = "fixed top-0 left-0 right-0 bottom-0 overflow-y-auto";
|
||||
const cTransitionLayer = "w-full h-fit min-h-full p-4 overflow-y-auto flex justify-center";
|
||||
const cModal = "block overflow-y-auto";
|
||||
const cModalImage = "w-full h-auto";
|
||||
let promptValue;
|
||||
const buttonTextDefaults = {
|
||||
buttonTextCancel,
|
||||
buttonTextConfirm,
|
||||
buttonTextSubmit
|
||||
};
|
||||
let currentComponent;
|
||||
let registeredInteractionWithBackdrop = false;
|
||||
const modalStore = getModalStore();
|
||||
modalStore.subscribe((modals) => {
|
||||
if (!modals.length)
|
||||
return;
|
||||
if (modals[0].type === "prompt")
|
||||
promptValue = modals[0].value;
|
||||
buttonTextCancel = modals[0].buttonTextCancel || buttonTextDefaults.buttonTextCancel;
|
||||
buttonTextConfirm = modals[0].buttonTextConfirm || buttonTextDefaults.buttonTextConfirm;
|
||||
buttonTextSubmit = modals[0].buttonTextSubmit || buttonTextDefaults.buttonTextSubmit;
|
||||
currentComponent = typeof modals[0].component === "string" ? components[modals[0].component] : modals[0].component;
|
||||
});
|
||||
function onBackdropInteractionBegin(event) {
|
||||
if (!(event.target instanceof Element))
|
||||
return;
|
||||
const classList = event.target.classList;
|
||||
if (classList.contains("modal-backdrop") || classList.contains("modal-transition")) {
|
||||
registeredInteractionWithBackdrop = true;
|
||||
}
|
||||
}
|
||||
function onBackdropInteractionEnd(event) {
|
||||
if (!(event.target instanceof Element))
|
||||
return;
|
||||
const classList = event.target.classList;
|
||||
if ((classList.contains("modal-backdrop") || classList.contains("modal-transition")) && registeredInteractionWithBackdrop) {
|
||||
if ($modalStore[0].response)
|
||||
$modalStore[0].response(void 0);
|
||||
modalStore.close();
|
||||
dispatch("backdrop", event);
|
||||
}
|
||||
registeredInteractionWithBackdrop = false;
|
||||
}
|
||||
function onClose() {
|
||||
if ($modalStore[0].response)
|
||||
$modalStore[0].response(false);
|
||||
modalStore.close();
|
||||
}
|
||||
function onConfirm() {
|
||||
if ($modalStore[0].response)
|
||||
$modalStore[0].response(true);
|
||||
modalStore.close();
|
||||
}
|
||||
function onPromptSubmit(event) {
|
||||
event.preventDefault();
|
||||
if ($modalStore[0].response)
|
||||
$modalStore[0].response(promptValue);
|
||||
modalStore.close();
|
||||
}
|
||||
function onKeyDown(event) {
|
||||
if (!$modalStore.length)
|
||||
return;
|
||||
if (event.code === "Escape")
|
||||
onClose();
|
||||
}
|
||||
$:
|
||||
cPosition = $modalStore[0]?.position ?? position;
|
||||
$:
|
||||
classesBackdrop = `${cBackdrop} ${regionBackdrop} ${zIndex} ${$$props.class ?? ""} ${$modalStore[0]?.backdropClasses ?? ""}`;
|
||||
$:
|
||||
classesTransitionLayer = `${cTransitionLayer} ${cPosition ?? ""}`;
|
||||
$:
|
||||
classesModal = `${cModal} ${background} ${width} ${height} ${padding} ${spacing} ${rounded} ${shadow} ${$modalStore[0]?.modalClasses ?? ""}`;
|
||||
$:
|
||||
parent = {
|
||||
position,
|
||||
// ---
|
||||
background,
|
||||
width,
|
||||
height,
|
||||
padding,
|
||||
spacing,
|
||||
rounded,
|
||||
shadow,
|
||||
// ---
|
||||
buttonNeutral,
|
||||
buttonPositive,
|
||||
buttonTextCancel,
|
||||
buttonTextConfirm,
|
||||
buttonTextSubmit,
|
||||
// ---
|
||||
regionBackdrop,
|
||||
regionHeader,
|
||||
regionBody,
|
||||
regionFooter,
|
||||
// ---
|
||||
onClose
|
||||
};
|
||||
</script>
|
||||
|
||||
<svelte:window on:keydown={onKeyDown} />
|
||||
|
||||
{#if $modalStore.length > 0}
|
||||
{#key $modalStore}
|
||||
<!-- Backdrop -->
|
||||
<!-- FIXME: resolve a11y warnings -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<div
|
||||
class="modal-backdrop {classesBackdrop}"
|
||||
data-testid="modal-backdrop"
|
||||
on:mousedown={onBackdropInteractionBegin}
|
||||
on:mouseup={onBackdropInteractionEnd}
|
||||
on:touchstart|passive
|
||||
on:touchend|passive
|
||||
transition:dynamicTransition|global={{ transition: fade, params: { duration: 150 }, enabled: transitions }}
|
||||
use:focusTrap={true}
|
||||
>
|
||||
<!-- Transition Layer -->
|
||||
<div
|
||||
class="modal-transition {classesTransitionLayer}"
|
||||
in:dynamicTransition|global={{ transition: transitionIn, params: transitionInParams, enabled: transitions }}
|
||||
out:dynamicTransition|global={{ transition: transitionOut, params: transitionOutParams, enabled: transitions }}
|
||||
>
|
||||
{#if $modalStore[0].type !== 'component'}
|
||||
<!-- Modal: Presets -->
|
||||
<div class="modal {classesModal}" data-testid="modal" role="dialog" aria-modal="true" aria-label={$modalStore[0].title ?? ''}>
|
||||
<!-- Header -->
|
||||
{#if $modalStore[0]?.title}
|
||||
<header class="modal-header {regionHeader}">{@html $modalStore[0].title}</header>
|
||||
{/if}
|
||||
<!-- Body -->
|
||||
{#if $modalStore[0]?.body}
|
||||
<article class="modal-body {regionBody}">{@html $modalStore[0].body}</article>
|
||||
{/if}
|
||||
<!-- Image -->
|
||||
{#if $modalStore[0]?.image && typeof $modalStore[0]?.image === 'string'}
|
||||
<img class="modal-image {cModalImage}" src={$modalStore[0]?.image} alt="Modal" />
|
||||
{/if}
|
||||
<!-- Type -->
|
||||
{#if $modalStore[0].type === 'alert'}
|
||||
<!-- Template: Alert -->
|
||||
<footer class="modal-footer {regionFooter}">
|
||||
<button type="button" class="btn {buttonNeutral}" on:click={onClose}>{buttonTextCancel}</button>
|
||||
</footer>
|
||||
{:else if $modalStore[0].type === 'confirm'}
|
||||
<!-- Template: Confirm -->
|
||||
<footer class="modal-footer {regionFooter}">
|
||||
<button type="button" class="btn {buttonNeutral}" on:click={onClose}>{buttonTextCancel}</button>
|
||||
<button type="button" class="btn {buttonPositive}" on:click={onConfirm}>{buttonTextConfirm}</button>
|
||||
</footer>
|
||||
{:else if $modalStore[0].type === 'prompt'}
|
||||
<!-- Template: Prompt -->
|
||||
<form class="space-y-4" on:submit={onPromptSubmit}>
|
||||
<input class="modal-prompt-input input" name="prompt" type="text" bind:value={promptValue} {...$modalStore[0].valueAttr} />
|
||||
<footer class="modal-footer {regionFooter}">
|
||||
<button type="button" class="btn {buttonNeutral}" on:click={onClose}>{buttonTextCancel}</button>
|
||||
<button type="submit" class="btn {buttonPositive}">{buttonTextSubmit}</button>
|
||||
</footer>
|
||||
</form>
|
||||
{/if}
|
||||
</div>
|
||||
{:else}
|
||||
<!-- Modal: Components -->
|
||||
<!-- Note: keep `contents` class to allow widths from children -->
|
||||
<div
|
||||
class="modal contents {$modalStore[0]?.modalClasses ?? ''}"
|
||||
data-testid="modal-component"
|
||||
role="dialog"
|
||||
aria-modal="true"
|
||||
aria-label={$modalStore[0].title ?? ''}
|
||||
>
|
||||
{#if currentComponent?.slot}
|
||||
<svelte:component this={currentComponent?.ref} {...currentComponent?.props} {parent}>
|
||||
{@html currentComponent?.slot}
|
||||
</svelte:component>
|
||||
{:else}
|
||||
<svelte:component this={currentComponent?.ref} {...currentComponent?.props} {parent} />
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
{/key}
|
||||
{/if}
|
72
node_modules/@skeletonlabs/skeleton/dist/utilities/Modal/Modal.svelte.d.ts
generated
vendored
Normal file
72
node_modules/@skeletonlabs/skeleton/dist/utilities/Modal/Modal.svelte.d.ts
generated
vendored
Normal file
@ -0,0 +1,72 @@
|
||||
import { SvelteComponentTyped } from "svelte";
|
||||
import { fly } from 'svelte/transition';
|
||||
import { type Transition, type TransitionParams } from '../../index.js';
|
||||
type FlyTransition = typeof fly;
|
||||
import type { ModalComponent } from './types.js';
|
||||
declare class __sveltets_Render<TransitionIn extends Transition = FlyTransition, TransitionOut extends Transition = FlyTransition> {
|
||||
props(): {
|
||||
[x: string]: any;
|
||||
/** Set the modal position within the backdrop container*/
|
||||
position?: string | undefined;
|
||||
/** Register a list of reusable component modals.*/
|
||||
components?: Record<string, ModalComponent> | undefined;
|
||||
/** Provide classes to style the modal background.*/
|
||||
background?: string | undefined;
|
||||
/** Provide classes to style the modal width.*/
|
||||
width?: string | undefined;
|
||||
/** Provide classes to style the modal height.*/
|
||||
height?: string | undefined;
|
||||
/** Provide classes to style the modal padding.*/
|
||||
padding?: string | undefined;
|
||||
/** Provide classes to style the modal spacing.*/
|
||||
spacing?: string | undefined;
|
||||
/** Provide classes to style the modal border radius.*/
|
||||
rounded?: string | undefined;
|
||||
/** Provide classes to style modal box shadow.*/
|
||||
shadow?: string | undefined;
|
||||
/** Provide a class to override the z-index*/
|
||||
zIndex?: string | undefined;
|
||||
/** Provide classes for neutral buttons, such as Cancel.*/
|
||||
buttonNeutral?: string | undefined;
|
||||
/** Provide classes for positive actions, such as Confirm or Submit.*/
|
||||
buttonPositive?: string | undefined;
|
||||
/** Override the text for the Cancel button.*/
|
||||
buttonTextCancel?: string | undefined;
|
||||
/** Override the text for the Confirm button.*/
|
||||
buttonTextConfirm?: string | undefined;
|
||||
/** Override the text for the Submit button.*/
|
||||
buttonTextSubmit?: string | undefined;
|
||||
/** Provide classes to style the backdrop.*/
|
||||
regionBackdrop?: string | undefined;
|
||||
/** Provide arbitrary classes to modal header region.*/
|
||||
regionHeader?: string | undefined;
|
||||
/** Provide arbitrary classes to modal body region.*/
|
||||
regionBody?: string | undefined;
|
||||
/** Provide arbitrary classes to modal footer region.*/
|
||||
regionFooter?: string | undefined;
|
||||
/** Enable/Disable transitions*/
|
||||
transitions?: boolean | undefined;
|
||||
/** Provide the transition used on entry.*/
|
||||
transitionIn?: TransitionIn | undefined;
|
||||
/** Transition params provided to `TransitionIn`.*/
|
||||
transitionInParams?: TransitionParams<TransitionIn> | undefined;
|
||||
/** Provide the transition used on exit.*/
|
||||
transitionOut?: TransitionOut | undefined;
|
||||
/** Transition params provided to `TransitionOut`.*/
|
||||
transitionOutParams?: TransitionParams<TransitionOut> | undefined;
|
||||
};
|
||||
events(): {
|
||||
touchstart: TouchEvent;
|
||||
touchend: TouchEvent;
|
||||
backdrop: CustomEvent<MouseEvent>;
|
||||
} & {
|
||||
[evt: string]: CustomEvent<any>;
|
||||
};
|
||||
slots(): {};
|
||||
}
|
||||
export type ModalProps<TransitionIn extends Transition = FlyTransition, TransitionOut extends Transition = FlyTransition> = ReturnType<__sveltets_Render<TransitionIn, TransitionOut>['props']>;
|
||||
export type ModalEvents<TransitionIn extends Transition = FlyTransition, TransitionOut extends Transition = FlyTransition> = ReturnType<__sveltets_Render<TransitionIn, TransitionOut>['events']>;
|
||||
export type ModalSlots<TransitionIn extends Transition = FlyTransition, TransitionOut extends Transition = FlyTransition> = ReturnType<__sveltets_Render<TransitionIn, TransitionOut>['slots']>;
|
||||
export default class Modal<TransitionIn extends Transition = FlyTransition, TransitionOut extends Transition = FlyTransition> extends SvelteComponentTyped<ModalProps<TransitionIn, TransitionOut>, ModalEvents<TransitionIn, TransitionOut>, ModalSlots<TransitionIn, TransitionOut>> {
|
||||
}
|
||||
export {};
|
8
node_modules/@skeletonlabs/skeleton/dist/utilities/Modal/ModalTest.svelte
generated
vendored
Normal file
8
node_modules/@skeletonlabs/skeleton/dist/utilities/Modal/ModalTest.svelte
generated
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
<script>import { initializeModalStore, getModalStore } from "./stores.js";
|
||||
import Modal from "./Modal.svelte";
|
||||
export let modalSetting;
|
||||
initializeModalStore();
|
||||
getModalStore().trigger(modalSetting);
|
||||
</script>
|
||||
|
||||
<Modal />
|
17
node_modules/@skeletonlabs/skeleton/dist/utilities/Modal/ModalTest.svelte.d.ts
generated
vendored
Normal file
17
node_modules/@skeletonlabs/skeleton/dist/utilities/Modal/ModalTest.svelte.d.ts
generated
vendored
Normal file
@ -0,0 +1,17 @@
|
||||
import { SvelteComponentTyped } from "svelte";
|
||||
import type { ModalSettings } from './types.js';
|
||||
declare const __propDef: {
|
||||
props: {
|
||||
modalSetting: ModalSettings;
|
||||
};
|
||||
events: {
|
||||
[evt: string]: CustomEvent<any>;
|
||||
};
|
||||
slots: {};
|
||||
};
|
||||
export type ModalTestProps = typeof __propDef.props;
|
||||
export type ModalTestEvents = typeof __propDef.events;
|
||||
export type ModalTestSlots = typeof __propDef.slots;
|
||||
export default class ModalTest extends SvelteComponentTyped<ModalTestProps, ModalTestEvents, ModalTestSlots> {
|
||||
}
|
||||
export {};
|
36
node_modules/@skeletonlabs/skeleton/dist/utilities/Modal/stores.d.ts
generated
vendored
Normal file
36
node_modules/@skeletonlabs/skeleton/dist/utilities/Modal/stores.d.ts
generated
vendored
Normal file
@ -0,0 +1,36 @@
|
||||
/// <reference types="svelte" />
|
||||
import type { ModalSettings } from './types.js';
|
||||
/**
|
||||
* Retrieves the `modalStore`.
|
||||
*
|
||||
* This can *ONLY* be called from the **top level** of components!
|
||||
*
|
||||
* @example
|
||||
* ```svelte
|
||||
* <script>
|
||||
* import { getmodalStore } from "@skeletonlabs/skeleton";
|
||||
*
|
||||
* const modalStore = getModalStore();
|
||||
*
|
||||
* modalStore.trigger({ type: "alert", title: "Welcome!" });
|
||||
* </script>
|
||||
* ```
|
||||
*/
|
||||
export declare function getModalStore(): ModalStore;
|
||||
/**
|
||||
* Initializes the `modalStore`.
|
||||
*/
|
||||
export declare function initializeModalStore(): ModalStore;
|
||||
export type ModalStore = ReturnType<typeof modalService>;
|
||||
declare function modalService(): {
|
||||
subscribe: (this: void, run: import("svelte/store").Subscriber<ModalSettings[]>, invalidate?: import("svelte/store").Invalidator<ModalSettings[]> | undefined) => import("svelte/store").Unsubscriber;
|
||||
set: (this: void, value: ModalSettings[]) => void;
|
||||
update: (this: void, updater: import("svelte/store").Updater<ModalSettings[]>) => void;
|
||||
/** Append to end of queue. */
|
||||
trigger: (modal: ModalSettings) => void;
|
||||
/** Remove first item in queue. */
|
||||
close: () => void;
|
||||
/** Remove all items from queue. */
|
||||
clear: () => void;
|
||||
};
|
||||
export {};
|
54
node_modules/@skeletonlabs/skeleton/dist/utilities/Modal/stores.js
generated
vendored
Normal file
54
node_modules/@skeletonlabs/skeleton/dist/utilities/Modal/stores.js
generated
vendored
Normal file
@ -0,0 +1,54 @@
|
||||
// Modal Store Queue
|
||||
import { writable } from 'svelte/store';
|
||||
import { getContext, setContext } from 'svelte';
|
||||
const MODAL_STORE_KEY = 'modalStore';
|
||||
/**
|
||||
* Retrieves the `modalStore`.
|
||||
*
|
||||
* This can *ONLY* be called from the **top level** of components!
|
||||
*
|
||||
* @example
|
||||
* ```svelte
|
||||
* <script>
|
||||
* import { getmodalStore } from "@skeletonlabs/skeleton";
|
||||
*
|
||||
* const modalStore = getModalStore();
|
||||
*
|
||||
* modalStore.trigger({ type: "alert", title: "Welcome!" });
|
||||
* </script>
|
||||
* ```
|
||||
*/
|
||||
export function getModalStore() {
|
||||
const modalStore = getContext(MODAL_STORE_KEY);
|
||||
if (!modalStore)
|
||||
throw new Error('modalStore is not initialized. Please ensure that `initializeStores()` is invoked in the root layout file of this app!');
|
||||
return modalStore;
|
||||
}
|
||||
/**
|
||||
* Initializes the `modalStore`.
|
||||
*/
|
||||
export function initializeModalStore() {
|
||||
const modalStore = modalService();
|
||||
return setContext(MODAL_STORE_KEY, modalStore);
|
||||
}
|
||||
function modalService() {
|
||||
const { subscribe, set, update } = writable([]);
|
||||
return {
|
||||
subscribe,
|
||||
set,
|
||||
update,
|
||||
/** Append to end of queue. */
|
||||
trigger: (modal) => update((mStore) => {
|
||||
mStore.push(modal);
|
||||
return mStore;
|
||||
}),
|
||||
/** Remove first item in queue. */
|
||||
close: () => update((mStore) => {
|
||||
if (mStore.length > 0)
|
||||
mStore.shift();
|
||||
return mStore;
|
||||
}),
|
||||
/** Remove all items from queue. */
|
||||
clear: () => set([])
|
||||
};
|
||||
}
|
41
node_modules/@skeletonlabs/skeleton/dist/utilities/Modal/types.d.ts
generated
vendored
Normal file
41
node_modules/@skeletonlabs/skeleton/dist/utilities/Modal/types.d.ts
generated
vendored
Normal file
@ -0,0 +1,41 @@
|
||||
export type { ModalStore } from './stores.js';
|
||||
export interface ModalComponent {
|
||||
/** Import and provide your component reference. */
|
||||
ref: any;
|
||||
/** Provide component props as key/value pairs. */
|
||||
props?: Record<string, unknown>;
|
||||
/** Provide an HTML template literal for the default slot. */
|
||||
slot?: string;
|
||||
}
|
||||
export interface ModalSettings {
|
||||
/** Designate what type of component will display. */
|
||||
type: 'alert' | 'confirm' | 'prompt' | 'component';
|
||||
/** Set the modal position within the backdrop container. */
|
||||
position?: string;
|
||||
/** Provide the modal header content. Accepts HTML. */
|
||||
title?: string;
|
||||
/** Provide the modal body content. Accepts HTML. */
|
||||
body?: string;
|
||||
/** Provide a URL to display an image within the modal. */
|
||||
image?: string;
|
||||
/** By default, used to provide a prompt value. */
|
||||
value?: any;
|
||||
/** Provide input attributes as key/value pairs. */
|
||||
valueAttr?: object;
|
||||
/** Provide your component reference key or object. */
|
||||
component?: ModalComponent | string;
|
||||
/** Provide a function. Returns the response value. */
|
||||
response?: (r: any) => void;
|
||||
/** Provide arbitrary classes to the backdrop. */
|
||||
backdropClasses?: string;
|
||||
/** Provide arbitrary classes to the modal window. */
|
||||
modalClasses?: string;
|
||||
/** Override the Cancel button label. */
|
||||
buttonTextCancel?: string;
|
||||
/** Override the Confirm button label. */
|
||||
buttonTextConfirm?: string;
|
||||
/** Override the Submit button label. */
|
||||
buttonTextSubmit?: string;
|
||||
/** Pass arbitrary data per modal instance. */
|
||||
meta?: any;
|
||||
}
|
2
node_modules/@skeletonlabs/skeleton/dist/utilities/Modal/types.js
generated
vendored
Normal file
2
node_modules/@skeletonlabs/skeleton/dist/utilities/Modal/types.js
generated
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
// Modal Types
|
||||
export {};
|
Reference in New Issue
Block a user