feat: docker compose maybe
This commit is contained in:
181
node_modules/@skeletonlabs/skeleton/dist/utilities/Drawer/Drawer.svelte
generated
vendored
Normal file
181
node_modules/@skeletonlabs/skeleton/dist/utilities/Drawer/Drawer.svelte
generated
vendored
Normal 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}
|
62
node_modules/@skeletonlabs/skeleton/dist/utilities/Drawer/Drawer.svelte.d.ts
generated
vendored
Normal file
62
node_modules/@skeletonlabs/skeleton/dist/utilities/Drawer/Drawer.svelte.d.ts
generated
vendored
Normal 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 {};
|
34
node_modules/@skeletonlabs/skeleton/dist/utilities/Drawer/stores.d.ts
generated
vendored
Normal file
34
node_modules/@skeletonlabs/skeleton/dist/utilities/Drawer/stores.d.ts
generated
vendored
Normal 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 {};
|
50
node_modules/@skeletonlabs/skeleton/dist/utilities/Drawer/stores.js
generated
vendored
Normal file
50
node_modules/@skeletonlabs/skeleton/dist/utilities/Drawer/stores.js
generated
vendored
Normal 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;
|
||||
})
|
||||
};
|
||||
}
|
42
node_modules/@skeletonlabs/skeleton/dist/utilities/Drawer/types.d.ts
generated
vendored
Normal file
42
node_modules/@skeletonlabs/skeleton/dist/utilities/Drawer/types.d.ts
generated
vendored
Normal 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;
|
||||
}
|
2
node_modules/@skeletonlabs/skeleton/dist/utilities/Drawer/types.js
generated
vendored
Normal file
2
node_modules/@skeletonlabs/skeleton/dist/utilities/Drawer/types.js
generated
vendored
Normal file
@ -0,0 +1,2 @@
|
||||
// Drawer Types
|
||||
export {};
|
Reference in New Issue
Block a user