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,181 @@
<script>import { createEventDispatcher } from "svelte";
import { BROWSER } from "esm-env";
const dispatch = createEventDispatcher();
import { prefersReducedMotionStore } from "../../index.js";
import { focusTrap } from "../../actions/FocusTrap/focusTrap.js";
import { getDrawerStore } from "./stores.js";
import { fade, fly } from "svelte/transition";
import { dynamicTransition } from "../../internal/transitions.js";
export let position = "left";
export let bgDrawer = "bg-surface-100-800-token";
export let border = "";
export let rounded = "";
export let shadow = "shadow-xl";
export let width = "";
export let height = "";
export let bgBackdrop = "bg-surface-backdrop-token";
export let blur = "";
export let padding = "";
export let zIndex = "z-40";
export let regionBackdrop = "";
export let regionDrawer = "";
export let labelledby = "";
export let describedby = "";
export let duration = 200;
export let transitions = !$prefersReducedMotionStore;
export let opacityTransition = true;
const presets = {
top: { alignment: "items-start", width: "w-full", height: "h-[50%]", rounded: "rounded-bl-container-token rounded-br-container-token" },
bottom: { alignment: "items-end", width: "w-full", height: " h-[50%]", rounded: "rounded-tl-container-token rounded-tr-container-token" },
left: { alignment: "justify-start", width: "w-[90%]", height: "h-full", rounded: "rounded-tr-container-token rounded-br-container-token" },
right: { alignment: "justify-end", width: "w-[90%]", height: "h-full", rounded: "rounded-tl-container-token rounded-bl-container-token" }
};
let elemBackdrop;
let elemDrawer;
let anim = { x: 0, y: 0 };
const drawerStore = getDrawerStore();
const cBackdrop = "fixed top-0 left-0 right-0 bottom-0 flex";
const cDrawer = "overflow-y-auto transition-transform";
const propDefaults = {
position,
bgBackdrop,
blur,
padding,
bgDrawer,
border,
rounded,
shadow,
width,
height,
opacityTransition,
regionBackdrop,
regionDrawer,
labelledby,
describedby,
duration
};
function applyPropSettings(settings) {
position = settings.position || propDefaults.position;
bgBackdrop = settings.bgBackdrop || propDefaults.bgBackdrop;
blur = settings.blur || propDefaults.blur;
padding = settings.padding || propDefaults.padding;
bgDrawer = settings.bgDrawer || propDefaults.bgDrawer;
border = settings.border || propDefaults.border;
rounded = settings.rounded || propDefaults.rounded;
shadow = settings.shadow || propDefaults.shadow;
width = settings.width || propDefaults.width;
height = settings.height || propDefaults.height;
regionBackdrop = settings.regionBackdrop || propDefaults.regionBackdrop;
regionDrawer = settings.regionDrawer || propDefaults.regionDrawer;
labelledby = settings.labelledby || propDefaults.labelledby;
describedby = settings.describedby || propDefaults.describedby;
opacityTransition = settings.opacityTransition || propDefaults.opacityTransition;
duration = settings.duration || propDefaults.duration;
}
function applyAnimationSettings() {
if (!BROWSER)
return;
switch (position) {
case "top":
anim = { x: 0, y: -window.innerWidth };
break;
case "bottom":
anim = { x: 0, y: window.innerWidth };
break;
case "left":
anim = { x: -window.innerHeight, y: 0 };
break;
case "right":
anim = { x: window.innerHeight, y: 0 };
break;
default:
console.error("Error: unknown position property value.");
break;
}
}
function onDrawerInteraction(event) {
if (event.target === elemBackdrop) {
drawerStore.close();
dispatch("backdrop", event);
} else {
dispatch("drawer", event);
}
}
function onKeydownWindow(event) {
if (!$drawerStore)
return;
if (event.code === "Escape")
drawerStore.close();
}
drawerStore.subscribe((settings) => {
if (settings.open !== true)
return;
applyPropSettings(settings);
applyAnimationSettings();
});
$:
classesPosition = presets[position].alignment;
$:
classesWidth = width ? width : presets[position].width;
$:
classesHeight = height ? height : presets[position].height;
$:
classesRounded = rounded ? rounded : presets[position].rounded;
$:
classesBackdrop = `${cBackdrop} ${bgBackdrop} ${padding} ${blur} ${classesPosition} ${regionBackdrop} ${zIndex} ${$$props.class ?? ""}`;
$:
classesDrawer = `${cDrawer} ${bgDrawer} ${border} ${rounded} ${shadow} ${classesWidth} ${classesHeight} ${classesRounded} ${regionDrawer}`;
</script>
<svelte:window on:keydown={onKeydownWindow} />
{#if $drawerStore.open === true}
<!-- Backdrop -->
<!-- FIXME: resolve a11y warnings -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div
bind:this={elemBackdrop}
class="drawer-backdrop {classesBackdrop}"
data-testid="drawer-backdrop"
on:mousedown={onDrawerInteraction}
on:touchstart
on:touchend
on:keypress
in:dynamicTransition|local={{
transition: fade,
params: { duration },
enabled: transitions && opacityTransition
}}
out:dynamicTransition|local={{
transition: fade,
params: { duration },
enabled: transitions && opacityTransition
}}
use:focusTrap={true}
>
<!-- Drawer -->
<!-- separate In/Out so anim values update -->
<div
bind:this={elemDrawer}
class="drawer {classesDrawer}"
data-testid="drawer"
role="dialog"
aria-modal="true"
aria-labelledby={labelledby}
aria-describedby={describedby}
in:dynamicTransition|local={{
transition: fly,
params: { x: anim.x, y: anim.y, duration, opacity: opacityTransition ? undefined : 1 },
enabled: transitions
}}
out:dynamicTransition|local={{
transition: fly,
params: { x: anim.x, y: anim.y, duration, opacity: opacityTransition ? undefined : 1 },
enabled: transitions
}}
>
<!-- Slot: Default -->
<slot />
</div>
</div>
{/if}

View File

@ -0,0 +1,62 @@
import { SvelteComponentTyped } from "svelte";
declare const __propDef: {
props: {
[x: string]: any;
/** Set the anchor position.*/
position?: "left" | "top" | "right" | "bottom" | undefined;
/** Drawer - Provide classes to set the drawer background color.*/
bgDrawer?: string | undefined;
/** Drawer - Provide classes to set border color.*/
border?: string | undefined;
/** Drawer - Provide classes to set border radius.*/
rounded?: string | undefined;
/** Drawer - Provide classes to set the box shadow.*/
shadow?: string | undefined;
/** Drawer - Provide classes to override the width.*/
width?: string | undefined;
/** Drawer - Provide classes to override the height.*/
height?: string | undefined;
/** Backdrop - Provide classes to set the backdrop background color*/
bgBackdrop?: string | undefined;
/** Backdrop - Provide classes to set the blur style.*/
blur?: string | undefined;
/** Backdrop - Provide classes to set padding.*/
padding?: string | undefined;
/** Backdrop - Provide a class to override the z-index*/
zIndex?: string | undefined;
/** Provide arbitrary classes to the backdrop region.*/
regionBackdrop?: string | undefined;
/** Provide arbitrary classes to the drawer region.*/
regionDrawer?: string | undefined;
/** Provide an ID of the element labeling the drawer.*/
labelledby?: string | undefined;
/** Provide an ID of the element describing the drawer.*/
describedby?: string | undefined;
/** Set the transition duration in milliseconds.*/
duration?: number | undefined;
/** Enable/Disable transitions*/
transitions?: boolean | undefined;
/** Enable/Disable opacity transition of Drawer*/
opacityTransition?: boolean | undefined;
};
events: {
touchstart: TouchEvent;
touchend: TouchEvent;
keypress: KeyboardEvent;
/** {{ event }} backdrop - Fires on backdrop interaction.*/
backdrop: CustomEvent<MouseEvent>;
/** {{ event }} drawer - Fires on drawer interaction.*/
drawer: CustomEvent<MouseEvent>;
} & {
[evt: string]: CustomEvent<any>;
};
slots: {
default: {};
};
};
export type DrawerProps = typeof __propDef.props;
export type DrawerEvents = typeof __propDef.events;
export type DrawerSlots = typeof __propDef.slots;
export default class Drawer extends SvelteComponentTyped<DrawerProps, DrawerEvents, DrawerSlots> {
}
export {};

View File

@ -0,0 +1,34 @@
/// <reference types="svelte" />
import type { DrawerSettings } from './types.js';
/**
* Retrieves the `drawerStore`.
*
* This can *ONLY* be called from the **top level** of components!
*
* @example
* ```svelte
* <script>
* import { getDrawerStore } from "@skeletonlabs/skeleton";
*
* const drawerStore = getDrawerStore();
*
* drawerStore.open();
* </script>
* ```
*/
export declare function getDrawerStore(): DrawerStore;
/**
* Initializes the `drawerStore`.
*/
export declare function initializeDrawerStore(): DrawerStore;
export type DrawerStore = ReturnType<typeof drawerService>;
declare function drawerService(): {
subscribe: (this: void, run: import("svelte/store").Subscriber<DrawerSettings>, invalidate?: import("svelte/store").Invalidator<DrawerSettings> | undefined) => import("svelte/store").Unsubscriber;
set: (this: void, value: DrawerSettings) => void;
update: (this: void, updater: import("svelte/store").Updater<DrawerSettings>) => void;
/** Open the drawer. */
open: (newSettings?: DrawerSettings) => void;
/** Close the drawer. */
close: () => void;
};
export {};

View File

@ -0,0 +1,50 @@
// Drawer Stores
import { writable } from 'svelte/store';
import { getContext, setContext } from 'svelte';
const DRAWER_STORE_KEY = 'drawerStore';
/**
* Retrieves the `drawerStore`.
*
* This can *ONLY* be called from the **top level** of components!
*
* @example
* ```svelte
* <script>
* import { getDrawerStore } from "@skeletonlabs/skeleton";
*
* const drawerStore = getDrawerStore();
*
* drawerStore.open();
* </script>
* ```
*/
export function getDrawerStore() {
const drawerStore = getContext(DRAWER_STORE_KEY);
if (!drawerStore)
throw new Error('drawerStore is not initialized. Please ensure that `initializeStores()` is invoked in the root layout file of this app!');
return drawerStore;
}
/**
* Initializes the `drawerStore`.
*/
export function initializeDrawerStore() {
const drawerStore = drawerService();
return setContext(DRAWER_STORE_KEY, drawerStore);
}
function drawerService() {
const { subscribe, set, update } = writable({});
return {
subscribe,
set,
update,
/** Open the drawer. */
open: (newSettings) => update(() => {
return { open: true, ...newSettings };
}),
/** Close the drawer. */
close: () => update((d) => {
d.open = false;
return d;
})
};
}

View File

@ -0,0 +1,42 @@
export type { DrawerStore } from './stores.js';
export interface DrawerSettings {
open?: boolean;
/** A unique identifier, useful for setting contents. */
id?: string;
/** Pass arbitrary information for your own persona use. */
meta?: any;
/** Set the anchor position.
* @type {'left' | 'top' | 'right' | 'bottom'}
*/
position?: 'left' | 'top' | 'right' | 'bottom';
/** Backdrop - Provide classes to set the backdrop background color*/
bgBackdrop?: string;
/** Backdrop - Provide classes to set the blur style.*/
blur?: string;
/** Drawer - Provide classes to set padding.*/
padding?: string;
/** Drawer - Provide classes to set the drawer background color.*/
bgDrawer?: string;
/** Drawer - Provide classes to set border color.*/
border?: string;
/** Drawer - Provide classes to set border radius.*/
rounded?: string;
/** Drawer - Provide classes to set box shadow.*/
shadow?: string;
/** Drawer - Provide classes to override the width.*/
width?: string;
/** Drawer - Provide classes to override the height.*/
height?: string;
/** Define the Svelte transition animation duration.*/
duration?: number;
/** Drawer - Enable/Disable opacity transition */
opacityTransition?: boolean;
/** Provide arbitrary classes to the backdrop region. */
regionBackdrop?: string;
/** Provide arbitrary classes to the drawer region. */
regionDrawer?: string;
/** Provide an ID of the element labeling the drawer.*/
labelledby?: string;
/** Provide an ID of the element describing the drawer.*/
describedby?: string;
}

View File

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