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,95 @@
<script>import { getContext } from "svelte";
export let group;
export let name;
export let value;
export let title = "";
export let controls = "";
export let regionTab = "";
export let active = getContext("active");
export let hover = getContext("hover");
export let flex = getContext("flex");
export let padding = getContext("padding");
export let rounded = getContext("rounded");
export let spacing = getContext("spacing");
const cBase = "text-center cursor-pointer transition-colors duration-100";
const cInterface = "";
let elemInput;
function onKeyDown(event) {
if (["Enter", "Space"].includes(event.code)) {
event.preventDefault();
elemInput.click();
} else if (event.code === "ArrowRight") {
const tabList = elemInput.closest(".tab-list");
if (!tabList)
return;
const tabs = Array.from(tabList.querySelectorAll(".tab"));
const currTab = elemInput.closest(".tab");
if (!currTab)
return;
const currIndex = tabs.indexOf(currTab);
const nextIndex = currIndex + 1 >= tabs.length ? 0 : currIndex + 1;
const nextTab = tabs[nextIndex];
const nextTabInput = nextTab?.querySelector("input");
if (nextTab && nextTabInput) {
nextTabInput.click();
nextTab.focus();
}
} else if (event.code === "ArrowLeft") {
const tabList = elemInput.closest(".tab-list");
if (!tabList)
return;
const tabs = Array.from(tabList.querySelectorAll(".tab"));
const currTab = elemInput.closest(".tab");
if (!currTab)
return;
const currIndex = tabs.indexOf(currTab);
const nextIndex = currIndex - 1 < 0 ? tabs.length - 1 : currIndex - 1;
const nextTab = tabs[nextIndex];
const nextTabInput = nextTab?.querySelector("input");
if (nextTab && nextTabInput) {
nextTabInput.click();
nextTab.focus();
}
}
}
$:
selected = value === group;
$:
classesActive = selected ? active : hover;
$:
classesBase = `${cBase} ${flex} ${padding} ${rounded} ${classesActive} ${$$props.class ?? ""}`;
$:
classesInterface = `${cInterface} ${spacing}`;
$:
classesTab = `${regionTab}`;
function prunedRestProps() {
delete $$restProps.class;
return $$restProps;
}
</script>
<label class={classesBase} {title}>
<!-- A11y attributes are not allowed on <label> -->
<div
class="tab {classesTab}"
data-testid="tab"
role="tab"
aria-controls={controls}
aria-selected={selected}
tabindex={selected ? 0 : -1}
on:keydown={onKeyDown}
on:keydown
on:keyup
on:keypress
>
<!-- NOTE: Don't use `hidden` as it prevents `required` from operating -->
<div class="h-0 w-0 overflow-hidden">
<input bind:this={elemInput} type="radio" bind:group {name} {value} {...prunedRestProps()} tabindex="-1" on:click on:change />
</div>
<!-- Interface -->
<div class="tab-interface {classesInterface}">
{#if $$slots.lead}<div class="tab-lead"><slot name="lead" /></div>{/if}
<div class="tab-label"><slot /></div>
</div>
</div>
</label>

View File

@ -0,0 +1,49 @@
import { SvelteComponentTyped } from "svelte";
declare const __propDef: {
props: {
[x: string]: any;
/** Set the radio group binding value.*/
group: any;
/** Set a unique name value for the input.*/
name: string;
/** Set the input's value.*/
value: any;
/** Provide a hoverable title attribute for the tab.*/
title?: string | undefined;
/** Set the ARIA controls value to define which panel this tab controls.*/
controls?: string | undefined;
/** Provide arbitrary classes to style the tab region.*/
regionTab?: string | undefined;
/** Provide classes to style each tab's active styles.*/
active?: string | undefined;
/** Provide classes to style each tab's hover styles.*/
hover?: string | undefined;
/** Provide classes to style each tab's flex styles.*/
flex?: string | undefined;
/** Provide classes to style each tab's padding styles.*/
padding?: string | undefined;
/** Provide classes to style each tab's box radius styles.*/
rounded?: string | undefined;
/** Provide classes to set the vertical spacing between items.*/
spacing?: string | undefined;
};
events: {
keydown: KeyboardEvent;
keyup: KeyboardEvent;
keypress: KeyboardEvent;
click: MouseEvent;
change: Event;
} & {
[evt: string]: CustomEvent<any>;
};
slots: {
lead: {};
default: {};
};
};
export type TabProps = typeof __propDef.props;
export type TabEvents = typeof __propDef.events;
export type TabSlots = typeof __propDef.slots;
export default class Tab extends SvelteComponentTyped<TabProps, TabEvents, TabSlots> {
}
export {};

View File

@ -0,0 +1,44 @@
<script>import { getContext } from "svelte";
export let selected = false;
export let controls = "";
export let active = getContext("active");
export let hover = getContext("hover");
export let flex = getContext("flex");
export let padding = getContext("padding");
export let rounded = getContext("rounded");
export let spacing = getContext("spacing");
const cBase = "text-center cursor-pointer transition-colors duration-100";
const cInterface = "";
$:
classesActive = selected ? active : hover;
$:
classesBase = `${cBase} ${flex} ${padding} ${rounded} ${classesActive} ${$$props.class ?? ""}`;
$:
classesInterface = `${cInterface} ${spacing}`;
function prunedRestProps() {
delete $$restProps.class;
return $$restProps;
}
</script>
<a
class="tab-anchor {classesBase}"
href={$$props.href}
{...prunedRestProps()}
aria-controls={controls}
on:click
on:keydown
on:keyup
on:keypress
on:mouseover
on:mouseleave
on:focus
on:blur
data-testid="tab-anchor"
>
<!-- Interface -->
<div class="tab-interface {classesInterface}">
{#if $$slots.lead}<div class="tab-lead"><slot name="lead" /></div>{/if}
<div class="tab-label"><slot /></div>
</div>
</a>

View File

@ -0,0 +1,44 @@
import { SvelteComponentTyped } from "svelte";
declare const __propDef: {
props: {
[x: string]: any;
/** Enables the active state styles when set true.*/
selected?: boolean | undefined;
/** Set the ARIA controls value to define which panel this tab controls.*/
controls?: string | undefined;
/** Provide classes to style each tab's active styles.*/
active?: string | undefined;
/** Provide classes to style each tab's hover styles.*/
hover?: string | undefined;
/** Provide classes to style each tab's flex styles.*/
flex?: string | undefined;
/** Provide classes to style each tab's padding styles.*/
padding?: string | undefined;
/** Provide classes to style each tab's box radius styles.*/
rounded?: string | undefined;
/** Provide classes to set the vertical spacing between items.*/
spacing?: string | undefined;
};
events: {
click: MouseEvent;
keydown: KeyboardEvent;
keyup: KeyboardEvent;
keypress: KeyboardEvent;
mouseover: MouseEvent;
mouseleave: MouseEvent;
focus: FocusEvent;
blur: FocusEvent;
} & {
[evt: string]: CustomEvent<any>;
};
slots: {
lead: {};
default: {};
};
};
export type TabAnchorProps = typeof __propDef.props;
export type TabAnchorEvents = typeof __propDef.events;
export type TabAnchorSlots = typeof __propDef.slots;
export default class TabAnchor extends SvelteComponentTyped<TabAnchorProps, TabAnchorEvents, TabAnchorSlots> {
}
export {};

View File

@ -0,0 +1,44 @@
<script>import { setContext } from "svelte";
export let justify = "justify-start";
export let border = "border-b border-surface-400-500-token";
export let active = "border-b-2 border-surface-900-50-token";
export let hover = "hover:variant-soft";
export let flex = "flex-none";
export let padding = "px-4 py-2";
export let rounded = "rounded-tl-container-token rounded-tr-container-token";
export let spacing = "space-y-1";
export let regionList = "";
export let regionPanel = "";
export let labelledby = "";
export let panel = "";
setContext("active", active);
setContext("hover", hover);
setContext("flex", flex);
setContext("padding", padding);
setContext("rounded", rounded);
setContext("spacing", spacing);
const cBase = "space-y-4";
const cList = "flex overflow-x-auto hide-scrollbar";
const cPanel = "";
$:
classesBase = `${cBase} ${$$props.class ?? ""}`;
$:
classesList = `${cList} ${justify} ${border} ${regionList}`;
$:
classesPanel = `${cPanel} ${regionPanel}`;
</script>
<!-- FIXME: resolve a11y warnings -->
<!-- svelte-ignore a11y-no-static-element-interactions -->
<div class="tab-group {classesBase}" data-testid="tab-group" on:click on:keypress on:keydown on:keyup>
<!-- Tab List -->
<div class="tab-list {classesList}" role="tablist" aria-labelledby={labelledby}>
<slot />
</div>
<!-- Tab Panel -->
{#if $$slots.panel}
<div class="tab-panel {classesPanel}" role="tabpanel" aria-labelledby={panel} tabindex="0">
<slot name="panel" />
</div>
{/if}
</div>

View File

@ -0,0 +1,48 @@
import { SvelteComponentTyped } from "svelte";
declare const __propDef: {
props: {
[x: string]: any;
/** Provide classes to set the tab list flex justification.*/
justify?: string | undefined;
/** Provide classes to set the tab group border styles.*/
border?: string | undefined;
/** Provide classes to style each tab's active styles.*/
active?: string | undefined;
/** Provide classes to style each tab's hover styles.*/
hover?: string | undefined;
/** Provide classes to style each tab's flex styles.*/
flex?: string | undefined;
/** Provide classes to style each tab's padding styles.*/
padding?: string | undefined;
/** Provide classes to style each tab's box radius styles.*/
rounded?: string | undefined;
/** Provide classes to set the vertical spacing between items.*/
spacing?: string | undefined;
/** Provide arbitrary classes to style the tab list region.*/
regionList?: string | undefined;
/** Provide arbitrary classes to style the tab panel region.*/
regionPanel?: string | undefined;
/** Provide the ID of the element that labels the tab list.*/
labelledby?: string | undefined;
/** Matches the tab aria-control value, pairs with the panel.*/
panel?: string | undefined;
};
events: {
click: MouseEvent;
keypress: KeyboardEvent;
keydown: KeyboardEvent;
keyup: KeyboardEvent;
} & {
[evt: string]: CustomEvent<any>;
};
slots: {
default: {};
panel: {};
};
};
export type TabGroupProps = typeof __propDef.props;
export type TabGroupEvents = typeof __propDef.events;
export type TabGroupSlots = typeof __propDef.slots;
export default class TabGroup extends SvelteComponentTyped<TabGroupProps, TabGroupEvents, TabGroupSlots> {
}
export {};