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,111 @@
<!-- Reference: https://dribbble.com/shots/16221169-Figma-Material-Ui-components-Steppers-and-sliders -->
<script>import { getContext, onDestroy } from "svelte";
import { dynamicTransition } from "../../internal/transitions.js";
export let locked = false;
export let regionHeader = "";
export let regionContent = "";
export let regionNavigation = "";
export let state = getContext("state");
export let dispatchParent = getContext("dispatchParent");
export let stepTerm = getContext("stepTerm");
export let gap = getContext("gap");
export let justify = getContext("justify");
export let buttonBack = getContext("buttonBack");
export let buttonBackType = getContext("buttonBackType");
export let buttonBackLabel = getContext("buttonBackLabel");
export let buttonNext = getContext("buttonNext");
export let buttonNextType = getContext("buttonNextType");
export let buttonNextLabel = getContext("buttonNextLabel");
export let buttonComplete = getContext("buttonComplete");
export let buttonCompleteType = getContext("buttonCompleteType");
export let buttonCompleteLabel = getContext("buttonCompleteLabel");
export let transitions = getContext("transitions");
export let transitionIn = getContext("transitionIn");
export let transitionInParams = getContext("transitionInParams");
export let transitionOut = getContext("transitionOut");
export let transitionOutParams = getContext("transitionOutParams");
const stepIndex = $state.total;
$state.total++;
const cBase = "space-y-4";
const cHeader = "text-2xl font-bold";
const cContent = "space-y-4";
const cNavigation = "flex";
async function onNext() {
await new Promise((resolve) => setTimeout(resolve));
if (locked)
return;
$state.current++;
dispatchParent("next", { step: stepIndex, state: $state });
dispatchParent("step", { step: stepIndex, state: $state });
}
function onBack() {
$state.current--;
dispatchParent("back", { step: stepIndex, state: $state });
dispatchParent("step", { step: stepIndex, state: $state });
}
function onComplete() {
dispatchParent("complete", { step: stepIndex, state: $state });
}
$:
classesBase = `${cBase} ${$$props.class ?? ""}`;
$:
classesHeader = `${cHeader} ${regionHeader}`;
$:
classesContent = `${cContent} ${regionContent}`;
$:
classesNavigation = `${cNavigation} ${justify} ${gap} ${regionNavigation}`;
onDestroy(() => {
$state.total--;
});
</script>
{#if stepIndex === $state.current}
<div class="step {classesBase}" data-testid="step">
<!-- Slot: Header -->
<header class="step-header {classesHeader}">
<slot name="header">{stepTerm} {stepIndex + 1}</slot>
</header>
<!-- Slot: Default -->
<div class="step-content {classesContent}">
<slot>({stepTerm} {stepIndex + 1} Content)</slot>
</div>
<!-- Navigation -->
{#if $state.total > 1}
<div
class="step-navigation {classesNavigation}"
in:dynamicTransition|local={{ transition: transitionIn, params: transitionInParams, enabled: transitions }}
out:dynamicTransition|local={{ transition: transitionOut, params: transitionOutParams, enabled: transitions }}
>
{#if stepIndex === 0 && $$slots.navigation}
<!-- Slot: Navigation -->
<div class="step-navigation-slot">
<slot name="navigation" />
</div>
{:else}
<!-- Button: Back -->
<button type={buttonBackType} class="btn {buttonBack}" on:click={onBack} disabled={$state.current === 0}>
{@html buttonBackLabel}
</button>
{/if}
{#if stepIndex < $state.total - 1}
<!-- Button: Next -->
<button type={buttonNextType} class="btn {buttonNext}" on:click={onNext} disabled={locked}>
{#if locked}
<svg class="w-3 aspect-square fill-current" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
<path
d="M144 144v48H304V144c0-44.2-35.8-80-80-80s-80 35.8-80 80zM80 192V144C80 64.5 144.5 0 224 0s144 64.5 144 144v48h16c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V256c0-35.3 28.7-64 64-64H80z"
/>
</svg>
{/if}
<span>{@html buttonNextLabel}</span>
</button>
{:else}
<!-- Button: Complete -->
<button type={buttonCompleteType} class="btn {buttonComplete}" on:click={onComplete} disabled={locked}>
{@html buttonCompleteLabel}
</button>
{/if}
</div>
{/if}
</div>
{/if}

View File

@ -0,0 +1,54 @@
import { SvelteComponentTyped } from "svelte";
import type { Writable } from 'svelte/store';
import type { StepperEventDispatcher, StepperState } from './types.js';
import type { Transition, TransitionParams } from '../../index.js';
declare class __sveltets_Render<TransitionIn extends Transition, TransitionOut extends Transition> {
props(): {
[x: string]: any;
locked?: boolean | undefined;
/** Provide arbitrary classes to the step header region.*/
regionHeader?: string | undefined;
/** Provide arbitrary classes to the step content region.*/
regionContent?: string | undefined;
/** Provide arbitrary classes to the step navigation region.*/
regionNavigation?: string | undefined;
state?: Writable<StepperState> | undefined;
dispatchParent?: StepperEventDispatcher | undefined;
stepTerm?: string | undefined;
gap?: string | undefined;
justify?: string | undefined;
buttonBack?: string | undefined;
buttonBackType?: "button" | "reset" | "submit" | undefined;
buttonBackLabel?: string | undefined;
buttonNext?: string | undefined;
buttonNextType?: "button" | "reset" | "submit" | undefined;
buttonNextLabel?: string | undefined;
buttonComplete?: string | undefined;
buttonCompleteType?: "button" | "reset" | "submit" | undefined;
buttonCompleteLabel?: string | undefined;
/** Enable/Disable transitions*/
transitions?: boolean | undefined;
/** Provide the transition to used on entry.*/
transitionIn?: TransitionIn | undefined;
/** Transition params provided to `transitionIn`.*/
transitionInParams?: TransitionParams<TransitionIn> | undefined;
/** Provide the transition to used on exit.*/
transitionOut?: TransitionOut | undefined;
/** Transition params provided to `transitionOut`.*/
transitionOutParams?: TransitionParams<TransitionOut> | undefined;
};
events(): {} & {
[evt: string]: CustomEvent<any>;
};
slots(): {
header: {};
default: {};
navigation: {};
};
}
export type StepProps<TransitionIn extends Transition, TransitionOut extends Transition> = ReturnType<__sveltets_Render<TransitionIn, TransitionOut>['props']>;
export type StepEvents<TransitionIn extends Transition, TransitionOut extends Transition> = ReturnType<__sveltets_Render<TransitionIn, TransitionOut>['events']>;
export type StepSlots<TransitionIn extends Transition, TransitionOut extends Transition> = ReturnType<__sveltets_Render<TransitionIn, TransitionOut>['slots']>;
export default class Step<TransitionIn extends Transition, TransitionOut extends Transition> extends SvelteComponentTyped<StepProps<TransitionIn, TransitionOut>, StepEvents<TransitionIn, TransitionOut>, StepSlots<TransitionIn, TransitionOut>> {
}
export {};

View File

@ -0,0 +1,89 @@
<script context="module">import { fade } from "svelte/transition";
import { prefersReducedMotionStore } from "../../index.js";
</script>
<script generics="TransitionIn extends Transition = FadeTransition, TransitionOut extends Transition = FadeTransition">import { createEventDispatcher, setContext } from "svelte";
import { writable } from "svelte/store";
import { dynamicTransition } from "../../internal/transitions.js";
const dispatch = createEventDispatcher();
export let gap = "gap-4";
export let stepTerm = "Step";
export let badge = "variant-filled-surface";
export let active = "variant-filled";
export let border = "border-surface-400-500-token";
export let start = 0;
export let justify = "justify-between";
export let buttonBack = "variant-ghost";
export let buttonBackType = "button";
export let buttonBackLabel = "&larr; Back";
export let buttonNext = "variant-filled";
export let buttonNextType = "button";
export let buttonNextLabel = "Next &rarr;";
export let buttonComplete = "variant-filled-primary";
export let buttonCompleteType = "button";
export let buttonCompleteLabel = "Complete";
export let regionHeader = "";
export let regionContent = "";
export let transitions = !$prefersReducedMotionStore;
export let transitionIn = fade;
export let transitionInParams = { duration: 100 };
export let transitionOut = fade;
export let transitionOutParams = { duration: 100 };
let state = writable({ current: start, total: 0 });
setContext("state", state);
setContext("dispatchParent", dispatch);
setContext("stepTerm", stepTerm);
setContext("gap", gap);
setContext("justify", justify);
setContext("buttonBack", buttonBack);
setContext("buttonBackType", buttonBackType);
setContext("buttonBackLabel", buttonBackLabel);
setContext("buttonNext", buttonNext);
setContext("buttonNextType", buttonNextType);
setContext("buttonNextLabel", buttonNextLabel);
setContext("buttonComplete", buttonComplete);
setContext("buttonCompleteType", buttonCompleteType);
setContext("buttonCompleteLabel", buttonCompleteLabel);
setContext("transitions", transitions);
setContext("transitionIn", transitionIn);
setContext("transitionInParams", transitionInParams);
setContext("transitionOut", transitionOut);
setContext("transitionOutParams", transitionOutParams);
const cBase = "space-y-4";
const cHeader = "flex items-center border-t mt-[15px]";
const cHeaderStep = "-mt-[15px] transition-all duration-300";
const cContent = "";
$:
isActive = (step) => step === $state.current;
$:
classesBase = `${cBase} ${$$props.class ?? ""}`;
$:
classesHeader = `${cHeader} ${border} ${gap} ${regionHeader}`;
$:
classesHeaderStep = `${cHeaderStep}`;
$:
classesBadge = (step) => isActive(step) ? active : badge;
$:
classesContent = `${cContent} ${regionContent}`;
</script>
<div class="stepper {classesBase}" data-testid="stepper">
<!-- Header -->
{#if $state.total}
<header
class="stepper-header {classesHeader}"
in:dynamicTransition|local={{ transition: transitionIn, params: transitionInParams, enabled: transitions }}
out:dynamicTransition|local={{ transition: transitionOut, params: transitionOutParams, enabled: transitions }}
>
{#each Array.from(Array($state.total).keys()) as step}
<div class="stepper-header-step {classesHeaderStep}" class:flex-1={isActive(step)}>
<span class="badge {classesBadge(step)}">{isActive(step) ? `${stepTerm} ${step + 1}` : step + 1}</span>
</div>
{/each}
</header>
{/if}
<!-- Content -->
<div class="stepper-content {classesContent}">
<slot />
</div>
</div>

View File

@ -0,0 +1,85 @@
import { SvelteComponentTyped } from "svelte";
import { fade } from 'svelte/transition';
import { type Transition, type TransitionParams } from '../../index.js';
type FadeTransition = typeof fade;
import type { StepperButton, StepperState } from './types.js';
declare class __sveltets_Render<TransitionIn extends Transition = FadeTransition, TransitionOut extends Transition = FadeTransition> {
props(): {
[x: string]: any;
/** Provide classes to style the stepper header gap.*/
gap?: string | undefined;
/** Provide the verbiage that represents "Step".*/
stepTerm?: string | undefined;
/** Provide classes to style the stepper header badges.*/
badge?: string | undefined;
/** Provide classes to style the stepper header active step badge.*/
active?: string | undefined;
/** Provide classes to style the stepper header border.*/
border?: string | undefined;
/** Provide the initially selected step*/
start?: number | undefined;
/** Set the justification for the step navigation buttons.*/
justify?: string | undefined;
/** Provide arbitrary classes to style the back button.*/
buttonBack?: string | undefined;
/** Set the type of the back button.*/
buttonBackType?: StepperButton | undefined;
/** Provide the HTML label content for the back button.*/
buttonBackLabel?: string | undefined;
/** Provide arbitrary classes to style the next button.*/
buttonNext?: string | undefined;
/** Set the type of the next button.*/
buttonNextType?: StepperButton | undefined;
/** Provide the HTML label content for the next button.*/
buttonNextLabel?: string | undefined;
/** Provide arbitrary classes to style the complete button.*/
buttonComplete?: string | undefined;
/** Set the type of the complete button.*/
buttonCompleteType?: StepperButton | undefined;
/** Provide the HTML label content for the complete button.*/
buttonCompleteLabel?: string | undefined;
/** Provide arbitrary classes to the stepper header region.*/
regionHeader?: string | undefined;
/** Provide arbitrary classes to the stepper content region.*/
regionContent?: string | undefined;
/** Enable/Disable transitions*/
transitions?: boolean | undefined;
/** Provide the transition to used on entry.*/
transitionIn?: TransitionIn | undefined;
/** Transition params provided to `transitionIn`.*/
transitionInParams?: TransitionParams<TransitionIn> | undefined;
/** Provide the transition to used on exit.*/
transitionOut?: TransitionOut | undefined;
/** Transition params provided to `transitionOut`.*/
transitionOutParams?: TransitionParams<TransitionOut> | undefined;
};
events(): {
next: CustomEvent<{
step: number;
state: StepperState;
}>;
step: CustomEvent<{
step: number;
state: StepperState;
}>;
back: CustomEvent<{
step: number;
state: StepperState;
}>;
complete: CustomEvent<{
step: number;
state: StepperState;
}>;
} & {
[evt: string]: CustomEvent<any>;
};
slots(): {
default: {};
};
}
export type StepperProps<TransitionIn extends Transition = FadeTransition, TransitionOut extends Transition = FadeTransition> = ReturnType<__sveltets_Render<TransitionIn, TransitionOut>['props']>;
export type StepperEvents<TransitionIn extends Transition = FadeTransition, TransitionOut extends Transition = FadeTransition> = ReturnType<__sveltets_Render<TransitionIn, TransitionOut>['events']>;
export type StepperSlots<TransitionIn extends Transition = FadeTransition, TransitionOut extends Transition = FadeTransition> = ReturnType<__sveltets_Render<TransitionIn, TransitionOut>['slots']>;
export default class Stepper<TransitionIn extends Transition = FadeTransition, TransitionOut extends Transition = FadeTransition> extends SvelteComponentTyped<StepperProps<TransitionIn, TransitionOut>, StepperEvents<TransitionIn, TransitionOut>, StepperSlots<TransitionIn, TransitionOut>> {
}
export {};

View File

@ -0,0 +1,25 @@
import type { EventDispatcher } from 'svelte';
export interface StepperState {
current: number;
total: number;
}
export type StepperButton = 'submit' | 'reset' | 'button';
export type StepperEvent = {
next: {
step: number;
state: StepperState;
};
step: {
step: number;
state: StepperState;
};
back: {
step: number;
state: StepperState;
};
complete: {
step: number;
state: StepperState;
};
};
export type StepperEventDispatcher = EventDispatcher<StepperEvent>;

View File

@ -0,0 +1 @@
export {};