feat: docker compose maybe
This commit is contained in:
111
node_modules/@skeletonlabs/skeleton/dist/components/Stepper/Step.svelte
generated
vendored
Normal file
111
node_modules/@skeletonlabs/skeleton/dist/components/Stepper/Step.svelte
generated
vendored
Normal 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}
|
54
node_modules/@skeletonlabs/skeleton/dist/components/Stepper/Step.svelte.d.ts
generated
vendored
Normal file
54
node_modules/@skeletonlabs/skeleton/dist/components/Stepper/Step.svelte.d.ts
generated
vendored
Normal 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 {};
|
89
node_modules/@skeletonlabs/skeleton/dist/components/Stepper/Stepper.svelte
generated
vendored
Normal file
89
node_modules/@skeletonlabs/skeleton/dist/components/Stepper/Stepper.svelte
generated
vendored
Normal 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 = "← Back";
|
||||
export let buttonNext = "variant-filled";
|
||||
export let buttonNextType = "button";
|
||||
export let buttonNextLabel = "Next →";
|
||||
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>
|
85
node_modules/@skeletonlabs/skeleton/dist/components/Stepper/Stepper.svelte.d.ts
generated
vendored
Normal file
85
node_modules/@skeletonlabs/skeleton/dist/components/Stepper/Stepper.svelte.d.ts
generated
vendored
Normal 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 {};
|
25
node_modules/@skeletonlabs/skeleton/dist/components/Stepper/types.d.ts
generated
vendored
Normal file
25
node_modules/@skeletonlabs/skeleton/dist/components/Stepper/types.d.ts
generated
vendored
Normal 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>;
|
1
node_modules/@skeletonlabs/skeleton/dist/components/Stepper/types.js
generated
vendored
Normal file
1
node_modules/@skeletonlabs/skeleton/dist/components/Stepper/types.js
generated
vendored
Normal file
@ -0,0 +1 @@
|
||||
export {};
|
Reference in New Issue
Block a user