feat: docker compose maybe
This commit is contained in:
95
node_modules/@skeletonlabs/skeleton/dist/components/Tab/Tab.svelte
generated
vendored
Normal file
95
node_modules/@skeletonlabs/skeleton/dist/components/Tab/Tab.svelte
generated
vendored
Normal 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>
|
49
node_modules/@skeletonlabs/skeleton/dist/components/Tab/Tab.svelte.d.ts
generated
vendored
Normal file
49
node_modules/@skeletonlabs/skeleton/dist/components/Tab/Tab.svelte.d.ts
generated
vendored
Normal 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 {};
|
44
node_modules/@skeletonlabs/skeleton/dist/components/Tab/TabAnchor.svelte
generated
vendored
Normal file
44
node_modules/@skeletonlabs/skeleton/dist/components/Tab/TabAnchor.svelte
generated
vendored
Normal 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>
|
44
node_modules/@skeletonlabs/skeleton/dist/components/Tab/TabAnchor.svelte.d.ts
generated
vendored
Normal file
44
node_modules/@skeletonlabs/skeleton/dist/components/Tab/TabAnchor.svelte.d.ts
generated
vendored
Normal 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 {};
|
44
node_modules/@skeletonlabs/skeleton/dist/components/Tab/TabGroup.svelte
generated
vendored
Normal file
44
node_modules/@skeletonlabs/skeleton/dist/components/Tab/TabGroup.svelte
generated
vendored
Normal 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>
|
48
node_modules/@skeletonlabs/skeleton/dist/components/Tab/TabGroup.svelte.d.ts
generated
vendored
Normal file
48
node_modules/@skeletonlabs/skeleton/dist/components/Tab/TabGroup.svelte.d.ts
generated
vendored
Normal 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 {};
|
Reference in New Issue
Block a user