feat: docker compose maybe
This commit is contained in:
75
node_modules/@skeletonlabs/skeleton/dist/components/TreeView/RecursiveTreeView.svelte
generated
vendored
Normal file
75
node_modules/@skeletonlabs/skeleton/dist/components/TreeView/RecursiveTreeView.svelte
generated
vendored
Normal file
@ -0,0 +1,75 @@
|
||||
<script>import { createEventDispatcher, setContext } from "svelte";
|
||||
import RecursiveTreeViewItem from "./RecursiveTreeViewItem.svelte";
|
||||
export let selection = false;
|
||||
export let multiple = false;
|
||||
export let relational = false;
|
||||
export let nodes = [];
|
||||
export let expandedNodes = [];
|
||||
export let disabledNodes = [];
|
||||
export let checkedNodes = [];
|
||||
export let indeterminateNodes = [];
|
||||
export let width = "w-full";
|
||||
export let spacing = "space-y-1";
|
||||
export let open = false;
|
||||
export let disabled = false;
|
||||
export let padding = "py-4 px-4";
|
||||
export let indent = "ml-4";
|
||||
export let hover = "hover:variant-soft";
|
||||
export let rounded = "rounded-container-token";
|
||||
export let caretOpen = "rotate-180";
|
||||
export let caretClosed = "";
|
||||
export let hyphenOpacity = "opacity-10";
|
||||
export let regionSummary = "";
|
||||
export let regionSymbol = "";
|
||||
export let regionChildren = "";
|
||||
export let labelledby = "";
|
||||
setContext("open", open);
|
||||
setContext("selection", selection);
|
||||
setContext("multiple", multiple);
|
||||
setContext("relational", relational);
|
||||
setContext("disabled", disabled);
|
||||
setContext("padding", padding);
|
||||
setContext("indent", indent);
|
||||
setContext("hover", hover);
|
||||
setContext("rounded", rounded);
|
||||
setContext("caretOpen", caretOpen);
|
||||
setContext("caretClosed", caretClosed);
|
||||
setContext("hyphenOpacity", hyphenOpacity);
|
||||
setContext("regionSummary", regionSummary);
|
||||
setContext("regionSymbol", regionSymbol);
|
||||
setContext("regionChildren", regionChildren);
|
||||
const dispatch = createEventDispatcher();
|
||||
function onClick(event) {
|
||||
dispatch("click", {
|
||||
id: event.detail.id
|
||||
});
|
||||
}
|
||||
function onToggle(event) {
|
||||
dispatch("toggle", {
|
||||
id: event.detail.id
|
||||
});
|
||||
}
|
||||
$:
|
||||
classesBase = `${width} ${spacing} ${$$props.class ?? ""}`;
|
||||
</script>
|
||||
|
||||
<div
|
||||
class="tree {classesBase}"
|
||||
data-testid="tree"
|
||||
role="tree"
|
||||
aria-multiselectable={multiple}
|
||||
aria-label={labelledby}
|
||||
aria-disabled={disabled}
|
||||
>
|
||||
{#if nodes && nodes.length > 0}
|
||||
<RecursiveTreeViewItem
|
||||
{nodes}
|
||||
bind:expandedNodes
|
||||
bind:disabledNodes
|
||||
bind:checkedNodes
|
||||
bind:indeterminateNodes
|
||||
on:click={onClick}
|
||||
on:toggle={onToggle}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
67
node_modules/@skeletonlabs/skeleton/dist/components/TreeView/RecursiveTreeView.svelte.d.ts
generated
vendored
Normal file
67
node_modules/@skeletonlabs/skeleton/dist/components/TreeView/RecursiveTreeView.svelte.d.ts
generated
vendored
Normal file
@ -0,0 +1,67 @@
|
||||
import { SvelteComponentTyped } from "svelte";
|
||||
import type { TreeViewNode } from '../../index.js';
|
||||
declare const __propDef: {
|
||||
props: {
|
||||
[x: string]: any;
|
||||
/** Enable tree-view selection.*/
|
||||
selection?: boolean | undefined;
|
||||
/** Enable selection of multiple items.*/
|
||||
multiple?: boolean | undefined;
|
||||
/** Enable relational checking.*/
|
||||
relational?: boolean | undefined;
|
||||
/** Provide data-driven nodes.*/
|
||||
nodes?: TreeViewNode[] | undefined;
|
||||
/** provides id's of expanded nodes*/
|
||||
expandedNodes?: string[] | undefined;
|
||||
/** provides id's of disabled nodes*/
|
||||
disabledNodes?: string[] | undefined;
|
||||
/** provides id's of checked nodes*/
|
||||
checkedNodes?: string[] | undefined;
|
||||
/** provides id's of indeterminate nodes*/
|
||||
indeterminateNodes?: string[] | undefined;
|
||||
/** Provide classes to set the tree width.*/
|
||||
width?: string | undefined;
|
||||
/** Provide classes to set the vertical spacing between items.*/
|
||||
spacing?: string | undefined;
|
||||
/** Set open by default on load.*/
|
||||
open?: boolean | undefined;
|
||||
/** Set the tree disabled state*/
|
||||
disabled?: boolean | undefined;
|
||||
/** Provide classes to set the tree item padding styles.*/
|
||||
padding?: string | undefined;
|
||||
/** Provide classes to set the tree children indentation*/
|
||||
indent?: string | undefined;
|
||||
/** Provide classes to set the tree item hover styles.*/
|
||||
hover?: string | undefined;
|
||||
/** Provide classes to set the tree item rounded styles.*/
|
||||
rounded?: string | undefined;
|
||||
/** Set the rotation of the item caret in the open state.*/
|
||||
caretOpen?: string | undefined;
|
||||
/** Set the rotation of the item caret in the closed state.*/
|
||||
caretClosed?: string | undefined;
|
||||
hyphenOpacity?: string | undefined;
|
||||
/** Provide arbitrary classes to the tree item summary region.*/
|
||||
regionSummary?: string | undefined;
|
||||
/** Provide arbitrary classes to the symbol icon region.*/
|
||||
regionSymbol?: string | undefined;
|
||||
/** Provide arbitrary classes to the children region.*/
|
||||
regionChildren?: string | undefined;
|
||||
/** Provide the ARIA labelledby value.*/
|
||||
labelledby?: string | undefined;
|
||||
};
|
||||
events: {
|
||||
/** {{id:string}} click - Fires on tree item click*/
|
||||
click: CustomEvent<any>;
|
||||
/** {{id:string}} toggle - Fires on tree item toggle*/
|
||||
toggle: CustomEvent<any>;
|
||||
} & {
|
||||
[evt: string]: CustomEvent<any>;
|
||||
};
|
||||
slots: {};
|
||||
};
|
||||
export type RecursiveTreeViewProps = typeof __propDef.props;
|
||||
export type RecursiveTreeViewEvents = typeof __propDef.events;
|
||||
export type RecursiveTreeViewSlots = typeof __propDef.slots;
|
||||
export default class RecursiveTreeView extends SvelteComponentTyped<RecursiveTreeViewProps, RecursiveTreeViewEvents, RecursiveTreeViewSlots> {
|
||||
}
|
||||
export {};
|
||||
140
node_modules/@skeletonlabs/skeleton/dist/components/TreeView/RecursiveTreeViewItem.svelte
generated
vendored
Normal file
140
node_modules/@skeletonlabs/skeleton/dist/components/TreeView/RecursiveTreeViewItem.svelte
generated
vendored
Normal file
@ -0,0 +1,140 @@
|
||||
<script>import TreeViewItem from "./TreeViewItem.svelte";
|
||||
import RecursiveTreeViewItem from "./RecursiveTreeViewItem.svelte";
|
||||
import { createEventDispatcher, getContext, onMount, tick } from "svelte";
|
||||
export let nodes = [];
|
||||
export let expandedNodes = [];
|
||||
export let disabledNodes = [];
|
||||
export let checkedNodes = [];
|
||||
export let indeterminateNodes = [];
|
||||
let selection = getContext("selection");
|
||||
let multiple = getContext("multiple");
|
||||
let relational = getContext("relational");
|
||||
let tempCheckedNodes = [];
|
||||
let group;
|
||||
let name = "";
|
||||
const dispatch = createEventDispatcher();
|
||||
function toggleNode(node, open) {
|
||||
if (!node.children?.length)
|
||||
return;
|
||||
if (open) {
|
||||
if (!expandedNodes.includes(node.id)) {
|
||||
expandedNodes.push(node.id);
|
||||
expandedNodes = expandedNodes;
|
||||
}
|
||||
} else {
|
||||
if (expandedNodes.includes(node.id)) {
|
||||
expandedNodes.splice(expandedNodes.indexOf(node.id), 1);
|
||||
expandedNodes = expandedNodes;
|
||||
}
|
||||
}
|
||||
}
|
||||
function checkNode(node, checked, indeterminate) {
|
||||
if (checked) {
|
||||
if (!checkedNodes.includes(node.id)) {
|
||||
checkedNodes.push(node.id);
|
||||
checkedNodes = checkedNodes;
|
||||
}
|
||||
if (!indeterminate && indeterminateNodes.includes(node.id)) {
|
||||
indeterminateNodes.splice(indeterminateNodes.indexOf(node.id), 1);
|
||||
indeterminateNodes = indeterminateNodes;
|
||||
}
|
||||
} else {
|
||||
if (checkedNodes.includes(node.id)) {
|
||||
checkedNodes.splice(checkedNodes.indexOf(node.id), 1);
|
||||
checkedNodes = checkedNodes;
|
||||
}
|
||||
if (indeterminate && !indeterminateNodes.includes(node.id)) {
|
||||
indeterminateNodes.push(node.id);
|
||||
indeterminateNodes = indeterminateNodes;
|
||||
} else if (!indeterminate && indeterminateNodes.includes(node.id)) {
|
||||
indeterminateNodes.splice(indeterminateNodes.indexOf(node.id), 1);
|
||||
indeterminateNodes = indeterminateNodes;
|
||||
}
|
||||
}
|
||||
}
|
||||
tempCheckedNodes = [...checkedNodes];
|
||||
onMount(async () => {
|
||||
if (selection) {
|
||||
name = String(Math.random());
|
||||
if (group === void 0) {
|
||||
if (multiple) {
|
||||
group = [];
|
||||
nodes.forEach((node) => {
|
||||
if (checkedNodes.includes(node.id) && Array.isArray(group))
|
||||
group.push(node.id);
|
||||
});
|
||||
group = group;
|
||||
} else if (!nodes.some((node) => checkedNodes.includes(node.id))) {
|
||||
group = "";
|
||||
}
|
||||
}
|
||||
if (!relational)
|
||||
treeItems = [];
|
||||
checkedNodes = [];
|
||||
await tick();
|
||||
checkedNodes = [...tempCheckedNodes];
|
||||
}
|
||||
});
|
||||
export let treeItems = [];
|
||||
let children = [];
|
||||
</script>
|
||||
|
||||
{#if nodes && nodes.length > 0}
|
||||
{#each nodes as node, i}
|
||||
<TreeViewItem
|
||||
bind:this={treeItems[i]}
|
||||
bind:children={children[i]}
|
||||
bind:group
|
||||
bind:name
|
||||
bind:value={node.id}
|
||||
hideLead={!node.lead}
|
||||
hideChildren={!node.children || node.children.length === 0}
|
||||
open={expandedNodes.includes(node.id)}
|
||||
disabled={disabledNodes.includes(node.id)}
|
||||
checked={checkedNodes.includes(node.id)}
|
||||
indeterminate={indeterminateNodes.includes(node.id)}
|
||||
on:toggle={(e) => toggleNode(node, e.detail.open)}
|
||||
on:groupChange={(e) => checkNode(node, e.detail.checked, e.detail.indeterminate)}
|
||||
on:click={() =>
|
||||
dispatch('click', {
|
||||
id: node.id
|
||||
})}
|
||||
on:toggle={() => {
|
||||
dispatch('toggle', {
|
||||
id: node.id
|
||||
});
|
||||
}}
|
||||
>
|
||||
{#if typeof node.content === 'string'}
|
||||
{@html node.content}
|
||||
{:else}
|
||||
<svelte:component this={node.content} {...node.contentProps} />
|
||||
{/if}
|
||||
<svelte:fragment slot="lead">
|
||||
{#if typeof node.lead === 'string'}
|
||||
{@html node.lead}
|
||||
{:else}
|
||||
<svelte:component this={node.lead} {...node.leadProps} />
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
<svelte:fragment slot="children">
|
||||
<RecursiveTreeViewItem
|
||||
nodes={node.children}
|
||||
bind:expandedNodes
|
||||
bind:disabledNodes
|
||||
bind:checkedNodes
|
||||
bind:indeterminateNodes
|
||||
bind:treeItems={children[i]}
|
||||
on:click={(e) =>
|
||||
dispatch('click', {
|
||||
id: e.detail.id
|
||||
})}
|
||||
on:toggle={(e) =>
|
||||
dispatch('toggle', {
|
||||
id: e.detail.id
|
||||
})}
|
||||
/>
|
||||
</svelte:fragment>
|
||||
</TreeViewItem>
|
||||
{/each}
|
||||
{/if}
|
||||
38
node_modules/@skeletonlabs/skeleton/dist/components/TreeView/RecursiveTreeViewItem.svelte.d.ts
generated
vendored
Normal file
38
node_modules/@skeletonlabs/skeleton/dist/components/TreeView/RecursiveTreeViewItem.svelte.d.ts
generated
vendored
Normal file
@ -0,0 +1,38 @@
|
||||
import { SvelteComponentTyped } from "svelte";
|
||||
import TreeViewItem from './TreeViewItem.svelte';
|
||||
import type { TreeViewNode } from './types.js';
|
||||
declare const __propDef: {
|
||||
props: {
|
||||
/** Provide data-driven nodes. */ nodes?: TreeViewNode[] | undefined;
|
||||
/**
|
||||
* provides id's of expanded nodes
|
||||
* @type {string[]}
|
||||
*/ expandedNodes?: string[] | undefined;
|
||||
/**
|
||||
* provides id's of disabled nodes
|
||||
* @type {string[]}
|
||||
*/ disabledNodes?: string[] | undefined;
|
||||
/**
|
||||
* provides id's of checked nodes
|
||||
* @type {string[]}
|
||||
*/ checkedNodes?: string[] | undefined;
|
||||
/**
|
||||
* provides id's of indeterminate nodes
|
||||
* @type {string[]}
|
||||
*/ indeterminateNodes?: string[] | undefined;
|
||||
treeItems?: TreeViewItem[] | undefined;
|
||||
};
|
||||
events: {
|
||||
click: CustomEvent<any>;
|
||||
toggle: CustomEvent<any>;
|
||||
} & {
|
||||
[evt: string]: CustomEvent<any>;
|
||||
};
|
||||
slots: {};
|
||||
};
|
||||
export type RecursiveTreeViewItemProps = typeof __propDef.props;
|
||||
export type RecursiveTreeViewItemEvents = typeof __propDef.events;
|
||||
export type RecursiveTreeViewItemSlots = typeof __propDef.slots;
|
||||
export default class RecursiveTreeViewItem extends SvelteComponentTyped<RecursiveTreeViewItemProps, RecursiveTreeViewItemEvents, RecursiveTreeViewItemSlots> {
|
||||
}
|
||||
export {};
|
||||
68
node_modules/@skeletonlabs/skeleton/dist/components/TreeView/TreeView.svelte
generated
vendored
Normal file
68
node_modules/@skeletonlabs/skeleton/dist/components/TreeView/TreeView.svelte
generated
vendored
Normal file
@ -0,0 +1,68 @@
|
||||
<script>import { setContext } from "svelte";
|
||||
export let selection = false;
|
||||
export let multiple = false;
|
||||
export let width = "w-full";
|
||||
export let spacing = "space-y-1";
|
||||
export let open = false;
|
||||
export let disabled = false;
|
||||
export let padding = "py-4 px-4";
|
||||
export let indent = "ml-4";
|
||||
export let hover = "hover:variant-soft";
|
||||
export let rounded = "rounded-container-token";
|
||||
export let caretOpen = "rotate-180";
|
||||
export let caretClosed = "";
|
||||
export let hyphenOpacity = "opacity-10";
|
||||
export let regionSummary = "";
|
||||
export let regionSymbol = "";
|
||||
export let regionChildren = "";
|
||||
export let labelledby = "";
|
||||
export function expandAll() {
|
||||
const detailsElements = tree.querySelectorAll("details.tree-item");
|
||||
detailsElements.forEach((details) => {
|
||||
if (!details.open) {
|
||||
const summary = details.querySelector("summary.tree-item-summary");
|
||||
if (summary)
|
||||
summary.click();
|
||||
}
|
||||
});
|
||||
}
|
||||
export function collapseAll() {
|
||||
const detailsElements = tree.querySelectorAll("details.tree-item");
|
||||
detailsElements.forEach((details) => {
|
||||
if (details.open) {
|
||||
const summary = details.querySelector("summary.tree-item-summary");
|
||||
if (summary)
|
||||
summary.click();
|
||||
}
|
||||
});
|
||||
}
|
||||
setContext("open", open);
|
||||
setContext("selection", selection);
|
||||
setContext("multiple", multiple);
|
||||
setContext("disabled", disabled);
|
||||
setContext("padding", padding);
|
||||
setContext("indent", indent);
|
||||
setContext("hover", hover);
|
||||
setContext("rounded", rounded);
|
||||
setContext("caretOpen", caretOpen);
|
||||
setContext("caretClosed", caretClosed);
|
||||
setContext("hyphenOpacity", hyphenOpacity);
|
||||
setContext("regionSummary", regionSummary);
|
||||
setContext("regionSymbol", regionSymbol);
|
||||
setContext("regionChildren", regionChildren);
|
||||
$:
|
||||
classesBase = `${width} ${spacing} ${$$props.class ?? ""}`;
|
||||
let tree;
|
||||
</script>
|
||||
|
||||
<div
|
||||
bind:this={tree}
|
||||
class="tree {classesBase}"
|
||||
data-testid="tree"
|
||||
role="tree"
|
||||
aria-multiselectable={multiple}
|
||||
aria-label={labelledby}
|
||||
aria-disabled={disabled}
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
55
node_modules/@skeletonlabs/skeleton/dist/components/TreeView/TreeView.svelte.d.ts
generated
vendored
Normal file
55
node_modules/@skeletonlabs/skeleton/dist/components/TreeView/TreeView.svelte.d.ts
generated
vendored
Normal file
@ -0,0 +1,55 @@
|
||||
import { SvelteComponentTyped } from "svelte";
|
||||
declare const __propDef: {
|
||||
props: {
|
||||
[x: string]: any;
|
||||
/** Enable tree-view selection.*/
|
||||
selection?: boolean | undefined;
|
||||
/** Enable selection of multiple items.*/
|
||||
multiple?: boolean | undefined;
|
||||
/** Provide classes to set the tree width.*/
|
||||
width?: string | undefined;
|
||||
/** Provide classes to set the vertical spacing between items.*/
|
||||
spacing?: string | undefined;
|
||||
/** Set open by default on load.*/
|
||||
open?: boolean | undefined;
|
||||
/** Set the tree disabled state*/
|
||||
disabled?: boolean | undefined;
|
||||
/** Provide classes to set the tree item padding styles.*/
|
||||
padding?: string | undefined;
|
||||
/** Provide classes to set the tree children indentation*/
|
||||
indent?: string | undefined;
|
||||
/** Provide classes to set the tree item hover styles.*/
|
||||
hover?: string | undefined;
|
||||
/** Provide classes to set the tree item rounded styles.*/
|
||||
rounded?: string | undefined;
|
||||
/** Set the rotation of the item caret in the open state.*/
|
||||
caretOpen?: string | undefined;
|
||||
/** Set the rotation of the item caret in the closed state.*/
|
||||
caretClosed?: string | undefined;
|
||||
hyphenOpacity?: string | undefined;
|
||||
/** Provide arbitrary classes to the tree item summary region.*/
|
||||
regionSummary?: string | undefined;
|
||||
/** Provide arbitrary classes to the symbol icon region.*/
|
||||
regionSymbol?: string | undefined;
|
||||
/** Provide arbitrary classes to the children region.*/
|
||||
regionChildren?: string | undefined;
|
||||
/** Provide the ARIA labelledby value.*/
|
||||
labelledby?: string | undefined;
|
||||
expandAll?: (() => void) | undefined;
|
||||
collapseAll?: (() => void) | undefined;
|
||||
};
|
||||
events: {
|
||||
[evt: string]: CustomEvent<any>;
|
||||
};
|
||||
slots: {
|
||||
default: {};
|
||||
};
|
||||
};
|
||||
export type TreeViewProps = typeof __propDef.props;
|
||||
export type TreeViewEvents = typeof __propDef.events;
|
||||
export type TreeViewSlots = typeof __propDef.slots;
|
||||
export default class TreeView extends SvelteComponentTyped<TreeViewProps, TreeViewEvents, TreeViewSlots> {
|
||||
get expandAll(): () => void;
|
||||
get collapseAll(): () => void;
|
||||
}
|
||||
export {};
|
||||
323
node_modules/@skeletonlabs/skeleton/dist/components/TreeView/TreeViewItem.svelte
generated
vendored
Normal file
323
node_modules/@skeletonlabs/skeleton/dist/components/TreeView/TreeViewItem.svelte
generated
vendored
Normal file
@ -0,0 +1,323 @@
|
||||
<!-- To access props and events using reference -->
|
||||
<svelte:options accessors />
|
||||
|
||||
<script>import { getContext, createEventDispatcher, onMount } from "svelte";
|
||||
export let group = void 0;
|
||||
export let name = void 0;
|
||||
export let value = void 0;
|
||||
export let checked = false;
|
||||
export let children = [];
|
||||
export let spacing = "space-x-4";
|
||||
export let open = getContext("open");
|
||||
export let selection = getContext("selection");
|
||||
export let multiple = getContext("multiple");
|
||||
export let disabled = getContext("disabled");
|
||||
export let indeterminate = false;
|
||||
export let padding = getContext("padding");
|
||||
export let indent = getContext("indent");
|
||||
export let hover = getContext("hover");
|
||||
export let rounded = getContext("rounded");
|
||||
export let caretOpen = getContext("caretOpen");
|
||||
export let caretClosed = getContext("caretClosed");
|
||||
export let hyphenOpacity = getContext("hyphenOpacity");
|
||||
export let regionSummary = getContext("regionSummary");
|
||||
export let regionSymbol = getContext("regionSymbol");
|
||||
export let regionChildren = getContext("regionChildren");
|
||||
export let hideLead = false;
|
||||
export let hideChildren = false;
|
||||
let treeItem;
|
||||
let childrenDiv;
|
||||
function onSummaryClick(event) {
|
||||
if (disabled)
|
||||
event.preventDefault();
|
||||
}
|
||||
$:
|
||||
if (multiple)
|
||||
updateCheckbox(group, indeterminate);
|
||||
$:
|
||||
if (multiple)
|
||||
updateGroup(checked, indeterminate);
|
||||
$:
|
||||
if (!multiple)
|
||||
updateRadio(group);
|
||||
$:
|
||||
if (!multiple)
|
||||
updateRadioGroup(checked);
|
||||
let initUpdate = true;
|
||||
function updateCheckbox(group2, indeterminate2) {
|
||||
if (!Array.isArray(group2))
|
||||
return;
|
||||
checked = group2.indexOf(value) >= 0;
|
||||
dispatch("groupChange", { checked, indeterminate: indeterminate2 });
|
||||
dispatch("childChange");
|
||||
if (initUpdate) {
|
||||
onParentChange();
|
||||
initUpdate = false;
|
||||
}
|
||||
}
|
||||
function updateGroup(checked2, indeterminate2) {
|
||||
if (!Array.isArray(group))
|
||||
return;
|
||||
const index = group.indexOf(value);
|
||||
if (checked2) {
|
||||
if (index < 0) {
|
||||
group.push(value);
|
||||
group = group;
|
||||
onParentChange();
|
||||
}
|
||||
} else {
|
||||
if (index >= 0) {
|
||||
group.splice(index, 1);
|
||||
group = group;
|
||||
onParentChange();
|
||||
}
|
||||
}
|
||||
}
|
||||
function updateRadio(group2) {
|
||||
checked = group2 === value;
|
||||
dispatch("groupChange", { checked, indeterminate: false });
|
||||
if (group2)
|
||||
dispatch("childChange");
|
||||
}
|
||||
function updateRadioGroup(checked2) {
|
||||
if (checked2 && group !== value)
|
||||
group = value;
|
||||
else if (!checked2 && group === value)
|
||||
group = "";
|
||||
}
|
||||
function onChildValueChange() {
|
||||
if (multiple) {
|
||||
if (!Array.isArray(group))
|
||||
return;
|
||||
const childrenValues = children.map((c) => c.value);
|
||||
const childrenGroup = children[0].group;
|
||||
const index = group.indexOf(value);
|
||||
if (children.some((c) => c.indeterminate)) {
|
||||
indeterminate = true;
|
||||
if (index >= 0) {
|
||||
group.splice(index, 1);
|
||||
group = group;
|
||||
}
|
||||
} else if (childrenValues.every((c) => Array.isArray(childrenGroup) && childrenGroup.includes(c))) {
|
||||
indeterminate = false;
|
||||
if (index < 0) {
|
||||
group.push(value);
|
||||
group = group;
|
||||
}
|
||||
} else if (childrenValues.some((c) => Array.isArray(childrenGroup) && childrenGroup.includes(c))) {
|
||||
indeterminate = true;
|
||||
if (index >= 0) {
|
||||
group.splice(index, 1);
|
||||
group = group;
|
||||
}
|
||||
} else {
|
||||
indeterminate = false;
|
||||
if (index >= 0) {
|
||||
group.splice(index, 1);
|
||||
group = group;
|
||||
}
|
||||
}
|
||||
} else {
|
||||
if (group !== value && children.some((c) => c.checked)) {
|
||||
group = value;
|
||||
} else if (group === value && !children.some((c) => c.checked)) {
|
||||
group = "";
|
||||
}
|
||||
}
|
||||
dispatch("childChange");
|
||||
}
|
||||
export function onParentChange() {
|
||||
if (!multiple || !children || children.length === 0)
|
||||
return;
|
||||
if (!Array.isArray(group))
|
||||
return;
|
||||
const index = group.indexOf(value);
|
||||
const checkChild = (child) => {
|
||||
if (!child || !Array.isArray(child.group))
|
||||
return;
|
||||
child.indeterminate = false;
|
||||
if (child.group.indexOf(child.value) < 0) {
|
||||
child.group.push(child.value);
|
||||
child.group = child.group;
|
||||
}
|
||||
};
|
||||
const uncheckChild = (child) => {
|
||||
if (!child || !Array.isArray(child.group))
|
||||
return;
|
||||
child.indeterminate = false;
|
||||
const childIndex = child.group.indexOf(child.value);
|
||||
if (childIndex >= 0) {
|
||||
child.group.splice(childIndex, 1);
|
||||
child.group = child.group;
|
||||
}
|
||||
};
|
||||
children.forEach((child) => {
|
||||
if (!child)
|
||||
return;
|
||||
index >= 0 ? checkChild(child) : uncheckChild(child);
|
||||
child.onParentChange();
|
||||
});
|
||||
}
|
||||
$:
|
||||
if (!multiple && group !== void 0) {
|
||||
if (group !== value) {
|
||||
children.forEach((child) => {
|
||||
if (child)
|
||||
child.group = "";
|
||||
});
|
||||
}
|
||||
}
|
||||
const dispatch = createEventDispatcher();
|
||||
$:
|
||||
dispatch("toggle", { open });
|
||||
$:
|
||||
children.forEach((child) => {
|
||||
if (child)
|
||||
child.$on("childChange", onChildValueChange);
|
||||
});
|
||||
function onKeyDown(event) {
|
||||
function getRootTree() {
|
||||
let currentElement = treeItem;
|
||||
while (currentElement !== null) {
|
||||
if (currentElement.classList.contains("tree"))
|
||||
return currentElement;
|
||||
currentElement = currentElement.parentElement;
|
||||
}
|
||||
return void 0;
|
||||
}
|
||||
let rootTree = void 0;
|
||||
let lastVisibleElement = null;
|
||||
switch (event.code) {
|
||||
case "ArrowRight":
|
||||
if (!open)
|
||||
open = true;
|
||||
else if ($$slots.children && !hideChildren) {
|
||||
const child = childrenDiv.querySelector("details>summary");
|
||||
if (child)
|
||||
child.focus();
|
||||
}
|
||||
break;
|
||||
case "ArrowLeft":
|
||||
if (open)
|
||||
open = false;
|
||||
else {
|
||||
const parent = treeItem.parentElement?.parentElement;
|
||||
if (parent && parent.tagName === "DETAILS")
|
||||
parent.querySelector("summary")?.focus();
|
||||
}
|
||||
break;
|
||||
case "Home":
|
||||
event.preventDefault();
|
||||
rootTree = getRootTree();
|
||||
if (rootTree)
|
||||
rootTree?.querySelector("summary")?.focus();
|
||||
break;
|
||||
case "End":
|
||||
event.preventDefault();
|
||||
rootTree = getRootTree();
|
||||
if (rootTree) {
|
||||
const detailsElements = rootTree?.querySelectorAll("details");
|
||||
if (!detailsElements)
|
||||
return;
|
||||
for (let i = detailsElements.length - 1; i >= 0; i--) {
|
||||
const details = detailsElements[i];
|
||||
if (details.parentElement?.classList?.contains("tree") || details.parentElement?.parentElement?.getAttribute("open") !== null) {
|
||||
lastVisibleElement = details;
|
||||
break;
|
||||
} else if (details.parentElement?.parentElement?.tagName !== "details") {
|
||||
lastVisibleElement = details.parentElement.parentElement;
|
||||
break;
|
||||
}
|
||||
}
|
||||
if (lastVisibleElement) {
|
||||
const summary = lastVisibleElement.querySelector("summary");
|
||||
if (summary)
|
||||
summary.focus();
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
}
|
||||
const cBase = "";
|
||||
const cSummary = "list-none [&::-webkit-details-marker]:hidden flex items-center cursor-pointer";
|
||||
const cSymbol = "fill-current w-3 text-center transition-transform duration-[200ms]";
|
||||
const cChildren = "";
|
||||
const cDisabled = "opacity-50 !cursor-not-allowed";
|
||||
$:
|
||||
classesCaretState = open && $$slots.children && !hideChildren ? caretOpen : caretClosed;
|
||||
$:
|
||||
classesDisabled = disabled ? cDisabled : "";
|
||||
$:
|
||||
classesBase = `${cBase} ${$$props.class ?? ""}`;
|
||||
$:
|
||||
classesSummary = `${cSummary} ${classesDisabled} ${spacing} ${rounded} ${padding} ${hover} ${regionSummary}`;
|
||||
$:
|
||||
classesSymbol = `${cSymbol} ${classesCaret} ${regionSymbol}`;
|
||||
$:
|
||||
classesCaret = `${classesCaretState}`;
|
||||
$:
|
||||
classesHyphen = `${hyphenOpacity}`;
|
||||
$:
|
||||
classesChildren = `${cChildren} ${indent} ${regionChildren}`;
|
||||
</script>
|
||||
|
||||
<details bind:this={treeItem} bind:open class="tree-item {classesBase}" data-testid="tree-item" aria-disabled={disabled}>
|
||||
<summary
|
||||
class="tree-item-summary {classesSummary}"
|
||||
role="treeitem"
|
||||
aria-selected={selection ? checked : undefined}
|
||||
aria-expanded={$$slots.children ? open : undefined}
|
||||
on:click={onSummaryClick}
|
||||
on:click
|
||||
on:keydown={onKeyDown}
|
||||
on:keydown
|
||||
on:keyup
|
||||
>
|
||||
<!-- Symbol -->
|
||||
<div class="tree-summary-symbol {classesSymbol}">
|
||||
{#if $$slots.children && !hideChildren}
|
||||
<!-- SVG Caret -->
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
|
||||
<path
|
||||
d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z"
|
||||
/>
|
||||
</svg>
|
||||
{:else}
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" class="w-3 {classesHyphen}">
|
||||
<path d="M432 256c0 17.7-14.3 32-32 32L48 288c-17.7 0-32-14.3-32-32s14.3-32 32-32l352 0c17.7 0 32 14.3 32 32z" />
|
||||
</svg>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<!-- Selection -->
|
||||
{#if selection && name && group !== undefined}
|
||||
{#if multiple}
|
||||
<input
|
||||
class="checkbox tree-item-checkbox"
|
||||
type="checkbox"
|
||||
{name}
|
||||
{value}
|
||||
bind:checked
|
||||
bind:indeterminate
|
||||
on:change={onParentChange}
|
||||
/>
|
||||
{:else}
|
||||
<input class="radio tree-item-radio" type="radio" bind:group {name} {value} />
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
<!-- Slot: Lead -->
|
||||
{#if $$slots.lead && !hideLead}
|
||||
<div class="tree-item-lead">
|
||||
<slot name="lead" />
|
||||
</div>
|
||||
{/if}
|
||||
<!-- Slot: Content -->
|
||||
<div class="tree-item-content">
|
||||
<slot />
|
||||
</div>
|
||||
</summary>
|
||||
<div bind:this={childrenDiv} class="tree-item-children {classesChildren}" role="group">
|
||||
<slot name="children" />
|
||||
</div>
|
||||
</details>
|
||||
145
node_modules/@skeletonlabs/skeleton/dist/components/TreeView/TreeViewItem.svelte.d.ts
generated
vendored
Normal file
145
node_modules/@skeletonlabs/skeleton/dist/components/TreeView/TreeViewItem.svelte.d.ts
generated
vendored
Normal file
@ -0,0 +1,145 @@
|
||||
import { SvelteComponentTyped } from "svelte";
|
||||
import type { TreeViewItem } from '../../index.js';
|
||||
declare const __propDef: {
|
||||
props: {
|
||||
[x: string]: any;
|
||||
/** Set the radio group binding value.*/
|
||||
group?: unknown;
|
||||
/** Set a unique name value for the input.*/
|
||||
name?: string | undefined;
|
||||
/** Set the input's value.*/
|
||||
value?: unknown;
|
||||
/** Set the input's check state*/
|
||||
checked?: boolean | undefined;
|
||||
/** Provide children references to support relational checking.*/
|
||||
children?: TreeViewItem[] | undefined;
|
||||
/** Provide classes to set the horizontal spacing.*/
|
||||
spacing?: string | undefined;
|
||||
/** Set open by default on load.*/
|
||||
open?: boolean | undefined;
|
||||
/** Enable tree-view selection*/
|
||||
selection?: boolean | undefined;
|
||||
/** Enable selection of multiple items.*/
|
||||
multiple?: boolean | undefined;
|
||||
/** Set the tree item disabled state*/
|
||||
disabled?: boolean | undefined;
|
||||
/** Set the check state to indeterminate(-).*/
|
||||
indeterminate?: boolean | undefined;
|
||||
/** Provide classes to set the tree item padding styles.*/
|
||||
padding?: string | undefined;
|
||||
/** Provide classes to set the tree children indentation*/
|
||||
indent?: string | undefined;
|
||||
/** Provide classes to set the tree item hover styles.*/
|
||||
hover?: string | undefined;
|
||||
/** Provide classes to set the tree item rounded styles.*/
|
||||
rounded?: string | undefined;
|
||||
/** Set the rotation of the item caret in the open state.*/
|
||||
caretOpen?: string | undefined;
|
||||
/** Set the rotation of the item caret in the closed state.*/
|
||||
caretClosed?: string | undefined;
|
||||
hyphenOpacity?: string | undefined;
|
||||
/** Provide arbitrary classes to the tree item summary region.*/
|
||||
regionSummary?: string | undefined;
|
||||
/** Provide arbitrary classes to the symbol icon region.*/
|
||||
regionSymbol?: string | undefined;
|
||||
/** Provide arbitrary classes to the children region.*/
|
||||
regionChildren?: string | undefined;
|
||||
/** Don't use this prop, workaround until svelte implements conditional slots*/
|
||||
hideLead?: boolean | undefined;
|
||||
/** Don't use this prop, workaround until svelte implements conditional slots*/
|
||||
hideChildren?: boolean | undefined;
|
||||
onParentChange?: (() => void) | undefined;
|
||||
};
|
||||
events: {
|
||||
click: MouseEvent;
|
||||
keydown: KeyboardEvent;
|
||||
keyup: KeyboardEvent;
|
||||
toggle: CustomEvent<any>;
|
||||
} & {
|
||||
[evt: string]: CustomEvent<any>;
|
||||
};
|
||||
slots: {
|
||||
lead: {};
|
||||
default: {};
|
||||
children: {};
|
||||
};
|
||||
};
|
||||
export type TreeViewItemProps = typeof __propDef.props;
|
||||
export type TreeViewItemEvents = typeof __propDef.events;
|
||||
export type TreeViewItemSlots = typeof __propDef.slots;
|
||||
export default class TreeViewItem extends SvelteComponentTyped<TreeViewItemProps, TreeViewItemEvents, TreeViewItemSlots> {
|
||||
get onParentChange(): () => void;
|
||||
get group(): unknown;
|
||||
/**accessor*/
|
||||
set group(_: unknown);
|
||||
get name(): string | undefined;
|
||||
/**accessor*/
|
||||
set name(_: string | undefined);
|
||||
get value(): unknown;
|
||||
/**accessor*/
|
||||
set value(_: unknown);
|
||||
get checked(): boolean | undefined;
|
||||
/**accessor*/
|
||||
set checked(_: boolean | undefined);
|
||||
get children(): TreeViewItem[] | undefined;
|
||||
/**accessor*/
|
||||
set children(_: TreeViewItem[] | undefined);
|
||||
get spacing(): string | undefined;
|
||||
/**accessor*/
|
||||
set spacing(_: string | undefined);
|
||||
get open(): boolean | undefined;
|
||||
/**accessor*/
|
||||
set open(_: boolean | undefined);
|
||||
get selection(): boolean | undefined;
|
||||
/**accessor*/
|
||||
set selection(_: boolean | undefined);
|
||||
get multiple(): boolean | undefined;
|
||||
/**accessor*/
|
||||
set multiple(_: boolean | undefined);
|
||||
get disabled(): boolean | undefined;
|
||||
/**accessor*/
|
||||
set disabled(_: boolean | undefined);
|
||||
get indeterminate(): boolean | undefined;
|
||||
/**accessor*/
|
||||
set indeterminate(_: boolean | undefined);
|
||||
get padding(): string | undefined;
|
||||
/**accessor*/
|
||||
set padding(_: string | undefined);
|
||||
get indent(): string | undefined;
|
||||
/**accessor*/
|
||||
set indent(_: string | undefined);
|
||||
get hover(): string | undefined;
|
||||
/**accessor*/
|
||||
set hover(_: string | undefined);
|
||||
get rounded(): string | undefined;
|
||||
/**accessor*/
|
||||
set rounded(_: string | undefined);
|
||||
get caretOpen(): string | undefined;
|
||||
/**accessor*/
|
||||
set caretOpen(_: string | undefined);
|
||||
get caretClosed(): string | undefined;
|
||||
/**accessor*/
|
||||
set caretClosed(_: string | undefined);
|
||||
get hyphenOpacity(): string | undefined;
|
||||
/**accessor*/
|
||||
set hyphenOpacity(_: string | undefined);
|
||||
get regionSummary(): string | undefined;
|
||||
/**accessor*/
|
||||
set regionSummary(_: string | undefined);
|
||||
get regionSymbol(): string | undefined;
|
||||
/**accessor*/
|
||||
set regionSymbol(_: string | undefined);
|
||||
get regionChildren(): string | undefined;
|
||||
/**accessor*/
|
||||
set regionChildren(_: string | undefined);
|
||||
get hideLead(): boolean | undefined;
|
||||
/**accessor*/
|
||||
set hideLead(_: boolean | undefined);
|
||||
get hideChildren(): boolean | undefined;
|
||||
/**accessor*/
|
||||
set hideChildren(_: boolean | undefined);
|
||||
get undefined(): any;
|
||||
/**accessor*/
|
||||
set undefined(_: any);
|
||||
}
|
||||
export {};
|
||||
17
node_modules/@skeletonlabs/skeleton/dist/components/TreeView/types.d.ts
generated
vendored
Normal file
17
node_modules/@skeletonlabs/skeleton/dist/components/TreeView/types.d.ts
generated
vendored
Normal file
@ -0,0 +1,17 @@
|
||||
import type { ComponentType } from 'svelte';
|
||||
export interface TreeViewNode {
|
||||
/** Nodes Unique ID */
|
||||
id: string;
|
||||
/** Main content. accepts HTML or svelte component. */
|
||||
content: string | ComponentType;
|
||||
/** Main content props. only used when the Content is a svelte component. */
|
||||
contentProps?: object;
|
||||
/** Lead content. accepts HTML or svelte component. */
|
||||
lead?: string | ComponentType;
|
||||
/** lead props. only used when the Lead is a svelte component. */
|
||||
leadProps?: object;
|
||||
/** children nodes. */
|
||||
children?: TreeViewNode[];
|
||||
/** Set the input's value. */
|
||||
value?: unknown;
|
||||
}
|
||||
1
node_modules/@skeletonlabs/skeleton/dist/components/TreeView/types.js
generated
vendored
Normal file
1
node_modules/@skeletonlabs/skeleton/dist/components/TreeView/types.js
generated
vendored
Normal file
@ -0,0 +1 @@
|
||||
export {};
|
||||
Reference in New Issue
Block a user