feat: docker compose maybe

This commit is contained in:
2023-11-13 16:10:04 -05:00
parent 180b261e40
commit b625ccd8d6
8031 changed files with 2182966 additions and 0 deletions

View 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}

View 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 {};

View 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 />

View 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 {};

View 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 {};

View 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([])
};
}

View 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;
}

View File

@ -0,0 +1,2 @@
// Modal Types
export {};