mirror of
https://github.com/carbon-design-system/carbon-components-svelte.git
synced 2025-09-15 10:21:05 +00:00
chore: format files with Prettier 3
This commit is contained in:
Eric Liu
parent
1dcd09bd98
commit
8e996dc683
391 changed files with 3725 additions and 3785 deletions
|
|
@ -99,7 +99,7 @@
|
|||
.filter(
|
||||
(node) =>
|
||||
filterNode(node) ||
|
||||
node.nodes?.some((child) => filterNode(child) && child.nodes)
|
||||
node.nodes?.some((child) => filterNode(child) && child.nodes),
|
||||
)
|
||||
.map((node) => node.id);
|
||||
}
|
||||
|
|
@ -198,7 +198,7 @@
|
|||
|
||||
onMount(() => {
|
||||
const firstFocusableNode = ref.querySelector(
|
||||
"li.bx--tree-node:not(.bx--tree-node--disabled)"
|
||||
"li.bx--tree-node:not(.bx--tree-node--disabled)",
|
||||
);
|
||||
|
||||
if (firstFocusableNode != null) {
|
||||
|
|
@ -242,7 +242,7 @@
|
|||
|
||||
{#if !hideLabel}
|
||||
<!-- svelte-ignore a11y-label-has-associated-control -->
|
||||
<label id="{labelId}" class:bx--label="{true}">
|
||||
<label id={labelId} class:bx--label={true}>
|
||||
<slot name="labelText">{labelText}</slot>
|
||||
</label>
|
||||
{/if}
|
||||
|
|
@ -251,18 +251,18 @@
|
|||
<ul
|
||||
{...$$restProps}
|
||||
role="tree"
|
||||
bind:this="{ref}"
|
||||
class:bx--tree="{true}"
|
||||
class:bx--tree--default="{size === 'default'}"
|
||||
class:bx--tree--compact="{size === 'compact'}"
|
||||
aria-label="{hideLabel ? labelText : undefined}"
|
||||
aria-labelledby="{!hideLabel ? labelId : undefined}"
|
||||
aria-multiselectable="{selectedIds.length > 1 || undefined}"
|
||||
bind:this={ref}
|
||||
class:bx--tree={true}
|
||||
class:bx--tree--default={size === "default"}
|
||||
class:bx--tree--compact={size === "compact"}
|
||||
aria-label={hideLabel ? labelText : undefined}
|
||||
aria-labelledby={!hideLabel ? labelId : undefined}
|
||||
aria-multiselectable={selectedIds.length > 1 || undefined}
|
||||
on:keydown
|
||||
on:keydown|stopPropagation="{handleKeyDown}"
|
||||
on:keydown|stopPropagation={handleKeyDown}
|
||||
>
|
||||
<TreeViewNodeList root nodes="{nodes}" let:node>
|
||||
<slot node="{node}">
|
||||
<TreeViewNodeList root {nodes} let:node>
|
||||
<slot {node}>
|
||||
{node.text}
|
||||
</slot>
|
||||
</TreeViewNodeList>
|
||||
|
|
|
|||
|
|
@ -87,46 +87,46 @@
|
|||
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
|
||||
<li
|
||||
bind:this="{ref}"
|
||||
bind:this={ref}
|
||||
role="treeitem"
|
||||
id="{id}"
|
||||
tabindex="{disabled ? undefined : -1}"
|
||||
aria-current="{id === $activeNodeId || undefined}"
|
||||
aria-selected="{disabled ? undefined : selected}"
|
||||
aria-disabled="{disabled}"
|
||||
class:bx--tree-node="{true}"
|
||||
class:bx--tree-leaf-node="{true}"
|
||||
class:bx--tree-node--active="{id === $activeNodeId}"
|
||||
class:bx--tree-node--selected="{selected}"
|
||||
class:bx--tree-node--disabled="{disabled}"
|
||||
class:bx--tree-node--with-icon="{icon}"
|
||||
on:click|stopPropagation="{() => {
|
||||
{id}
|
||||
tabindex={disabled ? undefined : -1}
|
||||
aria-current={id === $activeNodeId || undefined}
|
||||
aria-selected={disabled ? undefined : selected}
|
||||
aria-disabled={disabled}
|
||||
class:bx--tree-node={true}
|
||||
class:bx--tree-leaf-node={true}
|
||||
class:bx--tree-node--active={id === $activeNodeId}
|
||||
class:bx--tree-node--selected={selected}
|
||||
class:bx--tree-node--disabled={disabled}
|
||||
class:bx--tree-node--with-icon={icon}
|
||||
on:click|stopPropagation={() => {
|
||||
if (disabled) return;
|
||||
clickNode(node);
|
||||
}}"
|
||||
on:keydown="{(e) => {
|
||||
if (e.key === 'ArrowLeft' || e.key === 'ArrowRight' || e.key === 'Enter') {
|
||||
}}
|
||||
on:keydown={(e) => {
|
||||
if (e.key === "ArrowLeft" || e.key === "ArrowRight" || e.key === "Enter") {
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
if (e.key === 'ArrowLeft') {
|
||||
if (e.key === "ArrowLeft") {
|
||||
const parentNode = findParentTreeNode(ref.parentNode);
|
||||
if (parentNode) parentNode.focus();
|
||||
}
|
||||
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
if (disabled) return;
|
||||
clickNode(node);
|
||||
}
|
||||
}}"
|
||||
on:focus="{() => {
|
||||
}}
|
||||
on:focus={() => {
|
||||
focusNode(node);
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<div bind:this="{refLabel}" class:bx--tree-node__label="{true}">
|
||||
<svelte:component this="{icon}" class="bx--tree-node__icon" />
|
||||
<slot node="{node}">
|
||||
<div bind:this={refLabel} class:bx--tree-node__label={true}>
|
||||
<svelte:component this={icon} class="bx--tree-node__icon" />
|
||||
<slot {node}>
|
||||
{text}
|
||||
</slot>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -68,11 +68,11 @@
|
|||
{#each nodes as child (child.id)}
|
||||
{#if Array.isArray(child.nodes)}
|
||||
<svelte:self {...child} let:node>
|
||||
<slot node="{node}" />
|
||||
<slot {node} />
|
||||
</svelte:self>
|
||||
{:else}
|
||||
<TreeViewNode leaf {...child} let:node>
|
||||
<slot node="{node}" />
|
||||
<slot {node} />
|
||||
</TreeViewNode>
|
||||
{/if}
|
||||
{/each}
|
||||
|
|
@ -80,40 +80,40 @@
|
|||
{@const selected = $selectedNodeIds.includes(id)}
|
||||
<!-- svelte-ignore a11y-no-noninteractive-element-to-interactive-role -->
|
||||
<li
|
||||
bind:this="{ref}"
|
||||
bind:this={ref}
|
||||
role="treeitem"
|
||||
id="{id}"
|
||||
tabindex="{disabled ? undefined : -1}"
|
||||
aria-current="{id === $activeNodeId || undefined}"
|
||||
aria-selected="{disabled ? undefined : selected}"
|
||||
aria-disabled="{disabled}"
|
||||
class:bx--tree-node="{true}"
|
||||
class:bx--tree-parent-node="{true}"
|
||||
class:bx--tree-node--active="{id === $activeNodeId}"
|
||||
class:bx--tree-node--selected="{selected}"
|
||||
class:bx--tree-node--disabled="{disabled}"
|
||||
class:bx--tree-node--with-icon="{icon}"
|
||||
aria-expanded="{expanded}"
|
||||
on:click|stopPropagation="{() => {
|
||||
{id}
|
||||
tabindex={disabled ? undefined : -1}
|
||||
aria-current={id === $activeNodeId || undefined}
|
||||
aria-selected={disabled ? undefined : selected}
|
||||
aria-disabled={disabled}
|
||||
class:bx--tree-node={true}
|
||||
class:bx--tree-parent-node={true}
|
||||
class:bx--tree-node--active={id === $activeNodeId}
|
||||
class:bx--tree-node--selected={selected}
|
||||
class:bx--tree-node--disabled={disabled}
|
||||
class:bx--tree-node--with-icon={icon}
|
||||
aria-expanded={expanded}
|
||||
on:click|stopPropagation={() => {
|
||||
if (disabled) return;
|
||||
clickNode(node);
|
||||
}}"
|
||||
on:keydown="{(e) => {
|
||||
}}
|
||||
on:keydown={(e) => {
|
||||
if (
|
||||
e.key === 'ArrowLeft' ||
|
||||
e.key === 'ArrowRight' ||
|
||||
e.key === 'Enter'
|
||||
e.key === "ArrowLeft" ||
|
||||
e.key === "ArrowRight" ||
|
||||
e.key === "Enter"
|
||||
) {
|
||||
e.stopPropagation();
|
||||
}
|
||||
|
||||
if (parent && e.key === 'ArrowLeft') {
|
||||
if (parent && e.key === "ArrowLeft") {
|
||||
expanded = false;
|
||||
expandNode(node, false);
|
||||
toggleNode(node);
|
||||
}
|
||||
|
||||
if (parent && e.key === 'ArrowRight') {
|
||||
if (parent && e.key === "ArrowRight") {
|
||||
if (expanded) {
|
||||
ref.lastChild.firstElementChild?.focus();
|
||||
} else {
|
||||
|
|
@ -123,7 +123,7 @@
|
|||
}
|
||||
}
|
||||
|
||||
if (e.key === 'Enter' || e.key === ' ') {
|
||||
if (e.key === "Enter" || e.key === " ") {
|
||||
e.preventDefault();
|
||||
if (disabled) return;
|
||||
expanded = !expanded;
|
||||
|
|
@ -132,44 +132,44 @@
|
|||
expandNode(node, expanded);
|
||||
ref.focus();
|
||||
}
|
||||
}}"
|
||||
on:focus="{() => {
|
||||
}}
|
||||
on:focus={() => {
|
||||
focusNode(node);
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<div class:bx--tree-node__label="{true}" bind:this="{refLabel}">
|
||||
<div class:bx--tree-node__label={true} bind:this={refLabel}>
|
||||
<!-- svelte-ignore a11y-click-events-have-key-events -->
|
||||
<!-- svelte-ignore a11y-no-static-element-interactions -->
|
||||
<span
|
||||
class:bx--tree-parent-node__toggle="{true}"
|
||||
disabled="{disabled}"
|
||||
on:click="{() => {
|
||||
class:bx--tree-parent-node__toggle={true}
|
||||
{disabled}
|
||||
on:click={() => {
|
||||
if (disabled) return;
|
||||
expanded = !expanded;
|
||||
expandNode(node, expanded);
|
||||
toggleNode(node);
|
||||
}}"
|
||||
}}
|
||||
>
|
||||
<CaretDown
|
||||
class="bx--tree-parent-node__toggle-icon {expanded &&
|
||||
'bx--tree-parent-node__toggle-icon--expanded'}"
|
||||
/>
|
||||
</span>
|
||||
<span class:bx--tree-node__label__details="{true}">
|
||||
<svelte:component this="{icon}" class="bx--tree-node__icon" />
|
||||
<slot node="{{ ...node, selected, disabled }}" />
|
||||
<span class:bx--tree-node__label__details={true}>
|
||||
<svelte:component this={icon} class="bx--tree-node__icon" />
|
||||
<slot node={{ ...node, selected, disabled }} />
|
||||
</span>
|
||||
</div>
|
||||
{#if expanded}
|
||||
<ul role="group" class:bx--tree-node__children="{true}">
|
||||
<ul role="group" class:bx--tree-node__children={true}>
|
||||
{#each nodes as child (child.id)}
|
||||
{#if Array.isArray(child.nodes)}
|
||||
<svelte:self {...child} let:node>
|
||||
<slot node="{node}" />
|
||||
<slot {node} />
|
||||
</svelte:self>
|
||||
{:else}
|
||||
<TreeViewNode leaf {...child} let:node>
|
||||
<slot node="{node}">{node.text}</slot>
|
||||
<slot {node}>{node.text}</slot>
|
||||
</TreeViewNode>
|
||||
{/if}
|
||||
{/each}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue